Temperature and Humidity Chart With OLED Display

Today, we are going to discuss about a digital thermometer that displays information concerning temperature and humidity, which are read by a sensor and stamped on a color chart, all in real time. In this Project, I explain the use of the serial OLED display, which is a 2c display that enables the printing of data using an AM2302 DHT22 sensor, with a NodeMCU ESP8266.

In this video, therefore, we have the DHT22, an old and well-known temperature and humidity meter, which sends the collected data to be printed on the display. This will be shown in a colored chart, as in the photo above.

Step 1: Display OLED 96" SSD 1331

In our example, the display used was 0.96 of an inch. It is a very small, compact display. But it has excellent image quality and displays temperature information in degrees, and humidity in percentage.

Step 2: Humidity and Temperature Sensor AM2302 DHT22

This sensor model actually has displayed three pins, instead of four. That's because at number 2, we have the DATA pin, which we use to send data to the ESP8266.

Step 3: Assembly

In the circuit, we have the display showing temperature and humidity, which is connected to the ESP8266, an ESP12 model. The schematic that we have in the image below has no big mystery, but be careful not to miss the pins. On the left side, the NodeMCU is connected to the display and to the sensor. Just follow them.

Step 4: Libraries

Add the following "DHT sensor library" library for communication with the humidity and temperature sensor.

Simply access "Sketch >> Include Libraries >> Manage Libraries ..."

Now, add the following library "Adafruit-GFX-Library-master".

Simply access "Sketch >> Include Libraries >> Manage Libraries ..."

Next, add the following "Adafruit Unified Sensor" library.

Simply access "Sketch >> Include Libraries >> Manage Libraries ..."

Finally, add the "Adafruit-SSD1331-OLED" library for communication with the OLED display.

Access the link and download the library.

Unzip the file and paste it into the libraries folder of the Arduino IDE.

C: / Program Files (x86) / Arduino / libraries

Step 5: Code

First, let's add the libraries that will be used in our code.

#include <Adafruit_GFX.h>
#include <Adafruit_SSD1331.h>
//#include <SPI.h>
#include <DHT.h>

Definitions

We see below the variables that we will use during the program and the instances of the objects.

// pinagem para o NodeMCU ESP8266
#define sclk D5 #define mosi D7 #define cs D8 #define rst D3 #define dc D1 // definição das cores que serão utilizadas #define BLACK 0x0000 #define RED 0xF800 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF

Proceeding:

#define DHTPIN D6 // pino de dados do DHT será ligado no D6 do esp
#define DHTTYPE DHT22 // tipo do sensor // construtor do objeto para comunicar com o sensor DHT dht(DHTPIN, DHTTYPE); // contrutor do objeto para comunicar com o display OLED Adafruit_SSD1331 display = Adafruit_SSD1331(cs, dc, mosi, sclk, rst); //variáveis que armazenarão os valores lidos da umidade e temperatura int umidade = 0; int temperatura = 0; //variável que armazenará o valor da coordenada Y para desenharmos uma linha de exemplo //que varia os valores de 1 em 1 int linhaExemplo = 20; int fator = 1; //indicará se somaremos ou subtrairemos uma unidade na variável linhaExemplo

Continuing, we deal with the positioning of the chart:

//variável responsavel por contar o número de leituras realizadas e indicador do valor no eixo X
int leituraAtual = 1; //definições do posicionamento dos eixos X e Y #define POS_X_GRAFICO 5 #define POS_Y_GRAFICO 1 #define ALTURA_GRAFICO 50 #define COMPRIMENTO_GRAFICO 90 //definição da coordenada onde escreveremos os dados de temperatura e umidade #define POS_X_DADOS 10 #define POS_Y_DADOS 54

Setup

In the setup () function, we initialize the variable "dht", which is responsible for the communication with the humidity sensor and temperature. We will also initialize the "display" variable for communication with the OLED display.

void setup(void) {
  Serial.begin(9600);
 
  //inicializa o objeto para comunicarmos com o sensor DHT
  dht.begin();
 
  //inicializa o objeto para comunicarmos com o displa OLED
  display.begin();

We continue to configure some of the display characteristics and to draw the X and Y axes of the graph:

//pinta a tela toda de preto
  display.fillScreen(BLACK);
 
  //os comandos a seguir irão desenhar as linhas dos eixos cartesianos na cor branca
  //drawFastVLine(x,y,width,color) --> linha vertical
  display.drawFastVLine(POS_X_GRAFICO,POS_Y_GRAFICO, ALTURA_GRAFICO,WHITE); //eixo Y
  //drawFastHLine(x,y,width,color) --> linha horizontal
  display.drawFastHLine(POS_X_GRAFICO,ALTURA_GRAFICO+1,COMPRIMENTO_GRAFICO,WHITE); //eixo X
 
  //desenha 2 pixels na tela bem no início do eixo Y para formar uma "seta"
  display.drawPixel(4,2,WHITE);
  display.drawPixel(6,2,WHITE);
 
  //desenha 2 pixels na tela bem no final do eixo X para formar uma "seta"
  display.drawPixel(POS_X_GRAFICO+COMPRIMENTO_GRAFICO-2,POS_Y_GRAFICO+ALTURA_GRAFICO-1,WHITE);
  display.drawPixel(POS_X_GRAFICO+COMPRIMENTO_GRAFICO-2,POS_Y_GRAFICO+ALTURA_GRAFICO+1,WHITE);

Now we will draw on the screen in the specific place where we will indicate the value of Temperature (T) and Humidity (U) in real time.

//configura o tamnaho do texto que escreveremos em tela
  display.setTextSize(1);
  //configura a cor branca para o texto
  display.setTextColor(WHITE);
 
  //posiciona o cursor para escrita
  display.setCursor(POS_X_DADOS, POS_Y_DADOS);
  display.print("T: "); //indicando a temperatura
  display.setCursor(POS_X_DADOS+35, POS_Y_DADOS);
  display.print(" U: "); //indicando a umidade
 
   
}

Loop

In the loop () function, we will retrieve the humidity and temperature that is read by the sensor, and then write on the screen at the specific location. At each interval of 5 seconds, the value is read from the sensor and written on the screen.

void loop() {
 
  //faz a leitura da umidade
  umidade = dht.readHumidity();
  Serial.println(umidade);
  //faz a leitura da temperatura
  temperatura = dht.readTemperature();
  Serial.println(temperatura);
 
//limpa a área onde colocamos o valor da temperatura e da umidade
  display.fillRect(POS_X_DADOS+15, POS_Y_DADOS, 20, 10, BLACK);
  display.fillRect(POS_X_DADOS+55, POS_Y_DADOS, 30, 10, BLACK);
 
//reposiciona o cursor para escrever a temperatura
  display.setCursor(POS_X_DADOS+15, POS_Y_DADOS);  
   
  display.setTextColor(RED);
  display.print(temperatura);
  display.print((char)247);
 
  //reposiciona o cursor para escrever a umidade
  display.setCursor(POS_X_DADOS+55, POS_Y_DADOS);  
   
  display.setTextColor(CYAN);
  display.print(umidade);
  display.print("%");

Let's see below how to put the points on the chart according to the reading.

//mapeando o valor das variáveis para colocar no gráfico
  //necessário pois o display tem 64px de altura e separamos apenas 50 para o gráfico
  //umidade pode ser lida de 0-100
  int temperaturaMepeada = map(temperatura,0,100,0,50);
  int umidadeMapeada = map(umidade,0,100,0,50);
   
 
  //desenha na tela o ponto referente aos valores lidos do sensor
  display.drawPixel(POS_X_GRAFICO+leituraAtual, ALTURA_GRAFICO-temperaturaMepeada, RED);
  display.drawPixel(POS_X_GRAFICO+leituraAtual, ALTURA_GRAFICO-umidadeMapeada, CYAN);  
 
  //desenha na tela o ponto referente a nossa linha de exemplo que fica variando
  display.drawPixel(POS_X_GRAFICO+leituraAtual, ALTURA_GRAFICO-linhaExemplo, YELLOW);  
 
  //aqui controlamos nossa linha de exemplo, quando chega no valor máximo decrementamos o valor
  //até um valor mínimo determinado (no nosso caso 10), e a partir daí, incrementa novamente
  if(linhaExemplo == 50) fator = -1;
  else if(linhaExemplo == 10) fator = 1;
 
  //soma o valor de linhaExemplo
  linhaExemplo += fator;
 
  //incrementa o contador de leituras realizadas
  leituraAtual++;

Finally we will write our logic to clear the graph screen as soon as it reaches its limit.

//se a leitura chegar em 90 (número máximo do eixo X) então limparemos a área do gráfico para voltarmos a desenhar.
  if(leituraAtual == 90)
  {
    //limpa a área toda do gráfico
    display.fillRect(POS_X_GRAFICO+1, POS_Y_GRAFICO-1, COMPRIMENTO_GRAFICO, ALTURA_GRAFICO-1, BLACK);
    leituraAtual = 1; //volta o contador de leitura para 1 (nova coordenada X)   
 
    //como limpamos a área do gráfico, temos que redesenhar os pontos da "seta"
    display.drawPixel(6,2,WHITE);
    display.drawPixel(POS_X_GRAFICO+COMPRIMENTO_GRAFICO-2,POS_Y_GRAFICO+ALTURA_GRAFICO-1,WHITE);
  }
 
    //intervalo de tempo para realizarmos nova leitura de dados
    delay(5000);
}