Skins for Inzomia Image Viewer 3

Introduction

Skins are used to change the look of the Inzomia Image viewer. All of the main windows have skins and it is possible to change the buttons displayed inside the image window, even how the color cycling works. To create a new skin you need to create a skin definition file and the graphic files it refers to. There are a lot of things to change and to get everything right the best way to get started is to start with one of the supplied skins and change it bit by bit and test after each change.

The currently used skin can be changed in the general tab from the Inzomia image viewer preferences.

Files

Each skin has all its files in a folder in data/skins/ relative to the installation folder. The name of the folder will be the name of the skin in the preferences dialog. Each skin is made up of four image files and one .xml file. The name of the files cannot be changed, they should be:

File name

Dimension

Format

Description

Texture.png

256x256 pixels

24 bit color image in png format

Graphics for buttons inside the image window.

A_texture.png

256x256 pixels

8 bit grayscale image in png format

Alpha channel for graphics inside the image window.

Background.jpg

Any size

Jpeg image

The image displayed in the image window when the viewer is started without an image.

Image.bmp

Max 1024x1024 pixels

24 bit Window bitmap image

Graphics for all windows and buttons outside the image window.

Skin.xml

n/a

Xml file

Style data and information about from where to pick the graphics.

Texture images

The texture images must be named texture.png and a_texture.png. Booth files MUST be exactly 256x256 pixels. The texture.png contains the buttons displayed in the image area on top of the image. The a_texture.png should be a grayscale image and is the transparency for each pixel in the texture. A white pixel in the a_texture.png image indicate that the pixel from the texture should be taken as it is, a black pixel that nothing should be displayed from the texture and a gray pixel that the pixel should have transparency. In the image below notice the font for the tooltips in the image window is drawn in the alpha channel.

 

 

The image.bmp image

The image.bmp image has to be in bmp format. The size must not be larger than 1024x1024. The image.bmp image contains the whole user interface graphics. The skin.xml file tells from where in the image the graphics is picked.

 

 

The skin.xml file

The skin.xml file specifies how the skin components are used to form the skin you see in the Inzomia viewer. The format of the skin.xml is xml and can be edited in a standard text editor like windows notepad or by an xml editor. The skin parser in the Inzomia viewer is optimized for size and speed and it does not completely comply with the xml standard, for example it can only parse ascii text and it does not handle comments.

The skin.xml file is organized into a number of sections described below. Open the skin.xml file and view it as you read the description of each section.

Colors when they are needed are given as rgb values where each component is a number from 0 to 255 (0,0,0 is black and 255,255,255 is white).

Positions are given as an x any y coordinate in pixels where 0,0 is the upper left corner.

Bitmap graphics is given as rectangles from where the graphics is picked. For buttons the given rectangle is for the button in normal state. Below the normal button in the image should follow the highlighted button (when the cursor is above it), the selected button and the disabled button. Where buttons are specified most often also a position is given in pixels of where to place the button. The reference for button positions differs depending on the button type. Text buttons are declared inside an instance tag:
<instance>

       <id>28</id>

       <from>83 0 136 29</from>

       <pos>386 24</pos>

       <text>4 7</text>

 </instance>

Where id specifies the action that will be performed when the user clicks the button, from is the rectangle from where to fetch graphics for the normal state of the button. Pos is the position of the button, text is the position inside the button for the text label.

 

The complete skin definition must be enclosed in a skin tag.

Buttons

The playlist window, browser window and the explorer window contain text buttons. Each window specifications have a button tag where each button instance is declared. Each instance has an id specifying the function that will be performed when the button is pressed. The following table lists all available button ids and their functions. It is not possible to use a button id in any other window than the one specified in the list.

 

ID

Window

Description

0

Playlist

Add files to the playlist

1

Playlist

Add images in a folder to the playlist

2

Playlist

Remove selected images from the playlist

3

Playlist

Clear the playlist

4

Playlist

Load playlist

5

Playlist

Save playlist

6

Playlist

Show the preferences dialog

7

Playlist

Show the about box

8

Playlist

Browse to the help page

9

Playlist

Close the application

10

Playlist

Browse to the buy page

11

Playlist

Browse to the Inzomia viewer home page

20

Browser

Go to the previous web page

21

Browser

Go to the next web page

22

Browser

Stop web page loading

23

Browser

Refresh web page

24

Browser

Go to the Inzomia viewer home page

25

Browser

Grab images from the current web page

26

Browser

Abort grabbing images

27

Browser

Show the open web page dialog

28

Browser

Make an image out of the current web page

30

Explorer

Go to the parent folder

31

Explorer

Select icon view

32

Explorer

Select small icon view

33

Explorer

Select list view

34

Explorer

Show the favorites page

General section

The general only contains the msg tag which will be displayed in a dialog message when the skin is selected from the preference.

 

<general>

<msg>

This skin was created by Fredrik L.

</msg>

</general>

 

Image window section

The image window section contains the definition for the image window in windowed and in fullscreen mode.

<imagewindow>

Specify the font to use for the title in the image window. You can specify a different font for when the window is selected and when it is not.

 

Pos is where the title is displayed in the window

Color is the color of the title

Size is the font size in points

Type is the name of the font to use

Weight is the weight of the font, 700 is normal, 900 bold.

 
 


<titlefont>

<pos> 22 3 </pos>

<selectedpos> 22 3 </selectedpos>

<color> 100 100 100 </color>

<selectedcolor> 0 0 0 </selectedcolor>

<size> 14 </size>

<selectedsize> 14 </selectedsize>

<type>ARIAL</type>

<selectedtype>ARIAL</selectedtype>

<weight> 700 </weight>

<selectedweight> 900 </selectedweight>

</titlefont>

 

Topleft, topmiddle and topright specify the rectangle from image.bmp that will be used for the titlebar. The topmiddle part must be specified as it determines the height of the bar. If the title bar is wider than the given rects the middle part will be tiled.

 
<topleft>

0 128 20 151

</topleft>

<topmiddle>

20 128 190 151

</topmiddle>

<topright>

190 128 213 151

</topright>

 

Bgcolor specifies the background color behind the image. Progresscolor is the color used for the progressbar as the image is being decompressed.

 
<bgcolor>

100 100 100

</bgcolor>

<progresscolor_empty>

0 0 0

</progresscolor_empty>

<progresscolor_full>

223 126 16

Closebuttonpos is the position of the close button relative the right upper corner. Closebitmapfrom is from where the graphics is picked. Minbitmapfrom is from where to pick the graphics for the minimize button

 

 
</progresscolor_full>

 

<closebuttonpos>16 5</closebuttonpos>

<closebitmapfrom>44 0 56 12</closebitmapfrom>

<minbitmapfrom>56 0 68 12</minbitmapfrom>

<highlighteffectspeed>

0.010 0.003  0.011 0.010  0.020 0.001  0.010 0.011

0.011 0.003  0.010 0.013  0.020 0.002  0.010 0.012

Highlighteffectspeed, highlighteffectfactor and highlightcolorfactor are used to specify how colors should be cycled for the buttons inside the image window.

 

The values should be between 0 and 1. In each tag you specify an rgba value for each corner of the button.

 

Highlighteffectspeed determine how fast the color should cycle, a higher value gives faster color cycling.

 

Highlighteffectfactor has two values per component and specifies the weight for two different color cycle functions, experiment to try it. Set to 0 to disable a function.

 

Highlightcolorfactor determine how much of the icon should be from the color cycle or from the bitmap.

 

Selectedhighlighteffectspeed, selectedhighlighteffectfactor and selectedhighlightcolorfactor follow the same system as above and are used when an icon is selected ie when the cursor is above it.

 
0.012 0.003  0.013 0.012  0.020 0.003  0.010 0.013

0.013 0.003  0.012 0.011  0.020 0.004  0.010 0.014

</highlighteffectspeed>

<highlighteffectfactor>

0.991 0.991  0.494 0.494  0.063 0.063  0.93 0.90

0.991 0.991  0.494 0.494  0.063 0.063  0.87 0.95

0.991 0.991  0.494 0.494  0.063 0.063  0.95 0.87

0.991 0.991  0.494 0.494  0.063 0.063  0.97 0.91

</highlighteffectfactor>

<highlightcolorfactor>

0.991 0.991  0.494 0.9

0.991 0.991  0.494 0.9

0.991 0.991  0.494 0.9

0.991 0.991  0.494 0.9

</highlightcolorfactor>

 

 

<selectedhighlighteffectspeed>

0.010 0.003  0.010 0.010  0.020 0.007  0.010 0.010

0.010 0.010  0.011 0.002  0.006 0.021  0.010 0.010

0.010 0.010  0.010 0.010  0.023 0.005  0.010 0.010

0.002 0.003  0.010 0.010  0.003 0.020  0.010 0.010

</selectedhighlighteffectspeed>

<selectedhighlighteffectfactor>

1.0 1.0  1.0 1.0  0.5 0.6  1.0 1.0

1.0 1.0  1.0 1.0  0.7 0.6  1.0 1.0

1.0 1.0  1.0 1.0  0.5 0.7  1.0 1.0

1.0 1.0  1.0 1.0  0.5 0.5  1.0 1.0

</selectedhighlighteffectfactor>

<selectedhighlightcolorfactor>

0.4  0.4  1.0  1.0

0.4  0.4  1.0  1.0

0.4  0.4  1.0  1.0

0.4  0.4  1.0  1.0

</selectedhighlightcolorfactor>

<texturefont>

a     0     192   9     208

The texturefont tag determine for each character where its graphics is located in the texture image. The font is used for tooltips for the buttons inside the image window.

 
b     9     192   18    208

c     18    192   26    208

d     26    192   35    208

e     35    192   44    208

f     44    192   49    208

g     49    192   57    208

h     57    192   65    208

i     65    192   68    208

j     68    192   72    208

k     72    192   80    208

l     80    192   83    208

m     83    192   96    208

n     96    192   104   208

o     104   192   113   208

p     113   192   122   208

q     122   192   131   208

r     131   192   137   208

s     137   192   144   208

t     144   192   149   208

u     149   192   156   208

v     156   192   163   208

w     163   192   175   208

x     175   192   181   208

y     181   192   188   208

z     188   192   195   208

</texturefont>

</imagewindow>

 

Playlist window section

The playlist window section specifies the skin parameters to use for the playlist window. Many parameters have the same name as in the image section and follow the same format. These parameters are not described here.

<playlistwindow>

<titlefont>

 <pos> 22 3 </pos>

 <selectedpos> 22 3 </selectedpos>

 <color> 100 100 100 </color>

 <selectedcolor> 0 0 0 </selectedcolor>

 <size> 14 </size>

 <selectedsize> 14 </selectedsize>

 <type> ARIAL </type>

 <selectedtype> ARIAL </selectedtype>

 <weight> 700 </weight>

 <selectedweight> 900 </selectedweight>

</titlefont>

 

<button>

The button section specifies the button area at the bottom of the playlist window. Positions are given relative to the left edge of the window and to where the thumbnail list ends. When the window is resized it is always the thumbnail area that grows or shrinks.

 

All buttons share the same font and each individual button is specified inside the instance tag.

In the instance tag id determine the type of button being specified, from is the rectangle to use for button graphics and to determine the size of the button, pos is the position of the button and text is the offset inside the button for where the title should be drawn.

 

 
 <fontcolor>255 255 255</fontcolor>

 <fontcolordisabled>90 90 105</fontcolordisabled>

 <fontsize>12</fontsize>

 <fonttype>ARIAL</fonttype>

 <fontweight>400</fontweight>

 <instance>

       <id>4</id>

       <from>68 0 136 29</from>

       <pos>0 0</pos>

       <text>22 7</text>

 </instance>

 <instance>

       <id>1</id>

       <from>83 0 136 29</from>

       <pos>68 0</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>3</id>

       <from>83 0 136 29</from>

       <pos>121 0</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>8</id>

       <from>83 0 151 29</from>

       <pos>174 0</pos>

       <text>8 7</text>

 </instance>

 

 <instance>

       <id>5</id>

       <from>68 0 136 29</from>

       <pos>0 29</pos>

       <text>22 7</text>

 </instance>

 <instance>

       <id>0</id>

       <from>83 0 136 29</from>

       <pos>68 29</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>2</id>

       <from>83 0 136 29</from>

       <pos>121 29</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>10</id>

       <from>83 0 151 29</from>

       <pos>174 29</pos>

       <text>8 7</text>

 </instance>

 

 <instance>

       <id>9</id>

       <from>68 0 136 29</from>

       <pos>0 58</pos>

       <text>22 7</text>

 </instance>

 <instance>

       <id>6</id>

       <from>83 0 136 29</from>

       <pos>68 58</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>11</id>

       <from>83 0 136 29</from>

       <pos>121 58</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>7</id>

       <from>83 0 151 29</from>

       <pos>174 58</pos>

       <text>8 7</text>

 </instance>

</button>

 

<topleft>

0 128 20 151

</topleft>

<topmiddle>

20 128 190 151

</topmiddle>

<topright>

190 128 213 151

</topright>

Bottomleft, bottommiddle and bottomright specifies from where to take the graphics shown behind the buttons in the playlist.

 
 


<bottomleft>

0 128 20 215

</bottomleft>

<bottommiddle>

20 128 190 215

</bottommiddle>

<bottomright>

190 128 210 215

</bottomright>

<bgcolor> 255 255 255 </bgcolor>

<thumb>

The thumb tag contains graphics and colors for the thumbnails in the playlist window.

 
 <lockfrom>150 0 163 14</lockfrom>

 <indexbkcolor> 240 240 240 </indexbkcolor>

 <indexfgcolor> 0 0 0 </indexfgcolor>

 <itemtextbkcolor> 255 255 255 </itemtextbkcolor>

 <itemtextfgcolor> 0 0 0 </itemtextfgcolor>

 <itemtextlockedfgcolor> 223 126 16 </itemtextlockedfgcolor>

 <itemtextselectedbkcolor> 223 126 16 </itemtextselectedbkcolor>

 <itemtextselectedlockedfgcolor> 255 255 255 </itemtextselectedlockedfgcolor>

 <itemtextselectedfgcolor> 255 255 255 </itemtextselectedfgcolor>

 <unknownimagefrom>183 0 256 114</unknownimagefrom>

 <encryptedimagefrom> 183 0 256 114 </encryptedimagefrom>

</thumb>

<closebuttonpos>16 6</closebuttonpos>

<closebitmapfrom>44 0 56 12</closebitmapfrom>

</playlistwindow>

 

Info window section

The info window section specifies the skin to use for the web browser window. The section only contains tag already found in the image or playlist window. A typical skin uses the same values as in one of the other windows where possible.

<infowindow>

<titlefont>

 <pos> 22 3 </pos>

 <selectedpos> 22 3 </selectedpos>

 <color> 100 100 100 </color>

 <selectedcolor> 0 0 0 </selectedcolor>

 <size> 14 </size>

 <selectedsize> 14 </selectedsize>

 <type> ARIAL </type>

 <selectedtype> ARIAL </selectedtype>

 <weight> 700 </weight>

 <selectedweight> 900 </selectedweight>

</titlefont>

<topleft>

0 128 20 151

</topleft>

<topmiddle>

20 128 190 151

</topmiddle>

<topright>

190 128 213 151

</topright>

<bottomleft>

0 151 20 181

</bottomleft>

<bottommiddle>

20 151 190 181

</bottommiddle>

<bottomright>

190 151 210 181

</bottomright>

<bgcolor>

100 100 100

</bgcolor>

<closebuttonpos>16 5</closebuttonpos>

<closebitmapfrom>44 0 56 12</closebitmapfrom>

<button>

 <fontcolor>255 255 255</fontcolor>

 <fontcolordisabled>90 90 105</fontcolordisabled>

 <fontsize>12</fontsize>

 <fonttype>ARIAL</fonttype>

 <fontweight>400</fontweight>

 <instance>

       <id>20</id>

       <from>68 0 136 29</from>

       <pos>0 24</pos>

       <text>22 7</text>

 </instance>

 <instance>

       <id>21</id>

       <from>83 0 136 29</from>

       <pos>68 24</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>22</id>

       <from>83 0 136 29</from>

       <pos>121 24</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>23</id>

       <from>83 0 136 29</from>

       <pos>174 24</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>24</id>

       <from>83 0 136 29</from>

       <pos>227 24</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>25</id>

       <from>83 0 136 29</from>

       <pos>280 24</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>26</id>

       <from>83 0 136 29</from>

       <pos>333 24</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>28</id>

       <from>83 0 136 29</from>

       <pos>386 24</pos>

       <text>4 7</text>

 </instance>

 <instance>

       <id>27</id>

       <from>83 0 151 29</from>

       <pos>439 24</pos>

       <text>8 7</text>

 </instance>

</button>

</infowindow>

 

Shell window section

The shell window section specifies the skin for the explorer window that let you navigate the windows shell. The format of the shellwindow section is the same as for the other windows.

<shellwindow>

<titlefont>

 <pos> 22 3 </pos>

 <selectedpos> 22 3 </selectedpos>

 <color> 100 100 100 </color>

 <selectedcolor> 0 0 0 </selectedcolor>

 <size> 14 </size>

 <selectedsize> 14 </selectedsize>

 <type> ARIAL </type>

 <selectedtype> ARIAL </selectedtype>

 <weight> 700 </weight>

 <selectedweight> 900 </selectedweight>

</titlefont>

<topleft>

0 128 20 151

</topleft>

<topmiddle>

20 128 190 151

</topmiddle>

<topright>

190 128 213 151

</topright>

<bottomleft>

0 151 20 181

</bottomleft>

<bottommiddle>

20 151 190 181

</bottommiddle>

<bottomright>

190 151 21 181

</bottomright>

<bgcolor>

100 100 100

</bgcolor>

<closebuttonpos>16 5</closebuttonpos>

<closebitmapfrom>44 0 56 12</closebitmapfrom>

<button>

 <fontcolor>255 255 255</fontcolor>

 <fontcolordisabled>90 90 90</fontcolordisabled>

 <fontsize>12</fontsize>

 <fonttype>ARIAL</fonttype>

 <fontweight>400</fontweight>

 <instance>

       <id>30</id>

       <from>68 0 136 29</from>

       <pos>0 24</pos>

       <text>22 7</text>

 </instance>

 <instance>

       <id>31</id>

       <from>83 0 136 29</from>

       <pos>68 24</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>32</id>

       <from>83 0 136 29</from>

       <pos>121 24</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>33</id>

       <from>83 0 136 29</from>

       <pos>174 24</pos>

       <text>8 7</text>

 </instance>

 <instance>

       <id>34</id>

       <from>83 0 151 29</from>

       <pos>227 24</pos>

       <text>8 7</text>

 </instance>

</button>

</shellwindow>

 

Tips for creating new skins