Create my own skins or GUI for LinuxMCE

From LinuxMCE
Jump to: navigation, search
Programmer's Guide


Graphical User Interface

The graphical user interface (GUI or UI) you see on the Orbiters is defined in the pluto_main database. sqlCVS is the utility that keeps the databases in sync and allows you to share your changes with others.


Designer is a software program used to create the screens to display on the Orbiters. Every element you see on the Orbiter screen, including the screen itself, is a "Design Object" ("DesignObj"). Every DesignObj has one or more variations for each User Interface. Examples of the User Interface are "standard 3:4 monitors", "TVs and webpads", "vertical 4:3 PDAs", "Symbian series 60 mobile phones", and so on. For example, a screen (a DesignObj) for the standard 3:4 variation (perhaps used with a DVD remote) might have two columns of buttons and a data grid. However the 4:3 PDA variation, which is designed for a smaller screen, may have fewer buttons and a "more..." button to take you to the next screen (which has more buttons).


A skin refers to a set of graphical files (bitmaps) which are the backgrounds of the DesignObjs. There is a "marble" skin, which has images resembling marble, and a "wood" skin, with buttons and backgrounds that look like wood. The "Snozberries" skin looks (and tastes!) like Snozberries!

Additional Screens

A variety of screens can be designated as the main menu. The main menu is the primary screen that the user interacts with. There can be a version that simply lists all the scenarios in a grid, like LinuxMCE's default. Another version might focus on just media scenarios. One might display pop up windows and rotating graphics. Creating a new main menu doesn't require redoing all the screens, though. You can still use existing submenus.


Upload a Background

The simplest way to change the look of your orbiter is to simply upload a new background image for the main menu. Do this in the LinuxMCE Admin Website-->Wizard-->Devices-->Orbiter-->upload BG. The main menu will have whatever background you upload, but the buttons and the other screens will be unaffected.

Create a New Skin

Another way to customize the orbiter is to create a new skin. This means you take all the graphics files in the the directory /usr/pluto/orbiter/skins/Basic (i.e. the "Basic" skin) and create new versions. The same size, same name, and the same directory structure will be used, but different pictures or backgrounds will be used (such as a water theme or tropical image theme).

The directory name is the same as the Description record in the "Skins" table. OrbiterGen will use the new graphics if they exist, and will revert to the graphics in "Basic" if they don't. You don't need to completely replace every graphic, just the ones you want.

Modify Menu Behavior

If you want to change the way the main menu behaves, you can create a new screen or DesignObj in Designer. Add a record to the DeviceTemplate_DesignObj table, where FK_DeviceTemplate=8 (the Orbiter) and FK_DesignObj=your new screen. This screen will then appear as a new main menu option on the Orbiter page (in LinuxMCE Admin).

Add a new type of Remote Control

You might want a different type of remote control. Let's say you added a device that controls your Jacuzzi, and you want to a remote control for it. You can use Designer to create the screen (or DesignObj). You would then add a record with the ID of the Jacuzzi's device template in the DeviceTemplate_DesignObj. You would also add a record to specify the DesignObj to use as a remote. When the user creates a climate scenario to control the Jacuzzi, it will show this new screen as a remote control.

Creating New GUIs

The most ambitious change is to create a new user interface. Let's say you have a new type of device, with a totally unique aspect ratio. You want to use it as an Orbiter. Maybe it has a screen that is an odd shape or or has unusual proportions. You would need to create a new user interface. Every screen of the new User Interface would need a variation that lays out the objects so they will fit on that screen. Fortunately, Designer is object oriented, so even if you have a screen that is an odd shape, you can still embeded stock objects (like media controls) without having to recreate their layout. Even if the layout is a triangle and requires a custom layout.

Creating a new user interface is a fairly big task that involves recreating the layouts of all the screens. If your screen is at all similar in shape and aspect ratio to an existing user interface, we recommend you only add a new entry in the Size table, specifying the resolution and a custom scale factor. OrbiterGen can also rotate screens. For example if you have a screen with a 5:3 aspect ratio, it may be easier to create a new Size for it simply by scaling the standard 4:3 user interface up by 25%.

LinuxMCE stores all the graphics in a size much larger than most Orbiters will ever need to display, anyway. This allows the graphics to be stretched and scaled with no visible loss of quality.

Also see the Designer User's manual and the Skins entry.

Go to LinuxMCE Admin Website-->Wizard-->Devices-->>Orbiter to specify the skin, user interface, language, and the main menu for each Orbiter.