LED MATRIX SHIELD(D1 Mini,ESP8266)

Welcome to our another blog, through our article We are gonna share with you how to create variety of IOT related projects with the help of micro-controller.

In this blog We will discuss how to connect Wemos D1 mini(Micro-Controller) with Wemos LED MATRIX SHIELD.

What is Wemos D1 Mini

We may call Wemos D1 mini as a “little Arduino embedded with WiFi” and it is very cheap in price. Wemos D1 Mini is a WIFI development board based on ESP8266 12E. The function of Wemos D1 Mini is similar to NODEMCU, except the hardware construction. It is very small simple and easy to learn. It is a low cost wifi microchip with full tcp/ip stack and micro-controller capable.

Do you want to support our videos ?
https://www.buymeacoffee.com/ratnasrobolab

Support Our Channel By Shopping parts from Amazon !

Product Links

(1) MAX7219 Dot Matrix MCU LED Display Control Module Kit : https://amzn.to/3V5eboN
(2) Wemos® D1 Mini NodeMcu Lua WIFI ESP8266 Development Board: https://amzn.to/41IWgXw
(3) Programming USB Cable: https://amzn.to/3Nj01yj
(4) MAX7219 Display 4 in 1 : https://amzn.to/3n3DI4Y

What is LED Matrix Shield

LED Matrix is a grid of lights arranged into rows and columns. LED stands for Light Emitting Diode, so like other diodes, electricity flows through it in only one direction – from anode(+) to cathode(-); doing so illuminates the light.

Features

  • 8×8 Dot Matrix Shield for the WeMos family of boards for the ESP8266 and ESP32
  • 8 step adjustable intensity
  • TM1640 control pins: D5 (CLK) and D7 (DIN)
  • Operating Voltage: 0.5~7VDC; GRID Operating Current: 20mA
  • Color: Red

Arduino Library File : Install Matrix LED Shield Arduino Library

Please support us on YouTube also. Like Share and Subscribe to our channel : https://youtube.com/c/RatnasRoboLab

Connections

We can control wemos D1 mini with wifi through the internet or directly by creating a local server you have to follow a simple step. Go to chrome or any web browser from your phone or laptop. Type this link 192.168.4.1 and click on it.

IOT

Wemos has a wide variety of shields. You can easily attach these shields with the wemos.

Now I am gonna show you LED Matrix shield. I have made a structure (In the below image) and on top of this I have attached wemos d1 mini with led matrix shield.

At the bottom I have attached a battery along with switch with the help of glue, here you can see that a buzzer is also connected with the d1 mini.

Further we will explain how to control millis() using wifi so that we can control LED matrix and buzzer through our phone or laptop.

Schematic

ESP8266 Wemos LED Matrix Shield : https://www.wemos.cc/en/latest/d1_mini_shield/matrix_led.html

sch matrix led v1.0.0 1

Programming Part

Header File

Now at a glace we will look out our programme, this is a hedder file. 

For more example you may visit & download the zip file from : https://github.com/reaper7/MLEDScroll

#include <MLEDScroll.h>
MLEDScroll matrix;
VOID Setup( )

VOID setup is mainly used for initialize variables, pinmodes as input output and other important credentials and it runs only one time after each powerup or reset of the Micro-controller board.

void setup()
{
  matrix.begin();
  matrix.flip=false;
}
VOID Loop( )

Void loop runs continuously from the beginning to end line by line, allowing your program to change and respond. Use this function to actively control the Micro-controller board.

void loop() {
  // ...
}
Functions ( )

All these are array of bytes of different emojis. I named it as smile01, smile02 till smile14. 

byte smile01[8] = {
  B00111100,
  B01000010,
  B10111101,
  B10000001,
  B10100101,
  B10000001,
  B01000010,
  B00111100
 };
byte smile02[8] = {
  B00111100,
  B01000010,
  B10000001,
  B10111101,
  B10000001,
  B10100101,
  B01000010,
  B00111100
   };

   //......
   //...... Till smile14
   //......

   byte smile14[8] = {
    B00001111,
    B00001111,
    B00001111,
    B00001111,
    B11110000,
    B11110000,
    B11110000,
    B11110000
 };
Binary To Image

You have already seen that the boxes are rotating. These are the array of bytes of different images of boxes.

byte BOX1[8] = {
    B00111111,
    B00100001,
    B11111101,
    B10100101,
    B10100101,
    B10111111,
    B10000100,
    B11111100
 };
 byte BOX2[8] = {
    B01111110,
    B01000010,
    B01111110,
    B01000010,
    B01000010,
    B01111110,
    B01000010,
    B01111110
 };
 byte BOX3[8] = {
    B11111100,
    B10000100,
    B10111111,
    B10100101,
    B10100101,
    B11111101,
    B00100001,
    B00111111
 };
byte BOX4[8] = {
    B00000000,
    B11111111,
    B10100101,
    B10100101,
    B10100101,
    B10100101,
    B11111111,
    B00000000
 };

These are array of bytes of heart shape image.

byte HEART[8] = {
   B00011000,
   B00111100,
   B01100110,
   B10000001,
   B10000001,
   B10011001,
   B11111111,
   B01100110
};

All these array of bytes are passes through this function named as drawchar().

void drawChar(byte character[8])    //function of drawchar
{
   matrix.setIntensity(7);
  for(int y=7;y>=0;y--)
 {
  for (int x=0; x <= 7; x++)
   {
    if (character[(7-y)] & (B10000000 >> x))
    {
     matrix.dot(x,y); // draw dot
    }
    else
    {
     matrix.dot(x,y,0);//clear dot
    }
   }
  matrix.display();
 }
}

We take these simle01, smile02 till smile14 as pointer array of bytes named as anim[ ] and similarly named as box[ ]

byte* anim[14]={smile01,smile02,smile03,smile04,smile05,smile06,smile07,smile08,smile09,smile10,smile11,smile12,smile13,smile14};  //14 animations array (emoji type)
byte* box[4]={BOX1,BOX2,BOX3,BOX4};                                                                                                //4 animations array  (box type)

First for loop runs from 0 to 13 and every time one emoji type image is shown after 800ms delay one by one. Second for loop runs from 0 to 3 and inside that for loop every time another for loop runs from 0 to 3 after 200ms delay.

void loop()
{
    for(int a=0;a<=13;a++)    //start with 0 and continue to 13
    {
    drawChar(anim[a]);
    delay(800);
    }

   for(int b=0;b<=3;b++)      //loop runs 4 times
   {
       for(int c=0;c<=3;c++)        //start with 0 and continue to 3
      {
      drawChar(box[c]);
      delay(200);
      }
   }

   // matrix.setIntensity(0);         //set intensity 0
   //drawChar(HEART);
   //for(uint8_t i=0;i<=8;i++)         //intensity increases to 8
   //{
    //matrix.setIntensity(i);
    //delay(50);
    //}
      //delay(800);
}

Lastly set as matrix intensity as 0 and draw the heart shape image and then matrix intensity gradually increases from 0 to 8 after every 50 ms delay and wait for 800ms and programm goes up again and start from the first.

void loop()
{
    //for(int a=0;a<=13;a++)    //start with 0 and continue to 13
    //{
    //drawChar(anim[a]);
    //delay(800);
    //}

   //for(int b=0;b<=3;b++)      //loop runs 4 times
   //{
     //  for(int c=0;c<=3;c++)        //start with 0 and continue to 3
      //{
      //drawChar(box[c]);
      //delay(200);
      //}
   //}

    matrix.setIntensity(0);         //set intensity 0
   drawChar(HEART);
   for(uint8_t i=0;i<=8;i++)         //intensity increases to 8
   {
    matrix.setIntensity(i);
    delay(50);
    }
      delay(800);
}

Whole Programm

//CREATED by RATNADEEP
//Please friends LIKE,SHARE and SUBSCRIBE to my channel Ratnas RoboLab.
//THANK YOU FOR YOUR SUPPORT

#include <MLEDScroll.h>
MLEDScroll matrix;
//ADD 1.ANY CHAR DRAW FUNCTION
byte smile01[8] = {
  B00111100,
  B01000010,
  B10111101,
  B10000001,
  B10100101,
  B10000001,
  B01000010,
  B00111100
 };
byte smile02[8] = {
  B00111100,
  B01000010,
  B10000001,
  B10111101,
  B10000001,
  B10100101,
  B01000010,
  B00111100
   };
byte smile03[8] = {
    B00111100,
    B01000010,
    B10100101,
    B10011001,
    B10000001,
    B10100101,
    B01000010,
    B00111100
 };
 byte smile04[8] = {
    B00111100,
    B01011010,
    B10100101,
    B10011001,
    B10000001,
    B10100101,
    B01000010,
    B00111100
 };
  byte smile05[8] = {
    B11111111,
    B10000001,
    B10000001,
    B10000001,
    B10000001,
    B10000001,
    B10000001,
    B11111111
 };
   byte smile06[8] = {
    B00000000,
    B01111110,
    B01000010,
    B01000010,
    B01000010,
    B01000010,
    B01111110,
    B00000000
 };
   byte smile07[8] = {
    B00000000,
    B00000000,
    B00111100,
    B00100100,
    B00100100,
    B00111100,
    B00000000,
    B00000000
 };
    byte smile08[8] = {
    B00000000,
    B00000000,
    B00000000,
    B00011000,
    B00011000,
    B00000000,
    B00000000,
    B00000000
 };
     byte smile09[8] = {
    B00000000,
    B01111110,
    B01000010,
    B01011010,
    B01011010,
    B01000010,
    B01111110,
    B00000000
 };
      byte smile10[8] = {
    B11111111,
    B10000001,
    B10111101,
    B10100101,
    B10100101,
    B10111101,
    B10000001,
    B11111111
 };
   byte smile11[8] = {
    B00000000,
    B01100000,
    B01100000,
    B00000000,
    B00000000,
    B00000110,
    B00000110,
    B00000000
 };
    byte smile12[8] = {
    B00000000,
    B00000110,
    B00000110,
    B00000000,
    B00000000,
    B01100000,
    B01100000,
    B00000000
 };
    byte smile13[8] = {
    B11110000,
    B11110000,
    B11110000,
    B11110000,
    B00001111,
    B00001111,
    B00001111,
    B00001111
 };
 byte smile14[8] = {
    B00001111,
    B00001111,
    B00001111,
    B00001111,
    B11110000,
    B11110000,
    B11110000,
    B11110000
 };
 byte BOX1[8] = {
    B00111111,
    B00100001,
    B11111101,
    B10100101,
    B10100101,
    B10111111,
    B10000100,
    B11111100
 };
 byte BOX2[8] = {
    B01111110,
    B01000010,
    B01111110,
    B01000010,
    B01000010,
    B01111110,
    B01000010,
    B01111110
 };
byte BOX3[8] = {
    B11111100,
    B10000100,
    B10111111,
    B10100101,
    B10100101,
    B11111101,
    B00100001,
    B00111111
 };
byte BOX4[8] = {
    B00000000,
    B11111111,
    B10100101,
    B10100101,
    B10100101,
    B10100101,
    B11111111,
    B00000000
 };
 byte HEART[8] = {
    B00011000,
    B00111100,
    B01100110,
    B10000001,
    B10000001,
    B10011001,
    B11111111,
    B01100110
 };

void drawChar(byte character[8])    //function of drawchar
{
   matrix.setIntensity(7);
  for(int y=7;y>=0;y--)
 {
  for (int x=0; x <= 7; x++)
   {
    if (character[(7-y)] & (B10000000 >> x))
    {
     matrix.dot(x,y); // draw dot
    }
    else
    {
     matrix.dot(x,y,0);//clear dot
    }
   }
  matrix.display();
 }
}

byte* anim[14]={smile01,smile02,smile03,smile04,smile05,smile06,smile07,smile08,smile09,smile10,smile11,smile12,smile13,smile14};  //14 animations array (emoji type)
byte* box[4]={BOX1,BOX2,BOX3,BOX4};                                                                                                //4 animations array  (box type)

void setup()
{
  matrix.begin();
  matrix.flip=false;
}

void loop()
{
    for(int a=0;a<=13;a++)    //start with 0 and continue to 13
    {
    drawChar(anim[a]);
    delay(800);
    }

   for(int b=0;b<=3;b++)      //loop runs 4 times
   {
       for(int c=0;c<=3;c++)        //start with 0 and continue to 3
      {
      drawChar(box[c]);
      delay(200);
      }
   }

    matrix.setIntensity(0);         //set intensity 0
   drawChar(HEART);
   for(uint8_t i=0;i<=8;i++)         //intensity increases to 8
   {
    matrix.setIntensity(i);
    delay(50);
    }
      delay(800);
}

If u want to get the program file,here is the link : https://drive.google.com/open?id=1zRr…

Final result how it looks.

Further Readings

If you liked this article, then please subscribe to our YouTube Channel. You can also find us on InstagramFacebook and Twitter.

READ – CONNECT – BOOST – CREATE