Inkplate loading images from the web

Tested on the inkplate10 but I guess it is the same for all

I’m having difficulties rendering generated images
I’m using inker (GitHub - usetrmnl/inker: BYOS server written in TypeScript / React / Prisma · GitHub) to create some screens that I want to show on my inkplate and example of such a screen can be found here http://134.209.91.154/assets/default-screen-800x480.png?t=1785918118147

But I always get image open error, if I save the image and serve it via a the web it works fine (as I’ve read in the documentation)

Is there a way to get more information/pointers about the image format/specs so I can make sure the generated image is correct for inkplate to display or is there a way to make the inkplate library more robust so it can load these images?

The code I use

#include "Inkplate.h"            //Include Inkplate library to the sketch

#include "WiFi.h"                //Include library for WiFi

#include <WebServer.h>           //Include WebServer library for ESP32




Inkplate display(INKPLATE_3BIT); 




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

const char *password = ""; // Your WiFi password




WebServer server(80);




String prevValue = ""; // Stores the value submitted via the web form

String inputValue = ""; // Stores the value submitted via the web form




void handleRoot()

{

    String html = "<!DOCTYPE html><html><body>"

"<h2>Inkplate Remote Control</h2>"

"<form method='POST' action='/set'>"

"<input type='text' name='value' placeholder='Enter value' style='font-size:1.2em;padding:6px;'>"

"<button type='submit' style='font-size:1.2em;padding:6px 12px;margin-left:8px;'>Set</button>"

"</form>"

"<p>Current value: <strong>" + inputValue + "</strong></p>"

"</body></html>";

server.send(200, "text/html", html);

}




void handleSet()

{

if (server.hasArg("value"))

    {

        inputValue = server.arg("value");

Serial.print("Input value set to: ");

Serial.println(inputValue);

    }

    // Redirect back to the main page

server.sendHeader("Location", "/");

server.send(303);

}




void setup()

{

Serial.begin(115200);




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.partialUpdate();




    // Connect to the WiFi network.

WiFi.mode(WIFI_MODE_STA);

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED)

    {

delay(500);

display.print(".");

display.partialUpdate();

    }




display.println("\nWiFi OK! IP: " + WiFi.localIP().toString());

display.partialUpdate();




delay(3000);




if (!display.image.draw("http://134.209.91.154/assets/default-screen-800x480.png?t=1785918118147", 0, 0, false, true))

    {

display.println("Image open error");

display.display();

    }

display.display();




server.on("/", HTTP_GET, handleRoot);

server.on("/set", HTTP_POST, handleSet);

server.begin();




Serial.print("Web server started at http://");

Serial.println(WiFi.localIP());

}




void loop()

{

server.handleClient();




if (prevValue != inputValue) {

display.clearDisplay(); // Clear frame buffer of display

display.println("New value received updating screen...");

display.partialUpdate();

delay(1000);




if (!display.image.draw(inputValue, 0, 0, false, true))

        {

display.println("Image open error");

display.display();

        }

display.display();




        prevValue = inputValue;




    }

}







Hello sh33dafi,
For images to be handled correctly by our image driver, they must end with the file format. Deleting the query string that comes after “.png” should solve your issue, so the following url should render a correct image:

http://134.209.91.154/assets/default-screen-800x480.png

Hey JosipKuci, this works indeed

Are there any plans to update the image driver allow query strings in the URL? (since this very common to pass data via this way?)

For instance this was a static welcome screen but
a screen that shows battery status etc can look like this

http://inker.intra.codeandglory.be/api/device-images/design/2.png?t=1786004005763&battery=100&wifi=-15&deviceName=Device-F2-4D-FD&firmwareVersion=1.0.0&macAddress=XX%3AXX%3AXX%3AF2-4D-FD

We could definitely add this by just trimming the excess off of the URL after the format is defined. I will put it on our roadmap for the next release, which will then be live in a week or two!

That would be great! Thanks for the support