Panorama

From Valve Developer Community
Jump to navigation Jump to search
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.)

Games

Panorama is available in all Source Source games after Counter-Strike: Global Offensive Counter-Strike: Global Offensive, and is in all Source 2 Source 2 games.

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 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 SteamVR Home
    Adding a Welcome Panel
    JavaScript API
    Linking Lua with JavaScript
    Counter-Strike: Global Offensive Counter-Strike: Global Offensive
    CSS Properties
    Events
    JavaScript API