Changes to the ClickableCameraImage widget

Hi I am trying to change the ClickableCameraImage, what I would like to achieve is to change the switch item to open a popup to another page where I can make some more choices.

This is what i have tried so far:

uid: ClickableCameraImage
tags:
  - marketplace:110069
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
    - description: Page which will be opened as popup
      label: Page ID
      name: page
      required: true
timestamp: Jun 7, 2022, 9:42:09 PM
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: popup
        actionPage: =props.page
        iconF7: tv
        iconSize: 25
        style:
          color: white
          left: 0.2rem
          position: absolute
          top: 0rem
    - 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 + "_MotionAlarm"].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 + "_AudioAlarm"].state === "ON") ? "0.5" : "0" '
          position: absolute
          top: 7.7rem

But no luck… so far

I am not sure if it’s even possible?

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…

Cards | Framework7 Documentation

If its only when you click on a button and not the whole widget, then perhaps this may help…

Popup for Shutter-Widget - Add-ons / UIs - openHAB Community

The previous link to F7 examples can be used to look at how the popup and popover work.