fix image in custompages

lib/index.html

@@ -330,7 +330,7 @@ <h2>3. Preview</h2>
 		function horizontal1bit(data, canvasWidth, canvasHeight, filname) {
 			var output = new Uint8Array(Math.ceil(canvasWidth * canvasHeight / 8) + 2);
 			var output_index = 0;
-
+			alert(canvasWidth + "  " +canvasHeight);
 			// Write the width and height to the output buffer
 			output[0] = canvasWidth;
 			output[1] = canvasHeight;
@@ -350,12 +350,7 @@ <h2>3. Preview</h2>
 				// if this was the last pixel of a row or the last pixel of the
 				// image, fill up the rest of our byte with zeros so it always contains 8 bits
 				if ((index != 0 && (((index / 4) + 1) % (canvasWidth)) == 0) || (index == data.length - 4)) {
-					var paddingBits = 8 - byteIndex;
-					number = number << paddingBits;
-					output[output_index + 2] = number;
-					output_index++;
-					number = 0;
-					byteIndex = 0;
+					byteIndex = -1;
 				}
 
 				// When we have the complete 8 bits, write them to the output buffer

lib/test.py

@@ -0,0 +1,22 @@
+with open("bild.bin", "rb") as file:
+    # Lese Breite und Höhe des Bildes aus den ersten beiden Bytes
+    breite = int.from_bytes(file.read(1), byteorder='big')
+    hoehe = int.from_bytes(file.read(1), byteorder='big')
+
+    # Lese Pixel-Daten aus der restlichen Datei
+    pixel_bytes = file.read()
+    pixel_data = []
+    for byte in pixel_bytes:
+        for i in range(8):
+            pixel_data.append(byte >> i & 1)
+
+    # Gebe das Bild als ASCII-Art aus
+    for y in range(breite):
+        for x in range(hoehe):
+            index = x * breite + y
+            pixel = pixel_data[index]
+            if pixel == 1:
+                print("#", end="")
+            else:
+                print("_", end="")
+        print() # Neue Zeile

src/SystemManager.cpp

@@ -37,7 +37,7 @@ HTTPClient http;
 #define DISPLAY_WIDTH 128 // OLED display width, in pixels
 #define DISPLAY_HEIGHT 64 // OLED display height, in pixels
 int16_t x_con = 128;
-const char *VERSION = "2.50";
+const char *VERSION = "2.51";
 
 time_t now;
 tm timeInfo;
@@ -345,7 +345,7 @@ void addImageToRAM(const String &name)
     }
 }
 
-void renderImage(uint8_t x, uint8_t y, const String &name)
+void renderImage(int16_t x, int16_t y, const String &name)
 {
     // Find image in array
     int imageIndex = -1;
@@ -364,11 +364,12 @@ void renderImage(uint8_t x, uint8_t y, const String &name)
         imageIndex = numImages - 1;
     }
     // Display image from RAM buffer
-    uint8_t w = images[imageIndex].buffer[0];
-    uint8_t h = images[imageIndex].buffer[1];
+    uint8_t width = images[imageIndex].buffer[0];
+    uint8_t height = images[imageIndex].buffer[1];
     uint8_t *xbmData = &images[imageIndex].buffer[2];
     size_t xbmDataSize = images[imageIndex].bufferSize - 2;
-    display.drawXbm(x, y, w, h, xbmData);
+
+    display.drawXbm(x, y, width, height, xbmData);
 }
 
 void SystemManager_::renderImagePage()
@@ -438,12 +439,13 @@ void drawCustomFrame(uint8_t pageIndex, OLEDDisplay *display, OLEDDisplayUiState
         JsonArray page = pages[pageName].as<JsonArray>();
         for (JsonObject obj : page)
         {
-            int x1 = obj["x"];
-            int y1 = obj["y"];
-            display->setTextAlignment(TEXT_ALIGN_LEFT);
+            uint8_t x1 = obj["x"];
+            uint8_t y1 = obj["y"];
+
             String type = obj["t"].as<String>();
             if (type == "text")
             {
+                display->setTextAlignment(TEXT_ALIGN_LEFT);
                 if (obj.containsKey("s"))
                 {
                     int s = obj["s"];
@@ -497,9 +499,9 @@ void drawCustomFrame(uint8_t pageIndex, OLEDDisplay *display, OLEDDisplayUiState
             }
             else if (type == "bar")
             {
-                int w = obj["w"];
-                int h = obj["h"];
-                int v = obj["v"];
+                uint8_t w = obj["w"];
+                uint8_t h = obj["h"];
+                uint8_t v = obj["v"];
                 display->drawProgressBar(x1 + x, y1 + y, w, h, v);
             }
             else

src/SystemManager.h

@@ -1,7 +1,7 @@
 #ifndef SystemManager_h
 #define SystemManager_h
 
-//#define _DEBUG_
+#define _DEBUG_
 #if defined(_DEBUG_)
     #include <Arduino.h>
     #define DEBUG_PRINTLN(x) Serial.println(x);
@@ -23,7 +23,7 @@ class SystemManager_
     IPAddress primaryDNS;
     IPAddress secondaryDNS;
 public:
-    const char *VERSION = "2.50";
+    const char *VERSION = "2.51";
     String MQTT_HOST;
     uint16_t MQTT_PORT = 1883;
     String MQTT_USER;

src/converter.h

@@ -308,65 +308,66 @@ static const char custom_css[] PROGMEM = R"EOF(
 static const char custom_script[] PROGMEM = R"EOF(
 	var __output;
 
-		// Output the image as a string for horizontally drawing displays
-		function horizontal1bit(data, canvasWidth, canvasHeight, filname) {
-			var output = new Uint8Array(Math.ceil(canvasWidth * canvasHeight / 8) + 2);
-			var output_index = 0;
-
-			// Write the width and height to the output buffer
-			output[0] = canvasWidth;
-			output[1] = canvasHeight;
-
-			var byteIndex = 0;
-			var number = 0;
-
-			// format is RGBA, so move 4 steps per pixel
-			for (var index = 0; index < data.length; index += 4) {
-				// Get the average of the RGB (we ignore A)
-				var avg = (data[index] + data[index + 1] + data[index + 2]) / 3;
-				if (avg > settings["threshold"]) {
-					number += Math.pow(2, byteIndex);
-				}
-				byteIndex++;
-
-				// if this was the last pixel of a row or the last pixel of the
-				// image, fill up the rest of our byte with zeros so it always contains 8 bits
-				if ((index != 0 && (((index / 4) + 1) % (canvasWidth)) == 0) || (index == data.length - 4)) {
-					var paddingBits = 8 - byteIndex;
-					number = number << paddingBits;
-					output[output_index + 2] = number;
-					output_index++;
-					number = 0;
-					byteIndex = 0;
-				}
-
-				// When we have the complete 8 bits, write them to the output buffer
-				if (byteIndex >= 8) {
-					output[output_index + 2] = number;
-					output_index++;
-					number = 0;
-					byteIndex = 0;
-				}
-			}
-
-			// Write the output buffer to a file
-			var blob = new Blob([output], { type: "application/octet-stream" });
-			var formData = new FormData();
-			formData.append("data", blob, '/' + filname + '.bin');
-
-			// POST data using the Fetch API
-			fetch('/edit', {
-				method: 'POST',
-				mode: 'cors',
-				body: formData
-			})
-
-				// Handle the server response
-				.then(response => response.text())
-				.then(text => {
-					openModalMessage('Success!', '<br>Image saved as ' + filname + '<br>');
-				});
-		};
+function horizontal1bit(data, canvasWidth, canvasHeight, filename) {
+    var output = new Uint8Array(Math.ceil(canvasWidth * canvasHeight / 8) + 2);
+    var output_index = 0;
+
+    // Write the width and height to the output buffer
+    output[0] = canvasWidth;
+    output[1] = canvasHeight;
+
+    var byteIndex = 0;
+    var number = 0;
+
+    // format is RGBA, so move 4 steps per pixel
+    for (var index = 0; index < data.length; index += 4) {
+        // Get the average of the RGB (we ignore A)
+        var avg = (data[index] + data[index + 1] + data[index + 2]) / 3;
+        if (avg > settings["threshold"]) {
+            number += Math.pow(2, byteIndex);
+        }
+        byteIndex++;
+
+        // if this was the last pixel of a row or the last pixel of the
+        // image, fill up the rest of our byte with zeros so it always contains 8 bits
+        if ((index != 0 && (((index / 4) + 1) % (canvasWidth)) == 0) || (index == data.length - 4)) {
+            var paddingBits = 8 - byteIndex;
+            number = number << paddingBits;
+            output[output_index + 2] = number;
+            output_index++;
+            number = 0;
+            byteIndex = 0;
+        }
+
+        // When we have the complete 8 bits, write them to the output buffer
+        if (byteIndex >= 8) {
+            output[output_index + 2] = number;
+            output_index++;
+            number = 0;
+            byteIndex = 0;
+        }
+    }
+
+    // Write the output buffer to a file
+    var blob = new Blob([output], {
+        type: "application/octet-stream"
+    });
+    var formData = new FormData();
+    formData.append("data", blob, '/' + filename+ '.bin');
+
+    // POST data using the Fetch API
+    fetch('/edit', {
+            method: 'POST',
+            mode: 'cors',
+            body: formData
+        })
+
+        // Handle the server response
+        .then(response => response.text())
+        .then(text => {
+            openModalMessage('Success!', '<br>Image saved as ' + filename+ '<br>');
+        });
+};
 
 		// An images collection with helper methods
 		function Images() {

src/main.cpp

@@ -3,14 +3,16 @@
     
   Copyright (c) 2023, Blueforcer
   [email protected]
-  All rights reserved.
+  Some Rights Reserved.
 
   Redistribution and use in source and binary forms, with or without modification, 
   are permitted provided that the following conditions are met:
 
   * Redistributions of source code must retain the above copyright notice, this list 
     of conditions and the following disclaimer.
-    
+  * You may not use the material for commercial purposes.
+  * You must give appropriate credit and indicate if changes were made.
+    You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
   * Redistributions in binary form must reproduce the above copyright notice, this 
     list of conditions and the following disclaimer in the documentation and/or other 
     materials provided with the distribution.