Maker.io main logo

Weather Station Using DHT11 Sensor & M5Stack Core ESP32

2026-06-11 | By Ron Cutts

License: GNU Lesser General Public License Humidity Microcontrollers Temperature Wifi Arduino ESP32 M5Stack

In this tutorial, you will learn how to make a simple weather station using the M5Stack Core ESP32 & DHT11 temperature and humidity sensor.

Watch the video!

What You Will Need

What You Will Need

What You Will Need photo 2

What You Will Need photo 3

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]

The Circuit

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 in Picture 2

Start Visuino, and Select the M5 Stack Core Board Type

Start Visuino, and Select the M5 Stack Core Board Type photo 2

In Visuino, Add Components

  • Add "Analog To Text" component

  • Add "DHT11" component

In Visuino Add Components

In Visuino Add Components photo 2

In Visuino Set Components

  • Select "AnalogToText1" and in the Properties window set "Precision" to 1, this way we will only display one decimal, for 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 the [...] button so that the "Elements" window will open.

  • In the Elements window, drag "Draw Bitmap", and in the Properties window, set "X" to 20 and "Y" to 40, select "Bitmap", and click on the [...] button. Load the bitmap for the temperature. The Ideal size is 64X64

  • In the Elements window, drag another "Draw Bitmap", and in the Properties window, set "X to 20 and "Y" to 150, select "Bitmap" and click on the [...] button. Load the Bitmap for the Humidity; the 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

In Visuino Set Components

In Visuino Set Components photo 2

In Visuino Set Components photo 3

In Visuino Set Components photo 4

In Visuino Set Components photo 5

In Visuino Set Components photo 6

In Visuino Set Components photo 7

In Visuino Set Components photo 8

In Visuino Set Components photo 9

In Visuino Set Components photo 10

In Visuino Set Components photo 11

In Visuino Set Components photo 12

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]

In Visuino Connect Components

In Visuino Connect Components photo 2

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.

Generate, Compile, and Upload the Code

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

Downloads

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.