wiki:MythUIThemeFormat

Version 16 (modified by stuartm, 16 years ago) (diff)

Updates

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" from="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
  • statetype

Images

Standard image example:

  <imagetype name="imagename">
     <filename>imagefile.png</filename>
     <crop>x,y,w,h</crop>
     <reflection axis="horizontal" shear="24" scale="85" length="35" />
  </imagetype>
  • filename is the filename.
  • crop the image leaving just the area specified (useful to remove the rough edges from a screen capture etc)
  • reflection adds a reflection effect to the image, it should only be used for third party images e.g. album art or screen grabs. Shear, Scale and length are percentage values. Axis may be vertical or horizontal.

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.

Gradient image example (Scalable list buttons):

  <imagetype name="imagename">
      <gradient start="#999999" end="#333333" alpha="255" />
  </imagetype>

An image must have either a filename or filepattern or gradient 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,top</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 - See the section on alignment below.
  • 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">
    <area>10,10,100,100</area>
    <showempty>yes</showempty>
    <state name="selected">
       <position>20,15</position>
       <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 type="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

N.B. Buttonlist will shortly be replaced.

 <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>
    <align>right, vcenter</align>
    <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>
        <align>center</align>
        <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.

Alignment

Elements dealing with alignment of text, or images within a button, share the same format.

<align>{horizontal},{vertical}</align>

Where valid values are: left, hcenter, right, top, vcenter, bottom and center (which is a special case: vcenter,hcenter)

e.g. <align>left, bottom</align>

<align>right,vcenter</align> <align>center</align>

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>