In diesem Tutorial möchte ich die RGB LED mit einer kleinen Webanwendung steuern.
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
#include <ESP8266WiFi.h>
#include <Adafruit_NeoPixel.h>
const char* ssid = "FRITZ!Box 7312"; //SSID aus dem Router
const char* password = "96411620846463355405"; //Passwort für den Zugang zum WLAN
WiFiServer server(80); //Port auf welchem der Server laufen soll.
#define PIN D2 //RGB LED Chip auf dem Digitalen PIN D2
//"Einrichten" des NeopPixel, 1 NeoPixel auf dem digitalen Pin D2
Adafruit_NeoPixel pixels = Adafruit_NeoPixel(1, PIN, NEO_GRB + NEO_KHZ800);
int redValue = 0;
int greenValue = 0;
int blueValue = 0;
int brightnessValue = 10;
void setup() {
Serial.begin(115200); //Baudrate für die Serielle Geschwindigkeit.
delay(10); //10ms. Warten damit die Seriele Kommunikation aufgebaut wurde.
Serial.print("Aufbau der Verbindung zu: "); //Ausgabe der SSID auf der Seriellen Schnittstelle.
Serial.println(ssid);
WiFi.begin(ssid, password); //Initialisieren der Wifi Verbindung.
while (WiFi.status() != WL_CONNECTED) { //Warten bis die Verbindung aufgebaut wurde.
delay(500);
//Einen Punkt auf der Seriellen Schnittstelle ausgeben so das der Benutzer erkennt dass, das Sketch noch läuft.
Serial.print(".");
}
//Bei erfolgreicher Verbindung wird der folgende Text ausgeben.
Serial.print("Mit ");
Serial.print(ssid);
Serial.println("erfolgreich verbunden!");
server.begin(); // Starten des Servers.
Serial.println("Server gestartet"); //Ausgabe auf der Seriellen Schnittstelle das der Server gestartet wurde.
pixels.begin(); //initialisieren
// Ausgabe der IP Adresse
Serial.print("Adresse : http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
WiFiClient client = server.available();
if (!client) {
return;
}
// Wenn sich ein Client verbunden hat solange warten bis Daten gesendet werden.
Serial.println("Neuer Client verbunden.");
while(!client.available()){
delay(1);
}
//Lesen der Anfrage vom Client
String request = client.readStringUntil('\r');
Serial.print("Vom Client empfangen: ");
Serial.println(request);
client.flush();
char d1 = '?';
char d2 = '&';
int counter = 0;
for(int i=0;i<request.length();i++){
char c = request.charAt(i);
if(c == d1 || c == d2){
String value = request.substring(i+3,i+6);
int intValue = value.toInt();
Serial.println(value);
if(counter == 0){
redValue = intValue;
} else if(counter == 1){
greenValue = intValue;
} else if(counter == 2){
blueValue = intValue;
}else if(counter == 3){
brightnessValue = intValue;
}
Serial.println("found");
counter++;
}
}
writeResponse(client);
updateRgbLed();
}
void updateRgbLed(){
pixels.setPixelColor(0, pixels.Color(redValue, greenValue , blueValue ));
pixels.setBrightness(brightnessValue);
pixels.show(); //Aktualisieren des NeoPixels
}
/**
* Die Funktion gibt den HTML Kopf auf dem Client aus.
* Dieses wird für jeden Respond verwendet.
**/
void writeResponse(WiFiClient client){
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("");
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<script type='text/javascript' src='http://progs.draeger-it.blog/wemosd1/jquerymin.js'></script>");
client.println("<script type='text/javascript' src='http://progs.draeger-it.blog/wemosd1/rgbled/functions.js'></script>");
client.println("<link rel='stylesheet' href='http://progs.draeger-it.blog/wemosd1/slider.css'/>");
client.println("<link rel='stylesheet' href='http://progs.draeger-it.blog/wemosd1/rgbled/styles.css'/>");
client.println("</head>");
client.println("<body>");
client.println("<div class='wrapper'>");
client.println("<h2>RGB LED Shield am Wemos D1 Mini</h2>");
client.println("<form>");
client.println("<div class='container'>");
client.println("<img src='https://draeger-it.blog/wp-content/uploads/2018/01/wemos_mit_rgbled-1.jpg ' width='150' height='*'/>");
client.println("</div>");
client.println("<div class='container'>");
client.println("<label for='redSlider'>Rot</label>");
client.print("<div class='slidecontainer'><input type='range' min='0' max='255' value='");
client.print(redValue);
client.println("' class='slider' id='redSlider'/></div>");
client.println("<label for='greenSlider'>Grün</label>");
client.print("<div class='slidecontainer'><input type='range' min='0' max='255' value='");
client.print(greenValue);
client.println("' class='slider' id='greenSlider'/></div>");
client.println("<label for='blueSlider'>Blau</label>");
client.print("<div class='slidecontainer'><input type='range' min='0' max='255' value='");
client.print(blueValue);
client.println("' class='slider' id='blueSlider'/></div>");
client.println("<label for='brightnessSlider'>Helligkeit</label>");
client.print("<div class='slidecontainer'><input type='range' min='0' max='255' value='");
client.print(brightnessValue);
client.println("' class='slider' id='brightnessSlider'/></div>");
client.println("</div>");
client.println("<div class='previewContainer'>");
client.println("<div class='preview'></div>");
client.println("</div>");
client.println("<div style='clear:both'>");
client.println("<input type='button' value='Absenden' onClick='sendValues();'/>");
client.println("</form>");
client.println("</div>");
client.println("</body>");
client.println("</html>");
}
JavaScript & CSS Styles
Die JavaScript und CSS Styles habe ich ausgelagert da dieses den Quellcode unnötig aufblähen würde.
JavaScript “functions.js”
$=jQuery;
$(function() {
updatePreviewContainer();
$(".slider").change(function() {
updatePreviewContainer();
});
});
function updatePreviewContainer(){
var redValue = $("#redSlider").val();
var greenValue = $("#greenSlider").val();
var blueValue = $("#blueSlider").val();
var rgbValue = "rgb("+redValue+"," + greenValue + "," + blueValue + ")";
$(".preview").css("background-color", rgbValue);
}
function sendValues(){
var redValue = $("#redSlider").val();
var greenValue = $("#greenSlider").val();
var blueValue = $("#blueSlider").val();
var brightnessValue = $("#brightnessSlider").val();
var url = "http://192.168.178.57/rgb?r="+pad(redValue,3)+"&g="+pad(greenValue,3)+"&b="+pad(blueValue,3)+"&h="+pad(brightnessValue,3);
$.ajax({
url: url,
context: document.body
});
}
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
CSS Styles “styles.css”
.wrapper{margin:0px auto; padding:15px;}
.container{float:left; padding:10px;}
.previewContainer{float:left; padding:40px;}
.preview{border: 1px solid black; width:30px; height:20px;}
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.
Ü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.
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ü