Panorama: Difference between revisions
Jump to navigation
Jump to search
.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
(Added a hub page for the Panorama UI system, since there are a lot of spread out hard-to-find articles) |
No edit summary |
||
| (7 intermediate revisions by 6 users not shown) | |||
| Line 1: | Line 1: | ||
''Not to be confused with [[ | [[File:Point_clientui_world_panel-example.jpg|320px|thumb|right|A world-space Panorama panel in SteamVR Home.]] | ||
''Not to be confused with [[Panorama Creation|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 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 | ==Games== | ||
Panorama is available in all {{source|4}} games after {{csgo|4}}, and is in all {{source2|4}} 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=== | |||
<li>.XML Layout Files - Used to set up the Panel layout and events. | |||
<li>.CSS Style Sheets - Used to set up panel appearance. | |||
<li>.JS JavaScript Code - Used for communication with the game and advanced UI behaviors. | |||
<li>.TXT Localization Files - Provides support for translating UI text. | |||
<li>.JPEG, .PNG Images | |||
==Articles== | |||
== Articles == | ;{{dota2|4}} | ||
: [[Dota 2_Workshop Tools/Panorama|Main Article]] | |||
;{{ | |||
: [[ | |||
: [[Dota 2 Workshop Tools/Panorama/Panels|Panels]] | : [[Dota 2 Workshop Tools/Panorama/Panels|Panels]] | ||
: [[Dota 2 Workshop Tools/Panorama/CSS Properties|CSS Properties]] | : [[Dota 2 Workshop Tools/Panorama/CSS Properties|CSS Properties]] | ||
| Line 22: | Line 29: | ||
: [[Dota 2 Workshop Tools/Panorama/Layout|Panorama Layout]] | : [[Dota 2 Workshop Tools/Panorama/Layout|Panorama Layout]] | ||
: [[Dota 2 Workshop Tools/Panorama/Javascript|JavaScript]] | : [[Dota 2 Workshop Tools/Panorama/Javascript|JavaScript]] | ||
: [[ | : [[Dota 2 Workshop Tools/Panorama/Javascript/API| JavaScript API]] | ||
: [[Dota 2 Workshop Tools/Panorama/Events|Events]] | : [[Dota 2 Workshop Tools/Panorama/Events|Events]] | ||
: [[ | : [[Dota 2 Workshop Tools/Panorama/GameUI_SetMouseCallback_Example|GameUI SetMouseCallback Example]] | ||
: [[ | : [[Dota 2 Workshop Tools/Panorama/Valve_Provided_UI|Valve Provided UI]] | ||
: [[ | : [[Dota 2 Workshop Tools/Panorama/Localization|Localization]] | ||
: [[ | : [[Dota 2 Workshop Tools/Panorama/Custom UI Manifest|Custom UI Manifest]] | ||
: [[ | : [[Dota 2 Workshop Tools/Custom_Nettables|Custom Nettables]] | ||
;{{svrh|4}} | |||
; | |||
: [[SteamVR/Environments/Adding a Welcome Panel|Adding a Welcome Panel]] | : [[SteamVR/Environments/Adding a Welcome Panel|Adding a Welcome Panel]] | ||
: [[SteamVR/Environments/Panorama_Javascript_API|JavaScript API]] | : [[SteamVR/Environments/Panorama_Javascript_API|JavaScript API]] | ||
: [[SteamVR/Environments/Scripting/ | : [[SteamVR/Environments/Scripting/Linking Lua with Javascript|Linking Lua with JavaScript]] | ||
;{{csgo|4}} | |||
: [[CSGO Panorama CSS Properties|CSS Properties]] | |||
: [[CS:GO Panorama Events|Events]] | |||
: [[CSGO Panorama API|JavaScript API]] | |||
[[Category:Panorama]] | [[Category:Panorama]] | ||
Latest revision as of 16:48, 16 March 2024
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 games after 
Counter-Strike: Global Offensive, and is in all 
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.
