Connecting ESP8266 to P10 Display and displaying data from webserver

The concept is to have the ESP8266 driving the P10 display by reading the data from the webserver, this will ensure that the data can be updated automatically in the webserver via some automation and the P10 is being set to poll the data periodically and displaying it on the P10 display. You can see the concept in the following diagram:

Here are the connection diagram to connect to ESP8266 to P10 Display.

Connections

For simplicity here are the connection required from ESP8266 to the P10 header.

Coding preparation

What you will need is the Arduino IDE interface and loaded with the following library:

1. DMD2 library can be downloaded via the link
2. SPI library (this is usually already installed with Arduino)
3. ESP8266WiFi library (you can search for this in the Arduino library via Sketch->Include Library->Manage Library and put ESP8266 in the search box)

The first step is to connect the ESP8266 to your WIFI, this is done in the following code

char ssid[] = "ssid"; //  your network SSID (name)
char pass[] = "password";    // your network password (use for WPA, or use as key for WEP)
...
void setup() {
...
WiFi.begin(ssid, pass);
...
}

Then assuming the data is located in the webserver path /arduino/message.json, we then need to initialise the location as below:

const char* webserver = "webserver.com";      // webserver where the cloud is hosted

String messagePath = "/arduino/message.json"; // location of message data

Once the connection to webserver is established, the following function will parse the data and store in the local variable MESSAGE:

void readMessage(){
   DebugLn("readMessage");
   DebugLn("Connecting to " + String(webserver));
   WiFiClient client;
   const int httpPort = 80;
   if (!client.connect(webserver, httpPort)) {
     Serial.println("connection failed");
     return;
   }
   client.print(String("GET ") + messagePath + " HTTP/1.1\r\n" +
                "Host: " + webserver + "\r\n" + 
                "Connection: keep-alive\r\n\r\n");
   delay(500); // wait for server to respond
     // read response
   String section="header";
   while(client.available()){
     String line = client.readStringUntil('\r');
     // Serial.print(line);
     // we’ll parse the HTML body here
     if (section=="header") { // headers..
       Serial.print(".");
       if (line=="\n") { // skips the empty space at the beginning 
         section="json";
       }
     }
     else if (section=="json") {  // print the good stuff
       section="ignore";
       String result = line.substring(1);
       // Parse JSON
       int size = result.length() + 1;
       char json[size];
       result.toCharArray(json, size);
       StaticJsonBuffer<200> jsonBuffer;
       JsonObject& json_parsed = jsonBuffer.parseObject(json);
       if (!json_parsed.success())
       {
         Serial.println("parseObject() failed");
         return;
       }
       // read the message
       MESSAGE = json_parsed["message"];
       Serial.println(MESSAGE); //display message in serial window
     }
   }
   Serial.print("closing connection. ");
 }

The last piece is to display the message to the screen with the following function:

void scrolling() {

 const char next = MESSAGE;
  while (next) {

   dmd.clearScreen();// clear screen

   if (i != 0) {

    box.print(*next); //print the led pannel

   }

  i++;

   delay(800); // letters speed changing

   next++;

  }

}

The full source code can be downloaded via the following link. This source code only works with ArduinoJson library version 5.

The updated source code that works with ArduinoJson version 6 can be found in the following link.

Please don’t hesitate to let me know if you experience any issue with the code. You can buy me a coffee later if you like this post.