|
MUTOOLS SKIN SDK
A MUTOOLS Skin is build via graphical resources that are located apart from the application file.
This makes it more easy for a skin developer to get his hands on the skin elements.
The folder containing the MUTOOLS application file is called the application folder.
In the application folder, there is a subfolder called "Graphics", consequently called the the graphics folder.
Within the graphics folder (and it's subfolders), you'll see a bunch of PNG, TXT and XML files. It are these files that make up the skin.
We've chosen for the PNG file format because:
- It's platform-independent
- It supports alpha channelling
- It's well supported
- It has a good lossless compression
Now let's go into details.
The principle is easy:
- When a text must be displayed, the skin system uses a FONT resource. Fonts are explained below.
- When e.g. a synth icon must be displayed, the skin system uses the Synth.png ICON in the Icons subfolder. Icons are explained below.
- When e.g. a vertical scrollbar must be displayed, the skin system uses the VerScrollbar.png + VerScrollbar.txt = VerScrollbar FORMAT. Formats are explained below.
There are also the PANELs which describe full gui dialog panels.
FONTS
A Font is described via a PNG (the actual graphics) and TXT file (parameters).
The PNG files contains the actual character glyphs, seperated by blue dots (rgb=0,0,255). This way the GUI engine can find the character edges.
The TXT file (which is optional) tells which is the first character. By default this is character 33 = !
The default font is loaded from DefaultFont.Png (+ DefaultFont.Set). If this file is not found, then the GUI system uses the built-in font.
The picture file typically contains multiple sizes of the same font, all below eachother. Each size starts with a blue dot at the very top-left of the bounding rectangle for that size.
Once a font (png + txt) is fully analyzed, the result is written to a .mtft file, so that next time the font is loaded faster.
So note that the GUI system first looks for .mtft files, then if none found, it looks for .png + .txt files.
ICONS
An icon is a single PNG file in the Icons subfolder containing a 32 x 32 pixels graphic.
When a icon must be drawn, the GUI engine will internally shrink the icon graphic to the desired size.
This way, a single icon graphic can be used for displaying sizes 1 x 1 to 32 x 32.
Last but not least: An Icon PNG file may contain more than 1 state. For example, the Mute icon has 2 states: OFF and ON. The different states are stacked vertically!
FORMATS
A Format is an object that describes how a certain rectangle on the screen must be drawn. A Format consists out of a PNG and TXT file, the PNG containing the graphic, the TXT containing parameters for that graphic.
Here is the anatomy of a Format:
By the 4 parameters TopHeight, LeftWidth, RightWidth, BottomHeight (in the respective TXT file), we divide the rectangle in 9 sections.
When a rectangle must be drawn with this format, then:
- The 4 corners are drawn exactly as in the Format graphic
- The Top area is drawn by horizontally copying the Top area in the Format graphic, as width as needed
- The Left area is drawn by vertically copying the Left area in the Format graphic, as high as needed
- The Right area is drawn by vertically copying the Rightarea in the Format graphic, as high as needed
- The Bottom area is drawn by horizontally copying the Bottom area in the Format graphic, as width as needed
- The Body area is drawn by horizontally and vertically copying the Body area in the Format graphic, as much as needed
Note that a Format also has the 4 optional parameters (also in the respective TXT file) TopMargin, LeftMargin, RightMargin, BottomMargin.
These parameters don't influence how the rectangle is drawn, but tell the GUI engine where it may start showing contents in that rectangle.
For example, see this difference:
If a Format's TXT file doesn't state a TopHeight, then the TopHeight defaults to 0.
If a Format's TXT file doesn't state a TopMargin, then the TopMargin defaults to the TopHeight.
Similarly for the other parameters of course.
Each format can also define a ForeColor and BackColor for each of its states. This can be set in the relevant .TXT file.
E.g.
StateCount=3
ForeColor1=255,64,28
ForeColor2=0,256,100
ForeColor3=128,80,50
All are RGB values.
The ForeColor defines the text color for that format.
PICTURES & PANELS
A picture is a PNG picture. A panel is an XML file that describes fields. Most of the time a panel describes a picture panel.
Some info on the Small-, Full- and ModularRack pictures/panels:
- the 1st plug slot is the one used when something is plugged in but not focussed
- the 2nd plug slot is the one used when something is plugged and focussed
- the 3rd plug slot is the one used when nothing is plugged in
More info coming later.
Miscellaneous
- When a skin is selected in MU.LAB, there is the possibility to popup a short info text. You can put the text you want to be displayed in "info.txt" in the root folder of your skin folder.
- When you right-click the background of the main window, you get a hidden system menu from which you can choose "Reset Skin Resources". This is a quick and convenient way to reload all graphics and thus to see any changes you recently made.
- Note that MUTOOLS applications do evolve, they don't stay the same.
So it maybe best to work with layers and with vector graphics whenever possible, as these techniques give most flexibility.
And be sure to make proper backups from time to time!
Voila, that's in short how a MUTOOLS Skin is constructed.
Questions or suggestions? Mail to 
| 