Deutsch
Day 14: Webserver for the RGB-LED
Today’s project is about controlling the RGB-LED by web server. A well-structured interface can be used to change the colour of the LED. The website has also been adjusted and should be easy to display even on Smartphones.
The website on a PC browser
Behind today’s advent calendar door, there is another resistor, but this one is of 10 kΩ (brown, black, orange). You will need it for tomorrow’s experiment.
The circuit of todays project
The structure of today’s experiment is like the one from day ten. The RGB-LED is connected to the PWM-capable pins D3, D5 and D6 with dropping resistors.
The program: Day14_TCPServerRGB
The transmitted website is again concealed in the Progmem variables site in binary form. Again, you can view the HTML page in the Sketch folder. After setting the WLAN data and uploading the programme, the website of the web server can be reached via the IP of the module. The page is designed similarly to the previous one in background colour and headline. However, there is a new element on the page, i.e. the HTML5element Colour Picker. It can be used to select a colour for the LED. Once you have confirmed the colour, the LED will display it. The display of the Colour-Picker element may differ strongly depending on the chosen browser.
The ColorPicker element in an 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.