Materialien zum Unterricht

Die drei LEDs einzeln schalten

Es sollen die drei LEDs in der RGB-LED einzeln ein- oder ausgeschaltet werden. Dazu werden auf der Website drei Button dargestellt, die jeweils eine Farbe ein- oder ausschalten.

Die Seite schickt damit an den Server eine von 8 unterschiedlichen Nachrrichten, die der Server erkennt und darauf reagiert. Die Informationen werden in ein JSON-Objekt verpackt.

Aufgabe: Informiere dich über das JSON-Objekt.

Im Formular werden drei Button erstellt, die jeweils eine Farbe ein- oder ausschalten. Sie sind jetzt vom Type button. Damit wird beim Klick auf den Button das Formular nicht mehr an den Server geschickt.

Die drei Farbinformationen werden in einem Array farben abgelegt. Zu Beginn soll Grün leuchten.

Zum Übertragen der Daten wird die Fetch-Methode verwendet, die Daten an den Server sendet und auch Antworten vom Server verarbeitet, aber die Seite nicht neu lädt. Dieses Verfahren wird als asynchron bezeichnet.

Da die Seite nicht neu geladen wird, müssen die drei Farbinformationen auch nicht seperat gespeichert werden. Damit entfällt der SessionStorage-Teil komplett.

Aufgabe: Lass dir von der KI die Funktion senden(farben) erklären!

 


<!DOCTYPE html>
<html>
 <head>
  <title>LED</title>
  <link rel="icon" type="image/vnd.ico" href="favicon.ico">
  <style>
    .button {
      width: 100px;
      height: 100px;
  </style>
 </head>
 <body>
 <h1>LED-Steuerung</h1>
   <form method="post" action="/">
    <button type="button" class="button" onClick="farbe_aendern(0)">Rot</button>
    <button type="button" class="button" onClick="farbe_aendern(1)">Grün</button>
    <button type="button" class="button" onClick="farbe_aendern(2)">Blau</button>
   </form>

   <script>
    let farben=[0,1,0];

    function farbe_aendern(farbe) {
     if (farben[farbe]==0) {
      farben[farbe]=1;
     } else {
      farben[farbe]=0;
     }
     senden(farben);
    }

    function senden(farben) {
      fetch('/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(farben)
       })
    }
   </script>
  </body>
</html>

Der Webserver erkennt die POST-Anfrage. Dazu sucht er in den empfangenen Daten das Wort POST.

Im Body steckt nur das JSON-Objekt. Damit es in das abgeschickte Array zurückgewandelt wird, muss das für MicroPython abgespeckte Modul ujson importiert werden. Die Methode ujson.load() wandelt den Inhalt des Body in das Array um, das dann angezeigt wird.

Jeder Klick auf einen Button im Browser ändert einen Wert des Array.



while True:
    cl, addr = s.accept()  # warten auf eine Anfrage vom Client
    print('Client verbunden von', addr)
    r = cl.recv(1024) #in r wird die Antwort des Client gespeichert
    r_str=r.decode('utf-8') #r wird in eine lesbare Form überführt
    print('Empfangene Daten:', r_str) #und angezeigt
    if 'POST' in r: #wenn es eine POST-Anfrage ist
        try:
            # Trenne die Header vom Body
            header, body = r_str.split('\r\n\r\n', 1)
            # Das JSON-Objekt ist im Body
            json_data = ujson.loads(body)
            print('Empfangenes JSON:', json_data)
        except Exception as e:
            print('Fehler beim Verarbeiten des Requests:', e)
    cl.send('HTTP/1.1 200 OK\nContent-Type: text/html\n\n')
    cl.send(html)  # die HTML-Seite wird an den Client gesendet
    cl.close()  # Verbindung schließen

Es sollte jetzt kein Problem sein, mit Hilfe der drei Werte aus dem Array die LEDs der RGB-LED ein- und auszuschalten.

Aufgabe: Wenn die LEDs an- und ausgehen, zeige über die Hintergrundfarbe der Button an, ab die Farbe ein- oder ausgeschaltet ist.

zurück