The animation method
Now, we are ready to add the first graphical
disp section to our skin. Let's start with an
animation. This method uses an image consisting of multiple frames, where the value of the assigned parameter determines which frame is being displayed at any given time. This new section will indicate incoming data traffic by moving a bullet each time a packet is received. For this purpose, we'll use the
rx_bullet.tga image from the
cFosSpeed "Liquid Crystal" skin:
[disp1]
value=rx_data_cnt
method=animation
rect=44,41,55,59
bitmap=rx_bullet.tga
mod=14
min=0
max=13
frames=14
The
bitmap contains 14
frames to comprise a complete up-and-down cycle that can be run indefinitely. Because the
rx_data_cnt parameter is a simple counter (meaning it will increase continuously while
cFos/cFosSpeed is running), we'll need to perform a
mod(ulo) calculation to keep the value within the range of
min and
max.

Positioning the motion is done by setting
rect to the coordinates of the frame's upper left corner and to those of a pixel just right of and below the frame's lower right corner (both shown bright red in the magnified part of the sample image).
If we want a similar display for outgoing packets, this can be accomplished simply enough by copying this section and changing the
disp name along with the
value and
rect entries:
[disp2]
value=tx_data_cnt
method=animation
rect=44,58,55,76
bitmap=rx_bullet.tga
mod=14
min=0
max=13
frames=14
What we have now are two displays representing two different parameters but still looking the same. We can improve on this design by making use of the
transform key. One of the most powerful assets the skin definition language has to offer, this key permits mapping one color range to another (the correct notation for each range is Hue, Saturation, Value). Thus, source and destination range would have to be combined into one comma-separated list like this:
Range1_Hue_Start,
Range1_Sat_Start ,
Range1_Val_Start,
Range1_Hue_End,
Range1_Sat_End ,
Range1_Val_End,
Range2_Hue_Start,
Range2_Sat_Start ,
Range2_Val_Start,
Range2_Hue_End,
Range2_Sat_End ,
Range2_Val_End.
So, adding
transform1=15,0,0,40,255,255,100,0,0,120,230,210
to the parameters above would transform the color from orange to green, while also reducing saturation and brightness.

Next step:
Creating another animation with a history section.The font definition The history method Index