@Oliver2 thanks for sharing this widget. It inspired me to create my version of the photo history widget. My goal was to avoid bash scripts and manipulating images on the file system
Here is my widget implementation
Items:
Image doorbell_ftp_image - item is linked to FTP Upload channel
String doorbell_camera_history - items
The rule which is triggered on each image upload:
Widget:
uid: CameraHistory
tags: []
props:
parameters:
- context: item
label: Image History Item
name: history
required: false
type: TEXT
- label: Mjpeg Camera Url
name: liveUrl
required: false
type: TEXT
- label: Hls Camera Url
name: hlsUrl
required: false
type: TEXT
timestamp: Mar 21, 2023, 1:35:02 PM
component: f7-block
config:
style:
height: 100%
margin: 0px
max-height: 100%
max-width: 100%
padding: 0px
width: 100%
slots:
default:
- component: oh-image
config:
lazy: true
lazyFadeIn: true
style:
bottom: 0px
display: block
height: auto
left: 0px
margin: auto
margin-left: auto
margin-right: auto
max-height: 100%
max-width: 100%
padding: 0px
position: absolute
right: 0px
top: 0px
width: auto
url: =props.liveUrl
visible: =props.liveUrl !== undefined
- component: oh-video
config:
style:
bottom: 0px
display: block
height: auto
left: 0px
margin: auto
margin-left: auto
margin-right: auto
max-height: 100%
max-width: 100%
padding: 0px
position: absolute
right: 0px
top: 0px
width: auto
url: =props.hlsUrl
visible: =props.hlsUrl !== undefined
- component: oh-link
config:
action: photos
actionPhotoBrowserConfig: '{ "lazy": true, "type": "popup", "navbarShowCount": true}'
actionPhotos: =vars.urls
color: orange
style:
pointer-events: none
position: absolute
right: 10px
top: 10px
visible: =props.history !== undefined && JSON.parse('[' + @props.history + ']').length != 0
slots:
default:
- component: oh-link
config:
action: command
actionCommand: " "
actionItem: =props.history
style:
pointer-events: none
slots:
default:
- component: oh-link
config:
action: variable
actionVariable: urls
actionVariableValue: ='[' + @props.history + ']'
badge: =JSON.parse('[' + @props.history + ']').length
badgeColor: orange
style:
pointer-events: auto
text: " "
Snapshots:
Live camera view
You’ll see a photo gallery with history images by clicking on the history counter in the top right corner. Also, it will clear the history item
WARNING: This implementation has a downside, it stores all history images content in one string item and performance is not good when you have more than 100 unseen images. To fix it I’m working on API extension to put only URLs in history instead of image itself
Thanks to @JustinG for multiple actions on one click