Creating Pixel Art with Web Interface using ESP8266

Sérgio Louro Júnior — Thu, 22 Dec 2022 19:03:50 +0000

Hello people and indexing bots :)

I'm building a web interface to control a display of Pixel Art i built. The objective it's can create draws within this interface and storage the draws to show in the display.

The complete project it's on GitHub and throughout this article i'm going to explain step-by-step all of the project.

The Display (Frame)

The display was built using a WS2812b LED strip that was divided into 10 parts, each with with 10 LEDs, creating a matrix 10x10.

For LED control, i'm using a ESP8266. It can connect with the network through Wifi and it have memory to storage arts and interface assets too.

The Interface

It was built using HTML, CSS and JavaScript. For built it, i'm used the CDN of Bootstrap and Vue.js, so i could host the interface into same ESP8266 using the smallest space possible.

The user can access the interface through board's IP and draws new arts. At the end, he need to save the art and it should showed in the display.

The problem

I'm using the library ArduinoJson to storage arts in the ESP8266 memory at JSON format. But, i'm have difficult to storage more than 4 drawings, possibly because i don't know how scale, optimize and manager the memory space.

The snippet below shows the function responsible for receiving the POST request sent by the interface when saving an art.

void handleSave() {
  if (server.method() == HTTP_POST) {
    DynamicJsonDocument doc(12288);

    DeserializationError error = deserializeJson(doc, server.arg("plain"));

    if (error) {
      Serial.print(F("deserializeJson() failed: "));
      Serial.println(error.f_str());
      return;
    } else {
      JsonObject request = doc.as<JsonObject>();

      File file = SPIFFS.open(F("/data.json"), "r");

      DynamicJsonDocument dataJson(ESP.getMaxFreeBlockSize() - 512);

      Serial.print("dataJson capacity: ");
      Serial.println(dataJson.capacity());

      DeserializationError err = deserializeJson(dataJson, file);

      file.close();
      SPIFFS.remove(F("/data.json"));

      if(err) {
        Serial.print(F("#2 deserializeJson() failed with code "));
        Serial.println(err.f_str());
      } else {
        Serial.println("Success to open file");

        dataJson.add(request);

        File file = SPIFFS.open(F("/data.json"), "w+");
        serializeJson(dataJson, file);

        file.close();

        Serial.println("Finished");
      }
    }

    server.send(200, "application/text", "OK");
  } else {
    Serial.println("Method not Allowed");
  }
}

The code open the file data.json with the salved draws, convert to a DynamicJsonDocument and storage in the dataJson variable.

After this, the file data.json is removed and the variable dataJson is incrementing with the new draw of the POST request.

At the end, the dataJson variable is storage at a new file data.json.

The mistake is in the time of convert data of the file data.json to a DynamicJsonDocument:

#2 deserializeJson() failed with code noMemory

I created this post with the objective find help of the community to resolve this problem and share the project with another people wanted make a similar project too.

Warning: I'm from Brazil, then i speak Portuguese. But i'm learning english. Sorry possible wrong sentences :)

DEV Community: Sérgio Louro Júnior

Creating Pixel Art with Web Interface using ESP8266

The Display (Frame)

The Interface

The problem