Inkplate6 to display Lovelace UI

Hi guys,

I had a jailbroken kindle and used hass-lovelace-kindle-screensaver to display a lovelace UI.

Worked flawlessly until amazon updated my device. Jailbraking was a pain in the ass. So I let go.

Now I found inkplate6. Ordered two. Impulse buy.
https://inkplate.io/

Is it possible to download a PNG from a web server and update the Display preferably with ESPHome?

Regards
Ralf

Found an example which is pretty much what is needed. How cool is this?

Solved it. @digitalurban provided the bits I was missing here.

Works as a charm.

I have now a lovelace UI which is auotmatically rendered once a minute and the Inkplate6 updates every 5min automatically.

Laptop left is the LoveLace UI. Laptop right is the output of the HASSScreenSaver. Front is the Inkplate6 with the content.

I am running HASSScreenSaver under Proxmox

This is the code for the Arduino IDE.

/*
   Inkplate_Low_Power example for e-radionica.com Inkplate 6
   For this example you will need USB cable and Inkplate 6.
   Select "Inkplate 6(ESP32)" from Tools -> Board menu.
   Don't have "Inkplate 6(ESP32)" option? Follow our tutorial and add it:
   https://e-radionica.com/en/blog/add-inkplate-6-to-arduino-ide/

   This example builds on the e-radionica examples and shows how to load an image file from a URL, display and then deep sleep.

   Visit www.inkplate.io for more info, details on capturing the web image to display available at digitalurban.org
   
*/

#include "HTTPClient.h"          //Include library for HTTPClient
#include "Inkplate.h"            //Include Inkplate library to the sketch
#include "driver/rtc_io.h"       //ESP32 library used for deep sleep and RTC wake up pins
#include "WiFi.h"                //Include library for WiFi

#define uS_TO_S_FACTOR 1000000   // Conversion factor for micro seconds to seconds
#define TIME_TO_SLEEP  300       // How long ESP32 will be in deep sleep (in seconds) - edit accordingly to your use

Inkplate display(INKPLATE_3BIT);

const char *ssid = "Wifi";     // Your WiFi SSID
const char *password = "passw0rd";   // Your WiFi password

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

    // Connect to the WiFi network added in reset if fails to connect
    int counter =0;
   // WiFi.mode(WIFI_MODE_STA);
    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED && counter < 7 )
    {
        delay(5000);
        display.print(".");
        counter++;
        display.partialUpdate();
    }
       if (WiFi.status() != WL_CONNECTED){

       ESP.restart();
}

    
    display.println("\nWiFi OK! Downloading...");
    display.partialUpdate();

    
// Edit below to provide the location of your jpg to display

    if (!display.drawImage("http://ip_to_HASSScreenSaver:5000/cover.png", 0, 0, false))
    {
        // If is something failed (wrong filename or format), write error message on the screen.
        display.println("Image open error");
        display.display();
    }
    display.display();

    rtc_gpio_isolate(GPIO_NUM_12); // Isolate/disable GPIO12 on ESP32 (only to reduce power consumption in sleep)
    esp_sleep_enable_timer_wakeup(TIME_TO_SLEEP * uS_TO_S_FACTOR); // Activate wake-up timer -- wake up after X sec here
    esp_deep_sleep_start();                                        // Put ESP32 into deep sleep. Program stops here.
}

void loop()
{
    // Nothing! If you use deep sleep, whole program should be in setup() because each time the board restarts, not in a
    // loop()! loop() must be empty!
}
5 Likes

Brilliant - good to see it works, nice to see the graphs on the Inkplate…

Andy

Has anyone working this successfuly with the lates version of
sibbl/hass-lovelace-kindle-screensaver:latest

For me the web server does not load the created grafics.

I’m having the same problem. I can get the sketches to upload just fine on the Inkplate 6, and I can get sibbl’s container to serve a black-and-white png to other devices, including a raspberry pi with a waveshare screen connected to a hat.

I just can’t seem to connect the two. The Inkplate just shows a blank screen.

If anyone else stumbles on this, I didn’t figure out how to solve it, but I figured out a way around it.

Use a docker container for lighttpd on the same server as sibbl’s container. Then, make a cronjob to wget from sibbl’s docker container and write it to the www folder on lighttpd.

Use the CRON_JOB variable for hass-lovelace-kindle-screensaver and set it to * * * * *
This will grab a new screenshot once every minute.

Then make a separate cron job on your host

#!/bin/bash

*/2 * * * * wget -O /path/to/lighttpd/www/image.png http://[ip-address-to-sibbls:docker]:5000/

I then point the inkplate to http://[ip-address-to-server]:[port]/image.png

It’s a little hacky, but it works great. I can make changes in Lovelace and they show up on the Inkplate like 15 minutes later.

@mitchsurp, Genius. Simple. Thanks. Why I was not comming up with this?

Put all in one convenient docker-compose. This even removes the need for the cronjob to copy the png bc both containers use the same volume.

Feel free to adapt your ports, my 5000 and 80 were already in use.

version: "3.8"

services:
  screensaver:
    image: sibbl/hass-lovelace-kindle-screensaver:latest
    environment:
      - HA_BASE_URL=http://10.0.10.8:8123
      - HA_SCREENSHOT_URL=/lovelace-home/kindle
      - HA_ACCESS_TOKEN=ey...
      - CRON_JOB=*/5 * * * *
      - RENDERING_TIMEOUT=30000
      - RENDERING_DELAY=5
      - RENDERING_SCREEN_HEIGHT=800
      - RENDERING_SCREEN_WIDTH=600
      - GRAYSCALE_DEPTH=8
      - OUTPUT_PATH=/output/cover.png
      - LANGUAGE=de
      - ROTATION=0
      - SCALING=1.5
    ports:
      - 5002:5000
    volumes:
      - hasscreensaver-http:/output
    container_name: hassscreensaver

  lighttpd:
    image: sebp/lighttpd
    volumes:
      - hasscreensaver-http:/var/www/localhost/htdocs
      - lighttpd-config:/etc/lighttpd
    ports:
      - 8088:80
    tty: true
    container_name: lighttpd

volumes:
  hasscreensaver-http:
  lighttpd-config:
1 Like

Whats the current way of removing the header from a lovelace ui?

I use ?kiosk which loads the kiosk.js element, but I find it just doesn’t work well. It just blanks where the header is. You cannot design in this space.

It actually happens via all browsers. I’ve found if I adjust zoom once to 90%, and then back to 100%, it’ll work correctly. But there’s no way to do that on the Inkplate.

It looks bad to have a bar that doesn’t match my background only slightly, so I just set the theme to something that looks good and have a good title.

Another check-in. The ?kiosk addon has been updated and no longer shows the whitespace bar.