Display Nextion With Arduino Uno

Introduction: Display Nextion With Arduino Uno

About: Do you like technology? Follow my channel on Youtube and my Blog. In them I put videos every week of microcontrollers, arduinos, networks, among other subjects.

Have you ever learned about "smart display?” Well today, I present the Display Nextion. How does this differentiate from the others? In addition to the graphics controller, it has a microcontroller connected in the Uart TX RX. For an example: When I want the lamp to appear on the screen (same as the image shown below), I will not need to draw this entire lamp, as I will simply record the drawing on the display and print its ID. This differs from traditional displays, in which I have to execute the desired drawings, pixel by pixel. Therefore, in this "smart display,” all graphic processing is done by Nextion itself. The microcontroller, an Arduino Uno in this case, just keeps sending the code. Important information regarding this is that Display Nextion uses STM32.

In this video today, we will learn about the IDE Nextion Editor, create a simple example without a microcontroller, and simulate in the Nextion simulator. In addition, we’ll create an example using a microcontroller running with Nextion.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: Assembly

In our project, we have a DHT22 sensor for reading values, an Arduino Uno, as well as the Display Nextion, which only has 4 wires: positive, negative, TX, and RX. This model also has an SD card slot, which also serves to boot and load the Bitmap images to be displayed on the screen. In our assembly, which displays temperature and humidity information on the display, we also have an LED.

Step 2: Nextion

There are several models of Nextion. An interesting feature of this display is that to test it, you do not need to have an Arduino connected in it, since you can use a serial USB adapter connected to the computer itself.

Step 3: Nextion Editor

You can download the Nextion Editor through the link below:

download: Nextion Editor

In the image, we have an overview of the Nextion Editor, exposing the Main Menu, Components, Image and Font Libraries, Exposure Area, Compile Output Area, Event Area, Page Area, and Attribute Edit Area.

Step 4: Main Menu

• File (create / open / save /import project, open construction folder)

• Tools (source generator)

• Setting (settings, reset layout)

• Compile (compile project)

• Debug (opens the simulator to test the program) - * No physical Nextion is required to test the project.

• Upload (opens a window for uploading the project to Nextion) - * can take a long time

• Device (opens the Nextion model and orientation settings)

• ID (display / hide component IDs in the exposure area)

Step 5: Components

The components listed in image may be used in the project. Just click on the desired component and it will go directly to the exhibition area.

Step 6: Font Generator

To use text components, we need to create some font.

Access the menu: Tools >> Font Generator

Choose the font type, size, and style, and give it a name.

Clicking Generate Font will open a window to save a file with a .zi extension.

This file will be used to import the font into the project.

Step 7: Image

To import an image into your inventory, just click the menu: add, and choose the image.

Step 8: Exhibition Area

This is below the image of the exposure area with the PICTURE and BUTTON components inserted.

Step 9: Page Area

PAGE is the equivalent of every "screen" we have in our project.

1. Add new page to the end of the list

2. Remove the page

3. Insert the page (between pages)

4. Move the page order up

5. Move the page order down

6. Copy the page

7. Import / Export the page

Step 10: Attribute Editing Area

When you click on a component, you can edit its attributes. Here, we see the "picture" and "button" attributes that we added in the exhibition area.

Step 11: Compilation Output Area

Clicking on the compilation button will show the results in the output area.

Step 12: Events Area

In the event area, we can configure the events of the components (touch press, touch release ...) and also add codes to execute when the event occurs.

The image shows that, when the release event occurs, "page 1" will be called, which means page 1 will then be displayed on the screen. Note that the number 1 refers to the destination page ID.

Step 13: Debug

When clicking on the Debug menu, a window to simulate our project will open. We can use the microcontroller with the code and this simulator, for example. We do not necessarily need a physical Nextion device.

1. Area for sending commands to the simulator

2. Simulator return area

3. Control area of the microcontroller

4. Command input mode (keyboard Input or User MCU Input)

5. Command destination (Simulator, Nextion, Simulator and Nextion)

Step 14: Debug With Microcontroller

When you click on the User MCU Input option, two new configuration fields are opened, one to set the microcontroller COM port and one to set the communication speed. From there, the commands will be sent by the microcontroller, and the simulator will receive them.

Step 15: Simulating With Debug

Step 16: ​Upload

To write the project to Nextion, we can do it in two ways:

1. Upload Menu

With Port: either you choose the COM port of your Nextion, or leave it in Auto search, so that the program is in charge of testing everything and at different speeds.

Baud Rate: Choose the upload speed. If Com Port has been Auto search, the program will try all available speeds until you find the correct one.

2. Upload via SD Card

Go to File menu >> Open build folder

Copy the file from your project (.tft extension), and then paste it into your SD Card that you will use in Nextion.

Note 1: In SD, there should only be the file of your project.

Note 2: After copying the file inside the SD Card, place it in the Nextion. When fed, it will identify the file and then "upload" it to its memory. Once this is done, wait for the success message and then remove the SD Card.

Step 17: New Project

When creating a new project, the following windows will appear: in the first (1) you choose the model of Nextion, and in the second (2) the orientation of the screens.

Step 18: Example

We will now make an example with two screens: one will show the data of one DHT22 sensor and the other to control an LED and its PWM.

Step 19: Page0

Step 20: Page1

Step 21: Project

The project file can be downloaded through the link below:

download: grafico_dht_light.HMI

Just open it by Nextion Editor to view it.

Step 22: Libraries

Add library "ITEADLIB_Arduino_Nextion-master".

Access the link and download the library.

Unzip the file and paste it into the libraries folder of the Arduino IDE.

C: / Program Files (x86) / Arduino / libraries

Step 23: Note

Before we start coding through the Arduino IDE, we should make a small change to the NexConfig.h file in the library.

* Discuss the serial debug


* Modify the Serial2 setting as the default Serial

#define nexSerial Serial2 -> #define nexSerial Serial

Step 24: Code for the Microcontroller

We will include the libraries for communication with the Nextion display and for communication with the DHT22. We also define the variables that store the data of DHT22 and for control of the Led, among others.

#include "Nextion.h" //biblioteca para comunicação com o display NEXTION
#include <SimpleDHT.h> //biblioteca para comunicação com o DHT22 SimpleDHT22 dht22; static int pinDHT22 = 7; //pino que ligamos o DATA do DHT22 no arduino //variáveis que armazenam os dados do DHT22 float temperature = 0; float humidity = 0; uint8_t pinLED = 3; //pino que ligamos o LED no arduino bool isPage0 = true; //variável de controle para saber se é a página ZERO que está em tela bool isLedOn = false; //variável de controle para saber se o LED está aceso char buffer[100] = {0}; //buffer para armazenar dados string //variáveis de controle de tempo, para funcionar como um cronômetro long previousMillis = 0; const int maxTime = 1000;

We declare the Nextion objects here. We also have the array; in which we declare Nextion objects that will have touch event interaction.

/* DECLARAÇÕES DOS OBJETOS DO NEXTION: [pageID, componentID, componentName] */
NexProgressBar progTemp = NexProgressBar(0, 1, "prog_temp"); //Progress Bar temperatura NexProgressBar progHumid = NexProgressBar(0, 16, "prog_humid"); //Progress Bar umidade NexButton btnNext = NexButton(0, 3, "btn_next"); //botão da página 0 NexText txtTemp = NexText(0, 2, "txt_temp"); //texto com o valor da temperatura NexText txtHumid = NexText(0, 5, "txt_humid"); //texto com o valor da umidade NexWaveform waveform = NexWaveform(0, 6, "waveform"); //componente do gráfico de temperatura e umidade NexDSButton btnLight = NexDSButton(1, 1, "btn_light"); //botão de duplo estado para controlar o LED NexSlider slider = NexSlider(1, 2, "slider_pwm"); //slider que controlará o PWM do LED NexText statusPWM = NexText(1, 4, "status_pwm"); //texto com o status do pwm NexVariable valueSlider = NexVariable(1, 5,"valueSlider"); //(objeto do nextion) variável que guarda o valor do slider NexButton btnBack = NexButton(1, 3, "btn_back"); //botão da página 1 NexPage page0 = NexPage(0, 0, "page0"); NexPage page1 = NexPage(1, 0, "page1"); //Nesse array, declaramos os objetos Nextion que terão interação de eventos touch NexTouch *nex_listen_list[] = { &btnLight, &slider, &valueSlider, &btnNext, &btnBack, NULL };

Step 25: Setup and Loop

In Setup, we initialize communication with Nextion. In Loop, we work as a listener for the press and release events of the objects used in the display.

void setup() {
Serial.begin(9600); pinMode(pinLED, OUTPUT); nexInit(); //inicializa a comunicação com o nextion btnNext.attachPop(btnNextPopCallback, &btnNext); //callback para o evento de release do botão btnNext btnBack.attachPop(btnBackPopCallback, &btnBack); //callback para o evento de release do botão btnBack slider.attachPop(sliderPopCallback); //callback para o evento de release do slider btnLight.attachPop(btnLightPopCallback, &btnLight); //callback para o evento de release do botão de dois estados (btnLight) } void loop() { //essa função trabalha como um listener para os eventos de press e release dos objetos utilizados no NEXTION nexLoop(nex_listen_list); //verifica se a página atual é a ZERO(inicial) //caso seja, verifica se o tempo passado entra a última passagem e a atual, foi de 1 segundo //e então chama a atualização do gráfico de temperatura e umidade if(isPage0) { if(millis() - previousMillis >= maxTime) { previousMillis = millis(); updateDHTInfo(); //pega os valores do DHT22 e então manda para o NEXTION } } }

Step 26: UpdateDHTInfo

This function retrieves the temperature and humidity values of the DHT22 and, through the objects in the Nextion, the information.

//função que recupera os valores de temperatura e umidade do DHT22
//e através dos objetos do NEXTION seta as informações void updateDHTInfo() { int status = dht22.read2(pinDHT22, &temperature, &humidity, NULL);//faz a leitura dos dados do DHT22 //se conseguiu ler os dados corretamente if (status == SimpleDHTErrSuccess) { progTemp.setValue(temperature); //progress bar da temperatura memset(buffer, 0, sizeof(buffer)); itoa(temperature, buffer, 10); txtTemp.setText(buffer); //texto que indica a temperatura progHumid.setValue(humidity); //progress bar da umidade memset(buffer, 0, sizeof(buffer)); itoa(humidity, buffer, 10); txtHumid.setText(buffer); //texto que indica a umidade waveform.addValue(0, temperature); //envia o valor da temperatura para o gráfico waveform.addValue(1, humidity); //envia o valor da umidade para o gráfico } }


SLIDER callback: When the release event happens, this function is called.

//callback do SLIDER, quando o evento de release acontecer essa função é chamada
void sliderPopCallback(void *ptr) { //se o LED está ligado, busca o valor da variável que guarda o valor do slider e então seta o PWM do LED if(isLedOn) { uint32_t number = 0; valueSlider.getValue(&number); //pega o valor atual da variável nextion int value = map(number, 0,100,0,255); analogWrite(pinLED, value); memset(buffer, 0, sizeof(buffer)); itoa(value, buffer, 10); statusPWM.setText(buffer); } } //callback do botão btnNext void btnNextPopCallback(void *ptr) { page1.show(); isPage0 = false; sliderPopCallback(ptr); //chama o callback do slider para reconfigura-lo } //callback do botão btnBack void btnBackPopCallback(void *ptr) { page0.show(); isPage0 = true; }

Already here, we have the Callback of the two state button.

/* Callback do botão de dois estados */
void btnLightPopCallback(void *ptr) { uint32_t dual_state; /* recupera o valor do estado de botão de dois estados */ btnLight.getValue(&dual_state); if(dual_state) { isLedOn = true; sliderPopCallback(ptr); } else { statusPWM.setText("DESLIGADO"); digitalWrite(pinLED, LOW); isLedOn = false; } }

Step 28: Files

Download the files:



Be the First to Share


    • LED Strip Speed Challenge

      LED Strip Speed Challenge
    • Sculpting Challenge

      Sculpting Challenge
    • Clocks Contest

      Clocks Contest