Difference between revisions of "Menu-ui.xml"

From MythTV Official Wiki
Jump to: navigation, search
m (added page to themes category)
 
(5 intermediate revisions by one other user not shown)
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
+
The menu-ui.xml file governs the layout and behavior of the Myth's menu structure.  It consists of the following windows and named attributes:
  
<mythuitheme>
+
= Screen Wizard Windows =
 +
<center>
 +
{| cellpadding="4" border="1"
 +
| align="center"  |<b>Window Name</b>
 +
| align="center"  |<b>Type</b>
 +
| align="center"  |<b>Description</b>
 +
|-
 +
| style="background:silver" | mainmenu
 +
| style="background:silver" align="center" | Window
 +
| style="background:silver" | Myth's menu structure.
 +
|}
  
It is comprised of:  The mainmenu window. 
 
  
    <nowiki><window name="mainmenu"></nowiki>
+
=== The "mainmenu" window ===
  
 
+
{| cellpadding="4" border="1"
font definitions:
+
| align="center" |<b>Widget Name</b>  
 
+
| align="center" |<b>Widget Type</b>  
<pre><font name="basefont" face="Arial">
+
| align="center|<b>Description</b>  
        <color>#FFFFFF</color>
+
| align="center" |<b>Required?</b>
        <size>22</size>
+
|-  
        <size:small>16</size:small>
+
| style="background:darkturquoise" | menu
        <size:big>50</size:big>
+
| style="background:darkturquoise" align="center" | buttonlist
    </font>
+
| style="background:darkturquoise" | A buttonlist which defines the format of all of Myth's structural (non-popup) menus.
 
+
| style="background:darkturquoise" align="center" | <b>Yes</b>
    <font name="redfont" from="basefont"> <!-- define 'redfont' inheriting properties of 'basefont' N.B. 'from=' replaces 'base=' used before mythui -->
+
|-
        <color>#FF0000</color>
+
| description
    </font>
+
| align="center" | textarea
   
+
| A text area describing the purpose of the selected item.  Can also be used in the menu buttonlist's items.
    <font name="greenfont" from="basefont">
+
| align="center" | No
        <color>#00FF00</color>
+
|}
    </font></pre>
+
[[Category:Themes]]
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>
 

Latest revision as of 03:36, 23 August 2011

The menu-ui.xml file governs the layout and behavior of the Myth's menu structure. It consists of the following windows and named attributes:

Screen Wizard Windows

Window Name Type Description
mainmenu Window Myth's menu structure.


The "mainmenu" window

Widget Name Widget Type Description Required?
menu buttonlist A buttonlist which defines the format of all of Myth's structural (non-popup) menus. Yes
description textarea A text area describing the purpose of the selected item. Can also be used in the menu buttonlist's items. No