Nextion Multiple Control Project – Number Component and Dual-state Button

Our Nextion Editor has updated to the latest V0.30. A lot of new functions have added. You may also noticed that two new components has been added: number and dual-state button. So how to use these two component? Here I would like to show you an example. In this example, I will use various components to make multiple control buttons.
You may download the HMI project file here.

I’m going to use the number component and dual-state button components as well as other components to make multiple control buttons. A number component is a number variable that can be controlled by other components. A dual-state button component is a button that can be switched between two states.



First of all, I build a new .hmi file, then import all my material pictures and create a font and add it to the fonts window. I choose a picture for background page 0. Next, I add a text component, then I select global in vscope because I want to make it a selective button. The options for it will be in another page. Select Image in sta and choose a wanted pic. I want it firstly show “Project_1”, so I just enter this words in txt. Finally I adjust the component a little bit.

Then I drag and drop a slider component and a number component below. As for the number component, I name the objname n1. Then make vscope global, and crop image in sta, select the background, font color and font.

Since I want to make it a checkbox, I drag and drop a dual-state button component. The objname is bt1, vscope is global, sta is Image. I select one blank box image in the pic0 and a box with check image in pic1, 0 for val. Adjust the component size a little bit. By clicking the bt1 box, you can check or uncheck it.

Open many project files at the same time:



There are still other components to be added and set, I think it is unnecessary to write so much details here as you can download my hmi project file. Those components are repeatedly used in our previous tutorials, you may go back to read them. Download this project hmi file, you will see all the settings and user code there. Just be aware of where to choose global and where to choose local. You can also copy my example. I want to remind you that the Nextion Editor supports open several hmi file windows at the same time now. So you can open my example and build your own one in another window.

Demonstration Effect:


%d bloggers like this: