top of page

ESP8266 Web server Controlled 8x8 Dot LED Matrix and Scroll


This tutorial is for How to customize the 8x8 dot LED display and scrolling text on the MAX7219 Matrix display using a custom webpage.


Components Required

Node MCU ESP8266 Development Board - 1 no

MAX7219 8×8 Dot Matrix module - 1



Circuit Diagram


Max7219 Single Display

This is Dot Led Matrix Module incorporating MAX7219 Driver chip. By using this dot LED module in your upcoming project, you will be able to add some great cool animation.

The individual module features 8×8 LED’s, each controlled very precisely by the MAX7219 driver to generate the color pattern you wish. The great advantage of using this is users will have control over all of the 64 LED by just connecting 3 output communication wires to microcontrollers like Arduino etc.

Connecting the two modules is also very easy. Only connect the output pins of the previous breakout board to the input pins of the new module, thus with such arrangement, you can connect as many DOT LED Modules to the Arduino as you wish!!! Great……

The MAX7219 Dot Led Matrix Module is a serial input common-cathode driver that interfaces micro-controllers to LED matrices. All common micro-controllers can be connected to this module by using a 4-wire serial interface. Each output can be addressed without refreshing the entire display. This module requires only 3 I/O lines for driving the display, making it ideal for your microcontroller projects. Only one external register is used to set the segment current of each LED.

  • Input Voltage: 3.7 to 5.3 V

  • Input Current: 320 mA

Pin Connection from Dot LED Module to the ESP8266

Vcc – 5V GND – GND DIN – Pin 14 CS – Pin 5 CLK – Pin 4


Features

  • Requires only 3 communication wires of MCU

  • Cascading multiple Matrix LED Module is very easy


Installing the library

To install the library navigate to the Sketch > Include Library > Manage Libraries… Wait for Library Manager to download libraries index and update list of installed libraries.

Download Led Control_Library , we need to use this library for Max7219 Matrix display

Download WIFI manager , we need to use this library for wifi configuration.


In your Arduino IDE, to install the libraries go to Sketch > Include Library > Add .ZIP library… and select the library you’ve just downloaded.


After installing the required libraries, copy the following code to your Arduino IDE.


You need to webpage.h Download

and fonts.h Download

arduino code

#include <ESP8266WiFi.h>

#include <DNSServer.h> //needed for wifimanager library

#include <ESP8266WebServer.h> //needed for wifimanager library

#include <WiFiManager.h> //https://github.com/tzapu/WiFiManager

const char *ssid = "TP-Link_3200",

*password = "95001121379884265554";

#include <WiFiClient.h>

#include <ESP8266WebServer.h>

ESP8266WebServer server(80);

#include "webpage.h"

boolean showSaved = true;


#include "fonts.h"

#include <LedControl.h>

int DIN = 14; // D5 OF NODEMCU

int CS = 5; // D1 ''

int CLK = 4; // D2 ''

LedControl lc = LedControl(DIN, CLK, CS, 0);

String last_matrix = "0000000000000000000000000000000000000000000000000000000000000000";

#include <EEPROM.h>

int eeprom_addr = 0;


void setup() {


Serial.begin(115200);

Serial.println();

Serial.println("LED MATRIX web server");

EEPROM.begin(512);


lc.shutdown(0, false); //The MAX72XX is in power-saving mode on startup

// lc.setScanLimit(0, 8); // necessary??

lc.setIntensity(0, 3); // Set the brightness to maximum value 0-15

lc.clearDisplay(0); // and clear the display


displaySaved(); // display last saved matrix


pinMode(LED_BUILTIN, OUTPUT); // blink onboard LED

for (int i = 0; i < 10; i++) {

digitalWrite(LED_BUILTIN, LOW);

delay(100);

digitalWrite(LED_BUILTIN, HIGH);

delay(100);

}


Serial.println("configure wifi manager...");

WiFiManager wifiManager;

// wifiManager.resetSettings(); // known networks are saved so need to reset for testing

wifiManager.autoConnect("matrix");

digitalWrite(LED_BUILTIN, LOW); // inverted pin - LOW is on

Serial.println("connected to wifi!");

server.on("/", handleRoot);

server.begin();

Serial.print("HTTP server started on ");

Serial.println(WiFi.localIP());


scrollText("Dofbot AI Shop IP:" + WiFi.localIP().toString(), 50);


displaySaved(); // display last saved matrix


delay(2000);

}


void loop() {


server.handleClient();


}


void printByte(const byte character [])

{

int i = 0;

for (i = 0; i < 8; i++)

{

lc.setRow(0, i, character[i]);

}

}



void printInt(int character [])

{

int i = 0;

for (i = 0; i < 8; i++)

{

lc.setRow(0, i, character[i]);

}

}


void printFont(const byte character[] )

{

int i = 0;

for (i = 0; i < 8; i++)

{

lc.setRow(0, i, flipByte(character [i]));

}

}



byte flipByte(byte c) {

char r = 0;

for (byte i = 0; i < 8; i++) {

r <<= 1;

r |= c & 1;

c >>= 1;

}

return r;

}


void handleRoot() {

server.send(200, "text/html", webpage_html);


String data = server.arg(0);


if (server.argName(0) == "matrix") {

displayMatrix(data);

last_matrix = data;

Serial.println("received data and updated the matrix");

showSaved = false;

}


if (server.argName(0) == "intensity") {

lc.setIntensity(0, data.toInt()); // Set the brightness to maximum value 0-15

Serial.print("updated intensity to ");

Serial.println(data);

}


if (server.argName(0) == "text") {

Serial.println("scrolling text: " + data);

int d = map(server.arg(1).toInt(), 1, 10, 200, 20);

scrollText(data, d);

displayMatrix(last_matrix);

}


if (server.argName(0) == "save") {

Serial.println("saving matrix");

for (int u = 0; u < 8; u++) { // for every row, construct 1 byte

byte row = 0;

for (int i = 0; i < 8; i++) {

bitWrite(row, 7 - i, last_matrix.charAt(8 * u + i) - 48);

}

// Serial.println(row);

EEPROM.write(eeprom_addr + u, row);

}

EEPROM.commit();

}


if (server.argName(0) == "load") {

Serial.println("loading matrix");

displaySaved();

showSaved = true;

}


}


void displayMatrix(String t) {

for (int i = 0; i < 64; i++) {

lc.setLed(0, i / 8, i % 8, t.charAt(i) - 48);

}

}


void displaySaved() {

last_matrix = "";

byte a[8];

for (int u = 0; u < 8; u++) {

a[u] = EEPROM.read(eeprom_addr + u);

for (int i = 0; i < 8; i++) {

last_matrix += bitRead(a[u], 7 - i);

}

}

printByte(a);

}


void scrollText(String t, int s) { // text and speed

int l = t.length() + 1; // store length

t = " " + t + " "; // add space before and after

for (int i = 0; i <= l * 8; i++) { // index of moving window over 2 chars

int this_frame[8] = {0, 0, 0, 0, 0, 0, 0, 0}; // define as int holding 2 chars (2x byte)

for (int u = 0; u < 8; u++) { // for each row

int left = (int) flipByte(font[t.charAt(i / 8)] [u]); // left char

int right = (int) flipByte(font[t.charAt(i / 8 + 1)] [u]); // right char

this_frame[u] = (left << 8) | right; // combine chars to 16 bits

this_frame[u] = this_frame[u] << i % 8; // move window to very left

this_frame[u] = this_frame[u] >> 8; // move result to very right

this_frame[u] = this_frame[u] & 0x00FF; // mask result to byte on right

}

printInt(this_frame);

delay(s);

}

}


void printDigits(int digits)

{

Serial.print(":");

if (digits < 10)

Serial.print('0');

Serial.print(digits);

}



After a successful upload, open the Serial Monitor at a baud rate of 152000. Press the “EN/RST” button on the ESP8266 board


Demo:


bottom of page