Ideas
I want a widget with a few buttons and some stuff. One of the button should open a new window (popup, popover or page) that can easily be closed.
When the button is linked to a page with another widget for the window it isn’t smoth enough for me and I didn’t find out how to change the design (remove the HUD) of the a popup when it opens a page.
If I add another invisible “layer” on the widget which get visible by pressing the button, than it won’t be enough space to place all other things.
The Problems
So the main problem is where the popup or popover opens on different devices. I tryed it first on my PC set every thing up and openedr it on my smartphone, but the popup wasn’t even visible. The only thing you could notice is that the background gets a little bit darker or see half of the popup/popover. I looked on the Internet and found till now nothing usefull for me, even asked ChatGPT for help but some of the answers didn’t even work at all.
Questions
What should I add that the popup opens on every device in the middle of the screen? Or that the popover/popup dont’t get cut in half and is unusable? What do I miss?
Have anyone a working good looking example?
Thanks in advance for trying to help me out and excuse my bad English spelling
The Widget Code:
(It is a bit of a mess now)
uid: WLED-Master_Widget
tags:
- Popup
- Slider
props:
parameters:
- description: Title of the Widget
label: Name
name: itemPrefixName
required: false
type: TEXT
groupName: general
- description: Button on the Title to get to Wled Site | default http://192.168.0.136
label: Button URL
name: wledUrl
required: false
type: TEXT
groupName: general
- context: item
description: Item to use with the Power Button and Slider.
label: Global Brightness
name: ItemShd
required: true
type: TEXT
groupName: general
- context: item
description: Item to use with this Switch.
label: Switch Item Sleep
name: ItemSleepS
required: true
type: TEXT
groupName: general
- context: item
description: Item to use for the Actions.
label: Action Item Preset
name: ItemPopupP1
required: false
type: TEXT
groupName: presets
- description: Name the 1. Button.
label: Name Button 1
name: itemPresetName1
required: false
type: TEXT
groupName: presets
- description: Preset 1 ID use for the Actions.
label: Preset ID 1
name: itemPresetCommand1
required: false
type: TEXT
groupName: presets
- description: Name the 2. Button.
label: Name Button 2
name: itemPresetName2
required: false
type: TEXT
groupName: presets
- description: Preset 2 ID use for the Actions.
label: Preset ID 2
name: itemPresetCommand2
required: false
type: TEXT
groupName: presets
- description: Name the 3. Button.
label: Name Button 3
name: itemPresetName3
required: false
type: TEXT
groupName: presets
- description: Preset 3 ID use for the Actions.
label: Preset ID 3
name: itemPresetCommand3
required: false
type: TEXT
groupName: presets
- description: Name the 4. Button.
label: Name Button 4
name: itemPresetName4
required: false
type: TEXT
groupName: presets
- description: Preset 4 ID use for the Actions.
label: Preset ID 4
name: itemPresetCommand4
required: false
type: TEXT
groupName: presets
- description: Name the 5. Button.
label: Name Button 5
name: itemPresetName5
required: false
type: TEXT
groupName: presets
- description: Preset 5 ID use for the Actions.
label: Preset ID 5
name: itemPresetCommand5
required: false
type: TEXT
groupName: presets
- description: Name the 6. Button.
label: Name Button 6
name: itemPresetName6
required: false
type: TEXT
groupName: presets
- description: Preset 6 ID use for the Actions.
label: Preset ID 6
name: itemPresetCommand6
required: false
type: TEXT
groupName: presets
- description: Name the 7. Button.
label: Name Button 7
name: itemPresetName7
required: false
type: TEXT
groupName: presets
- description: Preset 7 ID use for the Actions.
label: Preset ID 7
name: itemPresetCommand7
required: false
type: TEXT
groupName: presets
- description: Name the 8. Button.
label: Name Button 8
name: itemPresetName8
required: false
type: TEXT
groupName: presets
- description: Preset 8 ID use for the Actions.
label: Preset ID 8
name: itemPresetCommand8
required: false
type: TEXT
groupName: presets
- description: Setting up the Background Colour <br>Visit <a
'https://www.w3schools.com/colors/colors_gradient.asp'>https://www.w3schools.com/colors/colors_gradient.asp</a>
for more informations.
label: Backgroundcolour
name: itemPrefixBackgroundcolour
required: false
type: TEXT
groupName: lookandfeel
- description: Setting up the Background Colour for Popup
label: Backgroundcolour Popup
name: itemPrefixBackgroundcolourPopup
required: false
type: TEXT
groupName: lookandfeel
- description: Setting the Text and Icon Color for Popups | Default 255,255,255
label: Text Color Popup
name: TextcolorPopup
required: false
type: TEXT
groupName: lookandfeel
advanced: true
- description: Setting the Text and Icon Shadow for Popups | Default 0,0,0
label: Text, Icon Shadow Popup
name: TextIconShadowPopup
required: false
type: TEXT
groupName: lookandfeel
advanced: true
- description: Setting the Text and Icon Color | Default 255,255,255
label: Text Color
name: Textcolor
required: false
type: TEXT
groupName: lookandfeel
advanced: true
- description: Setting the Text and Icon Color for ON Mode| Default 44,228,44
label: Text ON Color
name: TextONcolor
required: false
type: TEXT
groupName: lookandfeel
advanced: true
- description: Setting the Text and Icon Shadow | Default 0,0,0
label: Text, Icon Shadow
name: TextIconShadow
required: false
type: TEXT
groupName: lookandfeel
advanced: true
- label: Icon for the Shutdown Button
name: itemPrefixIconShd
required: false
type: TEXT
groupName: lookandfeel
advanced: true
- label: Icon for the Sleep Button
name: itemPrefixIconSleepS
required: false
type: TEXT
groupName: lookandfeel
advanced: true
- label: Icon for the Preset Popup Button
name: itemPrefixIconPresetsPop
required: false
type: TEXT
groupName: lookandfeel
advanced: true
parameterGroups:
- name: general
label: General settings
- name: info
label: Information Popup settings
- name: presets
label: Presets Popup settings
- name: lookandfeel
label: Look & Feel
description: Everything that influences the look & feel of the widget
timestamp: Aug 28, 2024, 1:58:17 AM
component: f7-card
config:
class:
- padding
- flex-direction-column
style:
--widget-card-ONcolor: "=(!props.TextONcolor) ? '44,228,44' : props.TextONcolor"
--widget-card-border-radius: 20px
--widget-card-color: "=(!props.Textcolor) ? '255,255,255' : props.Textcolor"
--widget-card-text-ONcolor: rgba(var(--widget-card-ONcolor),1)
--widget-card-text-color: rgba(var(--widget-card-color),1)
--widget-card-text-shadow-color: "=(!props.TextIconShadow) ? '0,0,0' : props.TextIconShadow"
--widget-font-size-large: 20px
--widget-font-size-normal: 16px
--widget-text-shadow-strong: 2px 2px rgba(var(--widget-card-text-shadow-color),.35)
background: "=props.itemPrefixBackgroundcolour ?
props.itemPrefixBackgroundcolour : 'linear-gradient(to bottom,
#003399,#33ccff)'"
border-radius: var(--widget-card-border-radius)
color: var(--widget-card-text-color)
height: "=(props.bigCard) ? '' : '120px'"
user-select: none
width: "=(props.bigCard) ? '' : '275px'"
slots:
default:
- component: oh-button
config:
action: url
actionUrl: "=props.wledUrl ? props.wledUrl : 'http://192.168.0.136'"
style:
height: 30px
justify-content: left
margin: 0px 0px 0px 0px
width: 100px
slots:
default:
- component: Label
config:
style:
color: var(--widget-card-text-color)
display: flex
font-size: var(--widget-font-size-large)
font-weight: 600
letter-spacing: .75px
margin: 2px 0px 0px -9px
text-shadow: var(--widget-text-shadow-strong)
text: "=props.itemPrefixName ? props.itemPrefixName : 'WLED'"
- component: f7-row
config:
style:
display: flex
height: 45px
margin: 5px 0px 0px 0px
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=items[props.ItemShd].state === '0' ? '40' : '0'"
actionItem: =props.ItemShd
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: oh-icon
config:
height: 35px
icon: "=props.itemPrefixIconShd ? props.itemPrefixIconShd : 'iconify:ion:power'"
style:
color: "=items[props.ItemShd].state > 0 ? 'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
display: flex
- component: oh-button
config:
action: command
actionCommand: TOGGLE
actionItem: =(props.ItemSleepS)
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: oh-icon
config:
height: 35px
icon: "=props.itemPrefixIconSleepS ? props.itemPrefixIconSleepS :
'iconify:icon-park-outline:sleep'"
style:
color: "=items[props.ItemSleepS].state === 'ON' ?
'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
display: flex
- component: oh-button
config:
action: popup
class:
- display-flex
- flex-direction-column
outline: true
popupOpen: .presetsLED
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: oh-icon
config:
color: var(--widget-card-text-color)
height: 30px
icon: "=props.itemPrefixIconPresetsPop ? props.itemPrefixIconPresetsPop :
'iconify:ic:outline-quickreply'"
- component: f7-popup
config:
backdrop: true
class:
- presetsLED
- padding
- display-flex
- flex-direction-column
closeByBackdropClick: true
closeByOutsideClick: true
closeOnEscape: true
style:
--widget-card-ONcolor: "=(!props.TextONcolor) ? '44,228,44' : props.TextONcolor"
--widget-card-border-radius: 20px
--widget-card-color: "=(!props.TextcolorPopup) ? '255,255,255' :
props.TextcolorPopup"
--widget-card-text-ONcolor: rgba(var(--widget-card-ONcolor),1)
--widget-card-text-color: rgba(var(--widget-card-color),1)
--widget-card-text-shadow-color: "=(!props.TextIconShadowPopup) ? '0,0,0' :
props.TextIconShadowPopup"
--widget-font-size-large: 20px
--widget-font-size-normal: 16px
--widget-text-shadow-strong: 2px 2px rgba(var(--widget-card-text-shadow-color),.35)
background: "=props.itemPrefixBackgroundcolourPopup ?
props.itemPrefixBackgroundcolourPopup :
'linear-gradient(to bottom, #9900cc 0%, #ff33cc 100%)'"
border-radius: 15px
color: var(--widget-card-text-color)
height: 180px
width: 275px
slots:
default:
- component: f7-row
slots:
default:
- component: oh-icon
config:
color: var(--widget-card-text-color)
height: 35px
icon: "=props.itemPrefixIcon2row3left ? props.itemPrefixIcon2row3left :
'iconify:ic:outline-quickreply'"
style:
align-items: center
- component: oh-button
config:
action: popupClose
class:
- display-flex
- flex-direction-column
outline: true
popupClose: .presetsLED
round: true
style:
border-color: red
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 40px
width: 40px
slots:
default:
- component: Label
config:
style:
color: red
font-size: var(--widget-font-size-large)
text-shadow: var(--widget-text-shadow-strong)
text: X
- component: f7-row
config:
style:
margin: 15px 0px 0px 0px
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=props.itemPresetCommand1 ? props.itemPresetCommand1 : '1'"
actionItem: =props.ItemPopupP1
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: Label
config:
style:
color: "=items[props.ItemPopupP1].state === props.itemPresetCommand1 ?
'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
font-size: var(--widget-font-size-large)
text-shadow: var(--widget-text-shadow-strong)
text: "=props.itemPresetName1 ? props.itemPresetName1 : '1'"
- component: oh-button
config:
action: command
actionCommand: "=props.itemPresetCommand2 ? props.itemPresetCommand2 : '2'"
actionItem: =(props.ItemPopupP1)
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: Label
config:
style:
color: "=items[props.ItemPopupP1].state === props.itemPresetCommand2 ?
'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
font-size: var(--widget-font-size-large)
text-shadow: var(--widget-text-shadow-strong)
text: "=props.itemPresetName2 ? props.itemPresetName2 : '2'"
- component: oh-button
config:
action: command
actionCommand: "=props.itemPresetCommand3 ? props.itemPresetCommand3 : '3'"
actionItem: =(props.ItemPopupP1)
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: Label
config:
style:
color: "=items[props.ItemPopupP1].state === props.itemPresetCommand3 ?
'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
font-size: var(--widget-font-size-large)
text-shadow: var(--widget-text-shadow-strong)
text: "=props.itemPresetName3 ? props.itemPresetName3 : '3'"
- component: oh-button
config:
action: command
actionCommand: "=props.itemPresetCommand4 ? props.itemPresetCommand4 : '4'"
actionItem: =(props.ItemPopupP1)
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: Label
config:
style:
color: "=items[props.ItemPopupP1].state === props.itemPresetCommand4 ?
'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
font-size: var(--widget-font-size-large)
text-shadow: var(--widget-text-shadow-strong)
text: "=props.itemPresetName4 ? props.itemPresetName4 : '4'"
- component: f7-row
config:
style:
margin: 5px 0px 0px 0px
slots:
default:
- component: oh-button
config:
action: command
actionCommand: "=props.itemPresetCommand5 ? props.itemPresetCommand5 : '5'"
actionItem: =(props.ItemPopupP1)
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: Label
config:
style:
color: "=items[props.ItemPopupP1].state === props.itemPresetCommand5 ?
'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
font-size: var(--widget-font-size-large)
text-shadow: var(--widget-text-shadow-strong)
text: "=props.itemPresetName5 ? props.itemPresetName5 : '5'"
- component: oh-button
config:
action: command
actionCommand: "=props.itemPresetCommand6 ? props.itemPresetCommand6 : '6'"
actionItem: =(props.ItemPopupP1)
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: Label
config:
style:
color: "=items[props.ItemPopupP1].state === props.itemPresetCommand6 ?
'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
font-size: var(--widget-font-size-large)
text-shadow: var(--widget-text-shadow-strong)
text: "=props.itemPresetName6 ? props.itemPresetName6 : '6'"
- component: oh-button
config:
action: command
actionCommand: "=props.itemPresetCommand7 ? props.itemPresetCommand7 : '7'"
actionItem: =(props.ItemPopupP1)
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: Label
config:
style:
color: "=items[props.ItemPopupP1].state === props.itemPresetCommand7 ?
'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
font-size: var(--widget-font-size-large)
text-shadow: var(--widget-text-shadow-strong)
text: "=props.itemPresetName7 ? props.itemPresetName7 : '7'"
- component: oh-button
config:
action: command
actionCommand: "=props.itemPresetCommand8 ? props.itemPresetCommand8 : '8'"
actionItem: =(props.ItemPopupP1)
class:
- display-flex
- flex-direction-column
outline: true
round: true
style:
border-color: var(--widget-card-text-color)
border-width: 2px
box-shadow: var(--widget-text-shadow-strong)
height: 45px
width: 45px
slots:
default:
- component: Label
config:
style:
color: "=items[props.ItemPopupP1].state === props.itemPresetCommand8 ?
'var(--widget-card-text-ONcolor)' :
'var(--widget-card-text-color)'"
font-size: var(--widget-font-size-large)
text-shadow: var(--widget-text-shadow-strong)
text: "=props.itemPresetName8 ? props.itemPresetName8 : '8'"
- component: f7-row
config:
style:
align-items: center
display: flex
height: 45px
justify-content: center
margin: 5px 0px 0px 0px
slots:
default:
- component: oh-slider
config:
item: =props.ItemShd
max: 100
min: 0
releaseOnly: true
sendFrequency: 400
step: 5
style:
--f7-range-bar-active-bg-color: var(--widget-card-text-ONcolor)
--f7-range-bar-bg-color: var(--widget-card-text-color)
--f7-range-bar-border-radius: 10px
--f7-range-bar-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5)
--f7-range-bar-size: 8px
--f7-range-knob-box-shadow: var(--widget-text-shadow-strong)
--f7-range-knob-color: var(--widget-card-text-color)
--f7-range-knob-size: 25px
background: transparent
justify-content: center
width: 90%
