Zum Hauptinhalt springen

JPG aus dem Web mit HTTPClient

Was dieses Beispiel zeigt​

Das Beispiel verbindet sich mit dem WLAN, lädt ein JPG-Bild mit HTTPClient in den Speicher herunter und zeichnet es auf den Bildschirm. Anders als bei image.draw() der Bibliothek mit einer Adresse übernimmt hier der Sketch den Download selbst, sodass Sie jeden Schritt nachvollziehen können.

Tragen Sie vor dem Hochladen Ihren Netzwerknamen und Ihr Passwort zwischen die Anführungszeichen von ssid und pass ein. Um ein anderes Bild anzuzeigen, ändern Sie die Adresse in url. Die Adresse, die im Sketch voreingestellt ist, verweist auf ein Bild im Beispielordner Inkplate10 des Bibliotheks-Repositorys.

Dieses Beispiel verwendet außerdem WiFi und HTTPClient (arduino-esp32). Diese gehören nicht zur Inkplate-Bibliothek, sondern sind im ESP32-Board-Paket enthalten.

Beispielcode​

Select Board
Inkplate7SPECTRA_Show_JPG_With_HTTPClient.ino
#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
}

Verwendete Funktionen​

Inkplate()returns None

Erstellt das Inkplate-Objekt. Inkplate 7SPECTRA hat nur einen einzigen Sechs-Farben-Modus, daher erwartet der Konstruktor kein Modus-Argument.

ReturnsKonstruktor; kein Rückgabewert.

inkplate.begin()returns void

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

ReturnsNichts.

inkplate.clearDisplay()returns void

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

ReturnsNichts.

inkplate.image.drawJpegFromBuffer(uint8_t *buf, int32_t len, int x, int y, bool dither, bool invert)returns bool

Dekodiert ein im Speicher liegendes JPEG und zeichnet es mit der linken oberen Ecke bei (x, y) in den Framebuffer. Der Sketch übergibt den heruntergeladenen Puffer und seine Größe, die Position (0, 0), Dithering ein und Invertieren aus.

Returnstrue, wenn das Bild gezeichnet wurde.

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

Legt fest, wo der nächste ausgegebene Text beginnt. Der Sketch setzt ihn vor einer Fehlermeldung in die linke obere Ecke.

ReturnsNichts.

inkplate.println(text)returns size_t

Gibt Text in den Framebuffer aus und wechselt in die nächste Zeile. Der Sketch verwendet sie für die beiden Fehlermeldungen.

ReturnsAnzahl der ausgegebenen Bytes.

inkplate.display(bool _leaveOn = 0)returns void

Sendet den gesamten Framebuffer an das Panel und aktualisiert es.

ReturnsNichts.

WiFi.mode(wifi_mode_t mode)returns bool

ESP32-Board-Paket: Legt den WLAN-Modus fest. Der Sketch verwendet WIFI_MODE_STA, den Modus für die Verbindung mit einem Netzwerk.

Returnstrue, wenn der Modus gesetzt wurde.

WiFi.begin(ssid, pass)returns wl_status_t

ESP32-Board-Paket: Beginnt, die Verbindung mit dem Netzwerk herzustellen.

ReturnsVerbindungsstatus.

WiFi.status()returns wl_status_t

ESP32-Board-Paket: der Verbindungsstatus; WL_CONNECTED, sobald die Verbindung besteht.

ReturnsVerbindungsstatus.

HTTPClient()returns None

Klasse HTTPClient, ESP32-Board-Paket: das HTTP-Client-Objekt. Der Sketch erstellt eines mit dem Namen `http`.

ReturnsKonstruktor; kein Rückgabewert.

http.begin(url)returns bool

HTTPClient: Bereitet eine Anfrage an die URL vor.

Returnstrue, wenn die URL verarbeitet werden konnte.

http.GET()returns int

HTTPClient: Sendet die GET-Anfrage. Der Sketch fährt nur fort, wenn die Antwort HTTP_CODE_OK lautet.

ReturnsDer HTTP-Statuscode oder ein negativer Fehlercode.

http.getSize()returns int

HTTPClient: die Größe des Antwortkörpers, aus dem Content-Length-Header übernommen.

ReturnsDie Größe in Bytes oder -1, wenn der Server keine angegeben hat.

http.getStreamPtr()returns WiFiClient *

HTTPClient: ein Zeiger auf den Stream, aus dem der Antwortkörper gelesen wird.

ReturnsDer Stream-Zeiger.

http.connected()returns bool

HTTPClient: ob die Verbindung zum Server noch offen ist. Der Sketch liest Daten, solange sie es ist.

Returnstrue, solange die Verbindung besteht.

stream->available()returns int

WiFiClient: die Anzahl der zum Lesen bereitstehenden Bytes.

ReturnsAnzahl der Bytes.

stream->readBytes(uint8_t *buffer, size_t length)returns size_t

WiFiClient: liest bis zu length Bytes in den Puffer. Der Sketch liest jeweils höchstens 512 Bytes.

ReturnsAnzahl der gelesenen Bytes.

ps_malloc(size_t size)returns void *

ESP32-Board-Paket: reserviert Speicher aus dem externen PSRAM. Der Sketch reserviert einen Puffer in der Größe des Bildes und gibt ihn mit free() wieder frei, sobald das Bild im Framebuffer liegt.

ReturnsZeiger auf den Speicher oder NULL, wenn er nicht reserviert werden konnte.

Was Sie erwarten können​

Der Serial Monitor zeigt bei 115200 Baud Connecting to WiFi, alle halbe Sekunde einen Punkt, solange die Verbindung aufgebaut wird, und danach WiFi OK! Downloading.... Ist der Download abgeschlossen, wird der Bildschirm aktualisiert und zeigt das Bild in der linken oberen Ecke. Antwortet der Server nicht mit HTTP_CODE_OK, zeigt der Bildschirm stattdessen HTTP error und den Code an. Enthält die Antwort keine Größenangabe, zeigt er Invalid response length mit der Größe und dem HTTP-Code an.

🔗Vollständiges Beispiel öffnen

examples/Inkplate7SPECTRA/Advanced/WEB_WiFi/Inkplate7SPECTRA_Show_JPG_With_HTTPClient

→