Web server

What this example shows

Inkplate becomes a small standalone web server. It starts its own Wi-Fi network (an access point) named Inkplate 7SPECTRA with the password Soldered, and shows on the screen how to connect to it. Join that network with a phone or computer, open the address shown on the screen, type some text in the box on the web page and press the button. The text appears on the screen.

You can change the network name and password by changing the ssid and pass defines. The sketch has a second file, htmlCode.h, which holds the web page as a text string named s; keep it in the sketch folder next to the .ino file.

This example also uses WiFi, WiFiClient and WebServer (arduino-esp32), which are not part of the Inkplate library and come with the ESP32 board package.

Example code

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)
}

Functions used

Inkplate()returns None

Creates the Inkplate object. Inkplate 7SPECTRA has a single six-color mode, so the constructor takes no mode argument (the comment about 1-bit mode comes from other Inkplates).

ReturnsConstructor; no return value.

inkplate.begin()returns void

Initializes the library, the peripherals and the frame buffer. Call it once in setup().

ReturnsNothing.

inkplate.clearDisplay()returns void

Fills the frame buffer with white. It does not change the panel.

ReturnsNothing.

inkplate.display(bool _leaveOn = 0)returns void

Sends the whole frame buffer to the panel and refreshes it.

ReturnsNothing.

inkplate.setTextSize(uint8_t s)returns void

Sets the text magnification, here 3.

ReturnsNothing.

inkplate.setTextColor(uint16_t c)returns void

Sets the text color, here INKPLATE_BLACK.

ReturnsNothing.

inkplate.setTextWrap(bool w)returns void

Chooses whether text that does not fit on a line continues on the next line. The sketch turns wrapping on.

ReturnsNothing.

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

Sets where the next printed text starts. The sketch moves it to a fixed position before each line of the instructions.

ReturnsNothing.

inkplate.print(value)returns size_t

Prints text, a character or an IP address into the frame buffer, like Serial.print().

ReturnsNumber of bytes printed.

inkplate.println(value)returns size_t

Like print(), then moves the cursor to the next line. Called with no argument, it only moves to the next line.

ReturnsNumber of bytes printed.

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

Draws a filled rectangle with its top-left corner at (x, y). The sketch draws a black bar 780 pixels wide and 4 pixels high above the user text.

ReturnsNothing.

IPAddress()returns None

ESP32 board package: the type that holds an IP address. The sketch creates one as `serverIP` and fills it with the address of the access point.

ReturnsConstructor; no return value.

WiFi.begin()returns wl_status_t

ESP32 board package: initializes the Wi-Fi library. Called with no arguments, it does not connect to a network.

ReturnsConnection status.

WiFi.mode(wifi_mode_t mode)returns bool

ESP32 board package: sets the Wi-Fi mode. The sketch uses WIFI_AP, access point mode.

Returnstrue if the mode was set.

WiFi.softAP(ssid, pass)returns bool

ESP32 board package: starts the access point with the given network name and password.

Returnstrue if the access point started.

WiFi.softAPIP()returns IPAddress

ESP32 board package: the IP address of the access point. The sketch prints it on the screen as the address to open in the browser.

ReturnsThe access point's IP address.

WebServer(int port)returns None

ESP32 board package: the web server object. The sketch creates it as `server`, listening on port 80, the HTTP port.

ReturnsConstructor; no return value.

server.on(uri, handler)returns void

WebServer: sets the function that answers requests for an address. The sketch sends the home page address to handleRoot() and the address /string/ followed by the typed text to handleString().

ReturnsNothing.

UriBraces(const char *uri)returns None

WebServer (uri/UriBraces.h): an address pattern in which each pair of braces matches one part of the address, which the handler reads with server.arg().

ReturnsConstructor; no return value.

server.begin()returns void

WebServer: starts the web server.

ReturnsNothing.

server.handleClient()returns void

WebServer: handles a waiting client request. The sketch calls it over and over in loop().

ReturnsNothing.

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

WebServer: answers the request. The sketch sends status 200, the type text/html and the web page text `s` from htmlCode.h.

ReturnsNothing.

server.arg(int i)returns String

WebServer: the value of request argument i. The sketch reads argument 0, the text typed on the web page, into txt.

ReturnsThe argument value.

What to expect

On start, the screen shows Connect to Inkplate 7SPECTRA WiFi with pass: and the password Soldered, then the line Open Your web browser and open with the address of the access point as http:// and the address, then a black bar and User text: with nothing below it. After you connect your phone or computer to the network and open that address, the browser shows a text box with the text Write some text! and a button Send to display!. When you press the button, the screen refreshes and your text appears under User text:.

🔗Open the complete example

examples/Inkplate7SPECTRA/Advanced/WEB_WiFi/Inkplate7SPECTRA_HTTP_Web_Server

→

What this example shows​

Example code​

Functions used​

What to expect​

What this example shows

Example code

Functions used

What to expect