Introduction: Arduino Weather Station With a Nextion Display

By Click Here: My YouTube Channel
About: I am Nick Koumaris from Sparta, Greece. I'm extremely passionate about electronics, making things and design. I love teaching what I know and sharing my experiences with you. I put out new YouTube videos every…

Dear friends welcome to another tutorial! Today we are going to take a first look at this Nextion display, a very useful touch display for our Arduino and ESP8266 projects.

In this tutorial we are going to use this Nextion display with Arduino and the Wemos D1 mini board. We are going to see what it offers, what makes it different from the other touch displays and we are going to build a simple weather station with it. Let’s start.

Step 1: The Nextion Display

When I published the video about my top 5 Arduino displays a lot of the viewers suggested that I should try the Nextion displays as well. There are a lot of Nextion displays. The smaller one is the 2.4” inch display, and the larger one is the 7” display. I decided to try the 3.2” Nextion display. It costs around 23$. You can get it here:

3.2" Nextion Display ▶ http://educ8s.tv/part/Nextion32

As we said before this is a 3.2” touch screen and it offers a resolution a 400x240 pixels. At the back we can see that there is a 4 pin connector and an SD card slot. We only need connect 4 wires to make it work. Let’s power it up at once. I connect the Red wire to 5V and the Black wire to GND on this small board which comes with the display. Next, I connect the board to a 5V power bank. As you can see, the display turns on, and we can use the demo program that is preloaded.

There are some demo pages that showcase the capabilities of the display. We can use touch of course and as you can see there are some impressive example pages, like this one with the Gauges. It looks very promising. But wait a minute, we don’t use an Arduino to control it. How can we run code on it without a microcontroller?

In order to answer this question we have to look at the back of the screen. We can see, that there is a small chip soldered at the back, which is a 32bit microprocessor! It is an ARM processor which clocked at 48MHz. So this display uses its own processor which is very powerful in order to control the display and draw the controls on the screen, like the buttons and the gauges! This is really amazing because this way the Arduino sketch won’t be responsible to drive the display and display the User Interface. This task is taken care of by the fast Nextion processor, so the Arduino is free to use its recourses for other things. In order to send data and commands to the Nextion Display we use the serial interface.

Step 2: How to Run Code on a Nextion Display

But how can we program the Nextion display? We need to use the Nextion Editor, a free software that is provided by the developers of the display.

Nextion Editor ▶ https://nextion.itead.cc/resource/download/nextion-editor/

The editor claims to make the design of the GUI on a Nextion display very easy and fast because it uses a What You See Is What You Get editor. Well my initial opinion about the editor was not the best. The Nextion editor seems to be in an early stage of development and the documentation is almost inexistent. At first I was very disappointed, the software looks so primitive. After spending some time trying some things I managed to build something useful, a simple Weather Station. It consists of only one page, in which we display the temperature and the humidity we get from a DHT22 sensor using Arduino. Let’s see how to build it from the beginning. The procedure will be easier to follow if you watch the attached video as well.

At first, let’s create the Graphical User Interface for the display. We create a new project and we save it to the disk. Next, we select the display we are using, and the orientation of the display. It took me about 10 minutes to find out how to change the orientation of the display. The user experience of this software needs so many improvements. Now, we add the background image as a recourse to the project. Next from the Tools Menu we open the Font Generator. We generate a font we save it to the disk and we add it in the project. From the toolbox we enter a picture to the project page and we select the background picture from the recourses. That’s it, our background is ready. Now we are going to add a text box for the temperature. We name the new text object as temperature, we set a sample text, we set the color of the text, the text alignment and the background color. We follow the same procedure one more time in order to make the humidity textbox.

We also create two more textboxes, one the degrees Celsius symbol and one with the percent symbol. These two textboxes won’t be updated. If we now press the Debug Button we can see how the interface will look in reality. But how can we change the values of the textboxes with the readings from the sensor? We need to send some commands to the display from the Arduino. We can emulate that from the debug window here. So, if we send the command temperature.txt=”30.5” to the Nextion display the textbox with the name temperature will be updated with the new value. We can do the same with the other textbox which is named humidity. Cool. It is so easy after all.

The Nextion code is ready, let’s load it on the display. We go to File -> Open Build Folder and we copy the WeatherStation.tft file. We paste this file in an empty micro sd card. We then place this SD card in the sd card slot at the back of the Nextion Display.If we now power up the display, it will update the code that the display is executing. If we now remove the SD card and power up the display one more time, the new graphical user interface will appear. Of course the values won’t change since we haven’t connected the Arduino yet. Now we are ready to build the Arduino part of the project.

Step 3: The Arduino Part of the Project

We need the following parts for the Arduino part of the project. The Arduino will collect the data from a DHT22 sensor and it will send them to the display.

We connect a DHT22 temperature sensor to an Arduino Uno. We use Digital Pin 2 as the output pin of the sensor. We also connect Tx pin of the Arduino to the Rx pin of the Nextion Display and the Rx of the Arduino to the Tx pin of the Nextion display. We provide power to the sensor and the Nextion display and we are ready to load the code to Arduino.

The code of the Arduino is very simple. We get the temperature from the sensor every two seconds, and then we create two commands to send to the Nextion display in order to update the screen with the new values. We then write those commands to the serial port, using the Serial.print command. It is that easy! Each Nextion command must end with a special character which is sent using the endNextionCommand function I have created. Our first Nextion project is ready, a simple weather station. As always you can find the code of the project, both the Nextion code and the Arduino code attached here.

Attachments

Step 4:

As you can see using the Nextion displays we can build impressive projects quickly. We didn’t use the touch functionality in this project but we will in a future video. This video was just a quick demonstration of the display.

As a final thought, the Nextion displays are very useful in many projects. They can be used with any microcontroller since they require only two wire to connect. We can now add a big touch display to our Wemos D1 mini projects which was impossible until now. We can even have a touch display with an Arduino Pro mini! We can build so many projects with the Nextion displays. But the Nextion displays are far from perfect. The software for it is really poor, and the documentation inexistent. The hardware might be good but the overall user experience is poor. Do I recommend these displays to anyone? Not really. Buy one, only if you are going to build projects that other users shared, like this one, or if you are willing to spend many hours to find information about how to use the more advanced features of the display.

I would love to hear your opinion about this. Do you like Nextion display and if yes, what kind of projects are you going to build using one of these? Please post your comments in the comments section below.