Differences

This shows you the differences between two versions of the page.

--- lehrkraefte:blc:informatik:ffprg1-2024:raster-basics [2024/04/09 15:14]
Ivo Blöchliger [Die Raster-Klasse]
+++ lehrkraefte:blc:informatik:ffprg1-2024:raster-basics [2024/04/26 13:23]
Ivo Blöchliger [Bilder speichern und laden]
@@ Line 4: / Line 4: @@
 Die Rasterklasse beinhaltet:
-  * Einige HTML-Elemente, die mit bestimmten Klassen und/oder IDs versehen sind.
+  * Eine HTML-Datei mit einigen HTML-Elementen, die mit bestimmten Klassen und/oder IDs versehen sind.
   * Eine CSS-Datei, die das Layout definiert
-  * Eine JS-Datei, die das Raster initialisiert und womit dann interagiert werden kann.
+  * Eine JS-Datei, die das Raster als Objekt initialisiert und womit dann interagiert werden kann.
@@ Line 36: / Line 36: @@
+===== Einbinden von Knöpfen =====
+In HTML, den Knopf mit einer ID versehen:
+<code html>
+  <button id="startknopf">Start</button>
+</code>
+In JavaScript, den Knopf via ID auslesen und mit einem eventListener versehen:
+<code javascript>
+    let startKnopf = this.document.getElementById('startknopf');
+    startKnopf.addEventListener('click', function() {
+        console.log("Hat Start gedrückt");
+    });
+</code>
+===== Bilder speichern und laden =====
+HTML-Knopf
+<code html>
+  <button id="speichernknopf">Speichern</button>
+  <input type="text" id="bildtext">
+  <button id="ladenknopf">Laden</button>
+</code>
+JavaScript:
+<code javascript>
+   let speichernKnopf = this.document.getElementById('speichernknopf');
+    speichernKnopf.addEventListener('click', speichern);
+    function speichern() {
+        let bild = "";
+        for (let y=0; y<meinRaster.height; y++) {
+            for (let x=0; x<meinRaster.width; x++) {
+                let wert = meinRaster.getValue(x,y);
+                bild += String(wert);
+            }
+        }
+        console.log(bild);
+        document.getElementById('bildtext').value = bild;
+    }
+      let ladenKnopf = this.document.getElementById('ladenknopf');
+    ladenKnopf.addEventListener('click', laden);
+    function laden() {
+        let bild = document.getElementById('bildtext').value;
+        console.log(bild);
+        for (let i=0; i<bild.length; i++) {
+            let wert = Number(bild[i]);
+            let x = i % meinRaster.width;
+            let y = Math.floor(i/meinRaster.width);
+            meinRaster.setValue(x,y, wert)
+        }
+    }
+</code>