Site icon AranaCorp

Using a Nextion display with Arduino

Xukyo

The Nextion screen is one of the best solutions for creating a graphical interface to drive your Arduino project. The best-known interface for interacting with an Arduino is the LCD screen with a few buttons and potentiometers, at the cost of I/O and Arduino code overload. In this tutorial, we’ll look at how to set up a Nextion display and how to use it with Arduino.

Hardware

Nextion card presentation

The basic interface for controlling an Arduino, and present in all kits, is the LCD screen with a few buttons and potentiometers, available as an LCD Shield. There are also Shields with touch screens, but these use all the Arduino’s I/O and overload the Arduino code. One solution is to use a Nextion screen, which contains its own program and communicates with any microcontroller via the serial port.

N.B.: It is possible to create a graphical interface on a PC or to create a web interface to control the project by adding a wireless communication module.

Nextion editor installation and presentation

Download and install the Nextion editor

When you open a new project or file, the software asks you for the screen model (in our case NX4832K035_011). You can change the selection in the Device>Settings menu.

Then choose screen orientation and encoding.

Creating a graphical interface

We’re going to use the Nextion graphical editor to create our graphical interface. In this example, we will add:

To add an object, click on the desired object in the Toolbox window and the object will be automatically inserted in the Display window. You can then configure the object in the Attributes window.

You can download the GUI file to import into Nextion Editor. With this example, you’ll be able to create much more complex interfaces.

Add an image

To add an image, first import it into the software using the (+) button in the “Picture” window.

You can then insert a Picture object in the Display window and select the image by pressing the pic > browse… attribute.

N.B.: Add an imageaux dimensions désirées

Add text

Before adding a text object, you need to generate a font. This can be done in Tools> Generate Font

Once the font has been generated, you can select it in the font attribute of the Text object. You can then modify the text in the txt attribute (note the maximum number of characters txt_maxl).

We add four text objects:

Add a button

Once the button object has been added to the interface, you can adjust its attributes:

In the Events window, you can program what the screen will do when the button is pressed or released. There are a number of instructions you can use in these windows. These include

In the Touch Release Event tab, we write the following command, which is a predefined command from the Nextion library and corresponds to trigger1()

printh 23 02 54 01

For the b2 button, we use the same command but for trigger2()

printh 23 02 54 02

Add a timer

The Timer object can be used to execute code on a regular basis. Particularly useful for retrieving data from the serial port and updating the interface.

In the Timer event tab, we use the covx function to convert the value of the variable into a string and write it to the text t4

covx analog0.val,t4.txt,0,0

Load program on Nextion screen

Connect the Nextion card to the USB-TTL converter

To load the interface, press Compile then Upload

Connecting the Nextion display to the Arduino microcontroller

To download Arduino code to the board, pins RX and TX must be disconnected from the screen.

Using the Nextion.h library

There are various libraries you can use to manage a Nextion display

We use EasyNextion

In Nextion Editor, we define an event release “printh 23 02 54 01” for the ON button and an event release “printh 23 02 54 02” for the Off button.

Using the NextionListen() function, these commands activate the trigger1 and trigger2 functions.

#include "EasyNextionLibrary.h"

#define baudrate 9600

EasyNex myNex(Serial);

//Variables
uint16_t analog;
bool ledstate;

const int REFRESH_TIME = 100;
unsigned long refresh_timer = millis();

void setup() {
  myNex.begin(baudrate);

  pinMode(A0, INPUT);
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  myNex.NextionListen();

  if ((millis() - refresh_timer) > REFRESH_TIME) {
    analog = analogRead(A0);
    myNex.writeNum("analog0.val", analog);

    refresh_timer = millis();
  }
}

//`printh 23 02 54 XX` , where `XX` the id for the triggerXX() in HEX.
void trigger1() {
  digitalWrite(LED_BUILTIN, HIGH);
  myNex.writeStr("t2.txt", "LED ON");
}

void trigger2() {
  digitalWrite(LED_BUILTIN, LOW);
  myNex.writeStr("t2.txt", "LED OFF");
}

Results

Bonus: Nextion Editor Simulator

Nextion offers a simulator for testing interactions between the display and microcontroller and the graphical user interface. This simulator can be accessed by clicking on “Debug”.

Sources

Exit mobile version