images can be send but are not drawn correctly

2026-01-26 12:13:04 +01:00
parent 81026eae48
commit 8afb7cd747
3 changed files with 82 additions and 10 deletions
@@ -16,17 +16,35 @@ const char index_html[] PROGMEM = R"rawliteral(
      margin: 4px 2px;
      cursor: pointer;
    }
+    textarea {
+      width: 80%;
+      height: 200px;
+      margin-top: 20px;
+    }
  </style>
 </head>
 <body>
  <h1>LED Panel Control</h1>
-  <button class="button" onclick="showPixels()">Show Pixels</button>
+  <button class="button" onclick="showSavedPixels()">Show Saved Pixels</button>
+  <br>
+  <textarea id="jsonInput" placeholder="Paste your JSON image data here..."></textarea>
+  <br>
+  <button class="button" onclick="uploadAndDraw()">Upload and Draw</button>
+
  <script>
-    function showPixels() {
+    function showSavedPixels() {
      var xhr = new XMLHttpRequest();
-      xhr.open("GET", "/show", true);
+      xhr.open("GET", "/show-saved", true);
      xhr.send();
    }
+
+    function uploadAndDraw() {
+      var jsonData = document.getElementById("jsonInput").value;
+      var xhr = new XMLHttpRequest();
+      xhr.open("POST", "/upload", true);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.send(jsonData);
+    }
  </script>
 </body>
 </html>
@@ -1,6 +1,7 @@
 #include <Adafruit_NeoPixel.h>
 #include <WiFi.h>
 #include <WebServer.h>
+#include <ArduinoJson.h>
 #include "index.h"

 // For ESP8266, you would use:
@@ -14,7 +15,7 @@
 #define PIN 12

 #define PANEL_PIXEL_COUNT 16
-#define NUMPIXELS PANEL_PIXEL_COUNT*PANEL_PIXEL_COUNT*3
+#define NUMPIXELS PANEL_PIXEL_COUNT*PANEL_PIXEL_COUNT

 Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_GRB + NEO_KHZ800);

@@ -25,6 +26,8 @@ struct Pixel
  uint32_t color;
 };

+Pixel new_image[PANEL_PIXEL_COUNT][PANEL_PIXEL_COUNT];
+
 // dont change this
 Pixel saved_imaged[12][16][16] = {
  {
@@ -93,14 +96,37 @@ Pixel getPixelFromSaved(unsigned char i, int row, int col)
  return saved_imaged[i][row][col];
 }

-void drawImageFromArr(int offset_x, int offset_y, unsigned char i) {
+Pixel getPixel(int row, int col)
+{
+  return new_image[row][col];
+}
+
+void drawImageFromArr(int offset_x, int offset_y) {
+  for (int row = 0; row < 16; row++) {
+    for (int col = 0; col < 16; col++) {
+      Pixel px = getPixel(row, col);
+      if (px.color == 0) {
+        continue;
+      }
+
+      int pixel_x = px.x + offset_x;
+      int pixel_y = px.y + offset_y;
+      
+      if (pixel_x >= 0 && pixel_x < PANEL_PIXEL_COUNT && 
+          pixel_y >= 0 && pixel_y < PANEL_PIXEL_COUNT) {
+        setPixel(pixel_x, pixel_y, px.color);
+      }
+    }
+  }
+}
+
+void drawImageFromSaved(int offset_x, int offset_y, unsigned char i) {
  for (int row = 0; row < 16; row++) {
    for (int col = 0; col < 16; col++) {
      Pixel px = getPixelFromSaved(i, row, col);
      if (px.color == 0) {
        continue;
      }
-
      int pixel_x = px.x + offset_x;
      int pixel_y = px.y + offset_y;
      
@@ -117,7 +143,7 @@ void setup() {
  pixels.begin();
  pixels.clear();
  pixels.show();
-  drawImageFromArr(0, 0, 0);
+  drawImageFromSaved(0, 0, 0);
  start_server();
 }

@@ -7,9 +7,36 @@ void handleRoot() {
  server.send(200, "text/html", index_html);
 }

-void handleShow() {
+void handleUpload() {
+  if (server.hasArg("plain") == false) {
+    server.send(400, "text/plain", "body not received");
+    return;
+  }
+  String body = server.arg("plain");
+  DynamicJsonDocument doc(8192);
+  deserializeJson(doc, body);
+  JsonArray arr = doc.as<JsonArray>();
+  int row = 0;
+  for (JsonVariant val : arr) {
+    int col = 0;
+    for (JsonVariant val2 : val.as<JsonArray>()) {
+      long color = strtol(val2.as<const char*>(), NULL, 16);
+      new_image[row][col] = { (unsigned short)col, (unsigned short)row, (uint32_t)color };
+      col++;
+    }
+    row++;
+  }
+  
+  pixels.clear();
+  drawImageFromArr(0, 0);
+  pixels.show();
+  server.send(200, "text/plain", "OK");
+}
+
+void handleShowSaved() {
+  pixels.clear();
+  drawImageFromSaved(0, 0, 0);
  pixels.show();
-  drawImageFromArr(0, 0, 0);
  server.send(200, "text/plain", "OK");
 }

@@ -23,7 +50,8 @@ void start_server() {
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
-  server.on("/show", handleShow);
+  server.on("/show-saved", handleShowSaved);
+  server.on("/upload", HTTP_POST, handleUpload);
  server.begin();
 }