Home > General > Modifying MythTV’s Blue Abstract Theme – Video list

Modifying MythTV’s Blue Abstract Theme – Video list

One of the issues I’ve had with MythTV’s Blue Abstract Theme is that the video list screen is not at all to my liking. The lists are very narrow and (in my opinion) pretty useless unless you have proper metadata for all of your files. I only download IMDB metadata for movies. When I want to see movies I use the Browse mode where I can see all the movie metadata. The rest of the time I’m just browsing files in the video list. For this reason, it’s very important that the video list screen can fit as much file information as possible.

Here are the before (left) and after (right) screenshots:

  

Below is explained what I did to accomplish this. I’m using the theme version from 14.09.2010 with MythTV version 0.23. If you’re using a different version you might have to make some small adjustments to the instructions below, but the principle should be the same. As you will see, modifying themes is pretty simple!

Step 1/5: Make a copy of the original theme

The themes are located in /usr/share/mythtv/themes, so first thing is to make a copy of the theme.

su
cd /usr/share/mythtv/themes
cp -r blue-abstract-wide blue-abstract-wide-modded

We now have a copy of the original theme that we can safely work with.

Step 2/5: Rename the copied theme

In order to get this to appear as a different theme selectable from MythTV, rename the theme in blue-abstract-wide-modded/themeinfo.xml

<name>Blue Abstract/Modded</name>

The theme should now appear in mythfrontend as a selectable theme. Go ahead and select that theme and restart mythfrontend. You should now have the new theme running. Now you can start making changes.

Step 3/5: Define the new (wider) menus

In blue-abstract-wide-modded/base.xml, look for base_buttonlist and add this buttonlist after that buttonlist. If you diff them you will see that I have only changed the vertical positions.

<!-- custom buttonlist widget for videolist -->
<buttonlist name="base_buttonlist_modded">
    <area>0,0,536,265</area>
    <layout>vertical</layout>
    <spacing>4</spacing>
    <scrollstyle>free</scrollstyle>
    <wrapstyle>selection</wrapstyle>
    <buttonarea>0,0,100%,97%</buttonarea>
    <statetype name="buttonitem">
        <!-- general settings for the menu entry -->
        <state name="active">
            <area>0,0,100%,39</area>
            <imagetype name="buttonbackground" from="base_image_active">
                <filename>images/widgets/buttonlist_inactive_modded.png</filename>
            </imagetype>
            <textarea name="buttontext">
                <area>8,5,498,30</area>
                <font>text</font>
                <cutdown>yes</cutdown>
                <align>left,vcenter</align>
            </textarea>
            <!-- settings when the button is a checkbox -->
            <statetype name="buttoncheck">
                <position>506,10</position>
                <state type="off">
                    <imagetype name="checkoff">
                        <filename>images/widgets/buttonlist_checkbox_unchecked.png</filename>
                    </imagetype>
                </state>
                <state type="half">
                    <imagetype name="checkhalf">
                        <filename>images/widgets/buttonlist_checkbox_partly.png</filename>
                    </imagetype>
                </state>
                <state type="full">
                    <imagetype name="checkfull">
                        <filename>images/widgets/buttonlist_checkbox_fully.png</filename>
                    </imagetype>
                </state>
            </statetype>
            <imagetype name="buttonarrow">
                <position>510,6</position>
                <filename>images/shared/arrow_right.png</filename>
                <alpha>90</alpha>
            </imagetype>
        </state>
        <!-- menu entry has been selected and is active -->
        <state name="selectedactive" from="active">
            <imagetype name="buttonbackground" from="base_image_selected">
                <filename>images/widgets/buttonlist_active_modded.png</filename>
                <!--<alphapulse min="160" max="255" change="2"/>-->
            </imagetype>
            <imagetype name="buttonarrow">
                <position>510,6</position>
                <filename>images/shared/arrow_right.png</filename>
                <alpha>255</alpha>
            </imagetype>
        </state>
        <!-- menu entry has been selected and is inactive -->
        <state name="selectedinactive" from="active">
            <imagetype name="buttonbackground" from="base_image_inactive">
                <filename>images/widgets/buttonlist_active_modded.png</filename>
            </imagetype>
            <textarea name="buttontext">
                <font>text_inactive</font>
            </textarea>
            <imagetype name="buttonarrow">
                <position>510,6</position>
                <filename>images/shared/arrow_right.png</filename>
                <alpha>90</alpha>
            </imagetype>
        </state>
    </statetype>
    <!-- show the arrow image that indicates that there are more menu entries above the first visible menu -->
    <statetype name="upscrollarrow">
        <position>581,97%</position>
        <state type="off">
            <imagetype name="upon">
                <filename>images/shared/arrow_up.png</filename>
                <alpha>90</alpha>
            </imagetype>
        </state>
        <state type="full">
            <imagetype name="upoff">
                <filename>images/shared/arrow_up.png</filename>
            </imagetype>
        </state>
    </statetype>
    <!-- show the arrow image that indicates that there are more menu entries below the last visible menu -->
    <statetype name="downscrollarrow">
        <position>508,97%</position>
        <state type="off">
            <imagetype name="dnon">
                <filename>images/shared/arrow_down.png</filename>
                <alpha>90</alpha>
            </imagetype>
        </state>
        <state type="full">
            <imagetype name="dnoff">
                <filename>images/shared/arrow_down.png</filename>
            </imagetype>
        </state>
    </statetype>
</buttonlist>

We have now specified the style for the new wider menus, next thing is to take it into use.

Step 4/5: Modify the video list layout

The video list screen is defined in blue-abstract-wide-modded/video-ui.xml

<!-- ================================================================== -->
<!-- The List View Type.
    (Main window) shows a list of videos like in a file browser. there are
    three columns like in the music plugin where the user can navigate
    through the videos and see some details at the bottom -->
<window name="tree">

    <!-- the background image -->
    <imagetype name="background">
        <area>0,0,1280,720</area>
        <filename>images/background.png</filename>
    </imagetype>

    <!-- the fanart image -->
    <imagetype name="fanart">
        <area>0,0,1280,720</area>
        <filename>images/background.png</filename>
    </imagetype>

    <!-- The heading (name) of the screen -->
    <textarea name="heading" from="base_heading">
        <position>0,0</position>
        <textarea name="text">
            <value>Video Tree</value>
        </textarea>
    </textarea>

    <!-- The clock that is shown at the top right of each screen -->
    <textarea name="clock" from="base_clock">
        <position>1040,0</position>
    </textarea>

    <!-- ================================================================== -->
    <!-- this is the background behind the video directory list -->
    <shape name="video_tree_background" from="base_background_shape">
        <area>70,70,1135,375</area>
    </shape>

    <!-- shows the current path and where we are in the video tree -->
    <textarea name="breadcrumbs" from="base_textarea">
        <area>90,90,920,30</area>
        <align>left,vcenter</align>
        <font>text</font>
    </textarea>

    <!-- shows the selected video number -->
    <textarea name="position" from="base_textarea">
        <area>950,90,230,30</area>
        <align>right,vcenter</align>
        <font>text</font>
    </textarea>

    <shape name="breadcrumb_separator" from="base_separator_shape">
        <area>90,135,1095,1</area>
    </shape>

    <!-- shows the directory structure of the videos -->
    <buttontree name="videos">
        <area>90,160,1110,146</area>
        <numlists>3</numlists>
        <spacing>6</spacing>
        <buttonlist name="listtemplate" from="base_buttonlist"/>
    </buttontree>

    <!-- ================================================================== -->
    <!-- this is the background for the information at the bottom -->
    <shape name="video_details_background" from="base_background_shape">
        <area>25,465,1230,230</area>
    </shape>
    <shape name="cover_background" from="base_background_shape">
        <area>45,485,130,190</area>
    </shape>

    <imagetype name="coverart">
        <area>46,487,128,186</area>
        <filename/>
        <preserveaspect>true</preserveaspect>
    </imagetype>

    <!-- marks the video as watched -->
    <statetype name="watchedstate">
        <state name="yes">
            <shape name="watched_background_shape">
                <area>85,675,50,4</area>
                <type>box</type>
                <fill color="#AAAAAA" alpha="255"/>
                <line color="#AAAAAA" alpha="255" width="1"/>
            </shape>
        </state>
    </statetype>

    <textarea name="title" from="base_textarea">
        <area>195,484,580,30</area>
        <multiline>no</multiline>
        <font>title</font>
        <align>left</align>
        <cutdown>yes</cutdown>
    </textarea>

    <textarea name="subtitle" from="base_textarea">
        <area>195,520,580,30</area>
        <multiline>no</multiline>
        <font>text_small</font>
        <align>left,vcenter</align>
        <cutdown>yes</cutdown>
    </textarea>

    <!-- the rating of this movie, -->
    <imagetype name="userratingstate_background" from="base_rating_background">
        <position>645,491</position>
    </imagetype>

    <statetype name="userratingstate" from="base_rating">
        <position>645,491</position>
    </statetype>

    <shape name="title_separator" from="base_separator_shape">
        <area>195,560,550,1</area>
    </shape>

    <textarea name="description" from="base_textarea">
        <area>195,577,550,120</area>
        <font>text</font>
        <multiline>yes</multiline>
        <cutdown>yes</cutdown>
        <align>left,top</align>
    </textarea>

    <shape name="info_separator" from="base_separator_shape">
        <area>770,485,1,190</area>
    </shape>

    <!-- show the name of the different labels -->
    <textarea name="director_label" from="base_textarea">
        <area>790,485,150,30</area>
        <align>right,vcenter</align>
        <value>Director:</value>
    </textarea>
    <textarea name="cast_label" from="director_label">
        <position>790,516</position>
        <value>Cast:</value>
    </textarea>
    <textarea name="season_label" from="director_label">
        <position>790,547</position>
        <value>Season:</value>
    </textarea>
    <textarea name="episode_label" from="director_label">
        <position>940,547</position>
        <value>Episode:</value>
    </textarea>
    <textarea name="year_label" from="director_label">
        <position>790,578</position>
        <value>Year:</value>
    </textarea>
    <textarea name="length_label" from="director_label">
        <position>790,609</position>
        <value>Runtime:</value>
    </textarea>
    <textarea name="level_label" from="base_textarea">
        <area>790,643,300,30</area>
        <align>right,vcenter</align>
        <value>Parental Level:</value>
    </textarea>

    <!-- show the values to the different labels -->
    <textarea name="director">
        <area>950,485,290,30</area>
        <font>text</font>
        <cutdown>yes</cutdown>
        <align>vcenter</align>
    </textarea>
    <textarea name="cast" from="director">
        <position>950,516</position>
    </textarea>
    <textarea name="season" from="director">
        <position>950,547</position>
    </textarea>
    <textarea name="episode" from="director">
        <position>1100,547</position>
    </textarea>
    <textarea name="year" from="director">
        <position>950,578</position>
    </textarea>
    <textarea name="length" from="director">
        <position>950,609</position>
    </textarea>
    <imagetype name="parentallevel_background" from="base_parentallevel_background">
        <position>1100,649</position>
    </imagetype>
    <statetype name="parentallevel" from="base_parentallevel">
        <position>1100,649</position>
    </statetype>
</window>

Replace that whole section with the section below. As you can see, I have dropped all extra metadata fields and expanded the size of the remaining items.

<!-- ================================================================== -->
<!-- The List View Type.
    (Main window) shows a list of videos like in a file browser. there are
    three columns like in the music plugin where the user can navigate
    through the videos and see some details at the bottom -->
<window name="tree">
    <!-- the background image -->
    <imagetype name="background">
        <area>0,0,1280,720</area>
        <filename>images/background.png</filename>
    </imagetype>

    <!-- the fanart image -->
    <imagetype name="fanart">
        <area>0,0,1280,720</area>
        <filename>images/background.png</filename>
    </imagetype>

    <!-- The heading (name) of the screen -->
    <textarea name="heading" from="base_heading">
        <position>0,0</position>
        <textarea name="text">
            <value>Video Tree</value>
        </textarea>
    </textarea>

    <!-- The clock that is shown at the top right of each screen -->
    <textarea name="clock" from="base_clock">
        <position>1040,0</position>
    </textarea>

    <!-- ================================================================== -->
    <!-- this is the background behind the video directory list -->
    <shape name="video_tree_background" from="base_background_shape">
        <area>70,70,1135,635</area>
    </shape>

    <!-- shows the current path and where we are in the video tree -->
    <textarea name="breadcrumbs" from="base_textarea">
        <area>90,90,920,30</area>
        <align>left,vcenter</align>
        <font>text</font>
    </textarea>

    <!-- shows the selected video number -->
    <textarea name="position" from="base_textarea">
        <area>950,90,230,30</area>
        <align>right,vcenter</align>
        <font>text</font>
    </textarea>

    <shape name="breadcrumb_separator" from="base_separator_shape">
        <area>90,135,1095,1</area>
    </shape>

    <!-- shows the directory structure of the videos -->
    <buttontree name="videos">
        <area>90,160,1110,524</area>
        <numlists>2</numlists>
        <spacing>6</spacing>
        <buttonlist name="listtemplate" from="base_buttonlist_modded"/>
    </buttontree>
</window>

We’ve now updated the video list layout.

Step 5/5: Create menu button images

Now you need to create the button images that we referred to in base.xml above. First make a copy of the image file (the theme is still using the original image file in other menus).

cp blue-abstract-wide-modded/images/widgets/buttonlist_inactive.png blue-abstract-wide-modded/images/widgets/buttonlist_inactive_modded.png
cp blue-abstract-wide-modded/images/widgets/buttonlist_active.png blue-abstract-wide-modded/images/widgets/buttonlist_active_modded.png

Now open up your favorite image editor and resize the new _modded.png files to 536 x 39.

Enjoy your modded theme

You should now be able to restart mythfrontend and see the new video list screen. Be sure to clear the theme cache (~/.mythtv/themecache/) in case you have any issues.

As you can see, making changes to themes is quite simple. Thanks to the author of Blue Abstract Theme! He has done a good job with the theme and at documenting it.

P.S. If you want to make any other changes to this page, you can look at the specifications to see what items are available for this page. For example, I later exchanged the navigation path (in the top) for the stand-alone title of the selected item. This helps see the full name when you have really long filenames. You can do this by changing the “breadcrumbs” textarea’s name to “title”.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s