Try the code in the PTZ widget or play with this older code I had laying around which may or may not work. Maybe it is closer to what you want…
PTZ camera feed - Add-on Marketplace / UI Widgets - openHAB Community
The idea is that you create 2 different card contents, one that FADES IN when you click on the widget, and the other FADES OUT when you click on the widget or in other words, what you see before you click on the widget. You can create pretty much whatever you want with this method.
uid: ExpandableCameraCard
tags: []
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, 5:50:16 PM
component: f7-card
config:
hideNavbarOnOpen: false
class: lazy no-margin
expandable: true
style:
border-radius: 6px
height: 9.6em
width: 17em
slots:
default:
- component: f7-card-content
config:
class: lazy 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: lazy 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
Since the widgets are based on framework 7 you can use the examples and click and play with them at this site and get some ideas on what can be done…