Forum: Mikrocontroller und Digitale Elektronik esp8266 - Farbdarstellung


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von guenter (Gast)


Angehängte Dateien:

Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht lesenswert
@Uwe

Asche auf mein Haupt :)

von guenter (Gast)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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. (stefanus)


Bewertung
0 lesenswert
nicht 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:

Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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)


Bewertung
0 lesenswert
nicht 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. (stefanus)


Bewertung
0 lesenswert
nicht 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.

: Bearbeitet durch User
von Michael U. (amiga)


Bewertung
0 lesenswert
nicht 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

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.