Nextion Display STM32 Project: Step-by-Step Guide using Arduino IDE

Interfacing Nextion Display with STM32 Microcontroller using Arduino IDE – Step-by-Step Tutorial”

Introduction

In this tutorial, we’ll learn how to interface a Nextion Display with an STM32 microcontroller using the Arduino IDE.

Nextion is a popular HMI (Human Machine Interface) display that makes it easy to design user interfaces such as buttons, text boxes, sliders, and gauges — all without writing complex graphics code.

The STM32 microcontroller is known for its high performance and low power consumption. By combining STM32 with a Nextion display and programming it in Arduino IDE, we get both powerful control and easy development.

Note:The Nextion display comes with its own Arduino library, but it’s quite memory-heavy and complex to use. To keep things simple and efficient, we’ll communicate with the display using USART (RX/TX) instead of relying on any library.

In this project, we’ll work in two parts — first, we’ll design and program the Nextion display interface, and then we’ll handle the STM32 (Arduino) programming side to exchange data with the display.

🧰 Required Components

• STM32 development board (e.g., STM32F103C8 “Blue Pill”)
• Nextion Display (any size: 2.4", 2.8", 3.2", 5", etc.)
• USB to Serial Converter (for uploading code)
• Jumper Wires

Part-I Nextion Display

If you’re new to the Nextion Editor, check out this guide — it covers everything you need to know about the Nextion display for beginners. Once you’re familiar with it, you can create your own screen as shown below.

List Components

• Main Screen Id: p0
• Two Button Id :b0,b1
• Slider Id : h0
• TextBox Id :t0,t1

We are writing code for slider h0 value on textbox t0, and operating Built in LED of STM32f103 on PC13 GPIO PIN using button b0 and b1.

First we set baudrate for nextion display to communicate Page0 : postinitialize Event bauds=9600

Upload Project HMI file using TTL Serial to USB Adapter

Upload .hmi file to nextion display using TTL to USB converter.

Part-II STM32 MCU Programming using Arduino IDE

First, we have to install stm32 board in Arduino IDE for that first there are following steps

1Install Board

download STM32 board manager for Arduino IDE, open your file menu and select preference option copy following link "http://dan.drown.org/stm32duino/package_STM32duino_index.json" on Additioal Boards Manager URL , Click on OK Button. As you can see in below figure.

2 Setting Board

Now, open the Tools menu and navigate to Board → Boards Manager. A new dialog box will appear — type “STM32” in the search bar. You’ll see a list of all available STM32 series boards. Select the one that matches your hardware; here, we’re using the STM32F1xx Series. Finally, click Install to add it to the Arduino IDE.

Install nextion library , click on link and download library

3Configure with sTM32

It’s time to configure library for using it with board STM32 board. As this STM32 has 3 serials we will configure for

• – dbSerial enabled
• – nexSerial to use our hardware serial Serial2

Edit NexConfig.h

Make sure Following line is not commented

#define DEBUG_SERIAL_ENABLE

then locate the line defining nexSerial ,Please be insure it is Serial2

#define nexSerial Serial2

Edit NexHardware.cpp

locate the nexInit() function, here we configure the baudrate for Serial Monitor and Nextion.We will use the Serial Monitor and set its baudrate high (no need to waste more MCU time than is needed), then we will also need to configure for Nextion. We have chosen 115200 baud in our requirements, so locate the line

        dbSerial.begin(9600); 
  nexSerial.begin(9600);
      

change these to our 250000/115200 baud

        dbSerial.begin(250000); 
   nexSerial.begin(115200);
      

Edit Nextion.h

locate the line

#include NexUpload.h

ensure it is commented out or removed from this include list

//#include NexUpload.h

In the library folder rename NexUpload files

• rename NexUpload.h to NexUpload.h.txt
• rename NexUpload.cpp to NexUpload.cpp.txt

Finally, we need to pull stdlib utoa and ltoa functions in

Edit NexObject.h

locate the line

#include "Arduino.h"

insert the next 3 lines after this line

 #include "stdlib.h"
extern "C" char* utoa(int a, char* buffer, unsigned char radix);
extern "C" char* ltoa(int a, char* buffer, unsigned char radix);
      
       

If you want to skip configuration of nextion library for STM32 , I have done , it just click on below link and download it , and add to library to Arduino IDE

Coding part

All configuration is ready !!!! Lets start coding......

Once the GUI is ready, you need to write the STM32 MCU side code so that the Nextion can interact with the STM32 and vice-versa. Writing code to interact with the Nextion display is not straightforward for beginners, but it also isn’t as complicated as it may seem.

The first thing you should do is to take note of your components in the GUI that will interact with the Arduino and take note of their ID, names and page. Here’s a table of all the components the code will interact to (your components may have a different ID depending on the order you’ve added them to the GUI).

Object Name	Page No	Object Id	Object Name
Textbox	0	1	t0
Slider	0	2	h0
Button -ON	0	4	b0
Button -OFF	0	5	b1

Code setting:

Include Nextion Library to project Add

#include "NexUpload.h"

First need to take hardware Serial for communicate with Nextion Display.

HardwareSerial Serial1(PA10,PA9);

Create Object of Nextion display as per communication need

    
NexButton bOn = NexButton(0, 4, "b0");

NexButton bOff = NexButton(0, 5, "b1");

NexSlider h0 = NexSlider(0, 2, "h0");


NexText t0 = NexText(0,1,"t0")
    

create nextion lister list as which object have touch action required

     NexTouch *nex_listen_list[] =

 {

  &bOn,

  &bOff,

  &h0,

  NULL


};
     
      

After touch object call calback function for all object Whole Program is here....

After touch object call calback function for all object Whole Program is here....

Download Code