Introduction

Nextion Arduino library provides an easy-to-use way to manipulate Nextion displays series. Users can use the library freely, either for commercial projects or open-source projects, without any additional conditions.

There are 10 examples in our library now. We’ll keep updating with more examples. Please visit our examples here: https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples

Latest source code(master branch) can be downloaded here: https://github.com/itead/ITEADLIB_Arduino_Nextion
To discuss the project? Request new feature? Report a BUG? please visit Nextion Forum：http://support.iteadstudio.com/support/discussions

Download Source Code

Latest version is unstable and a mass of change may be applied in a short time without any notification to users. Commonly, this library is for developers particularly.
Release version is recommended for you, unless you are one of developers of this library.
Find Release notes here:
https://github.com/itead/ITEADLIB_Arduino_Nextion/blob/master/release_notes.md

Latest(unstable) version

You can also clone it via git:

git clone https://github.com/itead/ITEADLIB_Arduino_Nextion

Release(stable) version

We provide two library formats in release version, the first one is normal format, the second is suitable for developer.
♦ https://github.com/itead/ITEADLIB_Arduino_Nextion/archive/v0.7.0.zip
♦ https://github.com/itead/ITEADLIB_Arduino_Nextion/archive/v0.7.0.tar.gz

Find history releases versions here: 
https://github.com/itead/ITEADLIB_Arduino_Nextion/releases

Suppported Mainboards

All boards, which has one or more hardware serial, can be supported.
For example:
♦Iteaduino MEGA2560
♦Iteaduino UNO
♦Arduino MEGA2560
♦Arduino UNO

Configuration

In configuration file NexConfig.h, you can find two macros below:

♦dbSerial: Debug Serial (baudrate:9600), needed by beginners for debug your nextion applications or sketches. If you complete your work, it will be a wise choice to disable Debug Serial.
♦nexSerial: Nextion Serial, the bridge between Nextion and your mainboard.

Note: the default configuration is for MEGA2560.

Redirect dbSerial and nexSerial

If you want to change the default serial to debug or communicate with Nextion , you need to modify the line in configuration file

#define dbSerial Serial    ---> #define dbSerial Serialxxx
#define nexSerial Serial2  ---> #define nexSeria Serialxxx

Disable Debug Serial

If you want to disable the debug information, you need to modify the line in configuration file:

#define DEBUG_SERIAL_ENABLE ---> //#define DEBUG_SERIAL_ENABLE

UNO-like Mainboards

If your board has only one hardware serial, such as UNO, you should disable dbSerial and redirect nexSerial to Serial(Refer to section:Serial configuration).

Example-Button

To help you quickly get started, we are now take CompButton.ino as example showing you how to to use the library. You may download it and practice as we instruct.

First of all, open Com pButton in Examples.You will see there are three files: HMI file, ino file and tft file.
1.Open and debug the CompButton. HMI in Nextion Editor, then click "upload".
2.The tft.file is generated automatically by compiling the HMI file in Nextion Editor. Nextion also supports downloading project with tft file by SD card(within 2G).
3.Open CompButton.ino, copy all the source codes to Arduino IDE and download to your Arduino.

Useful Links

View more comprehensive application examples:
http://blog.iteadstudio.com/nextion-tutorial-based-on-nextion-arduino-library/

So far, we have posts covering basic introduction to Nextion Display, Nextion Editor, Nextion Library, intelligent fish tank project. I am sure you have a comprehensive understanding to Nextion and may have created your own project. Or if you still have stuck in the use of the components, this and later posts are just the thing to clear up your troubles. In this post, I will introduce two components particularly- Text Component and Button Component. I will explain each component property as detailed as possible and an example will be add to assist you.

Text Component

Text component is for inputting characters. Add a text component and select it, an attribute table will appear in the bottom right corner. Click each component property, its meaning will be shown under the table.

In this table, there are two lists, the left list are fixed property names, the right list can be edited or selected. There are three kinds of cells. 

The green font cells can be controlled by MCU;And the cells with green bold font are vital properties,when change them,the system will refresh automatically whithout ref command, but for those cells that are not in bold font,when you change them, you must use ref 0 command to refresh to view the effect; While the black font cells once being set in Editor, they can not be changed by MCU any more. 

Ok, let’s show you an example. Please download the CompText example from here:
https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples

1.Open your Nextion Editor, and click New to create a new HMI file. Click Add in Picture Bar to add a picture. Click the display window, click solid color in the right Page table, dropdown to select Image, then double click pic to choose the picture as background.

2.Click the Display window and then click Add Component on the top, dropdown to choose Text, there you are, you’ll get a text component on the display window. Select and drag it to any place, by clicking it, you’ll see the attribute table in the bottom right corner.

3.Let me introduce the component property one by one.

Now I change the "txt" property as below:

4.This is the result hopefully look like.

Button Component

Compare to text component, Button has a press event attribute. Once press the button, it activates an event.

Add a button component and click it, then you’ll see the button attribute table in the bottom right corner.

Now continue to add two button components b0 and b1 to the above HMI file. Click the component to show the table. Button component attribute table:

Now set the button property as below:

Here’s the result:

Effect Demonstration

At last download the hmi file to nextion with a foca or download the tft file by a sd card.
Link Arduino Mega2560 with Nextion Display, and use USB to connect Mega2560 with your computer.
Download our Library and place it in Arduino library. Then copy the source code to Arduino IDE.
Then upload the sketch to Mega2560. And here it is in action.

An Entry Application of Text Component and Button Component from ITEAD on Vimeo.

So, very simple components, right? Practice makes perfect. Just start your project, be your own interface designer.

In this post we’ll introduce you 3 Nextion Editor components：progress bar Component, picture component and crop component, and how to apply them to your project. We will show you a very simple example for each component.
Ok, let’s get started.

Progress Bar Component

A progress bar component is used to control and view the progress. There are many properties for you to design your own progress bar.

First of all, add a progress bar component in the nextion editor HMI file. Then click to select it, you’ll see a progress bar table in the bottom right corner.

For detailed introduction about the three form cells in the table, please refer to our last post-An Entry Application of Text Component and Button Component.

By clicking each cell, a note that explains the meaning of the cell will pop up below the table. This table covers all the properties below:

Now we change the progress bar property table as below. This example can be downloaded from our library: https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples/CompProgressBar

In addition, we add another two button components to control the progress bar. Below are the settings:

Then this is how the interface hopefully look like:

Picture Component

A picture component is used for adding picture-like button to the interface.
Please see the new-added picture component property table as below:

Example: now I add two pictures to picture library, and choose 1 in pic. When debug and add the Instruction p0.pic=2 in Instruction Input Area, press enter, the component will change to pic 2. See the effect demonstration video at the end of this post.

Download this example from here: https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples/CompPicture

Crop Component

A crop component can crop a image whose size is the same as resolution, and shows the cropped image directly on your page.
Properties of crop image component are as show below:

Related example is as below, just set the component same as the example. You can download the example from here:
https://github.com/itead/ITEADLIB_Arduino_Nextion/tree/master/examples/CompCrop

Finally, download the code to your mega2560. Below is effect demonstration video of the three examples:

In this post, another 3 components are to be introduced. They are respectively hotspot component, gauge component and waveform component. With explanation of each component property, followed by a simple example, I believe you’ll quickly learn to use these components to design complex interfaces.

Hotspot Component

Hotspot component is used to create a detectable touch area.

Hotspot attribute table is very simple, there are just 6 properties. With just a look, you’ll get their meaning, not to mention the explanation note below the table.

You can design hotspot to execute events when touch release. For example, design two hotspots, by touch releasing one hotspot, the page loads next image, by touch releasing another, the page loads last image. This realize image browsing effect that we often use.

Example:(Download hotspot example here)

Firstly, choose an image to be your background, we choose picture 0 here. Create a font. Then add two text components, we are going to make them indicating arrows. Below are the settings:

Next, add two hotspot components to the background, drag and drop them to desired area. Add another picture to picture library. Then set the table cells as follows:

Finally,select hospot m0, then move on to the the compiler window, select touch release event and input page0.pic=0 in User Code, as showed below. Similarly, select hotspot m1 and inputpage0.pic=1 in User Code.

Compile and debug, you can click the the left part or the right part of the image in the simulator. If everything is ok, you will successfully switch between the two background images. Effect demonstration video is at the end of this post.

Gauge Component

Gauge component is used to create a pointer, which is widely used in gauges.

Let’s first learn about its attribute table.

Example:(Download the example here)

We are going to make a pointer whose angle can be adjusted by two buttons. So we’ll need one gauge component and two button components. Here we go.

First of all, choose a picture to be our background. Then add a pointer component in the display area, drag and drop it to desired position. And adjust the wide and length by dragging the side line or by inputting w and h.

Here we set the component attribute table as follows:

Next, add two button components. The properties are set as below:

This is how the display window hopefully look like:

You can see the example demonstration video at the end of this post.

Waveform Component

Waveform component is used to create a series of waveform that can detect all kinds of hardware working states.

Below is waveform component attribute table:

Example:(Download this example from here)
In this example, we create a four-channel waveform component. The channels are in different colors. Below are the settings:

Following picture is the how the waveform look like, download the source code, let mega2560 continuously output 4 channel value to plot the curves. Demonstration video is at the end：

Demonstration Video

The three example effect can be demonstrated by below video:

In this tutorial we’ll introduce slider component and timer component, and explain how to apply them to your project. As usual, we’ll show you an entry example for each component.

Slider Component

A slider component is used to create a controllable slider, from which you can vary number, time, progress, etc.

Slider Component Property Table:

Example: (Download the example here)

We are going to create an interface with a slider to be controlled between 0 to 100.
So we need to create one slider component and a text component. Here we go.
At first, we add a slider component to the display area, drag and drop it to desired position. Then modify the attribute table as below:

Then add a text component in the middle. The settings are as below:

This is how the interface hopefully look like:

Download the source code to your mega2560, then you can control the text by the slider.
You can see the real effect demonstration from our video at the end of this post.

Timer Component

A timer component is used to create a timer, it triggers an event every circle time.
This component is very different from previous components. It can not be directly showed in the interface. With some codes, we can use it to control other components.

Let’s first look at the timer component attribute table:

Example:(Download this example here)

In this example, you can modify the circle time by buttons and the timer can be turned on and off. So we need two text components to show the time and circle time, three button components to turn on or off the timer and control the circle time.
Then we create the components and arranged as below:

The settings are as below:

Next, add a timer component and set it as below, the initial circle time is 100, which means for every 100ms, the timer adds 1. When you press ADDTIME and make it 500, which means for every 500ms, the timer adds 1.

Then upload the source code to Arduino Mega 2560. As you can see the demonstration video at the end of this post, when press ADDTIME to make the circle time value bigger, the timer becomes slower, in contrast, when press DECTIME, the timer runs faster.

Demonstration Video

So far, we have learnt all current components tutorials (variable component exceptional). I hope with these series basic tutorials, you can quickly get started using Nextion Editor to design your own interfaces. For the coming components, we’ll post related tutorials once they are available.

For variable component and if conditional statement, our library does not have any supported examples. We think it would be better if we write a sole post for them. So next post we’ll introduce them in details, stay tuned!

If you have any questions about these components, please leave your comments below the post. Or you can go to our forum. We welcome you to share your project with you!

Our intelligent fish tank project has open source on github now. This post we’ll show you its effect demonstration. You can learn how to operate the interface and set the functions from our video.

Demonstration Video:

The intelligent fish tank is consisted of six sections, a main display section, and 5 functions sections, including time setting(Time), pump (Pump), feed (Feed), light (Light) and ultraviolet (UV). Because this project needs to realize these functions and set a timer, a lot of nextion components has been used inside. But do not worry, these components are set separately according to the function. I believe as long as you understand one function’s implementation way, you will naturally understand the others. In addition, the program has added AT commands set. You must pay attention to the realization mechanism for error handling in the program.

For all support files about this project, please visit here: https://github.com/itead/FishTank

If you have any ideas or questions, please post on Nextion forums.

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 car5dutoon 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, 1for 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 picture 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: http://blog.iteadstudio.com/wp-content/uploads/2015/09/GIF-Project.zip

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

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 touch 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”, second page’s as “B”. 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.

You must pay attention that for t0 and t1, in the property of vscope, we select global. When selecting global, it means the component 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 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 respectively 0,1,2,3,4,5,6,7,8,9,.,DEL and ENTER. In order to output the value in t0, we have to add codes to all these component.

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:

Are you be inspired by this project? If you have any good idea or project, just share with us here:http://support.iteadstudio.com/support/discussions/1000058038

Today we are going to create a practical project-slide to unlock and display 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 you can see the battery charging progress. It’s 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 a HMI file

First of all, create a new HMI file. We make its resolution 320*240 vertical. Import the source pictures to 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 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, the 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 shown below:

Then we enter codes for 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 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, here below video is how it looks like:

Hello! We have finished a cool Nextion project. It is very easy to create.

Download the project file here: Nextion Music Player HMI Project File

Download related codes of this project from this website: Nextion Music Player Project Source Codes

Below is the demonstration video(Note: this is only a demonstration project, the progress bars are not set by the background music rhyme.):

Nextion Music Player Project from ITEAD on Vimeo.

We have posted many articles about using Nextion to work with Arduino. But maybe you don’t know how to use it with Raspberry Pi. This post I’m going to teach you how to achieve it. There are just 5 steps.

Step 1: Install Segnix

Follow the “Readme.md” instructions of github, install Segnix to Raspberry Pi.

Step 2: Disable Serial

Login Raspberry Pi.
Then input below commands to disable the serial:

sudo raspi-config

————> 8 Advanced Options ————> A8 Serial ————>NO

Step 3: Software Preparation

Just to make it simple, here we use the button example in our Nextion library.
segnix CompButton CompButton.ino
Copy the button .tft file to SD card, then update Nextion with the SD card.

Step 4: Hardware Preparation

Connect Nextion display with Raspberry Pi with Dupont line as follows:

GND ----- GND

VCC ----- 5V

TX ------- RX

RX --------TX

Step 5: Run the program

Input below command in Raspberry Pi to start running the program:

sudo ./CompButton

Touch click the number button in Nextion display, the number will increase 1 by every click.

Effect Demonstration

Nextion TFT HMI Display works with Raspberry Pi from ITEAD

Our Nextion Editor has updated to the latest V0.30. A lot of new functions has 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 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:

Nextion Project – Number Component and Dual-state Button from ITEAD on Vimeo.

This post I`m going to teach you to build a gradient progress bar project. Gradient progress bar has been widely applied to many places like refresh page, buffer zone. For HMI designing, I think it is a very important and practical project.
Download the HMI project file from here.

I`m going to build a project containing 3 kinds of Old Sankey like progress bar, and make them switchable. We all know that there is a progress bar component available in the software, but that is only single bar, which is not helpful because what I need is gradient progress bar that combined with many bars.

Picture Preparation

To begin this project, I design progress bar of three size. And to make their color changeable, I use PS to design different color. I make word “LOADING” five yellow color: 0% yellow (black), 25% yellow, 50% yellow, 75% yellow, 100% yellow. I make the rectangle bar five yellow colors: 0% yellow (black), 25% yellow, 50% yellow, 75% yellow, 100% yellow. And another yellow rounds in five colors: 0% yellow (black), 25% yellow, 50% yellow, 75% yellow, 100% yellow. All background are in black color. I will use the bar pictures from 0% yellow (black) to 100% yellow, then from 100% yellow to 0% yellow (black) to make gradient effect. This means I will use all pictures except those 100% yellow twice, so remember to add them twice to the picture library.

Building Project

As you can see from my HMI file, there are two pages that can be switched between. In page0, I make a switch button b0, and make it touch release to jump to page1. Then for the p0, I make it a loading bar. To make this component automatically refresh to show different pictures, a variable component va2 and timer component tm1 have created. Please see the codes. To build the circle progress bar, I add a p1 component, then copy and paste p1 for 11 time, adjust their position . And to make the progress bar refreshing among the pictures, two variable components va3 and va 4 as well as a timer component tm2 have created. Please see the codes for details. The page1 has two progress bars, so copying and pasting the first component will reduce your workload greatly. Regarding to the codes, just check out from my HMI file.

Demonstration Video

And below video shows the demonstration effect:

Gradient Progress Bar Project from ITEAD on Vimeo.

Keypad is widely applied to all kinds of projects. This post I will show you a Nextion keypad project.

Download the HMI project File: Nextion-Keypad-Project

As you can watch the project demonstration video as below:

This post will show you an encrypted password input by full screen keyboard. This project is very timing consuming because it needs a lot of components to create.
Download the HMI project file here

What you will need?
1.Nextion display*1
2.Foca*1（Or SD card）
3.USB cable*1
4.Grove cable*1

First of all, we need to create the encrypted password full screen input project in Nextion Editor. My idea is to make the password showed in one interface, by tapping the input box, we can jump to another interface which has a full screen keyboard. Therefore, we should create a project that contains two pages.

The pictures must be prepared ahead of time, you can search in the Internet and deal with them in Photoshop. Adjust the picture size according to your resolution.

Create a new HMI file. Then you can add the pictures inside picture library. Create your desired font and add to font library. And add two pages. There are multiple components to be added and set, and a lot of codes needed in this project. If you want to check the details, just download the HMI project file above and open it in Nextion Editor.

You can download the project file either from SD card or with a foca.

Demonstration Video