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.
To use Panorama, simply launch the game without the
-legacyui option. Additional developer-only
functionality, like reload keybinds, can be enabled by running with
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
Reloading Your Changes
When running the game with
-dev, layouts, styles, and scripts can be reloaded by pressing
F8 with a panel focused.
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.
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.
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.
- CSGO CSS Properties - Strata Source currently uses all the CSS properties of CS:GO.
- CSGO Panorama Events - A majority of these events are either nonfunctional or not present in the Strata Source, however general events that do not pertain to CSGO should be present and functional.
You can also run these console commands to access up-to-date documentation:
dump_panorama_css_properties- Prints a list of the available CSS properties to the console, along with documentation for each property if documentation is written.
dump_panorama_events- Prints a list of Panorama events to the console, along with documentation for each event if documentation is written.