wiki:MythUIThemeFormat

Version 10 (modified by stuartm, 16 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>
    <layout>vertical</layout>
    <activefont>fontname</activefont>
    <inactivefont>fontname</inactivefont>
    <scrollarrows show="yes">
       <statetype name="upscrollarrow">
          <state type="off">
              <imagetype name="upoff">
                <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="downoff">
                <filename>lb-dnarrow-reg.png</filename>
              </imagetype>
          </state>
          <state type="full">
              <imagetype name="downon">
                <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>
    <multiline>yes</multiline>
  </buttonlist>

Valid layout values are:

  • vertical
  • horizontal
  • grid

Check and arrow images, arrow statetypes are optional. Backgrounds can be a gradient or image. Button takes their dimensions from the background image if it is specified.

Drawfrombottom causes the buttons to be drawn from the bottom of the list area instead of the top.

Buttons

    <button name="foo">
        <position>x,y</position>
        <activefont>fontname</activefont>
        <inactivefont>fontname</inactivefont>        
        <showarrow>no</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"/>
        <value>FooBar</value>
        <margin>5</margin>
        <multiline>no</multiline>
        <textflags>center</textflags>
        <regular-background filename="button_off.png" />
        <selected-background filename="button_on.png" />
        <inactive-background filename="button_disabled.png" />
    </button>

Check and arrow images are optional. Backgrounds can be a gradient or image. Button takes it's dimensions from the background image if it is specified.

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>