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:
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
(ulo) calculation to keep the value within the range of min
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
name along with the value
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
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:
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