Send messages from your Smartphone anywhere in the world to this scrolling LED messaging display.

BUILD TIME: 2 HOURS
DIFFICULTY RATING: Intermediate

We see scrolling LED displays everywhere these days, including shop and restaurant windows broadcasting their specials, within trains to show the next station, and on top of emergency vehicles to alert oncoming drivers of a hazard ahead (or random breath testing).

For this month’s project, we design a scrolling LED display that you can easily build for yourself using commonly available parts. It connects to your Wi-Fi network, so you can send messages to it from anywhere in the world using a Smartphone App. Use it at home to remind or alert family members to something important, or in a workplace to update workers or customers with important news.

THE BROAD OVERVIEW

This is a relatively simple project, requiring just a few components, a Wi-Fi network with an internet connection, and an Android or iOS Smartphone,

Messages are displayed using four LED matrix modules ganged together, and controlled using the commonly available ESP32, which we can code easily using the Arduino IDE.

We had many choices of Smartphone applications to choose from, however, we chose Blynk because it is free (for our purposes) and would work on either an Android or iOS operating system. It is also very simple to program and operate, allowing you to create a basic application in no time at all.

You can build a prototype easily on a breadboard, or make in on a perfboard for a permanent application.

HOW IT WORKS

The project uses an ESP32 microcontroller, four LED displays, an App for Android or iOS, and a wireless network to work across.

ESP32 MICROCONTROLLER

The ESP32 is a low cost, yet powerful dual core microcontroller. It features WiFi and Bluetooth, and can be programmed with the Arduino IDE, thanks to an available addon, which we’ll show you how to install later in the project.

The board measures just under 50mm long and 18mm wide, has 512KB of RAM, 4MB of flash memory and plenty of I/O pins. The board also features a 12-bit ADC, 8 bit DAC, I2C, a touch sensor, and SPI.

We’ll be using the WiFi capabilities, which is a lot more straightforward to setup compared to Bluetooth.

Please note: For this project, we used the ESP32 development board sold at Jaycar Electronics. There may be subtle differences with boards from other retailers, which could mean different pinouts and power requirements. Please refer to the retailer’s datasheet so compare. You may need to change pin assignments in the Arduino IDE, etc.

WIFI NETWORK

To create a connection between your smartphone and the ESP32, we require a server that both devices can connect to. With our Blynk app, this can be done in one of two ways. i.e. Bluetooth or WiFi.

We’ve chosen the WiFi method for simplicity. This will mean connecting your ESP32 to your home WiFi (using a unique authentication code) to give it access to the Blynk cloud server. Once established, the network is then simply created by connecting your smartphone to the same cloud. The unique authentication code means only people with the specific code can access your hardware so be careful not to share this information.

We’ll detail the steps to set up the network in our prototype build.

BLYNK SMARTPHONE APP

We will use the Android and iOS compatible Blynk application to custom make our project’s App.

Blynk is an easy to use application to make Internet of Things projects with low to medium complexity. Its interface enables you to import various widgets, such as sliders or buttons to suit your needs, and you then drag-and-drop these on-screen to create your interface.

APP COST

When you begin to create your first project, Blynk gives you an “energy” balance of 2000 units. This energy is traded for the widgets, which range in unit cost from 100 units to 1900 units. This means you can make a basic application, such as this one, without there being any cost to you. However, if you want to create more apps or more complex apps, the option to purchase more energy at a rate of about $5 for 1000 units.

We will keep our project simple so that it does not exceed the 2000 units given at startup.

DIGITAL OR VIRTUAL OPTIONS

Let’s say, you want to import the Button widget.

This widget allows you to simulate a button press completely in software. More impressively, you have a digital or virtual option to choose from. You can set it to react directly to a hardware pin on the microcontroller (i.e. have it toggle an I/O pin directly), or you can have it toggle a virtual pin that triggers a function in software.

The screenshot shown here shows the setup for our clear all text button, which as the name suggests, causes the text being sent to the display to clear. We are using the button as a momentary or push button switch. This could be changed to toggle, by using the mode option toggle.

For our project, we are happy with using a momentary style and have attached the pin to a virtual pin on the microcontroller called V8.

To have our microcontroller program detect the change of state on this virtual switch, we first need to connect to a network where this change of state is sent. We will discuss this process shortly. For now, let’s assume you have the network connection sorted.

To detect the change of state on the virtual pin on a connected network with Blynk, you use a very simple function shown for virtual pin 8.

BLYNK_WRITE(V8) {
  //Do Something
}

Whenever the network connected button is pressed, the App sends the request to the network-connected microcontroller.

Using this function and replacing V8 with the relevant virtual pin will mean that anytime the button is pressed, the program will enter this function. You simply need to program inside this function what you want to happen when this button is pressed. This could be anything from controlling a servo, toggling I/O pins or playing music, etc. It’s completely up to you.

This demonstrates just how simple it is to get started with Blynk and the ESP32. All of the complexity is hidden under the simple to use interface including the network connectivity.

In the prototype section, we will show you how to create the Blynk app from scratch, and also provide a method to use the one that we developed.

Note: To write this project and to provide screenshots, we have used an Arduino Emulator called BlueStacks. This program was originally designed to enable developers to create a simulated Android environment from their PC. This makes it much easier to, not only enter the required data, but most importantly, take screenshots for the documentation process.

Whilst the process of creating the app inside the emulator should be identical to creating it on the phone, there may be subtle differences that we can’t account for.

LED MATRIX DISPLAY

The display for this project is made from four LED arrays, each consisting of an 8x8 grid of LEDs with a total of 64 LEDs per array. These LEDs are arranged in columns and rows, with 8 rows and 8 columns per array.

Let’s say you want the bottom left corner pixel to be illuminated (pixel C1, R8). To do this we simply need to apply a ground connection to column 1 (C1) and a positive voltage to row 8 (R8). This will allow current to flow through that specific LED.

What would happen though if you wanted to make a larger image, let’s say a horizontal line from (C1, R8) to (C3, R6).

We would need to apply a gnd connection to C1, C2, C3 and apply a positive voltage to R8, R7, R6. However, if we do this, we are also applying a circuit to the LEDs we don’t want to be illuminated, as shown here.

To overcome this, we need to use a trick of human sight called the persistence of vision. Our vision is pretty quick however, it takes just a fraction of a second for the light entering our eye to be processed and interpreted by our brain as an image, which is widely believed to take about a 10th of a second.

Since it takes time to process a frame of action things that are happening quicker than that time can either not be seen at all or more importantly for our discussion seen as entirely one combined frame.

If we only allow one row at a time to be illuminated and rapidly switch on and off the columns our eyes and brain will see one solid image as this is all happening much quicker than we can possibly process the image.

So to illuminate the pixels (C1, R8) (C2, R7) and (C3, R6) all we need to do is turn them on one row at a time very briefly and we will see the 3 desired pixels solidly illuminated despite only one pixel being illuminated at any one moment.

The good news is, all of this very fast processing is done by the MAX7219 LED display driver. All we need to do is to send this IC instructions on which LEDs we want to be illuminated and it will sort out the persistence of vision for us, freeing up the microcontroller.

Therefore, all we need to do is send the MAX7219 the serial data using the microcontroller on the Arduino development board.

To do this we need to pull the chip select (CS) pin low to signify to the MAX7219 that we will be sending it data.

We then need to send each bit of data and toggle the clock pulse until all the serial data has been sent and the CS pin is pulled high signifying the data transmission is complete.

The most basic way possible to draw an image to this device is to simply create a binary representation of the image you want to create. To do this draw up an 8x8 grid such as this.

Let’s say we want to draw a sprite reminiscent of the ‘70s and ‘80s videogames, all you need to do is fill in which of the individual pixels need to be illuminated to make that image.

Starting from the top row and working down, create a binary representation for each bit with a non-illuminated pixel being a 0 and an illuminated pixel being a 1.

Since there are no illuminated pixels in R1, the first row will be 00000000, The second row will be 01100011.

Keep working your way down the grid until you have all eight rows, which will give you the following:

You can now simply enter this binary representation of the image into this Arduino code Image[] array.

Note: you will need to have the ledcontrol.h library installed for this to work, which you can easily install via the library manager.

In your Arduino IDE click sketch, include library, manage libraries as shown here.

In the search area type ledcontrol.h and select the LEDControl library by Eberhard Fahle, this is by far the easiest way to send data to the MAX7219 as this library takes care of everything and you can simply tell the program what you want to be sent.

Run this code to see your matrix showing a sprite.

#include "LedControl.h"
LedControl lc=LedControl(4,6,5,1); 
// Pins: DIN,CLK,CS, # of Display connected
unsigned long delayTime=200; 
// Delay between Frames
byte image[] =
{
    B00000000,
    B01100011,
    B00111110,
    B01111111,
    B01011101,
    B01111111,
    B01100011,
    B00111110
};
void setup()
{
  lc.shutdown(0,false);
  lc.shutdown(1,false);
  lc.setIntensity(0,5);
  lc.setIntensity(1,5);
  lc.clearDisplay(0);
  lc.clearDisplay(1);
}
void loop()
{
  for (int i = 0; i < 8; i++)
  {
    lc.setRow(0,i,image[i]);
  }
}

Now you can easily experiment with different images and text. You can store different images or letters in different arrays and have them display in sequence quite easily.

For this project, we will essentially repeat this process, but have it scroll an image across four arrays so the messages are easier to read.

CHOOSING YOUR DISPLAYS

Keep in mind that different suppliers provide different styles of displays, and some styles of displays will not be suitable for this project.

We recommend you use the display that has the dual in-line package (DIP) MAX7219 IC onboard, which is mounted below the 8x8 LED array. Not only will these mount correctly to the enclosure, but the letters have all been designed to display on the array in this orientation.

We also recommend you purchase all of the display modules from the same distributor. There can be a slight difference in the length of the LED arrays pins. In our case, two of the displays had short pins compared to the two other displays we had. This means there is an obvious and undesired step in the display, like you can see shown here.

On the same subject, make sure the MAX7219 IC is seated correctly into the IC socket. One of our displays had the IC making poor contact, which caused intermittent issues and erratic behaviour.

The Prototype:

Let’s build a prototype on a breadboard using just the 8x8 displays and the ESP32.

For the prototype, we are running the four 8x8 matrix arrays directly from the 5V USB connection on the ESP32 development board. The ESP32 board uses a 3V supply and utilises an AMS1117 SOT 23 3V low drop-out regulator (LDO) to drop the 5V USB voltage down to 3V. Therefore, we don’t need to be too concerned about a power supply to power the entire display. The minimum USB standard can provide up to 500mA, which is much more than this project will require.

Wire up your circuit following the Fritzing diagram shown above. To allow each LED matrix to send data to the next matrix in line, ensure that the output of one matrix is connected to the input of the next in line. Essentially, all four displays will be in series with each other, which allows the onboard MAX7219 IC to shift the information to the next display element.

THE CODE

The code for this project can be downloaded from our website. It is too long to show here, however, we will discuss some important parts of it here. To utilise the code, we first need to use or install some libraries.

MaxMatrix.h: This is an awesome library provided by Riyas-org, and can be downloaded here: https://github.com/riyas-org/max7219/tree/master/MaxMatrix

We used this library over the initial LED Control library, as Riyas-org had already created every possible letter, digit and symbol into a unique font. Naturally, this is a huge timesaver. We essentially took the example code provided by this library and modified it to suit our project’s needs.

Pgmspace.h: This library allows us to copy data to the flash memory of the ESP32, rather than the SRAM. We will use it to store the array of binary used to display each character, digit or symbol. This is a standard library in the Arduino IDE and does not need to be installed on more recent builds. If it’s not working for you, consider installing a more recent version of the Arduino IDE.

BlynkSimpleEsp32.h: This library controls all of the Blynk functions, and can be downloaded from here:

https://github.com/blynkkk/blynk-library/releases/tag/v0.6.1

We downloaded the .ZIP file from the Blynk GitHub and installed it into the Arduino IDE by navigating to Sketch > Include library > Add .ZIP library, and selecting the .ZIP file downloaded from the Blynk GitHub. Alternatively, you can also install it by using the manage libraries option which you can access via pressing CTRL + Shift + I. You can then simply enter “BLYNK” into the search field and select the following option.

WiFi.h and WiFiClient.h: These libraries form part of the Blynk library and will install automatically with it.

BOARD MANAGER

Add ESP32 to the Arduino IDE Additional Boards Manager URLs by going to Preferences in the main menu and adding the following URL: https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

If there is already text there, separate the new line from the previous by using a comma.

Next, add The ESP32 Espressif board to the Arduino IDE.

A breadboard and mix of short and long plug-to-plug and socket-to-socket jumper leads are also required.

^ We used and documented this project using the ESP32 from Jaycar. Pinouts and specifications may vary with models from other retailers.

With the Arduino IDE open click Tools > Board: > Boards Manager

In the search box type in ESP32 and select the esp32 by Espressif systems. Note this is currently the only available option. With the setup done, you want to download the code from the website and open it in your Arduino IDE.

We need to make a few changes so that it works with your network and hardware. The most obvious things you will need to change are the following three lines.

char auth[] = "Authentication number here
char ssid[] = "WiFi SSID here";
char pass[] = "WiFi Password here"; 

These lines define the Authentication number that is provided to you when you create a new App in the Blynk App. We will discuss this later, but this is where you need to add that code.

The SSID or service set identifier is simply the name of your WiFi network. You can usually find this written on the base of your WiFi router and is also sometimes provided on a card from your internet service provider (ISP).

The final part of the customisable software is to add the 8 preprogrammed phrases. These phrases will be activated when you press any one of the 8 corresponding buttons. These can be whatever you like but keep in mind that they should be 20 characters or less including spaces.

PROGMEM String phrase1 = " Phrase 1 ";
PROGMEM String phrase2 = " Phrase 2 ";
PROGMEM String phrase3 = " Phrase 3 ";
PROGMEM String phrase4 = " Phrase 4 ";
PROGMEM String phrase5 = " Phrase 5 ";
PROGMEM String phrase6 = " Phrase 6 ";
PROGMEM String phrase7 = " Phrase 7 ";
PROGMEM String phrase8 = " "; 

You simply replace the text in between the quotation marks to the desired input. For this, we are storing the characters / phrase in a string array within the flash memory of the ESP32. We recommend leaving phrase 8 as it is, as this is used to clear all from the display when not needed.

In this library, the designer has created each character rotated 90° clockwise, this means all of the characters are laying on their side as shown here, using the capital A as an example.

4, 8, B01111110, B00010001, B00010001, B01111110, B00000000, // A 

If you’re wanting to create more or modify the existing library, you will need to take this into consideration. There are a couple of other user-editable variables in the code that will allow you to customise the program to suit your needs.

int maxInUse = 4;
int scrollSpeed = 200; 

The maxInUse variable defines how many 8x8 displays are connected to the project. We were successfully able to get the project working with up to 4 displays in this series configuration. More than four, and the system becomes unstable and unreliable due to a combination of power supply limitations and signal degradation.

If you’re wanting to run more than four displays, you need to consider a more powerful power supply option. This could be as simple as powering each of the units in parallel rather than in series, which will help to reduce any losses.

You may also want to consider using a buffer on the CS / Data and CLK pins after the first four displays to ensure that the signal remains stable enough to control the next set of 8x8 displays.

scrollSpeed allows you to adjust the speed at which the text scrolls across the display. If you’re feeling adventurous you could create a slider in the Blynk app that allows you to adjust this speed from the App. Failing that, you can just experiment with the value and find a point that you’re comfortable with.

CREATING THE APP

We’ll now run you through the basics of creating the Blynk mobile phone application to control your display remotely.

If you’re not inclined to follow along and would rather get stuck into running your project, we’ll show you how to download our completed App.

INSTALLING BLYNK

To get started, you need to download the application Blynk from your device’s App store. In our case. its full name was:

Blynk – IoT for Arduino, ESP8266/32, Raspberry Pi

INSTALLING THE DIYODE APP

To install the App we designed in Blynk, all you need to do is scan the following QR code in the Blynk App.

Note: You will still need your own unique authentication token though, which must be added to the Arduino Sketch.

To scan the QR code, you simply need to press the “Scan QR” icon and aim your phone’s camera at the QR image shown here. This will create a copy of the same project on your phone.

For this project, we have used the maximum allowable energy tokens that the App provides without payment. If you have used the Blynk App before, you may need to delete projects or purchase energy points if your App’s “energy level” is insufficient.

DESIGNING APP FROM SCRATCH

If you’re wanting to create the App from scratch, then follow these instructions.

With the Blynk App open, select New Project to begin a new project.

Name your project, select the microcontroller development platform, the type of network connection, and finally if you prefer a light or dark themed interface. As you can see in the image, we called our project “DIYODE 64x8 Matrix”, selected the ESP32 Dev Board, WiFi connection, and a dark theme. Press the Create button when you’re done.

Once the app creation process is complete, you will be greeted with a message to say that an Authentication Token was sent to the email address you nominated. This Authentication Token must be added to the Arduino program to allow the network connection between the App and your hardware. It’s a good idea to keep this token safe. Likewise, don’t let other people have this token, as it could give them the ability to monitor the communications between your phone App and the device.

Select the OK button and you will be greeted with the blank work area.

The + symbol in the top right corner allows you to add the various widgets or elements to the phone apps GUI. These elements are what controls the device or receives data from it and can be buttons, sliders, text input, graphs, etc.

For our basic project, we are only really interested in two widgets. We want a string / text input widget that will allow the user to enter custom text, and buttons to let the user pick from pre-defined phrases.

As you can see, there is a value amount under the name of each widget, which is the cost in energy that the respective widget costs. As stated earlier, the Blynk app gives you 2000 energy units when you first start, and subsequent energy can be purchased if desired.

For our project, we need the text input selector (400 units), which leaves 1600 units for buttons. At 200 units each, we can use up to eight buttons.

To get started, pick the Text Input option.

For Title, enter “Text to display”.

For PIN, select V0 for virtual pin 0, which will trigger the function for V0 in the ESP32 program.

Under Hint, add “Text to Display”. This is what will be shown to the user to prompt them to enter text.

Character limit should be set to 20 to avoid issues in the program. We left the font size as the middle option. When done, hit the Back button and position the text input widget where you prefer. We placed it at the very top and stretched it so it covered the entire top line.

Add eight buttons to the GUI. We added all eight in two rows, but you can place them as you wish.

If you press on one of the buttons, you can modify its variables. Give each button a name to indicate what phrase will be displayed on the screen. To make it easy to read and understand, we labelled each of our buttons as Phrase # to match the ESP32 programming.

PROGMEM String phrase1 = " Phrase 1 ";
PROGMEM String phrase2 = " Phrase 2 ";
PROGMEM String phrase3 = " Phrase 3 ";
PROGMEM String phrase4 = " Phrase 4 ";
PROGMEM String phrase5 = " Phrase 5 ";
PROGMEM String phrase6 = " Phrase 6 ";
PROGMEM String phrase7 = " Phrase 7 ";
PROGMEM String phrase8 = " "; 

Let’s say for phrase1 you want it to say “Feed The Cat “, all you need to do is change the line:

PROGMEM String phrase1 = " Phrase 1 ";

to:

PROGMEM String phrase1 = " Feed The Cat ";

Likewise, you should name the button in the App to “Feed the Cat” or similar.

To make it easy to read and understand, we labelled each of our buttons as Phrase # to match the ESP32 programming. You can customise your App and program by substituting your own phrases.

In the button customisation options, you need to define each output as a Virtual pin that matches the phrase number. i.e. Virtual pin 1 controls phrase 1 in the ESP32 code.

The mode should be set to push, so that it works as a momentary switch.

We changed the on / off labels to Send / Sent and left the font size as the medium option.

You need to repeat the same process for all of the eight buttons. When you have completed this for each button, you are essentially done with the App. You just need to add your login details for your internet connection into the ESP32 program, along with the unique authorisation code emailed to you when you started creating the App.

TESTING

With the device connected via USB to your computer, you need to verify that the internet connection is working correctly. The best way to do this is to use the serial monitor or similar program. If everything is working correctly, you should see something similar to this:

This shows that the device has successfully connected to the WiFi connection and that it takes about 411ms to receive a ping response. This is all great.

If you don’t see this, then there may be an issue with your connection. Double-check the SSID and the WEP key / password. If that does not rectify your issue, it’s likely a configuration issue with your router. Try using a different router and different channel where possible.

We, for example, had significant issues trying to get a connection with one particular router. It turned out that the ESP32 does not support 5GHz connections and will simply not detect them. 2.4GHz it was.

If in doubt, and you’re having issues connecting, consider installing a WiFi scanner program onto the ESP32. This program will scan the local airwaves and report via the serial monitor all available networks. This should be helpful in detecting issues with your connection.

The Main Build:

Once we had confirmed the prototype was working as expected, we begun to plan how to create a stand-alone unit. One of the first hurdles we experienced was powering the device was not as simple as it was with the Arduino development boards.

The ESP32 is not able to be powered directly from the 5V pin as there is a diode between the USB input and the 5V line which is presumably there to protect a USB device from damage if there was a higher voltage on the 5V pin. This means that to power the device we must power it via the USB connector.

Note: It may be possible to provide 3.3V power to the 3.3V pin which will power the device, however, this would require a 5V linear regulator to power the displays as well as another 3.3V regulator to power the microcontroller.

POWER SUPPLY CIRCUIT

We extend upon our prototype by adding a 5V power supply. This is straightforward, by using a LM7805 linear voltage regulator to drop the input voltage from between 7 and 12V down to 5V. This voltage powers the 8x8 matrix displays directly and needs to go to the ESP32 via the USB connector. For this, we cut the USB connector off of a short micro USB cable.

Inside this cable, there are 4 wires.

• Red = 5V
• White = Data -
• Green = data +
• Black/exposed is GND and directly connected to the USB shielding.

We soldered the 5V and GND directly to a 2 pin female pin header, being sure to insulate the connections with heatshrink to remove the risk of short-circuits. This female header will connect the board and the cable, so be sure to mark the polarity on the heatshrink so that it is connected to the board correctly.

Whilst admittedly this is not the most elegant solution, it was the only option that didn’t involve removing the diode from the ESP32 development board. We figured people would be much happier modifying a USB cable than they would a $30 development board.

We used our usual method of solder bridges to create the traces on the bottom side of the protoboard until each of the required connections were created.

* Quantity required, may only be sold in packs. A mix of short and long plug-to-plug and socket-to-socket jumper leads are also required.

^ We used and documented this project using the ESP32 from Jaycar. Pinouts and specifications may vary with models from other retailers.

3D PRINTED CASE

We designed the 3D printable enclosure for the project using Fusion360 and will provide the working files so that you can easily customise or modify the design.

The enclosure was printed in two parts on our Flashforge Creator Pro using Flashforge branded Black PLA. We printed both pieces at a 200-micron layer height, which is the middle ground between quality and speed. With this configuration and with both parts placed flat on the bed as shown, neither part needed any support.

When Components Aren’t Equal

To power the project, we used a LM7805 linear regulator, which are inexpensive and easy to use. However, they can be horribly inefficient.

These regulators need to dissipate the undesired voltage across themselves, which means, the higher the voltage drop across it and the higher the current demand, the hotter they will get.

We measured the current draw of the project to be a maximum of 183mA using our digital multimeter. Considering this current draw and an input voltage of 12V, we calculated the power for our LM7805 regulator to dissipate was 1.28W:

P = V x I = (12V - 5V) x 0.183 = 1.28W

Normally, a LM7805 should be able to comfortably dissipate this level of dissipation without needing any heatsinking, however, this wasn’t the case for our project.

As you can see here, the LM7805 that we purchased (bottom) had a much thinner metal tab compared to a common TO-220 package (top).

Using our component without a heatsink caused the temperature of the package to rise quickly to over 80°C.

This prompted us to attach a small clip-on heatsink, which helped to bring the temperatures down to a more acceptable 53°C. Something to keep in mind when you purchase your LM7805.

Assembly

With the parts successfully printed, you can now assemble the device. Using the 6mm M3 screws, attach all four of the 8x8 displays to the base of the enclosure so that the MAX7219 IC is at the bottom of the unit (the bottom of the unit contains the hole for the DC jack).

With the displays secured you can then attach the DC jack by tightening the fixing nut.

You can then secure the PCB to the lid using 9mm M3 screws.

Once completed, you just need to connect the 5 wires that control the LED matrix from the ESP32 to the matrix along with the DC input to the device from the barrel jack. To make this easy, we simply used female jumper wires and male headers soldered to the PCB.

WHERE TO FROM HERE?

Short of customisation, there isn’t really to much further you could take this project. Adding more displays would be a fun task to undertake.

For us, the number one thing we would like to do is to link the display to an online clock or other RSS style feed. This way, when no signal is sent to the device from the App, it would work as a standard digital clock or a horizontal feeding RSS news feed ticker.