Die LED steuern

Du kannst nun also die aktuelle Raumtemperatur auf der Webseite sehen, die dein Server dir unter seiner IP-Adresse zur Verfügung stellt. Wie wäre es, wenn du von dort aus auch das Licht – also deine LED – ein- und ausschalten könntest? Genau das setzen wir jetzt um.

Zunächst benötigen wir etwas Code für die LED. Zu Beginn des Sketchs legst du den Pin fest, an dem sie angeschlossen ist. Ebenso benötigen wir eine Variable für den Status der LED, also ob sie an oder aus ist:

const int led = 0;
String ledState = "aus";

Im Setup des Sketchs legst du nun noch schnell den pinMode fest und schaltest die LED zu Beginn aus, so wie wie du es oben in der Variablen ledState auch festgehalten hast.

pinMode(led, OUTPUT);
digitalWrite(led, LOW);

___STEADY_PAYWALL___

Die LED steuern

Wie kannst du nun die LED von der Webseite aus an- und ausschalten? Hierfür bringst du dort zunächst einen Link unter, der deinen Befehl weiterleitet. Wenn die LED aus ist (also ledState auf “aus” steht), lautet der Ankertext des Links ANSCHALTEN. Wenn sie an ist entsprechend AUSSCHALTEN.

if (ledState == "aus") {
  client.println("<p align=\"center\"><a href=\"/led/on\">ANSCHALTEN</a></p>");
} else {
  client.println("<p align=\"center\"><a href=\"/led/off\">AUSSCHALTEN</a></p>");
            }

Ein kurzer Exkurs zum HTML: Ein Link wird hier mit dem Tag <a> begonnen und mit </a> wieder geschlossen. Zwischen diesen beiden Tags befindet sich der Ankertext, also das Wort, das du anklicken kannst.

Das Ziel des Links befindet sich im öffnenden Tag <a> hinter href= und wird mit Anführungsstrichen markiert. Im Code oben heißt das Linkziel also entweder “/led/on” oder “/led/off”.

Übrigens, sind dir die umgedrehten Schrägstriche (Backslashes) aufgefallen? Diese benötigst du in deinem Sketch, um die Anführungszeichen zu maskieren. Ansonsten würde z.B. im Befehl client.println() oben zu viele Anführungszeichen stehen, was unweigerlich zu einem Fehler führen würde.

Wenn du die IP-Adresse deines Servers nun aufrufst, sieht du folgende Webseite:

Aber noch einmal zurück zum Linkziel: Wenn du also den Link ANSCHALTEN klickst, wird “/led/on” hinter die IP-Adresse des Servers geschrieben, sodass sie z.B. so lautet:

http://192.168.0.242/led/on

Das können wir uns zunutze machen, wenn dein Server die Anfrage des Clients liest.

Deinen Befehl im Header auslesen

Wie du ja bereits weißt, sendet dein Client eine ganze Reihe Informationen an deinen Server, wenn er eine Anfrage an ihn stellt. Nach deinem Klick auf den Link auch den Befehl /led/on bzw. /led/off.

Um diese Befehle zu empfangen, benötigst du zunächst zu Beginn des Sketchs eine gleichnamige Variable für den Header:

String header;

Wenn eine Anfrage reinkommt, verwendest du ja bereits die Variable c, um zu ermitteln, wann die Anfrage zu Ende ist. Hier integrierst du nun auch deinen String header, den du mit den übertragenen Daten füllst – hier fettgedruckt:

if (client.available()) {
  char c = client.read();
  Serial.write(c);
  header += c;
  if (c == '\n') {

Nun befindet sich im String header (nach deinem Klick auf den Link) entweder der Befehl /led/on oder /led/off.

Um herauszufinden welcher, machst du eine kleine Abfrage:

if (header.indexOf("GET /led/on") >= 0) {
  Serial.println("Die LED ist an");
  ledState = "an";
  digitalWrite(led, HIGH);
} else if (header.indexOf("GET /led/off") >= 0) {
  Serial.println("Die LED ist aus");
  ledState = "aus";
  digitalWrite(led, LOW);
}

Hier benutzt du die Funktion indexOf() – diese prüft, ob sich ein bestimmter String (hier z.B. “GET /led/on”) in einem anderen String befindet. Ist das nicht der Fall, ist ihr Ergebnis -1. Wenn sie ihn jedoch findet, gibt sie seine Position zurück. Diese ist uns eigentlich egal, Hauptsache das Ergebnis ist nicht -1, sondern >= 0. 🙂

Wenn du also die LED mit einem Klick angeschaltet hast, steht im header der String “GET /led/on”. In diesem Fall schaltest du die LED mit digitalWrite() an und setzt die Variable ledState auf “an”.

Das wiederum verändert den Ankertext des Links: Dieser wechselt von ANSCHALTEN auf AUSSCHALTEN. Und damit wirklich klar ist, was Sache ist, schreibt dein Server noch den Status der LED über den Link:

client.println("<p align=\"center\">Die LED ist " + ledState + ".</p>");

Und das war es auch schon. Probiere es gleich mal aus. Kannst du die LED über die Webseite an- und ausschalten?

In der nächsten Lektion hübschen wir die Webseite etwas auf.