Tag 15: Ein Webserver

Nachdem in den letzten Tagen vor allem die Blynk-Plattform zentraler Punkt unserer Projekte war, kommt nun ein ganz neues Thema, und zwar der NanoESP als Webserver. Bei dem Versuch des ersten Tages haben Sie bereits einen ersten Eindruck bekommen. In den folgenden Tagen werden Sie sehen, was noch alles möglich ist.

Hinter dem heutigen Türchen befindet sich ein spezielles doppeladriges Kabel, mit dem sich z.B. auch LEDs oder Sensoren außerhalb des Boards einsetzen lassen. Für den heutigen Versuch ist allerdings gar kein Hardwareaufbau nötig. Alles was Sie benötigen ist das Programm und einen Browser.

/*
  TCP-Server example
  Change SSID and PASSWORD.
*/

#include <NanoESP.h>
#include <NanoESP_HTTP.h> //special library for http-connection
#include <SoftwareSerial.h>
#include "Websites.h" //websites in a special file as progmem

#define SSID "YourSSID"
#define PASSWORD "YourPassword"

#define LED_WLAN 13

NanoESP nanoesp = NanoESP();
NanoESP_HTTP http = NanoESP_HTTP(nanoesp); //init http library with an instance of nanoesp

void setup() {
  Serial.begin(19200);
  nanoesp.init();

  //! Only if you want to change the ACCESPOINT configuration
  //nanoesp.configWifi(ACCESSPOINT, "NanoESP", "");
  
  //! Only if you use a new Network
  // nanoesp.configWifi(DUAL, SSID, PASSWORD);
    
  //Dual Mode
  nanoesp.configWifiMode(DUAL);
  //delay(1000);
  
  // Wait till Connected to WiFi
  if (nanoesp.wifiConnected())digitalWrite(LED_WLAN, HIGH); else Serial.println(F("Error WLAN Connect"));

  //Start TCP Server
  if (nanoesp.startTcpServer(80))    Serial.println(F("TCP Server Activ")); else   Serial.println(F("TCP Server Error"));

  //Print IP to Terminal
  Serial.println(nanoesp.getIp());
}

void loop() {
  String method, ressource, parameter;
  int id;

  if (http.recvRequest(id, method, ressource, parameter)) { //Incoming request, parameters by reference

    Serial.println("New Request from id :" + String(id) + ", method: " + method +  ", ressource: " + ressource +  " parameter: " + parameter);

    if (ressource == "/") { //index page
      http.sendFromFlash(id, index, sizeof(index)); //send website from website.h
      nanoesp.closeConnection(id); //close connection so browser knows website transmission is complete
    }
    else if (ressource == "/lib") {
      http.sendFromFlash(id, lib, sizeof(lib)); //send website from website.h
      nanoesp.closeConnection(id); //close connection so browser knows website transmission is complete
    }
    else if (ressource == "/pinout") {
      http.sendFromFlash(id, pinout, sizeof(pinout));  //send website from website.h
      nanoesp.closeConnection(id); //close connection so browser knows website transmission is complete
    }
    else {
      http.sendFromFlash(id, error404, sizeof(error404)); //send website from website.h
      nanoesp.closeConnection(id);//close connection so browser knows website transmission is complete
    }

  }
}

(Die frühere Einbettung über Arduino Create ist nicht mehr verfügbar; der Code stammt aus dem Download aller Programme.)

Laden Sie das Programm herunter und programmieren Sie es auf das Board. Sie wundern sich vielleicht warum Sie heute keine WLAN-Daten eingeben müssen. Der Grund ist, dass das Board, genauer gesagt der WLAN-Chip, Ihre WLAN-Daten des vorherigen Versuchs noch gespeichert hat. Eine neue Funktion der Library wartet nun nach einem Neustart, bis eine Verbindung zum bekannten WLAN aufgebaut wurde. Wenn Sie ein neues WLAN benutzen, müssen Sie die Kommentarzeichen vor der Zeile

nanoesp.configWifi(DUAL, SSID, PASSWORD);

entfernen, damit die neuen Daten eingestellt werden können. Dies gilt auch für alle folgenden Tage. Eine weitere Neuigkeit gibt es heute. Das Board wird nämlich im Dualen Modus verwendet. Das heißt, dass sich das Board sowohl mit Ihrem Heim WLAN Netzwerk verbindet, als auch einen eigenen AccesPoint generiert. Sie können also über zwei Wege auf das Board zugreifen.

Nach dem Upload erscheinen im Seriellen Monitor diesmal auch gleich zwei IPs. Die IP die hinter +CIFST:APIP steht, ist die IP des Boards im AccesPoint WLAN. Die hinter +CIFST:STAIP die, die das Board vom Router zugewiesen bekommen hat. Da Ihr Rechner vermutlich gerade noch mit dem Heimnetzwerk verbunden ist, sollten Sie die zweite IP in Ihren Browser eingeben. Es erscheint eine Hauptseite, von der aus Sie über Links auf anderen Seiten des Boards gelangen, die alle auch im Board gespeichert sind. Im Seriellen Monitor können Sie das Aufrufen einer Seite verfolgen.

Wenn Sie jetzt Ihren PC mit dem NanoESP-eigenen WLAN verbinden, müssen Sie die AccesPoint IP im Browser aufrufen. Die Seiten sind dieselben, mit der Ausnahme, dass man das Bild auf der Pinlayout-Seite nicht laden kann. Das liegt daran, dass der PC über dieses Netzwerk keine Verbindung zum Internet hat, und somit das Bild als externe Ressource nicht geladen werden kann. Der Vorteil an diesem Netzwerkmodus ist aber, dass Sie keinen Router als Zwischenstation benötigen, sondern direkt auf das Board zugreifen. Beide Methoden haben also ihre Vor- und Nachteile.