Wemos D1 mini Shield: RGB LED per Webanwendung steuern

Webseite zum steuern der RGB Led am Wemos D1 mini
Webseite zum steuern der RGB Led am Wemos D1 mini

In diesem Tutorial möchte ich die RGB Led mit einer kleinen Webanwendung steuern.

Wemos D1 mini mit RGB LED Shield
Wemos D1 mini mit RGB LED Shield

Aufbau

Das RGB Led Shield wird einfach auf den Wemos D1 mini gesteckt (hier ist auf die korrekte Pinbelegung zu achten).

Sketch

Der Sketch setzt sich aus drei Teilen zusammen:

Verbindung mit dem Netzwerk herstellen

Als erstes muss eine Verbindung mit einem Netzwerk (per WLAN) hergestellt werden, dafür wird die SSID sowie der WLAN Schlüssel benötigt.

Anzeigen einer Webseite

Wenn die Verbindung hergestellt wurde dann muss dem Benutzer eine Webseite bereitgestellt werden wo dieser die Werte rot, grün und blau der RGB Led einstellen kann.

Auswerten der übermittelten Werte

Die Werte aus der Webseite müssen ausgewertet werden und an die RGB Led „weitergeleitet“ werden.

Quellcode

JavaScript & CSS Styles

Die JavaScript und CSS Styles habe ich ausgelagert da dieses den Quellcode unnötig aufblähen würde.

JavaScript „functions.js“

CSS Styles „styles.css“

Webseite im Browser

Die fertige Seite kann nun in einem Browser mit der IP Adresse des Wemos geöffnet werden. Dazu tippt man die IP Adresse aus dem Seriellen Monitor der Arduino IDE in die Adressleiste des Browsers.

Webseite zum steuern der RGB Led am Wemos D1 mini
Webseite zum steuern der RGB Led am Wemos D1 mini

Über diese kleine Webseite kann man nun die Werte für rot, grün und blau anpassen. Des Weiteren kann die Helligkeit der LED angepasst werden.

Durch einen klick auf die Schaltfläche „Absenden“ werden die eingestellten Werte an den Wemos gesendet und dargestellt (dieses kann ein bis zwei Sekunden dauern).

Die Vorschau der Farbe stimmt nicht 100%ig mit dem später angezeigten Farbwert überein.

Video

WS1812B RGB LED Shield am Wemos D1 mini

Verwandte Beiträge

1 Kommentar

  1. Hi, es gibt mittlerweile auch andere Techniken zum Senden von Webcontent:
    im Setup: server.on(„/“,handleIndex);
    im loop: server.handleClient();

    void handleIndex() {
    String message = „…“;
    server.send(200, „text/html“, message );
    }

    soweit ich das beobachtet habe geht die Übertragung auch etwas schneller als mit client.println(„…“); und es ist etwas übersichtlicher im Quellcode.

    Ich hab die Technik in meinem kleinen Projekt https://github.com/polygontwist/ESP_sonoff_Schaltuhr benutzt (wenn auch da noch nicht alles optimal ist).

    salü

Antworten

Deine E-Mail-Adresse wird nicht veröffentlicht.


*