Version 6 (modified by 18 years ago) (diff) | ,
---|
MythUIThemeFormat
Just to start documenting things.. All numbers that refer to on-screen position/size are automatically adjusted for the UI size. Boolean values can be 'yes', 'no', 'true, 'false', '1', '0'.
Fonts
will be changing slightly.. currently is:
<font name="normal" face="Arial"> <size>11</size> <size:small>9</size:small> <size:big>13</size:big> <color>#ffffff</color> <shadowcolor>#000000</shadowcolor> <shadowoffset>2,2</shadowoffset> <shadowalpha>64</shadowalpha> <outlinecolor>#888888</outlinecolor> <outlinesize>2</outlinesize> <outlinealpha>64</outlinealpha> <bold>yes</bold> <italics>yes</italics> <underline>yes</underline> </font> <font name="graynormal" base="normal"> <color>#444444</color> </font>
General widget modifiers
Items that are valid for every subtype
<position>x,y</position> <alpha>100</alpha> <alphapulse min="0" max="255" change="2"/>
- Position on screen, relative to parent.
Valid widget types are:
- imagetype
- textarea
- listbutton
- horizontallistbutton
- statetype
Images
Standard image example:
<imagetype name="imagename"> <filename>imagefile.png</filename> <staticsize>width,height</staticsize> <skipin>x,y</skipin> </imagetype>
- filename is the filename.
- staticsize forces scaling the image to that particular size.
- skipin starts drawing from coords given in the source image.
Animated image example:
<imagetype name="imagename"> <filepattern low="0" high="30">imagefile%1.png</filepattern> <delay>500</delay> </imagetype>
- Loads images imagefile0.png through imagefile30.png, and displays them sequentially 500 msecs apart.
An image must have either a filename or filepattern element. Everything else is optional.
Text Areas
<textarea name="textarea"> <area>x,y,w,h</area> <altarea>x,y,w,h</altarea> <font>normal</font> <value>This is a text area</value> <cutdown>yes</cutdown> <multiline>yes</multiline> <align>left</align> <colorcycle start="#000000" end="#ffffff" steps="255"/> </textarea>
- area - area on screen
- value - the text to be displayed
- altarea - alternative area (ie., watch recordings screen, the description is larger if there is no video preview).
- font - name of a pre-defined font
- cutdown - if the text will be cut down ('...' replacing the end) if it's too large to fit, or just cut off
- multiline - wrap text onto multiple lines
- align - possible values are center, right, left, allcenter (v + h), vcenter, hcenter
- colorcycle - oscillate between the start and end values, with X steps in between (approx 30 steps per second).
All values optional except area, font, and value.
State Types
State Types are collections of types that display different states - like the watermark image on the main menus.
By name (valid names depend on context):
<statetype name="blah"> <showempty>yes</showempty> <state name="selected"> <imagetype name="selectimage"> <filename>selectimage.png</filename> </imagetype> </state> <state name="normal"> <imagetype name="normalimage"> <filename>normalimage.png</filename> </imagetype> </state>
By type (valid types are: 'none', 'off', 'half', full', and what's used depends on context):
<statetype> <showempty>yes</showempty> <state name="off"> <imagetype name="offimage"> <filename>offimage.png</filename> </imagetype> </state> <state type="full"> <imagetype name="fullimage"> <filename>fullimage.png</filename> </imagetype> </state> </statetype>
- showempty - allow empty states to be displayed (show nothing, that is).
Button List
<buttonlist name="basebuttonlist"> <area>x,y,w,h</area> <activefont>fontname</activefont> <inactivefont>fontname</inactivefont> <scrollarrows show="yes"> <statetype name="upscrollarrow"> <state type="off"> <imagetype name="upon"> <filename>lb-uparrow-reg.png</filename> </imagetype> </state> <state type="full"> <imagetype name="upon"> <filename>lb-uparrow-sel.png</filename> </imagetype> </state> </statetype> <statetype name="downscrollarrow"> <state type="off"> <imagetype name="upon"> <filename>lb-dnarrow-reg.png</filename> </imagetype> </state> <state type="full"> <imagetype name="upon"> <filename>lb-dnarrow-sel.png</filename> </imagetype> </state> </statetype> </scrollarrows> <showarrow>yes</showarrow> <arrow filename="lb-arrow.png"/> <check-empty filename="lb-check-empty.png"/> <check-half filename="lb-check-half.png"/> <check-full filename="lb-check-full.png"/> <regular-background gradientstart="#505050" gradientend="#000000" gradientalpha="100"/> <selected-background gradientstart="#52CA38" gradientend="#349838" gradientalpha="255"/> <inactive-background gradientstart="#52CA38" gradientend="#349838" gradientalpha="255"/> <spacing>10</spacing> <margin>6</margin> <drawfrombottom>yes</drawfrombottom> <textflags>center</textflags> </buttonlist>
A Horizontal buttonlist has one additional config:
<horizontalbuttonlist> ... same as above ... <items>3</items> </horizontalbuttonlist>
Inheritance
Widgets can be inherited from previously defined widgets of the same type. For example:
<buttonlist name="newbasebuttonlist" from="basebuttonlist"> <area>x,y,w,h</area> </buttonlist>