Skip to main content

HTTPS with a certificate

What this example shows​

Download a picture from a website over HTTPS, with the website's certificate checked when the connection is made, and show it on the screen. The sketch then tries to load a picture from a different website with the same certificate. That fails, because the certificate is not valid for that site, and the screen says so.

The certificate in the sketch is the one for https://varipass.org. The sketch's header says it opens .bmp files with a color depth of 1, 4, 8 or 24 bits.

Before you upload, write your network name and password between the quotes of ssid and password.

Example code​

Select Board
Inkplate7SPECTRA_HTTPS_With_Certificate.ino
#include "Inkplate.h"            // Include Inkplate library to the sketch
Inkplate display; 

const char ssid[] = "";    // Your WiFi SSID
const char *password = ""; // Your WiFi password

//This is the certificate for the website https://varipass.org

const char* certificate = \
"-----BEGIN CERTIFICATE-----\n" \
"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\n" \
"-----END CERTIFICATE-----\n";

void setup()
{
  display.begin();        // Init Inkplate library (you should call this function ONLY ONCE)
  display.clearDisplay(); // Clear frame buffer of display
  display.display();      // Put clear image on display

  display.print("Connecting to WiFi...");
  display.display();
  display.connectWiFi(ssid, password);
  
  while (!display.isConnected())
  {
    delay(500);
    display.print(".");
    display.display();
  }
  display.println("\nWiFi OK! Downloading...");
  display.display();

  //Apply the certificate previously defined
  display.applyHttpsCertificate(certificate);
  //Here we will draw the image using a valid certificate. Photo taken by: Roberto Fernandez
  if (!display.image.draw("https://varipass.org/neowise_mono.bmp", 0, 0, false, true))
  {
    // If is something failed (wrong filename or wrong bitmap format), write error message on the screen.
    // REMEMBER! You can only use Windows Bitmap file with color depth of 1, 4, 8 or 24 bits with no compression!
    display.println("Image open error");
    display.display();
  }
  display.display();
  delay(3000);
  display.clearDisplay();
  //Next we will try to load an image from a different website, which will not work as the certificate is 
  //not valid for this page
  if (!display.image.draw("https://raw.githubusercontent.com/SolderedElectronics/Inkplate-Arduino-library/master/examples/Inkplate5V2/Advanced/WEB_WiFi/Inkplate5V2_Show_JPG_With_HTTPClient/image.jpg", 0, 100, true, false))
  {
    display.println("This image wont load as the certificate is invalid");
    display.display();
  }
  display.display();

  display.disconnect();
}

void loop()
{
  // Nothing...
}

This example also uses delay(), which comes with the ESP32 board package (arduino-esp32) and is not part of the Inkplate library.

Functions used​

Inkplate()returns None

Creates the Inkplate object. Inkplate 7SPECTRA has a single six-color mode, so the constructor takes no mode argument.

ReturnsConstructor; no return value.

display.begin()returns void

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

ReturnsNothing.

display.clearDisplay()returns void

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

ReturnsNothing.

display.display(bool _leaveOn = 0)returns void

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

ReturnsNothing.

display.print(value)returns size_t

Prints text into the frame buffer, like Serial.print(). The sketch uses it for the status text and the connection dots.

ReturnsNumber of bytes printed.

display.println(value)returns size_t

Prints text into the frame buffer and moves to the next line, like Serial.println().

ReturnsNumber of bytes printed.

display.connectWiFi(const char *ssid, const char *pass, int timeout = WIFI_TIMEOUT, bool printToSerial = false)returns bool

Connects to the Wi-Fi network. timeout defaults to 23, the library's WIFI_TIMEOUT. printToSerial is false by default.

Returnstrue if it connected.

display.isConnected()returns bool

Reports whether the board is connected to Wi-Fi. The sketch waits in a loop, printing a dot every half second, until it is.

Returnstrue while connected.

display.applyHttpsCertificate(const char *certificate)returns void

Gives the library the certificate to check HTTPS connections against. Here it is the certificate for varipass.org, so a request to another website fails.

ReturnsNothing.

display.image.draw(const char *path, int x, int y, bool dither = 1, bool invert = 0)returns bool

Draws an image at x, y; the library picks the decoder from the file extension of the address. The first call draws the varipass.org bitmap at 0, 0 with dither off and invert on. The second call draws a JPEG from raw.githubusercontent.com at 0, 100 with dither on and invert off.

Returnstrue if the image was drawn.

display.disconnect()returns void

Disconnects from the Wi-Fi network.

ReturnsNothing.

delay(unsigned long ms)returns void

Waits the given number of milliseconds: 500 between connection dots and 3000 between the two pictures.

ReturnsNothing.

What to expect​

The screen shows Connecting to WiFi... followed by a dot every half second until the board is connected, then WiFi OK! Downloading.... Then the picture from varipass.org is drawn. After three seconds the screen is cleared and the sketch tries the second picture; because the certificate is not valid for that website, the screen shows This image wont load as the certificate is invalid. If the first picture cannot be opened, the screen shows Image open error. The sketch prints nothing to the Serial Monitor.

🔗Open the complete example

examples/Inkplate7SPECTRA/Advanced/WEB_WiFi/Inkplate7SPECTRA_HTTPS_With_Certificate

→