Display Temperature & Humidity Using ATOM Matrix ESP32 and DHT11 Sensor

In this Tutorial we are going to display Temperature and Humidity from the DHT11 sensor using the ATOM Matrix ESP32. Values will be displayed proportional according to the Matrix Display.

Watch the Video!

Step 1: What You Will Need

 

Step 2: The Circuit

 

  • Connect IR Obstacle Avoidance Sensor pin [VCC] to Atom Matrix pin [5V]
  • Connect IR Obstacle Avoidance Sensor pin [GND] to Atom Matrix pin [GND]
  • Connect IR Obstacle Avoidance Sensor pin [Out] to Atom Matrix pin [G25]

Step 3: Start Visuino, and Select the Atom Matrix 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 “Atom Matrix” as shown on Picture 2

 

Step 4: In Visuino Add Components

 

  • Add “DHT11” sensor component
  • Add 2X “Map Range Analog” component
  • Add 2X “Analog To Integer” component
  • Add 2X “Integer Multi Source” component

Step 5: In Visuino Set Components

 

  • Select “M5 Stack ATOM Matrix” board and in the properties window expand “Modules“>”RGB Matrix“>”Elements” and click on the 3 dots button
  • In the “Elements” window drag “Draw Rectangle” to the left side and in the properties window select “Height” and click on the Pin Icon and select “Cardinal SinkPin“, set the “Color” to aclGreen, “Width” to 2, “Height” to 0
  • In the “Elements” window drag another “Draw Rectangle” to the left side and in the properties window select “Height” and click on the Pin Icon and select “Cardinal SinkPin“, set the “Color” to $FF0080FF , “Width” to 2, “Height” to 0, “X” to 3
  • Close the “Elements” window

We Need to adjust the values from the DHT11 sensor to the Matrix Display, to do that:

  • For the Temperature: Select “MapRange1” and in the properties window set “Input Range” > “Max” to 35 and “Output Range” > “Max” to 4
  • For the Humidity: Select “MapRange2” and in the properties window set “Input Range” > “Max” to 100 and “Output Range” > “Max” to 4

Step 6: In Visuino Connect Components

  • Connect “HumidityThermometer1” pin [Sensor] to “M5 Stack ATOM Matrix” pin [GPIO 25]
  • Connect “HumidityThermometer1” pin [Temperature] to “MapRange1” Pin [In]
  • Connect “HumidityThermometer1” pin [Humidity] to “MapRange2” Pin [In]
  • Connect “MapRange1” Pin [Out] to “AnalogToInteger1” pin [In]
  • Connect “MapRange2” Pin [Out] to “AnalogToInteger2” pin [In]
  • Connect “AnalogToInteger1” Pin [Out] to “IntegerMultiSource1” pin [In]
  • Connect “AnalogToInteger2” Pin [Out] to “IntegerMultiSource2” pin [In]
  • Connect “IntegerMultiSource1” Pin [0] to “M5 Stack ATOM Matrix” > “Draw Rectangle1” pin [Height]
  • Connect “IntegerMultiSource1” Pin [1] to “M5 Stack ATOM Matrix” > “Draw Rectangle1” pin [Clock]
  • Connect “IntegerMultiSource2” Pin [0] to “M5 Stack ATOM Matrix” > “Draw Rectangle2” pin [Height]
  • Connect “IntegerMultiSource2” Pin [1] to “M5 Stack ATOM Matrix” > “Draw Rectangle2” pin [Clock]

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 ATOM Matrix module The Display will start to show the Temperature as the Green color and Humidity as the Blue color. Values are proportional according to the ATOM Matrix Display size.

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

Download ATOM-Temperature-DHT11.zip