Hi there,
I think the fixed canvas layout is really great as an alternative to Habpanel.
I just don’t understand what to set in expandable widgets so that they don’t obscure each other when expanding.
Since there is probably no solution to this, I changed the expanding of the widget to a popup.
This solves the blurring and overlapping problem, but I have a different problem. The popup cannot be seen in full screen mode.
uid: Shelly 1
tags: []
props:
parameters:
- label: Header
name: text_header
required: false
type: TEXT
- context: item
description: select item for state switch1
label: Item
name: switch
required: false
type: TEXT
- context: item
description: select item for state power etc.
label: Item
name: value
required: false
type: TEXT
- context: item
description: select item for state wifi
label: Item
name: status_wifi
required: false
type: TEXT
- context: item
description: select item for state battery
label: Item
name: status_batt
required: false
type: TEXT
- context: item
description: select item for state time
label: Item
name: status_time
required: false
type: TEXT
- context: item
description: select groupitem for expant
label: Item
name: itemGroup
required: false
type: TEXT
timestamp: Nov 14, 2021, 9:29:21 AM
component: f7-card
config:
style:
border: 5px
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
height: 120px
margin: 5px
margin-top: 10px
min-width: 250px
swipeToClose: true
slots:
content:
- component: f7-block
config:
style:
left: 20px
position: absolute
top: -5px
width: 100%
slots:
default:
- component: Label
config:
style:
font-size: 15px
font-weight: 600
margin-left: 5px
margin-top: -3px
text-align: center
text: "=props.text_header ? props.text_header : 'Shelly 1 etc'"
- component: oh-button
config:
action: command
actionCommand: "=(items[props.switch].state === 'OFF') ? 'ON' : 'OFF' "
actionItem: =props.switch
iconF7: power
iconSize: 35
style:
background: "=themeOptions.dark === 'dark' ? 'linear-gradient(360deg, #222222 10%, #eeeeee 360%)' : 'linear-gradient(360deg, #5e5e5e 10%, #c6e2ff 200%)'"
border-radius: 15px
box-shadow: 0px 4px 7px
color: "=(items[props.switch].state === 'ON') ? 'red' : 'green' "
height: 54px
left: 20px
padding-top: 10px
position: absolute
top: 4px
z-index: 0
- component: Label
config:
style:
color: "=themeOptions.dark === 'dark' ? 'orange' : 'orange'"
font-size: 30px
font-weight: 600
left: 100px
overflow: hidden
position: absolute
top: 30px
white-space: nowrap
text: =(items[props.value].state)
visible: "=props.value ? true : false"
- component: oh-link
config:
badgeColor: "=(items[props.status_wifi].state >= '3' ) ? 'green' : (items[props.status_wifi].state >= '1' ) ? 'yellow' : 'red' "
iconBadge: "=(items[props.status_wifi].state > '0') ? items[props.status_wifi].state : ''"
iconColor: "=(items[props.status_wifi].state >= '3' ) ? 'green' : (items[props.status_wifi].state >= '1' ) ? 'yellow' : 'red' "
iconF7: "=(items[props.status_wifi].state >= '1' ) ? 'wifi' : 'wifi_slash' "
iconSize: 20
style:
left: 20px
position: absolute
top: 85px
visible: "=props.status_wifi ? true : false"
- component: oh-link
config:
iconColor: "=(Number.parseFloat(items[props.status_batt].state) >= '50' ) ? 'green' : 'red' "
iconF7: "=(Number.parseFloat(items[props.status_batt].state) >= '80') ? 'battery_100' : 'battery_25' "
iconSize: 20
style:
left: 65px
position: absolute
top: 85px
visible: "=props.status_batt ? true : false"
- component: Label
config:
style:
color: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
font-size: 12px
left: 90px
overflow: hidden
position: absolute
top: 85px
white-space: nowrap
text: =(items[props.status_batt].state+"%")
visible: "=props.status_batt ? true : false"
- component: oh-link
config:
iconColor: yellow
iconF7: "=(items[props.status_time].state === 'ON') ? 'timer' : ''"
iconSize: 20
style:
left: 120px
position: absolute
top: 85px
visible: "=props.status_time ? true : false"
- component: f7-popup
config:
class: ='myPopupShelly1' + props.itemGroup
style:
height: 320px
background-color: rgba(30,30,30,0.5)
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
slots:
default:
- component: oh-list
slots:
default:
- component: oh-repeater
config:
filter: '(loop.item.type=="Switch") ? true : false'
for: item
groupItem: =props.itemGroup
sourceType: itemsInGroup
slots:
default:
- component: oh-toggle-item
config:
icon: =loop.item.category
iconUseState: true
item: =loop.item.name
title: =loop.item.label
- component: oh-repeater
config:
filter: '(loop.item.type=="Switch") ? false : true'
for: item
groupItem: =props.itemGroup
sourceType: itemsInGroup
slots:
default:
- component: oh-label-item
config:
icon: =loop.item.category
iconUseState: true
item: =loop.item.name
title: =loop.item.label
default:
- component: oh-button
config:
color: gray
iconF7: doc_plaintext
iconSize: 20px
action: popup
popupOpen: ='.myPopupShelly1' + props.itemGroup
style:
padding-bottom: 40px
padding-right: 5px
padding-top: 4px
position: absolute
right: 5px
top: 0
z-index: 998
Add this to your f7-popup config section:
tabletFullscreen: true
Unfortunately, that doesn’t solve the problem either, the popup is not displayed on the PC in the browser in full screen mode.
probably because of this:
height: 320px
If I use that, I get a popup in full screen in the normal view, which I cannot close.
But my problem is that I don’t see the popup in full screen mode. When the full screen mode exits, it’s there. That seems to have something to do with the z-index. but my trying with it didn’t get me any further either.
thx
don‘t kniw what you mean. do yoou have screenshots?
english is not my mother tongue, maybe the google translator doesn’t get my question across correctly.
The first picture shows the full screen mode, the button for the popup was pressed, but it cannot be seen.
In the second picture, the full screen mode was simply exited and the popup can be seen.
The only problem is with the canvas layout, which is the only alternative to habpanel.
thx
could you try this widget and post a screenshot from the result?
In “run mode” the popup covers the complete visible area.
uid: Test
tags: []
timestamp: Nov 18, 2021, 7:17:04 PM
component: f7-card
config:
style:
border: 5px
border-radius: var(--f7-card-expandable-border-radius)
height: 120px
margin: 5px
margin-top: 10px
min-width: 250px
swipeToClose: true
slots:
content:
- component: f7-block
config:
style:
left: 20px
position: absolute
top: -5px
width: 100%
slots:
default:
- component: Label
config:
style:
font-size: 15px
font-weight: 600
margin-left: 5px
margin-top: -3px
text-align: center
text: Test
- component: f7-popup
config:
class: myPopupShelly1
tabletFullscreen: true
slots:
default:
- component: oh-button
config:
iconF7: clear_fill
iconSize: 20px
action: popup
popupClose: .myPopupShelly1
style:
position: absolute
right: 10px
top: 10px
z-index: 998
default:
- component: oh-button
config:
color: gray
iconF7: doc_plaintext
iconSize: 20px
action: popup
popupOpen: .myPopupShelly1
style:
padding-bottom: 40px
padding-right: 5px
padding-top: 4px
position: absolute
right: 5px
top: 0
z-index: 998
1 Like
Thank you for your efforts.
But we talk past each other.
It’s not about having the popup in full screen, but rather seeing the popup when the page is in full screen mode.
as written, could you post a screenshot with the widget I provided?
hmm, working on my side…
I tested with “responsive layout”
then “Run mode” → “Fullscreen”
is this your popup?
ok, I can reproduce this.
Intersting enough, if you go into fullscreen mode by clicking on “Fullscreen” instead of the two arrows, everything is working fine.
probably a bug.
The point “full screen” is only available in the edit mode, in the normal view it is not there, so only the double arrow remains.
@hubsif: Hi Hubsi, are you the author of Fixed Canvas layout?
Could you please have look if this is a bug or maybe other additional parameters are being required?
I was hoping that my problem with OH 3.2 M5 would be fixed, but unfortunately not.
When I switch to full screen mode with the double arrows in the top right corner, it doesn’t work. But when editing in “run mode” via the setting 
at the bottom left it works.
What is the difference ??
I have also this problem. Is that supposed to work like this and if yes why? If you build a page with fixed canvas,in full screen the popups don’t come on. In fixed grid you have some more options when you go to configure grid layout. Like , Hide navigation bar, show full screen icon.
I will appreciate if someone answer.
The author of canvas layout is @tarag .
Maybe he can give a hint