Forum: Mikrocontroller und Digitale Elektronik esp8266 - Farbdarstellung


von guenter (Gast)


Angehängte Dateien:

Lesenswert?

Hallo

ich habe eine "kleine" Anwendung für den esp8266 erstellt und
(bisher)erfolgreich getestet.

Jetzt möchte die farbliche Datstellung eines Button beim anklicken
ändern, dazu habe ich folgenden Code eingegeben:

<button id="F00" 
onclick="document.getElementById('F00').style.backgroundColor = 
'#FF0000';">F00</button>
<button id="F00" 
onclick="document.getElementById('F00').style.backgroundColor = 
'#00FF99';">aus</button>

als html -Datei (siehe Anhang) funktioniert die Farb-Änderung.

Im  (ESP8266-) Code funktioniert die Farb-Änderung leider
nicht; als Webbrowser verwende ich Firefox (Vers. 49.0.1)

Kann mir jemand weiterhelfen ??

Im Voraus besten Dank

Günter

von Uwe N. (ulegan)


Lesenswert?

Dsa sollte mit dem ESP8266 nichts zu tun haben, denn ob der Browser den 
Code lokal von deiner Platte, oder per Netzwerk bekommt ist doch 
eigentlich egal.
Eventuell unterscheiden sich die Sicherheitseinstellungen und du sperrst 
Javascript?
Ansonsten ist auch der Code seltsam: zwei unteschiedliche Buttons mit 
gleicher ID?
Welcher soll denn dann umgefärbt werden?

von guenter (Gast)


Lesenswert?

Hallo

den Test mit der html-Datei habe ich mit dem Tool  Notepad++  gemacht;
dort funktioniert es...

Ablauf:
Click auf den Button  F00   Button wird rot
Click auf den Button  aus   Button wird grün

JS ist nicht gesperrt (sonst würde es ja auch mit Notepad++ nicht 
funktionieren)

Gruß
Günter

von Joachim S. (oyo)


Lesenswert?

Uwe hat Recht, das dürfte mit dem ESP ja rein gar nichts zu tun haben, 
das ist ja eine reine HTML/Javascript-Frage.

Bei mir (ebenfalls Firefox 49.0 irgendwas) funktioniert das Ganze 
übrigens. Bis auf den bereits von Uwe erwähnten Fehler, dass Du für zwei 
Buttons die gleiche ID verwendest - daher wird bei mir immer nur die 
Hintergrundfarbe des ersten Buttons geändert.

von Ludwig (Gast)


Lesenswert?

Uwe N. schrieb:
> Dsa sollte mit dem ESP8266 nichts zu tun haben, denn ob der Browser den
> Code lokal von deiner Platte, oder per Netzwerk bekommt ist doch
> eigentlich egal.
> Eventuell unterscheiden sich die Sicherheitseinstellungen und du sperrst
> Javascript?

Was hat das mit JavaScript zu tun?

> Ansonsten ist auch der Code seltsam: zwei unteschiedliche Buttons mit
> gleicher ID?

Das ist es.
1
<button id="F00" onclick="document.getElementById('F00').style.backgroundColor = '#FF0000';">ein</button>
2
<button id="F01" onclick="document.getElementById('F01').style.backgroundColor = '#00FF99';">aus</button>

von Uwe N. (ulegan)


Lesenswert?

Der Code funktioniert tatsächlich, sowohl von der lokalen Festplatte, 
als auch von einem lokalen Server (kein ESP8266) aus aufgerufen.
Das id im zweiten Button ist überflüssig und eigentlich falsch.
Vertausche mal die Reihenfolge der Buttons und du wirst sehen warum.
Also hat es doch was mit dem ESP zu tun...
Was liefert dir der Server denn? Schau dir das mal im Firefox den 
Quelltext der Seite an. Ist das der gleiche, wie loka aufgerufen?

Uwe

von Uwe N. (ulegan)


Lesenswert?

@Ludwig:
document.getElementById ist JavaScript

Dein Vorschlag ist zwar korrekt, macht aber nicht, was guenter wollte. 
Er will offenbar den Button mit der Aufschrift F00 umfärben.
Also muss es bei beiden Buttons heissen 
document.GetElementById('F00')...

Die beiden gleichen ID's führen nur dazu, dass immer der erste Button 
umgefärbt wird. Deshalb gehts nicht mehr, wenn man die Buttons 
vertauscht.

Uwe

von Ludwig (Gast)


Lesenswert?

@Uwe

Asche auf mein Haupt :)

von guenter (Gast)


Lesenswert?

ich habe jetzt einen weiteren Versuch unternommen...

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

aber auch diese farbliche Darstellung funktioniert im esp8266 nicht

Jedoch als html-Datei mit  Notepad++ wird die Farbe richtig dargestellt 
!

Da fehlt mir wahrscheinlich noch eine generelle Einstellung (aber was ? 
bzw. wo ?)

hat jemand noch eine gute Idee ?

Gruß
Günter

von Michael U. (amiga)


Lesenswert?

Hallo,

der ESP hat damit direkt nichts zu tun, der schickt nur raus, was D da 
eingetippt hast.
Was sagt denn der Quelltext, der wirklich übermittelt wird?
Bei Firefox z.B. mit Rechtsklick ->Seitenquelltext anzeigen.
Kommt wirlich das an, was Du meinst geschickt zu haben?

Gruß aus Berlin
Michael

: Bearbeitet durch User
von Daniel A. (daniel-a)


Lesenswert?

Du kannst einfach prüfen, ob JavaScript im Browser aktiviert ist:
1
<noscript>Javascript ist aus!</noscript>
2
<script>document.writeln("JavaScript ist ein!");</script>

von Stefan F. (Gast)


Lesenswert?

Es könnte eine super Idee sein, zumindest die Dateien und Daten zu 
zeigen, die zwischen Mikrocontroller und Browser übertragen werden.

Weißt du, wie man Webseiten im Browser debuggt?

von guenter (Gast)


Angehängte Dateien:

Lesenswert?

Hallo Stefan

dieses Beispiel habe ich im Internet gefunden und für meinen
Test verwendet

die Einfügungen im Code habe ich gekennzeichnet;

ich verwende hierzu die Arduino-IDE

------------------------------------

Webseiten im Browser testen ??
Könntest du mir hierzu bitte entsprechende Hinweise zeigen ?

Gruß
Günter

von Michael U. (amiga)


Lesenswert?

Hallo,
1
    sResponse += "<button id=""F00"" onclick=""document.getElementById('F00').style.backgroundColor = '#FF0000'"">F00</button>""";
2
    sResponse += "<button id=""F00"" onclick=""document.getElementById('F00').style.backgroundColor = '#00FF99'"">aus</button>""";

was bringt Dich zu der Meinung, "" wäre die richtige Escape-Sequence für 
das Gänsefüßchen?
10 Zeilen darüber hast Du doch die Beispiele im Sourceode wie es richtig 
ist...

Farbe geht nach dem Korrigieren bei mir, die für mich unklare 
Buttonzuordnung usw. habe ich ignoriert, nur schnell zum Test auf ein 
NodeMCU geflasht.

Gruß aus Berlin
Michael

: Bearbeitet durch User
von guenter (Gast)


Lesenswert?

Hallo Michael

zunächst mal vielen Dank für deine Hilfestellung !

Das mit den "Gänsefüßchen" habe ich im Code jetzt doch noch nicht
hinbekommen...leider ! Um ehrlich zu sein..so recht weis ich jetzt doch 
nicht, wie ich deinen Hinweis umsetzen muss

Könntest du so nett sein,  den von dir korrigierten Code
zurück-"posten", damit ich deine Korrektur bei mir einbringen
kann ??

viele Grüße aus Oberfranken nach Berlin

Günter

von Joachim S. (oyo)


Lesenswert?

@Günter

Das Problem ist, dass Du in Deinem Quelltext in Strings immer dann, wenn 
im HTML-Code ein Anführungszeichen erscheinen soll, "" (zwei 
Anführungszeichen) hingeschrieben hast - korrekt wäre aber \" (Backslash 
gefolgt von Anführungszeichen)

Statt

sResponse += "<button id=""F00"" 
onclick=""document.getElementById('F00').style.backgroundColor = 
'#FF0000'"">F00</button>""";

müsste es also z.B. heissen:

sResponse += "<button id=\"F00\" 
onclick=\"document.getElementById('F00').style.backgroundColor = 
'#FF0000'\">F00</button>";

von Daniel A. (daniel-a)


Lesenswert?

@guenter (Gast)

Du bist nicht conny, oder?

Wie auch immer, in c ist Text zwischen zwei " ein Stringliteral. Ein 
Stringliteral enthält einen C-String, und ein C-String ist ein Character 
Array (Liste aus Zeichen) bei welchem das Letzte zeichen den wert 0 hat, 
und Nullbyte genannt wird. Das heist "test" enthält die Zeichen 't', 
'e', 's', 't' und '\0'. "abc" enthält 'a', 'b', 'c' und '\0'.

Wenn 2 Stringliterale nacheinanderstehen werden diese wie ein einziges 
behandelt. "test" "abc" ist identisch zu "testabc" und enthält die 
Zeichen 't', 'e', 's', 't', 'a', 'b', 'c', '\0'.

Escapesequenzen haben ein \ davor. Das Zeichen \ hat die Escapesequenz 
\\ , neue Linien haben die Escapesequenz '\n', Nullbytes '\0', etc. Eine 
Liste gibts hier: https://en.wikipedia.org/wiki/Escape_sequences_in_C

Wenn du ein " in einem String brauchst, musst du das Zeichen escapen, 
weil es sonst das Stringliteral beenden würde. Für einen String mit den 
Zeichen '"', 't', 'e', 's', 't', '\"', '\0' würde man "\"test\"" 
schreiben.

: Bearbeitet durch User
von guenter (Gast)


Lesenswert?

Hallo Joachim S (oyo)
Hallo Daniel Albrecht (daniel-a)

Die Erläuterungen in eueren beiden Beiträgen haben mir sehr
geholfen;

Es funktioniert jetzt bestens...also vielen Dank

@Daniel: nein ich bin nicht conny !!!

Gruß
Günter

von Stefan F. (Gast)


Lesenswert?

> Webseiten im Browser testen ??
> Könntest du mir hierzu bitte entsprechende Hinweise zeigen ?

Mit der rechten Maustaste kannst du den Seitenquelltext anzeigen. Das 
ist immer der allererste Schrittt.

Wenn du da den Fehler nicht siehst, dann benutze den Debugger. Fast 
jeder aktuelle Webbrowser öffnet den eingebauten Debugger, wenn du F12 
drückst. Klicke dich da mal durch.

Wenn der eingebaute Debugger nicht ausreicht, nimm Firefox mit dem 
Plugin "Firebug".

Lies das:
https://betterexplained.com/articles/how-to-debug-web-applications-with-firefox/

Der Artikel stimmt noch, bis auf die Angabe, dass der IE keinen Debugger 
hat. Inzwischen hat er einen.

von Michael U. (amiga)


Lesenswert?

Hallo,

als Erklärung für meine "kurze" Antwort:
1
    sResponse  = "<html><head><title>Demo f&uumlr ESP8266 Steuerung</title></head><body>";
2
    sResponse += "<font color=\"#000000\"><body bgcolor=\"#d0d0f0\">";
3
    sResponse += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">";
4
    sResponse += "<h1>Demo f&uumlr ESP8266 Steuerung</h1>";
5
    sResponse += "Funktion 1 schaltet GPIO2 und erzeugt eine serielle Ausgabe.<BR>";
6
    sResponse += "Funktion 2 erzeugt nur eine serielle Ausgabe.<BR>";
7
    sResponse += "<FONT SIZE=+1>";
8
9
// ########################################################################
10
// diesen Teil habe ich für den "Farb-Test" eingefügt
11
// ########################################################################
12
13
    sResponse += "<button id=""F00"" onclick=""document.getElementById('F00').style.backgroundColor = '#FF0000'"">F00</button>""";
14
    sResponse += "<button id=""F00"" onclick=""document.getElementById('F00').style.backgroundColor = '#00FF99'"">aus</button>""";

Im Code sind die Beispiele für das Escape ja vorhanden.
Abschauen und kurz nachdenken oder konkret nachfragen sollte doch 
eigentlich möglich sein?

Und zwar nicht nach den fehlenden Farben, sondern z.B. warum oben
1
<font color=\"#000000\"> benutzt wird.

Er hat ja am Anfang den Code gepostet, nur leider nicht den, der im 
Sketch stand.

Gruß aus Berlin
Michael

: Bearbeitet durch User
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.