[EN] Temperature and humidity indicator bar

This article is an example program for cases where you want to display the temperature and humidity bar as shown in Figure 1 with MicroPython and esp32 board with OLED. How to write? The equipment in this experiment used DHT22 as a humidity and temperature measurement device. The board is connected to the I2C bus to communicate with the OLED via pins GPIO4 and GPIO5 for SCL and SDA respectively. At the same time, the signal pin of DHT22 is connected to pin GPIO15 for communication between the sensor and the microcontroller.

(Figure. 1 Example output of temperature and humidity bar display)

Program workflow

The working procedure of the sample program is as follows.

  1. Configure the preliminary work.
  2. Initialize OLED.
  3. Start the sensor.
  4. Cycle of the main program
    1. Read the value from the sensor.
    2. Temperature display
      1. Display the temperature value message.
      2. Show default (0)
      3. Show the maximum temperature value.
      4. Draw a horizontal graph.
      5. Calculate the position of the temperature pointer (x1).
      6. Draw a pointer for temperature values.
    3. Display the humidity value.
      1. Display the moisture value message.
      2. Display the initial value of the humidity value (0).
      3. Display the maximum value of the humidity value.
      4. Draw a horizontal graph.
      5. Calculate the position of the humidity pointer (x2).
      6. Draw the position of the humidity value.

Code

From the process of working to write a program as follows

# dhtBar.py
from machine import Pin,I2C
import dht
import machine
import gc
import ssd1306
import time

# system
gc.enable()
gc.collect()
machine.freq(240000000)

# OLED
sclPin = Pin(4)
sdaPin = Pin(5)
i2c = I2C(0,scl=sclPin,sda=sdaPin)
oled = ssd1306.SSD1306_I2C(128,32,i2c)
oled.poweron()
oled.contrast(255)
oled.init_display()
oled.fill(0)
oled.text("JarutEx", 40, 24)
for i in range(32):
    oled.show()
    oled.scroll(0,-1)
    time.sleep_ms(30)

# Sensor
dht22 = dht.DHT22(Pin(15))

# main program
barWidth = 88
barHeight = 6
maxTem = 40.0
maxHum = 100.0

while True:
    dht22.measure()
    tem = dht22.temperature()
    hum = dht22.humidity()
    oled.fill(0)
    oled.text("T={}C".format(tem), 10, 0)
    oled.text("0",0,8)
    oled.text("{}".format(int(maxTem)),100,8)
    for x in range(barWidth):
        oled.pixel(10+x,10,1)
    x1 = int(barWidth*tem/maxTem)
    for y in range(barHeight):
        oled.pixel(x1-1,8+y,1)
        oled.pixel(x1,8+y,1)
        oled.pixel(x1+1,8+y,1)

    oled.text("H={}%".format(hum), 10, 16)
    oled.text("0",0,24)
    oled.text("{}".format(int(maxHum)),100,24)
    for x in range(barWidth):
        oled.pixel(10+x,26,1)
    x2 = int(barWidth*hum/maxHum)
    for y in range(barHeight):
        oled.pixel(x2-1,24+y,1)
        oled.pixel(x2,24+y,1)
        oled.pixel(x2+1,24+y,1)
    oled.show()
    time.sleep_ms(10000)


And to make it look weird the first time the system runs, we have the temperature and humidity pointer run from 0 to the current value. Make the program look like this:

# dhtBar.py
from machine import Pin,I2C
import dht
import machine
import gc
import ssd1306
import time

# system
gc.enable()
gc.collect()
machine.freq(240000000)

# OLED
sclPin = Pin(4)
sdaPin = Pin(5)
i2c = I2C(0,scl=sclPin,sda=sdaPin)
oled = ssd1306.SSD1306_I2C(128,32,i2c)
oled.poweron()
oled.contrast(255)
oled.init_display()
oled.fill(0)
oled.text("JarutEx", 40, 24)
for i in range(32):
    oled.show()
    oled.scroll(0,-1)
    time.sleep_ms(30)

# Sensor
dht22 = dht.DHT22(Pin(15))

# main program
barWidth = 88
barHeight = 6
maxTem = 40.0
maxHum = 100.0
bT0 = True

while True:
    dht22.measure()
    tem = dht22.temperature()
    hum = dht22.humidity()
    if (bT0): # 1st time ให้เอนิเมทกราฟ
        bT0 = False
        x1 = int(barWidth*tem/maxTem)
        x2 = 0
        xAnim = 0
        while (xAnim <= x1):
            oled.fill(0)
            oled.text("T={}C".format(tem), 10, 0)
            oled.text("0",0,8)
            oled.text("{}".format(int(maxTem)),100,8)
            oled.text("H={}%".format(hum), 10, 16)
            oled.text("0",0,24)
            oled.text("{}".format(int(maxHum)),100,24)
            for x in range(barWidth):
                oled.pixel(10+x,10,1)
                oled.pixel(10+x,26,1)
            for y in range(barHeight):
                oled.pixel(xAnim-1,8+y,1)
                oled.pixel(x2-1,24+y,1)
                oled.pixel(xAnim,8+y,1)
                oled.pixel(x2,24+y,1)
                oled.pixel(xAnim+1,8+y,1)
                oled.pixel(x2+1,24+y,1)
            oled.show()
            xAnim += 1
        x2 = int(barWidth*hum/maxHum)
        xAnim = 0
        while (xAnim <= x2):
            oled.fill(0)
            oled.text("T={}C".format(tem), 10, 0)
            oled.text("0",0,8)
            oled.text("{}".format(int(maxTem)),100,8)
            oled.text("H={}%".format(hum), 10, 16)
            oled.text("0",0,24)
            oled.text("{}".format(int(maxHum)),100,24)
            for x in range(barWidth):
                oled.pixel(10+x,10,1)
                oled.pixel(10+x,26,1)
            for y in range(barHeight):
                oled.pixel(x1-1,8+y,1)
                oled.pixel(xAnim-1,24+y,1)
                oled.pixel(x1,8+y,1)
                oled.pixel(xAnim,24+y,1)
                oled.pixel(x1+1,8+y,1)
                oled.pixel(xAnim+1,24+y,1)
            oled.show()
            xAnim += 1
    else:
        oled.fill(0)
        oled.text("T={}C".format(tem), 10, 0)
        oled.text("0",0,8)
        oled.text("{}".format(int(maxTem)),100,8)
        oled.text("H={}%".format(hum), 10, 16)
        oled.text("0",0,24)
        oled.text("{}".format(int(maxHum)),100,24)
        for x in range(barWidth):
            oled.pixel(10+x,10,1)
            oled.pixel(10+x,26,1)
        x1 = int(barWidth*tem/maxTem)
        x2 = int(barWidth*hum/maxHum)
        for y in range(barHeight):
            oled.pixel(x1-1,8+y,1)
            oled.pixel(x2-1,24+y,1)
            oled.pixel(x1,8+y,1)
            oled.pixel(x2,24+y,1)
            oled.pixel(x1+1,8+y,1)
            oled.pixel(x2+1,24+y,1)
        oled.show()
        time.sleep_ms(10000)


The example below adds animation to it and displays the values in the min..max range for easier viewing.

Conclusion

From this article, we will find that displaying different types of graphs requires calculations to adjust values ​​or convert values ​​to suit the display. The principle of this calculation remains the same even after changing the display device. But the parameters of the width, height or position of the display differ depending on the size of the device. And you will find that Micropython’s Python language is sufficient for display as well. Although the actual execution is considerably slower than C/C++, the nature of its functionality is that it reads values ​​from the DHT22 or DHT11 sensors, which perform conversions of 2s and 1s respectively, which is more than enough time for Python to calculate and display results. But programming is easy, editing can be done without compiling and restarting uploading, which takes more time in the development process than Python. That means there are some advantages in disadvantages and there are advantages and disadvantages as well.

Finally, have fun with programming.

If you want to talk with us, feel free to leave comments below!!

(C) 2020-2021, By Jarut Busarathid and Danai Jedsadathitikul

Updated 2021-11-28