Configuring XleTView

Configuring the channels that are available

Any TV will have a list of channels available, and XleTView also offers this functionality. Unlike a real TV, you need to tell it what channels are available and you can do this by editing the config/channels.xml file. The default version of this file looks like this:

<?xml version="1.0" encoding="ISO-8859-1"?>
<CHANNELS>
  <CHANNEL>
    <NAME>0</NAME>
    <MEDIA>config/defaultbg.jpg</MEDIA>
  </CHANNEL>
</CHANNELS>

As you can see, each channel definition consists of two parts. The <NAME> element contains the channel name or number that will be assigned to this channel. The <MEDIA> element tells XleTView what it should display in the background when that channel is selected. This can either be a JPEG image (which should be 720 pixels wide by 576 pixels high) or it can be an AVI file if you prefer a moving background. Please note that only some types of AVI file are supported – see the section on using video with XleTView for more details.

When you first start XleTView, it will display the channel listed first in the channels.xml file. In version 0.3.6 of XleTView it is not possible to change the channel using the keys on the remote.

The safe area display

One of the most important things to remember about developing applications for a TV is that not all TVs display the same area of the screen. Up to 10% of the picture can be lost due to overscan, and a further 10% may suffer from distortion. To help content producers avoid problem with distorted or missing pieces of the image, the safe area is the central 80% of the screen that is guaranteed to be visible and free from distortion. In practise it’s a little more complex than that, and if you’re really interested then we take a slightly more in-depth look at safe areas in our guide to designing TV user interfaces.

XleTView lets developers show a marker to indicate which parts of the screen are inside the safe area. This can help you to make sure that any important widgets displayed by your application are inside the safe area. By default, this marker is a yellow box that shows an area 10 pixels in from the edges of the screen. While this is not the same as the safe areas used in professional broadcasting, you can configure it to match any safe area you need.

The config/settings.txt file contains the settings for the safe area. The relevant settings are:

Other configuration options

The XleTView user interface is very flexible, and it’s possible to change many of the parameters that determine the basic look and feel of XleTView. These settings, as well as a few others are stored in the file config/settings.txt. It’s important to note that any path names in the settings.txt file use forward slashes, even on a Windows PC. Also, there should be no white space at the end of a line. The default values for these settings are shown below.

console.font=Helvetica
console.fontsize=10
console.height=200
console.show=true
console.width=500
console.x=0
console.y=0
extra.classpath=
file.applications=config/applications.xml
file.defaultbg=config/defaultbg.jpg
file.settings=config/settings.txt
font.sizeoffset=-2
path.config=config
remote.show=true
safearea.color=#ffee00
safearea.height=556
safearea.show=true
safearea.width=700
safearea.x=10
safearea.y=10
tv.center=true
tv.screenheight=576
tv.screenwidth=720
tv.x=0
tv.y=0

The meanings of these values is as follows:

Configuring the remote

As you will have noticed, the default remote control (RCU) that XleTView displays is pretty basic. This is fine for simple applications, but for more complex applications you may need keys that are not available on the default RCU layout. Luckily, we can customize the RCU layout as we need to. The layout of the remote control is defined in the config/remote_control.xml file, and so by changing this you can change the number of buttons on the remote control, their position, and the keys that are assigned to them.

The default remote_control.xml file is shown below:

<?xml version="1.0" encoding="iso-8859-1"?>
  <remotecontrol width="130" height="100" 
                    imgroot="config/remote_images/" 
                    backgroundimage="remote_bg.png" 
                    backgroundcolor="">

  <buttons x="25" y="20" width="100" height="100"> 
    <button img="button_red.png" 
            x="0" y="0" 
            width="20" height="14" 
            keycode="HRcEvent.VK_COLORED_KEY_0"/>
    <button img="button_green.png" 
            x="20" y="0" 
            width="20" height="14" 
            keycode="HRcEvent.VK_COLORED_KEY_1"/> 
    <button img="button_yellow.png" 
            x="40" y="0" 
            width="20" height="14" 
            keycode="HRcEvent.VK_COLORED_KEY_2"/> 
    <button img="button_blue.png" 
            x="60" y="0" 
            width="20" height="14" 
            keycode="HRcEvent.VK_COLORED_KEY_3"/> 
  </buttons>

  <buttons x="35" y="45" width="100" height="100"> 
    <button img="button_arrow_up.png" 
            x="20" y="0" 
            width="20" height="20" 
            keycode="HRcEvent.VK_UP"/>
    <button img="button_arrow_left.png" 
            x="0" y="20" 
            width="20" height="20" 
            keycode="HRcEvent.VK_LEFT"/> 
    <button img="button_ok.png" 
            x="20" y="20" 
            width="20" height="20" 
            keycode="HRcEvent.VK_ENTER"/> 
    <button img="button_arrow_right.png" 
            x="40" y="20" 
            width="20" height="20" 
            keycode="HRcEvent.VK_RIGHT"/> 
    <button img="button_arrow_down.png" 
            x="20" y="40" 
            width="20" height="20" 
            keycode="HRcEvent.VK_DOWN"/> 
  </buttons> 

  <buttons x="35" y="110" width="100" height="100"> 
    <button img="button_1.png" 
            x="0" y="0" 
            width="20" height="20" 
            keycode="HRcEvent.VK_1"/>
    <button img="button_2.png" 
            x="20" y="0" 
            width="20" height="20" 
            keycode="HRcEvent.VK_2"/>
    <button img="button_3.png" 
            x="40" y="0" 
            width="20" height="20" 
            keycode="HRcEvent.VK_3"/> 
    <button img="button_4.png" 
            x="0" y="20" 
            width="20" height="20" 
            keycode="HRcEvent.VK_4"/>
    <button img="button_5.png" 
            x="20" y="20" 
            width="20" height="20" 
            keycode="HRcEvent.VK_5"/>
    <button img="button_6.png" 
            x="40" y="20" 
            width="20" height="20" 
            keycode="HRcEvent.VK_6"/> 
    <button img="button_7.png" 
            x="0" y="40" 
            width="20" height="20" 
            keycode="HRcEvent.VK_7"/>
    <button img="button_8.png" 
            x="20" y="40" 
            width="20" height="20" 
            keycode="HRcEvent.VK_8"/>
    <button img="button_9.png" 
            x="40" y="40" 
            width="20" height="20" 
            keycode="HRcEvent.VK_9"/>
    <button img="button_ast.png" 
            x="0" y="60" 
            width="20" height="20" 
            keycode="HRcEvent.VK_ASTERISK"/>
    <button img="button_0.png" 
            x="20" y="60" 
            width="20" height="20" 
            keycode="HRcEvent.VK_0"/>
    <button img="button_square.png" 
            x="40" y="60" 
            width="20" height="20" 
            keycode="HRcEvent.VK_NUMBER_SIGN"/>
  </buttons>

  <buttons x="25" y="195" width="100" height="100"> 
    <button img="button_exit.png" 
            x="25" y="0" 
            width="30" height="20" 
            keycode="HRcEvent.VK_ESCAPE"/> 
  </buttons> 

  <buttons x="45" y="220" width="100" height="100">
    <button img="button_channel_down.png" 
            x="0" y="0" 
            width="20" height="20" 
            keycode="HRcEvent.VK_CHANNEL_DOWN"/> 
    <button img="button_channel_up.png" 
            x="20" y="0" 
            width="20" height="20" 
            keycode="HRcEvent.VK_CHANNEL_UP"/> 
  </buttons> 

</remotecontrol>

This file consists of a <remotecontrol> element that gives the overall look of the remote control. The height and width attributes give the size of the remote, while the imgroot attribute tells XleTView where it should look for images used by the remote control. The backgroundimage attribute defines which image should be used as the background of the remote, while the backgroundcolor attribute tells XleTView which color it should use for areas of the remote control that are not covered by a background image

The <remotecontrol> element defines the basic size and appearance of the remote, but says nothing about which buttons are present and how they are laid out. To do this, we use one or more <buttons> elements, which define groups of buttons on the remote control. Each <buttons> element has a position and a size that defines where that group of buttons will appear on the remote. All of these attributes must be present for any <buttons> element that you define.

Within each <buttons> element are one or more <button> elements, which define individual buttons. These also have a position and a size, as well as an image associated with them that defines what that button looks like. This image is used to display the remote control, so every button that you define should have an img attribute. The img attribute gives the filename of the button relative to the base directory for remote control images, which is given by the imgroot attribute in the parent <remotecontrol> element. The most important part of a button definition, however, is the keycode attribute. This tells XleTView which key code that button corresponds to. This should be one of the constants from the org.havi.ui.HRcEvent class.

As with other configuration changes, any changes that are made to the remote_control.xml file will only be applied when XleTView is restarted.