Difference between revisions of "Menu-ui.xml"

From MythTV Official Wiki
Jump to: navigation, search
(blankuntil new one can be written)
Line 1: Line 1:
menu-ui.xml is a new file proposed to be used to specify the organisation of mythtv's main menu screens
+
This page out of dateIt'll be replaced when someone writes the not out of date version.
 
 
<mythuitheme>
 
 
 
It is comprised of:  The mainmenu window.   
 
 
 
    <nowiki><window name="mainmenu"></nowiki>
 
 
 
 
 
font definitions:
 
 
 
<pre><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></pre>
 
An (optional) clock definition:
 
 
 
  <nowiki> <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></nowiki>
 
 
 
An (optional) logo definition:
 
<pre>
 
    <imagetype name="logo">
 
        <position>30,495</position>
 
        <filename>ui/mythtvlogo.png</filename>
 
    </imagetype></pre>
 
 
 
Definition of menu page titles:
 
 
 
<pre>
 
<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>
 
</pre>
 
 
 
Note that the states do not have to contain merely images, they could just as easily be defined as follows:
 
 
 
<pre><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></pre>
 
 
 
Or, possibly a combination of text and images:
 
 
 
<pre><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></pre>
 
 
 
Definitions for the menu items:
 
 
 
<pre><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 -->
 
    <scrollstyle>center</scrollstyle> <!-- optionally keep the selected menu item in the centre of the button area -->
 
    <buttonarea>0,55,300,320</buttonarea> <!-- the actual button area -->
 
</pre>
 
and the buttons within:
 
<pre>    <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 button -->
 
                <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>
 
</pre>
 
..and the arrows:
 
<pre>
 
<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>
 
</pre>
 
and then the end of the buttonlist2 definition:
 
<pre>
 
</buttonlist2>
 
</pre>
 
 
 
Watermarks are images that can be associated with menu entries and are defined as follows:
 
<pre>
 
 
 
<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>
 
</pre>
 
And finally...
 
<pre>
 
    </window>
 
</mythuitheme>
 
</pre>
 

Revision as of 23:25, 25 March 2009

This page out of date. It'll be replaced when someone writes the not out of date version.