Assalamualaikum, jumpa lagi di triyonos.com dengan tutorial implementasi pemrograman menarik berikutnya.

Masih membahas tentang realtime chart application dengan menggunakan sensor kelembaban dan temperatur DHT22 sebagai sumber datanya. Kali ini triyonos.com akan membuat realtime chart desktop application menggunakan bahasa pemrograman Python untuk visualisai data kelembaban dan temperatur dari sensor DHT22.

Jika beberapa tutorial sebelum ini aplikasi real time chart yang saya buat merupakan web application baik menggunakan metode AJAX, Server-Sent Events maupun Websocket, semuanya memerlukan web browser untuk menjalankan aplikasinya, untuk tutorial kali ini realtime chart data kelembaban dan temperatur dapat dilihat langsung tanpa menggunakan web browser begitu aplikasi dijalankan.

Untuk hal tersebut artinya aplikasi tidak memerlukan koneksi WiFi sehingga cukup dengan menggunakan papan microcontroller Arduino Nano sebagai media transfer datanya. Arduino Nano yang dirangkai dengan sensor DHT22 digunakan untuk mengukur nilai kelembaban dan temperatur di suatu ruangan, nilai dari hasil pengukuran tersebut dapat dilihat langsung melalui Serial monitor di Arduino IDE karena adanya komunikasi serial antara Arduino dan PC.

Dengan menggunakan library PySerial, Python dapat langsung menerima/membaca langsung data kelembaban dan temperatur dari Serial.print Arduino IDE dan dengan menggunakan library Matplotlib kedua data tersebut masing-masing akan divisualisasikan ke dalam chart kelembaban terhadap waktu dan chart temperatur terhadap waktu.

Untuk pembuatan aplikasi saya akan menginstal PySerial dan Matplotlib menggunakan PyCharm IDE yang sudah terinstal virtualenv (virtual environment).

Sebagai informasi, penggunaan library PySerial ini pernah penulis bahas sebelumnya pada tutorial Pycharm Flask OpenCV Serial Print Arduino Sensor Temperatur MLX90614 dengan Pyserial.

Selanjutnya langsung saja kita mulai praktik pembuatan aplikasinya yang prosesnya akan saya bagi menjadi 2 bagian, yaitu:

1. Rangkaian Komponen Elektrikal dan Upload Sketch.
2. Plotting nilai kelembaban dan temperatur ke dalam chart Matplotlib di PyCharm IDE.

1. Rangkaian Komponen Elektrikal dan Upload Sketch

Komponen elektrikal yang harus diperlukan yaitu:

1. Arduino Nano

2. Breadboard

3. DHT22

Rangkai komponen-komponen di atas seperti wiring diagram berikut:

Copy .ino sketch di bawah ini:

#include <DHT.h>;

// Constants
#define DHTPIN 2            //what pin we're connected to
#define DHTTYPE DHT22       //DHT 22  (AM2302)
DHT dht(DHTPIN, DHTTYPE);   //Initialize DHT sensor for normal 16mhz Arduino

// Variables
float hum;  //Stores humidity value
float temp; //Stores temperature value

unsigned long previousMillis = 0;        // will store last time Serial.print
const long interval = 5000;           // interval at which to Serial.print (milliseconds)

void setup() {
  Serial.begin(9600);
  dht.begin();
}

void loop() {
  // Read data and store it to variables hum and temp
  hum = dht.readHumidity();
  temp= dht.readTemperature();

  if (millis() - previousMillis >= interval) {
    previousMillis = millis();

    Serial.print(hum);
    Serial.print("x");
    Serial.println(temp);
  }

  // delay(5000); //Delay 5 sec.
}

			

Create New Sketch di Arduino IDE, kemudian paste-kan sketch di atas, kemudian klik Upload dan tunggu sampai Done uploading.

Jika tidak ada error, maka tampilan serial monitor pada Arduino IDE akan seperti gambar di bawah ini:

2. Plotting nilai kelembaban dan temperatur ke dalam chart Matplotlib di PyCharm IDE.

Buka Pycharm IDE, kemudian create new project. Di sini projectnya saya beri nama matplotlibPyserialDht22, kemudian click tombol Create.

Install package matplotlib dan pyserial melalui Pycharm IDE, kemudian create New Python file pada root project folder. Di sini saya filenya saya beri nama app.py.

Kemudian copy .py script di bawah ini:

import datetime as dt
import matplotlib.pyplot as plt
import matplotlib.animation as animation
import serial

# set to your arduino serial COM port
ser = serial.Serial('COM13', baudrate=9600)

# Create figure for plotting
fig = plt.figure(figsize=(8, 7))
ax1 = fig.add_subplot(2, 1, 1)
x1 = []
y1 = []

ax2 = fig.add_subplot(2, 1, 2)
x2 = []
y2 = []


def animate(i, x1, y1, x2, y2):
    arduinoData = ser.readline().strip()
    decoded_values = str(arduinoData.decode("ascii"))
    list_values = decoded_values.split('x')

    humidity = float(list_values[0])

    # Add x and y to lists
    x1.append(dt.datetime.now().strftime('%H:%M:%S'))
    y1.append(humidity)

    # Limit x and y lists to 20 items
    x1 = x1[-20:]
    y1 = y1[-20:]


    ax1.clear()
    ax1.plot(x1, y1)

    ax1.set_title('Humidity')
    ax1.set_xlabel('Time')
    ax1.set_ylabel('%')
    ax1.tick_params(axis='x', labelrotation = 50)

    # space between the plots
    plt.tight_layout()

    temperature = float(list_values[1])

    # Add x and y to lists
    x2.append(dt.datetime.now().strftime('%H:%M:%S'))
    y2.append(temperature)

    # Limit x and y lists to 20 items
    x2 = x2[-20:]
    y2 = y2[-20:]

    ax2.clear()
    ax2.plot(x2, y2)

    ax2.set_title('Temperature')
    ax2.set_xlabel('Time')
    ax2.set_ylabel('Celcius')
    ax2.tick_params(axis='x', labelrotation=50)


			

Kemudian paste script .py di atas ke app.py di Pycharm IDE.

Running App