DIY Weather Station With Nextion Display and Arduino

In this tutorial we will use Nextion display, rtc1307 time module, Arduino UNO, and Visuino to display current time, temperature and humidity.

Watch a demonstration video.

Step 1: What You Will Need

Arduino uno( or nano ,mega anyone can be used)
Nextion lcd 2.8 inch nx3224t028_011( any other nextion lcd will also work)
I2C RTC DS1307 24C32 Real Time Clock Module for Arduino
Jumper wires
Breadboard
Visuino program: Download Visuino
Nextion Editor program: Download here

Step 2: Developing Interface in Nextion Editor

First make sure the SD card is formatted in FAT32 (Use some software like card formatter )

Start Nextion Editor software and click "New" and Save your project to something like "Weather"
Then "Settings" Dialog will show, select the type of Display that you have.
A blank white sheet will be created.

From the Toolbox on the left drag 3x picture.
On the left-bottom select "Picture" tab, click + button and load the pictures. You can download some nice icons from the internet for time,temperatue and humidity (like Iconarchive website)
Select each Picture element and on the right-bottom "Attribute" window double click on "pic" field and select the picture, do this for every picture element (3x).

On the menu click on "Tools>Font generator"

Create the font that will be used to display time,temperature and humidity and set the name like "MyFont1"
Click "Generate Font" and save it somwhere, when asked "Add the generated font?" click Yes.
Close the Dialog box and the generated font will show up on the botton left under "Fonts" tab with the ID 0

From the Toolbox on the left drag 3x "text", place it where it will show the data
For each text element set on the right bottom "Attributes" window, the font to 0 < the ID of the font you generated before, you can use multiple fonts and set ID for each text element
You can set the default text value under "txt" field for example "Time", "C", "%
You can set the color by clicking on "pco" field

Note that each text element has a certain object name like "t0" etc, this will later be used in Visuino
You can find each object name under "attributes" window>objname

When you have placed and position all the elements:

click on "Compile" button
click on the menu "File" > "Open Build Folder" find the file in our case "Weather.tft" and copy it to the SD card.

Step 3: The Circuit

Connect Arduino pin [5v] to breadboard Positive pin [Red]
Connect Arduino pin [GND] to breadboard Negative pin [Blue]
Connect DHT11 sensor pin [-] to Arduino pin [GND]
Connect DHT11 sensor pin [-] to breadboard positive pin [Red]
Connect DHT11 sensor signal pin [S] to Arduino digital pin [7]

Connect Time DS1307 module pin [Vcc] to breadboard positive pin [Red]
Connect Time DS1307 module pin [GND] to breadboard negative pin [Blue]
Connect Time DS1307 module pin [SDA] to Arduino pin [SDA]
Connect Time DS1307 module pin [SCL] to Arduino pin [SCL]

Connect Nextion Display pin [VCC] to to breadboard positive pin [Red]
Connect Nextion Display pin [GND] to to breadboard negative pin [Blue]
Connect Nextion Display pin [RX] to to Arduino pin [TX]
Connect Nextion Display pin [TX] to to Arduino pin [RX]

Step 4: Start Visuino, and Select the Arduino UNO Board Type

To start programming the Arduino, you will need to have the Arduino IDE installed from here: https://www.arduino.cc/.

Please be aware that there are some critical bugs in Arduino IDE 1.6.6. Make sure that you install 1.6.7 or higher, otherwise this Instructable will not work! If you have not done follow the steps in this Instructable to setup the Arduino IDE to program Arduino UNO! The Visuino: https://www.visuino.eu also needs to be installed. Start Visuino as shown in the first picture Click on the "Tools" button on the Arduino component (Picture 1) in Visuino When the dialog appears, select "Arduino UNO" as shown on Picture 2

Step 5: In Visuino Add Components

Add "Start" component
Add "Real Time Clock (RTC) DS 1307" component
Add "Clock Generator" component
Add "Humidity and Thermometer DHT11" component
Add 2x "Analog to text" component
Add "Decode (Split) datetime" component
Add "Nextion Display" component

Step 6: In Visuino Set Components

Double click on "RealTimeClock1" component, elements window will open and:

Drag "Set Day" and under properties window set the "Value" to your current date
Drag "Set Year" and under properties window set the "Value" to your current year
Drag "Set Month" and under properties window set the "Value" to your current month
Drag "Set Hour" and under properties window set the "Value" to your current hour
Drag "Set minute" and under properties window set the "Value" to your current minutes

Select "FormattedText1" component and under properties window set "text" to: %0:%1:%2

Double click on "FormattedText1" component, elements window will open and:

Drag 3x "Text Element" to the left

Double click on "DisplayNextion1" component, elements window will open and:

Drag 3x "Text" element to the left and for each element set:

for first element name it: Time
for second element name it: Temperature
for third element name it: Humidity
For each element set "Page index": 0

for first element set "Element name": t0 (this is the name that is visible in Nextion editor above each element in my case its t0)
for second element set "Element name": t1 (this is the name that is visible in Nextion editor above each element in my case its t1)
for second element set "Element name": t2 (this is the name that is visible in Nextion editor above each element in my case its t2)

Step 7: In Visuino Connect Components

Connect "Start1" pin "Out" to "RealTimeClock1" > "Set Day1" pin "Clock"
Connect "Start1" pin "Out" to "RealTimeClock1" > "Set Hour1" pin "Clock"
Connect "Start1" pin "Out" to "RealTimeClock1" > "Set Year1" pin "Clock"
Connect "Start1" pin "Out" to "RealTimeClock1" > "Set Month1" pin "Clock"
Connect "Start1" pin "Out" to "RealTimeClock1" > "Set Minute1" pin "Clock"

Connect "RealTimeClock1" component pin [Out] to "DecodeDateTime1" pin [In]
Connect "RealTimeClock1" component pin [Control] to Arduino board I2C pin [In]
Connect "ClockGenerator1" component pin [Out] to "HumidityThermometer1" component pin [Clock]
Connect "DecodeDateTime1" component to pin [Hour] to "FormattedText1" >"Textelement1" pin [In]
Connect "DecodeDateTime1" component to pin [Hour] to "FormattedText1" >"Textelement2" pin [In]
Connect "DecodeDateTime1" component to pin [Hour] to "FormattedText1" >"Textelement3" pin [In]

Connect "HumidityThermometer1" component pin [Temperature] to "AnalogToText1" component pin [In]
Connect "HumidityThermometer1" component pin [Humidity] to "AnalogToText2" component pin [In]
Connect "HumidityThermometer1" component pin [Sensor] to Arduino board digital pin [7]

Connect "FormattedText1" component pin [Out] to "DisplayNextion1" component pin Time [In]
Connect "AnalogToText1" component pin [Out] to "DisplayNextion1" component pin Temperature [In]
Connect "AnalogToText2" component pin [Out] to "DisplayNextion1" component pin Humidity [In]

Connect "DisplayNextion1" pin [Out] to arduino board "Serial[0]" pin[In]

Step 8: Copy Nextion File to SD Card

Make sure you have the Nextion file on the SD card

Turn OFF the Nextion Display
Put the SD card into Nextion Display
Turn ON Nextion Display and you should see the progress of updating the Nextion display
Turn OFF the Nextion Display
Remove the SD card from the Nextion display

Now the Nextion Display is ready.

Step 9: Generate, Compile, and Upload the Arduino Code

In Visuino, Press F9 or click on the button shown on Picture 1 to generate the Arduino code, and open the Arduino IDEIn the Arduino IDE, click on the Upload button, to compile and upload the code (Picture 2)Note:

Make sure when you are uploading the code to Arduino to Disconnect Arduino pin[RX] and Arduino pin[TX]
After the Upload is finished connect back the Arduino pin[RX] and Arduino pin[TX]

Step 10: Play

If you power the Arduino UNO module, the Display will start to show a current temperature and humidity level + time that you set in Visuino. Congratulations! You have completed your Weather station project with Visuino.

Also attached is the Visuino project, that I created for this Instructable You can download and open it in Visuino: https://www.visuino.com

and

Nextion File for Nextion Editor (Weather.HMI) and compiled Nextion file (Weather.tft) that you can copy directly to your Nextion display.