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

Add-ons UIs
21

Yes, item and rule are working well. I did test the example of the 1st post successfully.

But I want to combine it with my existing main page and the existing popup page as shown above.

How can I get this to work, so a click and rule works both on my main page to open the action popup?

1 Like
22

This will not work when you use the OH popup action. You must create the popup using the f7-popup component yourself such as in the example at the top of the thread or in the docs:

23

Thank you.

Can I hide this f7-popup element and only use as hidden trigger?

And can I open a dedicated page instead of the “Your popup content goes here” in the example? How could I do this?

24

A popup is hidden by default and only shown when you trigger it via popupOpen or by changing the popup’s opened value to some true value. If you properly use the f7-popup component, this is how it will work.

Navigating to another page is a different action entirely. If you have a page you want to use it will be easier to to that.

25

I didn’t meant the popup to be hidden, but the f7-popup-element on the page. Of course the popup is hidden, but I don’t want to see the f7-popup-element within my other oh-label-items. Should be possible I believe.

I have a main page with several “oh-label-items” which can be clicked. On clicking a popup is shown. This popup is another page, but this other page is not shown as whole screen, only as popup (by “actionModal: page:mypageforpopup”).

Now I want to trigger this popup page by a rule in addition to the “oh-label-item”-click. I hope you can understand, what I want to have. It is not that complicated, I only want the popups to be triggered by a rule as well as by clicking on some elements.

But how would this work? What would be a working code? The above code only shows content directly within a popup, but not a page as popup. Does “opened:” work with “action: popup” and “actionModal: page:mypageforpopup”? How?

26

I’m afraid I don’t understand. The f7-popup is part of the page or widget code. Nothing shows on the page except when the popup that has been defined is opened.

No, this does not work. That is the whole point of this thread and the use of the f7-popup.

27

Thank you. So any automatic popup of a page or popup-window by a rule is only possible with “opened:” plus “text: Your popup content goes here
” and not as normal page popups?

28

Correct. The only way to communicate between a rule and the UI is through the state of an item. The only way to have the state of an item determine the open or closed status of a popup is to use the popup’s opened property with an expression that includes the item state. The only way to have a popup with the with the opened property is to use the f7-popup element and build your popup with that.

Once you have that working you can also open and close the popup through any other UI component (such as an oh-label-item) which can send commands to the item that controls the popup.

You cannot directly place a page in an f7-poup, and it doesn’t really make sense anyway because it is exactly the same number of clicks to navigate to a whole page and back again (one to open and one to go back). You can, however, replicate the contents of that page directly in the f7-popup component or as a custom widget which you can then add to the popup with:

- component: widget:my_custom_widget_uid
29

Thank you. Got it working, but not finished yet.

30

Another question: When the popup is open and I have enabled “closeByBackdropClick”, the popup closes, but the state of my item, which rules the popup, still is “ON”.

Is there any possibility to set the item to OFF in this case?

31

Nope. If you want the item to stay in sync completely with the popup, then you need to add a button to the popup that closes it by changing the item away from the state that opens the popup and make sure that you only use that button for closing and disable the other closing options.

32

I did some workaround, but this is not “pretty”.

Another issue I found out:
On my popup I have an mpeg-stream running from a webcam. But this stream runs the whole time, even when the popup is not visible. How could that be?

Is there a setting to stop this or can I do any workaround here? Thanks.

33

Are you using oh-image as control for your stream? If yes, try changing to oh-webframe

34

I used oh-image-card. But with oh-webframe-card I get the same, stream continues in background.

Is there any JS workaround which determines, if the element is visible or not? How could I add this JS to the element? Never did this before. Thanks.

35

I believe the popup is pre-rendered even when it is not visible so it makes sense that if you have a video stream on the popup that video stream is active.

If you have followed the method outlined above then you have an item for which the state determines the popup status. Just use that same item to set if the url on the image card is blank or connected to the stream:

url: =(items[popupItem].state == opened_state)?("stream.url"):("")

If you really want to make sure that this gets fully properly refreshed each time the item state changes, then you can add a key property to the card as well bound to the same item state:

36

Thank you, this is an elegant solution, which also works fine.

37

Hi, bit late to the party but after some help please.

I’ve added the above to a personal widget and then added it to my pages as a widget.

Triggered my switch item and waited
nothing
I’m sure it’s something massively simple that I’ve missed but it’s been a long day
any pointers greatly appreciated!

So when the doorbell is pressed, aDoorBellPress is a switch ON
It should then popup a FrontDoorCamera_Snapshot image from the front door camera

uid: widget_popup_frontdoorcamera
tags: []
props:
  parameters: []
  parameterGroups: []
timestamp: Mar 7, 2023, 6:35:34 PM
component: oh-button
config:
  text: Doorbell Rings
  slots:
    default:
      - component: f7-popup
        config:
          closeByBackdropClick: false
          tabletFullscreen: false
          opened: '=(items.aDoorBellPress.state == "ON") ? true : false'
        slots:
          default:
            - component: Label
              config:
                text: Front Door Camera
            - component: oh-button
              config:
                action: command
                actionItem: FrontDoorCamera_Snapshot
                actionCommand: OFF
                style:
                  --f7-button-bg-color: transparent
                  --f7-button-hover-bg-color: transparent
                  --f7-button-pressed-bg-color: transparent
                  height: 100%
                  width: 100%
                  position: absolute
                  left: 0px
                  top: 0px
                  z-index: 999

TIA

38

Did you add your widget to your page?

39

Yup, it’s just a bit of text that says ‘Doorbell Rings’.

40

i should have read it more carefully
 You wrote that you added it to your page.
Let‘s check if the popup opens at all and is maybe out of your visible area

if the item goes to on, does the page becomes a little bit more grey?

EDIT:
The popup which does not appear - are you triggering the popup by button click or by change of item state? Button click will not work with your button.