From 1320b29b43937257cc5884696f37e74b917838f5 Mon Sep 17 00:00:00 2001
From: root <root@dockerbox.morz.de>
Date: Wed, 23 Oct 2024 19:44:43 +0200
Subject: [PATCH] Lizenz angepasst

---
 index.html | 10 +++++++---
 script.js  | 13 +++++++++++--
 2 files changed, 18 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index cbe1da1..23aee1f 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bild mit Farboverlay</title>
+    <title>Bild mit Farboverlay verschiedener Farben einf&auml;rben</title>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -27,11 +27,15 @@
 </head>
 <body>
 
-    <h1>Bild hochladen und Farboverlay hinzufügen</h1>
-
+    <h1>Moodle-Kachel-Colorizer - aus einer Kachel mach' ich 12 bunte</h1>
+<hr>
+1. Kachelbild hochladen
     <input type="file" id="imageUpload" accept="image/*">
+    <div id="imageDimensions" style="margin-top: 10px;"></div>
+<hr>
     <br><br>
 
+2. bei Bedarf Farben einstellen
     <div class="canvas-container">
         <!-- 12 canvases with color inputs -->
         <div class="canvas-item">
diff --git a/script.js b/script.js
index deb87d7..f323a81 100644
--- a/script.js
+++ b/script.js
@@ -2,8 +2,11 @@
 // Kachelbild hochladen --> unzählige Kacheln in verschiedenen Farben erhalten 
 // einzeln oder als ZIP runterladen.
 // jesko@linuxmuster.net im Oktober 2024
-// Lizenz: GPL3
+// Lizenz: MIT oder GPLv3
 // 
+// Das Skript nutzt JSZip von Stuart Knightley, um die Bilder beim Download in eine Zip-Datei zu packen. <http://stuartk.com/jszip>
+//
+//
 // Die Farben in der Context-Map, die englische Namen haben sind die standardfarben, die mit deutschen Namen sind die Farben aus dem Moodle-Kachelkursformat... Alles ist anpassbar. Have fun!
 
 const imageUpload = document.getElementById('imageUpload');
@@ -42,6 +45,7 @@ imageUpload.addEventListener('change', function(event) {
             drawImageOnAll();      // Zeige das Bild auf allen Canvas an
             saveOriginalImageData(); // Speichere die Original-Image-Daten
             applyOverlayToAll();   // Wende direkt nach dem Hochladen die Overlays an
+            displayImageDimensions(img.width, img.height); // zeige die Bildmaße an
         };
     };
     reader.readAsDataURL(file);
@@ -56,6 +60,11 @@ function setCanvasDimensions() {
     });
 }
 
+function displayImageDimensions(width, height) {
+    const dimensionsDiv = document.getElementById('imageDimensions');
+    dimensionsDiv.innerHTML = `Bildmaße: ${width} px (B) x ${height} px (H)`; // Zeige die Maße an
+}
+
 // Zeichne das Originalbild auf alle Canvas-Elemente
 function drawImageOnAll() {
     Object.values(ctxMap).forEach(ctx => ctx.drawImage(img, 0, 0));
@@ -86,7 +95,7 @@ function applyOverlayToAll() {
 
     // Zeige den Download-Link an
     downloadAllLink.style.display = 'block';
-    downloadAllLink.textContent = `Alle Bilder als ${originalFileName}-gefärbt.zip herunterladen`;
+    downloadAllLink.textContent = `alle Bilder als ZIP-Datei herunterladen (${originalFileName}-gefärbt.zip)`;
 }
 
 // Overlay-Funktion, die das Overlay auf ein Canvas-Element anwendet
