• Projects

Udumbar

Github: https://github.com/rishighan/udumbar

XBMC (XBOX Media Center) is a piece of software available for a variety of platforms. It turns your computer into a HTPC (Home Theatre Personal Computer) that you can control with your IR or Bluetooth remote. It is open source and has a very healthy community of developers who write plugins, skins and mods.

Udumbar is my take on an XBMC skin. It is based on the following principles:

  • Opinionated - I have firm beliefs about hiding certain options.
  • Simple - Show the necessary, hide the rest.
  • Cohesive - Everything from the navigation to the typography should feel like it belongs together.
  • Beautiful - Subjective, yes. I made the best attempts to use beautiful typefaces and iconography.


XBMC skinning guidelines state that the interface should be functional and beautiful at 5 feet or 15 feet away from the screen. I wanted the media to be the centerpiece and get from the start screen to a movie or music album within 2 clicks of a mouse.


The skin defaults to the movies panel, where you get access to the most recently added movies, watch history and a random pick from your library. Still a work in progress

All the skin files are written in XML. This is an example of a control called wraplist.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<control type="wraplist" id="300">
            <description>Home Wraplist</description>
            <posx>0</posx>
            <posy>72</posy>
            <width>880</width>
            <height>200</height>
            <onup>2</onup>
            <ondown>3</ondown>
            <viewtype>list</viewtype>
            <onleft>1</onleft>
            <onright condition="Container(300).HasFocus(1)">SetFocus(936)</onright>
            <focusposition>4</focusposition>
            <scrolltime>200</scrolltime>
            <autoscroll>false</autoscroll>

            <itemlayout width="650" height="190">
                <control type="image">
                    <texture>$INFO[ListItem.Icon]</texture>
                    <width>200</width>
                    <height>200</height>
                    <posx>90</posx>
                    <posy>6</posy>
                </control>

                <control type="label">
                    <posx>290</posx>
                    <posy>47</posy>
                    <height>90</height>
                    <width>600</width>
                    <info>ListItem.Label</info>
                    <font>XLarge</font>
                    <textcolor>white</textcolor>
                    <align>left</align>
                </control>
            </itemlayout>



The music section of the home screen shows a visualization, currently playing song and the option to drill down deeper into the music subsection.

Controls and transitions are provided by the XMBC framework which is written in Python. Conditional rendering is also implemented as a part of the skin API.