How to show text in a LED matrix with your browser

1. Introduction

With the web server capabilities of the Arduino Yún you can make a web page that lets you send messages to it and store them in a String. Here there is the lesson for creating the web interface and storing the text of your message.

2. Connect the LED matrix and install the library

To connect the matrix to your Arduino you need only 5 wires and an external 5V power supply. The external power supply is needed because the Matrix drains too much current to be powered by the Yún. To make the correct wiring and install the library follow this guide here.

3. Basic way to display messages

Once your web server is running and you have connected the matrix to the Yún you have just to add some code lines to make your text appearing on the matrix. First of all you need to initialize the matrix library in the setup function with:

HT1632.begin( 9, 10, 11);

Where 9, 10 and 11 are respectively the pins for CS, WR and DATA. When a message comes from a client it is stored in the msg string but the msg variable is String type so you have to convert it to a char array because the HT1632 library works with char arrays. Declare a char array variable and use the toCharArray function of the String class:

char final_message[32]; msg.toCharArray(final_message,32);

Where 32 is the max length of the array. You also need to know how long is the new message so you have to use the HT1632.getTextWidth function:

wd = HT1632.getTextWidth(final_message, FONT_5X4_WIDTH, FONT_5X4_HEIGHT);

With this information you can make the text scrolling and know when it finishes to scroll. Now your message is ready to be displayed with:

HT1632.drawTarget(BUFFER_BOARD(1)); 
HT1632.clear(); 
HT1632.drawText(final_message, 2*OUT_SIZE - x_pos, 2, FONT_5X4, FONT_5X4_WIDTH, FONT_5X4_HEIGHT, FONT_5X4_STEP_GLYPH); 
HT1632.render();

The first parameter of drawText is the char array of the message and the second is the x-axis position in the matrix of the text. To scroll it just increment the x_pos variable by 1 and when it is equal to 2*OUT_SIZE+wd it means that the text finished to scroll:

x_pos++;; if  (x_pos == (wd + OUT_SIZE * 2)) {     x_pos = 0;        }

4. Adding messages queue

The text you send to your Arduino will take some time to scroll on the screen, so if you send another message while the previous one is scrolling the old one will disappear and the new one will start scrolling. To avoid this problem you can add to the code a circular queue in which you will store new messages waiting to be showed. In this example the sketch will support a maximum of 10 message in the queue so when the quantity is more than the limit the new message overwrites the oldest one. The String used to store the message becomes an array of strings and using 2 integer variables we can keep track of the current message and the last received message position on the queue:

int curr_msg, last_msg; String msg[10];  //10 messages can be stored in the queue

In the receiving part of the webserver add the code part that saves the new text after the last one:

if (last_msg > 8 ) last_msg = 0;     else last_msg++; msg[last_msg] = client.readStringUntil('/');

The variable last_msg will be set to 0 if the maximum number of messages is reached because the queue is full, if not it will be incremented by 1. Now you have to add the code that manages the switching to the next message in the queue. The best part where to put this code is the if that checks the scrolling text because usually you want to display the next message when the previous one has finished to scroll. The code controls that the current message is different from the last one because if they are the same it means that the server did not receive any new message. If it is different it increments the curr_msg variable for accessing to the new message in the queue array and the same two function as before will be used to prepare the final_message array.

x_pos++;; //shift the message of 1 column to left
//check if the the entire message scrolled out the matrix
if  (x_pos == (wd + OUT_SIZE * 2)) {
    x_pos = 0;        //set the message position to the initial position
    if (curr_msg != last_msg) {  //is there an unread message?
        if (curr_msg < 9 )
            curr_msg++;  //select the next message
        else
            curr_msg = 0;     //end of the buffer, start from beginning  (the next message overwrote the first)
   msg[curr_msg].toCharArray(final_message, 32);  //convert the string into a char array
   wd = HT1632.getTextWidth(final_message, FONT_5X4_WIDTH, FONT_5X4_HEIGHT); // Give the width, in columns, of the assigned string            }   }
    }
}

5. Final code

Here is the final code:

/********
Control a sure led matrix through your browser
Go on http://arduino.local/sd/message , write your
message in the form and click the button and it
will appear on the matrix as a scrolling text.
This sketch put received messages inside a queue and display
them in the correct order.
New messages will overwrite old ones if the buffer is full.
Written by Angelo Scialabba
@12 Sept 2013
********/
#include <font_5x4.h>
#include <HT1632.h>
#include <images.h>
#include <Bridge.h>
#include <YunServer.h>
#include <YunClient.h>
YunServer server;
int x_pos = 0;
int curr_msg, last_msg;
int wd;
String msg[10];  //10 messages can be stored in the queue
char final_message[32];
void setup () {
  // Setup and begin the matrix
  // HT1632.begin(CS1,WR,DATA)
  HT1632.begin( 9, 10, 11);
  Serial.begin(9600);
  Bridge.begin();
  server.listenOnLocalhost();
  server.begin();  
  
  //************Set the standard message************
  msg[0] = "No MSG";
  msg[0].toCharArray(final_message,32);
  wd = HT1632.getTextWidth(final_message, FONT_5X4_WIDTH, FONT_5X4_HEIGHT); // Give the width, in columns, of the assigned string
  
  //************Set the buffer's variables*********
  curr_msg = 0;
  last_msg = 0;
}
void loop () {
  //*********Read new message from the server**************
  YunClient client = server.accept();
  
  if(client) {
    String command = client.readStringUntil('/');
    if (command == "msg") {      
      if (last_msg > 8 ) last_msg = 0;
      else last_msg++;
      msg[last_msg] = client.readStringUntil('/');            
    }
    client.stop();
    
  } 
  
  
  //*****Display the message on the matrix*****
  HT1632.drawTarget(BUFFER_BOARD(1));
  HT1632.clear();
  HT1632.drawText(final_message, 2*OUT_SIZE - x_pos, 2, FONT_5X4, FONT_5X4_WIDTH, FONT_5X4_HEIGHT, FONT_5X4_STEP_GLYPH);
  HT1632.render();
  
  
  //*************Scroll the message and select new messages*****************
  
  x_pos++;; //shift the message of 1 column to left
  
  //check if the the entire message scrolled out the matrix
  if  (x_pos == (wd + OUT_SIZE * 2)) {  
    
    x_pos = 0;        //set the message position to the initial position
    
    if (curr_msg!=last_msg){         //is there an unread message?
    
      if (curr_msg < 9 ) curr_msg++;  //select the next message
      else curr_msg = 0;     //end of the buffer, start from beginning  (the next message overwrote the first)
      msg[curr_msg].toCharArray(final_message,32);   //convert the string into a char array
      wd = HT1632.getTextWidth(final_message, FONT_5X4_WIDTH, FONT_5X4_HEIGHT); // Give the width, in columns, of the assigned string
      
    }
  }
  
  delay(150);
}