Today we are going to create a practical project-slide to unlock and display the battery charging state. It is a simple but cool project with just four components to be used.

Our idea is to slide to unlock the interface, then jump to another interface where users can see the battery charging progress. It is apparent that we will use a slider component, a progress bar component, a variable component, and a timer component.
Now let’s begin. Download the HMI file.

Step 1. Create an HMI file

First of all, create a new HMI file. We make its resolution 320*240 vertical. Import the source pictures to the picture library. Double click the page name to modify it as “main”. Then select a picture as page main’s background, we choose picture 3 here.

Step 2. Add a slider component

Add slider component to the display area, drag it to the right position and adjust size. Select it to show the attribute table. In the table, dropdown vscope to select global. In val, you may input a small number you like. For other settings of the table, please refer to the screenshot below:

Step 3. Add a variable component and enter codes

In order to implement slide effect, we must add a variable to change slider values. Now just add a variable and we don’t need to modify the variable attribute table.
This is not enough to implement slider to unlock effect, what we also need is the codes for slider component.

As you can see from above screenshot, in compiler output window, there are some codes.
In Touch Press Event, the code is:

va0.val=h0.val

In Touch Release Event, the codes are:

if(va0.val>=40)  //If val is over 40 when touch, it will not unlock
{
h0.val=5
}
if(h0.val>=90)
{
page 1
}
if(h0.val<90)
{
h0.val=5
}

Step 4. Add a page and place a progress bar component on

Now we add a new page so as to show the battery charging progress. We make its background solid black color.
Then we drag and drop a progress bar component. Select it to show the attribute table, select global in vscope, and set other cells as our screenshot shows below:

Then we enter codes for the progress bar. The codes are:

main.h0.val=5
page main

Step 5. Add a timer component

To make the progress work, we also need a timer. Now we add a timer and set its tim as 200.
After that, type the codes in the user code input box, the codes are:

page0.j0.val=page0.j0.val+10
if(page0.j0.val>=100)
{
page0.j0.val=0
}

So far, all our project processes have completed. It’s time to compile and debug to view the effect. If everything goes smoothly, the below video shows how it looks like: