Weather Station Using DHT11 Sensor & M5Stack Core ESP32

In this tutorial you will learn how to make a simple Weather station using M5Stack Core ESP32 & DHT11 Temperature and Humidity sensor.

Ā 

Weather Station Using DHT11 Sensor & M5Stack Core ESP32

Things used in this project

Ā 

Hardware components

HARDWARE LIST
DFRobot Gravity: DHT11 Temperature Humidity Sensor For Arduino
M5Stack ESP32 Basic Core IoT Development Kit
Jumper wires (generic)

Software apps and online services

Ā 

Arduino IDE

Ā 

Visuino - Graphical Development Environment for Arduino

Ā 

Story

Ā 

In this tutorial you will learn how to make a simple Weather station using M5Stack Core ESP32 & DHT11 Temperature and Humidity sensor.

Ā 

Watch the video!

Ā 

Ā 

Step 1: What You Will Need

Ā 

Ā 

M5Stack Core ESP32 more info hereDHT11 Temperature and Humidity sensorJumper wiresVisuino program: Download Visuino

Ā 

Ā 

Ā 

The Circuit

Ā 

Ā 

Connect "DHT11" sensor pin [VCC] to "M5 Stack Core" pin [5V]Connect "DHT11" sensor pin [GND] to "M5 Stack Core" pin [G]Connect "DHT11" sensor pin [S] to "M5 Stack Core" digital pin [5]

Ā 

Ā 

Ā 

Step 3: Start Visuino, and Select the M5 Stack Core Board Type

Ā 

Ā 

Ā 

Ā 

Ā 

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 "M5 Stack Core" as shown on Picture 2

Ā 

Ā 

Ā 

Step 4: In Visuino Add Components

Ā 

Ā 

Ā 

Ā 

Ā 

Add "Analog To Text" componentAdd "DHT11" component

Ā 

Ā 

Ā 

Step 5: In Visuino Set Components

Ā 

Ā 

Ā 

Ā 

Ā 

Ā 

Ā 

Ā 

Ā 

Ā 

Ā 

Select "AnalogToText1" and in the Properties window set "Precision" to 1, this way we will only display one decimal, example 25.6

Ā 

Select "AnalogToText12 and in the Properties window set "Precision" to 1Ā Select M5 Stack Core and in the editor Modules>TFT Display>Elements, click on [...] button, so that "Elements" window will open.Ā In the Elements window drag "Draw Bitmap", and in the Properties window set "X" to 20, "Y" to 40 and Select "Bitmap" and click on [...] button, Load the Bitmap for the Temperature, Ideal size is 64X64Ā In the Elements window drag another "Draw Bitmap", and in the Properties window set "X to 20, "Y" to 150 and Select Bitmap" and click on [...] button, Load the Bitmap for the Humidity, Ideal size is 64X64Ā In the Elements window drag "Text Field" and in the Properties window set "X to 120, "Y" to 50 and "Size" to 6Ā In the Elements window drag another "Text Field" and in the Properties window set "X to 120, "Y" to 160 and "Size" to 6Ā Close the "Elements" window

Ā 

Ā 

Step 6: In Visuino Connect Components

Ā 

Ā 

Ā 

Ā 

Connect "HumidityThermometer1" pin [Sensor] to "M5 Stack Core" digital pin [GPIO 5]Connect "HumidityThermometer1" pin [Temperature] to "AnalogToText1" pin [In]Connect "HumidityThermometer1" pin [Sensor] to "AnalogToText2" pin [In]Connect "AnalogToText1" pin [Sensor] to "M5 Stack Core" > "Text Field1" pin [In]Connect "AnalogToText2" pin [Sensor] to "M5 Stack Core" > "Text Field2" pin [In]

Ā 

Ā 

Ā 

Step 7: Generate, Compile, and Upload the Code

Ā 

Ā 

In Visuino, at the bottom click on the "Build" Tab, make sure the correct port is selected, then click on the "Compile/Build and Upload" button.

Ā 

Ā 

Ā 

Step 8: Play

Ā 

If you power the M5 Stack Core, the display should start showing the current Temperature and Humidity that it gets from the DHT11 sensor.

Ā 

Congratulations! You have completed your Internet Time project with Visuino. Also attached is the Visuino project, that I created for this Tutorial. You can download and open it in Visuino: https://www.visuino.eu

Schematics

Ā 

icon m5-core-dht11_4pWp8k9Qbf.zip 6KB Download(1)

Code

Visuino File

Arduino

icon visuino_file.zip 0KB Download(2)

The article was first published in hackster, May 24, Ā 2023

cr: https://www.hackster.io/ronfrtek/weather-station-using-dht11-sensor-m5stack-core-esp32-0249ce

author: ronfrtek

License
All Rights
Reserved
licensBg
0