{"id":48713,"date":"2017-12-21T15:25:14","date_gmt":"2017-12-21T15:25:14","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=48713"},"modified":"2019-04-02T10:23:25","modified_gmt":"2019-04-02T10:23:25","slug":"nextion-display-with-esp8266-touchscreen-user-interface-for-node-red","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/nextion-display-with-esp8266-touchscreen-user-interface-for-node-red\/","title":{"rendered":"Nextion Display with ESP8266 &#8211; Touchscreen User Interface for Node-RED"},"content":{"rendered":"<p>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.<!--more--> 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.<\/p>\n<h2>First, watch the video demonstration<\/h2>\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/CjZeMiXYrWU?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<h2>Prerequisites<\/h2>\n<ul>\n<li>You should have the Raspbian operating system installed in your Raspberry Pi \u2013\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/installing-raspbian-lite-enabling-and-connecting-with-ssh\/\">read Installing Raspbian Lite, Enabling and Connecting with SSH<\/a>.<\/li>\n<li>You need\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/getting-started-with-node-red-on-raspberry-pi\/\">Node-RED installed on your Pi<\/a>\u00a0and\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/getting-started-with-node-red-dashboard\/\">Node-RED Dashboard<\/a>.<\/li>\n<li>You should have Mosquitto broker installed on your Raspberry Pi &#8211; read\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/how-to-install-mosquitto-broker-on-raspberry-pi\/\" target=\"_blank\" rel=\"noopener noreferrer\">How to Install Mosquitto Broker on Raspberry Pi<\/a>.<\/li>\n<li>You should have <a href=\"https:\/\/nextion.itead.cc\/resources\/download\/nextion-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nextion Editor<\/a> installed and the <a href=\"https:\/\/github.com\/itead\/ITEADLIB_Arduino_Nextion\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Arduino Nextion Library<\/a> installed on your Arduino IDE &#8211; read\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/nextion-display-with-arduino-getting-started\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nextion Display with Arduino \u2013 Getting Started<\/a>\u00a0for an introduction to the Nextion display.<\/li>\n<\/ul>\n<p><strong>Other helpful resources:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/decode-and-send-433-mhz-rf-signals-with-arduino\/\">Decode and Send 433 MHz RF Signals with Arduino<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/what-is-mqtt-and-how-it-works\/\" rel=\"noopener\">What is MQTT and How It Works<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-and-node-red-with-mqtt\/\" rel=\"noopener\">ESP8266 and Node-RED with MQTT (Publish and Subscribe)<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/rf-433mhz-transmitter-receiver-module-with-arduino\/\" rel=\"noopener\">RF 433MHz Transmitter\/Receiver Module with Arduino<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/esp8266-remote-controlled-sockets\/\">ESP8266 Remote Controlled Sockets<\/a><\/li>\n<\/ul>\n<h2>Project Overview<\/h2>\n<p>You&#8217;ll create a physical Node-RED interface with the Nextion display to control four different outlets. Take a look at the figure below:<\/p>\n<p><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-48767\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-with-esp8266-img.png?resize=519%2C592&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"519\" height=\"592\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-with-esp8266-img.png?w=716&amp;quality=100&amp;strip=all&amp;ssl=1 716w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-with-esp8266-img.png?resize=263%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 263w\" sizes=\"(max-width: 519px) 100vw, 519px\" \/><\/p>\n<ul>\n<li>The Nextion user interface controls four different outputs.<\/li>\n<li>ESP8266 #1 controls Outlet #1 and Outlet#2 using a 433 MHz transmitter. This ESP8266 is also connected to the Nextion display.<\/li>\n<li>ESP8266 #2 controls two LEDs called Workbench and Top light. The idea is that you replace these two LEDs with useful outputs like a\u00a0<a href=\"https:\/\/makeradvisor.com\/tools\/5v-2-channel-relay-module-optocoupler\/\" target=\"_blank\" rel=\"noopener noreferrer\">relay<\/a>, or a <a href=\"https:\/\/makeradvisor.com\/tools\/sonoff-wi-fi-smart-switch\/\" target=\"_blank\" rel=\"noopener noreferrer\">SONOFF smart switch<\/a>, for example.<\/li>\n<li>When you turn an output ON using the Nextion display, the corresponding state is automatically updated in the Node-RED Dashboard.<\/li>\n<li>You can also control all these outputs using the Node-RED Dashboard.<\/li>\n<\/ul>\n<h2>How does the project work?<\/h2>\n<p>The figure below illustrates how this project works in 4 steps.<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter wp-image-48768\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/project-overview-1.png?resize=622%2C769&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"622\" height=\"769\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/project-overview-1.png?w=754&amp;quality=100&amp;strip=all&amp;ssl=1 754w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/project-overview-1.png?resize=243%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 243w\" sizes=\"(max-width: 622px) 100vw, 622px\" \/><\/p>\n<p>Let&#8217;s imagine you want to turn Outlet #1 on.<\/p>\n<p><span style=\"font-weight: 400;\"><strong>1)\u00a0<\/strong>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. <\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>2)\u00a0<\/strong>The ESP and the Raspberry Pi communicate with each other using <a href=\"https:\/\/randomnerdtutorials.com\/what-is-mqtt-and-how-it-works\/\" target=\"_blank\" rel=\"noopener noreferrer\">MQTT communication protocol<\/a>. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Raspberry Pi has the <a href=\"https:\/\/randomnerdtutorials.com\/how-to-install-mosquitto-broker-on-raspberry-pi\/\" target=\"_blank\" rel=\"noopener noreferrer\">Mosquitto broker<\/a> installed, that receives all the MQTT messages and sends them to the devices subscribed to a particular topic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When you tap the ON button on the Nextion display, the ESP publishes a \u201ctrue\u201d message on the topic <strong>office\/outlet1\/buttonState<\/strong>. <\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>3)\u00a0<\/strong>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 <strong>office\/outlet1<\/strong>. <\/span><\/p>\n<p><span style=\"font-weight: 400;\"><strong>4)\u00a0<\/strong>The ESP is subscribed to this topic, so it knows Node-RED has changed the button state to ON. The ESP8266, then,\u00a0 sends a 433 MHz signal using a 433 MHz transmitter to turn Outlet #1 on.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This process works similarly to control all the other outputs.<\/span><\/p>\n<h2>Parts Required<\/h2>\n<p>To complete this project, you&#8217;ll need to gather a few parts:<\/p>\n<ul>\n<li><a href=\"https:\/\/makeradvisor.com\/raspberry-pi-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">Raspberry Pi<\/a> &#8211; read <a href=\"https:\/\/makeradvisor.com\/best-raspberry-pi-3-starter-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">Best Raspberry Pi Starter kits<\/a><\/li>\n<li>2x <a href=\"https:\/\/makeradvisor.com\/tools\/esp8266-esp-12e-nodemcu-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">ESP8266<\/a>\u00a0&#8211; read\u00a0<a href=\"https:\/\/makeradvisor.com\/best-esp8266-wi-fi-development-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">Best ESP8266 Wi-Fi Development Board<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/nextion-hmi-resistive-touchscreen-display\/\" target=\"_blank\" rel=\"noopener noreferrer\">3.2&#8221; Nextion display basic model<\/a>\u00a0&#8211; read <a href=\"https:\/\/makeradvisor.com\/nextion-hmi-resistive-touchscreen-display\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nextion display buying guide<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/microsd-card-raspberry-pi-16gb-class-10\/\" target=\"_blank\" rel=\"noopener noreferrer\">MicroSD card<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/rf-remote-controlled-sockets-433mhz\/\" target=\"_blank\" rel=\"noopener noreferrer\">433 MHz RF Remote controlled sockets<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/433mhz-receiver-transmitter-module\/\" target=\"_blank\" rel=\"noopener noreferrer\">433 MHz transmitter\/receiver<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/3mm-5mm-leds-kit-storage-box\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x LEDs<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x 330 Ohm resistors<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/mb-102-solderless-breadboard-830-points\/\" target=\"_blank\" rel=\"noopener noreferrer\">Breadboard<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/jumper-wires-kit-120-pieces\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jumper wires<\/a><\/li>\n<\/ul>\n<p>You can use the preceding links or go directly to <a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\">MakerAdvisor.com\/tools<\/a> to find all the parts for your projects at the best price!<\/p><p style=\"text-align:center;\"><a href=\"https:\/\/makeradvisor.com\/tools\/?utm_source=rnt&utm_medium=post&utm_campaign=post\" target=\"_blank\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/10\/header-200.png?w=1200&#038;quality=100&#038;strip=all&#038;ssl=1\"><\/a><\/p>\n<h2>Creating the Nextion User Interface<\/h2>\n<p>We&#8217;ve built the user interface for the <a href=\"https:\/\/makeradvisor.com\/nextion-hmi-resistive-touchscreen-display\/\" target=\"_blank\" rel=\"noopener noreferrer\">3.2&#8221; Nextion basic model<\/a>. If you&#8217;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 &#8211; so you need to edit the .HMI file and generate a new .TFT file.<\/p>\n<h3>Downloading the resources<\/h3>\n<p>Here&#8217;s all the resources you need to build the GUI:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/Nextion-Project-Example-ESP8266\/raw\/master\/ESP8266_Nextion_3_2.HMI\" target=\"_blank\" rel=\"noopener noreferrer\"><strong><em>.<\/em><\/strong><strong><em>HMI<\/em><\/strong><strong>\u00a0<\/strong>file<\/a>\u00a0(this file can be imported into the Nextion Editor to edit the GUI);<\/li>\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/Nextion-Project-Example-ESP8266\/raw\/master\/background.png\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>background image<\/strong><\/a>\u00a0used in the user interface;<\/li>\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/Nextion-Project-Example-ESP8266\/raw\/master\/ESP8266_Nextion_3_2.tft\" target=\"_blank\" rel=\"noopener noreferrer\"><strong><em>.TFT<\/em>\u00a0<\/strong>file<\/a>\u00a0(this file should be uploaded to the Nextion display, this is the file that the display runs);<\/li>\n<\/ul>\n<p><strong><a href=\"https:\/\/github.com\/RuiSantosdotme\/Nextion-Project-Example-ESP8266\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to download all the files.<\/a><\/strong><\/p>\n<p>If you want to learn how to build or customize the Nextion user interface read:\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/nextion-display-with-arduino-getting-started\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nextion Display with Arduino \u2013 Getting Started<\/a>\u00a0to learn how to use the Nextion Editor.<\/p>\n<h3>Compiling and uploading code to the Nextion display<\/h3>\n<p>If you&#8217;re using the 3.2&#8221; Nextion basic model, you can directly upload the .TFT file to the Nextion display.<\/p>\n<p>If you&#8217;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 <strong>File<\/strong> &gt; <strong>Open<\/strong> 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.<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter size-full wp-image-48769\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-editor-debug-window.png?resize=657%2C543&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"657\" height=\"543\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-editor-debug-window.png?w=657&amp;quality=100&amp;strip=all&amp;ssl=1 657w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-editor-debug-window.png?resize=300%2C248&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 657px) 100vw, 657px\" \/><\/p>\n<p>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:<\/p>\n<p><strong>1.<\/strong> Copy the <em>.TFT<\/em> file corresponding to the final version of your user interface.<\/p>\n<p><strong>2.<\/strong> Paste that file in the microSD card (note: the microSD card should have been previously formatted as FAT32);<\/p>\n<p><strong>3.<\/strong> Insert the microSD card on the Nextion display and plug power.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-48126\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-micro-sd.jpg?resize=501%2C265&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"501\" height=\"265\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-micro-sd.jpg?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-micro-sd.jpg?resize=300%2C159&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/p>\n<p><strong>4.<\/strong> You should see a message on the display saying the code is being uploaded.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-48125\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/copy-sd-card-nextion.jpg?resize=501%2C271&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"501\" height=\"271\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/copy-sd-card-nextion.jpg?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/copy-sd-card-nextion.jpg?resize=300%2C162&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/copy-sd-card-nextion.jpg?resize=280%2C150&amp;quality=100&amp;strip=all&amp;ssl=1 280w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/p>\n<p><strong>5.<\/strong> When it is ready, it should display the following message:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-48127\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/upload-success-nextion.jpg?resize=603%2C261&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"603\" height=\"261\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/upload-success-nextion.jpg?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/upload-success-nextion.jpg?resize=300%2C130&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 603px) 100vw, 603px\" \/><\/p>\n<p><strong>6.<\/strong> Remove the power from the Nextion display, and unplug the microSD card.<\/p>\n<p><strong>7.<\/strong> Apply power again, and you should see the interface you&#8217;ve built in the Nextion Editor on your Nextion display.<\/p>\n<h2>ESP8266 #1 &#8211; Schematics<\/h2>\n<p>Wire an ESP8266 to the Nextion display and to the 433MHz transmitter by following the schematic in the following figure.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48770\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_433_ff.png?resize=1200%2C737&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"1200\" height=\"737\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_433_ff.png?w=1694&amp;quality=100&amp;strip=all&amp;ssl=1 1694w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_433_ff.png?resize=300%2C184&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_433_ff.png?resize=768%2C471&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_433_ff.png?resize=1024%2C629&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<ul>\n<li>The Nextion display TX pin should be connected to the ESP8266 RX pin.<\/li>\n<li>The Nextion display RX pin should be connected to the ESP8266 TX pin.<\/li>\n<li>The 433 MHz transmitter data pin is connected to the ESP8266 GPIO 5 (D1 pin).<\/li>\n<li>The 433 MHz transmitter VCC pin is connected to the ESP8266 3V3 pin.<\/li>\n<\/ul>\n<h2>ESP8266 #2 &#8211; Schematics<\/h2>\n<p>Wire two LEDs to the other ESP8266, as shown in the circuit diagram below.<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_2LEDs.png?quality=100&#038;strip=all&#038;ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-48739\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_2LEDs.png?resize=635%2C417&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"635\" height=\"417\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_2LEDs.png?w=902&amp;quality=100&amp;strip=all&amp;ssl=1 902w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_2LEDs.png?resize=300%2C197&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_ESP8266_2LEDs.png?resize=768%2C504&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 635px) 100vw, 635px\" \/><\/a><\/p>\n<ul>\n<li>The red LED is connected to GPIO 5 (D1 pin).<\/li>\n<li>The green LED is connected to GPIO 4 (D2 pin).<\/li>\n<\/ul>\n<h2>Decoding the Sockets RF Signals<\/h2>\n<p>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 <a href=\"https:\/\/randomnerdtutorials.com\/decode-and-send-433-mhz-rf-signals-with-arduino\/\">how to decode and send 433 MHz RF signals with the Arduino<\/a>.<\/p>\n<h2>Code<\/h2>\n<p>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.<\/p>\n<p><strong>Note<\/strong>: Before uploading any code, you need to make sure the Nextion library for the Arduino IDE is properly configured to work with the ESP8266.<\/p>\n<h3>Configuring the Nextion Library for the ESP8266<\/h3>\n<p>Having the <a href=\"https:\/\/github.com\/itead\/ITEADLIB_Arduino_Nextion\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Nextion library installed in your Arduino IDE<\/a>, you need to make some changes to make it work with your ESP8266.<\/p>\n<p>1. In your Arduino libraries folder, open the<em>\u00a0<strong>ITEADLIB_Arduino_Nextion<\/strong><\/em> folder<\/p>\n<p>2. There should be a <strong><em>NexConfig.h<\/em><\/strong> file &#8211; open that file.<\/p>\n<p>3. Comment line 27, so that it stays as follows:<\/p>\n<pre>\/\/#define DEBUG_SERIAL_ENABLE<\/pre>\n<p>4. Comment line 32:<\/p>\n<pre>\/\/#define dbSerial Serial<\/pre>\n<p>5. Change line 37, so that you have the following:<\/p>\n<pre><strong>#define nexSerial Serial<\/strong><\/pre>\n<p>6. Save the <em>NexConfig.h<\/em> file.<\/p>\n<p>7. Here&#8217;s the final result:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48181\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-next-config-file.jpg?resize=615%2C853&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"615\" height=\"853\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-next-config-file.jpg?w=615&amp;quality=100&amp;strip=all&amp;ssl=1 615w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-next-config-file.jpg?resize=216%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 216w\" sizes=\"(max-width: 615px) 100vw, 615px\" \/><\/p>\n<h3>ESP8266 #1 &#8211; Code<\/h3>\n<p>Upload the following code to ESP8266 number #1. You need to make the following changes:<\/p>\n<p>1. Add your SSID, password, and MQTT broker IP address<\/p>\n<p>2. Add the RF codes to turn your outlets on and off. If you haven&#8217;t decoded the RF signals to turn the outlets on and off, please follow this tutorial: <a href=\"https:\/\/randomnerdtutorials.com\/decode-and-send-433-mhz-rf-signals-with-arduino\/\">Decoding RF signals<\/a>.<\/p>\n<p>3. You might need to change the ESP8266 device name<\/p>\n<p>4. You can also customize the MQTT topics that your ESP publishes or subscribes<\/p>\n<p><strong><span style=\"color: #ff0000;\">Important:<\/span> to upload code to your ESP8266, you must remove the TX and RX cables that are connected to the Nextion display.\u00a0<\/strong><\/p>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at http:\/\/randomnerdtutorials.com  \n*********\/\n\n\/\/ Loading the required libraries\n#include &lt;ESP8266WiFi.h&gt;\n#include &lt;PubSubClient.h&gt;\n#include &quot;Nextion.h&quot;\n#include &lt;RCSwitch.h&gt;\n\n\/\/#include &lt;SoftwareSerial.h&gt;\n\/\/SoftwareSerial mySerial(RX_PIN, TX_PIN); \/\/ RX, TX\n\n\/\/ Change the credentials below, so your ESP8266 connects to your router\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ Change the variable to your Raspberry Pi IP address, so it connects to your MQTT broker\nconst char* mqtt_server = &quot;REPLACE_WITH_YOUR_MQTT_BROKER_IP&quot;;\n\/\/ For example: const char* mqtt_server = &quot;192.168.1.112&quot;;\n\n\/\/ Initialize the espClient. You should change the espClient name if you have multiple ESPs running in your home automation system\nWiFiClient espClient;\nPubSubClient client(espClient);\n\n\/\/ Initialize the RC Switch component\nRCSwitch mySwitch = RCSwitch();\n\n\/\/ Declare a button object [page id:0,component id:1, component name: &quot;b0&quot;]\nNexButton b0on = NexButton(0, 2, &quot;b0on&quot;);\nNexButton b0off = NexButton(0, 4, &quot;b0off&quot;);\nNexButton b1on = NexButton(0, 8, &quot;b1on&quot;);\nNexButton b1off = NexButton(0, 9, &quot;b1off&quot;);\nNexButton b2on = NexButton(0, 10, &quot;b2on&quot;);\nNexButton b2off = NexButton(0, 11, &quot;b2off&quot;);\nNexButton b3on = NexButton(0, 12, &quot;b3on&quot;);\nNexButton b3off = NexButton(0, 13, &quot;b3off&quot;);\n\n\/\/Register a button object to the touch event list  \nNexTouch *nex_listen_list[] = {\n  &amp;b0on,\n  &amp;b0off,\n  &amp;b1on,\n  &amp;b1off,\n  &amp;b2on,\n  &amp;b2off,\n  &amp;b3on,\n  &amp;b3off,\n  NULL\n};\n\n\/\/ Button component push callback function \nvoid b0onPushCallback(void *ptr) {  \n  client.publish(&quot;office\/workbench\/buttonState&quot;, &quot;true&quot;);\n}\nvoid b0offPushCallback(void *ptr) {\n  client.publish(&quot;office\/workbench\/buttonState&quot;, &quot;false&quot;); \n}\nvoid b1onPushCallback(void *ptr) {\n  client.publish(&quot;office\/toplight\/buttonState&quot;, &quot;true&quot;);   \n}\nvoid b1offPushCallback(void *ptr) {\n  client.publish(&quot;office\/toplight\/buttonState&quot;, &quot;false&quot;);    \n}\nvoid b2onPushCallback(void *ptr) {\n  client.publish(&quot;office\/outlet1\/buttonState&quot;, &quot;true&quot;);     \n}\nvoid b2offPushCallback(void *ptr) {\n  client.publish(&quot;office\/outlet1\/buttonState&quot;, &quot;false&quot;);   \n}\nvoid b3onPushCallback(void *ptr) {\n  client.publish(&quot;office\/outlet2\/buttonState&quot;, &quot;true&quot;);   \n}\nvoid b3offPushCallback(void *ptr) {\n  client.publish(&quot;office\/outlet2\/buttonState&quot;, &quot;false&quot;);   \n}\n\n\/\/ Don't change the function below. \n\/\/ This function connects your ESP8266 to your router\nvoid setup_wifi() {\n  delay(10);\n  \/\/ We start by connecting to a WiFi network\n  \/\/mySerial.println();\n  \/\/mySerial.print(&quot;Connecting to &quot;);\n  \/\/mySerial.println(ssid);\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    \/\/mySerial.print(&quot;.&quot;);\n  }\n  \/\/mySerial.println(&quot;&quot;);\n  \/\/mySerial.print(&quot;WiFi connected - ESP IP address: &quot;);\n  \/\/mySerial.println(WiFi.localIP());\n}\n\n\/\/ This function is executed when some device publishes a message to a topic that your ESP8266 is subscribed to\n\/\/ Change the function below to add logic to your program, so when a device publishes a message to a topic that \n\/\/ your ESP8266 is subscribed you can actually do something\nvoid callback(String topic, byte* message, unsigned int length) {\n  \/\/mySerial.print(&quot;Message arrived on topic: &quot;);\n  \/\/mySerial.print(topic);\n  \/\/mySerial.print(&quot;. Message: &quot;);\n  String messageTemp;\n  \n  for (int i = 0; i &lt; length; i++) {\n    \/\/mySerial.print((char)message[i]);\n    messageTemp += (char)message[i];\n  }\n  \/\/mySerial.println();\n  \n  \/\/ Feel free to add more if statements to control more outputs with MQTT\n  \/\/ If a message is received on the topic office\/outlet1, you check if the message is either true or false \n  \/\/ Turns the outlet1 according to the message\n  if(topic==&quot;office\/outlet1&quot;){\n      \/\/mySerial.print(&quot;Changing Outlet 1 to &quot;);\n      if(messageTemp == &quot;true&quot;){\n        mySwitch.send(4527445, 24);\n        \/\/mySerial.print(&quot;On&quot;);\n      }\n      else if(messageTemp == &quot;false&quot;){\n        mySwitch.send(4527444, 24);\n        \/\/mySerial.print(&quot;Off&quot;);\n      }\n  }\n  \/\/ Turns the outlet2 according to the message\n  else if(topic==&quot;office\/outlet2&quot;){\n      \/\/mySerial.print(&quot;Changing Outlet 2 to &quot;);\n      if(messageTemp == &quot;true&quot;){\n        mySwitch.send(4539733, 24);\n        \/\/mySerial.print(&quot;On&quot;);\n      }\n      else if(messageTemp == &quot;false&quot;){\n        mySwitch.send(4539732, 24);\n        \/\/mySerial.print(&quot;Off&quot;);\n      }\n  }\n  \/\/mySerial.println();\n}\n\n\/\/ This function reconnects your ESP8266 to your MQTT broker\n\/\/ Change the function below if you want to subscribe to more topics with your ESP8266 \nvoid reconnect() {\n  \/\/ Loop until we're reconnected\n  while (!client.connected()) {\n    \/\/mySerial.print(&quot;Attempting MQTT connection...&quot;);\n    \/\/ Attempt to connect\n    \/*\n     YOU MIGHT NEED TO CHANGE THIS LINE, IF YOU'RE HAVING PROBLEMS WITH MQTT MULTIPLE CONNECTIONS\n     To change the ESP device ID, you will have to give a new name to the ESP8266.\n     Here's how it looks:\n       client.connect(&quot;ESP1_Office&quot;);\n     Then, for the other ESP:\n       client.connect(&quot;ESP1_Kitchen&quot;);\n      That should solve your MQTT multiple connections problem\n    *\/\n    if(client.connect(&quot;ESP1_Office&quot;)) {\n      \/\/mySerial.println(&quot;connected&quot;); \n      client.subscribe(&quot;office\/outlet1&quot;);  \n      client.subscribe(&quot;office\/outlet2&quot;);             \n    } \n    else {\n      \/\/mySerial.print(&quot;failed, rc=&quot;);\n      \/\/mySerial.print(client.state());\n      \/\/mySerial.println(&quot; try again in 5 seconds&quot;);\n      \/\/ Wait 5 seconds before retrying\n      delay(5000);\n    }\n  }\n}\n\nvoid setup(void) {    \n  \/\/Set the baudrate which is for debug and communicate with Nextion screen\n  nexInit();\n\n  \/\/Register the pop event callback function of the current button component\n  b0on.attachPush(b0onPushCallback, &amp;b0on);\n  b0off.attachPush(b0offPushCallback, &amp;b0off);\n  b1on.attachPush(b1onPushCallback, &amp;b1on);\n  b1off.attachPush(b1offPushCallback, &amp;b1off);\n  b2on.attachPush(b2onPushCallback, &amp;b2on);\n  b2off.attachPush(b2offPushCallback, &amp;b2off);\n  b3on.attachPush(b3onPushCallback, &amp;b3on);\n  b3off.attachPush(b3offPushCallback, &amp;b3off);\n    \n  \/\/ mySerial.begin(115200);\n  \n  setup_wifi();\n  client.setServer(mqtt_server, 1883);\n  client.setCallback(callback); \n\n  \/\/ Connect RF 433MHz Transmitter to GPIO 5\n  mySwitch.enableTransmit(5);\n    \n  \/\/ SET YOUR PULSE LENGTH\n   mySwitch.setPulseLength(REPLACE_WITH_YOUR_PULSE_LENGTH);\n  \n  \/\/ SET YOUR PROTOCOL (default is 1, will work for most outlets)\n  mySwitch.setProtocol(REPLACE_WITH_YOUR_PROTOCOL);\n  \n  \/\/ Set number of transmission repetitions\n  mySwitch.setRepeatTransmit(20);\n}\n\nvoid loop(void){   \n  \/\/ When a push event occured every time,\n  \/\/ the corresponding component[right page id and component id] in touch event list will be asked\n  nexLoop(nex_listen_list);\n   \n  if (!client.connected()) {\n    reconnect();\n  }\n  \/*\n    YOU MIGHT NEED TO CHANGE THIS LINE, IF YOU'RE HAVING PROBLEMS WITH MQTT MULTIPLE CONNECTIONS\n    To change the ESP device ID, you will have to give a new name to the ESP8266.\n    Here's how it looks:\n      client.connect(&quot;ESP1_Office&quot;);\n    Then, for the other ESP:\n      client.connect(&quot;ESP1_Kitchen&quot;);\n    That should solve your MQTT multiple connections problem\n    *\/\n  if(!client.loop())\n    client.connect(&quot;ESP1_Office&quot;);\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Nextion-Project-Example-ESP8266\/raw\/master\/ESP8266_1_with_Nextion_3_2\/ESP8266_1_with_Nextion_3_2.ino\" target=\"_blank\">View raw code<\/a><\/p>\n<h3>ESP8266 #2 &#8211; Code<\/h3>\n<p>Upload the following code to the ESP8266 number #2. Don&#8217;t forget to edit the code to add your SSID, password, and MQTT broker IP address:<\/p>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*********\n  Rui Santos\n  Complete project details at http:\/\/randomnerdtutorials.com  \n*********\/\n\n\/\/ Loading the required libraries\n#include &lt;ESP8266WiFi.h&gt;\n#include &lt;PubSubClient.h&gt;\n\n\/\/#include &lt;SoftwareSerial.h&gt;\n\/\/SoftwareSerial mySerial(RX_PIN, TX_PIN); \/\/ RX, TX\n\n\/\/ Change the credentials below, so your ESP8266 connects to your router\nconst char* ssid = &quot;REPLACE_WITH_YOUR_SSID&quot;;\nconst char* password = &quot;REPLACE_WITH_YOUR_PASSWORD&quot;;\n\n\/\/ Change the variable to your Raspberry Pi IP address, so it connects to your MQTT broker\nconst char* mqtt_server = &quot;REPLACE_WITH_YOUR_MQTT_BROKER_IP&quot;;\n\/\/ For example: const char* mqtt_server = &quot;192.168.1.112&quot;;\n\n\/\/ Initializes the espClient. You should change the espClient name if you have multiple ESPs running in your home automation system\nWiFiClient espClient;\nPubSubClient client(espClient);\n\n\/\/ LED pins\nconst int ledPin5 = 5;\nconst int ledPin4 = 4;\n\n\/\/ Don't change the function below. This function connects your ESP8266 to your router\nvoid setup_wifi() {\n  delay(10);\n  \/\/ We start by connecting to a WiFi network\n  \/\/mySerial.println();\n  \/\/mySerial.print(&quot;Connecting to &quot;);\n  \/\/mySerial.println(ssid);\n  WiFi.begin(ssid, password);\n  while (WiFi.status() != WL_CONNECTED) {\n    delay(500);\n    \/\/mySerial.print(&quot;.&quot;);\n  }\n  \/\/mySerial.println(&quot;&quot;);\n  \/\/mySerial.print(&quot;WiFi connected - ESP IP address: &quot;);\n  \/\/mySerial.println(WiFi.localIP());\n}\n\n\/\/ This function is executed when some device publishes a message to a topic that your ESP8266 is subscribed to\n\/\/ Change the function below to add logic to your program, so when a device publishes a message to a topic that \n\/\/ your ESP8266 is subscribed you can actually do something\nvoid callback(String topic, byte* message, unsigned int length) {\n  \/\/mySerial.print(&quot;Message arrived on topic: &quot;);\n  \/\/mySerial.print(topic);\n  \/\/mySerial.print(&quot;. Message: &quot;);\n  String messageTemp;\n  \n  for (int i = 0; i &lt; length; i++) {\n    \/\/mySerial.print((char)message[i]);\n    messageTemp += (char)message[i];\n  }\n  \/\/mySerial.println();\n  \n  \/\/ Feel free to add more if statements to control more outputs with MQTT\n  \/\/ If a message is received on the topic office\/workbench, you check if the message is either true or false \n  \/\/ Turns the workbench according to the message\n  if(topic==&quot;office\/workbench&quot;){\n      \/\/mySerial.print(&quot;Changing Workbench to &quot;);\n      if(messageTemp == &quot;true&quot;){\n        digitalWrite(ledPin5, HIGH);\n        \/\/mySerial.print(&quot;On&quot;);\n      }\n      else if(messageTemp == &quot;false&quot;){\n        digitalWrite(ledPin5, LOW);\n        \/\/mySerial.print(&quot;Off&quot;);\n      }\n  }\n  else if(topic==&quot;office\/toplight&quot;){\n      \/\/mySerial.print(&quot;Changing Top Light to &quot;);\n      if(messageTemp == &quot;true&quot;){\n        digitalWrite(ledPin4, HIGH);\n        \/\/mySerial.print(&quot;On&quot;);\n      }\n      else if(messageTemp == &quot;false&quot;){\n        digitalWrite(ledPin4, LOW);\n        \/\/mySerial.print(&quot;Off&quot;);\n      }\n  }\n  \/\/mySerial.println();\n}\n\n\/\/ This function reconnects your ESP8266 to your MQTT broker\n\/\/ Change the function below if you want to subscribe to more topics with your ESP8266 \nvoid reconnect() {\n  \/\/ Loop until we're reconnected\n  while (!client.connected()) {\n    \/\/mySerial.print(&quot;Attempting MQTT connection...&quot;);\n    \/\/ Attempt to connect\n    \/*\n     YOU MIGHT NEED TO CHANGE THIS LINE, IF YOU'RE HAVING PROBLEMS WITH MQTT MULTIPLE CONNECTIONS\n     To change the ESP device ID, you will have to give a new name to the ESP8266.\n     Here's how it looks:\n       client.connect(&quot;ESP2_Office&quot;);\n     Then, for the other ESP:\n       client.connect(&quot;ESP1_Kitchen&quot;);\n      That should solve your MQTT multiple connections problem\n    *\/\n    if (client.connect(&quot;ESP2_Office&quot;)) {\n      \/\/mySerial.println(&quot;connected&quot;); \n      client.subscribe(&quot;office\/workbench&quot;);\n      client.subscribe(&quot;office\/toplight&quot;);              \n    } else {\n      \/\/mySerial.print(&quot;failed, rc=&quot;);\n      \/\/mySerial.print(client.state());\n      \/\/mySerial.println(&quot; try again in 5 seconds&quot;);\n      \/\/ Wait 5 seconds before retrying\n      delay(5000);\n    }\n  }\n}\n\nvoid setup(void) { \n  \/\/ Set GPIOs as Outputs   \n  pinMode(ledPin5, OUTPUT);\n  pinMode(ledPin4, OUTPUT);\n  \/\/ mySerial.begin(115200);\n  setup_wifi();\n  client.setServer(mqtt_server, 1883);\n  client.setCallback(callback);\n}\n\nvoid loop(void){   \n  if (!client.connected()) {\n    reconnect();\n  }\n  \/*\n   YOU MIGHT NEED TO CHANGE THIS LINE, IF YOU'RE HAVING PROBLEMS WITH MQTT MULTIPLE CONNECTIONS\n   To change the ESP device ID, you will have to give a new name to the ESP8266.\n   Here's how it looks:\n     client.connect(&quot;ESP2_Office&quot;);\n   Then, for the other ESP:\n     client.connect(&quot;ESP1_Kitchen&quot;);\n    That should solve your MQTT multiple connections problem\n  *\/\n  if(!client.loop())\n    client.connect(&quot;ESP2_Office&quot;);\n}\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Nextion-Project-Example-ESP8266\/raw\/master\/ESP8266_2_MQTT_2_LEDs\/ESP8266_2_MQTT_2_LEDs.ino\" target=\"_blank\">View raw code<\/a><\/p>\n<h2>Creating the Node-RED Application<\/h2>\n<p>Having both ESP boards with the code uploaded, it&#8217;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: <a href=\"https:\/\/randomnerdtutorials.com\/getting-started-with-node-red-dashboard\/\" target=\"_blank\" rel=\"noopener noreferrer\">Getting Started with Node-RED dashboard<\/a>\u00a0to follow the instructions to install Node-RED dashboard.<\/p>\n<h3>Starting Node-RED<\/h3>\n<p>To start Node-RED, enter the following in the Terminal window:<\/p>\n<pre>pi@raspberry:~ $ <strong>node-red-start<\/strong><\/pre>\n<p>To access Node-RED, open a tab in any browser on the local network and type the following:<\/p>\n<pre>http:\/\/<span style=\"color: #ff0000;\"><strong>Your_RPi_IP_address<\/strong><\/span>:1880<\/pre>\n<p>You should replace <span style=\"color: #ff0000;\"><strong>Your_RPi_IP_address<\/strong><\/span> with your Raspberry Pi IP address. If you don\u2019t know your Raspberry Pi IP address, in the Terminal enter:<\/p>\n<pre>pi@raspberry:~ $ <strong>hostname -I<\/strong><\/pre>\n<h3>Creating the Node-RED Flow<\/h3>\n<p>You can import the Node-RED flow provided an then make changes, if needed.<\/p>\n<p>To import the Node-RED flow, go the <a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/Nextion-Project-Example-ESP8266\/master\/Node-RED-Flow.txt\" target=\"_blank\" rel=\"noopener noreferrer\">Github repository<\/a> or click the figure below to see the raw file, and copy the code provided.<\/p>\n<p><a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/Nextion-Project-Example-ESP8266\/master\/Node-RED-Flow.txt\" target=\"_blank\" rel=\"noopener noreferrer\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48781\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/github-raw-code-node-red-flow.png?resize=900%2C73&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"900\" height=\"73\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/github-raw-code-node-red-flow.png?w=900&amp;quality=100&amp;strip=all&amp;ssl=1 900w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/github-raw-code-node-red-flow.png?resize=300%2C24&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/github-raw-code-node-red-flow.png?resize=768%2C62&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/a><\/p>\n<p>Next, in the Node-RED window, at the top right corner, select the menu, and go to <strong>Import\u00a0<\/strong> &gt;\u00a0<strong>Clipboard<\/strong>.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-45987\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/import-nodes.png?resize=523%2C291&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"523\" height=\"291\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/import-nodes.png?w=523&amp;quality=100&amp;strip=all&amp;ssl=1 523w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/import-nodes.png?resize=300%2C167&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 523px) 100vw, 523px\" \/><\/p>\n<p>Then, paste the code provided and click <strong>Import<\/strong>.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48744\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/import-node-red-flow.png?resize=504%2C337&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"504\" height=\"337\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/import-node-red-flow.png?w=504&amp;quality=100&amp;strip=all&amp;ssl=1 504w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/import-node-red-flow.png?resize=300%2C201&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 504px) 100vw, 504px\" \/><\/p>\n<p>Here&#8217;s the Node-RED flow you should get:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48746\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/node-red-flow.png?resize=673%2C284&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"673\" height=\"284\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/node-red-flow.png?w=673&amp;quality=100&amp;strip=all&amp;ssl=1 673w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/node-red-flow.png?resize=300%2C127&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 673px) 100vw, 673px\" \/><\/p>\n<p>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&#8217; state on Node-RED.<\/p>\n<p>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.<\/p>\n<h3>Node-RED Dashboard<\/h3>\n<p>All widgets are grouped inside the <strong>Outputs<\/strong> group within the\u00a0<strong>Office<\/strong> tab.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48772\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/node-red-dashboard-tabs.png?resize=442%2C233&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"442\" height=\"233\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/node-red-dashboard-tabs.png?w=442&amp;quality=100&amp;strip=all&amp;ssl=1 442w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/node-red-dashboard-tabs.png?resize=300%2C158&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/p>\n<h3>Accessing your Node-RED Using Interface<\/h3>\n<p>Go to\u00a0<em>http:\/\/Your_RPi_IP_address:1880<strong>\/UI<\/strong><\/em>, and you should see the Node-RED user interface.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48771\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/node-red-dashboard-nextion-esp8266.png?resize=661%2C512&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"661\" height=\"512\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/node-red-dashboard-nextion-esp8266.png?w=661&amp;quality=100&amp;strip=all&amp;ssl=1 661w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/node-red-dashboard-nextion-esp8266.png?resize=300%2C232&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 661px) 100vw, 661px\" \/><\/p>\n<h2>3D Printed Enclosure<\/h2>\n<p>To give this project a finished look, I&#8217;ve 3D printed an enclosure for the 3.2&#8221; Nextion display.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48775\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/Nextion-enclosure.jpg?resize=700%2C462&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"462\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/Nextion-enclosure.jpg?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/Nextion-enclosure.jpg?resize=300%2C198&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>The enclosure has enough space to fit the display, the ESP8266 and the 433MHz transmitter.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-48773\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/3d-printer-enclosure-nextion-3-2.png?resize=603%2C487&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"603\" height=\"487\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/3d-printer-enclosure-nextion-3-2.png?w=750&amp;quality=100&amp;strip=all&amp;ssl=1 750w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/3d-printer-enclosure-nextion-3-2.png?resize=300%2C242&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 603px) 100vw, 603px\" \/><\/p>\n<p>You can download the .STL file for the\u00a0<a href=\"https:\/\/www.thingiverse.com\/thing:1708255\" target=\"_blank\" rel=\"noopener noreferrer\">Nextion housing for 3.5 inch<\/a>. Note that for this project, I&#8217;ve used the Nextion 3.2&#8221;, so you need to resize those files to fit the Nextion 3.2&#8221; display.<\/p>\n<p>The enclosure was printed using the\u00a0<a href=\"https:\/\/randomnerdtutorials.com\/creality-3d-cr-10-3d-printer-review\/\" target=\"_blank\" rel=\"noopener noreferrer\">Creality 3D CR\u201310 3D Printer<\/a> &#8211; you can read my full review <a href=\"https:\/\/randomnerdtutorials.com\/creality-3d-cr-10-3d-printer-review\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<h2>Demonstration<\/h2>\n<p>With everything ready, you should be able to control your outputs by tapping the buttons on the Nextion display.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48806\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-esp8266-demo.jpg?resize=700%2C396&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"396\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-esp8266-demo.jpg?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-esp8266-demo.jpg?resize=300%2C170&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>When you tap a button on the Nextion display, the Node-RED Dashboard updates instantly.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48807\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-esp8266-demo2.jpg?resize=700%2C395&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"395\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-esp8266-demo2.jpg?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-esp8266-demo2.jpg?resize=300%2C169&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>Watch the video at the beginning of the page, to see this project in action.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>We hope you&#8217;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.<\/p>\n<p>If you like this project, you&#8217;ll certainly like:<\/p>\n<ul>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/node-red-with-ws2812b-addressable-rgb-led-strip\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node-RED with WS2812B Addressable RGB LED Strip<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/build-a-home-automation-system-for-100\/\" target=\"_blank\" rel=\"noopener noreferrer\">Build a Home Automation System with Node-RED<\/a><\/li>\n<li><a href=\"https:\/\/randomnerdtutorials.com\/node-red-with-raspberry-pi-camera-take-photos\/\" target=\"_blank\" rel=\"noopener noreferrer\">Node-RED with Raspberry Pi Camera (Take Photos)<\/a><\/li>\n<\/ul>\n<p>Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":48817,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[265,214,300,240,295,264],"tags":[],"class_list":["post-48713","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-esp8266-project","category-esp8266","category-0-esp8266","category-esp8266-projects","category-nextion","category-project"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/Thumbnail.jpg?fit=1280%2C719&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/48713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=48713"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/48713\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/48817"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=48713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=48713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=48713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}