JPG from the web with HTTPClient
What this example shows
Connect to Wi-Fi, download a JPG picture with HTTPClient into memory and draw it on the screen. Unlike the library's own image.draw() with an address, here the sketch does the download itself, so you can see each step.
Before you upload, write your network name and password between the quotes of ssid and pass. To show another picture, change the address in url. The address the sketch comes with points to an image in the library repository's Inkplate10 example folder.
This example also uses WiFi and HTTPClient (arduino-esp32), which are not part of the Inkplate library and come with the ESP32 board package.
Example code
#include "HTTPClient.h"
#include "Inkplate.h"
#include "WiFi.h"
Inkplate inkplate;
char *ssid = ""; // Your WiFi SSID
char *pass = ""; // Your WiFi password
// Add the URL of the image you want to show on Inkplate
String url = "https://raw.githubusercontent.com/SolderedElectronics/Inkplate-Arduino-library/master/examples/Inkplate10/Advanced/WEB_WiFi/Inkplate10_Show_JPG_With_HTTPClient/image.jpg";
void setup()
{
Serial.begin(115200); // Init serial communication
inkplate.begin(); // Init Inkplate library (you should call this function ONLY ONCE)
inkplate.clearDisplay(); // Clear frame buffer of display
// Let's connect to the WiFi
// You can see the progress on the Serial Monitor
Serial.print("Connecting to WiFi");
// Actually connect to the WiFi network
WiFi.mode(WIFI_MODE_STA);
WiFi.begin(ssid, pass);
while (WiFi.status() != WL_CONNECTED)
{
// Print a dot every half second when connecting
delay(500);
Serial.print(".");
}
Serial.println("\nWiFi OK! Downloading...");
// Make an object for the HTTP client
HTTPClient http;
http.begin(url);
// Do a get request to get the image
int httpCode = http.GET();
// If everything is OK
if (httpCode == HTTP_CODE_OK)
{
// Get the size of the image
int32_t size = http.getSize();
int32_t len = size; // Copy whose value we will change, but the original must not be lost
if (size > 0)
{
// Allocate the memory for the image
uint8_t *buffer = (uint8_t *)ps_malloc(size);
uint8_t *buffPtr = buffer; // Copy of the buffer pointer so that the original one is not lost
// Temporary buffer for retrieving parts of the image and storing them in the real buffer
uint8_t buff[512] = {0};
// Let's fetch the data
WiFiClient *stream = http.getStreamPtr(); // We need a stream pointer to know how much data is available
// Repeat as long as we have a connection and while there is data to read
while (http.connected() && (len > 0 || len == -1))
{
// Get the number of available bytes
size_t size = stream->available();
// If there are available bytes, read them
if (size)
{
// Read available bytes from the stream and store them in the buffer
int c = stream->readBytes(buff, ((size > sizeof(buff)) ? sizeof(buff) : size));
memcpy(buffPtr, buff, c);
// As we read the data, we subtract the length we read and the remaining length is in the variable
// len
if (len > 0)
len -= c;
// Likewise for the buffer pointer
buffPtr += c;
}
else if (len == -1)
{
len = 0;
}
}
// Draw image into the frame buffer of Inkplate
inkplate.image.drawJpegFromBuffer(buffer, size, 0, 0, true, false);
// Free the memory where the image was stored because it is now in the frame buffer
free(buffer);
}
else
{
// Show an error message
inkplate.setCursor(0, 0);
inkplate.println("Invalid response length " + String(size) + " (HTTP " + String(httpCode) + ")");
}
}
else
{
// Show an error message
inkplate.setCursor(0, 0);
inkplate.println("HTTP error" + String(httpCode) + "...");
}
// Draw image on the screen
inkplate.display();
}
void loop()
{
// Nothing
}
Functions used
Inkplate()returns NoneCreates the Inkplate object. Inkplate 7SPECTRA has a single six-color mode, so the constructor takes no mode argument.
ReturnsConstructor; no return value.
inkplate.begin()returns voidInitializes the library, the peripherals and the frame buffer. Call it once in setup().
ReturnsNothing.
inkplate.clearDisplay()returns voidFills the frame buffer with white. It does not change the panel.
ReturnsNothing.
inkplate.image.drawJpegFromBuffer(uint8_t *buf, int32_t len, int x, int y, bool dither, bool invert)returns boolDecodes a JPEG held in memory and draws it into the frame buffer with its top-left corner at (x, y). The sketch passes the downloaded buffer and its size, position (0, 0), dithering on and invert off.
Returnstrue if the image was drawn.
inkplate.setCursor(int16_t x, int16_t y)returns voidSets where the next printed text starts. The sketch moves it to the top-left corner before an error message.
ReturnsNothing.
inkplate.println(text)returns size_tPrints text into the frame buffer and moves to the next line. The sketch uses it for the two error messages.
ReturnsNumber of bytes printed.
inkplate.display(bool _leaveOn = 0)returns voidSends the whole frame buffer to the panel and refreshes it.
ReturnsNothing.
WiFi.mode(wifi_mode_t mode)returns boolESP32 board package: sets the Wi-Fi mode. The sketch uses WIFI_MODE_STA, the mode for connecting to a network.
Returnstrue if the mode was set.
WiFi.begin(ssid, pass)returns wl_status_tESP32 board package: starts connecting to the network.
ReturnsConnection status.
WiFi.status()returns wl_status_tESP32 board package: the connection status; WL_CONNECTED once connected.
ReturnsConnection status.
HTTPClient()returns NoneHTTPClient class, ESP32 board package: the HTTP client object. The sketch creates one as `http`.
ReturnsConstructor; no return value.
http.begin(url)returns boolHTTPClient: prepares a request to the URL.
Returnstrue if the URL could be parsed.
http.GET()returns intHTTPClient: sends the GET request. The sketch continues only when the answer is HTTP_CODE_OK.
ReturnsThe HTTP status code, or a negative error code.
http.getSize()returns intHTTPClient: the size of the response body, taken from the Content-Length header.
ReturnsThe size in bytes, or -1 when the server did not give one.
http.getStreamPtr()returns WiFiClient *HTTPClient: a pointer to the stream the response body is read from.
ReturnsThe stream pointer.
http.connected()returns boolHTTPClient: whether the connection to the server is still open. The sketch reads data while it is.
Returnstrue while connected.
stream->available()returns intWiFiClient: the number of bytes ready to be read.
ReturnsNumber of bytes.
stream->readBytes(uint8_t *buffer, size_t length)returns size_tWiFiClient: reads up to length bytes into the buffer. The sketch reads at most 512 bytes at a time.
ReturnsNumber of bytes read.
ps_malloc(size_t size)returns void *ESP32 board package: allocates memory from the external PSRAM. The sketch allocates a buffer as big as the picture and frees it with free() once the picture is in the frame buffer.
ReturnsPointer to the memory, or NULL when it could not be allocated.
What to expect
The Serial Monitor at 115200 baud shows Connecting to WiFi, a dot every half second while it connects, and then WiFi OK! Downloading.... When the download finishes, the screen refreshes and shows the picture at the top-left corner. If the server does not answer with HTTP_CODE_OK, the screen shows HTTP error and the code instead; if the answer has no size, it shows Invalid response length with the size and the HTTP code.
🔗Open the complete example
examples/Inkplate7SPECTRA/Advanced/WEB_WiFi/Inkplate7SPECTRA_Show_JPG_With_HTTPClient