HTML Anzeige - Farbe Meldetext ändern

[Egonwalter M. (heiner1234)]

Hallo

Ich möchte bei einer Internetseite Meldungen mit verschiedenen 
Schriftfarben darstellen, z.B die Meldung „kein Fehler“ in grüner 
Schriftfarbe, die Meldung „das ist zu kalt“ in roter Schriftfarbe.

Trotz Recherche im Internet habe ich keine brauchbare Lösung/ Hinweis 
auf eine Lösung gefunden.

Es wäre toll, wenn mir jemand helfen könnte.

Ich habe das Programm angehängt, die anzuzeigenden Meldungen werden in 
der Funktion "String readDSTemperatureERR()" gebildet.

Das Programm stammt von https://RandomNerdTutorials.com; genaue Angabe 
siehe *.ino. Das Programm liest den Temperaturwert mittels DS18B20 ein, 
er wird ausgewertet und mittels WEMOS D1 alle 5 sek an eine 
Internetseite geschickt. Diese zeigt den Temperaturwert in °C und °F an, 
ebenso ob alles ok ist ("kein Fehler") oder ein Fehler ansteht ("das ist 
zu kalt" oder "kann Sensor nicht lesen").

mfg
Egon

[Norbert (der_norbert)]

Egonwalter M. schrieb:
> Trotz Recherche im Internet habe ich keine brauchbare Lösung/ Hinweis
> auf eine Lösung gefunden.

Zu HTML Formatierung?

Ernsthaft?

Ich meine ERNSTHAFT?

[Egonwalter M. (heiner1234)]

Vielen Dank für Deine Hilfe

Hätte ich eine tragbare Lösung gefunden, hätte ich hier nicht 
nachgefragt wissend um die Hilfe, die man hier von manchen (nicht 
allen!) "Experten" erfährt

[Norbert (der_norbert)]

Die Barmer hat eine Webseite, welche erklärt wie man SELBST ATMET.
Es gibt auch eine Webseite, welche erklärt wie man SELBST HTML erzeugt.

Braucht's noch mehr Hinweise?

[Thomas W. (Gast)]

Hast Du denn den Beipackzettel unter 
https://randomnerdtutorials.com/esp8266-ds18b20-temperature-sensor-web-server-with-arduino-ide/ 
gelesen und verstanden? Genau wie Du TEMPERATUREC und TEMPERATUREF 
austauschst, kannst Du  natuerlich die Farben im dem Web-Code 
austauschen.

Oder einen kompletten einfachen Web-Server bauen (gucke mal die 
Beispiele bei der Arduino-IDE an). Ist wirklich sehr einfach.

Und wieder das schoene Zitat 
(Beitrag "Re: Hilfe bei Z80 Opcodes"):

> Und nein, dieses Forum ist zwar hilfreich, aber es ist kein
> Cola-Automat, wo man auf den Knopf drückt und schon kommt der Pappbecher
> mit dem fertigen Drink heraus. Etwas eigene Arbeit (auch
> Einarbeitungsarbeit in den Z80) wäre vonnöten gewesen, schließlich ist
>es DEINE Maschine, die jetzt doof herumsteht und nicht mehr benutzbar
> ist.

[Egonwalter M. (heiner1234)]

@Norbert -Vielen Dank für Deine Hilfe, auch wenn sie mir nicht 
weiterhilft

@Thomas
Vielen Dank für Deine Hilfe - Das habe ich, und wenn Du mein *.ino 
durchgesehen hast, wirst Du feststellen, dass ich das Programm erweitert 
habe um die Fehlermeldung, die ich in verschiedenen Farben anzeigen 
möchte.


mfg
Egon

[Reinhard S. (rezz)]

Egonwalter M. schrieb:
> und wenn Du mein *.ino
> durchgesehen hast, wirst Du feststellen, dass ich das Programm erweitert
> habe um die Fehlermeldung, die ich in verschiedenen Farben anzeigen
> möchte.

Du gibst ja schon HTML aus. Die passsenden Argumente, um das ganze 
farbig zu machen, fehlen dir halt noch.

Kann man aber lernen:
https://wiki.selfhtml.org/wiki/SELFHTML

[Norbert (der_norbert)]

Egonwalter M. schrieb:
> @Norbert -Vielen Dank für Deine Hilfe, auch wenn sie mir nicht
> weiterhilft

Öffne einen Webbrowser:
Tippe ein:

https://duckduckgo.com/?q=selbst+html

Sei darauf vorbereitet erstaunt zu sein!

[Rolf (rolf22)]

Das Programm ist etwas unübersichtlich. Könnte sein, dass es so geht, 
sicher bin ich aber nicht:

Lege die String-Variable color an und weise ihr unmittelbar nach jeder 
Messung "color:green" oder "color:red" zu.

Ersetze
<span id="temperaturec">%TEMPERATUREC%</span>
durch
<span id="temperaturec"; style="%COLOR%";>%TEMPERATUREC%</span>

Dito für Fahrenheit.

[Sherlock 🕵🏽‍♂️ (rubbel-die-katz)]

Norbert schrieb:
> Es gibt auch eine Webseite, welche erklärt wie man SELBST HTML erzeugt.

Bitte nicht mit dem Zaunpfahl winken

[Egonwalter M. (heiner1234)]

@Norbert:
Vielen Dank für den überaus hilfreichen Hinweis mit:
https://duckduckgo.com/?q=selbst+html

Du hast Dich redlich bemüht...
jetzt ist mir auch klar, wie Du auf 1630 Beiträge  in der Zeit vom 
27.02.2023 - 17.11.2024 kommst

@Reinhard S:
Vielen Dank für Deine Hilfe, aber die Seite (u.a.) kenne ich schon.

@Sherlock:
Tut mir leid, damit kann ich wirklich nichts anfangen

Generell an alle Hilfeleistenden:
Werte Kollegen, ich bin durchaus in der Lage, eine Suchmaschine meines 
Vertrauens zu benützen und mit den entsprechenden Suchbegriffen zu 
füttern (wie hätte ich sonst die Seite von randnerdstutorials gefunden).
Hätte ich einen Hinweis auf die Lösung meines Problems gefunden, hätte 
ich dieses Forum NIE um Hilfe gebeten, wohl wissend um die Hilfe, die 
man hier von manchen (nicht allen!) "Experten" erfährt (z.B. Norbert).

Wenn man nichts hilfreiches zur Lösung meines Problems  beitragen kann 
(oder will) - bitte nichts posten - zum Frustloswerden ist das Forum 
nicht gedacht (geht dann lieber in den Wald und schreit da etwas rum)

Ich will mein Problem etwas präzisieren:

Auf einer Internetseite wird in einer Zeile angezeigt:
"Fehlermeldung: kein Fehler" wenn kein Fehler ansteht (wobei 
"Fehlermeldung" statisch ist und schwarz angezeigt wird, der Text "kein 
Fehler" wird von einer Funktion geliefert, die Textfarbe ist GRÜN).

In der gleichen Zeile wird der Text "kein Fehler" ersetzt durch "das ist 
zu kalt" oder "kann Sensor nicht lesen" wenn ein Fehler ansteht (die 
Textfarbe ist derzeit ROT, soll aber GRÜN werden)

Also kurz:
 - keine Fehlermeldung - Textfarbe GRÜN
 - Fehlermeldung - Textfarbe ROT

eine IF Anweisung in HTML geht nicht ...

 mfg
 Egon

[Norbert (der_norbert)]

Egonwalter M. schrieb:
> eine IF Anweisung in HTML geht nicht ...

[Sherlock 🕵🏽‍♂️ (rubbel-die-katz)]

Egonwalter M. schrieb:
>>> Es gibt auch eine Webseite, welche erklärt wie man SELBST HTML erzeugt.
>> Bitte nicht mit dem Zaunpfahl winken
> Tut mir leid, damit kann ich wirklich nichts anfangen

https://wiki.selfhtml.org/

[Egonwalter M. (heiner1234)]

@Norbert

Wenn man nichts hilfreiches zur Lösung meines Problems  beitragen kann
(oder will) - bitte nichts posten - zum Frustloswerden ist das Forum
nicht gedacht (geht dann lieber in den Wald und schreit da etwas rum)

@Sherlock

Lies meinen Post - die Seite kenne ich schon

[Norbert (der_norbert)]

Egonwalter M. schrieb:
> Wenn man nichts hilfreiches zur Lösung meines Problems  beitragen kann

Oh, da irrt er sich gewaltig. Du hast eine Anzahl hilfreicher Hinweise 
bekommen. Vor mir, von anderen.

Wie es scheint hapert's allerdings entweder am Willen oder an der 
Aufnahmefähigkeit, dort ein paar Zeilen deutschsprachige Erklärungen 
zu diesem Thema zu lesen und umzusetzen.

[Sherlock 🕵🏽‍♂️ (rubbel-die-katz)]

Egonwalter M. schrieb:
> eine IF Anweisung in HTML geht nicht ...

Das C++ Programm auf deinem Ardino erzeugt Stückweise ein HTML Dokument, 
welches der Web-Browser anzeigt. Wenn der Web Browser etwas rot färben 
soll, dann muss das in dem generierten HTML Dokument so drin stehen.

Du musst also den C++ Code so ändern, dass das generierte HTML Dokument 
wie gewünscht aussieht. In C++ gibt es IF Anweisungen.

Egonwalter M. schrieb:
> Lies meinen Post - die Seite kenne ich schon

Lernen und verstehen musst du sie selbst. Noch wurde kein Überspielkabel 
für Know-How erfunden. Fnge damit an:

https://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F

[Thomas W. (Gast)]

Der Vorschlag von Rolf22 war doch sehr gut. Es laeuft so oder so darauf 
hinaus, dass Du index_html[] mit String-Funktionen anpasst. Das ist 
Deine Aufgabe.

Du solltest auch gucken und verstehen, was index_html[] macht und 
aufruft. Denn was use.fontawesome.com macht weiss ich nicht und 
vielleicht wird dieser Dienst eingestellt.

[N. M. (mani)]

Ändere deine Funktion readDSTemperatureERR() so ab dass sie einen JSON 
String zurück liefert. In der Art:

{'Error':true, 'MSG':'Das ist zu kalt'}
oder
{'Error':false, 'MSG':'Kein Fehler'}

Zusätzlich änderst du den MIME Type deiner Funktion auf JSON:

server.on("/errormessage", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "application/json", defective.c_str());
  });

Damit hast du in deinem  xhttp.onreadystatechange ein Objekt das sowohl 
den Status (Error/OK) als auch den Fehlertext enthält.
Jetzt musst du nur noch richtig dein innerHTML / class setzen, abhängig 
ob ein Fehler gemeldet wurde oder nicht.

[Lothar M. (Firma: Titel) (lkmiller) (Moderator)]

Egonwalter M. schrieb:
> zum Frustloswerden ist das Forum
> nicht gedacht
Aber auch nicht dafür, dass dir einer die Butter aufs Brot schmiert. Du 
selber solltest schon ein wenig mehr dazu tun als nur "wollen". Warum 
hilft es dir nicht weiter, wenn dir gesagt wird, wo du die HTML 
Kommandos zum Umschalten der Farbe findest?

Egonwalter M. schrieb:
> Trotz Recherche im Internet habe ich keine brauchbare Lösung/ Hinweis
> auf eine Lösung gefunden.
Wonach hast du gesucht?

Egonwalter M. schrieb:
> die Textfarbe ist derzeit ROT, soll aber GRÜN werden
Wie wird die Textfarbe rot? Und was müsste passieren, dass sie grün 
wird? Und wie könnte man das in C++ (aka Arduino) programmieren?

[Egonwalter M. (heiner1234)]

@ Lothar M(Moderator)

Ok, ok, Du hast mich erwischt; ich wollte nicht nur, dass mir "einer die 
Butter aufs Brot schmiert", nein, ich wollte die Lösung:

- komplett
- in kleinen, mundgerecht vorgekauten Happen
- mir keine Gedanken machen

Hat halt leider nicht geklappt ...
Du hast recht - ich habe nach NICHTS gesucht
und programmieren - was ist das??

So, und jetzt im Ernst - soll ich Dir eine link-Liste meiner 
Internetsuche schicken? Und stell Dir vor - natürlich weiß ich, wie ich 
in C mittels einer IF Abfrage feststellen kann, ob die Farbe ROT oder 
GRÜN werden soll (ganz so unbedarft bin ich nun auch wieder nicht, was 
das Programmieren angeht).

Das wars. Kannst den Thread schliessen.

[Benjamin K. (bentschie)]

Hallo,

Du hast in deinem .ino einen großen String:

const char index_html[] PROGMEM = R"rawliteral(

Der beginnt soger mit:
<!DOCTYPE HTML><html>

Genau das ist der HTML Code. Dieser String wird verschickt und dann vom 
Browser gerendert. Dort sind auch alle deine Farben mit drin.

Ich kann nicht wirklich HTML, hatte da vor Jahren mal mit zu tun.
Soweit ich das überblicke wird oben in <HEAD> der Stylesheet definiert
bei dir p3 für rot und p1 für nicht rot.

Du musst dir also weiter p4, p5,... in der gewünschten Formatierung 
erstellen und dann entsprechend diesen HTML String so zusammenbauen das 
je nach "if" der passende HTML String erzeugt wird.

p.s. Nachtrag:
Das ist auch das was Unverständniss erzeugt.
- Du schreibst du kannst halbwegs programieren,
- halbwegs HTML verstehen (siehe Selfhtml)
- hast einen riesigen String, der mit <HTML> anfängt
udn findest das Problem nicht.
Ist der Code von dir, oder woher kopiert, due verstehst ihn nicht und 
suchst die richtige Stelle?
Da hat Rolf22 einen Ansatz dazu geschrieben

[N. M. (mani)]

Benjamin K. schrieb:
> und dann entsprechend diesen HTML String so zusammenbauen das je nach
> "if" der passende HTML String erzeugt wird.

Dir ist schon klar dass er "dynamisch" über /errormessage die Daten 
anfragt?
Ein statisches Patchen in die HTML bringt also eher wenig. Er möchte ja 
nicht alle Sekunde die komplette Seite neu laden.

Deshalb oben die Schritt für Schritt Anleitung was er tun könnte:
Beitrag "Re: HTML Anzeige - Farbe Meldetext ändern"

[Axel R. (axlr)]

Thomas W. schrieb:
> Denn was use.fontawesome.com macht weiss ich nicht und
> vielleicht wird dieser Dienst eingestellt.

Die stellen zB dieses fancy-Thermometer als Grafik zur Verfügung. Kann 
man auch austauschen. Ich hatte einfach den Link
https://use.fontawesome.com/releases/v5.7.2/css/all.css
rauskopiert und in die css-Datei reingeschaut.
Den Arduino source-Block kann man sich auch neu als thm abspeichern und 
doppelt draufklicken. Wird dann im Browser angezeigt. Hierzu braucht man 
keinen Arduino programmieren (können). So, wie der Platzhalter DEFECTIVE 
in rot dargestellt wird, gibt man eben bei "normalen" Temperaturen 
"grün" mit auf den Weg.
Apropos: Ist das mit den Farben "Rot" und "Grün" denn nun schon geklärt?

[Weingut P. (weinbauer)]

Die Suchbegriffe sind:

html inline style font color ;)

https://kinsta.com/blog/html-font-color/

[N. M. (mani)]

Axel R. schrieb:
> Den Arduino source-Block kann man sich auch neu als thm (HTML?) abspeichern

Das macht allgemein Sinn. Dann kann man die Datei auch einfach in das 
Filesystem des ESP einbinden. Ich finde das deutlich einfacher zu 
arbeiten.

Axel R. schrieb:
> und doppelt draufklicken. Wird dann im Browser angezeigt.

Wenn man die HTML Files getrennt hält hat das nämlich noch einen 
weiteren Vorteil: Installiert man z.B. in VS Code das Plugin "Live 
Server" kann man einfach auf die HTML Datei rechtsklicken und es auf dem 
PC in einem Webserver ausführen lassen. Dann legt man noch die Dateien 
errormessage, temperaturec und temperaturef mit dem gewünschten Inhalt 
an und man kann im Browser sogar die Request/Responses debuggen bzw. das 
Verhalten über den Dateiinhalt steuern.

[Egonwalter M. (heiner1234)]

Hallo
@Rolf, @N.M, @Benjamin K.,@Weingut P.

Vielen Dank für Eure Hilfe, die von Weingut P vorgeschlagene Seite 
kannte ich schon - leider wird da nicht beschrieben (oder ich habs nicht 
gesehen) wie man abhängig von einer Variablen (gebildet über eine 
Funktion ausserhalb von index_html()) die Textfarbe ändern kann.

@N.M - ich kann mit Deinem Post leider nichts anfangen, ich kenne mich 
mit JSON / C++ nicht aus.

Ich habe die im angehängten Textfile (Aenderungen.txt) angegebenen 
Änderungen gemacht und es passiert folgendes:

- es wird die Fehlermeldung: "kein Fehler" korrekt in Blau angezeigt 
(Web-Page und serieller Monitor)
- es wird die Fehlermeldung: "das ist zu kalt" falsch in Blau angezeigt 
- sollte ROT in der Web-Page sein; im seriellen Monitor wird aber 
korrekt "color: red" angezeigt.

Ich verstehe nicht, warum die Fehlermeldung "das ist zu kalt" nicht in 
ROT in der Web-Page angezeigt wird (die Farbdarstellung ändert sich 
nicht).

[N. M. (mani)]

Egonwalter M. schrieb:
> Ich habe die im angehängten Textfile

Hänge deinen aktuellen Code vollständig an. Es gibt einfach zu viel 
Spielraum um Dinge falsch zu verstehen.

Egonwalter M. schrieb:
> ich kann mit Deinem Post leider nichts anfangen

Eine Gegenfrage deinerseits kommt aber auch nicht. Also was ist das 
genaue Problem damit?

Egonwalter M. schrieb:
> ich kenne mich mit JSON / C++ nicht aus.

Die Frage ist, willst du es lernen? Oder willst du nur dass deine Seite 
funktioniert?

In meinem Augen sind ein paar Dinge schlecht wie du sie hier umgesetzt 
hast:
Eigentlich brauchst du nur einen einzigen Requests um alle Daten 
anzurufen. Du hast aber 5 oder so.
Zum einen braucht das Ressourcen (Code,Laufzeit,...) und zum anderen 
entstehen so auch inkonsistenze Stände (Temperaturen passen nicht 
zusammen, Fehler wird angezeigt Farbe stimmt aber nicht,...) weil die 
Requests nacheinander abgearbeitet werden.
Außerdem ist es unübersichtlich.

Dein eigentlicher Problem ist vermutlich das du beim ersten Abruf deiner 
HTML Seite die Farbe in das HTML patchst (%FARBE%) aber sobald es danach 
zyklisch anrufen wird du die Antwort einfach in innerHTML schreibst.

[Carsten P. (r2pi)]

Egonwalter M. schrieb:
> Trotz Recherche im Internet habe ich keine brauchbare Lösung/ Hinweis
> auf eine Lösung gefunden.
Das glaube ich dir nicht.

> Es wäre toll, wenn mir jemand helfen könnte.
Sag doch mal den URI an mit deiner Seite, dann können wir mal rein 
schauen. Alles andere ist Stochern im Nebel, und dafür, dass ich dabei 
denken muss, nehme ich Geld.

[Egonwalter M. (heiner1234)]

Hallo N.M

Vielen Dank für Deine Hilfe

> Hänge deinen aktuellen Code vollständig an. Es gibt einfach zu viel
> Spielraum um Dinge falsch zu verstehen.

- habe ich gemacht

> Egonwalter M. schrieb:
>> ich kenne mich mit JSON / C++ nicht aus.
>
> Die Frage ist, willst du es lernen? Oder willst du nur dass deine Seite
> funktioniert?

- ja, möchte ich, kenne mich aber nur mit C aus (Programmieren von 
ATMegas und Peripherie)

> In meinem Augen sind ein paar Dinge schlecht wie du sie hier umgesetzt
> hast:
> Eigentlich brauchst du nur einen einzigen Requests um alle Daten
> anzurufen. Du hast aber 5 oder so.

- Du hast bestimmt recht, aber mit meinem derzeitigen Wissenstand kann 
ich das von Dir vorgeschlagene nicht umsetzen.
Mir ist nicht klar, warum die Farbänderung nicht klappt - bei der 
Temperaturanzeige fkt sie und die Programmierung ist bei beiden gleich 
im inner_html() und beim setup()...

mfg
Egon

[Egonwalter M. (heiner1234)]

Carsten P. schrieb:
> Egonwalter M. schrieb:
>> Trotz Recherche im Internet habe ich keine brauchbare Lösung/ Hinweis
>> auf eine Lösung gefunden.
> Das glaube ich dir nicht.

>> Es wäre toll, wenn mir jemand helfen könnte.
> Sag doch mal den URI an mit deiner Seite, dann können wir mal rein
> schauen. Alles andere ist Stochern im Nebel, und dafür, dass ich dabei
> denken muss, nehme ich Geld.

ZU Deinem Beitrag
 - ausgekotzt?
 - fühlst Du Dich nun besser?

> Sag doch mal den URI an mit deiner Seite
?????

[Raphael D. (crazy)]

Hey,

ohne dass ich mir jetzt den Code genauer angesehen habe - in die xhttp 
request müsste ich mich auch erst mal reinlesen, aber...

mal ein paar konkrete Hinweise von mir:

- Zeile 193 ist falsch. Das "_" ist zuviel. (Damit läuft Zeile 223 mit 
Sicherheit ins Leere...) und das Semikolon gehört vor das "

- außerdem "errormessage" und "errormessage_col" sind zwei 
unterschiedliche Elemente, die nichts miteinander zu tun haben: die 
farbe bei _col zu setzen wird niemals die eigentliche errormessage 
erreichen.

- Das <p1><p3> Konstrukt ist eher ungewöhnlich. Das kann man schon 
machen, hat aber nix mit Html zu tun und macht auch keinen Sinn.

- innerHtml beschreibt den Text eines Html-Elementes,
also: <span>innerHTML</span>, damit lässt sich keine Farbe definieren.
Das sollte eher über sowas wie "object.style.color = '#FF0000';" gehen.

Grundsätzlich gibt da z.b. die Entwicklerkonsole (F12) von Edge (ja ich 
bin Edge User - gibts in FF/Chrome bestimmt auch) ganz gute Hinweise, 
was mit dem Code nicht stimmen könnte...

Dann meine bescheidene Meinung zum Thema insgesamt:
1) ich würde Formatierungen von Fehlern immer über Klassen machen:
also sowas wie .fehler {} im css style sheet definieren und dann im html 
object mit class="fehler" definieren (oder über javascript ändern). 
Dann hat man die Option nicht nur Farben zu ändern, sondern gleichzeitig 
auch z.b. fett drucken oder ähnliches.
2) als einfachere Variante könnte man auch einfach zwei html Blöcke 
definieren:
<span id="fehler" style="color:red;"></span>
<span id="keinfehler" style="color:blue"></span>
und dann einfach den richtigen Block mit innerHTML "beschreiben" (und 
natürlich jeweils den anderen leeren...)
3) Das nachladen von Inhalten ist zwar sehr schick... aber wenn die 
Seite nur genau das ist was dargestellt wird, würde ich mir ja den 
ganzen Aufwand (und Fehlerquellen) sparen, eine statische html Seite mit 
Platzhaltern im ESP ablegen (geht natürlich auch über eine variable, 
bläht aber den imho den Quellcode und Platzbedarf für das Programm 
unnötig auf) und über einen refresh alle paar Sekunden neu laden und mit 
den richtigen Meldungen, werten und Farben befüllen.

Puh ist das jetzt viel Text geworden...

Auf jeden Fall viel Erfolg und nicht unterkriegen lassen!!

Grüße Raphael

[Sherlock 🕵🏽‍♂️ (rubbel-die-katz)]

Raphael D. schrieb:
> statische html Seite mit Platzhaltern im ESP ablegen

Wie viel Stack hat der konkrete ESP32 eigentlich?

Ich frage, weil sich diese allgemein übliche Vorgehensweise beim ESP8266 
als schwierig entpuppt hatte. Da musste ich das HTML Dokument in viele 
kleine Häppchen aufteilen. Ist machbar, aber halt viel aufwändiger als 
eine simple search/replace Operation vor der Ausgabe.

[Rolf (rolf22)]

Egonwalter M. schrieb:
> Mir ist nicht klar, warum die Farbänderung nicht klappt - bei der
> Temperaturanzeige fkt sie und die Programmierung ist bei beiden gleich
> im inner_html() und beim setup()...

Gleich != gleich.

Denk mal ganz pragmatisch. Ohne genau zu wissen, wie das Programm 
funktioniert, findet man eine Zeile in deinem HTML-Code, in der 
aktuelle, also wechselnden Temperaturwert als String eingetragen wird 
(%TEMPERATUREC%). Wenn du GENAU DORT zusätzlich die Farbe einträgst, 
wird sie vermutlich auch wie gewünscht angezeigt werden. Das hatte ich 
dir vorgeschlagen.

[Egonwalter M. (heiner1234)]

Hallo Raphael D.

Vielen Dank für Deine Hilfe (und Deinen vorletzten Satz)!


Raphael D. schrieb:
> Hey,
>

> mal ein paar konkrete Hinweise von mir:
>
> - Zeile 193 ist falsch. Das "_" ist zuviel. (Damit läuft Zeile 223 mit
> Sicherheit ins Leere...) und das Semikolon gehört vor das "
>
Ich kann bei Zeile 193 keinen Fehler erkennen, das "-" ist doch nötig ( 
=> <span_id="errormessage_col" style="%FARBE%";></span>), auch weiß ich 
nicht, warum hier das ";" falsch gesetzt sein soll; und warum sollte 
Zeile 223 ins Leere laufen?

Deine Tipps ( 1 - 3) sind bestimmt sehr gut,wenn man sich mit C++, JSON, 
html usw auskennt;damit kann man das Programm bestimmt viel einfacher 
und effizienter machen - nur kann ich (derzeit) weder C++ noch JSON, 
Java oder html - habe also von Klassen, object, style sheet etc keine 
Ahnung.

Ich bin zu diesem Projekt gekommen, weil ich letztes Jahr im Oktober 
eine neue Heizung in mein Haus einbauen musste mit 
Aussentemperaturregelung (die dümmste Art der Regelung, hatte zuerst 
eine verlässliche Innenraumtemperaturregelung) und ich deshalb eine 
Möglichkeit benötigte, die Raumtemperatur per Internet abzufragen, wenn 
ich im Winter im Ausland bin (um gegebenenfalls die Raumtemperatur per 
App zu erhöhen).

Ich hatte damals im Internet diese Lösung gefunden und ohne Anpassungen 
übernommen (ich war damit zufrieden, funktioniert ja), aber jetzt wollte 
ich das Programm erweitern mit Fehlermeldungen etc - und auch verstehen, 
was das Programm macht (=> bin somit "gezwungen" mit C++, JSON etc zu 
beschäftigen)

Grüße Egon

[Sherlock 🕵🏽‍♂️ (rubbel-die-katz)]

Egon, du musst dich nicht dafür entschuldigen, von den nötigen 
Fachthemen keine Ahnung zu haben. Aber du solltest wohl besser die 
Finger davon lassen, solange das so ist.

Aus dem selben Grund verändere ich auch nicht mein Motorrad. Manchmal 
muss man halt einen Fachmann bezahlen - oder es unverändert lassen.

[Egonwalter M. (heiner1234)]

Sherlock 🕵🏽‍♂️ schrieb:
> Egon, du musst dich nicht dafür entschuldigen, von den nötigen
> Fachthemen keine Ahnung zu haben. Aber du solltest wohl besser die
> Finger davon lassen, solange das so ist.
>
> Aus dem selben Grund verändere ich auch nicht mein Motorrad. Manchmal
> muss man halt einen Fachmann bezahlen - oder es unverändert lassen.

Das ist mit Abstand der d*** Post den ich je gelesen habe, denn der 
impliziert, sich nicht mit einem Problem zu beschäftigen, wenn man keine 
Ahnung hat - ist es nicht so, dass erst durch die Beschäftigung mit 
einem Problem ein Erkenntnisgewinn erfolgt?

Und der Vergleich mit Deinem Motorrad - oh Mann!!!

Aber Du hast ja schon sehr häufig solche Kommentare von Dir gegeben

scnr

Dennoch Danke für Deine Hilfe

Egon

[Egonwalter M. (heiner1234)]

Hallo Rolf

Vielen Dank für Deine Hilfe

Rolf schrieb:
> Egonwalter M. schrieb:
>> Mir ist nicht klar, warum die Farbänderung nicht klappt - bei der
>> Temperaturanzeige fkt sie und die Programmierung ist bei beiden gleich
>> im inner_html() und beim setup()...
>
> Gleich != gleich.
>
> Denk mal ganz pragmatisch. Ohne genau zu wissen, wie das Programm
> funktioniert, findet man eine Zeile in deinem HTML-Code, in der
> aktuelle, also wechselnden Temperaturwert als String eingetragen wird
> (%TEMPERATUREC%). Wenn du GENAU DORT zusätzlich die Farbe einträgst,
> wird sie vermutlich auch wie gewünscht angezeigt werden. Das hatte ich
> dir vorgeschlagen.

Genau das hatte ich gemacht, aber es fkte dennoch nicht; außerdem wollte 
ich nicht den Farbumschlag bei der Temperaturanzeige, sondern beim 
Meldetext.

Wie auch immer - der Farbumschlag des Meldetextes erfolgt nun, wenn ein 
Fehler aufgetreten ist und ich die Seite neu aufrufe.

Egon

[Rahul D. (rahul)]

Egonwalter M. schrieb:
> <span_id="

<span ist ein HTML-Tag (wie alle Wörter nach einem Anfangstag "<" oder 
Ende-Tag "</"
"id" ist eine optionale Eigenschaft ("Propertys"), die man bei Bedarf 
verwenden und setzen kann. Die kann man dann in JavaScript oder PHP 
auswerten.
In JavaScript (auch bekannt als "JS"), gibt es die Funktion 
getElementById(), mit deren Hilfe man auf das gewünschte Element 
zugreifen kann (sinvollerweise wird die id nur ein Mal im HTML-Code 
verwendet).

Egonwalter M. schrieb:
> eine IF Anweisung in HTML geht nicht ...

Nee, das ist auch gar nicht möglich, da es sich bei HTML nicht um eine 
Programmiersprache (mit Variablen, Abfragen und Schleife) handelt, 
sondern eine Beschreibungssprache zur Gestaltung von Webseiten.

Man löst dadurch das Design der Webseite von dem Code, mit dem sie 
dynamische beschickt wird (niemand - außer Sascha uns Malte - schreibt 
für jede Variable eine eigene Webseite).

Deine Website fragt per JavaScript per "XMLHttpRequest();"  die 
Temperatur ab - wahlweise wohl in Celsius oder Fahrenheit - oder die 
Fehlermedung.

[Raphael D. (crazy)]

Egonwalter M. schrieb:

> Ich kann bei Zeile 193 keinen Fehler erkennen, das "-" ist doch nötig (
> => <span_id="errormessage_col" style="%FARBE%";></span>), auch weiß ich
> nicht, warum hier das ";" falsch gesetzt sein soll; und warum sollte
> Zeile 223 ins Leere laufen?

also ein html Block besteht aus einem Anfang <> und einem Ende </>:
also <span></span> die MÜSSEN immer zusammenpassen (außer bei Tags die 
kein Ende haben wie zb <br> da schreibt man aber gerne auch <br/>)

In deiner Zeile hast Du einen Tag mit <span_id> eröffnet und mit </span> 
geschlossen. Dann kann ein Tag Eigenschaften haben. zB id, name color, 
style, class etc. kommt auf den Tag an. Wenn die einen Wert brauchen 
kommt der mit = und " oder ' dahin. Mehr gehört in einen Tag nicht rein.

Das ; gehört zu dem css stylesheet, bei dem (wie in einigen 
Programmiersprachen üblich) die Zeilen mit einem ; abgeschlossen werden.
also wäre eine korrekte style eigenschaft zB:

style="color: red;"

(format "eigenschaft: wert;" wobei das ; hier auch entfallen könnte)
Je nachdem wie %FARBE% beschrieben wird muss also das ; innerhalb der "" 
sein.

Also so:

<span id="errormessage_col" style="%FARBE%;"></span>

mit ins "Leere laufen" meinte ich, dass durch das span_id der Tag keine 
id bekommt weil ja id nicht als eigenschaft sondern als Teil von span_id 
als Tagname verwendet würde.

Dementsprechend kann Zeile 223 auch keine Element des angegebenen Namen 
finden...

> Deine Tipps ( 1 - 3) sind bestimmt sehr gut,wenn man sich mit C++, JSON,
> html usw auskennt;damit kann man das Programm bestimmt viel einfacher
> und effizienter machen - nur kann ich (derzeit) weder C++ noch JSON,
> Java oder html - habe also von Klassen, object, style sheet etc keine
> Ahnung.

... wird ganz ohne leider nicht funktionieren, aber so sehr schwierig 
ist das nicht. Aber ich weiß, dass das sehr ermüdend sein kann, wenns 
beim 128sten Versuch immer noch nicht geht... Zum Thema Html erwähne ich 
jetzt aber einfach nochmal selfhtml.org ;)

> Ich bin zu diesem Projekt gekommen, weil ich letztes Jahr im Oktober
> eine neue Heizung in mein Haus einbauen musste mit
> Aussentemperaturregelung (die dümmste Art der Regelung, hatte zuerst
> eine verlässliche Innenraumtemperaturregelung) und ich deshalb eine
> Möglichkeit benötigte, die Raumtemperatur per Internet abzufragen, wenn
> ich im Winter im Ausland bin (um gegebenenfalls die Raumtemperatur per
> App zu erhöhen).

Klingt irgendwie unpraktisch - ich verwende selber eine Raspimatic, kann 
ich sehr empfehlen. Aber ganz ehrlich ein Frostschutz oder sowas MUSS 
doch automatisch gehen...

Ansonsten habe ich ein Temperaturüberwachungssystem auf Basis von 
mehreren ESP32, welches Temperaturkurven speichert und bei überschreiten 
gewisser Grenzen Warnungen per Email verschickt. Dafür arbeite ich mit 
c++, html, python, php und einer MySql Datenbank für die Daten. ;) 
(Vielleicht ist das auch etwas übertrieben, aber ich hab da meinen Spaß 
dran...)

Viele Grüße
Raphael

[Frank M. (ukw) (Moderator)]

Gehen wir das Ganze doch mal systematisch an. Im HTML-String, der 
ausgegeben wird, findet sich folgende Passage:

<span id="temperaturec">%TEMPERATUREC%</span>

Es gibt hier also eine Zelle mit einem Platzhalter %TEMPERATURE%. Diese 
Zelle hat eine ID, nämlich "temperaturec". Wenn man nun weitersucht im 
Source nach "temperaturec", findet man das:

document.getElementById("temperaturec").innerHTML = this.responseText;

Das ist JavaScript. Diese Zeile findet sich in einer JS-Funktion namens 
setInterval(), welche als Parameter die Zeit in Millisekunden hat, wie 
oft der Browser diese JS-Funktion aufrufen soll. Der Parameter lautet 
5000. Also wird die Funktion innerhalb setInterval() alle 5 Sekunden 
aufgerufen.

Was macht die Funktion? Sie ruft auf dem Host die URL "/temperaturec" 
auf. Der vom Host (Arduino) zurückgemeldete Wert wird dann per 
Javascript-Zeile

document.getElementById("temperaturec").innerHTML = this.responseText;

in das span-Element eingefügt und damit der Platzhalter "%TEMPERATUREC%" 
ersetzt.

Du hast nun zwei Möglichkeiten: Entweder gibt Dein Arduino-Code, bei 
Reaktion auf die URL "/temperaturec" die Farbe mit aus, indem Du vor dem 
numerischen Wert zum Beispiel die Zeichenkette

<font color='blue'>

einfügst und dahinter die Zeichenkette

</font>

anfügst, oder Du erledigst das im Javascript-code, was ich selbst 
eleganter finde.
Ersetze daher die Zeile

document.getElementById("temperaturec").innerHTML = this.responseText;

durch folgendes:

var temp = parseFloat(this.responseText);
var obj = document.getElementById("temperaturec");
obj.innerHTML = this.responseText;
if (temp <= 5.0)
{
  obj.style.color = "blue";
}
else
{
  obj.style.color = "red";
}

Temperaturen unterhalb 5° werden nun in blau ausgegeben, alle anderen in 
rot. Das kannst Du beliebig weiter ausbauen. Ob Du jetzt aus dem obigen 
Code schlau werden willst und was lernen möchtest, bleibt dir 
überlassen. Der obige Code ist ungetestet. Das musst Du machen. Ich 
werde ihn auch nicht weiter erklären.

Immer daran denken:

Gib einem Mann einen Fisch und du ernährst ihn für einen Tag. Lehre 
einen Mann zu fischen und du ernährst ihn für sein Leben.
(Konfuzius)

Ich habe Dir nur einen Fisch gegeben. Aber Du wolltest es so.

[J. S. (jojos)]

Egonwalter M. schrieb:

> siehe *.ino. Das Programm liest den Temperaturwert mittels DS18B20 ein,
> er wird ausgewertet und mittels WEMOS D1 alle 5 sek an eine
> Internetseite geschickt.

Nein, so ist das nicht, das sollte man für das Verständnis korrekt 
beschreiben:

Der Client (Browser) bekommt auf Anfrage html geliefert. In diesem html 
ist Code der vom Browser ausgeführt wird. Der Server kann nichts 
zyklisch an den Client schicken, der Client muss hier aktiv Daten 
anfragen. Das passiert zyklisch in dem Code in setIntervall() wie schon 
beschrieben wurde. Da werden dann nur einzelne Daten angefragt und das 
geladene html modifiziert.
Diese Anfragen kann man auch in den Browser eingeben als 
http//:ip/temperatureC bzw. Die url die in den server.on() registriert 
wurden.
Wenn das die gewünschten Daten anzeigt kann man den html Code prüfen. 
Dazu sollte man die simplen Übungen aus selfhtml oder w3school 
durchspielen.
Das Server / Client PingPong am besten zum Verdeutlichen auf ein Blatt 
Papier aufmalen.

[Sherlock 🕵🏽‍♂️ (rubbel-die-katz)]

>> Egon, du musst dich nicht dafür entschuldigen, von den nötigen
>> Fachthemen keine Ahnung zu haben. Aber du solltest wohl besser die
>> Finger davon lassen, solange das so ist.

Egonwalter M. schrieb:
> Das ist mit Abstand der d*** Post den ich je gelesen habe

Ich will dich nicht davon abhalten, etwas neues zu lernen. Nur hast du 
dir hier zu viel gleichzeitig vorgenommen. Ich glaube nicht, dass ein 
normaler Mensch dazu fähig ist, all das in wenigen Tagen gleichzeitig zu 
lernen:

- HTML
- CSS
- Javascript
- HTTP Protokoll
- XmlHttpRequest (AJAX)
- JSON
- C++
- Arduino
- ESPAsyncWebServer

Du merkst doch selbst, dass du die Antworten hier nur zum Bruchteil 
verstehst und dass du die Vorschläge nicht in den bestehenden Code 
einarbeiten kannst. Kein Wunder, denn du hast hier zu viele Baustellen 
gleichzeitig offen.

Selbst wenn du bei ein paar Themen sagst "kenne ich doch!": Solange mehr 
als zwei Themen Unbekannt sind, ist das meiner Meinung nach zu viel.

> du solltest wohl besser die Finger davon lassen, solange das so ist.

Will sagen: Mache etwas anderes, was Spaß macht und klappt. Befasse dich 
nacheinander einzeln mit den notwendigen Themen. Irgendwann bist du so 
weit, dass du das Puzzle zusammenfügen kannst.

[J. S. (jojos)]

Die RandomNerds Seite ist sehr gut, da ist nicht nur der Code zum 
kopieren sondern es ist jede Zeile erklärt. Man muss sich nur die Zeit 
nehmen das auch zu lesen und versuchen zu verstehen.

[Egonwalter M. (heiner1234)]

Hallo Frank M

Vielen Dank für Deine Hilfe, speziell Deine Erklärungen und Dein Code 
haben mir sehr weitergeholfen und letztlich zur Lösung meines Problems 
beigetragen - mein Problem mit der farblichen Änderung der Meldetexte 
ist gelöst, das fkt nun.

Frank M. schrieb:
> Gehen wir das Ganze doch mal systematisch an. Im HTML-String, der
> ...
> Immer daran denken:
>
> Gib einem Mann einen Fisch und du ernährst ihn für einen Tag. Lehre
> einen Mann zu fischen und du ernährst ihn für sein Leben.
> (Konfuzius)
>
> Ich habe Dir nur einen Fisch gegeben. Aber Du wolltest es so.

Deine letzten Bemerkungen - schade, die fand ich unpassend; ich 
benötigte Unterstützung - und die habe ich dankenswerter Weise von Dir 
und anderen wie
Rolf (rolf22), Rahul D(rahul), Raphael D(crazy), J.S (jojos), N.M (mani) 
erhalten.
Dafür nochmals vielen Dank.

Auf schulmeisterliche  unpassende Belehrungen  Bemerkungen wie "Ich 
habe Dir nur einen Fisch gegeben. Aber Du wolltest es so." oder die  von 
Sherlock(rubbel-die-katz) oder Norbert(der-norbert) kann ich gerne 
verzichten, da sie zur Problemlösung nichts Brauchbares beitragen.

Nichts für ungut

mfg Egon

[Egonwalter M. (heiner1234)]

HalloJ. S.

J. S. schrieb:
> Die RandomNerds Seite ist sehr gut, da ist nicht nur der Code zum
> kopieren sondern es ist jede Zeile erklärt. Man muss sich nur die Zeit
> nehmen das auch zu lesen und versuchen zu verstehen.

Stimmt, aber diese Seite hat mir nicht bei der Lösung meines Problems 
geholfen

Naja, nun fkt es ja.

mfg Egon

[Egonwalter M. (heiner1234)]

Hallo J. S

Vielen Dank für Deine Hilfe

J. S. schrieb:
> Egonwalter M. schrieb:
>
>> siehe *.ino. Das Programm liest den Temperaturwert mittels DS18B20 ein,
>> er wird ausgewertet und mittels WEMOS D1 alle 5 sek an eine
>> Internetseite geschickt.
>
> Nein, so ist das nicht, das sollte man für das Verständnis korrekt
> beschreiben:
>

Das hat mir geholfen, das Ganze etwas besser zu verstehen

mfg Egon

[Heinz R. (heijz)]

ich hatte vor langer Zeit ein ähnliches Problem - wollte je nach Zustand 
einen Text blau statisch oder rot blinkend anzeigen

Ich kann auch nicht wirklich programmieren

Meine Lösung:  ich zeige immer beide Texte an der gleichen Position an- 
der Textinhalt ist jeweils eine Variable

Je nach Zustand ist immer eine der beiden Variablen leer

[Norbert (der_norbert)]

Egonwalter M. schrieb:
> kann ich gerne
> verzichten, da sie zur Problemlösung nichts Brauchbares beitragen.

Nun gräme dich nicht all zu sehr.

Schließlich hast du ein paar Leute gefunden, welche die ganze Arbeit für 
dich erledigt haben. Da musstest du nicht extra etwas Neues lernen. Das 
ist doch bestimmt auch ein schönes Gefühl.

[Frank M. (ukw) (Moderator)]

Noch eine letzte Bemerkung. innerHTML ist die schlechteste aller 
Möglichkeiten, eine simple Zahl in die Ausgabe einzubetten. Der Browser 
wird nämlich den Text komplett neu rendern - in Erwartung, dass 
HTML-Code einzufügen ist, was die Ausgabe komplett ändern könnte. 
Ergebnis: Die Ausgabe einer neuen Zahl könnte etwas flackern.

Besser wäre es, innerHTML durch innerText zu ersetzen. Dann weiß der 
Browser, dass es sich um schnöden Text handelt und kann das optimieren. 
Ergebnis: Der Flicker-Effekt ist dann weg.

[Egonwalter M. (heiner1234)]

Hallo Frank.

Vielen Dank für Deine Hilfe

Frank M. schrieb:
> Noch eine letzte Bemerkung. innerHTML ist die schlechteste aller
> Möglichkeiten, eine simple Zahl in die Ausgabe einzubetten. Der Browser

das werde ich machen.

mfg Egon

[Egonwalter M. (heiner1234)]

Hallo Sherlock


Sherlock 🕵🏽‍♂️ schrieb:
>>> Egon, du musst dich nicht dafür entschuldigen, von den nötigen
>>> Fachthemen keine Ahnung zu haben. Aber du solltest wohl besser die
>>> Finger davon lassen, solange das so ist.
>
> Egonwalter M. schrieb:
>> Das ist mit Abstand der d*** Post den ich je gelesen habe
>
> Ich will dich nicht davon abhalten, etwas neues zu lernen. Nur hast du
> dir hier zu viel gleichzeitig vorgenommen. Ich glaube nicht, dass ein
> normaler Mensch dazu fähig ist, all das in wenigen Tagen gleichzeitig zu
> lernen:

Bei Deinem Post musste ich unwillkürlich an Reinhard Mey und sein Lied 
"Annabelle, ach Annabelle" denken (hatte ich schon fast vergessen), 
speziell die ersten Strophen; und dafür möchte ich Dir danken - ein 
Grinsen konnte ich mir nicht verkneifen bei dem Vergleich.

NB - Du bist nicht zufällig der (ehemalige) Stefan F??

mfg Egon

[Egonwalter M. (heiner1234)]

Hallo

Mein primäres Problem (Darstellung von Meldetexten in unterschiedliche 
Farben) ist gelöst und daher möchte ich  mich nochmals bei Allen 
(wirklich Allen!!) bedanken, die auf meinen Thread reagiert haben.

- Dank an all jene, die mir lösungsorientierte Tipps, Hinweise etc 
gegeben haben (das waren viele!), auch wenn ich diese nicht sofort 
verstanden habe und entsprechend umsetzen konnte.
- Dank an all jene, die mir meine "Unzulänglichkeiten"  aufgezeigt haben 
und die mich mit ihren Stänkereien und Pöbeleien zum Lachen gebracht 
haben (z.B Sherlock, von Norbert(der_norbert))

Stänkereien und Pöbeleien gehören in diesem Forum wohl dazu - nicht 
ernst nehmen und darüber lachen - wir wissen ja "Lachen ist die beste 
Medizin"

Nichts für Ungut

mfg Egon