04 Main Menu XML

Introduction

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.

XML Files

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.

Fonts

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:

Declare only the fonts that you need for your menu interface at this time. Set the sizes and other attributes according to your mockups. If you use a font multiple times for different purposes in your menu interface, choose one representation that you feel you will use most often. We will make the rest of the declarations a little bit later.
The 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.
As mentioned before, the color value is the hexadecimal RGB representation. Return to the previous lesson if you need help with determining hex RGB values for the colors that you have chosen.
Most of the time during our normal course of the day, we use the point size of a font. In MythUI, more accurate placement and sizing is obtained by using pixel height instead. To determine pixel height for a given size, use the following formula:
- pixelsize = ( pointsize / 72 ) * 100
- From your mockups, you probably will need to convert from point size (which is what typically is used in word processors, presentation software, etc.) to pixel height.
In the examples above, I have included a shadow for my title font but not for my default font. Feel free to add or remove as you wish.

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>

Background Window Definition

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>

Textarea Definitions

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>

Check Box and Arrow Images

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>

Menu Cursor Shape

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>

Default Button Lists

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.

Main Menu Declaration

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>

Testing Your Theme

Your theme is ready to test! Head to the next lesson to get mythfrontend and your environment configured to make testing easier.

Links

Previous Lesson: 03 Initial Design

Home

Next Lesson: 05 Testing Your Theme

Google Sites

Report abuse