v0.7.0 - Browser-side transitions, visual editor, frame_id
This release adds a custom Lovelace card with smooth, browser-rendered transitions, a visual editor, and several quality-of-life improvements to the camera entity.
Transitions were inspired by a suggestion from @der-optimist on the Home Assistant forum. Thank you!
✨ Highlights
Album Slideshow Card
A custom Lovelace card ships with the integration. The integration registers it automatically - no HACS frontend repository to add and no Lovelace resource to configure. After installing or upgrading, hard-refresh your dashboard once (Ctrl+Shift+R) to pick up the script.
- Smooth slide transitions rendered in the browser, so they stay buttery even on lower-end hardware. The server only renders one still per slide change; the browser cross-fades in CSS.
- Effects:
random,none,fade,slide-left,slide-right,slide-up,slide-down,wipe-left,wipe-right,zoom. randompicks a different effect per slide and avoids repeating the previous one.- Configurable duration and CSS easing.
aspect_ratio,fit(auto / cover / contain), andbackgroundoptions.fit: autoinherits the camera'sfill_modeattribute (cover / contain / blur backdrop).- Optional
tap_action: more-infoopens the camera's more-info dialog. - Visual editor available - pick Album Slideshow from the card picker in Lovelace and the form appears automatically.
type: custom:album-slideshow-card
entity: camera.album_slideshow_living_room
transition: random
duration: 800
easing: ease-in-out
aspect_ratio: 16/9
fit: auto
background: '#000'
tap_action: noneCamera
- New
frame_idattribute: a monotonic counter that increments on every committed slide. The card uses it to cache-bust the camera proxy URL so a fresh JPEG is fetched on every slide. - The camera's
entity_pictureURL now appends&frame=<frame_id>, so anypicture-entitycards or templatedentity_pictureconsumers also see fresh frames per slide instead of stale browser-cached images.
📋 Full options reference
type: custom:album-slideshow-card
entity: camera.album_slideshow_living_room
transition: random # random | none | fade | slide-left | slide-right
# | slide-up | slide-down | wipe-left | wipe-right | zoom
duration: 800 # ms; CSS transition length (50-5000)
easing: ease-in-out # any CSS timing function
aspect_ratio: 16/9 # CSS aspect-ratio value (16/9, 4/3, 1/1, auto)
fit: auto # auto | cover | contain
background: '#000' # color shown behind contained images; blank inherits theme
tap_action: none # none | more-info