Difference between revisions of "GUI Themes/STX Syntax"

Jump to navigation Jump to search

GUI Themes/STX Syntax (view source)

Revision as of 15:16, 25 October 2018

466 bytes added ,  15:16, 25 October 2018
m
Text replacement - "</source>" to "</syntaxhighlight>"
(→‎<text>: Update "text" draw step documentation.)
m (Text replacement - "</source>" to "</syntaxhighlight>")
(3 intermediate revisions by 2 users not shown)
Line 11: Line 11:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<render_info resolution = "320x240">
<render_info resolution = "y>399">
     ...
     ...
</render_info>
</render_info>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 23: Line 23:
===== Properties =====
===== Properties =====


* <tt>resolution [int x int]</tt>: Load only on a given resolution. See resolution-dependant keys.
* <tt>resolution [[x|y][<|>]int]</tt>: Load only on a given resolution. See resolution-dependant keys.


-----
-----
Line 35: Line 35:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<palette>
<palette>
     ...
     ...
</palette>
</palette>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 55: Line 55:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<color name = 'red'
<color name = 'red'
         rgb = '255, 0, 0'
         rgb = '255, 0, 0'
/>
/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 82: Line 82:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<bitmaps>
<bitmaps>
     ...
     ...
</bitmaps>
</bitmaps>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 103: Line 103:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<bitmap filename = 'logo.bmp'/>
<bitmap filename = 'logo.bmp'/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 116: Line 116:


* <tt>filename [string]</tt>: Path and filename to the bitmap file.
* <tt>filename [string]</tt>: Path and filename to the bitmap file.
* <tt>resolution [int x int]</tt>: Load only on a given resolution. See resolution-dependant keys.
* <tt>resolution [[x|y][<|>]int]</tt>: Load only on a given resolution. See resolution-dependant keys.


-----
-----
Line 128: Line 128:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<fonts>
<fonts>
     ...
     ...
</fonts>
</fonts>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 149: Line 149:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<font  id = 'text_default'
<font  id = 'text_default'
         file = 'default'
         file = 'default'
/>
/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 173: Line 173:
* <tt>id [string]</tt>: Unique font identifier.
* <tt>id [string]</tt>: Unique font identifier.
* <tt>file [string]</tt>: External Font file to load. Use &quot;default&quot; to let the renderer choose the most appropriate default font based on the active resolution (usually an builtin one).
* <tt>file [string]</tt>: External Font file to load. Use &quot;default&quot; to let the renderer choose the most appropriate default font based on the active resolution (usually an builtin one).
* <tt>resolution [int x int]</tt>: Load only on a given resolution. See resolution-dependant keys.
* <tt>resolution [[x|y][<|>]int]</tt>: Load only on a given resolution. See resolution-dependant keys.


-----
-----
Line 185: Line 185:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<text_color id = 'color_normal'
<text_color id = 'color_normal'
             color = 'black'
             color = 'black'
/>
/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 230: Line 230:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<defaults fill = 'gradient' fg_color = 'white' bevel_color = '237, 169, 72'/>
<defaults fill = 'gradient' fg_color = 'white' bevel_color = '237, 169, 72'/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 251: Line 251:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<cursor file = 'cursor.bmp' hotspot = '0, 0' scale = '3'/>
<cursor file = 'cursor.bmp' hotspot = '0, 0' scale = '3'/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 266: Line 266:
* <tt>hotspot [int, int]</tt>: Coordinates for the point in the bitmap which will be used for click calculations.
* <tt>hotspot [int, int]</tt>: Coordinates for the point in the bitmap which will be used for click calculations.
* <tt>scale [int]</tt>: Scale at which this cursor is supposed to be used.
* <tt>scale [int]</tt>: Scale at which this cursor is supposed to be used.
* <tt>resolution [int x int]</tt>: Load only on a given resolution. See resolution-dependant keys.
* <tt>resolution [[x|y][<|>]int]</tt>: Load only on a given resolution. See resolution-dependant keys.


-----
-----
Line 278: Line 278:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<drawdata id = 'mainmenu_bg' cache = false>
<drawdata id = 'mainmenu_bg' cache = false>
     <drawstep  ...
     <drawstep  ...
     />
     />
</drawdata>
</drawdata>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 317: Line 317:
* <tt>id [string]</tt>: Unique identifier for the drawing asset.
* <tt>id [string]</tt>: Unique identifier for the drawing asset.
* <tt>cache [bool]</tt>: Lets the renderer know that this drawing asset may be cached for performance.
* <tt>cache [bool]</tt>: Lets the renderer know that this drawing asset may be cached for performance.
* <tt>resolution [int x int]</tt>: Load only on a given resolution. See resolution-dependant keys.
* <tt>resolution [[x|y][<|>]int]</tt>: Load only on a given resolution. See resolution-dependant keys.


-----
-----
Line 329: Line 329:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<drawstep  func = 'roundedsq'
<drawstep  func = 'roundedsq'
             radius = '6'
             radius = '6'
Line 340: Line 340:
             bevel = 1
             bevel = 1
/>
/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 414: Line 414:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<text  font = 'text_button'
<text  font = 'text_button'
         text_color = 'color_button'
         text_color = 'color_button'
Line 420: Line 420:
         horizontal_align = 'center'
         horizontal_align = 'center'
/>
/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 462: Line 462:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<layout_info resolution = '320xY'>
<layout_info resolution = 'y>399'>
     ...
     ...
</layout_info>
</layout_info>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 474: Line 474:
===== Properties =====
===== Properties =====


* <tt>resolution [int x int]</tt>: Load only on a given resolution. See resolution-dependant keys.
* <tt>resolution [[x|y][<|>]int]</tt>: Load only on a given resolution. See resolution-dependant keys.


-----
-----
Line 486: Line 486:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<globals>
<globals>
     ...
     ...
</globals>
</globals>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 507: Line 507:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<def var = 'WidgetSize' value = 'kBigWidgetSize' />
<def var = 'WidgetSize' value = 'kBigWidgetSize' />
<def resolution = '320xY' var = 'WidgetSize' value = 'kNormalWidgetSize' />
<def resolution = 'y>399' var = 'WidgetSize' value = 'kNormalWidgetSize' />
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 546: Line 546:
** kNormalWidgetSize
** kNormalWidgetSize
** kBigWidgetSize
** kBigWidgetSize
* <tt>resolution [int x int]</tt>: Load only on a given resolution. See resolution-dependant keys.
* <tt>resolution [[x|y][<|>]int]</tt>: Load only on a given resolution. See resolution-dependant keys.


-----
-----
Line 557: Line 557:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<widget name = 'SmallButton'
<widget name = 'SmallButton'
         size = '128, 18'
         size = '128, 18'
/>
/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 567: Line 567:
A global widget definition is a parser-exclusive alias for the layout properties of a specific widget. For instance, the definition of a global widget named <tt>Slider</tt> with certain size properties will allow you to specify <tt>Slider</tt> as a Widget type when adding widgets to a Dialog, and that widget will inherit the size properties defined in this global definition. For more information, please check the documentation on <tt>&lt;widget&gt;</tt> (''local widget definition'').
A global widget definition is a parser-exclusive alias for the layout properties of a specific widget. For instance, the definition of a global widget named <tt>Slider</tt> with certain size properties will allow you to specify <tt>Slider</tt> as a Widget type when adding widgets to a Dialog, and that widget will inherit the size properties defined in this global definition. For more information, please check the documentation on <tt>&lt;widget&gt;</tt> (''local widget definition'').


<syntax type="xml">
<syntaxhighlight lang="xml">
<dialog name = 'SampleDialog' overlays = 'screen'>
<dialog name = 'SampleDialog' overlays = 'screen'>
     <layout type = 'vertical' ...>
     <layout type = 'vertical' ...>
Line 583: Line 583:
     </layout>
     </layout>
</dialog>
</dialog>
</syntax>
</syntaxhighlight>


Because of this, there are no unique identifiers for Widget names. You may give them any alias (since these aliases are only queried by your own layout definition, inside the parser). However, for added customization, the Theme Renderer will also poll a few unique Global Widget names for their layout information:
Because of this, there are no unique identifiers for Widget names. You may give them any alias (since these aliases are only queried by your own layout definition, inside the parser). However, for added customization, the Theme Renderer will also poll a few unique Global Widget names for their layout information:
Line 600: Line 600:
* <tt>size [int, int]</tt>: Width and height of the widget. You may use previously declared <tt>def</tt>s or builtin constants instead of integers.
* <tt>size [int, int]</tt>: Width and height of the widget. You may use previously declared <tt>def</tt>s or builtin constants instead of integers.
* <tt>padding [int, int, int, int]</tt>: Pixel padding for Left, Right, Top and Bottom sides, respectively.
* <tt>padding [int, int, int, int]</tt>: Pixel padding for Left, Right, Top and Bottom sides, respectively.
* <tt>resolution [int x int]</tt>: Load only on a given resolution. See resolution-dependant keys.
* <tt>resolution [[x|y][<|>]int]</tt>: Load only on a given resolution. See resolution-dependant keys.


-----
-----
Line 612: Line 612:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<dialog name = 'Launcher' overlays = 'screen'>
<dialog name = 'Launcher' overlays = 'screen'>
     ...
     ...
Line 620: Line 620:
     ...
     ...
</dialog>
</dialog>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 671: Line 671:
* <tt>enabled [bool]</tt>: Sets whether this dialog is enabled. Defaults always to true. May be used to disable dialogs on certain resolutions.
* <tt>enabled [bool]</tt>: Sets whether this dialog is enabled. Defaults always to true. May be used to disable dialogs on certain resolutions.
* <tt>inset [int]</tt>: Sets the inset value for Screen and Dialog overlays (the amount by which the new dialog is contracted).
* <tt>inset [int]</tt>: Sets the inset value for Screen and Dialog overlays (the amount by which the new dialog is contracted).
* <tt>resolution [int x int]</tt>: Load only on a given resolution. See resolution-dependant keys.
* <tt>resolution [[x|y][<|>]int]</tt>: Load only on a given resolution. See resolution-dependant keys.


-----
-----
Line 683: Line 683:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<layout type = 'vertical' center = 'true' padding = '23, 23, 8, 23'>
<layout type = 'vertical' center = 'true' padding = '23, 23, 8, 23'>
     ...
     ...
</layout>
</layout>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 717: Line 717:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<dialog name = 'GameOptions_Audio' overlays = 'Dialog.GlobalOptions.TabWidget'>
<dialog name = 'GameOptions_Audio' overlays = 'Dialog.GlobalOptions.TabWidget'>
     <layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'>
     <layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'>
Line 724: Line 724:
     </layout>
     </layout>
</dialog>
</dialog>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 746: Line 746:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<widget name = 'StartButton' type = 'Button'/>
<widget name = 'StartButton' type = 'Button'/>
<space size = '16' />
<space size = '16' />
<widget name = 'AddGameButton' type = 'Button' />
<widget name = 'AddGameButton' type = 'Button' />
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Line 760: Line 760:
Space keys may be optionally left without a <tt>size</tt> property: The space will automatically expand itself to fill all the remaining space inside the layout. This may be used to align widgets on the further side of a layout.
Space keys may be optionally left without a <tt>size</tt> property: The space will automatically expand itself to fill all the remaining space inside the layout. This may be used to align widgets on the further side of a layout.


<syntax type="xml">
<syntaxhighlight lang="xml">
<layout type = 'horizontal' ...>
<layout type = 'horizontal' ...>
     /** Add a button on the left */
     /** Add a button on the left */
Line 773: Line 773:
         space by the button's width; hence Button2 is now aligned to the right */
         space by the button's width; hence Button2 is now aligned to the right */
</layout>
</layout>
</syntax>
</syntaxhighlight>


===== Properties =====
===== Properties =====
Line 789: Line 789:
===== Example =====
===== Example =====


<syntax type="xml">
<syntaxhighlight lang="xml">
<widget name = 'AddGameButton'  
<widget name = 'AddGameButton'  
         width = '95'
         width = '95'
Line 797: Line 797:
         type = 'Button'  
         type = 'Button'  
/>
/>
</syntax>
</syntaxhighlight>


===== Description =====
===== Description =====
Criezy
TrustedUser
2,147

edits

Retrieved from "https://wiki.scummvm.org/index.php?title=Special:MobileDiff/11830...24747"

Navigation menu