Web Connected 8x8 Scrolling LED Display

Scrolling LED Display with SparkCore and Azure Web Sites

About a year ago I purchased an 8×8 LED Matrix and a MAX7219 to drive it.  When I received it, I saw all of the connections required and put it back in the box until now (although it was rewarding when done, I’d recommend the 8×8 LED Matrix with a backpack). Being a fan of the Spark Core, I decided to put it all together long with the Open Source .Net library I had written to create something – A scrolling LED display controllable from the web.

Materials

Warning: embedding parts within the project story has been deprecated. To edit, remove or add more parts, go to the "Hardware" tab. To remove this list from the story, click on it to trigger the context menu, then click the trash can button (this won't delete it from the "Hardware" tab).
	Spark Core Wifi Development Kit
	8x8 LED Matrix
	MAX7219 LED Matrix/Digit Display Driver
	Resistor 10k ohm
	100nF capacitor
	10uF electrolytic capacitor
	Half-size Breadboard
	Bunch of Breadboard Wires - Male to Male
	Bunch of Breadboard Wires – Female to Male for connecting the LED display to the board

The LED Matrix has 16 pins and by selecting the right combination, you can light any given row or column of pixels.  So making this thing present a stable image requires a little help.  The MAX7219 does the heavy lifting here.  By supplying it with 8 bytes of data, it will use those 1′s and 0′s to paint the LEDs into the image we want.  It will also take care of refreshing the image over and over again so we don’t know it is really painting the LEDs one column at a time.

We connect the MAX7219 to our Spark Core to command the MAX7219 and load the desired image to the LEDs.  The Spark Core is WiFi enabled and we will go into the code needed in the Core’s firmware and the code needed on the website to update the display.

Hardware Setup

Wiring the LED Matrix to the MAX7219 was really the hardest part.  You need to pay close attention to the pin numbers on the back of the Matrix as well as the numbers on the chip.  I got a lit of help from this article on getting the details correct.  Below is the circuit diagram.

The pins on the LED Matrix are tricky.  Look at the picture below and pay close attention to the orientation of the matrix.  Use the provided keying (red circle) to orient the part correctly.

When you are done, you should have something that looks like this:

Note: The MAX7219 is a 5V chip and the Spark Core is a 3.3V chip.  We can use the VIN pin on the Spark Core to grab 5V from the USB bus connection.  The MAX7219 is fine with the 3.3V logic levels.

Software – Spark Core

The Spark Core has a web-based IDE (they now also have a local IDE too!) to compose, verify and push code to the device over the air.  The Spark Core is Arduino compatible and it’s Core Code language reference can be found here.  To write this code, I had to port an Arduino library for the MAX7219.  I used Eberhard Fahle’s LedControl library found on Arduino Playground.  This was a simple port to make compatible with the Spark Core.  It is now available as a shared library on the Spark Core Web IDE.

The code below does the following things:

• Creates a new instance of the LedControl Class with our specific Analog Outputs.
• Turns ON the Max7219 / powers up the LED
• Set the LED intensity to LOW
• Publish the SetMessage Function that we will use to update the LED message
• Publish the Message Variable so we can get what the current message is set to
• Loop and display a default message (“Uptime 0:00″) or the message provided in the SetMessage function call.

Below is the source code:

// This #include statement was automatically added by the Spark IDE.
#include "LedControl-MAX7219-MAX7221/LedControl-MAX7219-MAX7221.h"

LedControl *led;

int phase = 0;
char message[64];
char custMessage[64];
int messageLength = 0;
int myUptime = 0;

uint8_t data = A5;
uint8_t load = A4;
uint8_t myclock = A3;

void setup() {
    led = new LedControl(data,myclock,load,1); //DIN,CLK,CS,HowManyDisplays
    led->shutdown(0,false); //Turn it on
    led->setIntensity(0,1);

    Spark.function("SetMessage", setMessage);
    Spark.variable("Message", custMessage, STRING);
}

void loop() {

    if(phase==0){ //Message-loop starts
        if(strlen(custMessage) == 0)
        {
            myUptime = (int)(millis()/1000);
            sprintf(message,"Uptime %d:%02d", myUptime / 3600, (myUptime % 3600)/60); //update message
        }
        else
        {
            strcpy(message, custMessage); //update message
        }
        messageLength = strlen(message); // ...and length
        led->tweenLetters(0,' ',message[phase]); //scroll from empty to 1 letter
    }

    if(phase<messageLength-1){ //next characters except last one
        led->tweenLetters(0,message[phase],message[phase+1]);
        phase++;
    }else if(phase==messageLength-1){//last character scrolls to empty
        led->tweenLetters(0,message[phase],' ');
        phase = 0; //restart message-loop
    }
}

int setMessage(String _message)
{
    _message.toCharArray(custMessage, 64);
    return 0;
} 

Note the include statement on the first line to bring in the LedControl library from the Spark Core IDE’s library

Software - Web

To build the web based portion of this project, I will be using a C# ASP.Net Web Form Application.  For my web application to talk to the Spark Core, I will be using my open source SparkIODotNet library. 

The [Refresh] button will pull the current message set in the running Spark Core.  The [Clear] button will set scrolling message back to the default “Uptime” message.  [Set] will push whatever message is in the Text Box to the Spark Core for display.  The underlying code for the event handlers on these buttons follows:

protected void btnSet_Click(object sender, EventArgs e)
{
    try
    {
        CoreAPI core = GetCoreAPI();

        core.CallFunctionInt("SetMessage", txtMessage.Text);

        lblError.Visible = false;

        lblCurrentMessage.Text = txtMessage.Text;
    }
    catch (Exception ex)
    {
        lblError.Text = ex.Message;
        lblError.Visible = true;
    }
}

protected void btnClear_Click(object sender, EventArgs e)
{
    txtMessage.Text = "";

    try
    {
        CoreAPI core = GetCoreAPI();

        core.CallFunctionInt("SetMessage", txtMessage.Text);

        lblError.Visible = false;
        lblCurrentMessage.Text = txtMessage.Text;
    }
    catch (Exception ex)
    {
        lblError.Text = ex.Message;
        lblError.Visible = true;
    }
}

protected void btnRefresh_Click(object sender, EventArgs e)
{
    txtMessage.Text = "";

    try
    {
        CoreAPI core = GetCoreAPI();

        lblCurrentMessage.Text = core.GetVariableString("Message");

        lblError.Visible = false;
    }
    catch (Exception ex)
    {
        lblError.Text = ex.Message;
        lblError.Visible = true;
    }
} 

Reviewing the code, Lines 7 and 26 are we call CallFunctionInt() on our CoreAPI instance. This method calls the Spark Function wired up to the provided label on line 21 of the Spark Core’s code. The string value is passed into the function and is displayed on the LED. On line 48 of the web code, you will see where we use a similar technique to get what the current set message is on the Spark Core.

There is a helper method called GetCoreAPI() that instantiates the CoreAPI object with the device Id of our core and a security key. These values are kept in the Web.Config file.  Spark Core documentation on where to get the Core’s device ID is here and how to get the security access token can be gotten from the Settings area in the Spark IDE.

private CoreAPI GetCoreAPI()
{
    CoreAPI core;

    AppSettingsReader reader = new AppSettingsReader();

    core = new CoreAPI(reader.GetValue("coreID", typeof(string)).ToString(),
        reader.GetValue("accessToken", typeof(string)).ToString());

    return core;
} 

The values are stored in the web.config file as follows:

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.5" />
    <httpRuntime targetFramework="4.5" />
  </system.web>
  <appSettings>
    <add key="CoreID" value="xxxxxxxxxxxxx" />
    <add key="AccessToken" value="yyyyyyyyyyyyyyyyyyyyyyyyyyyyy" />
  </appSettings>
</configuration> 

A copy of the ScrollDemo ASP.Net web site can be found here.

At this point we are all setup to run locally, but that is no fun. You can very easily sign up for an Azure Website on the Free Tier and deploy the web application for all of the world to use! You are not limited to .Net on these web sites either. This article details the deployment options for various IDEs.

So now that we are published to Azure Web Sites, let’s see a little demo!