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.

• 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

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.

• 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]

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

1. Add "Start" component
2. Add "Real Time Clock (RTC) DS 1307" component
3. Add "Clock Generator" component
4. Add "Humidity and Thermometer DHT11" component
5. Add 2x "Analog to text" component
6. Add "Decode (Split) datetime" component
7. Add "Nextion Display" component

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)

• 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]

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.

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]

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.

You can also check this amazing tutorial to learn how to work with Nextion Displays
https://www.instructables.com/id/Visuino-Nextion-Lcd-Based-Acceleration-to-Angle-Di/