[Solution] Open popup/popover by rule or item state

Oliver2 · March 7, 2023, 9:34pm

this is the code I am currently using. It is just the popup which I placed somewhere on the page (does not matter where)

uid: popup-cam
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 4, 2023, 5:41:41 PM
component: f7-popup
config:
  closeByBackdropClick: true
  opened: =(items.vPopupCam.state == 'ON') ? true:false
  tabletFullscreen: true
slots:
  default:
    - component: oh-image
      config:
        lazy: false
        refreshInterval: 100
        style:
          max-width: 100%
          width: 100%
        url: ='http://192.168.178.69/record/current.jpg'
    - component: oh-button
      config:
        action: command
        actionCommand: close
        actionItem: vPopupCam
        style:
          --f7-button-bg-color: transparent
          --f7-button-hover-bg-color: transparent
          --f7-button-pressed-bg-color: transparent
          height: 100%
          left: 0px
          position: absolute
          top: 0px
          width: 100%
          z-index: 15
      slots:
        default:
          - component: f7-icon
            config:
              f7: xmark_rectangle_fill
              style:
                font-size: 50px
                position: absolute
                right: 15px
                top: 15px
                vertical-align: middle
              textColor: white

The f7 icon (x) is unnecessary/redundant. It is just for WAF as my wife complained there is no button to close the popup

MadFrankie · March 7, 2023, 10:04pm

Hi,

Thanks for the quick reply, no the page doesn’t grey or show any signs of a hidden pop up.

I’m triggering it by change of item state, when the doorbell rings a rule sets the state to ON.

For your code, rather than displaying a URL can it use an item image? I have an item in OH that holds the latest snapshot…

EDIT…it’s sort of working…I think I had a typo somewhere, I’ve C&P it all back in and I now get the popup, but it’s blank as the URL I have goes no where…

So the only question is whether / how I can use the item as the image to display.

Oliver2 · March 7, 2023, 10:21pm

yes sure. simply remove the url and add the following:

item: itemWhichHoldsTheImage

But remember. If you used the url which points to the current image of the camera, you will see a video

MadFrankie · March 7, 2023, 10:32pm

item: itemWhichHoldsTheImage

Thanks, tried that but still an empty pop up. I’ve added an image widget which is the item snapshot in question to the main page to check it’s correct…but you can see the blank pop up…

Sure it’s something simple…thanks for your help so far, I’ll take another look with fresh eyes in the morning.

Oliver2 · March 7, 2023, 10:53pm

add a label to check if the popup is showing some content, like this:

slots:
  default:
    - component: Label
      config:
        text: Test
    - component: oh-image

could you copy the complete yaml code?

MadFrankie · March 8, 2023, 9:44am

Hi,

Added a label and yes that appears:

Full YAML (It is pretty much verbatum from your example as a test)

The trigger is vDoorBellPress switch item and the image I’m trying to show is called FrontDoor_Snapshot, and is the same item shown bottom right of the page shown above so I know it is working.

uid: doorbell_frontdoorpopup
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 7, 2023, 10:26:13 PM
component: f7-popup
config:
  closeByBackdropClick: true
  opened: =(items.vDoorBellPress.state == 'ON') ? true:false
slots:
  default:
    - component: Label
      config:
        text: Test
    - component: oh-image
      config:
        lazy: false
        refreshInterval: 100
        style:
          max-width: 50%
          width: 50%
        item: FrontDoor_Snapshot
    - component: oh-button
      config:
        action: command
        actionCommand: close
        actionItem: vDoorBellPress
        style:
          --f7-button-bg-color: transparent
          --f7-button-hover-bg-color: transparent
          --f7-button-pressed-bg-color: transparent
          height: 50%
          left: 0px
          position: absolute
          top: 0px
          width: 50%
          z-index: 15
      slots:
        default:
          - component: f7-icon
            config:
              f7: xmark_rectangle_fill
              style:
                font-size: 50px
                position: absolute
                right: 15px
                top: 15px
                vertical-align: middle
              textColor: white

I might look to set up the live view rather than a snapshot but I’d rather work out what is wrong here for the learning experience, (or find out where I’ve been stupid)…then I can develop it.

Oliver2 · March 8, 2023, 12:22pm

Could you delete these attributes?
The popup in general works as can be seen at the image placeholder

Not related to this problem, but:
Is vDoorBellPress a string item or on/off item (switch)? If switch you need to replace close by off
And the height of the button needs to be 100%, otherwise its size is 50% of 50%

MadFrankie · March 8, 2023, 12:56pm

Hi,

That’s got it working…deleted the lazy: false etc and now the image shows…amazing…

Final question, it now loads the image but only the top corner of it…is there a way to get it to auto resize to the size of the popup?

Oliver2 · March 8, 2023, 2:22pm

In general (and I think you already did that) you need to set the desired size of the popup and have the size of oh-image component set to 100%.
If you see just a part of your image in the popup (and I assume there is no wasted space arund your oh-image) your resolution is larger than your device.
Either reduce the resolution of the image source or you can start trying around with

style:
  -webkit-transform: scale(0.7)

to shrink the image.

@JustinG is a very helpful expert for css related questions. Do you have any other advice?

MadFrankie · March 8, 2023, 2:48pm

Thanks, I’ve had a different thought…

Could this widget open up a different page in the popup rather than an item? That way, the page is already formatted and you get a little more freedom in the contents…

I’ve fiddled with the YAML, essentially I’ve tried to add in a modal to a ‘camera’ page I’ve created…the pop up comes up as expected but I’m back to a blank page, is there a setting I’m missing or is it not possible to link to a page in this way?

uid: doorbell_frontdoorpopup
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 8, 2023, 3:27:21 PM
component: f7-popup
config:
  closeByBackdropClick: true
  opened: =(items.aDoorBellPress.state == 'ON') ? true:false
slots:
  default:
    - component: oh-image
      config:
        actionModal: page:camera
    - component: oh-button
      config:
        action: command
        actionCommand: off
        actionItem: aDoorBellPress
        style:
          --f7-button-bg-color: transparent
          --f7-button-hover-bg-color: transparent
          --f7-button-pressed-bg-color: transparent
          height: 50%
          left: 0px
          position: absolute
          top: 0px
          width: 50%
          z-index: 15

JustinG · March 8, 2023, 3:32pm

If you don’t specify a width (height works too, for that matter) then the oh-image will always stretch to fit the image you give it. You can use a % width in this case, because the image is a child of the popup which has a defined width value of its own.

Not really no. Although pages are constructed in a similar format to widgets, the two are not really interchangeable. “Widgets” are just UI elements. “Pages” in MainUI app are destinations that you can navigate to within the framework of the app that just happen to have widgets on them.

If you wan this item-based control the the popup then you are constrained to building the widget you want to have as the popup.

JustinG · March 8, 2023, 3:33pm

This will never trigger automatically. Widgets actions can only be initiated by interaction with the component. That’s why you cannot use the oh actions here to navigate to a page and must use the f7-popup method which you can control without direct interaction with the component.

MadFrankie · March 8, 2023, 3:46pm

Ah, that does make sense…shame…but it does make sense!

Oliver2 · March 8, 2023, 6:44pm

Just be aware: if you enable this you can close the popup but the popup triggering item is still „ON“. This might lead to unexpected behaviour.

MadFrankie · March 8, 2023, 7:44pm

Yes, thanks, the trigger item is on from a rule which counts for 10 seconds and then turns it off again so that’s when the pop up closes.

I’m probably going to get rid of the manual X to close as it won’t be needed.

Thanks for all your help, I’m off to do some more YAML learning.

EDIT

I’m trying to get the popup to open a page rather than an image, I’ve been going around the houses with the config, what is wrong here please?

Concept - when vPagesPopUp item is set to HOME, it should open pop up a page called camera.

When the vPagesPopUp is then set to OFF it closes the popup…

uid: home_popup
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 13, 2023, 3:20:53 PM
component: f7-popup
config:
  closeByBackdropClick: true
  opened: =(items.vPagesPopUp.state == 'HOME') ? true:false
slots:
  default:
    - component: oh-link
      config:
        action: popup
        actionModal: page:camera
        style:
          width: 75%
    - component: oh-button
      config:
        action: command
        actionCommand: OFF
        actionItem: vPagesPopUp
        style:
          --f7-button-bg-color: transparent
          --f7-button-hover-bg-color: transparent
          --f7-button-pressed-bg-color: transparent
          height: 50%
          left: 0px
          position: absolute
          top: 0px
          width: 50%
          z-index: 15