Du hast nun eine einfache Webseite, auf der du die aktuelle Temperatur siehst und die LED steuern kannst. Allerdings sieht sie sehr nach den Anfängen des World Wide Webs aus. Lass uns also ein paar Minuten Zeit investieren und sie etwas aufmöbeln.
Am Ende dieser Lektion sieht deine Webseite folgendermaßen aus:
Du siehst zwei Karten – eine für die Temperatur und eine für die Steuerung der LED. Statt eines einfachen Links befindet sich auf letzterer ein Button. Beachte bitte, dass sich das Aussehen des Buttons je nach Browser verändern kann.
Das CSS
Bisher haben wir kaum CSS (Cascading Style Sheets) verwendet. Das ändert sich jetzt, aber keine Angst – es hält sich trotzdem im Rahmen. 🙂 Folgende Informationen benötigen wir für die Webseite:
___STEADY_PAYWALL___
<style>
html {
font-family: Helvetica;
}
h1,
p {
text-align: center;
}
a {
color: black;
text-decoration: none;
}
div {
margin: 10px auto 10px auto;
padding: 10px;
height: 80px;
width: 200px;
background-color: aliceblue;
border: 1px solid lightgray;
}
</style>Allerdings ahnst du es vielleicht bereits, diese Informationen zum Styling der Webseite musst du im Sketch etwas anders unterbringen – nämlich so wie du es mit den anderen HTML-Tags auch gemacht hast: Innerhalb der verschiedenen client.println() Funktionen. Achte bitte darauf, folgende Zeilen noch vor dem abschließenden </head> Tag unterzubringen.
client.println("<style>");
client.println("html { font-family: Helvetica;} h1, p {text-align: center;}");
client.println("a { color: black; text-decoration: none;}");
client.println("div { margin: 10px auto 10px auto; padding: 10px; height: 80px; width: 200px; background-color: aliceblue; border: 1px solid lightgray;}");
client.println("</style>");Das HTML
Den Head der Webseite hast du nun um das neue Styling erweitert. Nun kommt der Body dran. Folgendes HTML musst du hier integrieren:
<div>
<p>Raumtemperatur</p>
<p> (temp) </p>
</div>
<div>
<p>LED</p>
<button style="margin-left:50px;"><a href="/led/on">ANSCHALTEN</a>
</button>
<button style="margin-left:45px;"><a href="/led/off">AUSSCHALTEN</a>
</button>
</div>Die Variable temp siehst du im obigen Code fett gedruckt – dort dient sie nur als Erinnerung, dass sie dort hinein muss. In deinem Sketch sieht dieses HTML dann so aus:
client.println("<body><div><p>Raumtemperatur</p>");
client.println("<p>");
client.println(temp);
client.println("°C</p></div>");
client.println("<div><p>LED</p>");
if (ledState == "aus") {
client.println("<button style=\"margin-left:50px;\"><a href=\"/led/on\">ANSCHALTEN</a></button>");
} else {
client.println("<button style=\"margin-left:45px;\"><a href=\"/led/off\">AUSSCHALTEN</a></button>");
}
client.println("</div></body></html>");Wie du siehst, befindet sich hier wieder die If-Abfrage, die je nachdem, ob die LED an oder aus ist, einen anderen Button ausspielt. Das Styling für die Buttons – genauer gesagt ihre Abstände nach links – befinden sich direkt im <button> Tag. Achte in diesem Fall bitte auf die korrekte Maskierung der Anführungsstriche mit dem Backslash \.
Und das war es schon. Lade den Sketch mit dem aktualisierten CSS und HTML auf deinen ESP8266 und schau dir deine neue Webseite gleich einmal an.