Strata Source

Documentation

Home ReferenceVScriptAngelscriptPanorama
GitHub
Edit

Panorama

Panorama is Valve’s own web-like UI framework used in various Source and Source 2 titles like CS:GO and Half-Life: Alyx. Panorama uses XML for layouts, JavaScript for scripting and a custom version of CSS for styling. The Strata fork of Panorama additionally supports SASS/SCSS for stylesheets without an additional compile step.

Portal 2: Community Edition and Momentum mod both make extensive use of Panorama for their new UI, and it’s planned to be the replacement for VGUI.

Usage

To use Panorama, simply launch the game without the -legacyui option. Additional developer-only functionality, like reload keybinds, can be enabled by running with -dev.

Developing with Panorama

UI files can be found in <mod>/panorama, depending on the game. If you’re developing a p2ce mod, copy the p2ce panorama files into your mod directory, then modify them.

Some files are stored in platform/panorama but these should not be modified by the end user. If you do want to modify some element within platform/panorama, simply override the files by adding them to <game>/panorama.

Reloading Your Changes

When running the game with -dev, layouts, styles, and scripts can be reloaded by pressing F7 or F8 with a panel focused. Pressing F7 reloads everything that has changed since the last reload, and F8 forcibly reloads every Panorama UI file.

Panels that use the global v8 context need special care taken when writing scripts. Defining named types such as classes or functions should be completely avoided, since in global contexts, scripts aren’t reloaded, but rather re-executed in the same environment. The main menu’s script is a good example of a “global context safe” script.

Debugging

The panorama debugger can be toggled by entering panorama_debugger_toggle in the console, or by pressing F6 with a panel focused. The debugger is supported on Windows and Linux.

Editors to Use

When developing Panorama, it is recommended to use Visual Studio Code with the Panorama CSS Support extension active. This extension is developed by brae, a member of the Momentum team, and the source can be found here. The extension adds several quality of life features, including but not limited to autocomplete and highlighting.

Useful References

The Valve Developer Community wiki has several useful articles to assist with creating a UI in Panorama. Note that these articles target CSGO and do not cover any new Strata Source features.

You can also run these console commands to access up-to-date documentation: