We have introduced the use of timer component in last post. There is still one component-variable left for us to learn. This post we’ll combine using multiple components to make a simple GIF animation. Of course, timer and variable components will be applied. Additionally, the if statements will be used in the code.

Our idea is to make two cartoon figures to move circularly, and their movement speed can be controlled by two sliders. Also there will be two buttons to control GIF’s on and off.

Let’s get started.

Step 1. Create an HMI file

Create an HMI file, here we make the resolution 320*240 Horizontal.
Import 17 pictures to picture library, 3 for figure 1 (a running figure), 10 for figure 2 (a football playing figure), 1 for slider background, 1 for slider cursor.
Generate a font, which is suitable for your interface. Add it to Fonts.

Step 2. Add picture components

Add two picture components to the display window. And select two pictures as background of the two firgures.
The settings are as shown below:

Step 3. Add button components

Add two button components under the figures. Make one as START button, the other as STOP button. As you can see the settings as following screenshots:

And in order to make the two buttons to activate the GIF’s start and stop, don’t forget to input user code. For button b0, the codes are:

tm0.en=1
tm1.en=1

For button b1, the codes are:

tm0.en=0
tm1.en=0

Step 4. Add slider component

Add two slider components beside the two figures. Make the slider image as background and slider cursor image as cursor. Set original value, minimum value and maximum value. Following are the settings:

Step 5. Add text components

Now we need to add four text components in order to remind the acceleration and deceleration directions. So we add four text components to the slider ends. And their most vital settings are to input ACCEL and DECEL. Here below are the settings:

The codes for the two sliders are as below: For h0, user code is

tm0.tim=h0.val

For h1, user code is

tm1.tim=h1.val

Step 6. Add timer and variable component

Finally, we come to the most vital and interesting two components.: Timer and Variable.
Now we are adding two timer components and two variable components, which will not directly shown in the display window, under it instead. Below are the settings:

In order to achieve figure movement effect, we need to write codes to trigger picture loading orderly and circularly. In compiler output window, for tm0, our user code is:

p0.pic=va0.val
va0.val=va0.val+1
if(va0.val>2) //Pay attention to the format, there must be brace before and behind it, and  the brace must take up ONE line
{
va0.val=0
}

While for tm1, our user code is:

p1.pic=va2.val
va2.val=va2.val+1
if(va2.val>15)//Pay attention to the format, there must be brace before and  behind it, and the brace must take up ONE line
{
va2.val=3
}

This is all our process of producing the GIF, now it is time to test and see the effect. Just click on Compile and then click on Debug, you’ll see a pop-up window. Hopefully, you can click on START and STOP to control the GIF. And by mouse selected and move the slider cursor, you can adjust the movement speed. Download the HMI file here.

As you can see from our effect demonstration video as shown below: