Recursive widget - Doorbird widget aggregating several items

[PeterK (XBTnade4GSQa74DejEHF)]

Hi,

recently I wondered if a customized widget can call itself using different parameter. It turned out …

yes - yes it can.

The following widget has several parameters which are not used when you first open the widget. If you click on the widget (in this case one of the mock-ups) the defined action is to open the same widget in a popup with a different set of the parameters to this entity.

The parameter Do Not Configure is for example only used in this second round.

The widget shows

• the live view of my porch,
• a mockup of pictures from the Doorbell-event
• a mockup of pictures from the Motion-event

If you click on the mockup, the popup shows who used the doorbell (or who triggered the movement). You can also see the time and can go through the events with a stepper.

uid: Doorbird
props:
  parameters:
    - description: Label
      label: Label
      name: labelCurrent
      required: false
      type: TEXT
      groupName: groupLive
    - context: item
      description: Image
      label: Image
      name: imageCurrent
      required: true
      type: TEXT
      groupName: groupLive
    - context: item
      description: Timestamp
      label: Timestamp
      name: timestampCurrent
      required: false
      type: TEXT
      groupName: groupLive
    - description: Label for the Doorbell Image Card
      label: Label
      name: labelDoorbell
      required: false
      type: TEXT
      groupName: groupDoorbell
    - context: item
      description: Historic Doorbell Image Item
      label: Image (History)
      name: imageDoorbellHistory
      required: false
      type: TEXT
      groupName: groupDoorbell
    - context: item
      description: Historic Doorbell Image Timestamp Item
      label: Timestamp (History)
      name: timestampDoorbellHistory
      required: false
      type: TEXT
      groupName: groupDoorbell
    - context: item
      description: Historic Doorbell Image Index Item
      label: Index (History)
      name: indexDoorbellHistory
      required: false
      type: TEXT
      groupName: groupDoorbell
    - context: item
      description: Doorbell Image Montage
      label: Montage
      name: imageMontageOne
      required: false
      type: TEXT
      groupName: groupDoorbell
    - description: Label for the Motion Image Card
      label: Label
      name: labelMotion
      required: false
      type: TEXT
      groupName: groupMotion
    - context: item
      description: Historic Motion Image Item
      label: Image (History)
      name: imageMotionHistory
      required: false
      type: TEXT
      groupName: groupMotion
    - context: item
      description: Historic Motion Image Timestamp Item
      label: Timestamp (History)
      name: timestampMotionHistory
      required: false
      type: TEXT
      groupName: groupMotion
    - context: item
      description: Historic Motion Image Index Item
      label: Index (History)
      name: indexMotionHistory
      required: false
      type: TEXT
      groupName: groupMotion
    - context: item
      description: Motion Image Montage
      label: Montage
      name: imageMontageTwo
      required: false
      type: TEXT
      groupName: groupMotion
    - context: item
      description: Do Not Configure
      label: Do Not Configure
      name: recursiveIndex
      required: false
      type: TEXT
      groupName: groupDump
  parameterGroups:
    - name: groupLive
      label: Live Image
    - name: groupDoorbell
      label: Doorbell Image
    - name: groupMotion
      label: Motion Image
    - name: groupDump
      label: Do Not Configure
timestamp: Jun 5, 2021, 9:54:02 PM
component: f7-card
slots:
  default:
    - component: oh-image
      config:
        lazy: true
        position: absolute
        item: =props.imageCurrent
        style:
          maxWidth: 100%
          height: auto
    - component: f7-chip
      config:
        visible: =(props.labelCurrent !== undefined)
        text: =props.labelCurrent
        style:
          position: absolute
          color: white
          top: 0px
          left: 0px
    - component: f7-chip
      config:
        visible: =(props.timestampCurrent !== undefined)
        text: =items[props.timestampCurrent].displayState
        style:
          position: absolute
          color: white
          top: 30px
          left: 0px
    - component: oh-stepper
      config:
        visible: =(props.recursiveIndex !== undefined)
        style:
          position: absolute
          top: 60px
          left: 0px
        item: =props.recursiveIndex
    - component: oh-image
      config:
        lazy: true
        position: absolute
        item: =props.imageMontageOne
        action: popup
        actionModal: widget:Doorbird
        actionModalConfig:
          labelCurrent: =props.labelDoorbell
          imageCurrent: =props.imageDoorbellHistory
          timestampCurrent: =props.timestampDoorbellHistory
          imageMontageOne: =props.imageMontageOne
          recursiveIndex: =props.indexDoorbellHistory
        style:
          maxWidth: 100%
          height: auto
    - component: f7-chip
      config:
        visible: =(props.labelDoorbell !== undefined)
        text: =props.labelDoorbell
        position: absolute
        top: 0px
        left: 30px
    - component: oh-image
      config:
        lazy: true
        position: absolute
        item: =props.imageMontageTwo
        action: popup
        actionModal: widget:Doorbird
        actionModalConfig:
          labelCurrent: =props.labelMotion
          imageCurrent: =props.imageMotionHistory
          timestampCurrent: =props.timestampMotionHistory
          imageMontageOne: =props.imageMontageTwo
          recursiveIndex: =props.indexMotionHistory
        style:
          maxWidth: 100%
          height: auto
    - component: f7-chip
      config:
        visible: =(props.labelMotion !== undefined)
        text: =props.labelMotion
        position: absolute
        top: 0px
        left: 0px

Hope this is for any use for others - have fun.

Best regards
Peter