A card with the book you're reading (dutchies only, sorry)

Just a nice project for the sunday afternoon: your current book as an image on your dashboard. Or the current book your partner is reading, or…

It’s based on a Scrape Sensor, the Downloader component, an automation and the Markdown Card for Lovelace.

For Dutchies only, as it requires an active (free) subscription on this Dutch readers site:

The configuration in configuration.yaml:

downloader:
  download_dir: "www/downloads"

Be sure to create both folders manually. The www folder should be inside your configuration folder.
Also create a subfolder hebban in the downloads folder.

The config of the sensor:

- platform: scrape
  resource: https://www.hebban.nl/Work/more?filter=shelf&sort=new&user=YOURUSERNUMBERHERE&shelf=reading&offset=0&step=20&context=shelf_reading
  scan_interval: 7200
  name: Xxx is reading
  select: 'img'
  attribute: 'src'
  value_template: >-
    {{ value | replace('\\\"', '') | replace('\\', '') }}

Replace YOURUSERNUMBERHERE with your user number at Hebban. You can figure it out when you check the url of the XHR request this page is doing to the backend of Hebban (when logged in).

Replace every xxx and Xxx with a name preferably only AFTER all things work successfully! (Be sure to use lowercase and underscores when replacing xxx, e.g. my_beautiful_name. You can replace Xxx with e.g. My Beautiful Name.)

The config of the automation:

- alias: hebban_change_xxx_is_reading
  trigger:
    platform: state
    entity_id: sensor.xxx_is_reading
  action:
    - service: downloader.download_file
      data_template:
        url: >-
          {{ states("sensor.xxx_is_reading") }}
        subdir: hebban
        filename: xxx_is_reading.jpg
        overwrite: true

The configuration for the cards: in Lovelace:

      - type: markdown
        title: Xxx is reading
        content: >-
          ![image](/local/downloads/hebban/xxx_is_reading.jpg "Xxx is reading")

Restart HA. And have fun.

Help needed: There is a caching issue with the image. Since the filename stays the same, the image isn’t replaced when the image has changed. Is it possible to have {{ dynamic }} parameters as card option value in Lovelace? Or force a cache cleanup? Or have a workaround with a changing ?v=1 like parameter?

What about using the camera to display the image instead of a hard coded image?

1 Like

Thank you @wills106, great suggestion! After reading the docs, I’m pretty sure your suggestion will work if the current book is changed on Hebban.

This is what I changed:

I added to configuration.yaml:

camera:
  - platform: local_file
    name: xxx_is_reading
    file_path: /config/www/downloads/hebban/xxx_is_reading.jpg

I added an extra action to the automation:

    - service: camera.local_file_update_file_path
      data:
        entity_id: camera.xxx_is_reading

In ui-lovelace.yaml I removed the markdown card and added:

      - type: picture-entity
        name: Xxx is reading
        entity: camera.xxx_is_reading
        show_state: false

The picture is rather big now. I hope I’ll find a solution somewhere to display it a bit smaller.

You could try a Horizontal Stack card?

If you have other family members reading books you can combine the books on one card saving space.

Something like:

- type: horizontal-stack
  cards:
    - type: picture-entity
      name: Gurbyz is reading
      entity: camera.gurbyz_is_reading
	  show_state: false
	
	- type: picture-entity
      name: Mrs Gurbyz is reading
      entity: camera.mrsgurbyz_is_reading
	  show_state: false

Horizontal Stack works perfect for making the images smaller! Mrs Gurbyz says thank you. :smiley:

1 Like

Glad I could help!