In this lesson, we build the menu interface for your theme. While building the main menu, we also build some primary elements to ensure that future elements in your theme will be have a consistent look.
In building the menu interface for your theme, we will begin to write the two primary XML files for your theme: the base.xml
and menu-ui.xml
files. Templates are included at the bottom of this web page.
Also included at the bottom of this web page is an XML file with all of the snippets shown in this lesson. Feel free to copy and paste from that snippets file. It tends to work better than trying to copy and paste from the web pages.
We start building your interface by declaring the fonts required for your theme. Edit your base.xml file and include a declaration similar to the following. If you are using the template that I provided, place your declarations in the font section.
<fontdef name="font_default" face="Bitstream Vera Sans">
<pixelsize>19.4</pixelsize>
<color>#FFFFFF</color>
<italics>no</italics>
<weight>normal</weight>
<stretch>unstretched</stretch>
</fontdef>
As I mentioned in an earlier article, I define two fonts: Default and Title. Here is an idea of how I define a title font:
<fontdef name="font_title" face="Bitstream Vera Sans Mono">
<pixelsize>33.3</pixelsize>
<color>#FFFFFF</color>
<shadowcolor>#000000</shadowcolor>
<shadowoffset>2,2</shadowoffset>
<shadowalpha>255</shadowalpha>
<italics>no</italics>
<weight>normal</weight>
<stretch>unstretched</stretch>
</fontdef>
Some notes on declaring your fonts:
face
string is the system name for the font that you wish to use. If you are able, it is best to distribute fonts with your theme. If you do not distribute a font with your theme, and the requested font is not available, MythTV will substitute an alternate font which may or may not provide the appearance that you are intending. Be sure to honor the licenses that come with the fonts that you want to use. pixelsize = ( pointsize / 72 ) * 100
Visit the MythTV Wiki for more information regarding font attributes. A link is provided at the end of this article.
Once you have made the basic declarations for the fonts that you plan on using, add the following declarations after your basic declarations. These are the actual font definitions that we will use in your menu interface. For now, leave the declarations blank as they are here. Will will modify them later.
<fontdef name="font_menu_button_active" from="font_title">
</fontdef>
<fontdef name="font_menu_button_selected" from="font_title">
</fontdef>
<fontdef name="font_menu_description" from="font_default">
</fontdef>
<fontdef name="font_menu_screen_title" from="font_title">
</fontdef>
Next, we will define a simple background window. While not well-documented, this is a required window that is drawn as the backdrop for your theme. For now, we define this background as a simple shape with a solid color and border. Feel free to change the colors to something suitable for your theme. Do not make too many other modifications - we will return to this background window later.
If you are using my template files, place the shape definition in the shapes section, and the window definition in the windows section.
<shape name="shape_background">
<area>0,0,100%,100%</area>
<type>roundbox</type>
<cornerradius>4</cornerradius>
<fill color="#101010" alpha="255" />
<line color="#FFFFFF" alpha="255" width="4" />
</shape>
<window name="backgroundwindow">
<shape name="window_bg" from="shape_background" />
</window>
Next, we define two standard textareas - one used for regular text, and another used for title text. For now, just copy-and-paste into your base.xml
file.
<textarea name="textarea_default">
<area>0,0,100%,100%</area>
<multiline>true</multiline>
<align>left,vcenter</align>
<font>font_default</font>
</textarea>
<textarea name="textarea_title_default" from="textarea_default">
<align>allcenter</align>
<font>font_title</font>
</textarea>
Next, we create some definitions for check box and arrow images. These are used in the menus as needed, depending on your menu layout and the actual elements in the menu. Note the file paths - I keep these images in icons/shared
. Modify as you wish.
<imagetype name="imagetype_default">
<area>0,0,100%,100%</area>
<preserveaspect>true</preserveaspect>
</imagetype>
<imagetype name="imagetype_check_off" from="imagetype_default">
<filename>icons/shared/check_off.png</filename>
</imagetype>
<imagetype name="imagetype_check_half" from="imagetype_default">
<filename>icons/shared/check_half.png</filename>
</imagetype>
<imagetype name="imagetype_check_full" from="imagetype_default">
<filename>icons/shared/check_full.png</filename>
</imagetype>
<imagetype name="imagetype_arrow_off" from="imagetype_default">
<filename>icons/shared/arrow_off.png</filename>
</imagetype>
<imagetype name="imagetype_arrow_left" from="imagetype_default">
<filename>icons/shared/arrow_left.png</filename>
</imagetype>
<imagetype name="imagetype_arrow_right" from="imagetype_default">
<filename>icons/shared/arrow_right.png</filename>
</imagetype>
<imagetype name="imagetype_arrow_up" from="imagetype_default">
<filename>icons/shared/arrow_up.png</filename>
</imagetype>
<imagetype name="imagetype_arrow_down" from="imagetype_default">
<filename>icons/shared/arrow_down.png</filename>
</imagetype>
The next definition is for the cursor that indicates the selected menu item. The definition here is simply a rounded box. Feel free to modify the color of the cursor, but do not change much else right now. We will modify this later to match your theme.
<shape name="shape_buttonlist_cursor">
<area>0,0,100%,100%</area>
<type>roundbox</type>
<cornerradius>4</cornerradius>
<line color="#FFFFFF" alpha="255" width="2" />
</shape>
Next, we define some default button lists. The version shown here is intended for MythTV 0.24; a version intended for 0.25 is included in the snippets file.
<buttonlist name="buttonlist_default">
<area>3.5%,3.5%,93%,93%</area>
<buttonarea>0,0,100%,100%</buttonarea>
<layout>vertical</layout>
<spacing>5</spacing>
<arrange>stack</arrange>
<align>allcenter</align>
<drawfrombottom>false</drawfrombottom>
<scrollstyle>free</scrollstyle>
<wrapstyle>selection</wrapstyle>
<searchposition>-1,-1</searchposition>
<statetype name="buttonitem">
<state name="active">
<area>0,0,100%,50</area>
<shape name="buttonlist_background" />
<statetype name="buttoncheck">
<area>0,0,20,100%</area>
<state type="off">
<imagetype name="buttonlist_buttoncheck"
from="imagetype_check_off" />
</state>
<state type="half">
<imagetype name="buttonlist_buttoncheck"
from="imagetype_check_half" />
</state>
<state type="full">
<imagetype name="buttonlist_buttoncheck"
from="imagetype_check_full" />
</state>
</statetype>
<imagetype name="buttonarrow">
<area>97%,0,20,100%</area>
<imagetype name="buttonlist_buttonarrow"
from="imagetype_arrow_right" />
</imagetype>
<textarea name="buttontext"
from="textarea_title_default">
<area>3%,0,94%,100%</area>
<font>font_menu_button_active</font>
</textarea>
</state>
<state name="inactive" from="active">
</state>
<state name="selectedactive" from="active">
<shape name="buttonlist_background"
from="shape_buttonlist_cursor" />
<textarea name="buttontext"
from="textarea_title_default">
<font>font_menu_button_selected</font>
</textarea>
</state>
<state name="selectedinactive" from="selectedactive">
</state>
</statetype>
<statetype name="upscrollarrow">
<area>0,0,20,20</area>
<state type="off">
<imagetype name="buttonlist_upscrollarrow"
from="imagetype_arrow_off" />
</state>
<state type="full">
<imagetype name="buttonlist_upscrollarrow"
from="imagetype_arrow_up" />
</state>
</statetype>
<statetype name="downscrollarrow">
<area>0,98%,20,20</area>
<state type="off">
<imagetype name="buttonlist_downscrollarrow"
from="imagetype_arrow_off" />
</state>
<state type="full">
<imagetype name="buttonlist_downscrollarrow"
from="imagetype_arrow_down" />
</state>
</statetype>
</buttonlist>
<buttonlist name="buttonlist_vertical" from="buttonlist_default">
</buttonlist>
<buttonlist name="buttonlist_horizontal"
from="buttonlist_default">
<layout>horizontal</layout>
<statetype name="buttonitem">
<state name="active">
<area>0,0,200,100%</area>
</state>
<state name="inactive" from="active">
</state>
<state name="selectedactive" from="active">
<shape name="buttonlist_background"
from="shape_buttonlist_cursor" />
</state>
<state name="selectedinactive" from="selectedactive">
</state>
</statetype>
<statetype name="upscrollarrow">
<state type="off">
<imagetype name="buttonlist_upscrollarrow"
from="imagetype_arrow_off" />
</state>
<state type="full">
<imagetype name="buttonlist_upscrollarrow"
from="imagetype_arrow_left" />
</state>
</statetype>
<statetype name="downscrollarrow">
<area>98%,0,20,20</area>
<state type="off">
<imagetype name="buttonlist_downscrollarrow"
from="imagetype_arrow_off" />
</state>
<state type="full">
<imagetype name="buttonlist_downscrollarrow"
from="imagetype_arrow_right" />
</state>
</statetype>
</buttonlist>
<buttonlist name="buttonlist_grid" from="buttonlist_default">
<layout>grid</layout>
<wrapstyle>flowing</wrapstyle>
<statetype name="buttonitem">
<state name="active">
<area>0,0,200,200</area>
</state>
<state name="inactive" from="active">
</state>
<state name="selectedactive" from="active">
<shape name="buttonlist_background"
from="shape_buttonlist_cursor" />
</state>
<state name="selectedinactive" from="selectedactive">
</state>
</statetype>
</buttonlist>
The default button list definition is a vertical button list, and it includes compensation for overscan in the <area>
definition. To change the height of each button, modify the height value in the active buttonarea. In the snippet provided, it is set to 50 pixels.
Because of inheritance in MythUI, the declarations for the other two button lists, horizontal and grid, are much simpler. Similarly to the vertical button list, to change the width of the horizontal buttons and the size of the grid buttons, change the appropriate values in the respective active buttonareas. For the horizontal buttons, the width is set to 200 pixels; for a grid, the buttons are 200 pixels wide by 200 pixels tall.
Do not make any changes other than the size of the buttons. We will make other changes to make the button list fit your theme later.
The last snippet defines the main menu. Copy-and-paste into your menu-ui.xml
file. To change the menu style from a vertical list to a horizontal menu or a grid, change the from
attribute to "buttonlist_horizontal"
or "buttonlist_grid"
as appropriate.
<window name="mainmenu">
<buttonlist name="menu" from="buttonlist_vertical">
</buttonlist>
</window>
Your theme is ready to test! Head to the next lesson to get mythfrontend and your environment configured to make testing easier.