Create my own skins or GUI for LinuxMCE - Revision history

Mcefan at 21:50, 19 October 2012

2012-10-19T21:50:22Z

←Older revision		Revision as of 21:50, 19 October 2012
Line 2:		Line 2:
	\| __TOC__		\| __TOC__
	\|}		\|}
	[[Category: ~~Tutorials~~]]		[[Category: Development]]
			[[Programmer's Guide]]

	==Terms==		==Terms==

Randomblink at 22:44, 4 December 2008

2008-12-04T22:44:34Z

←Older revision		Revision as of 22:44, 4 December 2008
Line 38:		Line 38:
	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.		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]].		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.		Go to [[LinuxMCE Admin Website]]-->Wizard-->Devices-->>[[Orbiter]] to specify the skin, user interface, language, and the main menu for each Orbiter.

Perspectoff at 19:02, 24 May 2008

2008-05-24T19:02:51Z

←Older revision		Revision as of 19:02, 24 May 2008
Line 2:		Line 2:
	\| __TOC__		\| __TOC__
	\|}		\|}
	~~First a quick glossary of terms.~~		[[Category: Tutorials]]

	==Terms==		==Terms==

Line 40:		Line 41:

	Go to [[LinuxMCE Admin Website]]-->Wizard-->Devices-->>[[Orbiter]] to specify the skin, user interface, language, and the main menu for each Orbiter.		Go to [[LinuxMCE Admin Website]]-->Wizard-->Devices-->>[[Orbiter]] to specify the skin, user interface, language, and the main menu for each Orbiter.
	~~[[Category: Tutorials]]~~

Perspectoff: /* Create a New Skin */

2008-05-23T04:18:04Z

Create a New Skin

←Older revision		Revision as of 04:18, 23 May 2008
Line 24:		Line 24:
	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).		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 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.		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===		===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).		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).

Perspectoff: /* Designer */

2008-05-23T04:17:23Z

Designer

←Older revision		Revision as of 04:17, 23 May 2008
Line 9:		Line 9:

	===Designer===		===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).		[[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===		===Skin===

Perspectoff: /* Skin */

2008-05-23T04:17:04Z

Skin

←Older revision		Revision as of 04:17, 23 May 2008
Line 12:		Line 12:

	===Skin===		===Skin===
	A skin refers to a set of graphical files (bitmaps) which are the backgrounds of the DesignObjs. There is be "marble" skin, which has images ~~resemble~~ marble, and a "wood" skin, with buttons and backgrounds that look like wood. The "Snozberries" skin looks (and ~~even~~ tastes!) like Snozberries!		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===		===Additional Screens===

Perspectoff: /* Creating New GUIs */

2008-05-22T05:44:11Z

Creating New GUIs

←Older revision		Revision as of 05:44, 22 May 2008
Line 38:		Line 38:
	Also see the [[Designer User's manual]].		Also see the [[Designer User's manual]].

	Go to [[LinuxMCE Admin ~~website~~]]-->Wizard-->Devices-->>[[Orbiter]] to specify the skin, user interface, language, and the main menu for each Orbiter.		Go to [[LinuxMCE Admin Website]]-->Wizard-->Devices-->>[[Orbiter]] to specify the skin, user interface, language, and the main menu for each Orbiter.
	[[Category: Tutorials]]		[[Category: Tutorials]]

Perspectoff: /* Creating New GUI */

2008-05-22T05:43:59Z

Creating New GUI

←Older revision		Revision as of 05:43, 22 May 2008
Line 1:		Line 1:
	{\| align="right"		{\| align="right"
	\| __TOC__		\| __TOC__
	\|}		\|}
Line 29:		Line 29:
	===Add a new type of Remote Control===		===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.		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 ~~GUI~~==		==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~~, 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~~.		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.

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

	~~You may also want~~ to ~~refer~~ to ~~the [[Designer User's manual]]~~.		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.

	In LinuxMCE Admin website ~~go to '''~~Wizard > Devices > [[Orbiter]]~~'''~~ to specify the skin, user interface, language, and the main menu for each ~~orbiter~~.		Also see the [[Designer User's manual]].

			Go to [[LinuxMCE Admin website]]-->Wizard-->Devices-->>[[Orbiter]] to specify the skin, user interface, language, and the main menu for each Orbiter.
	[[Category: Tutorials]]		[[Category: Tutorials]]

Perspectoff at 05:37, 22 May 2008

2008-05-22T05:37:57Z

←Older revision		Revision as of 05:37, 22 May 2008
Line 4:		Line 4:
	First a quick glossary of terms.		First a quick glossary of terms.
	==Terms==		==Terms==

	===Graphical User Interface===		===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.		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===
	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~~.		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===		===Skin===
	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.		A skin refers to a set of graphical files (bitmaps) which are the backgrounds of the DesignObjs. There is be "marble" skin, which has images resemble marble, and a "wood" skin, with buttons and backgrounds that look like wood. The "Snozberries" skin looks (and even tastes!) like Snozberries!

	===Additional Screens===		===Additional Screens===
	~~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~~.		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==		==Modifications==
	===Upload Background===		===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 ~~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~~.		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.
	===~~Creating~~ New Skin===
	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~~.		===Create a New Skin===
	===~~Modifying~~ Menu ~~Behaviors~~===		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).
	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.
	===~~Additional~~ Remote Control===		The directory name is the same as the Description record 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.
	~~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.		===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 GUI==		==Creating New GUI==
	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.		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.

Rwilson131: wiki formating

2008-02-24T18:35:25Z

wiki formating

@@ 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>
+First a quick glossary of terms.
-<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>
+==Terms==
-<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>
+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>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>
+You may also want to refer to the [[Designer User's manual]].
 [[Category: Tutorials]]