STEP 1 / 6ESP + IOT

Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266

434.Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266. This project will show you how to build a touchscreen user interface for Node-RED using the Nexti…

Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266
PROJECT#434
TRACKIoT
PARTS11
STAGES06
STEP 1 / 6 · Overview

Know the mission before touching a wire.

Understand what you are making, prepare the right tools, and make the workbench safe.

01

Project details

Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266 is a iot project. 434.Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266. This project will show you how to build a touchscreen user interface for Node-RED using the Nexti…

Source pages
1059-1065
Named parts
11
Build goal
Working, tested prototype
02

Tools you need

  • Digital multimeter
  • Wire stripper and side cutters
  • Soldering iron with a fine tip
  • Current-limited bench supply
  • Computer with a data-capable USB cable

Use eye protection, good lighting, and a clean insulated surface throughout the build.

03

Safety precautions

  • Disconnect every power source before changing a connection.
  • Check component polarity, pinout, and supply voltage twice.
  • Use a current limit for the first power-up.
  • Keep liquids, loose metal, and uninsulated wires away from the bench.
Ready to continue?
STEP 2 / 6 · Parts library

Gather, identify, and understand every part.

Use the standardized inventory, then open What's this? to learn each part's role, advantages, limitations, handling, and specifications.

NAMED PROJECT INVENTORY11 PART LINES
PARTTYPEQTYREADY
MDevelopment Board 3.2" Nextion display basic model – read moreMODULE1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266MODULE LEARNING VIEW

Development Board 3.2" Nextion display basic model – read more

An output component turns an electrical control signal into light, sound, motion, switching, or displayed information.

What it does here

It presents the circuit result or acts on the physical world.

Buy / compare this part

Advantages

  • Makes system state visible
  • Can be tested separately
  • Supports clear troubleshooting

Limitations

  • Loads may exceed controller current
  • Polarity or driver direction can matter
  • Inductive loads create voltage spikes

Handling

  • Use the documented driver stage
  • Check polarity and load current
  • Add flyback protection for inductive loads

Specifications to verify

  • Use the exact model, value, package, and rating listed for Development Board 3.2" Nextion display basic model – read more; similar-looking parts are not always interchangeable.
  • Confirm voltage, current, polarity, interface, driver requirements, and duty cycle.
Mabout it here. Purchasing advice for the Nextion displayMODULE1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266MODULE LEARNING VIEW

about it here. Purchasing advice for the Nextion display

An output component turns an electrical control signal into light, sound, motion, switching, or displayed information.

What it does here

It presents the circuit result or acts on the physical world.

Buy / compare this part

Advantages

  • Makes system state visible
  • Can be tested separately
  • Supports clear troubleshooting

Limitations

  • Loads may exceed controller current
  • Polarity or driver direction can matter
  • Inductive loads create voltage spikes

Handling

  • Use the documented driver stage
  • Check polarity and load current
  • Add flyback protection for inductive loads

Specifications to verify

  • Use the exact model, value, package, and rating listed for about it here. Purchasing advice for the Nextion display; similar-looking parts are not always interchangeable.
  • Confirm voltage, current, polarity, interface, driver requirements, and duty cycle.
PcontrolPART1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266PART LEARNING VIEW

control

A named project component whose exact role is defined by the source circuit and build guide.

What it does here

It performs a documented electrical, control, interface, or construction function in this project.

Buy / compare this part

Advantages

  • Selected for this project
  • Can be checked independently
  • Supports modular troubleshooting

Limitations

  • Substitutes may differ
  • Generic names can hide variants
  • Pinouts and ratings vary

Handling

  • Compare the received part with the source
  • Keep it labelled
  • Do not force connectors or adjusters

Specifications to verify

  • Use the exact model, value, package, and rating listed for control; similar-looking parts are not always interchangeable.
  • Confirm dimensions, ratings, connection method, polarity, and environmental limits.
PTransmitter and receiver operating at 433 MHzPART1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266PART LEARNING VIEW

Transmitter and receiver operating at 433 MHz

A named project component whose exact role is defined by the source circuit and build guide.

What it does here

It performs a documented electrical, control, interface, or construction function in this project.

Buy / compare this part

Advantages

  • Selected for this project
  • Can be checked independently
  • Supports modular troubleshooting

Limitations

  • Substitutes may differ
  • Generic names can hide variants
  • Pinouts and ratings vary

Handling

  • Compare the received part with the source
  • Keep it labelled
  • Do not force connectors or adjusters

Specifications to verify

  • Use the exact model, value, package, and rating listed for Transmitter and receiver operating at 433 MHz; similar-looking parts are not always interchangeable.
  • Confirm dimensions, ratings, connection method, polarity, and environmental limits.
Px LEDsPART1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266PART LEARNING VIEW

x LEDs

A named project component whose exact role is defined by the source circuit and build guide.

What it does here

It performs a documented electrical, control, interface, or construction function in this project.

Buy / compare this part

Advantages

  • Selected for this project
  • Can be checked independently
  • Supports modular troubleshooting

Limitations

  • Substitutes may differ
  • Generic names can hide variants
  • Pinouts and ratings vary

Handling

  • Compare the received part with the source
  • Keep it labelled
  • Do not force connectors or adjusters

Specifications to verify

  • Use the exact model, value, package, and rating listed for x LEDs; similar-looking parts are not always interchangeable.
  • Confirm dimensions, ratings, connection method, polarity, and environmental limits.
Presistors with 330 Ohm eachPART1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266PART LEARNING VIEW

resistors with 330 Ohm each

A named project component whose exact role is defined by the source circuit and build guide.

What it does here

It performs a documented electrical, control, interface, or construction function in this project.

Buy / compare this part

Advantages

  • Selected for this project
  • Can be checked independently
  • Supports modular troubleshooting

Limitations

  • Substitutes may differ
  • Generic names can hide variants
  • Pinouts and ratings vary

Handling

  • Compare the received part with the source
  • Keep it labelled
  • Do not force connectors or adjusters

Specifications to verify

  • Use the exact model, value, package, and rating listed for resistors with 330 Ohm each; similar-looking parts are not always interchangeable.
  • Confirm dimensions, ratings, connection method, polarity, and environmental limits.
BJumper wires for the breadboardBUILD1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266BUILD LEARNING VIEW

Jumper wires for the breadboard

A named project component whose exact role is defined by the source circuit and build guide.

What it does here

It performs a documented electrical, control, interface, or construction function in this project.

Buy / compare this part

Advantages

  • Selected for this project
  • Can be checked independently
  • Supports modular troubleshooting

Limitations

  • Substitutes may differ
  • Generic names can hide variants
  • Pinouts and ratings vary

Handling

  • Compare the received part with the source
  • Keep it labelled
  • Do not force connectors or adjusters

Specifications to verify

  • Use the exact model, value, package, and rating listed for Jumper wires for the breadboard; similar-looking parts are not always interchangeable.
  • Confirm dimensions, ratings, connection method, polarity, and environmental limits.
PDeveloping the User Interface for the NextionPART1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266PART LEARNING VIEW

Developing the User Interface for the Nextion

A named project component whose exact role is defined by the source circuit and build guide.

What it does here

It performs a documented electrical, control, interface, or construction function in this project.

Buy / compare this part

Advantages

  • Selected for this project
  • Can be checked independently
  • Supports modular troubleshooting

Limitations

  • Substitutes may differ
  • Generic names can hide variants
  • Pinouts and ratings vary

Handling

  • Compare the received part with the source
  • Keep it labelled
  • Do not force connectors or adjusters

Specifications to verify

  • Use the exact model, value, package, and rating listed for Developing the User Interface for the Nextion; similar-looking parts are not always interchangeable.
  • Confirm dimensions, ratings, connection method, polarity, and environmental limits.
MESP8266 #1 – SchematicsMODULE1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266MODULE LEARNING VIEW

ESP8266 #1 – Schematics

A programmable controller that reads inputs, makes decisions, and drives the project's outputs.

What it does here

It is the control centre and must use the documented board, pin map, supply, and logic level.

Buy / compare this part

Advantages

  • Reprogrammable and reusable
  • Large learning ecosystem
  • Complex behaviour remains changeable

Limitations

  • GPIO voltage and current are limited
  • Some pins affect boot or communication
  • Loads normally need a driver

Handling

  • Disconnect power before rewiring
  • Avoid static discharge
  • Never power motors, relays, or pumps directly from GPIO

Specifications to verify

  • Use the exact model, value, package, and rating listed for ESP8266 #1 – Schematics; similar-looking parts are not always interchangeable.
  • Confirm operating voltage, logic level, pinout, memory, USB interface, and maximum GPIO current.
MESP8266 #2 – SchematicsMODULE1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266MODULE LEARNING VIEW

ESP8266 #2 – Schematics

A programmable controller that reads inputs, makes decisions, and drives the project's outputs.

What it does here

It is the control centre and must use the documented board, pin map, supply, and logic level.

Buy / compare this part

Advantages

  • Reprogrammable and reusable
  • Large learning ecosystem
  • Complex behaviour remains changeable

Limitations

  • GPIO voltage and current are limited
  • Some pins affect boot or communication
  • Loads normally need a driver

Handling

  • Disconnect power before rewiring
  • Avoid static discharge
  • Never power motors, relays, or pumps directly from GPIO

Specifications to verify

  • Use the exact model, value, package, and rating listed for ESP8266 #2 – Schematics; similar-looking parts are not always interchangeable.
  • Confirm operating voltage, logic level, pinout, memory, USB interface, and maximum GPIO current.
BDecoding the RF Signals from the SocketsBUILD1
What's this?Image, role, pros, cons, handling & specifications
Circuit Atlas themed schematic for Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266BUILD LEARNING VIEW

Decoding the RF Signals from the Sockets

A named project component whose exact role is defined by the source circuit and build guide.

What it does here

It performs a documented electrical, control, interface, or construction function in this project.

Buy / compare this part

Advantages

  • Selected for this project
  • Can be checked independently
  • Supports modular troubleshooting

Limitations

  • Substitutes may differ
  • Generic names can hide variants
  • Pinouts and ratings vary

Handling

  • Compare the received part with the source
  • Keep it labelled
  • Do not force connectors or adjusters

Specifications to verify

  • Use the exact model, value, package, and rating listed for Decoding the RF Signals from the Sockets; similar-looking parts are not always interchangeable.
  • Confirm dimensions, ratings, connection method, polarity, and environmental limits.
Ready to continue?
STEP 4 / 6 · Source code

Confirm the hardware-only control path.

This project does not include firmware in the source. The circuit itself provides the required behaviour.

01

How to connect

  1. Match every controller label to the circuit view and source pin map.
  2. Join grounds before signal wires when separate low-voltage supplies are used.
  3. Keep motors, relays, pumps, and other loads on a suitable driver and external supply.

Common mistakes

Reversed VCC/GND, board-label versus GPIO-number confusion, missing common ground, and charge-only USB cables.

Troubleshoot

Disconnect loads, continuity-test one path at a time, then test with a current limit.

02

Software preparation

No IDE, board package, library, or firmware upload is required for this project.

If you add a programmable controller as an extension, document its pin map separately.

03

How to upload code

The original design is implemented entirely in hardware, so proceed after verifying the circuit and supply.

Ready to continue?
STEP 5 / 6 · Build

Assemble, deploy, test, and troubleshoot.

Use the complete source notes in build order, then pass the final checks before calling the project finished.

ASSEMBLY

Build in functional stages

  • Power and regulation
  • Controller or processing stage
  • Inputs and sensors
  • Outputs and loads
  • Enclosure and strain relief
TEST

Power up safely

  • Inspect unpowered continuity first
  • Apply the lowest safe current limit
  • Measure supply rails before signals
  • Add one load at a time
  • Record expected and actual results
TROUBLESHOOT

Work from simple to complex

  • Confirm power, ground, polarity, and orientation
  • Compare each pin with the source
  • Test inputs separately from outputs
  • Replace only one variable at a time
  • Power off before every correction
PROJECT-SPECIFIC BUILD NOTES

Follow the documented instructions.

These notes come from this project's source and remain in their original order.

01

Project overview

Project build note

434.Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266. This project will show you how to build a touchscreen user interface for Node-RED using the Nextion display and the ESP8266 so that you can control the electronic appliances in your home. The goal of this project is to give you the ability to control your home automation system through the Nextion display so that you don't have to use your smartphone or computer to access the Node-RED user interface. This will be accomplished while ensuring that the Node-RED Dashboard is always kept up to date.

02

Project Overview

Project build note

In order to exert control over four distinct outlets, you will construct a physical Node-RED interface using the Nextion display. Take a look at the

03

chart that can be found below

Project build note

The user interface of Nextion controls four distinct outputs. Through the use of a 433 MHz transmitter. ESP8266 #1 controls Outlet #1 as well as Outlet #2. Additionally, this ESP8266 is connected to the display of the Nextion. ESP8266 #2 is in charge of controlling two LEDs that are referred to as the Workbench and Top light. The plan is for you to replace these two LEDs with other outputs that are of use to you, such as a relay or a SONOFF smart switch, for example. When you use the Nextion display to turn an output ON, the state of the corresponding node in the Node-RED Dashboard is automatically updated to reflect the change. The Node-RED Dashboard also gives you the ability to exercise control over all of these outputs.

How does the project work? The steps involved in completing this project are outlined in the figure below. 1) When you tap the Outlet #1 ON button, the Nextion display communicates with the ESP8266 via serial communication to let it know that the button was tapped. This lets the ESP8266 know which button was tapped. 2) The ESP and Raspberry Pi are able to communicate with one another thanks to a communication protocol known as MQTT. The Raspberry Pi is

equipped with the Mosquitto broker, which is responsible for collecting all of the MQTT messages and distributing them to the various devices that have subscribed to a specific topic. The ESP will publish a "true" message on the topic office/outlet1/buttonState whenever you tap the ON button that is displayed on the Nextion display. 3) The Node-RED message will be sent to the Outlet #1 button, which is subscribed to this topic and will therefore receive it. When it receives that message, it toggles the state of the button that corresponds to it so that it is ON. When something like this takes place, the Node-RED sends out a message with the subject office/outlet1. 4) Since the ESP is subscribed to this topic, it is aware that Node-RED has switched the button state to the ON position. In order to activate Outlet #1, the ESP8266 initiates the transmission of a signal at 433 MHz via a 433 MHz transmitter. Controlling any of the other outputs follows the same procedure as described here.

04

Parts Required

Project build note

The Raspberry Pi 2x ESP8266 – read more about them on the Best ESP8266 Wi-Fi Development Board 3.2" Nextion display basic model – read more about it here. Purchasing advice for the Nextion display MicroSD card 433 MHz RF Plugs that are operated by remote control Transmitter and receiver operating at 433 MHz 2x LEDs 2 resistors with 330 Ohm each Jumper wires for the breadboard Developing the User Interface for the Nextion

The user interface for the 3.2-inch Nextion basic model has been developed by our team. If you are utilizing a Nextion display of a different size, you will need to make some modifications to the user interface in order for it to function properly for your particular model. In order to do this, you will need to edit the.HMI file and produce a new.TFT file.

ESP8266 #1 – Schematics By following the schematic in the following figure, you can successfully connect an ESP8266 to a Nextion display as well as a 433MHz transmitter. It is necessary to connect the RX pin of the ESP8266 to the TX pin of the Nextion display. It is necessary to connect the RX pin of the Nextion display to the TX pin of the ESP8266.The data pin of the 433 MHz transmitter is connected to the

GPIO 5 of the ESP8266 (D1 pin). A connection has been made between the VCC pin of the 433 MHz transmitter and the 3V3 pin of the ESP8266. ESP8266 #2 – Schematics Connect two LEDs to the second ESP8266 in the manner denoted by the accompanying circuit diagram. GPIO 5 is the point of connection for the red LED (D1 pin). GPIO 4 is the point of connection for the green LED (D2 pin). Decoding the RF Signals from the Sockets Decoding the signals that cause the sockets to turn on and off is necessary if you want to use 433 MHz signals to control the sockets in your device. Code: Each individual ESP8266 device requires a unique sketch to be uploaded by the user. Be sure to make the necessary adjustments to each code in order to get them to function properly for you. Note: Before you upload any code, check that the Nextion library for the Arduino IDE is properly configured to work with the ESP8266. This must be done before you upload any code.

05

Demonstration

Project build note

After setting up everything, you should be able to control your outputs by tapping the buttons on the display of the Nextion. Instant updates are made to the Node-RED Dashboard whenever you tap one of the buttons displayed on the Nextion. We sincerely hope that you have found this project to be beneficial. After gaining an understanding of the concepts presented in this project, you will be able to modify it to control virtually anything you want by utilizing the Nextion display interface and Node-RED.

Ready to continue?
PROJECT ACHIEVED

You built Touchscreen user interface for Node-RED provided by the Nextion Display with ESP8266.

You followed the full workflow from understanding the mission to testing the finished project. That is a real engineering achievement - well done.

ESP8266 Voltage Regulator (LiPo and Li-ion Batteries) project thumbnail featuring Lithium-ion or lithium-polymer batteries, along with a battery holder, Low-dropout regulator, also known as an LDO (MCP1700-3302E), uF electrolytic capacitor 100nF ceramic capacitor
NEXT IOT ADVENTURE

ESP8266 Voltage Regulator (LiPo and Li-ion Batteries)

Ready to reuse what you learned in another project from the same track?

Start this project
Browse all 500 projects