Random Nerd Tutorials
Shares

Nextion Display with ESP8266 – Touchscreen User Interface for Node-RED

Shares

This project shows how you can build a touchscreen user interface for Node-RED with the Nextion display and the ESP8266 to control your electronics appliances. The aim of this project is being able to control your home automation system through the Nextion display without the need to go to your smartphone or your computer to access your Node-RED user interface, while always having the Node-RED Dashboard updated.

First, watch the video demonstration


Prerequisites

Other helpful resources:

Project Overview

You’ll create a physical Node-RED interface with the Nextion display to control four different outlets. Take a look at the figure below:

  • The Nextion user interface controls four different outputs.
  • ESP8266 #1 controls Outlet #1 and Outlet#2 using a 433 MHz transmitter. This ESP8266 is also connected to the Nextion display.
  • ESP8266 #2 controls two LEDs called Workbench and Top light. The idea is that you replace these two LEDs with useful outputs like a relay, or a SONOFF smart switch, for example.
  • When you turn an output ON using the Nextion display, the corresponding state is automatically updated in the Node-RED Dashboard.
  • You can also control all these outputs using the Node-RED Dashboard.

How does the project work?

The figure below illustrates how this project works in 4 steps.

Let’s imagine you want to turn Outlet #1 on.

1) When you tap the Outlet #1 ON button, the Nextion display sends information to the ESP8266 via serial communication, so that it knows this button was tapped.

2) The ESP and the Raspberry Pi communicate with each other using MQTT communication protocol.

The Raspberry Pi has the Mosquitto broker installed, that receives all the MQTT messages and sends them to the devices subscribed to a particular topic.

When you tap the ON button on the Nextion display, the ESP publishes a “true” message on the topic office/outlet1/buttonState.

3) The Outlet #1 button on the Node-RED is subscribed to this topic, and will receive that message. When it receives that message, it changes the corresponding button state to ON. When this happens, the Node-RED publishes a message on the topic office/outlet1.

4) The ESP is subscribed to this topic, so it knows Node-RED has changed the button state to ON. The ESP8266, then,  sends a 433 MHz signal using a 433 MHz transmitter to turn Outlet #1 on.

cloud-download

This process works similarly to control all the other outputs.

Parts Required

To complete this project, you’ll need to gather a few parts:

You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!

Creating the Nextion User Interface

We’ve built the user interface for the 3.2” Nextion basic model. If you’re using a Nextion display with a different size you need to make some changes to the user interface to make it work for your specific model – so you need to edit the .HMI file and generate a new .TFT file.

Downloading the resources

Here’s all the resources you need to build the GUI:

  • .HMI file (this file can be imported into the Nextion Editor to edit the GUI);
  • background image used in the user interface;
  • .TFT file (this file should be uploaded to the Nextion display, this is the file that the display runs);

Click here to download all the files.

If you want to learn how to build or customize the Nextion user interface read: Nextion Display with Arduino – Getting Started to learn how to use the Nextion Editor.

Compiling and uploading code to the Nextion display

If you’re using the 3.2” Nextion basic model, you can directly upload the .TFT file to the Nextion display.

If you’re using a display with a different size, you need to make some changes to the user interface appearance. In the Nextion Editor software, go to File > Open and select the .HMI file provided. Then, make the necessary changes. You can use the Debug tool on the Nextion Editor, to preview how the interface will look when rendered.

To upload the .TFT file to the Nextion display you need a microSD card formatted as FAT32. Follow the next steps to upload the code to the Nextion display:

1. Copy the .TFT file corresponding to the final version of your user interface.

2. Paste that file in the microSD card (note: the microSD card should have been previously formatted as FAT32);

3. Insert the microSD card on the Nextion display and plug power.

4. You should see a message on the display saying the code is being uploaded.

5. When it is ready, it should display the following message:

6. Remove the power from the Nextion display, and unplug the microSD card.

7. Apply power again, and you should see the interface you’ve built in the Nextion Editor on your Nextion display.

ESP8266 #1 – Schematics

Wire an ESP8266 to the Nextion display and to the 433MHz transmitter by following the schematic in the following figure.

  • The Nextion display TX pin should be connected to the ESP8266 RX pin.
  • The Nextion display RX pin should be connected to the ESP8266 TX pin.
  • The 433 MHz transmitter data pin is connected to the ESP8266 GPIO 5 (D1 pin).
  • The 433 MHz transmitter VCC pin is connected to the ESP8266 3V3 pin.

ESP8266 #2 – Schematics

Wire two LEDs to the other ESP8266, as shown in the circuit diagram below.

  • The red LED is connected to GPIO 5 (D1 pin).
  • The green LED is connected to GPIO 4 (D2 pin).

Decoding the Sockets RF Signals

To control your sockets through 433 MHz signals, you need to decode the signals that turn the sockets on and off. Read the following post to see how to decode and send 433 MHz RF signals with the Arduino.

Code

There is a different sketch you need to upload for each ESP8266. Make sure you make the necessary changes to each code to make them work for you.

Note: Before uploading any code, you need to make sure the Nextion library for the Arduino IDE is properly configured to work with the ESP8266.

Configuring the Nextion Library for the ESP8266

Having the Nextion library installed in your Arduino IDE, you need to make some changes to make it work with your ESP8266.

1. In your Arduino libraries folder, open the ITEADLIB_Arduino_Nextion folder

2. There should be a NexConfig.h file – open that file.

3. Comment line 27, so that it stays as follows:

//#define DEBUG_SERIAL_ENABLE

4. Comment line 32:

//#define dbSerial Serial

5. Change line 37, so that you have the following:

#define nexSerial Serial

6. Save the NexConfig.h file.

7. Here’s the final result:

ESP8266 #1 – Code

Upload the following code to ESP8266 number #1. You need to make the following changes:

1. Add your SSID, password, and MQTT broker IP address

2. Add the RF codes to turn your outlets on and off. If you haven’t decoded the RF signals to turn the outlets on and off, please follow this tutorial: Decoding RF signals.

3. You might need to change the ESP8266 device name

4. You can also customize the MQTT topics that your ESP publishes or subscribes

Important: to upload code to your ESP8266, you must remove the TX and RX cables that are connected to the Nextion display. 

ESP8266 #2 – Code

Upload the following code to the ESP8266 number #2. Don’t forget to edit the code to add your SSID, password, and MQTT broker IP address:

Creating the Node-RED Application

Having both ESP boards with the code uploaded, it’s time to create your Node-RED flow. You should have Node-RED and Node-RED Dashboard installed on your Raspberry Pi. If not, please read: Getting Started with Node-RED dashboard to follow the instructions to install Node-RED dashboard.

Starting Node-RED

To start Node-RED, enter the following in the Terminal window:

pi@raspberry:~ $ node-red-start

To access Node-RED, open a tab in any browser on the local network and type the following:

http://Your_RPi_IP_address:1880

You should replace Your_RPi_IP_address with your Raspberry Pi IP address. If you don’t know your Raspberry Pi IP address, in the Terminal enter:

pi@raspberry:~ $ hostname -I

Creating the Node-RED Flow

You can import the Node-RED flow provided an then make changes, if needed.

To import the Node-RED flow, go the Github repository or click the figure below to see the raw file, and copy the code provided.

Next, in the Node-RED window, at the top right corner, select the menu, and go to Import Clipboard.

Then, paste the code provided and click Import.

Here’s the Node-RED flow you should get:

You have four different buttons to control the four different outputs. Each button is subscribed to a specific topic in which the ESP8266 #1 pusblishes messages to change the buttons’ state on Node-RED.

Each Node-RED button publishes on a topic that the ESP8266 #1 and ESP8266 #2 are subscribed to, so that they know when to change the outputs state.

Node-RED Dashboard

All widgets are grouped inside the Outputs group within the Office tab.

Accessing your Node-RED Using Interface

Go to http://Your_RPi_IP_address:1880/UI, and you should see the Node-RED user interface.

3D Printed Enclosure

To give this project a finished look, I’ve 3D printed an enclosure for the 3.2” Nextion display.

The enclosure has enough space to fit the display, the ESP8266 and the 433MHz transmitter.

You can download the .STL file for the Nextion housing for 3.5 inch. Note that for this project, I’ve used the Nextion 3.2”, so you need to resize those files to fit the Nextion 3.2” display.

The enclosure was printed using the Creality 3D CR–10 3D Printer – you can read my full review here.

Demonstration

With everything ready, you should be able to control your outputs by tapping the buttons on the Nextion display.

When you tap a button on the Nextion display, the Node-RED Dashboard updates instantly.

Watch the video at the beginning of the page, to see this project in action.

Wrapping Up

We hope you’ve found this project useful. After learning the concepts in this project, you can customize it to control practically anything you like with Node-RED using the Nextion display interface.

If you like this project, you’ll certainly like:

Thanks for reading.


Learn ESP32 with Arduino IDE

This our complete guide to program the ESP32 with Arduino IDE, including projects, tips, and tricks! The registrations are open, so SIGN UP NOW »

Leave a Comment:

Add Your Reply

⏰ Registrations are open ⏰
Sign up for "Learn ESP32 with Arduino IDE" Course