Temperature and Humidity Chart With OLED Display

Introduction: Temperature and Humidity Chart With OLED Display

About: Do you like technology? Follow my channel on Youtube and my Blog. In them I put videos every week of microcontrollers, arduinos, networks, among other subjects.

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.

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

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>


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


#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


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 }


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); }

Step 6: More

See more in www.fernandok.com.

Be the First to Share


    • First Time Author Contest

      First Time Author Contest
    • Leather Challenge

      Leather Challenge
    • Space Challenge

      Space Challenge