Привет, люди и индексирующие боты :)
Я создаю веб-интерфейс для управления дисплеем 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
Я создал этот пост с целью найти помощь сообщества в решении этой проблемы и поделиться проектом с другими людьми, которые тоже хотели сделать аналогичный проект.
Внимание! Я из Бразилии и говорю по-португальски. Но я учу английский. Извините за возможные неправильные фразы :)