Real Time Temperature and Humidity Plot Using QML and QCharts

Hello! In this post, I will show you how to plot the data in real-time using QML and QCharts Library.

QML Application

In this post, I am using the sensor BME280 which can give us temperature, humidity and pressure data, and we will only use the temperature and humidity for this post. This data is transmitted over Serial Port with the help of Arduino UNO. Then this data is received by Qt using the QSerialPort library and then plotted in real-time using QCharts Library.

I will not explain the BME280 sensor part, as this is very basic and can be found in several other posts on the internet, but I will share the connection diagram and the code I am using for Arduino UNO.

Arduino UNO Connection with BME280 Sensor Module

The Arduino IDE source code which I am using is as below, note in order to make this code work you guys have to install Adafruit BME280 Sensor Library.

#include <Wire.h>

#include <Adafruit_Sensor.h>

#include <Adafruit_BME280.h>

#define SEALEVELPRESSURE_HPA (1013.25)

Adafruit_BME280 bme;            // I2C

unsigned long delayTime;

#define BUFFER_SIZE         (20u)

char buffer[BUFFER_SIZE];

void printValues()

{

  uint8_t temperature = (uint8_t)bme.readTemperature();

  uint8_t humidity = (uint8_t)bme.readHumidity();

  int n = snprintf(buffer, BUFFER_SIZE, "%.2d,%.2d\r\n", temperature, humidity);

  Serial.print( buffer );

}

void setup()

{

  Serial.begin(9600);

  delay(100);

  unsigned status;

 

  // default settings

  status = bme.begin();  

  // You can also pass in a Wire library object like &Wire2

  // status = bme.begin(0x76, &Wire2)

  if (!status)

  {

    Serial.println("Could not find a valid BME280 sensor, check wiring, address, sensor ID!");

    Serial.print("SensorID was: 0x"); Serial.println(bme.sensorID(),16);

    Serial.print("        ID of 0xFF probably means a bad address, a BMP 180 or BMP 085\n");

    Serial.print("   ID of 0x56-0x58 represents a BMP 280,\n");

    Serial.print("        ID of 0x60 represents a BME 280.\n");

    Serial.print("        ID of 0x61 represents a BME 680.\n");

    while (1) delay(10);

  }

  delayTime = 1000;

}

void loop()

{

  printValues();

  delay(delayTime);

}

Writing Qt Program

The Qt Program can be divided into multiple steps, and they are mentioned below.

• Get the list of available COM ports available on the Computer
• Updating the Combo Box with the list of available serial ports
• Updating the data in line series
• Scrolling the plot when the configured time frame is reached

Get the List of the available COM Ports

TODO steps in the coming days.

Get the code from GitHub.

Download the Code Directly.