Difference between revisions of "Create my own skins or GUI for LinuxMCE"

From LinuxMCE
Jump to: navigation, search
 
 
(10 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<p>First a quick glossary of terms.</p>
+
{| align="right"
−
<p>The graphical user interface 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.</p>
+
  | __TOC__
−
<p>Designer is a software program used to create the screens to see on orbiter.  Every element you see on the Orbiter's screen, including the screen itself, is a "Design Object" or "DesignObj".  Every DesignObj has one or more variations for each of the user interfaces.  Examples of the user interfaces are "standard 3:4 monitors, tvs and webpads", "vertical 4:3 PDA's", "Symbian series 60 mobile phones", and so on.  So for example a screen (a DesignObj), let's say a DVD remote, may have two columns of buttons and a data grid for the standard 3:4 variation.  However since the 4:3 PDA variation is designed for a smaller screen, there may be fewer buttons, and a "more..." button to take you to another screen which contains the rest.</p>
+
  |}
−
<p>A skin refers to a set of graphical files (bitmaps) which are the backgrounds of the DesignObjs.  For example there can be a "marble" skin, which has images that look like marble, and a "wood" skin, in which the buttons and backgrounds look like wood.</p>
+
[[Category: Development]]
−
<p>Additionally multiple screens can be designated as candidates for the main menu.  Since the main menu is a primary screen the user interacts with, there can be a version that simply lists all the scenarios in a grid, like LinuxMCE's default, or any other version that focuses on just media scenarios, or one with pop up windows and rotating graphics, and so on.  Create a new main menu doesn't necessarily require redoing all the screens.  You can still use the existing remote controls, file browsers, etc.</p>
+
[[Programmer's Guide]]
  
−
<p>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 site by choosing Wizard, Devices, Orbiter.  On the Orbiters page click the "upload BG" button.  The buttons and all the other screens will be unaffected, but the main menu will have whatever background you upload.</p>
+
==Terms==
  
−
<p>Another way to customize the orbiter is to create new skin.  This means you take all the graphics files in the the directory /usr/pluto/orbiter/skins/Basic (ie the "Basic" skin) and create new versions that are the same size, same name, and share the same directory structure, but have different pictures or backgrounds, such as a water theme or tropical images.  Add the record to the "Skins" table where the Description is the same as the directory name.  OrbiterGen will use the new graphics when they exist, and revert to the graphics in "Basic" when they don't.  So, you don't need to completely redo all the graphics, you can just do some.</p>
+
===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.
  
−
<p>If you want to change the way the main menu behaves, in other words the interaction with the user, you can create a new screen or DesignObj in Designer, and 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.</p>
+
===Designer===
 +
[[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).
  
−
<p>Also you may want a different type of remote control.  For example you may have added device to control a type of Jacuzzi, and you want to a remote control that is appropriate for that.  You can use Designer to create the screen or DesignObj, and then in the DeviceTemplate_DesignObj add a record with the ID of the Jacuzzi's device template, and also the DesignObj to use as a remote. Then when the user as a climate scenario to control the Jacuzzi it will show him this new screen as a remote control.</p>
+
===Skin===
 +
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!
  
−
<p>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, that you want to use as an orbiter. Maybe it has a screen that is an odd shape or or has unusual proportions. This means you need to create a new user interface, and every screen in the system will need a new variation that lays out the objects so they fit on that screen.  Fortunately Designer is object oriented, so even if you have a screen that is an odd shape, perhaps a triangle, and you need to create a custom layout, you can still embedded stock objects, like media controls, without having to recreate their layout, if they will fit.</p>
+
===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.
  
−
<p>Since creating a new user interface is a fairly big task that involves recreating the layouts of all the screens, normally 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. For example if you have a screen with a 5:3 aspect ratio, it may be easier to create a new Size for it, but use the standard 4:3 user interface and just specify that the Width has a scale factor that is 25% more than normal.</p>
+
==Modifications==
 +
===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.
  
−
<p>LinuxMCE stores all the graphics in the size much larger than most orbiters will ever need to display.  This allows the graphics to be stretched and scaled with no visible loss of quality.</p>
+
===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).
  
−
<p>You may also want to refer to the [[Designer User's manual]].</p>
+
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.
  
−
<p>In LinuxMCE Admin website go to Wizard, Devices, Orbiter to specify the skin, user interface, language, and the main menu for each orbiter.</p>
+
===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.

Latest revision as of 22:50, 19 October 2012

Programmer's Guide

Terms

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

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).

Skin

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.

Modifications

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.

Retrieved from "http://wiki.linuxmce.org/index.php?title=Create_my_own_skins_or_GUI_for_LinuxMCE&oldid=33006"