» Documentation, How to create your own cFos(Speed) skin, page 8

The motion method

A motion is an animation that is being played for as long as the assigned value stays within a certain range. Let's use tcp3.tga from the cFosSpeed "Liquid Crystal" skin for displaying active TCP connections.

        [disp9]
        value=tcp_cnt
        method=motion
        bitmap=tcp3.tga
        rect=30,13,46,30
        min=1
        idleframe=1
        transform1=225,0,0,230,255,255,10,0,0,15,255,255
      
What this does is use the tcp_cnt parameter of cFosSpeed , which tracks the number of current TCP connections, while setting the min value to "1." In other words, it will become active whenever one or more TCP connections are open.

tcp3.tga The bitmap contains two frames. The first is completely transparent (i.e., filled with transparentcolor ). This frame serves as the idleframe , meaning it will be displayed when the tcp_cnt is "0" and thus falls outside the range between min and max . Note that for what we're trying to accomplish in this step, we can skip defining max altogether, because there is really no need to specify an upper limit here.
By contrast, the second frame is the image that will be shown if the tcp_cnt is "1" or more.
To make sure the motion stands out nicely from the background, we use transform1 to change its color from blue to red. And for providing precise numeric information, we also add a small text section displaying the number of active TCP connections.

        [disp10]
        value=tcp_cnt
        method=text
        font=font1
        rect=46,21,61,29
        style=n
        digits=3
        flags=br
        transform1=50,0,0,70,255,255,50,0,0,70,230,220
        transform2=0,0,0,10,255,255,225,190,140,226,191,141
      
Now, let's do something a little more ambitious by adding the following motion:

        [disp11]
        value=ping_time
        method=motion
        bitmap=connect.bmp
        rect=35,87,48,99
        min=1
        idleframe=1
        updatetime=120
        pause=2000
        transform1=205,0,0,212,255,255,225,0,0,227,255,220
        transform2=0,0,0,200,255,255,0,0,0,200,200,200
      
tcp3.tga
This one ( connect.bmp from the cFos "Modern" skin) contains seven rather than just two frames. Again, the first is a fully transparent idleframe .
The other frames compose an animation that is being played continuously while ping_time stays above zero. To control animation speed, updatetime is set to 120 ms. What we've also done is add a pause of 2,000 ms after each time the animation has run through (i.e., after its last frame finished playing).
Transformations are again used here to handle some problems with the original bitmap's shadow colors.
For conveying accurate numeric values, we'll again need a brief text section like the one below:


        [disp12]
        value=ping_time
        method=text
        font=font1
        rect=50,87,65,95
        style=n
        digits=3
        flags=br
        transform1=50,0,0,70,255,255,200,0,0,201,64,255
        transform2=0,0,0,10,255,255,225,190,120,226,191,121
      
Note that both text sections contain a "b" flag. What this does is make those sections empty (and thus invisible) while their value is zero.

Next step: The final touch: The fader method

Powered by cFos Personal Net Web Server
Practice random kindness and senseless acts of beauty