Published January 22, 2024 © GPL3+

IAQ Monitoring using Digital Art w/ RPI & Processing & Cloud

Indoor Air Quality monitoring via soothing digital art to control your air quality aesthetically without over-stressing about it.

IntermediateFull instructions provided6 hours729

IAQ Monitoring using Digital Art w/ RPI & Processing & Cloud

Things used in this project

Hardware components

Raspberry Pi 3 Model B+

Sensirion SEN54

SparkFun Breadboard to JST-GHR-06V Cable - 6-Pin x 1.25mm Pitch

FREENOVE 5 Inch Touchscreen Monitor for Raspberry Pi

Software apps and online services

The Processing Foundation Processing

ThingSpeak API

Autodesk Fusion

Story

What is it and motivation behind the idea

Indoor Air quality (IAQ) depends on numerous factors which includes the following:

Temperature: if the temperature is too hot or too cold indoor, it can create discomfort and can impact both our physical and mental health. For example, it can lead to respiratory distress, sleep deprivation and/or depression.
Humidity: depending on the humidity levels indoor, people are more susceptible to airborne pollutants such as allergens, mold, mildew, and viruses. It also directly impacts the comfort.
Particles: PM2.5 are particles of a diameter of 2.5 micrometres or smaller. Due to their size, they are inhalable and are small enough to pass through the lungs, into the bloodstream, and into your organs. High continuous exposure can lead to premature mortality and respiratory diseases. The main sources are dust, smoke and fuel combustion.
VOCs presence: VOC stands for Volatile organic compounds. They are gases containing different chemicals that can be harmful but not all of them are. For example, cleaning agents, paint and fuels are VOCs. For health and smell, it is recommended to ventilate the room if high levels are detected.

Those factors and their consequences can be pretty scary, but my idea is to enable people to monitor their indoor air quality with as less stress as possible. As a user, I am sometimes stressed and overwhelmed by numbers, especially when it is hard to tell if they are good or bad. Same way, red/orange/green type of interfaces stress me out because red and orange colors create a sense of urgency and very bad situation feelings while most of the times, it just indicates that a window needs to be opened or the HVAC system needs to be adjusted a little bit.

That's why I chose sinusoidal curves to represent each factor. The higher the frequency means the higher the value compared to a reference curve. If the value is on the low side, the frequency will be lower than the reference curve.

Example below: The blue curve which is humidity has a lower frequency that the reference: it means that it would be a good idea to turn on the humidifier. No numbers, no red colors, just the user seeing a curve smoother than another one and who can associate it with a simple action item. All other factors are in sync with the reference curves.

Fig 1 - Display when the humidity is low compared to the recommended range

Another example: The pink curve which is VOC has a higher frequency than the reference. The user just used nail polish remover. While it is not super harmful, the smell is strong so the user can decide to open a window for rapid decrease. Or, since the user knows that the nail polish remover is causing it and it is not super harmful, the user can decide to let it go, and watch the curve slowly slow down to sync with the reference. No need to maintain a red flag or scary big number on the screen.

I also wanted to save the data on the cloud in order to be able to visualize them later on. For this purpose, I chose ThingSpeak, which is a IoT analytics platform service that allows me to send data to the cloud using http requests and visualize them easily. The free license allows you to send up to 3 million messages per year (~8, 200/day) and the minimum update frequency is 15 seconds.

As an embedded software engineer, I wanted to experiment with interfacing digital art, sensors and cloud visualization.

System overview

Fig 2 - System overview

Fig 3 - Picture of the hardware setup

Demonstration

Fig 4 - Running application

Launch the application via the touchscreen
Touch the screen to exit the application

Fig 5 - Running application - Low humidity

In the video above, VOC, PM2.5 and temperature curves are in sync with the reference curve: it means the values are good. Humidity curve is much smoother, it means humidity is low: I need to turn on my humidifier.

Fig 6 - Running application - VOC level rising

When I expose the sensor to nail polish remover, the VOC concentration is higher. It is shown by the VOC frequency going higher.

Fig 7 - Running application - VOC level decreasing

When I remove the VOC source, VOC levels go back to normal so the VOC curve sync again with the reference curve.

The Raspberry Pi has been connected to the WIFI beforehand. Also, to code my application, I used a headless setup via SSH and the RealVNC Viewer.

The live data can be visualized on ThingSpeak as shown below.

Fig 8 - ThingSpeak dashboard

How does it work?

For this project, I used the SEN54 sensor from Sensirion. It is an all-in-one module allowing to monitor temperature, humidity, PM and VOCs. It communicates with the Raspberry Pi via I2C.

To configure the periods of the curves I searched the reference values of each factor. I used the following:

Recommended indoor temperature: 20-25C or 68F-76F
Recommended indoor humidity: 40-50%RH (Humidity levels are safe up to 60% but to discourage the growth and spread of mold, it is kept below 50%.)
Recommended VOC index according to Sensirion: <150 (Sensirion VOC index range from 0 to 500 and detects the variation of the VOC concentration)
Recommended PM2.5 levels: the US National Ambient Quality Air standard for a 24h average is 35ug/m3. To be safe, the limit in my code is 35ug/m3.

When the value is outside the recommended ranges above, either higher or lower, the period is proportional to how far from the reference the actual value is. If the curve is almost a flat line, it means that it is close to the minimum value, while if the curve's humps are really close to each other it means that the value is closer to its maximum.

Software breakdown

The I2C library to communicate with the sensor can be found in the SEN5X_I2C.pde file. I used the I2C processing library as well as the interface description of the commands in the SEN54 datasheet. You can find a snippet of it below. The code is very similar to the Arduino code.

import processing.io.*;
I2C i2c;

final byte SEN5X_ADDRESS = 0x69; //I2C address of the SEN5X

void I2C_init(){
  i2c = new I2C(I2C.list()[0]);
}

void startMeasurement(){
  i2c.beginTransmission(SEN5X_ADDRESS);
  i2c.write(0x00);    //I2C command according to the SEN5X datasheet
  i2c.write(0x21);
  i2c.endTransmission();
  delay(50);
}

To create the curves, I based my code on the Sine wave example available in the Basics>Math folder of Processing examples. All functions related to the visual is placed in the Visual_SineWave.pde file.

The workflow of the infinite loop is:

Compute the curves positions
If 2 seconds has passed since the last measurement, fetch the values from the sensor
If the period is stable, check if the values are outside the reference values range. If it is the case, compute the new target period for this value.
Check if the period needs to be increased, decreased or should stay the same.
Add 1, -1 or 0 to each period depending on last step result
Render the curves on the display

The main script is in the SineWave_SEN.pde file. In the setup function, I initialize the display window, the I2C communication and the sensor. Each time the function draw is called, a new frame is computed.

void setup() {
  //Window initialization
  fullScreen();
  noCursor();
  init_visual();
  
  //I2C initialization
  I2C_init();
  
  //Sensor initialization
  reset();
  startMeasurement();
  
}

void draw() {
  background(0);
  textDisplay();
  calcWaves();
  renderWaves();
}

For the cloud visualization, I just needed to implement a POST request via HTTP to log the data in the ThingSpeak server. I only push data every 10 seconds since it is the maximum frequency authorized for the free license version. Each field correspond to 1 sensor value and the values can be monitored live on ThingSpeak.

void httpPostThingspeak(float VOC, float PM, float humidity, float temperature) {
  PostRequest post = new PostRequest("http://api.thingspeak.com/update");
  post.addData("api_key", apiKey);    //your channel private key
  post.addData("field1", str(temperature));
  post.addData("field2", str(humidity));
  post.addData("field3", str(PM));
  post.addData("field4", str(VOC));
  post.send();
}

Enclosure and case design

I wanted to design a case to encapsulate all the hardware. In addition, there are some design considerations needed for the sensor such as isolating the inlet and the outlet to optimize the readings. Those guidelines can be found in the following application note: mechanical_design_assembly_guidelines. To design the enclosure, I used Fusion 360 by Autodesk. I didn't have the time yet, but I will print the parts using a Makerbot Replicator+ 3D printer.

Sensirion has a very convenient mechanical design case for the sensor available directly on their website. In addition to this sensor case, I created a box to fit the screen, the Raspberry Pi and the sensor. For easier installation, I created a back with snap-fit features. All the.step files can be found in the attachments.

Fig 9 - Enclosure FRONT

Fig 10 - Enclosure BACK

Useful Resources/Links to make it happen

SEN54 Sensor product page including the datasheet

SEN54 Arduino snippet code I used to build my library

I2C library for Processing to use the Raspberry Pi I2C interface

Sine Wave Example for Processing I used to start off my project

HTTP requests documentation for ThingSpeak

HTTP for Processing library used

Interesting links about IAQ factors

Schematics

Code

import processing.io.*;
I2C i2c;

final byte SEN5X_ADDRESS = 0x69;

void I2C_init(){
  i2c = new I2C(I2C.list()[0]);
}

void startMeasurement(){
  i2c.beginTransmission(SEN5X_ADDRESS);
  i2c.write(0x00);
  i2c.write(0x21);
  i2c.endTransmission();
  delay(50);
}

void stopMeasurement(){
  i2c.beginTransmission(SEN5X_ADDRESS);
  i2c.write(0x01);
  i2c.write(0x04);
  i2c.endTransmission();
  delay(50);
}

void reset(){
  i2c.beginTransmission(SEN5X_ADDRESS);
  i2c.write(0xD3);
  i2c.write(0x04);
  i2c.endTransmission();
  delay(200);
}

float[] readMeasurement(){
  // Send command to read measurement data (0x03C4)
  i2c.beginTransmission(SEN5X_ADDRESS);
  i2c.write(0x03);
  i2c.write(0xC4);
  i2c.endTransmission();
   // Wait 20 ms to allow the sensor to fill the internal buffer
  delay(20); 
  
  i2c.beginTransmission(SEN5X_ADDRESS);
  // Read measurement data of SEN55, after two bytes a CRC follows
  byte[] data = i2c.read(21);

  //bytes are interpreted as signed int in java so val & 0xff is necessary to keep it as an unsigned value
  //concatenating the bytes and discarding the CRC
  int pm1p0 = (data[0] & 0xff) << 8 | (data[1] & 0xff);
  int pm2p5 = (data[3] & 0xff) << 8 | (data[4] & 0xff);
  int pm4p0 = (data[6] & 0xff) << 8 | (data[7] & 0xff);
  int pm10p0 = (data[9] & 0xff) << 8 | (data[10] & 0xff);
  int humidity = (data[12] & 0xff) << 8 | (data[13] & 0xff);
  int temperature = (data[15] & 0xff) << 8 | (data[16] & 0xff) ;
  int voc = (data[18] & 0xff) << 8 | (data[19] & 0xff);
  
  //applying the scale factor to each value
  float[] values = {pm1p0/10, pm2p5/10, pm4p0/10, pm10p0/10, voc/10, temperature/200, humidity/100};
  
  //Optional printing of values for debug purposes
  for(int i = 0; i<7;i++){
    print(values[i]);
    print(" - ");
  }
  print("\n");
  return values;
 
}

import http.requests.*;
String apiKey = "insert-your-key-here";

void httpPostThingspeak(float VOC, float PM, float humidity, float temperature) {
  PostRequest post = new PostRequest("http://api.thingspeak.com/update");
  post.addData("api_key", apiKey);
  post.addData("field1", str(temperature));
  post.addData("field2", str(humidity));
  post.addData("field3", str(PM));
  post.addData("field4", str(VOC));
  post.send();
  //System.out.println("Reponse Content: " + post.getContent());
  //System.out.println("Reponse Content-Length Header: " + post.getHeader("Content-Length"));
}

int w;              // Width of entire wave
int xspacing = 16;   // How far apart should each horizontal location be spaced
float theta= 0.0;  // Start angle at 0
float amplitude = 35.0;  // Height of wave

float dx;  // Value for incrementing X, a function of period and xspacing
float[][] yvalues;  // Using an array to store height values for the wave

int periodHUM =500, periodVOC=500, periodPM=500, periodTEMP=500,  periodREF=500; // How many pixels before the wave repeats
float dxVOC,dxHUM,dxPM,dxTEMP,dxREF;  // Value for incrementing X, a function of period and xspacing
float[] yvaluesVOC;  // Using an array to store height values for the wave

float[] wavePosition = new float[5];
final int VOC = 0;
final int PM = 1;
final int HUM = 2;
final int TEMP = 3;
final int REF = 4;

int newPeriodHUM =500, newPeriodVOC=500, newPeriodPM=500, newPeriodTEMP=500; //new period target
int periodChangeHUM, periodChangeVOC, periodChangePM, periodChangeTEMP; // value to add to the previous period
float[] values = {0,0,45,22}; //values from the sensor VOC PM HUM TEMP
float[] changePeriods = new float[4]; //if 1 (TRUE) it means that the period is stable
final int CHANGE = 1; //value added or substracted each frame to get to the new period

//SIMULATION VAUES
int periodChange = -1;
float humI2C = 30;
float tempI2C= 35;
float VOCI2C = 200;
float PMI2C = 25;

int startTime, stopTime, cloudTime = 0; //Timer values


//Fetch data from the sensor every 2 seconds
void fetch_data(){
  if(seconds_check() == 1){
    values = readMeasurement();
    println("/"+periodHUM +"/"+periodVOC+"/"+periodPM+"/"+periodTEMP);
    println("/"+newPeriodHUM +"/"+ newPeriodVOC+"/"+ newPeriodPM+"/"+ newPeriodTEMP);
  }
}
//Timer function to see if 2 seconds has passed
int seconds_check(){
  stopTime =  (int) ((millis() - startTime) / 1000.0);
  if(stopTime>2){  
    startTime = millis();
    cloudTime++;
    if(cloudTime == 5){ //every 10seconds send values to Thingspeak server
      httpPostThingspeak(values[VOC], values[PM], values[HUM], values[TEMP]);
      cloudTime = 0;
    }
    return 1;
  }
  return 0;  
}

//Init function for the curves position
void init_visual(){
  w = width+16;
  yvalues = new float[5][w/xspacing];
  yvaluesVOC = new float[w/xspacing];
  
  wavePosition[VOC] = height/6;
  wavePosition[PM] = height*2/6;
  wavePosition[REF] = height*3/6;
  wavePosition[HUM] = height*4/6;
  wavePosition[TEMP] = height*5/6; 
  startTime = millis();  //Timer start
}

//Init function for the legend displayed on the screen
void textDisplay(){
 fill(255);
 textSize(15);
 text("VOC", 20,  wavePosition[VOC]);
 text("PM2.5", 20,  wavePosition[PM]);
 text("Temperature", 20,  wavePosition[TEMP]);
 text("Humidity", 20,  wavePosition[HUM]);
 text("Reference", 20,  wavePosition[REF]);
}

//Function to compute the curves of the next frame
void calcWaves() {
  theta += 0.02;
  dxHUM = (TWO_PI / periodHUM) * xspacing;
  dxVOC = (TWO_PI / periodVOC) * xspacing;
  dxTEMP = (TWO_PI / periodTEMP) * xspacing;
  dxPM = (TWO_PI / periodPM) * xspacing;
  dxREF = (TWO_PI / periodREF) * xspacing;
  // For every x value, calculate a y value with sine function
  float h = theta,v= theta,t= theta,p= theta,r= theta ;
  for (int i = 0; i < yvalues[0].length; i++) {
    yvalues[HUM][i] = sin(h)*amplitude;
    h+=dxHUM;
    yvalues[VOC][i] = sin(v)*amplitude;
    v+=dxVOC;
    yvalues[TEMP][i] = sin(t)*amplitude;
    t+=dxTEMP;
    yvalues[PM][i] = sin(p)*amplitude;
    p+=dxPM;
    yvalues[REF][i] = sin(r)*amplitude;
    r+=dxREF;
  }
  fetch_data(); //fetch sensor values if 2 seconds has passed
  checkValues(); //check if the latest values are in range and compute the new target period
  checkPeriods(); //check if the period is stable 
  
  //change period for next frame if needed
  periodHUM += periodChangeHUM;
  periodTEMP += periodChangeTEMP;
  periodVOC += periodChangeVOC;
  periodPM += periodChangePM;

}

//Check if the period is stable
void checkPeriods(){
  if(newPeriodHUM == periodHUM){
     periodChangeHUM = 0;
     changePeriods[HUM] = 1;
  }else{
    changePeriods[HUM] = 0;
  }
  
  if(newPeriodTEMP == periodTEMP){
     periodChangeTEMP = 0;
     changePeriods[TEMP] = 1;
  }else{
    changePeriods[TEMP] = 0;
  }
  
  if(newPeriodVOC == periodVOC){
      periodChangeVOC = 0;
     changePeriods[VOC] = 1;
  }else{
    changePeriods[VOC] = 0;
  }
  
  if(newPeriodPM == periodPM){
     periodChangePM = 0;
     changePeriods[PM] = 1;
  }else{
    changePeriods[PM] = 0;
  }
}

//If the period is stable, check if the latest values from the sensor are in range and compute new periods 
void checkValues(){
 if(changePeriods[HUM] == 1){
  if(values[HUM]<40){
      newPeriodHUM = (int)(1000 - values[HUM]*12.5);  //maximum is 40%RH*12.5= 500
   }else if(values[HUM]>50){
      newPeriodHUM = 500 - (int)values[HUM]*3; //minimum is 100%RH*3 = 200
   }else{
      newPeriodHUM = 500;
  }
  if(periodHUM<newPeriodHUM){
        periodChangeHUM = CHANGE;
   }else if(periodHUM>newPeriodHUM){
        periodChangeHUM = -CHANGE;
   }
 }
 if(changePeriods[TEMP] == 1){
   if(values[TEMP]<20){
      newPeriodTEMP = 1000 - (int)values[TEMP]*25;  //20C*25= 500
   }else if(values[TEMP]>25){
      newPeriodTEMP = 500 - (int)values[TEMP]*6; //minimum is 200 period at 50C
   }else{
      newPeriodTEMP = 500;
   }
  if(periodTEMP<newPeriodTEMP){
      periodChangeTEMP = CHANGE;
   }else if(periodTEMP>newPeriodTEMP){
      periodChangeTEMP = -CHANGE;
   }
 }
 
  if(changePeriods[VOC] == 1){
   if(values[VOC]>150){
      newPeriodVOC = (int)(500 - values[VOC]*0.6); //minimum is 200 period at 500 VOC index
   }else{
      newPeriodVOC = 500;
   }
    
   if(periodVOC<newPeriodVOC){
      periodChangeVOC = CHANGE;
    }else if(periodVOC>newPeriodVOC){
      periodChangeVOC = -CHANGE;
    }
 }
 
 if(changePeriods[PM] == 1){
   if(values[PM]>35){
      newPeriodPM = (int)(500 - values[PM]*2); //minimum is 200 period at 200UG/M3 PM2.5
   }else{
      newPeriodPM = 500;
   }
  if(periodPM<newPeriodPM){
      periodChangePM = CHANGE;
    }else if(periodPM>newPeriodPM){
      periodChangePM = -CHANGE;
    }
 }
}

//Display the curves on frame
void renderWaves() {
  for(int curve = 0; curve<wavePosition.length; curve++){
    noStroke();
    colorCurve(curve); //color effect
    // A simple way to draw the wave with an ellipse at each location
    for (int x = 0; x < yvalues[curve].length; x++) {  
      ellipse(x*xspacing, wavePosition[curve]+yvalues[curve][x], 16, 16);
    }
  }
  
}

//Color effect of the curves, slightly changing but staying in the same tone
int humColor = 245;
int vocColor = 235;
int pmColor = 221;
int tempColor = 159;
int humColorChange, vocColorChange, tempColorChange, pmColorChange = -1;

void colorCurve(int curve){
  switch(curve){
    case HUM:
      humColor += humColorChange;
      if(humColor==66){
        humColorChange = 1;
      }else if(humColor == 245){
        humColorChange = -1;
      }
      fill(66, humColor, 245);
      break;
    case VOC:
      vocColor += vocColorChange;
      if(vocColor==140){
        vocColorChange = 1;
      }else if(vocColor == 235){
        vocColorChange = -1;
      }
      fill(vocColor, 120, 235);
      break;
    case PM:
      pmColor += pmColorChange;
      if(pmColor==162){
        pmColorChange = 1;
      }else if(pmColor == 221){
        pmColorChange = -1;
      }
      fill(242, pmColor, 58);
      break;
      
    case TEMP:
      tempColor += tempColorChange;
      if(tempColor==75){
        tempColorChange = 1;
      }else if(tempColor == 159){
        tempColorChange = -1;
      }
      fill(219, tempColor, 75);
      break;
      
    case REF:
      fill(230, 229, 227,60); //4th argument is opacity
      break;
  }
}

Credits

Maureen Rakotondraibe

1 project • 2 followers

Embedded systems/software engineer / Passionate about interfacing technologies to create new solutions

IAQ Monitoring using Digital Art w/ RPI & Processing & Cloud

Things used in this project

Hardware components

Software apps and online services

Story

What is it and motivation behind the idea

System overview

Demonstration

How does it work?

Software breakdown

Enclosure and case design

Useful Resources/Links to make it happen

Interesting links about IAQ factors

Custom parts and enclosures

sen5x_support.step

iaq_monitor_body.step

iaq_monitor_back.step

Schematics

Circuit diagram and Pinouts

Code

SineWave_SEN.pde

SEN5X_I2C.pde

HTTP_Thingspeak.pde

Visual_SineWave.pde

Credits

Maureen Rakotondraibe

Comments

Embed the widget on your own site

IAQ Monitoring using Digital Art w/ RPI & Processing & Cloud

IAQ Monitoring using Digital Art w/ RPI & Processing & Cloud

Things used in this project

Hardware components

Software apps and online services

Story

What is it and motivation behind the idea

System overview

Demonstration

How does it work?

Software breakdown

Enclosure and case design

Useful Resources/Links to make it happen

Interesting links about IAQ factors

Custom parts and enclosures

sen5x_support.step

iaq_monitor_body.step

iaq_monitor_back.step

Schematics

Circuit diagram and Pinouts

Code

SineWave_SEN.pde

SEN5X_I2C.pde

HTTP_Thingspeak.pde

Visual_SineWave.pde

Credits

Maureen Rakotondraibe

Comments

Related channels and tags