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

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


    <Dota 2> Dota 2
    Main Article
    CSS Properties
    Panorama Debugger
    Panorama Layout
    JavaScript API
    GameUI SetMouseCallback Example
    Valve Provided UI
    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
    JavaScript API