Materialien zum Unterricht

Die RGB-LED komplett steuern

Es werden nun alle bisherigen Teile zusammengefügt. Auf der vom Webserver zur Verfügung gestellten Seite werden drei Schieberegler angezeigt, an denen für jede Farbe Werte von 0 bis 1023 eingestellt werden können. Diese Werte werden bei jeder Änderung in einem Array gespeichert, das als JSON-Objekt an den Webserver (ESP32) geschickt wird. Dort werden die Werte empfangen und über Pulsweitenmodulation die Farbe der RGB-LED eingestellt.

Damit lässt sich über das mobile Gerät die Farbe der LED beliebig einstellen.

An Stelle der drei Button kommen jetzt drei Schieberegler zum Einsatz. Sie sind ein Eingabeelement (input) vom Type range. Um die eigentliche Darstellung kümmert sich der Browser. Sie lassen sich von 0 bis 1023 in Einerschritten einstellen und haben beim Aufruf der Seite den Wert 0. accent-color gibt den Reglern etwas Farbe.

Vor den Reglern steht ein Label-Objekt für die Beschriftung. Hinter den Reglern befindet sich ein Textfeld, in das zur Kontrolle der Reglerwert eingetragen wird. Diese Felder können dann wieder gelöscht werden.

Die einzelnen Farben werden vor dem Versenden an der Server wieder in einem Array gespeichert. Die drei folgenden Zeilen rufen bei jeder Änderung eines Reglers die Funktion farbe_aendern auf.

Die Funktion farbe_aendern() holt sich von allen drei Reglern den aktuellen Wert und trägt diese Werte in die Textfelder hinter den Reglern ein.

Das Senden der Werte an den Server ist auskommentiert und wird demnach nicht ausgeführt.

Wenn alles gut funktioniert, kann man mit den Reglern die Werte in den Textfeldern von 0 bis 1023 ändern.

 


<!DOCTYPE html>
<html>
 <head>
  <title>LED</title>
  <link rel="icon" type="image/vnd.ico" href="favicon.ico">
 </head>
 <body>
 <h1>LED-Steurung</h1>
    <label for="rot">Rot </label>
    <input id="rot" type="range" min="0" max="1023" step="1.0" value="0" style="accent-color:#f00">
    <input type="text" id="wert_rot" value="0"><br>
    <label for="gruen">Grün </label>
    <input id="gruen"type="range" min="0" max="1023" step="1.0" value="0" style="accent-color:#0f0">
    <input type="text" id="wert_gruen" value="0"><br>
    <label for="blau">Blau </label>
    <input id="blau" type="range" min="0" max="1023" step="1.0" value="0" style="accent-color:#00f">
    <input type="text" id="wert_blau" value="0">
   </form>

   <script>
    let farben=[0,0,0];
    //immer, wenn sich im Element #rot etwas ändert, wird die Funktion farbe_aendern aufgerufen
    document.querySelector('#rot').addEventListener('input', farbe_aendern);
    document.querySelector('#gruen').addEventListener('input', farbe_aendern);
    document.querySelector('#blau').addEventListener('input', farbe_aendern);	

    function farbe_aendern() {
       regler_rot=document.querySelector('#rot');
       regler_gruen=document.querySelector('#gruen');
       regler_blau=document.querySelector('#blau');
       document.getElementById('wert_rot').setAttribute("value", parseInt(regler_rot.value));
       document.getElementById('wert_gruen').setAttribute("value", parseInt(regler_gruen.value));
       document.getElementById('wert_blau').setAttribute("value", parseInt(regler_blau.value));
      //senden(farben) ist auskommentiert. Die beiden // müssen zum Schluss entfernt werden!
      //senden(farben);
    }
/*
    function senden(farben) {
       fetch('/', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
        },
       body: JSON.stringify(farben)
       })
    }
*/
   </script>
  </body>
</html>

Wenn man so weit gekommen ist, ist es nur noch ein kleiner Schritt zur perfekten Steuerung der RGB-LED. In der index.html werden die auskommentierten Teile wieder aktiviert und die von den Reglern gelieferten Werte in das Array geschrieben. Im Python-Script sind auch nur wenige Änderungen vorzunehmen. Es wird nichts gelöscht, sondern nur ergänzt.

Wenn alles funktioniert, kann man sämtliche Textanzeigen wieder entfernen, also im HTML-Skript die Textfelder hinter den Reglern und im Python-Script alle print-Befehle. Im Video sind die Textfelder noch aktiv.

zurück