ESP8266 - Display de 7 Segmentos e 4 Dígitos com 74HC595
Vamos colocar seu ESP8266 para funcionar com um display de 7 segmentos e 4 dígitos controlado por um registrador de deslocamento 74HC595. O ESP8266 é um microcontrolador Wi-Fi compacto e acessível - perfeito para projetos IoT leves que precisam de uma leitura local.
Veja o que vamos abordar:
- Como ligar o módulo display 74HC595 ao ESP8266.
- Como exibir números inteiros e de ponto flutuante.
- Como mostrar texto e temperatura com o símbolo de grau.
- Como apresentar a hora no formato HH.MM com um ponto piscando.
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Conhecendo o Display de 7 Segmentos e 4 Dígitos com 74HC595
Quatro dígitos de 7 segmentos controlados por um registrador de deslocamento 74HC595. São necessários apenas 3 pinos de dados do microcontrolador. O registrador recebe dados seriais, converte-os em saída paralela para os segmentos, e a biblioteca cuida da multiplexação entre os dígitos. Você chama print() uma vez e depois continua chamando loop() para manter o display ativo.
| Função | Pino | Descrição |
|---|---|---|
| SCLK (SH_CP) | Clock Serial | Envia os dados para o registrador de deslocamento no ritmo do clock |
| RCLK (ST_CP) | Clock do Registrador | Trava os dados nos pinos de saída |
| DIO (DS) | Entrada de Dados | Linha de dados serial |
| VCC | Alimentação | 3.3V ou 5V |
| GND | Terra | Terra comum |
Diagrama de Ligação
Conecte o módulo display ao ESP8266 NodeMCU:
- SCLK ao D5 (GPIO14)
- RCLK ao D6 (GPIO12)
- DIO ao D7 (GPIO13)
- VCC ao 3.3V
- GND ao GND
This image is created using Fritzing. Click to enlarge image
Para mais informações, veja Pinagem do ESP8266 e como alimentar o ESP8266 e outros componentes.
Adicionando a Biblioteca
- Conecte o ESP8266 ao seu computador com um cabo USB.
- Abra a Arduino IDE. Selecione NodeMCU 1.0 (ESP-12E Module) como placa e escolha a porta correta.
- Vá até a seção Libraries à esquerda.
- Procure por "DIYables_4Digit7Segment_74HC595" e encontre a biblioteca da DIYables.
- Toque em Install. Selecione a versão 2.0.0 ou posterior.
A biblioteca já vem com tudo o que precisa - sem dependências extras.
Código de Início Rápido
O sketch mais curto para ver resultados:
#include <DIYables_4Digit7Segment_74HC595.h>
#define SCLK_PIN D5 // GPIO14
#define RCLK_PIN D6 // GPIO12
#define DIO_PIN D7 // GPIO13
DIYables_4Digit7Segment_74HC595 display(SCLK_PIN, RCLK_PIN, DIO_PIN);
void setup() {
display.begin();
display.print(1234);
}
void loop() {
display.loop();
}
Configure com begin(), defina o valor do display com print() e mantenha display.loop() em execução. Use display.delay() em vez de delay() para que o display continue sendo atualizado.
Experimente - Exibir Inteiros
Percorre números inteiros e mostra o preenchimento com zeros.
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-74hc595-4-digit-7-segment-display
*/
#include <DIYables_4Digit7Segment_74HC595.h>
// Pin configuration - change these to match your wiring
#define SCLK_PIN 5 // The ESP8266 pin connected to the Serial clock pin of 7-segment display
#define RCLK_PIN 6 // The ESP8266 pin connected to the Register clock / latch pin of 7-segment display
#define DIO_PIN 7 // The ESP8266 pin connected to the Data (DS) pin of 7-segment display
DIYables_4Digit7Segment_74HC595 display(SCLK_PIN, RCLK_PIN, DIO_PIN);
int numbers[] = {0, 42, 1234, -5, -123, 9999};
int numCount = 6;
int currentIndex = 0;
bool showZeroPad = false;
unsigned long lastChange = 0;
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("4-Digit 7-Segment 74HC595 - Integer Example");
}
void loop() {
display.loop(); // Must be called frequently to refresh the display
if (millis() - lastChange >= 2000) {
lastChange = millis();
if (!showZeroPad) {
display.print(numbers[currentIndex]);
Serial.print("Displaying: ");
Serial.println(numbers[currentIndex]);
currentIndex++;
if (currentIndex >= numCount) {
currentIndex = 0;
showZeroPad = true;
}
} else {
display.print(42, true); // Shows "0042"
Serial.println("Displaying: 0042 (zero-padded)");
showZeroPad = false;
}
}
}
Execute o Código
- Ligue o display ao ESP8266 como mostrado acima.
- Conecte o ESP8266 ao seu computador via USB.
- Na Arduino IDE, escolha a placa e a porta, cole o código e pressione Upload.
- Abra o Serial Monitor para conferir a saída.
O display percorre 0, 42, 1234, -5, -123, 9999 e depois 0042 (preenchido com zeros).
Métodos Úteis
| Método | Finalidade | Como Chamar |
|---|---|---|
| print(int) | Mostrar um inteiro | display.print(1234) |
| print(int, true) | Inteiro com zeros à esquerda | display.print(42, true) |
| loop() | Manter o display atualizado | display.loop() |
Experimente - Exibir Números Decimais
Números decimais com casas decimais automáticas e fixas.
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-74hc595-4-digit-7-segment-display
*/
#include <DIYables_4Digit7Segment_74HC595.h>
// Pin configuration - change these to match your wiring
#define SCLK_PIN 5 // The ESP8266 pin connected to the Serial clock pin of 7-segment display
#define RCLK_PIN 6 // The ESP8266 pin connected to the Register clock / latch pin of 7-segment display
#define DIO_PIN 7 // The ESP8266 pin connected to the Data (DS) pin of 7-segment display
DIYables_4Digit7Segment_74HC595 display(SCLK_PIN, RCLK_PIN, DIO_PIN);
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("4-Digit 7-Segment 74HC595 - Float Example");
}
void loop() {
// Auto decimal placement
display.print(1.5); // Shows " 1.5"
Serial.println("Auto decimal: 1.5");
display.delay(2000);
display.print(12.34); // Shows "12.34"
Serial.println("Auto decimal: 12.34");
display.delay(2000);
display.print(3.141); // Shows "3.141"
Serial.println("Auto decimal: 3.141");
display.delay(2000);
display.print(-1.2); // Shows "-1.20"
Serial.println("Auto decimal: -1.20");
display.delay(2000);
display.print(0.5); // Shows " 0.5"
Serial.println("Auto decimal: 0.5");
display.delay(2000);
// Fixed decimal places
display.print(23.5, 1); // 1 decimal place: shows "23.5"
Serial.println("1 decimal place: 23.5");
display.delay(2000);
display.print(1.5, 2); // 2 decimal places: shows "1.50"
Serial.println("2 decimal places: 1.50");
display.delay(2000);
// Zero-padded
display.print(1.5, 2, true); // Shows "01.50"
Serial.println("2 decimal places, zero-padded: 01.50");
display.delay(2000);
}
Execute o Código
- Faça o upload e abra o Serial Monitor.
Mostra números decimais com casas automáticas, depois com 1 e 2 casas fixas, e a saída preenchida com zeros.
Experimente - Texto e Temperatura
Textos, símbolo de grau e valores de temperatura.
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-74hc595-4-digit-7-segment-display
*/
#include <DIYables_4Digit7Segment_74HC595.h>
// Pin configuration - change these to match your wiring
#define SCLK_PIN 5 // The ESP8266 pin connected to the Serial clock pin of 7-segment display
#define RCLK_PIN 6 // The ESP8266 pin connected to the Register clock / latch pin of 7-segment display
#define DIO_PIN 7 // The ESP8266 pin connected to the Data (DS) pin of 7-segment display
DIYables_4Digit7Segment_74HC595 display(SCLK_PIN, RCLK_PIN, DIO_PIN);
const char* texts[] = {"HELP", "Hi", "COOL", "done"};
int textCount = 4;
int currentIndex = 0;
int phase = 0;
unsigned long lastChange = 0;
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("4-Digit 7-Segment 74HC595 - Text and Degree Example");
}
void loop() {
display.loop(); // Must be called frequently to refresh the display
if (millis() - lastChange >= 2000) {
lastChange = millis();
if (phase == 0) {
// Display text strings
display.print(texts[currentIndex]);
Serial.print("Text: ");
Serial.println(texts[currentIndex]);
currentIndex++;
if (currentIndex >= textCount) {
currentIndex = 0;
phase = 1;
}
} else if (phase == 1) {
// Display temperature 25 degrees C
display.printTemperature(25, 'C');
Serial.println("Temperature: 25 C");
phase = 2;
} else if (phase == 2) {
// Display temperature 72 degrees F
display.printTemperature(72, 'F');
Serial.println("Temperature: 72 F");
phase = 3;
} else if (phase == 3) {
// Display degree symbol using string with DEGREE_CHAR constant
char degStr[5];
degStr[0] = '2';
degStr[1] = '5';
degStr[2] = DEGREE_CHAR;
degStr[3] = 'C';
degStr[4] = '\0';
display.print(degStr);
Serial.println("String with degree: 25 deg C");
phase = 4;
} else {
// Display string with dots
display.print("1.2.3.4");
Serial.println("Dots: 1.2.3.4");
phase = 0;
}
}
}
Execute o Código
- Faça o upload e abra o Serial Monitor.
Mostra "HELP", "Hi", "COOL", "done", temperaturas e pontos embutidos.
Experimente - Hora
Formato de relógio HH.MM com separador piscando.
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-74hc595-4-digit-7-segment-display
*/
#include <DIYables_4Digit7Segment_74HC595.h>
// Pin configuration - change these to match your wiring
#define SCLK_PIN 5 // The ESP8266 pin connected to the Serial clock pin of 7-segment display
#define RCLK_PIN 6 // The ESP8266 pin connected to the Register clock / latch pin of 7-segment display
#define DIO_PIN 7 // The ESP8266 pin connected to the Data (DS) pin of 7-segment display
DIYables_4Digit7Segment_74HC595 display(SCLK_PIN, RCLK_PIN, DIO_PIN);
int hours = 12;
int minutes = 30;
bool colonOn = true;
unsigned long lastToggle = 0;
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("4-Digit 7-Segment 74HC595 - Time Example");
Serial.println("Displaying 12:30 with blinking dot separator");
}
void loop() {
display.loop(); // Must be called frequently to refresh the display
if (millis() - lastToggle >= 500) {
lastToggle = millis();
display.printTime(hours, minutes, colonOn);
colonOn = !colonOn; // Toggle dot separator every 500ms for blinking effect
}
}
Execute o Código
- Faça o upload e abra o Serial Monitor.
Exibe 12.30 com o ponto piscando a cada 500ms.
Experimente - Piscar
Faz diferentes valores piscarem, ligando e desligando.
/*
* Este código de ESP8266 NodeMCU foi desenvolvido por pt.newbiely.com
* Este código de ESP8266 NodeMCU é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/esp8266/esp8266-74hc595-4-digit-7-segment-display
*/
#include <DIYables_4Digit7Segment_74HC595.h>
// Pin configuration - change these to match your wiring
#define SCLK_PIN 5 // The ESP8266 pin connected to the Serial clock pin of 7-segment display
#define RCLK_PIN 6 // The ESP8266 pin connected to the Register clock / latch pin of 7-segment display
#define DIO_PIN 7 // The ESP8266 pin connected to the Data (DS) pin of 7-segment display
DIYables_4Digit7Segment_74HC595 display(SCLK_PIN, RCLK_PIN, DIO_PIN);
// States: 0 = blink int, 1 = blink float, 2 = blink text
int phase = 0;
int blinkCount = 0;
bool isOn = true;
unsigned long lastAction = 0;
unsigned long pauseUntil = 0;
void setup() {
Serial.begin(9600);
display.begin();
Serial.println("4-Digit 7-Segment 74HC595 - Blink Example");
display.print(1234);
Serial.println("Blinking: 1234");
}
void loop() {
display.loop(); // Must be called frequently to refresh the display
unsigned long now = millis();
// Pause between phases
if (now < pauseUntil) return;
if (now - lastAction >= 300) {
lastAction = now;
if (isOn) {
display.off();
isOn = false;
} else {
display.on();
isOn = true;
blinkCount++;
if (blinkCount >= 5) {
blinkCount = 0;
pauseUntil = now + 1000;
phase++;
if (phase > 2) phase = 0;
switch (phase) {
case 0:
display.print(1234);
Serial.println("Blinking: 1234");
break;
case 1:
display.print(12.34);
Serial.println("Blinking: 12.34");
break;
case 2:
display.print("HELP");
Serial.println("Blinking: HELP");
break;
}
}
}
}
}
Execute o Código
- Faça o upload e abra o Serial Monitor.
Pisca 1234, depois 12.34, depois "HELP" - cinco vezes cada.
Se Algo Não Estiver Funcionando
- Display em branco: Verifique a ligação de VCC, GND e dos GPIO. Confirme que os números dos pinos coincidem com o seu código.
- Caracteres errados: O padrão é ânodo comum. Para cátodo comum, use DIYables_4Digit7Segment_74HC595 display(D5, D6, D7, false).
- Cintilação: Substitua delay() por display.delay() para manter a multiplexação ativa.
Dica: O ESP8266 tem poucos pinos GPIO. Confira se nenhum dos pinos que você está usando entra em conflito com os modos de boot (GPIO0, GPIO2, GPIO15).
Suporte de Plataformas
A biblioteca usa apenas APIs padrão do Arduino e funciona em todas as plataformas compatíveis com Arduino, incluindo o ESP8266.