Hallo Leute,
ich bin noch ziemlicher Anfänger in Sachen Arduino, habe aber schon ein paar kleine Projekte umgesetzt.
Aktuell habe ich ein Problem bei dem ich einfach nicht mehr weiter komme, auch wenn es vielleicht nur eine Kleinigkeit ist.
Ich habe mir den Code von dieser Website angepasst um eine Temperaturüberwachung für meine Garage zu haben.
Alles funktioniert tadellos wie es soll, ich bekomme es aber einfach nicht hin,
die Temperaturen untereinander anzeigen zu lassen.
Ich habe bereits vieles probiert mit /p, < br > usw..... alles ohne Erfolg.
Was mache ich falsch?
Außerdem wird die Grafik am Ende mit in das letzte Anzeigefeld integriert,
sollte das nicht separat ohne Hintergrund angezeigt werden nach schließen der Klasse? ("/feld")
Vielen Dank vorab für Eure Unterstützung.
// ----- CSS-Code für das Design der Buttons ---
if (digitalRead(schloss) == HIGH) // Schloss verriegelt ist (HIGH-Pegel)
{
client.println("<style>html { background-color: #58FA58; font-family: Helevetia; display: inline-block; margin: 0px auto; text-align: center;}"); // Hintergrund grün
}
else
{
client.println("<style>html { background-color: #FA5858; font-family: Helevetia; display: inline-block; margin: 0px auto; text-align: center;}"); // Hintergrund rot
}
client.println(".button { background-color: #00FF00; border: none; color: white;border-radius: 50px; padding: 12px 20px;");
client.println("text-decoration: none; font-size: 20px; margin: 2px; cursor: pointer;}");
client.println(".feld { background-color: #00FF00; border: none; color: blue;border-radius: 50px; padding: 12px 20px;");
client.println("text-decoration: none; font-size: 20px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #FF0000;}</style></head>");
// ----- Website - Überschrift -------------
client.println("<body><h1><U>ESP8266 Garagenthermometer</U></h1>");
client.print(daysOfTheWeek[timeClient.getDay()]);
client.print(", ");
client.println(timeClient.getFormattedTime());
// ----- Anzeige des Status und des Buttons Nr.1 -----
// client.println("<p><U>Betriebsmodus = " + steuerModus + "</U></p>");
// If the output1State is off, it displays the ON button
//if (lichtModus == "AN") {
client.println("<p><a href=\"/1/AN\"><button class=\"button\">Licht an 10 Sekunden</button></a></p>");
//} else {
// client.println("<p><a href=\"/1/MANUELL\"><button class=\"button button2\">MANUELL</button></a></p>");
//}
// ----- Anzeige des Status und des Buttons Nr.2 -----
// client.println("<p><U>Ventilstatus = " + ventilStatus + "</U></p>");
// If the output2State is off, it displays the ON button
if (dauerlicht == 0) {
client.println("<p><a href=\"/2/AN\"><button class=\"button\">Dauerlicht AN</button></a></p>");
} else {
client.println("<p><a href=\"/2/AUS\"><button class=\"button button2\">Dauerlicht AUS</button></a></p>");
}
// ---- Anzeige der Temperatur ------------------------
client.println("<button class=\"feld\">");
client.println("<p><U>Kuehlschrank</U></p>");
client.println(sensors.getTempC(sensorCool));
client.println("*C");
client.println("</feld>");
client.println(""); // sendet einen Zeilenumbruch
client.println("<button class=\"feld\">");
client.println("<p><U>Eisfach</U></p>");
client.println(sensors.getTempC(sensorFrost));
client.println("*C");
client.println("</feld>");
client.println(""); // sendet einen Zeilenumbruch
client.println("<button class=\"feld\">");
client.println("<p><U>Garage</U></p>");
client.println(sensors.getTempC(sensorRoom));
client.println("*C");
client.println("</feld>");
client.println(""); // sendet einen Zeilenumbruch
client.println(""); // sendet einen Zeilenumbruch
client.println("<p><a href=\"/3/Reset\"><img src=\"http://www.meineurl.de/bird.png\" width=100 alt=\"bird\"></a></p>");
client.println("</body></html>");
Danke für die schnelle Reaktion. Das hatte ich bereits mit in meinen Text geschrieben, dass ich das auch schon probiert habe, allerdings wurde dies ausgeblendet und führte hier im Forentext direkt zu einem Zeilenumbruch.
Ich werde den Text nochmal editieren und vielleicht so sichtbar machen.
Ok, wenn Du sowas hast, dann mach vor und nach dem html-Tag ein `
sieht dann so aus:
</BR>
Hier auf der Tastatur ist es NICHT der apostroph wo auch die Raute ist, sondern neben dem ß gibt es die Taste mit ' und ` - letztere mit der Shifttaste zu erreichen und beide Zeichen werden dann mit einem Space darstellbar
Die gelben Linien zeigen die gewünschten Zeilenumbrüche.
Die Grafik soll sich separat ganz unten auf der Seite befinden, ohne die grüne Umrandung.
Den HTML-Code muss ich erstmal bereinigen um den posten zu können,
da sind einfach zu viele Kommentare drin, die ich bisher nicht gelöscht habe.
Um nicht unnötig viel Code zu posten hole ich das noch nach.
Das HTML ist das was der Server zum Browser retour sendet.
Das HTML siehst du im Browser, wenn du z.B. mit der rechten Maustaste du dir den "Seitenquelltext anzeigen" lässt. Möglicherweise ist es in deinem Broswser anders abzufragen, aber das wird schon wo gehen.
Das ist das reine HTML ohne C++ Quelltext und das kannst du hier posten.
Außerdem kannst du mit einem W3C Validator überprüfen ob das generierte HTML valide ist
Damit kannst du alle formalen Fehler beheben - dann bitte auch wieder das aktualisierte HTML hier einstellen.
Ohne HTML können wir hier nur raten. Ich tippe auf einen Zusammenhang mit display: inline-block. Da ich aber nicht gerne rate und unausgesteste "Hinweise" nur zu weiteren Rückfragen führen werden, wäre es gut, wenn du das HTML postest.
Danke für den Hinweis zum Seitenquelltext anzeigen, die Funktion "untersuchen" im Firefox kenne ich schon und nutze diese auch,
mir war nicht bewusst, dass man so auch den reinen Quelltext anzeigen lassen kann.
Ich werde mich mal mit dem w3c- Validator auseinandersetzen.
Hier der angezeigte Quelltext.
Ich hab den Quelltext jetzt mal analysieren lassen, verstehe die Fehlermeldungen aber nur bedingt.
Ich habe jetzt zumindest noch die Sprache in der ersten Zeile festgelegt,
doch wieso zum Beispiel gemeldet wird dass <head> fehlt obwohl es direkt in der zweiten Zeile steht erschließt sich mir nicht.
Außerdem wird erkannt, dass <feld> erneut geöffnet wird obwohl der selbe Typ noch geöffnet ist.
Der Typ ist jedoch mit </feld> geschlossen worden, so sehe ich das jedenfalls.
Beim öffnen und schließen der Typen hab ich auch die Reihenfolge eingehalten, denke ich zumindest.
Ich habe mir html mehr oder weniger komplett allein beigebracht, bin also nicht vom Fach und lerne gern dazu.
du weist dem button die Klasse feld zu. Wie kommst du da drauf, dass du ein tag "feld" schließen müsstest. Die Klasse ist onehin nur im Kontext von button wirksam.
So, nun hab ich den Code mal angepasst, deutlich weniger Fehlermeldungen
und nun genau gar keinen Zeilenumbruch mehr.
Die Anpassung <html lang="de">wird beim kompilieren als fehlerhaft erkannt.
Die </feld>-Einträge habe ich geändert und auch ein Title hinzu gefügt.
Wieso erhalte ich jetzt weiterhin Fehlermeldungen dafür?
Hat leider auch wieder nichts gebracht.....
Es gibt zwar scheinbar einen Zeilenumbruch, aber das nächste Element erscheint trotzdem daneben.
Ich habe mal 2x <br>eingebunden, das mittlere Feld ist etwas größer geworden und auch eine Zeile nach oben gerutscht.
dann schau dir das mal in einem Browser an.
wenn dich die 3 unteren Felder noch stören schau ich noch mal drüber. Aber bau deinen Code mal entsprechend um.
Ich hab den Code nun nochmal an deinen Post #15 angepasst und aus claas auch button gemacht.
Optisch sieht es nun so aus wie in deinem Post.
Nun klappt es also auch mit dem Zeilenumbruch.
Vielen Dank schonmal für die Unterstützung an alle die hier mitwirken.
Es ist einfach schon jahre her, dass ich meine erste Website mit SelfHtml zusammen gebastelt habe.
Ich nehme mir jetzt mal deinen Edit vor und versuche mein Programm entsprechend anzupassen.
Z.B. deine Unterstreichungen: das sind im Web ganz schlechte Hervorhebungsmittel. Das war seit Urzeiten für Links. Du solltest Unterstreichungen echt nur für Links verwenden...
