Zum Hauptinhalt springen

Webserver

Was dieses Beispiel zeigt​

Inkplate wird zu einem kleinen eigenständigen Webserver. Es startet ein eigenes WLAN (einen Access Point) mit dem Namen Inkplate 7SPECTRA und dem Passwort Soldered und zeigt auf dem Bildschirm, wie Sie sich damit verbinden. Verbinden Sie sich mit einem Smartphone oder Computer mit diesem Netzwerk, öffnen Sie die auf dem Bildschirm angezeigte Adresse, geben Sie auf der Webseite im Feld einen Text ein und drücken Sie die Schaltfläche. Der Text erscheint auf dem Bildschirm.

Den Netzwerknamen und das Passwort können Sie ändern, indem Sie die Defines ssid und pass anpassen. Der Sketch hat eine zweite Datei, htmlCode.h, die die Webseite als Textzeichenfolge mit dem Namen s enthält; belassen Sie sie im Sketch-Ordner neben der .ino-Datei.

Dieses Beispiel verwendet außerdem WiFi, WiFiClient und WebServer (arduino-esp32), die nicht Teil der Inkplate-Bibliothek sind und mit dem ESP32-Board-Paket mitgeliefert werden.

Beispielcode​

Select Board
Inkplate7SPECTRA_HTTP_Web_Server.ino
#include "Inkplate.h"   //Include Inkplate library to the sketch
#include "htmlCode.h"   //Include .h file where we stored out html code of our web page
#include <WebServer.h>  //Include ESP32 library for Web server
#include <WiFi.h>       //Include ESP32 WiFi library
#include <WiFiClient.h> //Include ESP32 WiFi library for AP
#include <uri/UriBraces.h>

#define ssid "Inkplate 7SPECTRA"
#define pass "Soldered"

Inkplate inkplate;      // Create an object on Inkplate library and also set library into 1 Bit mode (BW)
WebServer server(80);   // Create Web server on port 80 (HTTP port number)

IPAddress serverIP;
String txt;

void setup()
{
  inkplate.begin();                      // Init Inkplate library (you should call this function ONLY ONCE)
  inkplate.clearDisplay();               // Clear frame buffer of display
  inkplate.display();                    // Put clear image on display
  inkplate.setTextSize(3);               // Scale text to be three times bigger than original
  inkplate.setTextColor(INKPLATE_BLACK); // Set text color to black and background color to white
  inkplate.setTextWrap(true);            // If text does not fit on screen, send it to new line

  WiFi.begin();             // Init. WiFi library
  WiFi.mode(WIFI_AP);       // Set WiFi to Access Point mode
  WiFi.softAP(ssid, pass);  // Set SSID (WiFi name) and password for Access point

  serverIP = WiFi.softAPIP(); // Get the server IP address

  server.on("/", handleRoot); // If you open homepage, go to handle root function
  server.on(UriBraces("/string/{}"),
            handleString); // If you send some text to Inkplate, go to handleString function. Note that {} brackets at
                            // the end of address. That means that web address has some arguments (our text!).
  server.begin();          // Start the web server
  updatePaper();
}

void loop()
{
  server.handleClient(); // You have to constantly read if there is any new client connected to web server
}

void updateHTML()
{ // This function will send response to client and send HTML code of our web page
  server.send(200, "text/html", s);
}

void handleRoot()
{ // This function will send response to client if client open a root (homepage) of our web page
  updateHTML();
}

void handleString()
{ // This function will send response to client, send HTML code of web page, get the text from argument sent in web page
  // address and refresh screen with new text
  txt = server.arg(0);
  updateHTML();
  updatePaper();
}

void updatePaper()
{ // This function updates screen with new data (text)
  inkplate.clearDisplay();    // Clear everything from epaper frame buffer
  inkplate.setCursor(20, 40); // Print out instruction on how to connect to Inkplate WiFi and how to open a web page
  inkplate.print("Connect to ");
  inkplate.print(ssid);
  inkplate.println(" WiFi with pass: ");
  inkplate.setCursor(240, 100);
  inkplate.println(pass);
  inkplate.setCursor(100, 150);
  inkplate.print("Open Your web browser and open");
  inkplate.setCursor(240, 210);
  inkplate.print("http://");
  inkplate.print(serverIP);
  inkplate.println('/');
  inkplate.println();
  inkplate.fillRect(10, 240, 780, 4, BLACK);
  inkplate.println("User text:"); // Print out what user typed in web page
  inkplate.print(txt);
  inkplate.display(); // Send everything to screen (refresh the screen)
}

Verwendete Funktionen​

Inkplate()returns None

Erstellt das Inkplate-Objekt. Inkplate 7SPECTRA hat nur einen einzigen Sechs-Farben-Modus, daher benötigt der Konstruktor kein Modus-Argument (der Kommentar zum 1-Bit-Modus stammt von anderen Inkplate-Modellen).

ReturnsKonstruktor; kein Rückgabewert.

inkplate.begin()returns void

Initialisiert die Bibliothek, die Peripherie und den Bildspeicher. Rufen Sie sie einmal in setup() auf.

ReturnsNichts.

inkplate.clearDisplay()returns void

Füllt den Bildspeicher mit Weiß. Das Panel wird dadurch nicht verändert.

ReturnsNichts.

inkplate.display(bool _leaveOn = 0)returns void

Sendet den gesamten Bildspeicher an das Panel und aktualisiert es.

ReturnsNichts.

inkplate.setTextSize(uint8_t s)returns void

Legt die Textvergrößerung fest, hier 3.

ReturnsNichts.

inkplate.setTextColor(uint16_t c)returns void

Legt die Textfarbe fest, hier INKPLATE_BLACK.

ReturnsNichts.

inkplate.setTextWrap(bool w)returns void

Legt fest, ob Text, der nicht in eine Zeile passt, in der nächsten Zeile fortgesetzt wird. Der Sketch schaltet den Zeilenumbruch ein.

ReturnsNichts.

inkplate.setCursor(int16_t x, int16_t y)returns void

Legt fest, wo der nächste ausgegebene Text beginnt. Der Sketch setzt ihn vor jeder Zeile der Anleitung auf eine feste Position.

ReturnsNichts.

inkplate.print(value)returns size_t

Gibt Text, ein Zeichen oder eine IP-Adresse in den Bildspeicher aus, wie Serial.print().

ReturnsAnzahl der ausgegebenen Bytes.

inkplate.println(value)returns size_t

Wie print(), setzt danach den Cursor in die nächste Zeile. Ohne Argument aufgerufen, wechselt sie nur in die nächste Zeile.

ReturnsAnzahl der ausgegebenen Bytes.

inkplate.fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color)returns void

Zeichnet ein gefülltes Rechteck mit der oberen linken Ecke bei (x, y). Der Sketch zeichnet über dem Benutzertext einen schwarzen Balken mit 780 Pixeln Breite und 4 Pixeln Höhe.

ReturnsNichts.

IPAddress()returns None

ESP32-Board-Paket: der Typ, der eine IP-Adresse enthält. Der Sketch erstellt einen davon als `serverIP` und füllt ihn mit der Adresse des Access Points.

ReturnsKonstruktor; kein Rückgabewert.

WiFi.begin()returns wl_status_t

ESP32-Board-Paket: initialisiert die WLAN-Bibliothek. Ohne Argumente aufgerufen, stellt sie keine Verbindung zu einem Netzwerk her.

ReturnsVerbindungsstatus.

WiFi.mode(wifi_mode_t mode)returns bool

ESP32-Board-Paket: legt den WLAN-Modus fest. Der Sketch verwendet WIFI_AP, den Access-Point-Modus.

Returnstrue, wenn der Modus gesetzt wurde.

WiFi.softAP(ssid, pass)returns bool

ESP32-Board-Paket: startet den Access Point mit dem angegebenen Netzwerknamen und Passwort.

Returnstrue, wenn der Access Point gestartet wurde.

WiFi.softAPIP()returns IPAddress

ESP32-Board-Paket: die IP-Adresse des Access Points. Der Sketch gibt sie auf dem Bildschirm als die im Browser zu öffnende Adresse aus.

ReturnsDie IP-Adresse des Access Points.

WebServer(int port)returns None

ESP32-Board-Paket: das Webserver-Objekt. Der Sketch erstellt es als `server`, das auf Port 80, dem HTTP-Port, lauscht.

ReturnsKonstruktor; kein Rückgabewert.

server.on(uri, handler)returns void

WebServer: legt die Funktion fest, die Anfragen für eine Adresse beantwortet. Der Sketch leitet die Adresse der Startseite an handleRoot() und die Adresse /string/ gefolgt vom eingegebenen Text an handleString().

ReturnsNichts.

UriBraces(const char *uri)returns None

WebServer (uri/UriBraces.h): ein Adressmuster, in dem jedes Paar geschweifter Klammern einem Teil der Adresse entspricht, den der Handler mit server.arg() liest.

ReturnsKonstruktor; kein Rückgabewert.

server.begin()returns void

WebServer: startet den Webserver.

ReturnsNichts.

server.handleClient()returns void

WebServer: bearbeitet eine wartende Client-Anfrage. Der Sketch ruft sie in loop() immer wieder auf.

ReturnsNichts.

server.send(int code, const char *content_type, const String &content)returns void

WebServer: beantwortet die Anfrage. Der Sketch sendet den Status 200, den Typ text/html und den Text der Webseite `s` aus htmlCode.h.

ReturnsNichts.

server.arg(int i)returns String

WebServer: der Wert des Anfragearguments i. Der Sketch liest das Argument 0, den auf der Webseite eingegebenen Text, in txt ein.

ReturnsDer Wert des Arguments.

Was Sie erwarten können​

Beim Start zeigt der Bildschirm Connect to Inkplate 7SPECTRA WiFi with pass: und das Passwort Soldered, dann die Zeile Open Your web browser and open mit der Adresse des Access Points als http:// und der Adresse, danach einen schwarzen Balken und User text: ohne darunterstehenden Text. Nachdem Sie Ihr Smartphone oder Ihren Computer mit dem Netzwerk verbunden und diese Adresse geöffnet haben, zeigt der Browser ein Textfeld mit dem Text Write some text! und eine Schaltfläche Send to display!. Wenn Sie die Schaltfläche drücken, wird der Bildschirm aktualisiert und Ihr Text erscheint unter User text:.

🔗Vollständiges Beispiel öffnen

examples/Inkplate7SPECTRA/Advanced/WEB_WiFi/Inkplate7SPECTRA_HTTP_Web_Server

→