Connecting ESP8266 to P10 Display and displaying data from webserver

By snorlaxprime

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.


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("Connecting to " + String(webserver));
WiFiClient client;
const int httpPort = 80;
if (!client.connect(webserver, httpPort)) {
Serial.println("connection failed");
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";
String line = client.readStringUntil('\r');
// Serial.print(line);
// we’ll parse the HTML body here
if (section=="header") { // headers..
if (line=="\n") { // skips the empty space at the beginning
else if (section=="json") { // print the good stuff
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");
// 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
delay(800); // letters speed changing

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.