Difference between revisions of "Menu-ui.xml"

Revision as of 14:08, 2 September 2008

menu-ui.xml is a new file proposed to be used to specify the organisation of mythtv's main menu screens

<mythuitheme>

It is comprised of: The mainmenu window.

   <window name="mainmenu">

font definitions:

<font name="basefont" face="Arial">
        <color>#FFFFFF</color>
        <size>22</size>
        <size:small>16</size:small>
        <size:big>50</size:big>
    </font>

    <font name="redfont" from="basefont"> <!-- define 'redfont' inheriting properties of 'basefont' N.B. 'from=' replaces 'base=' used before mythui -->
         <color>#FF0000</color>
    </font>
    
    <font name="greenfont" from="basefont">
         <color>#00FF00</color>
    </font>

An (optional) clock definition:

   <clock name="clock">
        <area>300,200,200,40</area>  <!-- clock area 200 px wide by 40 px high starting at 300,300 -->
        <font>basefont</font>
        <align>right</align>  <!-- optional attribute, defaults to  'left' -->
        <format>%DATE% %TIME%</format> <!-- valid values are:  -->
        <alpha>200</alpha> <!-- optional, sets text opacity.  Defaults to 255 -->
    </clock>

An (optional) logo definition:

    <imagetype name="logo">
        <position>30,495</position>
        <filename>ui/mythtvlogo.png</filename>
    </imagetype>

Definition of menu page titles:

<statetype name="titles">
    <position>20,20</position> <!-- position at 20 px from the left, 20px from the top of screen -->
    <state name="TV">
        <imagetype name="TV">
            <filename>title/title_tv.png</filename>
        </imagetype>
    </state>
    <state name="TVSETUP" from="TV" /> <!-- inherit from 'TV' state -->
...
...
...
</statetype>

Note that the states do not have to contain merely images, they could just as easily be defined as follows:

<state name="TV">
    <textarea name="TV">
        <area>0,0,300,40</area>
        <font>menufont</font>
        <align>right</align>
        <alpha>127</alpha> <!-- set to half transparent -->
        <value>TV</value> <!-- the text to be displayed -->
    </textarea>
</state>

Or, possibly a combination of text and images:

<state name="TV">
    <imagetype name="TV">
            <filename>title/title_tv.png</filename>
    </imagetype>
    <textarea name="TV2"> <!-- children of the same parent need unique names -->
        <area>0,0,300,40</area>
        <font>menufont</font>
        <align>right</align>
        <alpha>127</alpha> <!-- set to half transparent -->
        <value>TV</value> <!-- the text to be displayed -->
    </textarea>
</state>

Definitions for the menu items:

<buttonlist2 name="menu">
    <area>160,70,300,320</area> <!-- the whole menu area including buttons & arrows -->
    <layout>vertical</layout> <!-- vertical or horizontal layouts are possible -->
    <spacing>0</spacing> <!-- spacing between menu items -->
    <buttonarea>0,55,300,320</buttonarea> <!-- the actual button area -->

and the buttons within:

    <statetype name="buttonitem">
        <state name="active"> <!-- a visible menu entry -->
            <area>0,0,300,50</area> <!-- the size of a menu item -->
            <imagetype name="background" /> <!-- an empty imagetype -->
            <textarea name="buttontext">
                <area>5,0,300,50</area> <!-- text positioned 5 px from the left of the buttom -->
                <font>menufont</font>
                <align>left,vcenter</align> <!-- align text to the left and vertically centred -->
                <cutdown>yes></cutdown>
            </textarea>
        </state>
        <state name="selected" from="active"> <!-- inherit this state from 'active' state -->
            <imagetype name="background">
                <filename>ui/button_on.png</filename>
            </imagetype>
        </state>
     </statetype>

..and the arrows:

<statetype name="upscrollarrow">
    <position>250,0</position>
    <showempty>yes</showempty>
    <state type="full">
         <imagetype name="upon">
             <filename>ui/up.png</filename>
         </imagetype>
    </state>
</statetype>

<statetype name="downscrollarrow">
    <position>250,365</position>
    <showempty>yes</showempty>
    <state type="full">
         <imagetype name="dnon">
             <filename>ui/down.png</filename>
         </imagetype>
    </state>
</statetype>

and then the end of the buttonlist2 definition:

</buttonlist2>

Watermarks are images that can be associated with menu entries and are defined as follows:

<statetype name="watermarks">
    <position>520,200</position>
    <state name="TV">
         <imagetype name="watermark">
             <filename>watermark/tv.png</filename>
         </imagetype>
    </state>
    <state name="SETTINGS_TV" from="TV" /> <!-- inherited from 'TV' state -->
...
...
</statetype>

And finally...

    </window>
</mythuitheme>