This post we are going to make number inputting bars. Multiple components will be applied to this project, including text component, button component and variable component. The most important thing is that we’ll use property vscope-global to implement transmitting values among pages.

Our original idea for this project is to create an interface, on which there will be current and voltage to input values. When touching the value input box, we can jump to a keyboard interface, where you can input or delete numbers.
Ok, let’s begin. Download the HMI file.

Step 1. Create an HMI file

Create a new HMI file, here we choose resolution 320*240 horizontal. Import a picture to picture library, then create desired fonts and add them to Fonts. Because there are two interfaces, we need to create two pages. So we create one more page, and modify the first page’s name as “A”(as you defined), second page’s as “B”(as you defined). We made the two pages’ background as pic 0.

Step 2. Add and set 4 text components in page A

Add four text components to page A, drag to adjust their size similar as following screenshot. For the two components on the left side, we made them cropped image as background and their txt be “Current(A)” and “Voltage(V)”. For the other two components on the right side, just choose a desired background color, then delete txt words.

Please pay attention that for t0 and t1, in the property of vscope, we select global. When selecting global, it means the component’s value can be transmitted in this project. This is very important, because the values of these two components are inputted by another page.

Next, write down codes in User Code for t0 and t1 compiler output window. Of course, they should be inputted after we complete page B.

For t0, the user code should be:

B.va0.val=0   //in page B, vscope of va0 must be set as global
B.t0.txt=""   //in page B, vscope of t0 must be set as global
page B

For t1, the user code should be:

B.va0.val=1  //in page B, vscope of va0 must be set as global
B.t0.txt=""  //in page B, vscope of t0 must be set as global
page B

Then below screenshot is how page A looks like:

Step 3. Place text and button components in page B

We have referred at the beginning that we want a calculator-like number input interface. But it only has number inputting and deleting function, no calculating function. Of course, if you want that also, you can achieve by adding more components and corresponding codes.

Firstly, we add a text component to show the value inputted. We place a text component to the display area, drag to adjust the size. Remember to select global in vscope, select background color and font, then delete txt words.

Secondly, we place 13 button components to the display area. Drag to adjust their size and place them orderly. Select font, component background and font color. We make their txt 0,1,2,3,4,5,6,7,8,9,.,DEL and ENTER, respectively. In order to output the value in t0, we have to add codes to all these components.

For component txt=0, the source code:

t0.txt=t0.txt+"0"

…

For component txt=9, the source code:

t0.txt=t0.txt+"9"

For component txt=., the source code:

t0.txt=t0.txt+"."

For component txt=DEL, the source code:

t0.txt=t0.txt-1

For component txt=ENTER, the source code:

if(va0.val==0)
{
A.t0.txt=t0.txt //in page A, vscope of t0 must be set as global
}
if(va0.val==1)
{
A.t1.txt=t0.txt  //in page A, vscope of t1 must be set as global
}
page A

Following screenshot is the result of this page:

Step 4. Add variable component to page B

Add a variable component in page B. Then in the property table, select global in vscope. As you can see from below screenshot:

Demonstration video

So far, all designing process of our project has completed. We can compile and debug to test its function and view the effect now. If any errors occur during compiling process, there will be red warning messages in compiler window, thus, you can fix the errors accordingly. If everything goes smoothly, you can see the effect as shown by our demonstration video:

Have you been inspired by this project? If you have any good ideas or projects to upload, please share with us here, your sharing is highly appreciated.