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.