{"id":47738,"date":"2017-12-07T11:44:47","date_gmt":"2017-12-07T11:44:47","guid":{"rendered":"http:\/\/randomnerdtutorials.com\/?p=47738"},"modified":"2019-04-02T10:23:26","modified_gmt":"2019-04-02T10:23:26","slug":"nextion-display-with-arduino-getting-started","status":"publish","type":"post","link":"https:\/\/randomnerdtutorials.com\/nextion-display-with-arduino-getting-started\/","title":{"rendered":"Nextion Display with Arduino &#8211; Getting Started"},"content":{"rendered":"<p>This post is an introduction to the Nextion display with the Arduino. We&#8217;re going to show you how to configure the display for the first time, download the needed resources, and how to integrate it with the Arduino UNO board. We&#8217;ll also make a simple graphical user interface to control the Arduino pins.<!--more--><\/p>\n<h2>Watch the video demonstration<\/h2>\n<p style=\"text-align:center\"><iframe width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/YaMKLtj9om0?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>If you want to see different Nextion displays and find the best price, go to\u00a0<a href=\"https:\/\/makeradvisor.com\/nextion-hmi-resistive-touchscreen-display\/\" target=\"_blank\" rel=\"noopener noreferrer\">Maker Advisor to read our guide<\/a>.<\/p>\n<h2>Introducing the Nextion Display<\/h2>\n<p>Nextion is a Human Machine Interface (HMI) solution. Nextion displays are resistive touchscreens that makes it easy to build a Graphical User Interface (GUI). It is a great solution to monitor and control processes, being mainly applied to IoT applications.<\/p>\n<p>There are several Nextion display modules, with sizes ranging from 2.4&#8221; to 7&#8221;.<\/p>\n<p>The Nextion has a built-in ARM microcontroller that controls the display, for example it takes care of generating the buttons, creating text, store images or change the background. The Nextion communicates with any microcontroller using serial communication at a 9600 baud rate.<\/p>\n<p>So, it works with any board that has serial capabilities like Arduino, Raspberry Pi, ESP8266, ESP32, and so on.<\/p>\n<p><img data-recalc-dims=\"1\" fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-48190\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-arduino-serial-baud-rate-9600.jpg?resize=700%2C204&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"204\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-arduino-serial-baud-rate-9600.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-arduino-serial-baud-rate-9600.jpg?resize=300%2C87&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>To design the GUI, you use the Nextion Editor, in which you can add buttons, gauges, progress bars, text labels, and more to the user interface in an easy way. We have the 2.8&#8221; Nextion display basic model, that is shown in the following figure.<\/p>\n<p><a href=\"https:\/\/makeradvisor.com\/tools\/nextion-2-8-hmi-lcd-touch-display-for-arduino-kits-raspberry-pi-esp8266-esp32-etc\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter wp-image-48118 size-full\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/2.8-nextion-display_f.png?resize=267%2C188&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"267\" height=\"188\" \/><\/a><\/p>\n<h2>Getting a Nextion Display<\/h2>\n<p>You can grab a Nextion basic model, or a Nextion enhanced model. The Nextion enhanced has new features when compared with the basic model:<\/p>\n<ul>\n<li>has a built-in RTC<\/li>\n<li>supports saving data to flash<\/li>\n<li>supports GPIOs<\/li>\n<li>has larger flash capacity and larger CPU clock<\/li>\n<\/ul>\n<p>The best model for you, will depend on your needs. If you&#8217;re just getting started with Nextion, we recommend getting the 3.2&#8221; size which is the one used in the Nextion Editor examples (the examples also work with other sizes, but you need to make some changes). Additionally, this is the most used size, which means more open-source examples and resources for this size.<\/p>\n<p>You can check <a href=\"https:\/\/makeradvisor.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Maker Advisor<\/a> website to get your Nextion display at the best price &#8211; just click the links below:<\/p>\n<ul>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/nextion-2-8-hmi-lcd-touch-display-for-arduino-kits-raspberry-pi-esp8266-esp32-etc\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nextion 2.8&#8221; basic model<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/nextion-3-2-hmi-lcd-touch-display-for-arduino-kits-raspberry-pi-esp8266-esp32-etc\/\" target=\"_blank\" rel=\"noopener noreferrer\">Nextion 3.2&#8221; basic model<\/a><\/li>\n<\/ul>\n<h2>Installing Nextion Editor<\/h2>\n<p>To get started with Nextion, first you need to install Nextion Editor. Go to <a href=\"https:\/\/nextion.itead.cc\/\" target=\"_blank\" rel=\"noopener noreferrer\">h<span style=\"font-weight: 400;\">ttps:\/\/nextion.itead.cc\/<\/span><\/a>, select the <strong>Resources<\/strong> tab, <strong>Download<\/strong> &gt; <strong>Nextion Editor<\/strong> and install Nextion Editor. You can either download the <em>.zip<\/em> file or the <em>.exe<\/em> file.<\/p>\n<p><img data-recalc-dims=\"1\" decoding=\"async\" class=\"aligncenter size-full wp-image-47748\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/nextion-resources.png?resize=700%2C198&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"198\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/nextion-resources.png?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/nextion-resources.png?resize=300%2C85&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>Downloading Nextion Libraries<\/h2>\n<p>Before getting started, you also need to install the Nextion libraries for Arduino IDE. Follow the next steps to install the library:<\/p>\n<ol>\n<li><a href=\"https:\/\/github.com\/itead\/ITEADLIB_Arduino_Nextion\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to download the Nextion library for Arduino &#8211; ITEADLIB_Arduino_Nextion<\/a>. You should have a .zip folder in your Downloads folder.<\/li>\n<li>Unzip the .zip folder and you should get ITEADLIB-Arduino-Nextion-master folder.<\/li>\n<li>Rename your folder from <del>ITEADLIB_Arduino_Nextion-master<\/del> to ITEADLIB_Arduino_Nextion.<\/li>\n<li>Move the ITEADLIB_Arduino_Nextion folder to your Arduino IDE installation libraries folder.<\/li>\n<li>Finally, re-open your Arduino IDE.<\/li>\n<\/ol>\n<h3>Configure Library for Arduino UNO<\/h3>\n<p>This library is configured for Arduino MEGA2560 by default. To make it work for Arduino Uno, you need to do the following:<\/p>\n<p>1. Open the<em>\u00a0ITEADLIB_Arduino_Nextion<\/em> folder<\/p>\n<p>2. There should be a <em>NexConfig.h<\/em> 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<p>Now, you are ready to start experimenting with the Nextion display with Arduino UNO.<\/p>\n<h2>Wiring Nextion Display to the Arduino<\/h2>\n<p>Connecting the Nextion display to the Arduino is very straightforward. You just need to make four connections: GND, RX, TX, and +5V. These pins are labeled at the back of your display, as shown in the figure below.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48123\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-pins-f.jpg?resize=682%2C423&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"682\" height=\"423\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-pins-f.jpg?w=682&amp;quality=100&amp;strip=all&amp;ssl=1 682w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-pins-f.jpg?resize=300%2C186&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 682px) 100vw, 682px\" \/><\/p>\n<h3>Nextion display pinout<\/h3>\n<p>Here&#8217;s how you should wire the Nextion display:<\/p>\n<table>\n<tbody>\n<tr>\n<td><b>Nextion<\/b><\/td>\n<td><b>Wiring to<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">GND<\/span><\/td>\n<td><span style=\"font-weight: 400;\">GND<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">RX<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Arduino pin 1 (TX)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">TX<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Arduino pin 0 (RX)<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">VCC<\/span><\/td>\n<td><span style=\"font-weight: 400;\">5V<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>You can power up the Nextion display directly from the Arduino 5V pin, but <strong>it is not recommended<\/strong>. Working with insufficient power supply may damage the display. So, you should use an external power source. You should use a <a href=\"https:\/\/makeradvisor.com\/tools\/raspberry-pi-power-supply\/\" target=\"_blank\" rel=\"noopener noreferrer\">5V\/1A power adaptor<\/a> with a micro USB cable. Along with your Nextion display, you&#8217;ll also receive a USB to 2 pin connector, useful to connect the power adaptor to the display.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48124\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-adapter.jpg?resize=300%2C271&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"300\" height=\"271\" \/><\/p>\n<p>Here&#8217;s the schematic you need to follow to wire the display to the Arduino.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48193\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_Display_Arduino_bb.jpg?resize=900%2C563&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"900\" height=\"563\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_Display_Arduino_bb.jpg?w=900&amp;quality=100&amp;strip=all&amp;ssl=1 900w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_Display_Arduino_bb.jpg?resize=300%2C188&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION_Display_Arduino_bb.jpg?resize=768%2C480&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<h2>Project Overview<\/h2>\n<p>The best way to get familiar with a new software and a new device is to make a project example. Here we&#8217;re going to create a user interface in the Nextion display to control the Arduino pins, and display data.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48195\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/project-overview.png?resize=1200%2C435&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"1200\" height=\"435\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/project-overview.png?w=1259&amp;quality=100&amp;strip=all&amp;ssl=1 1259w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/project-overview.png?resize=300%2C109&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/project-overview.png?resize=768%2C278&amp;quality=100&amp;strip=all&amp;ssl=1 768w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/project-overview.png?resize=1024%2C371&amp;quality=100&amp;strip=all&amp;ssl=1 1024w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/p>\n<p>Here&#8217;s the features of the application we&#8217;re going to build:<\/p>\n<ul>\n<li>The user interface has two pages: one controls two LEDs connected to the Arduino pins, and the other shows data gathered from the DHT11 temperature and humidity sensor;<\/li>\n<li>The first page has one button to turn an LED on, another button to turn an LED off, a label showing the LED current state;<\/li>\n<li>This first page also has a slider to control the brightness of another LED;<\/li>\n<li>The second page shows the current temperature in a text label, and the current humidity in a progress bar;<\/li>\n<li>This page has an update button to update to the readings.<\/li>\n<\/ul>\n<h2>Parts Required<\/h2>\n<p>Here&#8217;s the required parts for this project:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48198\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/parts-required.jpg?resize=700%2C513&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"513\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/parts-required.jpg?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/parts-required.jpg?resize=300%2C220&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<ul>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/nextion-2-8-hmi-lcd-touch-display-for-arduino-kits-raspberry-pi-esp8266-esp32-etc\/\" target=\"_blank\" rel=\"noopener noreferrer\">2.8&#8221; Nextion display<\/a> (or <a href=\"https:\/\/makeradvisor.com\/tools\/nextion-3-2-hmi-lcd-touch-display-for-arduino-kits-raspberry-pi-esp8266-esp32-etc\/\" target=\"_blank\" rel=\"noopener noreferrer\">3.2&#8221; Nextion display<\/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\/compatible-arduino-uno-r3-board\/\" target=\"_blank\" rel=\"noopener noreferrer\">Arduino UNO<\/a>\u00a0\u2013 read\u00a0<a href=\"https:\/\/makeradvisor.com\/best-arduino-starter-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">Best Arduino Starter Kits<\/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\/dht11-temperature-humidity-sensor\/\" target=\"_blank\" rel=\"noopener noreferrer\">DHT11 temperature and humidity sensor<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">2x 220 Ohm resistors<\/a><\/li>\n<li><a href=\"https:\/\/makeradvisor.com\/tools\/resistors-kits\/\" target=\"_blank\" rel=\"noopener noreferrer\">4.7k Ohm resistor<\/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>Project Schematic<\/h2>\n<p>Here&#8217;s the schematic you need to follow to complete this project.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48180\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION-Display-with-arduino-image.jpg?resize=850%2C738&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"850\" height=\"738\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION-Display-with-arduino-image.jpg?w=850&amp;quality=100&amp;strip=all&amp;ssl=1 850w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION-Display-with-arduino-image.jpg?resize=300%2C260&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/NEXTION-Display-with-arduino-image.jpg?resize=768%2C667&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<h2>Project Resources<\/h2>\n<p>We won&#8217;t cover step-by-step how to build the GUI in the Nextion display. But we&#8217;ll show you how to build the most important parts, so that you can learn how to actually build the user interface. After following the instructions, you should be able to complete the user interface yourself.<\/p>\n<p>Additionally, we provide all the resources you need to complete this project. Here&#8217;s all the resources you need (be aware that you may need to change some settings on the user interface to match your display size):<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/Nextion-Project-Example-Arduino\/raw\/master\/Nextion_28_Project.HMI\"><strong><em>.HMI<\/em> <\/strong>file<\/a> (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-Arduino\/raw\/master\/background_blue.png\" target=\"_blank\" rel=\"noopener noreferrer\">background image<\/a> used in the user interface should also be in the project folder;<\/li>\n<li><a href=\"https:\/\/github.com\/RuiSantosdotme\/Nextion-Project-Example-Arduino\/raw\/master\/Nextion_28_Project.tft\" target=\"_blank\" rel=\"noopener noreferrer\"><strong><em>.TFT<\/em> <\/strong>file<\/a> (this file should be uploaded to the Nextion display, this is the file that the display runs);<\/li>\n<li><a href=\"https:\/\/raw.githubusercontent.com\/RuiSantosdotme\/Nextion-Project-Example-Arduino\/master\/Nextion_28_Project\/Nextion_28_Project.ino\" target=\"_blank\" rel=\"noopener noreferrer\"><strong><em>.ino<\/em> <\/strong>file<\/a> (this is the file you should upload to your Arduino board).<\/li>\n<\/ul>\n<p><strong><a href=\"https:\/\/github.com\/RuiSantosdotme\/Nextion-Project-Example-Arduino\/archive\/master.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Click here to download all the files.\u00a0<\/a><\/strong><\/p>\n<h2>Nextion Editor General Overview<\/h2>\n<p>Here&#8217;s a quick overview of the different sections of the Nextion Editor.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47804\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/nextion-editor.png?resize=1024%2C618&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"1024\" height=\"618\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/nextion-editor.png?w=1024&amp;quality=100&amp;strip=all&amp;ssl=1 1024w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/nextion-editor.png?resize=300%2C181&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/nextion-editor.png?resize=768%2C464&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<ol>\n<li><strong>Main Menu<\/strong><\/li>\n<li><strong>Canvas<\/strong> &#8211; this is where you add your components to build the User Interface.<\/li>\n<li><strong>Toolbox<\/strong> &#8211; this is where you have a wide variety of components you can add to the user interface, like pictures, progress bar, buttons, sliders, and much more.<\/li>\n<li><strong>Picture\/Fonts list<\/strong> &#8211; this shows the fonts and pictures imported to your projects. Here you can also add new fonts and pictures.<\/li>\n<li><strong>Page<\/strong>\u00a0<strong>area<\/strong> &#8211; you can manage your pages here, like add more pages, copy and delete pages.<\/li>\n<li><strong>Attributes area<\/strong> &#8211; this part shows your component&#8217;s attributes. You can edit the component&#8217;s attributes here.<\/li>\n<li><b>Compiler\u00a0output window<\/b> &#8211; this will show any errors occurred during compiling.<\/li>\n<li><strong>Event window<\/strong> &#8211; here you can add code to be run when an event is met.<\/li>\n<\/ol>\n<h2>Creating a New Project in Nextion Editor<\/h2>\n<p>Open Nextion Editor and go to <strong>File<\/strong> &gt; <strong>New<\/strong> to create a new file. Give it a name and save it. Then, a window pops up to chose your Nextion model, as show in the figure below.<\/p>\n<p><em>Or you can <a href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/Nextion_28_Project_Example\/Nextion_28_Project.HMI\" target=\"_blank\" rel=\"noopener noreferrer\">import the .HMI file<\/a> for this project.<\/em><\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47795\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/select-device.png?resize=700%2C404&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"404\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/select-device.png?w=700&amp;quality=100&amp;strip=all&amp;ssl=1 700w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/select-device.png?resize=300%2C173&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<p>If you select the Display tab, you can also set the display orientation.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47796\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/display-orientation.png?resize=866%2C354&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"866\" height=\"354\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/display-orientation.png?w=866&amp;quality=100&amp;strip=all&amp;ssl=1 866w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/display-orientation.png?resize=300%2C123&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/display-orientation.png?resize=768%2C314&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 866px) 100vw, 866px\" \/><\/p>\n<p>For this example, we&#8217;ve selected Horizontal.<\/p>\n<p>After selecting your display and the orientation, just click the <strong>Ok<\/strong> button. A new project on the Nextion Editor should open.<\/p>\n<h2>Adding a Background Image<\/h2>\n<p>We&#8217;ll start by adding a background image. To use an image as a background, it should have the exact same dimensions as your Nextion display. We&#8217;re using the 2.8&#8221; display, so the background image needs to be 240&#215;320 pixels. Check your display dimensions and edit your background image accordingly. As an example, we&#8217;re using the following image:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47802\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/background_blue.png?resize=320%2C240&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"320\" height=\"240\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/background_blue.png?w=320&amp;quality=100&amp;strip=all&amp;ssl=1 320w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/background_blue.png?resize=300%2C225&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/p>\n<p>After having your background image with the right dimensions, follow the next instructions:<\/p>\n<p><strong>1.<\/strong>\u00a0In the bottom left corner of the Nextion display, there&#8217;s a window for fonts and pictures. Select the <strong>Picture<\/strong> tab.<\/p>\n<p><strong>2.<\/strong>\u00a0Click the <strong>(+)<\/strong> button and select your background image. The image will be added to the pictures list and it will be given an id. In this case it is 0.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47803\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/add-background-image.png?resize=222%2C318&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"222\" height=\"318\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/add-background-image.png?w=222&amp;quality=100&amp;strip=all&amp;ssl=1 222w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/add-background-image.png?resize=209%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 209w\" sizes=\"(max-width: 222px) 100vw, 222px\" \/><\/p>\n<p><strong>3.<\/strong>\u00a0Go to the toolbox, and click on the Picture component. It will be automatically added to your display area.<\/p>\n<p><strong>4.<\/strong>\u00a0Having that component selected, you should see its attribute in the attribute area.\u00a0 You can double click on the attributes to edit them. Double-click on the pic attribute to select the picture you want. You must write &#8220;0&#8221; which is the index of the picture you want, or select the image on the new window that pops up. After writing &#8220;0&#8221;, you actually need to hit ENTER to save the changes.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47805\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/picture-attribute.png?resize=271%2C455&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"271\" height=\"455\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/picture-attribute.png?w=271&amp;quality=100&amp;strip=all&amp;ssl=1 271w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/picture-attribute.png?resize=179%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 179w\" sizes=\"(max-width: 271px) 100vw, 271px\" \/><\/p>\n<h2>Adding Fonts<\/h2>\n<p>To write text on the display, you need to generate a font in the Nextion Editor. Go to <strong>Tools<\/strong> &gt; <strong>Font Generator<\/strong>. A new window should open.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47807\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/font-generator.png?resize=446%2C440&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"446\" height=\"440\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/font-generator.png?w=446&amp;quality=100&amp;strip=all&amp;ssl=1 446w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/font-generator.png?resize=300%2C296&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/font-generator.png?resize=80%2C80&amp;quality=100&amp;strip=all&amp;ssl=1 80w\" sizes=\"(max-width: 446px) 100vw, 446px\" \/><\/p>\n<p>Here you can select the font height, type, spacing and if you want it to be bold or not. Give it a name and click the Generate font button. After that, save the .zi file and add the generator font by clicking yes.<\/p>\n<p>The font will be added to the Fonts library at the left bottom corner and it will be given an index. As this is your first font, it will have the index 0.<\/p>\n<p><em><span style=\"color: #ff0000;\"><strong>Note<\/strong><\/span>: At the time of writing this instructions there is an issue with font types. Whatever font type you chose, it will always look the same. <\/em><em>Still, you can edit the font size and if it is bold or not.<\/em><\/p>\n<h2>Adding text labels, sliders and buttons<\/h2>\n<p>At this moment, you can start adding components to the display area. For our project, drag three buttons, two labels and one slider, as shown in the figure below. Edit their looks as you like.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47814\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/page0_f.png?resize=321%2C241&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"321\" height=\"241\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/page0_f.png?w=321&amp;quality=100&amp;strip=all&amp;ssl=1 321w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/page0_f.png?resize=300%2C225&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 321px) 100vw, 321px\" \/><\/p>\n<p>All components have an attribute called objname. This is the name of the component. Give good names to your components because you&#8217;ll need them later for the Arduino code. Also note that each component has one <strong>id<\/strong> number that is unique to that component in that page. The figure below shows the objname and id for the slider.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47813\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/slider-attributes.png?resize=266%2C395&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"266\" height=\"395\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/slider-attributes.png?w=266&amp;quality=100&amp;strip=all&amp;ssl=1 266w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/slider-attributes.png?resize=202%2C300&amp;quality=100&amp;strip=all&amp;ssl=1 202w\" sizes=\"(max-width: 266px) 100vw, 266px\" \/><\/p>\n<p>You can edit the components the way you want, but make sure to edit the slider maxval to 255, so that it works with the Arduino code we&#8217;ll be using.<\/p>\n<h2>Touchable components<\/h2>\n<p>You should trigger an event for the touchable components (the buttons and the slider) so that the Arduino knows that a component was touched. You can trigger events when you press or when you release a component.<\/p>\n<p>Here we&#8217;re going to trigger an event when the touch is released. That event will be simply sending the ID of the component that was touched.<\/p>\n<p>To do that, select one of the buttons, and in the event window, select the <strong>Touch Release Event<\/strong> tab, and put a tick on the <strong>Send Component ID<\/strong> option. Repeat this process for the other button, and the slider.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47815\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/event.png?resize=635%2C198&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"635\" height=\"198\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/event.png?w=635&amp;quality=100&amp;strip=all&amp;ssl=1 635w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/event.png?resize=300%2C94&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 635px) 100vw, 635px\" \/><\/p>\n<h2>Creating and Navigating to a New Page<\/h2>\n<p>Adding more pages to your GUI is really simple. On the top right corner, in the Page area, select the <strong>Add<\/strong> button to add a new page. A new page will be created. In this case, page1.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47816\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/create-page.png?resize=268%2C157&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"268\" height=\"157\" \/><\/p>\n<p>To navigate to one page to another, we&#8217;ve added a button in each page, at the bottom right corner &#8211; in this case it is called bNext.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47817\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/page0_swap.png?resize=322%2C243&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"322\" height=\"243\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/page0_swap.png?w=322&amp;quality=100&amp;strip=all&amp;ssl=1 322w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/page0_swap.png?resize=300%2C226&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 322px) 100vw, 322px\" \/><\/p>\n<p>To make this button redirect to page1, you need to add the following to the Event window, in the user code section (as highlighted in red below).<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47818\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/swap-page.png?resize=633%2C190&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"633\" height=\"190\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/swap-page.png?w=633&amp;quality=100&amp;strip=all&amp;ssl=1 633w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/swap-page.png?resize=300%2C90&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 633px) 100vw, 633px\" \/><\/p>\n<p>If you want to redirect to another page, you just have to modify the User Code with the number of the page.<\/p>\n<p>Our second page will display data from the DHT11 temperature and humidity sensor. We have several labels to hold the temperature in Celsius, the temperature in Fahrenheit, and the humidity. We also added a progress bar to display the humidity and an UPDATE button to refresh the readings. The bBack button redirects to page0.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47820\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/second-page.png?resize=320%2C241&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"320\" height=\"241\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/second-page.png?w=320&amp;quality=100&amp;strip=all&amp;ssl=1 320w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/second-page.png?resize=300%2C226&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 320px) 100vw, 320px\" \/><\/p>\n<p>Notice that we have labels to hold the units like &#8220;\u00baC&#8221;, &#8220;\u00baF&#8221; and &#8220;%&#8221;, and empty labels that will be filled with the readings when we have our Arduino code running.<\/p>\n<h2>Testing the Interface in the Simulator<\/h2>\n<p>You can test your interface in the simulator. For that, you need to click on the debug button at the main menu.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47823\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/debug.png?resize=903%2C106&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"903\" height=\"106\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/debug.png?w=903&amp;quality=100&amp;strip=all&amp;ssl=1 903w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/debug.png?resize=300%2C35&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/debug.png?resize=768%2C90&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 903px) 100vw, 903px\" \/><\/p>\n<p>A new window should open.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47821\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/simulator.png?resize=806%2C581&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"806\" height=\"581\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/simulator.png?w=806&amp;quality=100&amp;strip=all&amp;ssl=1 806w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/simulator.png?resize=300%2C216&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/simulator.png?resize=768%2C554&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 806px) 100vw, 806px\" \/><\/p>\n<p>In that window you can click on the buttons and see what happens. You should be able to swap between pages by clicking the corresponding buttons. You should also see the data returned when you click each button as highlighted in red in the figure above.<\/p>\n<h2>Compiling and Uploading code to the Nextion Display<\/h2>\n<p>To upload your project to the Next display, follow the next steps:<\/p>\n<p>1. Click the Compile button in the main menu;<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-47826\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/compile.png?resize=886%2C86&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"886\" height=\"86\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/compile.png?w=886&amp;quality=100&amp;strip=all&amp;ssl=1 886w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/compile.png?resize=300%2C29&amp;quality=100&amp;strip=all&amp;ssl=1 300w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/11\/compile.png?resize=768%2C75&amp;quality=100&amp;strip=all&amp;ssl=1 768w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><\/p>\n<p>2. Insert the microSD card on your computer;<\/p>\n<p>3. Go to <strong>File<\/strong> &gt; <strong>Open Build Folder<\/strong>;<\/p>\n<p>4. Copy the <em>.TFT<\/em> file corresponding to the file you&#8217;re currently working;<\/p>\n<p>5. Paste that file in the microSD card (note: the microSD card should have been previously formatted as FAT32);<\/p>\n<p>6. 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>7. 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>8. When it is ready, it should display the following message:<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48127\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/upload-success-nextion.jpg?resize=700%2C303&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"303\" 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: 700px) 100vw, 700px\" \/><\/p>\n<p>9. Remove the power from the Nextion display, and unplug the microSD card.<\/p>\n<p>10. Apply power again, and you should see the interface you&#8217;ve built in the Nextion Editor on your Nextion display.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48128\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-interface.jpg?resize=700%2C412&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"700\" height=\"412\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-interface.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-interface.jpg?resize=300%2C177&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/p>\n<h2>Writing the Arduino Code<\/h2>\n<p>Once the GUI is ready, you need to write the Arduino code so that the Nextion can interact with the Arduino and vice-versa. Writing code to interact with the Nextion display is not straightforward for beginners, but it also isn&#8217;t as complicated as it may seem.<\/p>\n<p>A good way to learn how to write code for the Arduino to interact with the Nextion display is to go to the examples folder in the Nextion library folder and explore. You should be able to copy and paste code to make the Arduino do what you want.<\/p>\n<p>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&#8217;s a table of all the components the code will interact to (your components may have a different ID depending on the order you&#8217;ve added them to the GUI).<\/p>\n<table style=\"height: 574px;\" width=\"457\">\n<tbody>\n<tr>\n<td><b>Objname<\/b><\/td>\n<td><b>Type<\/b><\/td>\n<td><b>Page ID<\/b><\/td>\n<td><b>ID<\/b><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">tState<\/span><\/td>\n<td><span style=\"font-weight: 400;\">text<\/span><\/td>\n<td><span style=\"font-weight: 400;\">0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">4<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">bOn<\/span><\/td>\n<td><span style=\"font-weight: 400;\">button<\/span><\/td>\n<td><span style=\"font-weight: 400;\">0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">bOff<\/span><\/td>\n<td><span style=\"font-weight: 400;\">button<\/span><\/td>\n<td><span style=\"font-weight: 400;\">0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">3<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">h0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">slider<\/span><\/td>\n<td><span style=\"font-weight: 400;\">0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">5<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">tSlider<\/span><\/td>\n<td><span style=\"font-weight: 400;\">text<\/span><\/td>\n<td><span style=\"font-weight: 400;\">0<\/span><\/td>\n<td><span style=\"font-weight: 400;\">6<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">tTempC<\/span><\/td>\n<td><span style=\"font-weight: 400;\">text<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1<\/span><\/td>\n<td><span style=\"font-weight: 400;\">5<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">tTempF<\/span><\/td>\n<td><span style=\"font-weight: 400;\">text<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1<\/span><\/td>\n<td><span style=\"font-weight: 400;\">4<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">jHumidity<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Progress bar<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1<\/span><\/td>\n<td><span style=\"font-weight: 400;\">8<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">tHumidity<\/span><\/td>\n<td><span style=\"font-weight: 400;\">text<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1<\/span><\/td>\n<td><span style=\"font-weight: 400;\">9<\/span><\/td>\n<\/tr>\n<tr>\n<td><span style=\"font-weight: 400;\">bUpdate<\/span><\/td>\n<td><span style=\"font-weight: 400;\">button<\/span><\/td>\n<td><span style=\"font-weight: 400;\">1<\/span><\/td>\n<td><span style=\"font-weight: 400;\">10<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>Below you can find the code you should upload to your Arduino board. Make sure you have the right board and COM port select.<\/p>\n<p><strong>You also need to have the Adafruit_DHT library installed.\u00a0<\/strong><\/p>\n<p><strong><em><span style=\"color: #ff0000;\">Note: make sure you remove the TX and RX connections when uploading code.<\/span><\/em><\/strong><\/p>\n<pre style=\"max-height: 40em; margin-bottom: 20px;\"><code class=\"language-c\">\/*\r\n * Rui Santos &amp; Sara Santos - Random Nerd Tutorials\r\n * Complete Project Details https:\/\/RandomNerdTutorials.com\/\r\n *\/\r\n\r\n#include &quot;Nextion.h&quot;\r\n\r\n#include &quot;DHT.h&quot;\r\n#define DHTPIN 4     \/\/ what digital pin we're connected to\r\n\r\n\/\/ Uncomment whatever type you're using!\r\n#define DHTTYPE DHT11   \/\/ DHT 11\r\n\/\/#define DHTTYPE DHT22   \/\/ DHT 22  (AM2302), AM2321\r\n\/\/#define DHTTYPE DHT21   \/\/ DHT 21 (AM2301)\r\n\r\n\/\/ Initialize DHT sensor.\r\nDHT dht(DHTPIN, DHTTYPE);\r\n\r\n\/\/ LED pins\r\nconst int led1 = 8;\r\nconst int led2 = 9;\r\n\r\n\/\/ Declare your Nextion objects - Example (page id = 0, component id = 1, component name = &quot;b0&quot;) \r\nNexText tState = NexText(0, 4, &quot;tState&quot;); \r\nNexButton bOn = NexButton(0, 2, &quot;bOn&quot;);\r\nNexButton bOff = NexButton(0, 3, &quot;bOff&quot;);\r\nNexSlider h0 = NexSlider(0, 5, &quot;h0&quot;);\r\nNexText tSlider = NexText(0, 6, &quot;tSlider&quot;);\r\nNexText tTempC = NexText(1, 5, &quot;tTempC&quot;);\r\nNexText tTempF = NexText(1, 4, &quot;tTempF&quot;);\r\nNexProgressBar jHumidity = NexProgressBar(1, 8, &quot;jHumidity&quot;);\r\nNexText tHumidity = NexText(1, 9, &quot;tHumidity&quot;);\r\nNexButton bUpdate = NexButton(1,10, &quot;bUpdate&quot;);\r\n\r\n\/\/ Register a button object to the touch event list.  \r\nNexTouch *nex_listen_list[] = {\r\n  &amp;bOn,\r\n  &amp;bOff,\r\n  &amp;h0,\r\n  &amp;bUpdate,\r\n  NULL\r\n};\r\n \r\n\/*\r\n * Button bOn component pop callback function. \r\n * When the ON button is released, the LED turns on and the state text changes. \r\n *\/\r\nvoid bOnPopCallback(void *ptr) {\r\n  tState.setText(&quot;State: on&quot;);\r\n  digitalWrite(led1, HIGH);\r\n}\r\n\r\n\/*\r\n * Button bOff component pop callback function. \r\n * When the OFF button is released, the LED turns off and the state text changes. \r\n *\/\r\nvoid bOffPopCallback(void *ptr) {\r\n  tState.setText(&quot;State: off&quot;);\r\n  digitalWrite(led1, LOW);\r\n}\r\n\r\n\/*\r\n * Slider h0 component pop callback function. \r\n * When the slider is released, the LED brightness changes and the slider text changes. \r\n *\/\r\nvoid h0PopCallback(void *ptr) {\r\n  uint32_t number = 0;\r\n  char temp[10] = {0};\r\n  \/\/ change text with the current slider value\r\n  h0.getValue(&amp;number);\r\n  utoa(number, temp, 10);\r\n  tSlider.setText(temp);\r\n  \/\/ change LED brightness\r\n  analogWrite(led2, number); \r\n}\r\n\r\n\/*\r\n * Button bUpdate component pop callback function. \r\n * When the UPDATE button is released, the temperature and humidity readings are updated. \r\n *\/\r\nvoid bUpdatePopCallback(void *ptr) {\r\n  \/\/ Reading temperature or humidity takes about 250 milliseconds!\r\n  \/\/ Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)\r\n  float h = dht.readHumidity();\r\n  \/\/ Read temperature as Celsius (the default)\r\n  float t = dht.readTemperature();\r\n  \/\/ Read temperature as Fahrenheit (isFahrenheit = true)\r\n  float f = dht.readTemperature(true);\r\n\r\n  \/\/ Check if any reads failed and exit early (to try again).\r\n  if (isnan(h) || isnan(t) || isnan(f)) {\r\n    return;\r\n  }\r\n  \/\/ Update temperature in Celsius\r\n  static char temperatureCTemp[6];\r\n  dtostrf(t, 6, 2, temperatureCTemp);\r\n  tTempC.setText(temperatureCTemp);\r\n\r\n  \/\/ Update humidity percentage text and progress bar\r\n  char hTemp[10] = {0}; \r\n  utoa(int(h), hTemp, 10);\r\n  tHumidity.setText(hTemp);\r\n  jHumidity.setValue(int(h));\r\n\r\n  \/\/ Update temperature in Fahrenheit\r\n  static char temperatureFTemp[6];\r\n  dtostrf(f, 6, 2, temperatureFTemp);\r\n  tTempF.setText(temperatureFTemp);\r\n}\r\n\r\nvoid setup(void) {    \r\n  dht.begin();\r\n  Serial.begin(9600);\r\n    \r\n  \/\/ You might need to change NexConfig.h file in your ITEADLIB_Arduino_Nextion folder\r\n  \/\/ Set the baudrate which is for debug and communicate with Nextion screen\r\n  nexInit();\r\n\r\n  \/\/ Register the pop event callback function of the components\r\n  bOn.attachPop(bOnPopCallback, &amp;bOn);\r\n  bOff.attachPop(bOffPopCallback, &amp;bOff);\r\n  h0.attachPop(h0PopCallback);\r\n  bUpdate.attachPop(bUpdatePopCallback, &amp;bUpdate);\r\n    \r\n  \/\/ Set LEDs as outputs\r\n  pinMode(led1, OUTPUT);\r\n  pinMode(led2, OUTPUT);\r\n}\r\n\r\nvoid loop(void) {   \r\n  \/*\r\n   * When a pop or push event occurred every time,\r\n   * the corresponding component[right page id and component id] in touch event list will be asked.\r\n   *\/\r\n  nexLoop(nex_listen_list);\r\n}\r\n<\/code><\/pre>\n\t<p style=\"text-align:center\"><a class=\"rntwhite\" href=\"https:\/\/github.com\/RuiSantosdotme\/Random-Nerd-Tutorials\/raw\/master\/Projects\/Nextion_28_Project_Example\/Nextion_28_Project\/Nextion_28_Project.ino\" target=\"_blank\">View raw code<\/a><\/p>\n<p>Continue reading the post to learn how the code works.<\/p>\n<h3>Including needed libraries<\/h3>\n<p>First, you include the Nextion and the DHT libraries.<\/p>\n<pre>#include \"Nextion.h\"\r\n#include \"DHT.h\"<\/pre>\n<p>The DHT sensor will be connected to the Arduino digital pin 4.<\/p>\n<pre>#define DHTPIN 4<\/pre>\n<p>Then, you should select the DHT type you&#8217;re using:<\/p>\n<pre>\/\/ Uncomment whatever type you're using!\r\n#define DHTTYPE DHT11 \/\/ DHT 11\r\n\/\/#define DHTTYPE DHT22 \/\/ DHT 22 (AM2302), AM2321\r\n\/\/#define DHTTYPE DHT21 \/\/ DHT 21 (AM2301)<\/pre>\n<p>And initialize the DHT sensor<\/p>\n<pre>DHT dht(DHTPIN, DHTTYPE);<\/pre>\n<p>After that, you define led1 and led2. These variables refer to the digital pins 8 and 9 respectively. (led 1 will be controlled with the ON and OFF buttons of the user interface, and led2 brightness will be controlled using the slider).<\/p>\n<pre>const int led1 = 8;\r\nconst int led2 = 9;<\/pre>\n<h3>Declaring Nextion Objects<\/h3>\n<p>You need to declare all your Nextion objects as follows:<\/p>\n<pre>NexText tState = <strong>NexText<\/strong>(0, 4, \"tState\"); \r\nNexButton bOn = <strong>NexButton<\/strong>(0, 2, \"bOn\");\r\nNexButton bOff = <strong>NexButton<\/strong>(0, 3, \"bOff\");\r\nNexSlider h0 = <strong>NexSlider<\/strong>(0, 5, \"h0\");\r\nNexText tSlider = <strong>NexText<\/strong>(0, 6, \"tSlider\");\r\nNexText tTempC = <strong>NexText<\/strong>(1, 5, \"tTempC\");\r\nNexText tTempF = <strong>NexText<\/strong>(1, 4, \"tTempF\");\r\nNexProgressBar jHumidity = <strong>NexProgressBar<\/strong>(1, 8, \"jHumidity\");\r\nNexButton bUpdate = <strong>NexButton<\/strong>(1,10, \"bUpdate\");\r\nNexText tHumidity = <strong>NexText<\/strong>(1, 9, \"tHumidity\");<\/pre>\n<p>Here you use the page ID, the component ID and their name &#8211; just check the table above with all the components. To define a text you use <strong>NexText<\/strong>, to define a button you use <strong>NexButton<\/strong>, for a slider you use <strong>NexSlider<\/strong> and for the progress bar you use <strong>NexProgressBar<\/strong>.<\/p>\n<p>Next, you should add in the following snippet all the touchable components that should trigger events on the Arduino.<\/p>\n<pre>NexTouch *nex_listen_list[] = {\r\n\u00a0 \u00a0 &amp;<strong>bOn<\/strong>,\r\n\u00a0 \u00a0 &amp;<strong>bOff<\/strong>,\r\n\u00a0 \u00a0 &amp;<strong>h0<\/strong>,\r\n\u00a0 \u00a0 &amp;<strong>bUpdate<\/strong>,\r\n\u00a0 \u00a0 NULL\r\n};<\/pre>\n<h3>Creating Callback Functions<\/h3>\n<p>After that, you should create callback functions that will be triggered when you touch the corresponding components.<\/p>\n<p>The following function will be triggered when you release the touch from the <strong>bOn<\/strong> button:<\/p>\n<pre>void <strong>bOnPopCallback<\/strong>(void *ptr) {\r\n\u00a0 \u00a0 tState.setText(\"State: on\");\r\n\u00a0 \u00a0 digitalWrite(led1, HIGH);\r\n}<\/pre>\n<p>This function will set the led1 to HIGH, as well as update the tState label with the text &#8220;State: on&#8221;. Updating text labels is as simple as using setText().<\/p>\n<p>The <strong>bOff<\/strong> button works in a similar way:<\/p>\n<pre>void <strong>bOffPopCallback<\/strong>(void *ptr) {\r\n\u00a0 \u00a0 tState.setText(\"State: off\");\r\n\u00a0 \u00a0 digitalWrite(led1, LOW);\r\n}<\/pre>\n<p>For the <strong>slider<\/strong> (<strong>h0<\/strong>), you have the following function that writes the current slider position on the tSlider label and sets led2 brightness accordingly:<\/p>\n<pre>void <strong>h0PopCallback<\/strong>(void *ptr) {\r\n\u00a0 \u00a0 uint32_t number = 0;\r\n\u00a0 \u00a0 char temp[10] = {0};\r\n\u00a0 \u00a0 h0.getValue(&amp;number);\r\n\u00a0 \u00a0 utoa(number, temp, 10);\r\n\u00a0 \u00a0 tSlider.setText(temp);\r\n\u00a0 \u00a0 analogWrite(led2, number); \r\n}<\/pre>\n<p>Finally, you need a function for the <strong>bUpdate<\/strong> (the update button). When you click this button the DHT temperature and humidity sensor reads temperature and humidity and displays them on the corresponding labels, as well as the humidity on the progress bar. That is the\u00a0bUpdatePopCallback() function.<\/p>\n<p>Inside that function, the following snipet reads temperature and humidity:<\/p>\n<pre>float h = dht.readHumidity();\r\n \/\/ Read temperature as Celsius (the default)\r\n float t = dht.readTemperature();\r\n \/\/ Read temperature as Fahrenheit (isFahrenheit = true)\r\n float f = dht.readTemperature(true);\r\n\r\n\/\/ Check if any reads failed and exit early (to try again).\r\n if (isnan(h) || isnan(t) || isnan(f)) {\r\n \/\/Serial.println(\"Failed to read from DHT sensor!\");\r\n return;\r\n }<\/pre>\n<p>The next piece writes the temperature in celcius on the tTempC label<\/p>\n<pre>static char temperatureCTemp[6];\r\ndtostrf(t, 6, 2, temperatureCTemp);\r\ntTempC.setText(temperatureCTemp);<\/pre>\n<p>In a similar way, to update the temperature in Fahrenheit:<\/p>\n<pre>static char temperatureFTemp[6];\r\ndtostrf(f, 6, 2, temperatureFTemp);\r\ntTempF.setText(temperatureFTemp);<\/pre>\n<p>To update the humidity label as well as the progress bar:<\/p>\n<pre>char hTemp[10] = {0};\r\nutoa(int(h), hTemp, 10);\r\ntHumidity.setText(hTemp);\r\njHumidity.setValue(int(h));<\/pre>\n<p>To set the value of the progress bar you simply use setValue().<\/p>\n<h3>setup()<\/h3>\n<p>In the setup(), you need to attach the functions created to the corresponding events. For example, when you click on the bOn button, the <strong>bOnPopCallback<\/strong> function will be triggered.<\/p>\n<pre>\u00a0 \u00a0 bOn.attachPop(bOnPopCallback, &amp;bOn);\r\n\u00a0 \u00a0 bOff.attachPop(bOffPopCallback, &amp;bOff);\r\n\u00a0 \u00a0 h0.attachPop(h0PopCallback);\r\n\u00a0 \u00a0 bUpdate.attachPop(bUpdatePopCallback, &amp;bUpdate);<\/pre>\n<h3>loop()<\/h3>\n<p>The loop is as simple as the following:<\/p>\n<pre>void loop(void) { \r\n\u00a0 \u00a0 nexLoop(nex_listen_list);\r\n}<\/pre>\n<p>When an event occurs, the corresponding function will be triggered.<\/p>\n<h2>Demonstration<\/h2>\n<p>With the User Interface built and the code on the Arduino, you should be able to control the Arduino pins from the Nextion display.<\/p>\n<p>Tap the On and Off buttons to turn on and off led1 and move the slider to control led2 brightness.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48186\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-control-panel.jpg?resize=650%2C391&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"650\" height=\"391\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-control-panel.jpg?w=650&amp;quality=100&amp;strip=all&amp;ssl=1 650w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-control-panel.jpg?resize=300%2C180&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>On the second screen, tap the update button to update with the latest sensor readings.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-48185\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-temperature-and-humidity.jpg?resize=650%2C399&#038;quality=100&#038;strip=all&#038;ssl=1\" alt=\"\" width=\"650\" height=\"399\" srcset=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-temperature-and-humidity.jpg?w=650&amp;quality=100&amp;strip=all&amp;ssl=1 650w, https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-temperature-and-humidity.jpg?resize=300%2C184&amp;quality=100&amp;strip=all&amp;ssl=1 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<h2>Wrapping up<\/h2>\n<p>In this post we&#8217;ve introduced you to the Nextion display. We&#8217;ve also created a simple application user interface in the Nextion display to control the Arduino pins. The application built is just an example for you to understand how to interface different components with the Arduino &#8211; we hope you&#8217;ve found the instructions as well as the example provided useful.<\/p>\n<p>In our opinion, Nextion is a great display that makes the process of creating user interfaces simple and easy. Although the Nextion Editor has some issues and limitations it is a great choice for building interfaces for your electronics projects. We have a project <a href=\"https:\/\/randomnerdtutorials.com\/nextion-display-with-esp8266-touchscreen-user-interface-for-node-red\/\" target=\"_blank\" rel=\"noopener noreferrer\">on how to create a Node-RED physical interface with the Nextion display and an ESP8266<\/a>\u00a0to control outputs. Feel free to take a look.<\/p>\n<p>What projects would you like to see using the Nextion display? Write a comment down below.<\/p>\n<p>Thanks for reading.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This post is an introduction to the Nextion display with the Arduino. We&#8217;re going to show you how to configure the display for the first time, download the needed resources, &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Nextion Display with Arduino &#8211; Getting Started\" class=\"read-more button\" href=\"https:\/\/randomnerdtutorials.com\/nextion-display-with-arduino-getting-started\/#more-47738\" aria-label=\"Read more about Nextion Display with Arduino &#8211; Getting Started\">CONTINUE READING \u00bb<\/a><\/p>\n","protected":false},"author":5,"featured_media":48119,"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":[303,2,267,264,10],"tags":[],"class_list":["post-47738","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-0-arduino","category-arduino","category-arduino-project","category-project","category-a-tutorials"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-featured-image.jpg?fit=1280%2C720&quality=100&strip=all&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/47738","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\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/comments?post=47738"}],"version-history":[{"count":0,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/posts\/47738\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media\/48119"}],"wp:attachment":[{"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/media?parent=47738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/categories?post=47738"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/randomnerdtutorials.com\/wp-json\/wp\/v2\/tags?post=47738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}