This is a clickable camera widget, that can display a different URL for the thumb nail to when it is clicked. This allows a low framerate stream to be used when the widget is small, yet when it is clicked it will open up to a higher framerate. You can supply the same URL to both.
The widget also has some other features if you supply it a camera Equipment group that has the standard channels from the ipCamera binding linked to items with the default naming structure. These features are:
- An ear icon appears if the camera hears audio.
- An eye icon appears if the camera sees movement.
- A gear icon appears if the camera equipment group has any items that can be displayed.
Another feature is if you select an item to switch, an icon will appear that allows you to turn a switch on and off.
To install this in openHAB 3.1 and older, go to Developer Tools > Widgets, create a new one, and copy-pasting the code below. In openHAB 3.2 use the new Marketplace feature to install the widget.
After installing you can insert the widget into layout pages.
Widget Code
uid: ClickableCameraImage
props:
parameters:
- description: "example: http://192.168.1.2:8080/ipcamera/uniqueID/autofps.mjpeg"
label: Thumbnail URL
name: thumbnailURL
required: true
type: TEXT
- description: "example: http://192.168.1.2:8080/ipcamera/uniqueID/snapshots.mjpeg"
label: Stream URL
name: streamURL
required: true
type: TEXT
- context: item
label: Select the Camera to Control
name: camera
required: false
type: TEXT
- label: Show Equipment Controls
name: showSettings
required: true
type: BOOLEAN
- label: Show Audio Alarms
name: showAudioAlarms
required: true
type: BOOLEAN
- label: Show Motion Alarms
name: showMotionAlarms
required: true
type: BOOLEAN
- context: item
label: Item to Switch
name: switchItem
required: false
type: TEXT
component: f7-card
config:
style:
--f7-card-margin-horizontal: 0px
height: 9rem
width: 16rem
slots:
default:
- component: oh-image-card
config:
action: photos
actionPhotoBrowserConfig:
lazy: true
theme: dark
type: popup
actionPhotos: =[props.streamURL]
lazy: true
style:
border-radius: 6px
height: 9rem
margin: 0px
width: 100%
url: =props.thumbnailURL
- component: f7-card-content
- component: oh-link
config:
action: toggle
actionCommand: true
actionCommandAlt: false
actionItem: =props.switchItem
iconF7: power
iconSize: 25
style:
color: "=(items[props.switchItem].state === 'ON') ? 'cyan' : 'white'"
left: 0.2rem
opacity: "=(items[props.switchItem].state === 'ON') ? '0.4' : '0.3'"
position: absolute
top: 0rem
visible: =props.switchItem !== undefined
- component: oh-link
config:
action: group
actionGroupPopupItem: =props.camera
iconF7: gear_alt
iconSize: 25
style:
color: white
opacity: 0.4
position: absolute
right: 0.2rem
top: 0rem
visible: =props.showSettings === true
- component: oh-link
config:
iconF7: eye
iconSize: 18
visible: =props.showMotionAlarms === true
style:
color: white
opacity: '=(props.showMotionAlarms !== true) ? "0" : (items[props.camera + "_Motion_Alarm"].state === "ON") ? "0.5" : "0" '
position: absolute
right: 0.2rem
top: 7.8rem
- component: oh-link
config:
iconF7: ear
iconSize: 18
visible: =props.showAudioAlarms === true
style:
color: white
left: 0rem
opacity: '=(props.showAudioAlarms !== true) ? "0" : (items[props.camera + "_Audio_Alarm"].state === "ON") ? "0.5" : "0" '
position: absolute
top: 7.7rem
Older Widget
The below widget is an older design I was playing with that works but will load and keep the streams open non stop. This can be a problem if you have FFmpeg creating the stream and chewing CPU power. The widget above will free up the CPU when you close the popup view, this one will not. I don’t recommend you use this older version with less features, however the code is still useful to learn from.
uid: ExpandableCameraCard
props:
parameters:
- description: "example: http://192.168.1.2:54321/autofps.mjpeg"
label: Thumbnail URL
name: thumbnailURL
required: true
type: TEXT
- description: "example: http://192.168.1.2:54321/snapshots.mjpeg"
label: Stream URL
name: streamURL
required: true
type: TEXT
- context: item
label: Select Camera to open controls for
name: camera
required: false
type: TEXT
- context: item
label: Item for Switch
name: switchItem
required: false
type: TEXT
parameterGroups: []
timestamp: Dec 27, 2020, 4:44:10 PM
component: f7-card
config:
class:
- no-margin
expandable: true
style:
border-radius: 6px
height: 9.6em
width: 17em
slots:
default:
- component: f7-card-content
config:
class: card-opened-fade-in
style:
color: white
background-image: ="url('"+props.streamURL+"')"
background-size: 100% auto
background-position: center
background-repeat: no-repeat
slots:
default:
- component: oh-link
config:
class:
- card-prevent-open
style:
margin: 0em 0.25em 0 -0.7em
color: var(--f7-card-text-color)
opacity: 0.4
z-index: 99
visible: =props.switchItem !== undefined
iconF7: power
iconSize: 22
round: true
action: toggle
actionItem: =props.switchItem
actionCommand: ON
actionCommandAlt: OFF
- component: oh-link
config:
visible: =props.camera !== undefined
class:
- card-prevent-open
style:
margin: 0 0.25em
color: var(--f7-card-text-color)
opacity: 0.4
z-index: 99
iconF7: gear_alt
iconSize: 22
round: true
action: group
actionGroupPopupItem: =props.camera
- component: f7-card-content
config:
class: card-opened-fade-out
style:
color: white
background-image: ="url('"+props.thumbnailURL+"')"
background-size: 17rem 10rem
background-repeat: no-repeat
border-radius: 6px
slots:
default:
- component: oh-link
config:
class:
- card-prevent-open
style:
margin: 0em 0.25em 0 -0.7em
color: "=(items[props.switchItem].state === 'ON') ? 'cyan' : 'white'"
opacity: "=(items[props.switchItem].state === 'ON') ? '1' : '0.3'"
visible: =props.switchItem !== undefined
iconF7: power
iconSize: 22
round: true
action: toggle
actionItem: =props.switchItem
actionCommand: ON
actionCommandAlt: OFF
- component: oh-link
config:
visible: =props.camera !== undefined
class:
- card-prevent-open
style:
margin: 0 0.25em
color: var(--f7-card-text-color)
opacity: 0.4
iconF7: gear_alt
iconSize: 22
round: true
action: group
actionGroupPopupItem: =props.camera
