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>