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?
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.
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.
Are you using oh-image as control for your stream? If yes, try changing to oh-webframe
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.
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:
Thank you, this is an elegant solution, which also works fine.
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
Did you add your widget to your page?
Yup, it’s just a bit of text that says ‘Doorbell Rings’.
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.
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
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.
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
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.
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?
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.
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%
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?
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?