English
Tag 14: Webserver für die RGB-LED
In dem Projekt des heutigen Tages geht es um die Ansteuerung der RGB-LED mittels Webserver. Über eine übersichtliche Oberfläche kann die Farbe der LED verändert werden. Die Webseite wurde außerdem angepasst, und sollte auch auf Smartphones gut darstellbar sein.
Die Webseite mit ColorPicker
Hinter dem heutigen Adventskalendertürchen befindet sich erneut ein Widerstand, diesmal aber mit 10 kΩ (Braun, Schwarz, Orange). Diesen werden Sie für den morgigen Versuch benötigen.
Der Aufbau des heutigen Versuchs entspricht dem Aufbau des zehnten Tages. Die RGB-LED wird über Vorwiderstände an die PWM-fähigen Pins D3, D5 und D6 angeschlossen
Anschluss der RGB LED an die Pins D3, D5 und D6
Das Programm: Day14_TCPServerRGB
Die übertragene Webseite ist erneut in binärer Form in der Progmen-Variablen site verborgen. Auch diesmal können Sie die HTML-Seite im Sketchordner einsehen. Nach dem Einstellen der WLAN-Daten und dem Upload des Programms lässt sich die Webseite des Webservers über die IP des Moduls erreichen. Die Seite ist mit Hintergrundfarbe und Überschrift ähnlich designt wie die vorherige. Doch ein neues Element befindet sich auf der Seite, nämlich das HTML5-Element Color Picker. Mit ihm ist es möglich, eine Farbe für die LED auszusuchen. Sobald Sie die Farbe bestätigt haben, wird Sie von der LED angezeigt. Dabei kann sich die Darstellung des Color-Picker Elements in Abhängigkeit vom gewählten Browser stark unterscheiden.
Das ColorPicker Element im Android 5.0 Browser
Das ColorPicker Element im Android 5.0 Browser
Ich hatte zuerst das Problem, dass die LED immer dunkel blieb, obwohl die Anfragen vom Browser beim nanoESP ankamen. Daher habe ich folgenden Code in die
setupProzedur eingebaut und konnte dann sehen, dass die LED bzw. deren Ansteuerung an sich funktioniert. Vielleicht hilfts ja noch jemandem weiter. Beim Laden des programms kommt erst die Meldung „Testing RGB LED“ im SerialMonitor und die LED wird ausgeschaltet, falls sie noch leuchten sollte. Drei Sekunden später geht sie jeweils für zwei Sekunden in den Farben Rot, Grün und Blau an, so kann man auch sehen, ob sie richtig angeschlossen ist und nicht z.B. rot leuchtet, wenn sie blau leuchten soll. Schließlich geht sie nochmal für eine Sekunde aus und dann in mittlerer Helligkeit weiß an.void setup() {
...
digitalWrite(LED_WLAN, HIGH);
/*
* Neuer Code zum Testen der LED
*/
debug("Testing RGB LED");
analogWrite(RED, 0);
analogWrite(GREEN, 0);
analogWrite(BLUE, 0);
delay(3000);
analogWrite(RED, 127);
delay(2000);
analogWrite(RED, 0);
analogWrite(GREEN, 127);
delay(2000);
analogWrite(GREEN, 0);
analogWrite(BLUE, 127);
delay(2000);
analogWrite(BLUE, 0);
delay(1000);
analogWrite(RED, 127);
analogWrite(GREEN, 127);
analogWrite(BLUE, 127);
Danke,
endlich mal ein einfaches und verständliches Testprogramm.Hat mir sehr geholfen.
Bei mir gehts nur mit Chrome und Safari.
Bei mir steht im Serial Monitor immer:
ESP SEND ERROR: AT+RST
ESP SEND ERROR: AT+CWMODE=1
ESP SEND ERROR: AT+CWJAP=“A1-0C118F“,“DF7AF7360D“
ESP SEND ERROR: AT+CIPMODE=0
ESP SEND ERROR: AT+CIPMUX=0
Weiß jemand warum? an der Internetverbindung liegt es jedenfalls nicht, weil das Programm vom Vortag auch heute funktioniert.
Hast Du am Programm rum gebastelt? Das sieht nach fehlerhaften Befehlen aus.
Nein, hab ich nicht
Die LED flackert ganz leicht grün.
Probier mal den Sketch von Tag1. Nicht dass Dein Board defekt ist.
Vielleicht hast du die LED falsch angeschlossen (verkehrt herum eingesetzt)
Hallo zusammen,
Habe mal eine Verständnisfrage: NanoESP ist mit heimischem WLAN verbunden, Stromversorgung des NanoESP über 9V Block.
Laptop ist ebenfalls mit heimischem WLAN verbunden.
Das Aufrufen der html Seite über die IP des Boards, und die Bedienung der LED klappt problemlos.
Wenn ich aber von Außerhalb, über Internet über einen UMTS Stick auf die html Seite zugreifen will (nur IP des Boards in der Adresszeile), kommt die Meldung: „Seitenladefehler wegen Zeitüberschreitung“.
Hat jemand eine Idee, was ich falsch mache?
Danke und Gruß, MC.
Hallo MC,
Dein lokales Netz und das Internet sind durch den Router / Modem getrennt. Um den nanoESP vom Internet aus erreichen zu können, muss am Router „Port Forwarding“ eingestellt werden. Du musst dann die öffentliche IP Adresse Deines Routers in den Browser eingeben und der leitet dass dann an den nanoESP weiter. Wie „Port Forwarding“ eingestellt wird ist leider auf jedem Gerät anders geregelt. Hier hilft Handbuch lesen (wenn vorhanden) und / oder googeln…
Hallo Hannes,
Vielen Dank für die top Antwort! Da muss ich mal sehen, was mit meinem Router geht.
Gibt es hier vielleicht auch die Möglichkeit das Board zu erreichen über DNS?
Sonst sollte mann jedes mal die IP Adresse suchen.
Ich habe keine Möglichkeit gefunden, den Hostnamen in dem IP Stack des ESP8266 zu setzen. Damit kann es kein automatisches Update eines DNS Servers geben. Du must daher Deinen DNS Server selber (von Hand) konfigurieren.
Wenn Du es nur von einem Deinem Rechner aus machen willst, so mache den Eintrag doch in die lokale hosts Datei (bei Windows zu finden unter %windir%\System2\drivers\etc
Sollte natürlich %windir%\System32\drivers\etc heißen.
Guten Morgen, hoffe mal, das ist keine illegale Werbung.
https://www.facebook.com/groups/967872949952771/
(IoT mit dem NanoESP)
Angelegt für weitere, weitergehende Experimente, Erfahrungsaustausch, Bilder, Videos…
Viel Spaß
Jens
Für alle, bei denen das Umschalten auf Schwarz (d.h. das Ausschalten der RGB-LED nicht zuverlässig funktioniert: Die Frage von Stefanie („Warum wird die gewählte Frabe nur kurz im Color Picker angezeigt“) und die Lösung von Klaus dazu im Forum erklären dies.
Der Color Picker (das Element input mit dem Attribut type=color besitzt auch ein Attribute value und das ist die Farbe, die im Color Picker angezeigt wird. Dieses Attribut wird aber im Original-Programm nicht gesetzt und hat daher den default Wert value=#000000. Wenn nun Schwarz ausgewählt wird, so weigert sich anscheinend der Browser manchmal, diesen Wert zu senden, weil er sich sagt: Da hat sich doch nicht verändert, warum sollte ich das tun. (Browser denken nun mal und machen nicht immer das, was sie sollen.)
Ihr könnt das probieren, indem ihr in die globale Variable site[] an der passenden Stelle das Attribut value=#ff0000 einfügt. Dann geht auf einmal Rot nicht mehr zuverlässig.
Lösung: Das Programm von Klaus aus dem Forum in dieser Hinsicht besser funktionieren.
Workaround: Einfach value=#000001 setzten, das ist ein unwahrscheinlicher Wert für eine Auswahl mit dem Color Picker.
Du hast Recht. Das war der Grund, warum schwarz nicht gesendet wurde. Hatte ich gar nicht mehr ausprobiert. Jetzt funktioniert es.
Hallo,
ich habe das Beispielprogramm mal so überarbeitet, dass es den unten erwähnten jscolor Color Picker verwendet – jetzt klappts auch mitm iPhone/iPad prima :-)
https://www.dropbox.com/s/8ge8y5226qa24a6/Day14_TCPServerRGB_teeqemm.ino?dl=0
Viele Grüße,
Thomas
Gibts das auch als offline Version? Wenn man das Board nämlich als AP betreibt, ist da nix mit dem Download eines Scripts aus dem Internet.
Funktioniert einwandfrei!!!
Werde morgen mal beide Programme nebeneinander legen und vergleichen. Als Anfänger erhoffe ich mir so einen Lerneffekt.
Vielen Dank :)
Funktioniert prima!
mfg
Wunder über Wunder … heute funktionieren die Projekte mit TCP-Server (Tag 11 bis heute) von ganz alleine sofort und ohne hänger, timeouts etc. Allerdings hat der Router dem Nano heute auch in seiner unerforschlichen Weisheit eine auch andere IP Adresse zugeteilt. Was mich zu der Frage bringt:
Kann man dem Modul einen Namen zuweisen, über den man es im Browser aufrufen kann, anstatt über die IP-Adresse, die man ja nicht wirklich kennt, wenn das Modul autonom betrieben wird ?
Also meiner Fritzbox kann ich sagen das sie bestimmten geräten immer die gleiche IP zuweißt.
Kann mir jemand helfen. Seit dem 11. Dezember kalppt es bei mir nicht. Ich bekomme zwar im Serial Monitor die Info und und es steht auch, der Server ist aktiv. Muss ich irgendetwas am Router oder im Browser einstellen, damit es geht? Ich habe es mit Chrome und Internet Explorer probiert. Kann es auch an der IP-Adresse liegen?
Viel Dank für die Hilfe.
Habe genau das gleiche Problem.
Es ist ärgerlich, wenn das Ziel so zum greifen nah scheint :D
Hi, vielleicht gebt ihr die IP Adresse vom NanoESP falsch ein.
Richtig ist, IP/LED
Die richtige IP-ADRESSE wird im Seriellen Monitor angezeigt.
Gibt es auch eine Möglichkeit, dass bei der html Seite die Farbauswahl nicht immer als schwarz angezeigt wird (es flackert nur kurz die gewählte Farbe auf, dann wieder schwarz), sondern die derzeitig ausgewählte Farbe annimmt? Wäre super, wenn man nicht gerade das optische Feedback von der Led zurückbekommt, da man weiter weg ist, generell etc.
LG
Schau mal im Forum. Da habe ich genau eine solche Version gepostet.
Using windows 8 and chrome the colorpicker works for custom colors only after one selecting a basic color first…
Die Farbe in dem Color Picker (genauer gesagt im Element input mit dem Attribut type=color wird bestimmt durch den Wert des Attributs value dieses Elements. Dieses Attribut wird aber in unserem kleinen Programm gar nicht gesetzt, geschweige den durch einen Request des Browsers verändert. Daher wird der Wert #000000, also Schwarz angenommen und angezeigt.
Du müsstest also in der globalen Varibale site[] das Attribut value=“#000000″ an genannter Stelle einbauen und dann in der Funktion createWebsite(), wenn diese Variable in die Variable xBuffer umkopiert wird, den Wert #000000 durch den Wert hinter rgb= in der URL ersetzten (steht in der Funktion Loop() in der Variable hexstring).
Ich bin heute zu faul dazu (schau mal auf die Uhr).
Gruß
Hartmut
Hups, meine Antwort gehört zu Frage von Stefanie, weiter oben und die hat Klaus auch schon beantwortet.
Ist wohl doch zu spät für mich heute.
Achtung! Nicht dass manche verzweifeln. Der Colorpicker funktioniert auf Windows7 nicht richtig (zumindest bei meiner Version). Wenn man z.B. schwarz auswählt, sendet er die Farbe überhaupt nicht zum Board. Hat aber nix mit dem Board zu tun, sondern der Browser sendet es einfach nicht. Hab Firefox, Chrome und Opera probiert. Bei allen das gleiche. Man kann oben in der Adresszeile sehen, dass nix hin gesendet wird. Nach Absenden von schwarz sollte dort was stehen, was mit 000000 endet. Tut es aber nicht.
Ich stelle gerade fest, Ipad und Android-Handy machen es auch nicht
Beim mir funktioniert es auf Windows 7
Hast Du mal probiert, wirklich schwarz zu senden? Also wirklich komplett aus. Da es bei 3 Geräten so ist, glaube ich nicht, dass es bei mir liegt.
Die LED leuchtet nur Blau!!!!!!!!!!!!!
Select Color
Change the Color
of the RGB-LED
[hier gibt es keine Farbe zu wählen bei mir]
So eine Webseite mit Kommentaren ist zu lang um vollständig gelesen zu werden. ??
Hallo nerd!
War auch mein erster Gedanke.Ich tippe auf Safari und iPhone.
Hallo Markus, vielleicht hilft #ff0000 oder #00ff00 oder #0000ff oder Lesen.
Hallo,
Interessant. Auch wenn es nur mit dem Tipp von Hartmut funktioniert. So und durch umstöpseln der Pins konnte ich herausfinden, dass Pin D3 (rot) scheinbar kein Signal liefert. Board kaputt? Oder kann es an etwas anderem liegen?
Hi, Tag 14 funktioniert (fast wie immer) wunderbar. Danke dem Autor.
Nun ist hier des öfteren bemängelt worden, das die Sketche nicht vor Kommentar strotzen. Das stimmt, und es wäre für mich und viele Andere sehr hilfreich. Nun sieht man an den Kommentaren, dass es Manche hier aus der Gruppe „drauf hätten“ diese Fleißarbeit zu übernehmen und das (oder den?) voll kommentierten Sketch hochzuladen. Unser großer Dank wäre Euch gewiss. Auch wenn einmal im Kommentar stehen würde „Weiß ich auch nicht, … oder dgl.“ kein Problem. Ich selbst habe so meine Probleme C zu verstehen und so wäre dies eine große Hilfe. Vielleicht klapp’s, dann schon mal DANKE
Für nicht preissensitive Programmier-Einsteiger empfehle ich das Franzis Arduino Lernpaket.
Preis Lernpaket minus Preis Arduino Uno = etwas teures Handbuch. Experimentierzubehör mager.
siehe auch:
http://www.linux-community.de/Internal/Artikel/Print-Artikel/LinuxUser/2011/02/Arduino-Lernpaket-von-Franzis
Hi, Will mal nachfragen ob man die Farbe noch im Programm (für NanoESP)anpassen kann. Z.B. wird bei mir Grün zu Blau oder gelb zu weiss. Wobei bei Blau auch Blau rauskommt.
Bitte nicht auf meine Frage Antworten. Habe Pin 4 mit angeschlossen. Kann es jetzt aber nicht mehr testen, bin arbeiten.
Guten Morgen – Bei mir funktioniert das nicht wirklich gut:
Zuerstmal Programm laden, dann SSID und Password ohne eckige Klammern eingeben, dann hochladen und wenn das beendet ist den Serial Monitor starten.
Dadurch schaltet zunächst die WLAN Verbindung wieder ab und erneutert sich dann.
Dann trenne ich das Board und verbinde mit einem Powerbar über das USB Kabel. Das Board startet wieder und die zweite blaue Leuchte geht wieder an.
Jetzt kann ich mich über den Firefox unter meiner IP einloggen. Das funktioniert auch vom Handy aus.
Wähle ich dann eine Farbe so erscheint diese auf dem Board. Aber sowohl Firefox als auch über Handy bricht dann die Vrbindung ab. Ein mehrfacher Farbwechsel funktioniert nicht.
Warum eigentlich nicht?
Wer kann das erklären?
Funktioniert prima – vorsicht, manche Browser unterstützen nicht den Color Picker (siehe hier: http://caniuse.com/#feat=input-color)… stattdessen zeigt der Safari aufm iPad z.B. ein Texteingabefeld an, in das man einen Hex-RGB-Wert eintragen kann, also z.B. #ff0000 für rot, #00ff00 für grün und #0000ff für blau (das „#“ nicht vergessen).
Es gibt bestimmt auch einen passenden html-code für Safari bzw. IOS. Hat da jemand Ahnung? Wär cool!
Installiert Euch doch einen anderen Browser, wie z.B. Firefox.
Ich seh‘ grad … der ColorPicker scheint eine Funktion des Betriebssystems zu sein. Iphöner mit Firefox können’s leider auch nicht in „schön“.
http://jscolor.com
Richtig, es gibt einige JavaScript Frameworks, die entweder einen Color Picker selbst anbieten oder HTML5 Features, die der Browser nicht unterstützt, entsprechend emulieren. Die kann man ja über ein Content Delivery Network laden (z.B. Google CDN) und müssen daher nicht von unserem kleinen Chip geliefert werden.
Das ganze (Webseiten, die überall gut aussehen) ist aber eigentlich nicht Thema unseres Adventskalenders. Zur Not geht es daher auch ohne Color Picker indem man im Browser die URL:
(IP Adresse)?rgb=#(Hex Wert der Farbe)
also zum Beispiel
192.168.178.47?rgb=#FF0000
eingibt.