Custom interactive image card

Share your Projects! Dashboards & Frontend
,
1

Hi guys,

I have been working recently on a custom interactive image card that allows users to upload or link an external image and display it within the card. It supports camera streams (HLS) and vacuum maps as well, but my testing capabilities are limited since I only have two such entities. I would like to make the card more robust and accommodating for other types of streams as well.

The interactive image maker provides the opportunity to easily create interactive areas simply by drawing them on the image. You can add an action name, entity, and service to be called upon clicking, and voilà!

YAML editing can be done manually, which allows card to accept any service data for action calls.

This is still in development, but the first draft is ready for testing. Here is the link to it, so feel free to try it out. All additional information and card YAML examples can be found at the link in the README.md.

I would really appreciate any feedback on this.

1 Like
2

UPDATE!! Card is now production ready, some of main features are following:

FEATURES

  • upload images to HA,
  • browse existing HA images
  • delete image
  • display image (uploaded or linked) or camera stream in HA lovelace dashboard
  • interactive image maker
    • easily create interactive areas - draw them directly on image
    • add service and entity_id to drawn area
    • dynamicaly generated YAML when using uploaded image or a new interactive area is created
      • c/p it to card as a new config
      • pencil icon copies YAML and opens edit mode
      • copy icon only copies YAML
    • toggle interactive areas to call assigned services in HA

NOTES

  • Url can be added manually, but if no url or entity_picture is specified, upload view will be shown
  • Image is uploaded to /config/image/ directory (where are area and person images)
  • Interactive areas can be removed for a specific card only in its own card YAML
  • Multiple cards can share the same config except size and all interactive areas will be correctly scaled up
Capture8

https://github.com/iva-stolnik/interactive-image-card/assets/30315220/25591daf-8fb4-4684-b642-e6a63cae515f(image larger than 3 MB)

ADD CARD TO HA

  • add through HACS as custom repo,
    • open HACS (frontend) and click on 3 dots in upper right corner
    • open custom repositories and paste this link to repository input: https://github.com/iva-stolnik/interactive-image-card
    • select lovelace as category
    • reload HA
  • copy code directly from main.js to Home Assistant /config/www/your-directory/main.js
    • add resource to dashboard
      • resource type: JavaScript module
      • url: /local/your-directory/main.js

All other info can be found on git link.

Happy automating!