Panorama

A world-space Panorama panel in SteamVR Home.

Not to be confused with panoramic images.

Panorama is a Valve-developed UI framework. It is heavily influenced by and closely resembles modern web authoring (HTML5/CSS/JS). It enables rapid development, high quality, and high performance interfaces as well as seamless integration with game content (3D models, particles, etc.)

Panorama is used in all Source 2 games and has been back-ported to Counter-Strike: Global Offensive.

Panorama Overview

See Dota_2_Workshop_Tools/Panorama for a comprehensive guide.

A Panorama UI is made up out of elements called Panels. These Panels form the building blocks of the UI (labels, images, buttons, etc). The way the Panels are laid out on the UI is described in .XML layout files, and their appearance is described in .CSS style sheets.

To communicate with the game Panorama uses the JavaScript scripting language. Scripts also enable creation of more complex UI effects and behavior than is possible with CSS style sheets alone. Scripts can either be separate .JS files or added inline in the .XML layout files. A separate Event system also allows communication between the panels within the same UI.

File Types

.XML Layout Files - Used to set up the Panel layout and events.

.CSS Style Sheets - Used to set up panel appearance.

.JS JavaScript Code - Used for communication with the game and advanced UI behaviors.

.TXT Localization Files - Provides support for translating UI text.

.JPEG, .PNG Images

Articles

Dota 2

Main Article

Panels

CSS Properties

Panorama Debugger

Panorama Layout

JavaScript

JavaScript API

Events

GameUI SetMouseCallback Example

Valve Provided UI

Localization

Custom UI Manifest

Custom Nettables

SteamVR Home

Adding a Welcome Panel

JavaScript API

Linking Lua with JavaScript

Counter-Strike: Global Offensive

CSS Properties

Events

JavaScript API