Digitaler Flyer auf einem ESP-8266

Mithilfe eines Mikrocontrollers der ein “Captive Portal” erzeugt, also quasi ein digitales Fangnetz, kann man kostengünstig eine Art digitalen Flyer machen. Dazu wird quasi ein WLAN Netz, das aber keinen tatsächlichen Zugang zum Internet hintendran hat, erzeugt. Dann antwortet es auf jede Anfrage in diesem Netzwerk mit dieser Webseite. Normalerweise kennt man Captive Portals von Anmeldeseiten für WLAN-Netzwerke, wie z.B. beim DB Zug Wi-Fi.

Materialien

  • Lolin D1 mini (ESP-8266)
  • USB-A zu Micro-USB-Kabel
  • ESP-8266 WiFi & DNS Server library

Captive Portal auf dem ESP-8266 programmieren

Diese Anleitung basiert auf dem Beispiel Sketch zu einem Captive Portal in der DNSServer Library.

Arduino IDE einrichten

Nachdem herunterladen der Arduino IDE auf der Arduino Webseite, müssen wir noch eine Quelle für die Bibliotheken des ESP-8266 Mikrocontrollers hinzufügen. Dazu gehen wir in die Preferences und fügen

https://arduino.esp8266.com/stable/package_esp8266com_index.json

bei Additional Board Manager URLs ein.

Jetzt gehen wir unter Tools > Board menu > Board Manager und suchen nach esp-8266 und installieren die Plattform.

Nun können wir unseren D1 mini mit dem USB-Kabel anschließen und im Board Manager Lolin D1 mini (clone) als Board auswählen.

Captive Portal Code

Dieser Code ist im Grunde das Captive Portal Beispiel aus der DNSServer Library, man muss nur den Namen, den das Netzwerk haben soll anpassen und natürlich seinen eigenen HTML-Code einfügen:

#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>

const byte DNS_PORT = 53;
IPAddress apIP(172, 217, 28, 1);
DNSServer dnsServer;
ESP8266WebServer webServer(80);

//Das hier ist unsere Webseite
String responseHTML = ""
                      "<!DOCTYPE html><html lang='en'><head>"
                      "<meta name='viewport' content='width=device-width'>"
                      "<title>CaptivePortal</title></head><body>"
                      "<h1>Hello World!</h1><p>This is a captive portal example."
                      " All requests will be redirected here.</p></body></html>";

void setup() {
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, IPAddress(255, 255, 255, 0));
  WiFi.softAP("NAME UNSERES WLAN NETZWERKS");

  // if DNSServer is started with "*" for domain name, it will reply with
  // provided IP to all DNS request
  dnsServer.start(DNS_PORT, "*", apIP);

  // replay to all requests with same HTML
  webServer.onNotFound([]() {
    webServer.send(200, "text/html", responseHTML);
  });
  webServer.begin();
}

void loop() {
  dnsServer.processNextRequest();
  webServer.handleClient();
}

Dann den Sketch abspeichern und auf den D1 mini hochladen. Solange dieser Strom hat, kann man sich nun mit seinem Netzwerk verbinden und sieht die Webseite.