Xlobby Overview

Page 1 of 1

Overview: Xlobby is not your average home theater front-end. It is a highly customizable piece of software that can be whatever you want it to be. Generally every piece of software written needs an interface of some kind. So is the case with Xlobby. Not only does the program itself have a windows interface, which will be identified, Xlobby is a software program that lets you create an interface of various windows programs. Originally Xlobby was a graphical representation of a catalog of movies. From there it evolved into catalogs of other media. Then came integration of commands and events to execute the media. Early editions of Xlobby were less graphical and more code driven. Now Xlobby has a unique event and skinning system, allowing any user to create and operate almost all of Xlobby’s functions from the skin. A skin is a shell or a clothing of graphics used to execute the parameters of a program. In Xlobby there are many functions to operate your multimedia from your computer. A skin is the GUI, graphical user interface, organized to have access to these functions. The layout on the computer monitor is determined in the make-up of the skin. The skin designer has free range where to put each button, category or variable. This allows for unique, beautiful and highly functional skin, different from any other HTPC front-ends. Because of the exclusive skin editor in Xlobby, the skins available for Xlobby can be drastically different. Many times you would not know it was the same program powering the variety of GUI’s available in Xlobby. That is what makes Xlobby so powerful, it is so customizable! Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/Overview.html

5/10/2006

Directory Structure

Page 1 of 2

Directory Structure: Once you download and extract Xlobby It will create directories of information. In the skins folder you will find the default folder with Xlobby’s standard backgrounds, buttons, databases, eventgroups, resources, sounds and .xml pages. All of these can be changed and will be if you create a custom skin.

Your new skin will also follow this directory structure. The easiest way to begin your custom skin without destroying the default skin is to copy and paste the default folder into the same directory while renaming it to something like “mycustomskin”. All of your edits will be applied to the files in your skin and you will always retain the ability to revert back to the default skin. Leave the “default / files” Alone!

In the backgrounds folder is where the background images are stored. These are images that will appear as backgrounds to each of Xobby’s screens. The images can be standard picture formats: .jpg, .jpeg, .gif, .bmp, .png.

http://xlobby.incolby.com/Skinning_Xlobby_3/Directory%20Structure.html

5/10/2006

Directory Structure

Page 2 of 2

In the buttons folder is where all the button images are stored. These are the images that will appear as buttons for each of Xobby’s screens. The images can be standard picture formats: .jpg, .jpeg, .gif, .bmp, .png. They should be saved as .png for the best results. Also xresource images are stored here. These are the images used for highlighting categories, and volume and progress meters. In the databases folder is where the databases of your media is stored. These are .xml files that store all of the information pertaining to your music, movies, pictures, games and other databases. Databases found in the skins folder superseed duplicate named databases in the root Xlobby folder. In the eventgroups folder is where user custom event groups are stored. These are .xml files that store all of the information pertaining custom events for your skin. The eventgroup in the skins folder is the initial set of events Xlobby defaults to. If events are changed within Xlobby and stored in the SKINS event groups in the event manager the .xml file will be placed here. This allows easier packaging of skins for distribution. In the resources folder is where the font styles, color, shape, sounds are stored. These are .xml files that store all of the information pertaining to your font specifications, and Color specifications. With the resource manager you can create font sets and shapes to apply as resource themes. The remaining xml files are the pages created for a skin. As a new page is made the information about the page will be made into xml files. These pages hold the information about position, events and display of categories and buttons. Generally one should not modify pages here in a text editor, all modifications will be made possible in the skin editor. Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/Directory%20Structure.html

5/10/2006

Xlobby Buttons

Page 1 of 1

Buttons: While Xlobby supports a variety of images for its graphical front-end standard .GIF, of .SWF files will not work as buttons, unless animation is enabled in the setup menu. Even then buttons dont work as standard web buttons. Xlobby uses standard images in sets of threes to create roll-over and press effects. These images can be created in popular photo editing or paint software and saved for use in Xlobby. While the word “button” usually refers to an image with an associated command, in Xlobby it may be used to refer to any image used in the interface design. To use your .png files as button images, there are 3 parts. The base image (button.png), the mouseover, hover or rollover (button-enter.png) and mousedown, press, or hit state (buttondown.png). For Best results make all the buttons with all 3 images. Images that will be used in the show/ hide feature do not need all 3 states.

For Mouse, Keyboard and IR Remote applications: Not all 3 images are required for a button, but It is recommended, using at a minimum the (button) and (button-enter) images to show when a particular button has been selected. For Touchscreen and Pocket PC applications: Not all 3 images are required for a button, but It is recommended, using at a minimum the (button) and (button-down) images since there is no hover or rollover state. Other advanced buttons can have toggle states and can have limitless amounts of images depending on the state of the button. The default dash enter and dash down suffixes don't apply to these toggles. But can be used in conjunction with them. In these cases the user decides on any images for the toggle button and for all of its states. Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/Buttons.html

5/10/2006

Xlobby Setup

Page 1 of 2

Setup: *There will not be an attempt to explain every function on the setup menu, this section is only to identify elements referenced while skin editing.

General: This is where you set your Foobar / winamp zones, and trailer paths. You must specify a foobar/ winamp zone for winamp to startup, play, and communicate correctly. You can also setup your Daemon Drives to read iso / cue files. Selecting Fast Interface, preloads coverart and images on startup. Slow Interface loads the covers and images upon call for them. Basic: This is where you set your Music, Picture, and Movie paths. These paths will populate their databases. Misc: has checkboxes for: z

z

z

z

z

Load HTTP images on startup- checking this box; any images referenced off the web will refresh or load on startup. Play Buttons Sounds - checking this box; if you want your “click.wav” to play sound on button press Hide Audioplayer- checking this box; will hide the audioplayer running in the background upon startup Load RSS on startup- checking this box; will load rss information from the web upon startup. Popup Help- checking this box; allows popups (tooltips) to be displayed for button. *note

http://xlobby.incolby.com/Skinning_Xlobby_3/Setup.html

5/10/2006

Xlobby Skin Editor

Page 1 of 1

Skin Editor: One of the most powerful parts of Xlobby is the ability to create custom skins. You can access the skin editor by clicking on the skin editor button in a skin or by using the pause / break key on the keyboard. The skin editor is a placeable pallet easily positioned on the screen. There are a lot of tabs, tools and information available within the skin editor. Each will be identified and explained. The arrow keys on your keyboard can be used to position elements in a skin pixel by pixel. All visible items on a screen are outlined by marquee box. Heavy yellow boxes represent categories. To muti-select buttons and/or text hold the shift key while holding the left mouse button and drag a yellow dashed marquee box from the upper left or lower right. The current page on which you are editing is listed in parenthesis atop the skin editor: Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/SkinEditor.html

5/10/2006

Xlobby Setup

z

Page 2 of 2

you must create these popups manually. Touchscreen-

You can configure the autoplay feature and trailer features, and which monitor to display. You can set the slideshow increment and delete the picture cache. You can set your xlobby forum username and password, to upload your nowplaying to the forum. Skins: This is where you set choose which skin Xlobby will display. There is a default skin, and any other skins you create or download in the drop-down box. You also can set the screen resolution of your skin here from presets or specify. You can also choose resource themes for the particular skin. You can set a language converter. You can enable animations if the skin has swf or gif files. *Enabling animations severly degrades performance!!! Databases: This is where you can view, update and edit your databases. Within each database are metatags of the imported information You can also create your own custom tag for each entry within the database. There is also an import tab which allows you create custom db, templates or import via preset templates. Webbased RSS Databases can be referenced here . IR Plugin: This is where you can choose devices and transmit and learn ir functions. Usually used with USB-Uirt to communicate with your home theater equipment. FileTypes: This is where you can set the file types for a given program with its switches and variables. This associates categories with how a file opens or executes. You can have commandline scripts here so the file executes via parameters set here. You can assign events for start, end, and offline status of a category. The Event Manager: is where you create or modify events for use on buttons, etc within the Xlobby skin. Any custom event that you create should be created within the SKIN group. Remember Xlobby reads SKIN events first thus overriding the default events. You can drag and drop events into folders and positions within the event manager. The event must exist before you can apply it to a button in the skin editor. Almost all commands that Xlobby is capable of can be accessed in the event manager. Plugins: This is where you can choose and configure Xlobby plugins Download: This allows you to update the version of Xlobby and plugins. You can download the list of what is available, and colored dots indicate current or not. Then you can download the newest versions. Xlobby will automatically restart. Xnet: This is where you set up server and client ips so that you can run xlobby in server client modes. This allows for multizoneing and/or syncing. About: This shows the latest build and memory usuage of your version of xlobby. Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/Setup.html

5/10/2006

Skinning Item

Page 1 of 1

Item: An item is a button, graphic, textbox, variable, category, or EPG. These are the elements that make up an Xlobby GUI. In the skin editor you may position, resize and assign commands to any item. The item Tab: Gives you access to the functions of a specific or multiple items. There are 10 sub-tabs Default, Advanced, Display, Image, Event, Text, EPG, Category, Sound, Navigation. Default: is where items are selectedm positioned and removed. Advanced: is where showing and hiding, and multiscreen buttons are assigned. Display: is where font colors and attributes are assigned. Image: is where an items graphic is chosen. Event: is where toggle states are created, and click, enter, and exit commands are assigned. Text: is where text is inputed as labling or variables. EPG: is a for basic structuring of the Electronic Program Guide. Category: is where category attributes and layout is assigned. Sound: is where button sounds are assigned. Navigation: is where the order of navigation for elements on a screen is determined. Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/item.html

5/10/2006

Skinning default

Page 1 of 2

Default tab: Start Up Screen checkbox: Lets you specify whether the page you are editing is the screen Xlobby loads to initially. *you should only have this checked on one page! Generally the menu page. z ID: Lets you specify a special name for a button. This ID is required for the show / hide feature as well as some other functions. Generally it’s not required. z X: Lets you specify the X coordinate position for the selected button. z Y: Lets you specify the Y coordinate position for the selected button. *X:0, Y:0 is the very upper left hand corner of the screen. The coordinates are specified in pixels. z W: Lets you specify the width of the selected button (s) in pixels. z H: Lets you specify the height of the selected button (s) in pixels. z Nav Item checkbox: Lets you specify whether the selected button is navigate able by mouse, keyboard, or IR remote. z Hidden checkbox: Lets you specify whether the selected button is hidden (wont show) by default. z Multi Screen checkbox: Lets you specify whether the selected button will be a button on multiple pages. z Default checkbox: Lets you specify whether the selected button is the default highlighted button when page is entered. *you should only have one default button per page. Aspect Ratio checkbox: Constrains the selected button to its aspect ratio, this keeps the button proportionally uniform when the skin is scaled. Quick Set button: Lets you apply the last applied resource to the item selected. (Saves you toggling back to resources tab to reapply) /\: Moves the item up in the list. Reset: Lets you reset the selected button to its original image size as saved in the buttons folder. Delete Button: Removes the selected button from the page only. Front: Moves the selected button to the front of the list of buttons, and to the foreground of the page. Back: Moves the selected button to the back of the list of buttons, and to the background of the page. \/: Moves the item down in the list z

z

z

z z

z z

z

z

When Multiple items are selected the coordinates and some options will not be present. However,

http://xlobby.incolby.com/Skinning_Xlobby_3/default.html

5/10/2006

Skinning default

Page 2 of 2

multibutton align tools will now be visible. (bottom icons from left to right) z

z

z

z

z z

Align to top: Aligns multiple selected images to the lowest value Y coordinate of the image group. Align to bottom: Aligns multiple selected images to the highest value Y coordinate of the image group. Algin to left: Aligns multiple selected images to the lowest value X coordinate of the image group. Align to right: Aligns multiple selected images to the highest value X coordinate of the image group. Distribute rows: Evenly distribute rows across range of Y values. Distribute rows: Evenly distribute columns across range of X values.

Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/default.html

5/10/2006

Skinning advanced

Page 1 of 1

Advanced tab:

z

z

Multi Screen Button box: Lets you see and multiselect all the screens the selected button will appear. It copies the button with its associated event. This allows manipulation of one button and all pages referencing it will update. Show and Hide box: Lets you see and multi-select all the images the selected button will show or hide with upon button enter. If an image is hidden by default (checkbox hidden) then it will be shown upon enter. If it is visible it will hide on rollover. *images to be shown or hidded must have an ID: specified.

Top © 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/advanced.html

5/10/2006

Skinning screen

Page 1 of 4

Screen tab: Resource z

z

z

z

z

z

Unset button : Removes the resource from the selected button, text or shape. New button : Creates a new resouce, or branch in the resource tree. Add Child button : Adds a child nested under the selected resource. A child can share attributes or be different than the parent. *child with the name enter is a special case child. Upon enter of a button or text the display resource will change to child until exit of the button or text. Clone button : Creates a new resource cloned off of the selected one. Helpful in creating subtle variations in resources, as opposed to starting from new. Delete button : Deletes the selected resource, and all children if aplicable. Resource Tree : A list of all resources, expandable by clicking the +. Children are nested down-left of parent. To rename a resource double click its name.

Font A resource has font attributes that can be manipulated in this tab. z

z

z

z

Non Scaling Checkbox: Select this to keep the font resource from scaling at different screen resolutions. Size in pixels: Lets you specify the font size (in pixels) for selected text or button text. With child resources you can use prefixes + or - before the size to scale up or down a percentage of the parent resource. (ie. -10% would make the child 10% smaller than its parent.) Color (HEX): Lets you specify the font color for selected text or button text. The color is specified as a hexadecimal number. Color button: Lets you specify the font color for

http://xlobby.incolby.com/Skinning_Xlobby_3/display.html

5/10/2006

Skinning screen

z

z

z

z

z z z

z

z

z

Page 2 of 4

selected text or button text. It opens a color selector to choose a color, alpha and/or resource. Font Family: Lets you specify the font for the selected text or button text. These are installed fonts on your computer. Text Styles: Lets you choose the alignment of the text. { top left: aligns text at the top left of a button or textbox. { top center: centers text at the top of a button or textbox. { top right: aligns text at the top right of a button or textbox. { middle left: aligns text at the middle left of a button or textbox. { middle center: centers text in middle of a button or textbox. { middle right: aligns text at the middle right of a button or textbox. { bottom left: aligns text at the bottom left of a button or textbox. { botttom center: centers text in bottom of a button or textbox. { bottom right: aligns text in bottom right of a button or textbox. Shadow Checkbox: Adds a small drop shadow to the text in a button or textbox. It increases the contrast of standard text. Move Checkbox: Used on buttons, it artificially shifts the text down and right a bit when the button is pressed simulating a down effect. Bold Checkbox: Makes the font bold for selected text or button text. Italic Checkbox: Makes the font Italic for selected text or button text. Outline Color (HEX): Lets you specify a color for selected text or button text. The color is specified as a hexadecimal number. Color button: Lets you specify the font color for selected text or button text. It opens a color selector to choose a color, alpha and/or resource. { Off radiobutton: Lets you turn off the outline for text. { 1 radiobutton: Lets you apply a thin (1px) outline on the text. { 2 radiobutton: Lets you apply a thick (3px) outline on the text. X: offset: Lets you specify the offset to the right for positive amounts and to the left for negative amounts the position of the text on a button or text box. Y: offset: Lets you specify the offset to the bottom for positive amounts and up for negative amounts the position of the text on a button or text box.

Shape A shape resource color and line attributes.. z

z

z

z

Color (HEX): Lets you specify the font color for selected text or button text. The color is specified as a hexadecimal number. Color button: Lets you specify the font color for selected text or button text. It opens a color selector to choose a color, alpha and/or resource. Outline Color (HEX): Lets you specify a color for selected text or button text. The color is specified as a hexadecimal number. Color button: Lets you specify the font color for selected text or button text. It opens a color selector

http://xlobby.incolby.com/Skinning_Xlobby_3/display.html

5/10/2006

Skinning screen

z

Page 3 of 4

to choose a color, alpha and/or resource. Outline Thickness: Lets you choose the width in pixels of the outline to a shape resource.

Color Selector The color selector window allows sampling of thousands of colors for text, shapes, and outlines. z

z

z

z

z

Color wheel: Select any color within the pallete. Lighten / Darken bar: The slider effects the amount of white or black value in the selected color. The tone of the color doesn't change only its light and dark values. Alpha slider: adjust the amount of alpha (transparency) for a selected color. The range is 0-255. Zero being completely transparent, and 255 being completely opaque. Set Color input box: You may specify a color here with its hexidecimal text. (ie.copy and paste into this box the color value from another windows app) HSV and RGB { Hue slider: Adjusts the hue of the selected color. Values are from 0-255. Hue is a measure of position of color. { Saturation slider: Adjusts the saturation of the selected color. Values are from 0255. saturation is a measure of intensity of a color.

http://xlobby.incolby.com/Skinning_Xlobby_3/display.html

5/10/2006

Skinning screen

Page 4 of 4

Brightness slider: Adjusts the brightness of the selected color. Values are from 0255. Brightness is a measure of how much white is in a color. { Red slider: Red slider: Adjusts the amount of blue in the selected color. Values are from 0-255. { Green slider: Green slider: Adjusts the amount of blue in the selected color. Values are from 0-255. { Blue slider: Adjusts the amount of blue in the selected color. Values are from 0255. OK button: Applys the selected color or resource, and closes the color selector window. Cancel button: Doesn't affect the color, and closes the color selector window. HEX: The hexidecimal value of a color is displayed here. Color sample: This is a swatch of the color you are editing. Resources box: A list of color resources saved in your skin. A color can be edited saved as a resource to be reapplied to other objects later. You can rename resources in this box. Delete: You can delete a selected color resource. Name input box: Type a name for a new resource to be saved. Save as Resource: Click to save newly named resource to color resources. {

z z z z z

z z z

Top © 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/display.html

5/10/2006

Skinning image

Page 1 of 2

Image tab:

z

z

z

z

z

Preview window: Previews the image of the selected button. Images box: Lets you choose the desired image for a selected button. Only the images in the skinname>buttons folder are available. Refresh button: Refreshes the images in the skin>button folder for display. Use if you add or change images in the buttons reptiore will skinning.

Toggle State : Choose a toggle state of a button then its image. If no toggle states are available the drop down menu will not be populated, rather grayed and labled default. The dropdown box will have as many states as you specify. Preview State: A preview state lets you see a buttons image for all three state dictated by the button's suffix. You can not choose the down and enter states of a button. If down and enter events are not present the preview buttons will not be active. { UP button: Click this to preview the up state of a button. Or the graphic.png { Down button: Click this to preview the down state of a button. Or the graphic-down.png { Enter button: Click this to preview the enter state of a button. Or the graphic-enter.png

http://xlobby.incolby.com/Skinning_Xlobby_3/image.html

5/10/2006

Skinning image

Page 2 of 2

Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/image.html

5/10/2006

Skinning events

Page 1 of 2

Event tab: Toggle buttons are buttons that change images upon press and "stick" in that state and/or have different events per state of toggle. To create a toggle you MUST GIVE the button an ID! Toggle State Textbox : Displays the name of the toggle state of a button. Alllows you to name a new toggle state. *if no toggle states exist it will be greyed and labled default z Toggle State List : Displays the states of the selected toggle button. You can choose the state on which to add events. z Default Checkbox : By selecting default, this assigns the toggle state in which the button will be in upon launch of Xlobby. It creates a toggles initial state. TIP: which ever toggle state is selected when closing the skin editor this that will be the state the button will be in z Add State Button: Adds a new state to the selected button. Will be new1 until/if its renamed. z Delete State Button: Deletes the toggle state from the button as shown in the list of states. z Click Event Assign Button: Assigns an event from the event manager to the selected button and/or toggle state upon click or press of the button in Xlobby. z Click Event Remove Button: Removes the click event from the selected button and/or toggle state. Enter Event Assign Button: Assigns an event from the event manager to the selected button and/or toggle state upon enter or rollover of the button in Xlobby. Enter Event Remove Button: Removes the enter event from the selected button and/or toggle state. Exit Event Assign Button: Assigns an event from the event manager to the selected button and/or toggle state upon exiting or rolloff of the button in Xlobby. Exit Event Remove Button: Removes the exit event from the selected button and/or toggle state. z

z

z

z

z

Event Manager: Upon assigning of events; another window will open. This is the select event window. It list the same events found in the event manager of Xlobby's setup window.These events are grouped and labeled according to the user. TIP: Label your events with logical, easy to find groups and titles.

http://xlobby.incolby.com/Skinning_Xlobby_3/event.html

5/10/2006

Skinning events

Page 2 of 2

You can NOT edit groups here, only select them. You can expand them to see the commands assocated withe the event name. Once an image or text has an event it is official a button, the user can click on it or hover to it, and it will perform some opperation. z

z

z

Event Manager Event Tree : List all of the groups, events and commands created for use Xlobby. Any event nested under the SKIN group will be saved in the skin folder and be skin specific. Those outside of the Skin group will be available in any skin. Select Button: Assigns an event from the event manager to the selected button and/or toggle state and closes the event selector window. Cancel Button: Does NOT assign an event and closes the event selector window.

TIP: You can only add one event to a button state at a time. If you need Xlobby to perform multiple tasks with a single button, you must make multi-command events, (events with commands strung together).

Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/event.html

5/10/2006

Skinning text

Page 1 of 1

Text tab:

z

z

z

Enable Scrolling Checkbox: Causes the textbox to scroll from left to right. Useful for infomation "tickers". Text input Box : Here is where you input text or variables for a given textbox, or button. You can create multiline text by pressing enter key, or leave text as a continuos line and it will wrap within the text box. Actual Text preview: This shows the actual text that will visible in the Skin. If variables are used as text this will preview the actual text.

Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/text.html

5/10/2006

Skinning EPG

Page 1 of 1

EPG tab:

z

z

z

z

z

z

z

Time Color: Lets you set the Color of text for the EPG times. Channel Color :Lets you set the Color of text for the EPG Channels in the database. # of Channels :Lets you set the number of channels displayed from your EPG database. (similar to category rows) # of Hours : Lets you set the number of hours displayed from your EPG database. (similar to category colums) Time Format :Lets you set the way times will be displayed. (dependent on date/time variables) Channel Listings Box: Lets you see all the channels listed in your EPG. Set Filters Button : Lets you set program filters.

Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/epg.html

5/10/2006

Skinning category

Page 1 of 6

Category tab: A category is display of a database. A category can have rows and/or columns. A category refers to a database for information. When selecting a category in the onscreen with skin editor, it will be indicated by a heavy dashed outline. z

z

z

z

z

z

z

Name: This is the name of the category. Categories must have a name for category events and variables to work. e. Info Screen : This is the name of the screen where subitem details of a database will be displayed. If this line is left blank then the details will display in the selected category not on another screen or overlay *the prefix overlay: before the screen name opens details of a category as an overlay instead of a page. Display: sets the category variable, or "tag", to be displayed in the selected category. Variables are indicated between % signs. Multiple variables as well as text may be inputted. Columns: sets the number of columns of database entries displayed in the category. Must be whole values. Rows: sets the number of rows of database entries displayed in the category. Must be whole values. Ratio: sets the coverart porportion ratio for a category. The first number in the ratio is the width, and the second is the height. 1:1 would be for square covers such as cds, whereas 3:5 may be better for dvds. Spacing (%) : sets the spacing between category entries. This number takes the overall size or the category and sets the spacing as a percentage of

that.

Layout z

z z z z

z z z z z z

The layout box shows the different category layouts available in Xlobby. Nocover default : Displays the display variable without coverart. Text is only shown in the category. Nocover side left: Displays the display variable with small coverart on the left of the text. Default all: Displays the display variable over the coverart for all entries in the category. Default missing: Displays the display variable only for entries without coverart. Default missing 2: Displays the display variable text only on enter or "rollover" of the category item. Bottom 1 : Displays the display variable text in one line below the item coverart. Bottom 2 : Displays the display variable text in two lines below the item coverart. Bottom 3 : Displays the display variable text in three lines below the item coverart. Top 1 : Displays the display variable text in one line above the item coverart. Top 2 : Displays the display variable text in two lines above the item coverart. Top 3 : Displays the display variable text in three lines above the item coverart.

http://xlobby.incolby.com/Skinning_Xlobby_3/category.html

5/10/2006

Skinning category

z z z

Page 2 of 6

Split 1 : Displays the display variable text in one line above and below the item coverart. Split 2 : Displays the display variable text in two lines above and below the item coverart. Split 3 : Displays the display variable text in three lines above and below the item coverart.

Database A database is a collection of information and/or files assembled together for display and executing in Xlobby. All of Xlobbys' database will be present in the

http://xlobby.incolby.com/Skinning_Xlobby_3/category.html

5/10/2006

Skinning category

Page 3 of 6

database box. Once a category is selected you can assign the database where the information is extracted and displayed by selecting the database from the list. *TIP: label your databases with logical names so they will be easy to assign in the category.

Scroll Scrolling has to do with the way the "cursor" or category selector reacts at the edge the category. The different styles can be selected in the scroll types list. z

z

z

z

z

z

Left Right: When the selector gets to the right most edge it will change pages and remane right Left Right Move: When the selector gets to the right most edge it will change pages and move to the left. Up Down : When the selector gets to the top most edge it will change pages and remain atop. Up Down Move : When the selector gets to the top most edge it will change pages and move to the bottom. Snake: When the selector gets to the right most edge it will drop down a line. If it is at the bottom right corner it will change pages and be up top left. None: the selector will not change pages of the category at page edge.

http://xlobby.incolby.com/Skinning_Xlobby_3/category.html

5/10/2006

Skinning category

Page 4 of 6

Display Each of the image and selector graphics for a category can be customized for display. Clicking the display buttons opens a category display box. z

z

z

z

z

z

z

z

z

z

z

z

z

z

No Cover: Lets you choose the image or shape resource for a category item witout coverart. Top Layer: Lets you choose the image or shape resource for a category item's top layer. Useful to put "gloss" or "glass" over coverart. Back Layer:Lets you choose the image or shape resource for a category item background. Back Layer Folder:Lets you choose the image or shape resource for a category item folder or container. Image caches will display over the backlayer folder, and upon enter of category details the backlayer folder image will not be displayed. Selected: Lets you choose the image or shape resource for the category selector. The coverart overlays this image. Unselected: Lets you choose the image or shape resource for the category when its not actively selected. The image highlighting a category item when the category is not selected on the screen. The coverart overlays this image. Playing Highlight: Lets you choose the image or shape resource for the music category item when it is currently playing. Playing Icon: Lets you choose the image or shape resource as an icon for the music category item when it is currently playing. The icon will appear on the bottom right of the category entry. In Playlist icon: Lets you choose the image or shape resource as an icon for the music category item when it is currently in the playlist. The icon will appear on the bottom right of the category entry. Not in Playlist icon:Lets you choose the image or shape resource as an icon for the music category item when it is not in the playlist. The icon will appear on the bottom right of the category entry. Offline: Lets you choose the image or shape resource as an icon for a category item when it is an offline item. The icon will appear on the bottom right of the category entry. Online: Lets you choose the image or shape resource as an icon for a category item when it is an online item. The icon will appear on the bottom right of the category entry. Selected Above :Lets you choose the image or shape resource for the category selector. The coverart is beneath this image. Unselected Above : Lets you choose the image or shape resource for the category when its not actively selected. The image highlighting a category item when the category is not selected on the screen. The coverart is beneath this image.

Category Display box

http://xlobby.incolby.com/Skinning_Xlobby_3/category.html

5/10/2006

Skinning category

z

Page 5 of 6

Display Tab Type Box: Lets you choose the resource style for the display resource.

z

Rectangle: Creates a rectangle shape with square corners as the image. Top: Creates a rectangle shape with rounded corners at top as the image. Bottom: Creates a rectangle shape with round corners at bottom as the image. Split: Creates a rectangle shape with rounded corners both top and bottom as the image.

z

Resource Tree: Lets you choose the resource for the display type.

z z z

Image Tab z

z

z

z

Images List: Lets you choose the image for the category display. These are the images in your Skin/Buttons folder. Images Preview: Lets you preview the selected image. Refresh button: Refreshes the images in the Buttons directory. If new buttons are added with the Xlobby loaded you will need to refresh to choose them. Remove button : Removes the

current image from the category display.

Event You can add events to categorys as a whole or as a selection category. z

z

Selection Event Assign Button: Assigns an event from the event manager to the category. This event will be triggered upon selection of a category entry. Selection Event Remove Button: Removes the category select event from the category.

http://xlobby.incolby.com/Skinning_Xlobby_3/category.html

5/10/2006

Skinning category

Page 6 of 6

Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/category.html

5/10/2006

Skinning sound

Page 1 of 2

Sound tab: Like other resources, sound resources are sound styles that can be assigned to images, text, and buttons in a skin. Enter and click sounds are saved in the resource. The sounds must be saved in the Skin's sound folder. z

z

z

Sound Resources : List all of the sound resources created in the skin. You may select and apply a sound resource for the selected item in the skin. Customize button : Opens the sound resource editor, allowing you to create, rename, sample and select sound files. Remove button : Removes the sound resource from the item. *You will only here sounds in the skin if the "play button sound" checkbox is enabled in the setup menu.

Sound Resources z

z

z z z z

z

z

Name: Displays and allows you to create a name for your sound resource. Enter: Displays the sound file to be played on button enter, or select. Name: Displays the sound file to be played on button click, or press. Browse: Opens a windows explore box allowing you to choose a sound file . Play: Audibly plays the selected sound file for sampling. New: Creates a new sound resource, shown in the resource box. If no name has been created it will be titled "new sound". Similar to Save As Resource, except you create the resource then enter the information. Delete: Deletes the selected sound resource, shown in the resource box. This removes the sound from the button. Save As Resource: Saves the Name, Enter, and Click parameters set as a new

http://xlobby.incolby.com/Skinning_Xlobby_3/sound.html

5/10/2006

Skinning sound

Page 2 of 2

resource. Similar to New button, except you enter the information first then save. Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/sound.html

5/10/2006

Skinning navigation

Page 1 of 1

Navigation tab: By default Xlobby follows a navigation algorithm to decide which button will be up, down, left, or right in the skin. At times this doesnt work out logically or the user wants to assign which way a skin navigates.

z z

Disable Directions: { Up checkbox: Disables navigation up for the selected button in the skin. { Down checkbox: Disables navigation down for the selected button in the skin. { Left checkbox: Disables navigation left for the selected button in the skin. { Right checkbox: Disables navigation right for the selected button in the skin. z Up button : Click to show what button on the skin will be the up direction of the selected button. Or used to set the up direction of the navigation override. z Down button :Click to show what button on the skin will be the down direction of the selected button. Or used to set the down direction of the navigation override. z Left button :Click to show what button on the skin will be the left direction of the selected button. Or used to set the left direction of the navigation override. z Right button :Click to show what button on the skin will be the right direction of the selected button. Or used to set the right direction of the navigation override. *the button which the navigation override will navigate to will be highlighted will a light dashed yellow outline. Set : Puts the navigation in a "record" state, must then press a direction. Reset : Clears the navigation override set for the selected button on the skin. *Use this to override auto sensing navigation algorithm Click "set", a direction button, then click a button on the skin to assign. Clicking a direction button will also show which button has been assigned to it. Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/navigation.html

5/10/2006

Skinning screen

Page 1 of 3

Screen tab: Add A Screen is a page in Xlobby skin. It can have text, categories, websites, folders, shapes, epg, events, passwords, buttons, variables etc. z

z

z

z

z

z

New Screen: Input box to name the new or cloned screen. { Add button: Adds the named screen to the Skin. { Clone button: Clones the screen you are on in the skin to the name in the new screen box, and adds it to the Skin. Text: Input box to type text or variables to add to the screen. If no text is entered a blank textbox 100pixels by 100 pixels is added at coordinates 0,0. You can add text in the text tab to a blank textbox. { Add button: Adds the text to the Skin. Category: Input box to name a new category. { Add button: Adds the category to the Skin. Website: Input box to name a new webpage. { Add button: Adds the webpage to the Skin. z Folder Browser : Input box to name or display a windows directory. Virtual windows folders can be added as categories. { Browse button: Opens a virtual windows explorer box to select a directory or folder to use as a category. { Add button: Adds the folder or directory to the Skin. z Circle button: Adds a 300 pixel circle to the skin at coordinates 0,0. A resource can later be assigned to this shape. z Normal Rectangle button: Adds a 300x300 pixel rectangle to the skin at coordinates 0,0. A resource can later be assigned to this shape. Rectangle button: Adds a 300x300 pixel rectangle with rounded corners to the skin at coordinates 0,0. A resource can later be assigned to this shape. EPG: If an EPG xml exist in the xmltv folder, it will be listed in the box to select from. { Add button: Adds the EPG database to the Skin.

Resources z

z

Resource Colors: It opens a color selector to create a color resource. Theme Name: Input box to name the theme.

http://xlobby.incolby.com/Skinning_Xlobby_3/screen.html

5/10/2006

Skinning screen

z z

z

Page 2 of 3

Add button : Adds the theme to the skin. Select Theme list : A list of available themes to select and apply to a skin. By default there is a theme called "default" Delete Theme button: Deletes the selected theme from the list and the skin. *A theme is a collection of shape, color, sound, and text resources. By changing themes you can have different "looks" in the same skin without effecting function or design.

Add Button A button are those images found in the buttons folder of the skin. z

z

z

z

Preview window: Previews the image of the selected button. Buttons list : Lets you choose the desired button to add to the screen you are currently on. Add button: Adds a new button selected in the list to the screen you are currently on. Refresh button: Refreshes the images in the skin>button folder for display. Use if you add or change images in the buttons reptiore will skinning.

http://xlobby.incolby.com/Skinning_Xlobby_3/screen.html

5/10/2006

Skinning screen

Page 3 of 3

Edit z

z

z

z

z

z

z

z

z

Name: Input box to name/ display the screen you are on. Password: The page password necessary to enter the page you are on. Leave it blank and no password is required. *passwords are case sensative. Delete Screen button : Deletes the current screen you are on and all contents displayed on it. *CAUTION: you can NOT undo (cntrl+Z) this! On Display Default Button checkbox : Check this box if you wish the default button to be selected on enter of this screen. Uncheck this if you wish the last button pressed to be selected upon enter of this screen. Backgrounds list : All of the images found in the Backgrounds folder of the skin will be listed here. Choose one to be the background of the current page. Enter Event Add Button: Assigns an event from the event manager upon entry to the current screen. Enter Event Remove Button: Removes the enter event from the the current screen. Exit Event Add Button:Assigns an event from the event manager upon exit of the current screen. Exit Event Remove Button: Removes the exit event from the the current screen.

Top © Colby 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/screen.html

5/10/2006

Skinning goto

Page 1 of 1

Goto tab:

z

z

Goto Menu button : It is a quick link that takes you to the menu screen (the screen with the Start Up Screen checkbox enabled.) Goto Screen list: Select a screen from the list to change screen on which you are editing. These screens are the xml files found in the Skinname folder. Overlays, ppc screens and regular pages are all listed.

Top © 2006

http://xlobby.incolby.com/Skinning_Xlobby_3/gotoscreen.html

5/10/2006