Drive Space skins specification
Basics
The skin is the the INI-file with the skin settings and the set of images used in the skin. The images must be in the PNG format. This possible to use the alpha channel (transparency) in the images. The INI file must be named drvspace.ini. All files must be placed into the single folder.
INI file contain the section in the square brackets and the values:
[section]
valueName = value
Values can contain the text, numbers, positions, sizes, and colors. There are some syntax rules to define the complex values like the colors and brushes.
Colors definition
Drive Space supports the colors in the RGBA (Red Green Blue Alpha) format. Every color component must be in the range 0-255. The alpha component is the transparency value (0 – transparent, 255 – opaque). The alpha component is optional (it is 255 by default). The color components must be separated by the space.
Brushes and Pens
Drive Space can fill the charts with the Brushes and stroke them with the Pens. In the most cases you can define both Brush and Pen in one parameter. Here is the format description:
usedSpace = brushName(brush parameters) penName(pen parameters)
The supported brushes are : solidBrush, xGradient, yGradient, radialGradient
The supported pens are: solidPen
solidBrush
Fill the element with to solid color. This brush accept only one parameter - the color. Here is the example of the solid brush that fill the element by the red color:
usedSpace = solidBrush(255 0 0)
xGradient
Fills the element by the gradient from the left to the right side. This brush accept 2 colors as parameters. The first is the color at the left side and the second color at the right side:
usedSpace = xGradient(255 0 0, 0 0 255)
yGradient
Fills the element by the gradient from the top to the bottom side. This brush accept 2 colors as parameters. The first is the color at the top side and the second color at the bottom side:
usedSpace = yGradient(255 0 0, 0 0 255)
radialGradient
Fills the element by the radial gradient This brush accept 2 colors as parameters. The first is the color at the center and the second color at the border:
usedSpace = yGradient(255 0 0, 0 0 255)
solidPen
Stroke the element with the solid color. The pen accept the two parameters. The first parameter is the color and the second parameter is the stroke width (default is 1):
usedSpace = solidPen(255 0 0, 2)
Parameters
Elements can depend of the parameters or draw the parapeter text. Parameters can have the text or number values.
The text parameters:
- totalSpace - the total drive space in format 234.4G
- totalSpaceNU - the total drive space without units
- totalSpace_U - the total drive space in format 234.4 G
- freeSpace - the free drive space in format 234.4G
- freeSpaceNU - the free drive space without units
- freeSpace_U - the free drive space in format 234.4 G
- usedSpace - the used drive space in format 234.4G
- usedSpaceNU - the free drive space without units
- usedSpace_U - the free drive space in format 234.4 G
- freePercent - the percent of the free space in format 54%
- freePercentNU - the percent of the free space in format 54
- freePercent_U - the percent of the free space in format 54 %
- drive - the drive letter
- label - the drive label
- fsName - the drive file system name
The numeric parameters:
- read - read disk indicator (0 - off, 1 - on)
- write - write disk indicator (0 - off, 1 - on)
- spaceAlarm - low disk space alarm indicator (0 - off, 1 - on)
- totalSpace - total disk space
- freeSpace - free disk space
- usedSpace - used disk space
- freePercent - percent of the free disk space
Section [options]
The section [options] used to define the skin name and author. Possible values:
- name – (required) the skin name. This value is shown in the skins list.
- author – (optional) the skin author's name
- url – (optional) the author's home page
Example:
[options]
name = Simple White
author = Tordex
url = http://www.tordex.com
Section [background]
This section defines the background color/image for one drive. Possible values:
- type - the background type can be image or color.
- width - the width of the single drive (optional for image)
- height - the height of the single drive (optional for image)
- stateNormal - brush, pen or image for normal plug-in state
- stateHover - brush, pen or image when the mouse is over the drive
- statePressed - brush, pen or image when you click the mouse button
If the value type is image then the values stateNormal, stateHover and statePressed must contain the name of the picture file. When the value type is color then the values stateNormal, stateHover and statePressed must contain the brush and/or the pen definition.
Example of the image background:
[background]
type = image
width = 50
height = 10
stateNormal = bg.png
stateHover = bgH.png
statePressed = bgH.png
Example of the color background:
[background]
type = color
width = 50
height = 50
stateNormal =
stateHover = yGradient(255 255 255, 128 128 128)
statePressed = xGradient(255 255 255, 128 128 128) solidPen(255 0 0 255, 3)
Elements
Every skin can contain any number of elements. The section of the elements have the format [element#] where # is the number of the element beginning from zero. The values set for elements depends of the value type. But there are some common values:
- X - the horizontal position of the element
- Y - the vertical position of the element
- width - the width of the element
- height - the height of the element
- type - the type of the element. This value can be one of the following: imagePieChart, colorPieChart, colorHRowChart, colorVRowChart, rotateImageChart, image, rect, text, formatedText, imageHRowChart, imageVRowChart, imageSetChart. Other values depend of the value type.
imagePieChart
This chart takes two images and draw them at same place by cropping them using the pie mask.
 |
 |
 |
| free space | used space | imagePieChart result |
Possible values:
- usedSpace - the picture for used space
- usedSpaceA - the picture for used space. Space alarm is active
- freeSpace - the picture for free space
- freeSpaceA - the picture for free space. Space alarm is active
Example:
[element0]
type = imagePieChart
freeSpace = pie-normal-free.png
usedSpace = pie-normal-used.png
freeSpaceA = pie-normal-free-a.png
usedSpaceA = pie-normal-used-a.png
X = 0
Y = 0
width = 50
height = 50
colorPieChart
This is the simple pie chart that uses the brushes and pens. Possible values:
- usedSpace - the brush and/or pen for used space
- usedSpaceA - the brush and/or pen for used space. Space alarm is active
- freeSpace - the brush and/or pen for free space
- freeSpaceA - the brush and/or pen for free space. Space alarm is active
Example:
[element0]
type = colorPieChart
usedSpace = solidBrush(0 0 255) solidPen(255 0 0)
usedSpaceA = solidBrush(255 0 0) solidPen(0 0 255)
freeSpace = solidBrush(0 255 0) solidPen(255 0 0)
freeSpaceA = solidBrush(255 255 0) solidPen(0 0 255)
X = 0
Y = 0
width = 50
height = 50
colorHRowChart
This is the simple horizontal row chart that uses the brushes and pens. Possible values:
- usedSpace - the brush and/or pen for used space
- usedSpaceA - the brush and/or pen for used space. Space alarm is active
- freeSpace - the brush and/or pen for free space
- freeSpaceA - the brush and/or pen for free space. Space alarm is active
Example:
[element0]
type = colorHRowChart
usedSpace = yGradient(0 0 255, 0 0 200) solidPen(255 0 0)
usedSpaceA = yGradient(255 0 0, 200 0 0) solidPen(0 0 255)
freeSpace = yGradient(0 255 0, 0 200 0) solidPen(255 0 0)
freeSpaceA = yGradient(255 255 0, 200 200 0) solidPen(0 0 255)
X = 0
Y = 1
width = 100
height = 20
colorVRowChart
This is the simple vertical row chart that uses the brushes and pens. Possible values:
- usedSpace - the brush and/or pen for used space
- usedSpaceA - the brush and/or pen for used space. Space alarm is active
- freeSpace - the brush and/or pen for free space
- freeSpaceA - the brush and/or pen for free space. Space alarm is active
Example:
[element0]
type = colorVRowChart
usedSpace = xGradient(0 0 255, 0 0 200) solidPen(255 0 0)
usedSpaceA = xGradient(255 0 0, 200 0 0) solidPen(0 0 255)
freeSpace = xGradient(0 255 0, 0 200 0) solidPen(255 0 0)
freeSpaceA = xGradient(255 255 0, 200 200 0) solidPen(0 0 255)
X = 1
Y = 0
width = 20
height = 100
rotateImageChart
This chart rotate the image depending of the used space. The Width and Height values are ignored for this chart. X and Y values means the position of the center point. Other values:
- data - the parameter used to draw the chart. Can be freeSpace or usedSpace (default).
- startAngle - the angle when the used space is zero
- endAngle - the angle when the used space is equal the total space
- imgCenterX - the horizontal position of the center point in the image
- imgCenterY - the vertical position of the center point in the image
- image - the picture file to draw
[element0]
type = rotateImageChart
image = needle.png
imgCenterX = 3
imgCenterY = 24
startAngle = -120
endAngle = 120
X = 38
Y = 38
image
Draw the image. The image can depend of some parameters. The values can be following:
- data (optional) - the parameter name to modify the image. Can be one of the read (modify image depending of the read disk indicator), write (modify image depending of the write disk indicator).
- image - image file to draw if the data value is empty.
- image0 - image file to draw when the parameter is 0 (off)
- image1 - image file to draw when the parameter is 1 (on)
[element2]
type = image
data = read
image0 = read-off.png
image1 = read-on.png
X = 0
Y = 0
rect
Draw the rectangle with brush and/or pen. The rectangle color can depend of the some parameters. The values can be following:
- data (optional) - the parameter name to modify the color. Can be one of the: read (modify image depending of the read disk indicator), write (modify image depending of the write disk indicator).
- color - the brush and/or pen to draw if the data value is empty.
- color0 - the brush and/or pen to draw when the parameter is 0 (off)
- color1 - the brush and/or pen to draw when the parameter is 1 (on)
[element1]
type = rect
data = read
color0 = solidBrush(255 0 0 100)
color1 = solidBrush(255 0 0 255)
X = 0
Y = 0
width = 10
height = 10
text
Draw the text parameter. Possible values:
- color - the text color
- data - the parameter text
- font - the font name
- align - the text alignment, can be left, right or center
- bold - to make text bold assign 1, else 0
- italic - to make text italic assign 1, else 0
- glowSize - the glow size around the text
- glowColor - the glow color
- antialias - can be 0 to disable text antialiasing, 1 to enable text antialiasing
[element3]
type = text
align = center
data = freeSpace
font = Tahoma
color = 255 255 255
X = 1
Y = 18
width = 148
height = 10
formattedText
Draw the formatted text. The string can contain any text. The parameters must in form: {paramName}. Possible values:
- color - the text color
- text - the text to draw
- font - the font name
- align - the text alignment, can be left, right or center
- bold - to make text bold assign 1, else 0
- italic - to make text italic assign 1, else 0
- glowSize - the glow size around the text
- glowColor - the glow color
- antialias - can be 0 to disable text antialiasing, 1 to enable text antialiasing
[element3]
type = formattedText
align = center
text = {freeSpace} free of {totalSpace} ({freePercent})
color = 255 255 255
font = Tahoma
X = 1
Y = 18
width = 148
height = 10
imageHRowChart
Draw the horizontal row chart using the images. Supported values:
- align - the align of the chart. Can be left - used space part at the left side, right - used space part at the right side
- drawType - defines how to draw the row. Can be one of the following: tile, stretch, crop.
- usedSpace - image for used space
- usedSpaceA - image for used space when low space alarm is active
- freeSpace - image for free space
- freeSpaceA - image for free space when low space alarm is active
[element1]
type = imageHRowChart
align = left
drawType = stretch
usedSpace = hTile.png
usedSpaceA = hTileA.png
X = 1
Y = 13
width = 148
height = 11
imageVRowChart
Draw the vertical row chart using the images. Supported values:
- align - the align of the chart. Can be top - used space part at the top side, bottom - used space part at the bottom side
- drawType - defines how to draw the row. Can be one of the following: tile, stretch, crop.
- usedSpace - image for used space
- usedSpaceA - image for used space when low space alarm is active
- freeSpace - image for free space
- freeSpaceA - image for free space when low space alarm is active
[element0]
type = imageVRowChart
align = bottom
drawType = tile
usedSpace = imgTile.png
usedSpaceA = imgTileA.png
X = 2
Y = 4
width = 6
height = 36
imageSetChart
Draw the chart from the set of the images. Supported values:
- data - the parameter used to draw the chart. Can be freeSpace or usedSpace.
- isVertical - the images slices are vertical
- count - images count in the set
- image - images set for drive
- imageA - images set for drive when the low space alarm is active
[element0]
type = imageSetChart
count = 28
image = imgSet.png
isVertical = 0
X = 10
Y = 7
width = 53
height = 58
Here is the imgSet.png:
