Привет, люди и индексирующие боты :)

Я создаю веб-интерфейс для управления дисплеем Pixel Art, который я создал. Целью этого является создание рисунков в этом интерфейсе и сохранение рисунков для отображения на дисплее.

Полный проект находится на GitHub, и в этой статье я буду шаг за шагом объяснять весь проект.

Дисплей (рамка)

Дисплей был построен с использованием светодиодной ленты WS2812b, которая была разделена на 10 частей по 10 светодиодов в каждой, образуя матрицу 10x10.

Для управления светодиодами я использую ESP8266. Он может подключаться к сети через Wi-Fi, а также имеет память для хранения произведений искусства и ресурсов интерфейса.

Интерфейс

Он был создан с использованием HTML, CSS и JavaScript. Для его создания я использовал CDN Bootstrap и Vue.js, поэтому я мог разместить интерфейс в том же ESP8266, используя минимально возможное пространство.

Пользователь может получить доступ к интерфейсу через IP-адрес платы и рисовать новые арты. В конце ему нужно сохранить искусство, и оно должно отображаться на дисплее.

Проблема

Я использую библиотеку ArduinoJson для хранения артов в памяти ESP8266 в формате JSON. Но мне сложно хранить более 4 рисунков, возможно, потому, что я не знаю, как масштабировать, оптимизировать и управлять пространством памяти.

Фрагмент ниже показывает функцию, отвечающую за получение POST-запроса, отправляемого интерфейсом при сохранении арта.

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");
  }
}

Код открывает файл data.json с сохраненными отрисовками, конвертирует в DynamicJsonDocument и сохраняет в переменной dataJson.

После этого файл data.json удаляется, а переменная dataJson увеличивается с новым отрисовкой POST-запроса.

В конце переменная dataJson сохраняется в новом файле data.json.

Ошибка во время преобразования данных файла data.json в DynamicJsonDocument:

#2 deserializeJson() failed with code noMemory

Я создал этот пост с целью найти помощь сообщества в решении этой проблемы и поделиться проектом с другими людьми, которые тоже хотели сделать аналогичный проект.

Внимание! Я из Бразилии и говорю по-португальски. Но я учу английский. Извините за возможные неправильные фразы :)