Differences

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

--- lehrkraefte:blc:informatik:ffprg1-2024:raster-basics [2024/04/09 14:39]
Ivo Blöchliger created
+++ lehrkraefte:blc:informatik:ffprg1-2024:raster-basics [2024/04/26 13:44] (current)
Ivo Blöchliger [Bilder speichern und laden]
@@ Line 1: / Line 1: @@
 ====== Die Raster-Klasse ======
-Download.
+Download: {{lehrkraefte:blc:informatik:ffprg1-2024:raster-minimal.zip}}.  **Achtung** Das zip-Archiv muss entpackt werden, bevor damit gearbeitet wird. Wenn nicht 100% klar ist, was damit gemeint ist, unbedingt nachfragen. You have been warned!
 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>
+Schachbrettmuster:
+<code javascript>
+    function schach() {
+        for (let y=0; y<meinRaster.height; y++) {
+            for (let x=0; x<meinRaster.width; x++) {
+                let wert = (x+y)%2+1; // Hier geheime Formel einfügen
+                meinRaster.setValue(x,y,wert);
+            }
+        }
+    }
+</code>