Just wanted to share with you a tiny widget (incl. scripts) where you can swipe through pictures taken from your camera triggered by your door bell.
Explanations see comments in code.
Note: minimum version v3.4.0 required - otherwise some compontents need to be replaces (see posts below by justin) and taphold does not work.
The following DSL rule gets executed on door bell button press:
rule "Door Bell"
when
Item DoorBell_Status1Input changed from "OFF" to "ON" or
Item DoorBell_Status1Input changed from "ON" to "OFF"
then
var unread = vUnread.state as Number + 1
//this item is being used by the widget to display how many photos haven't been seen since the last reset:
vUnread.sendCommand(unread)
//result of this bash script is an updated list of files names in the photo directory:
val csvFiles = executeCommandLine(Duration.ofSeconds(1),"/etc/openhab/scripts/updateHistory.sh")
//convert list of file names to a json string containing description and file name for the widget:
var jsonPhotos = csvFiles.split('\n').map[e | "{ \"caption\": \"" + e.split(".jpg").get(0).replace("~",", ").replace("-",":") + " Uhr\", \"url\": " + "\"/static/photos/" + e + "\"}"]
//store json string in this item:
vFilenames.sendCommand(jsonPhotos.toString())
end
For easiness some of the code was shifted to a bash script updateHistory.sh:
folder="/etc/openhab/html/Photos" #this is where the photos are stored
# This string is used for the file name and description in the widget
now="$(LC_ALL=de_DE.utf8 date +"%A~%d.%m.~%H-%M-%S")" # Results in german notation Samstag~18.02.~20-22-01.
#for english weekday names use: now="$(date +"%A~%d.%m.~%H-%M-%S")"
#Download picture from camera and save it in the folder:
wget http://192.168.178.69/record/current.jpg -q -O $folder/$now.jpg
cd $folder
#for cleanup. This line deletes all old pictures and keeps the 20 latest ones.
ls -tp | tail -n +21 | xargs -I {} rm -- {} #ATTENTION: make 100% sure that you are in the correct folder. Otherwise all files in this folder will be deleted!
#create a string containing all pictures
ls $folder -1t
Widget:
when tapping a popup opens where you can slide through the photos. By intention I did not use f7-swiper because you cannot pinch to zoom.
On taphold action the number of unread photos is reset to 0
component: f7-card
config:
style:
--f7-button-hover-bg-color: transparent
--f7-button-pressed-bg-color: gray
--f7-button-text-transform: none
--my-icon-label-size: 18px
--my-icon-size: 45px
--my-label-size: 24px
-khtml-user-drag: none
-moz-user-drag: none
-moz-user-select: none
-ms-user-select: none
-o-user-drag: none
-webkit-user-drag: none
-webkit-user-select: none
background-color: =(items.vUnread.state == '0')?'rgb(205,205,205)':'white'
border-radius: 15px
box-shadow: 0px 5px 10px rgba(0,0,0,0.15)
height: 120px
margin: 10px 5px 10px 5px
max-height: 120px
min-height: 120px
padding: 0px
user-drag: none
user-select: none
slots:
default:
- component: oh-button
config:
action: photos
actionPhotoBrowserConfig:
exposition: true
navbarOfText: von
popupCloseLinkText: Schließen
type: popup
actionPhotos: =JSON.parse(@@'vFilenames')
style:
background-color: rgba(205,205,205,0.1)
border-radius: 15px
height: 100%
padding: 0px
width: 100%
taphold_action: command
taphold_actionCommand: "0"
taphold_actionItem: vUnread
slots:
default:
- component: table
config:
style:
margin: 10px
table-layout: fixed
vertical-align: middle
white-space: nowrap
slots:
default:
- component: tr
slots:
default:
- component: td
config:
style:
text-align: left
width: var(--my-icon-size)
slots:
default:
- component: oh-icon
config:
icon: f7:bell
style:
color: black
font-size: var(--my-icon-size)
vertical-align: middle
width: var(--my-icon-size)
- component: td
slots:
default:
- component: f7-chip
config:
bgColor: blue
style:
color: black
text: =@'vUnread'
visible: =(items.vUnread.state != '0') ? 'true':'false'
- component: tr
slots:
default:
- component: td
slots:
default:
- component: Label
config:
colspan: 2
style:
color: black
font-size: var(--my-label-size)
font-weight: normal
text-align: left
text: Klingel
- component: f7-icon
config:
f7: ellipsis_vertical
style:
font-size: 20px
position: absolute
right: 5px
top: 12px
vertical-align: middle
textColor: gray
