Creating Pixel Art with Web Interface using ESP8266
Tags: cpp, esp8266, help, webdev
Published: 2022-12-22 19:03:50

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](https://github.com/sergiolourojunior/web-pixel-art) 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.

![Connection ESP8266 with WS2812b LED strip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt5d4a80mpz6j0bg93rc.png)

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.

![Connection user device and ESP8266](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7r3ziztbvxk7b70qx3a.png)

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](https://arduinojson.org/) 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.

![Connection user device, ESP8266 and LED strip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcai70cga385qtjp0dxi.png)

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

```cpp
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 :)