= 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', '1', '0', etc.

== 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>
}}}

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-dnarrow-reg.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>
    <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>5</spacing>
    <margin>5</margin>
    <drawfrombottom>yes</drawfrombottom>
  </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>
}}}