Thorsten Lange - IT Solutions
Media-Streaming
Articles Articles

VisualMR VisualMR
Contact Contact
Deutsche Version dieser Seite Deutsch

VisualMR Skins
Create your own skins

Note that the skinning format described here relates to the SkinFormat V2.3 used in VisualMR V1.6 and newer.

Index

  1. Skin Components
  2. General Comments
    1. About XML
    2. Color definitions
  3. Skin.xml
    1. Nodes-Structure
    2. Attributes of the 'Skin' node
    3. Attributes of 'Font' nodes
    4. Attributes of 'Brush' nodes
    5. Attributes of the 'General' node
    6. Attributes of the 'BrowseClients' node
    7. Attributes of 'Layout' nodes (Window Sizes)
    8. Attributes of 'SubLayout' nodes (VisualMR layouts)
  4. Layout-XML
    1. About the 'Form' node
    2. General remarks about control nodes
    3. 'Label' Nodes
    4. 'StateLabel' Nodes
    5. 'Image' Nodes
    6. 'StateImage' Nodes
    7. 'Progress' Nodes
    8. 'Button' Nodes
    9. 'StateButton' Nodes
    10. 'DrawShape' Nodes
    11. 'Control' Nodes (Song Queue)
    12. Values asignable to controls
    13. Actions to be invoked

Skin Components

Creating your own skin is quite easy and no programming knowledge is needed. It is mainly about creating graphics and know a little about XML-files (which are quite similar to HTML in some respect). Additionally it is important to carefully look for correct spelling because computers are very strict on errors (even upper/lowcase is often important).

A good start for your own skin is by copying an existing skin and modify it to your needs (move the buttons around by changing their position in the XML file or replace the bitmaps). Therefore all of my skins are free to be used as the basis for new VisualMR-skins as long as the original copyright notice is included. Additionally it is a good practice to change the skin name if modified to avoid confusions.

As noted in the installing/downloading section a skin basically is a subdirectory in VisualMR's skins folder, the folder name being the skin name.

A Skin folder contains these elements:

General Comments

About XML

XML is in short a structured text filewith many similarities to HTML. XML files consist of tags that define die nodes. A node consists of one opening tag (like '<Fonts>') and one matching closing tag (like'</Fonts>'). Inbetween these two tags other sub-nodes can be placed (like '<Font>' as a sub-node to '<Fonts>').

You can assign attributes to nodes which are placed within the opening tag (like '<Font Size="10">' contains one attribut 'Size' with a value of  '10'). If there are no sub-nodes one can use an abbreviated notation omitting the closing tag by adding a '/' in front of  the opening tag's '>' (example: '<Font Size="10" />' without a closing tag '</Font>'.

Additionally you can place comments within an XML file which should be ignored by the application reading it. A comment always starts with '<!--' and ends with '-->'.

Remarks:

Color definitions

Colors are defined in VisualMR skins similar to the way they are defined in HTML by giving their 'R(ed), G(reen), B(lue)' values in a format like this: '#xrrggbb', where rr, gg, bb are each a two digit hexadecimal number).Example: "#FF0000' is light red since red has a maximal value of  255 (hexl: FF) while green and blue aren't present (0).

Skin.xml

This is the starting point for each skin definition where mainly fonts and colors are defined. Additionally there is a section defining the look of the 'Browse' forms. Note that my Skin.xml files contain comments explaining the structure and giving allowed values.

Nodes-Structure

Attributes of the 'Skin' node

The following attributes must be present:

Attributes of 'Font' nodes

The following attributes must be present:

Attributes of 'Brush' nodes

The following attributes must be present:

Attributes of the 'General' node (sub node to 'Browse' node)

The following attributes must be present:

Attributes of the 'BrowseClients' node (sub-node to 'Browse' node)

The following attributes must be present:

Attributes of 'Layout' nodes (Window Sizes)

Note that a 'Layout' corresponds to a window size in VisualMR and not to the 'Layout' 8which is defined by the 'SubLayout'). The following attributes must be present:

Attributes of 'SubLayout' nodes (VisualMR layouts)

Note that a 'subLayout' is named 'Layout' in the VisualMR user interface! The following attributes must be present:

Layout-XML

VisualMR currently supports 4 different window sizes and for each window size there must be one xml file:

Comments:

  1. Every one of these fore layout xml files have the same structure.
  2. Fonts and colors are definied by refercing corresponding nodes by their ids in Skin.xml
  3. Images are defined by their filename. The file will be loaded from the 96 (dpi) or the 192 (dpi) folder as requiered by the screen resolution.
  4. If sublayouts are defined (see 'SubLayout' nodes in Skin.xml) then the filename is constructed as "<windowsize>_<SubLayout.Name>.xml".
    There must always be a layout.xml-file without a sublayout-name extension. this is the default layout.

About the 'Form' node

Every layout XML file consists of an outer tag 'Form' with the following attributs:

The 'Form' node contains a series of tags, each of them specifying one visual element (a control). 

General remarks about control nodes (sub-nodes to 'Form')

The following tags can occur as sub-nodes of 'Form':

Every control node contains a Bounds sub-node specifying where the control should be located. Note that coordinates are given relative to the upper left corner  beining (0,0) and assuming 96dpi. For 192dpi (VGA PocketPCs only) VisualMR will scale the coordinates automatically.  Bounds nodes always have the following attributes:

'Label' Nodes

A label always contains exatly one sub-node of type Bounds (as described above). Additionally the label is defined by its attributes:

'StateLabel' Nodes

A state label is an extension to a normal label. It contains all of the label's attributes and sub-nodes (only that instead of a Contents attribute it has a DefaultContents attribute). Additionally it contains one sub-node of type States that contains a series of State nodes. The contents is definied by the State whose value matches the value specified in States. If no state matches then the DefaultContents attribute of the StateLabel is used (the same way as in a normal label).

A States node has always the following attribute:

A State node has always the following attributes:

'Image' Nodes

An image always contains exatly one sub-node of type Bounds (as described above). Additionally the image is defined by its attributes:

'StateImage' Nodes

A state image is an extension to a normal image. It contains all of the image's attributes and sub-nodes (only that instead of a Contents attribute it has a DefaultContents attribute). Additionally it contains one sub-node of type States that contains a series of State nodes. The contents is definied by the State whose value matches the value specified in States. If no state matches then the DefaultContents attribute of the StateLabel is used (the same way as in a normal label).

A States node has always the following attribute:

A State node has always the following attributes:

'Progress' Nodes

A progress always contains exatly two sub-nodes:

Additionally the 'Progress' node always contains the following attributes:

'Button' Nodes

A button always contains exatly two sub-nodes:

Additionally the 'Button' node always contains the following attributes:

'StateButton' Nodes

A state button is an extension to a normal button. It contains all of the button's attributes and sub-nodes. Additionally it contains one sub-node of type States that contains a series of State nodes. The look of the button is definied by the State whose value matches the value specified in States. If no state matches then the Bitmap node is used (the same way as in a normal button).

A States node has always the following attribute:

A State node has always the following attributes:

'Control' Nodes (Song Queue)

This node is intended to add special controls to the layout. What kind of control is used is specified by its Type attribute. Currently there is only Type="BrowsePlayQueueCtrl" allowed. This will add a control showing the current song queue to the layout. Note that this is currently only supported on PCs, not on PocketPCs. The "Control" node has now other attributes and only the Bounds sub-node.

'DrawShape' Nodes

This node gives a simple way to draw rectangles, circles,.. with a given color. A DrawShape node always contains exatly one sub-node of type Bounds (as described above) into which the shape is drawn. Additionally the DrawShape is defined by its attributes:

Values asignable to controls

Values can either be static, dynamic or a function. Static values are defined within the layout.xml file and remain the same all the time. A typical example are labels like 'Album' that stay the same while the album name itself is a dynamic value (formerly refered to as a variable). Static values always begin with a single quote('). For example a Label control with Contents="'Title" will always display the text "Title"

Dynamic values begin with a #: a Label with Contents="#CurrentSong.Title" will display the name of the currently playing song - which of course changes over time.

Functions begin with a ? followed by the functions name and in parenthesis, seperated by | the parameters which again can be either static or dynamic (nested funcxtions are currently not supported). For example a Label with Contents="?CONCAT(':|'Title|#CurrentSong.Title)" will display "Title: xxx" with xxx being the the currently playing song.

If you asigne a vlaue to a control you must be sure that the type is compatible. For example the Max attribute of a Progress conrol expects an integer-value while an Image either expects a picture of the name of an image-file.

The following dynamic values are defined:

The following functions are defined:

Actions to be invoked

Actions are associated with butten presses or clicking an image. Each Action is identified by a unique name (bold in the following listing). Only one of the following values are allowed for a control's 'Action' attribute (note that some actions are parameterized by a value in brackes):

Additionally there is the special action 'Popup': this actions allows to build a popup menu with a list of actions as described above. The syntax is as follows:
Popup(Action1=Label1|Action2=Label2|....ActionX=LabelX)
where every action can be one of the actions defined above while label can be any static or dynamic string value. Additionally "---" can be used to insert a seperateor line.
Example: "Popup(Prev='Previous Song|Next='Next Song|---|PowerOff='Standby)
will create a popup menu with the following lines: "Previous Song", "Next Song", a seperator, "Standy".



Contact me