M5STACK How to Display Temperature, Humidity and Pressure on M5StickC ESP32 Using Visuino - Easy to Do

by RonFrtek in Circuits > Arduino

5237 Views, 7 Favorites, 0 Comments

M5STACK How to Display Temperature, Humidity and Pressure on M5StickC ESP32 Using Visuino - Easy to Do

M5STACK How to Display Temperature, Humidity and Pressure on M5StickC ESP32 Using Visuino

In this tutorial we will learn how to program ESP32 M5Stack StickC with Arduino IDE and Visuino to Display the Temperature, Humidity and Pressure using ENV sensor (DHT12, BMP280, BMM150)

What You Will Need

FUPA768K36U3RSQ.LARGE.jpg
ENV_12d44b50-cc56-4da7-adc2-b73168196a5a_1200x1200.jpg
FICL0HPK36U3RSN.LARGE.jpg
  1. M5StickC ESP32: you can get it here
  2. M5StickC ENV Hat (DHT12, BMP280, BMM150) you can get it here
  3. Visuino program: Download Visuino

    Note: Check this tutorial here on how to Install StickC ESP32 board

Start Visuino, and Select the M5 Stack Stick C Board Type

F5ZAEMUK36U3RS2.LARGE.jpg
FBZIDQ4K36U3RS3.LARGE.jpg

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 Stick C" as shown on Picture 2

In Visuino Set Components

stickc-shield.png
2019-12-12_17-46-22.jpg
2019-12-12_17-54-44.jpg
2019-12-12_17-52-00.jpg
2019-12-12_17-52-44.jpg
2019-12-12_17-54-02.jpg
2019-12-12_17-53-44.jpg
2019-12-12_17-53-25.jpg
2019-12-12_17-52-44.jpg

  1. Click with the right mouse button on the StickC board and select "Add Shields.."
  2. In the Shields Dialog drag "EnvironmentHat" to the left side
  3. Close the Shields Dialog and select the board and on the left side in the Properties window Expand on the Modules>Display ST7735
  4. Set "Orientation" to goRight
  5. Click on the "Elements" 3 dots (Picture 4)
  6. In the Elements window drag 3x "Text Field" to the left side (Picture 5)
  7. On the Left side of the dialog select "Text Field1" and in the properties window set "Size" to 2
  8. On the Left side of the dialog select "Text Field2" and in the properties window set "Size" to 2 and "Y" to 20
  9. On the Left side of the dialog select "Text Field3" and in the properties window set "Size" to 2 and "Y" to 20
  10. Close The Elements Dialog

In Visuino Connect Components

stickcenv.png
2019-12-12_18-02-51.jpg
2019-12-12_18-03-07.jpg

  1. Connect "M5 Stack Stick C" board > Environment pin [Temperature] to "M5 Stack Stick C" board > Display ST7735 > TextField1 pin[In]
  2. Connect "M5 Stack Stick C" board > Environment pin [Humidity] to "M5 Stack Stick C" board > Display ST7735 > TextField2 pin[In]
  3. Connect "M5 Stack Stick C" board > Environment pin [Pressure] to "M5 Stack Stick C" board > Display ST7735 > TextField3 pin[In]

Generate, Compile, and Upload the Arduino Code

2020-10-30_13-20-50.jpg

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

Play

If you power the M5Sticks module, the display should start to show the sensor values.

Congratulations! You have completed your M5Sticks project with Visuino. Also attached is the Visuino project, that I created for this Instructable, you can download it here. You can download and open it in Visuino: https://www.visuino.com