Hello,
I share with you my light popup inspired by this design.
Integration browser_mod and custom_card light-entity-card needed
I just have a small bug with the stick on brightness slider that is not updated when value change. Just close and reopen the popup to update. Seems to be a bug with browser-mod.
To use it, define a tap_action :
tap_action:
action: fire-dom-event
browser_mod:
command: popup
title: Fermer
hide_header: true
card:
type: custom:button-card
template: popup_light
variables:
entity: "[[[ return variables.entity ]]]"
Popup code :
header_popup:
template: action_button
show_name: true
show_label: true
styles:
grid:
- grid-template-areas: '"i" "n" "l"'
- grid-template-columns: auto
- grid-template-rows: min-content min-content min-content
label:
- justify-self: center
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
card:
- padding-bottom: 30px
popup_4_items:
styles:
grid:
- grid-template-areas: '"item1" "item2" "item3" "item4"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content min-content min-content
card:
- background: none
- box-shadow: none
- padding: 4%
list_2_buttons:
styles:
card:
- box-shadow: none
- padding: 0px
- background: none
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
action_button:
color: var(--primary-color)
show_icon: true
show_name: true
styles:
grid:
- grid-template-areas: '"i" "n"'
- grid-template-columns: auto
- grid-template-rows: min-content min-content
card:
- background: none
- box-shadow: none
icon:
- color: var(--primary-color)
img_cell:
- background-color: var(--card-background-color)
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
- box-shadow: var(--ha-card-box-shadow)
name:
- justify-self: center
- font-weight: bold
- font-size: 14px
- margin-top: 12px
power_button:
template: action_button
styles:
icon:
- color: var(--card-background-color)
img_cell:
- background-color: var(--primary-color)
- box-shadow: none
back_button:
template: action_button
icon: "mdi:arrow-left"
name: Retour
styles:
img_cell:
- box-shadow: none
tap_action:
action: fire-dom-event
browser_mod:
command: close_popup
popup_light:
template: popup_4_items
custom_fields:
item1:
card:
type: custom:button-card
template: header_popup
icon: mdi:lightbulb
name: Lumière
show_label: none
styles:
icon:
- color: var(--color-theme)
item2:
card:
type: custom:state-switch
entity: hash
default: color
transition: flip
transition_time: 300
states:
brightness:
type: custom:button-card
styles:
grid:
- grid-template-areas: '"item1"'
- grid-template-columns: 1fr
- grid-template-rows: min-content
card:
- background: none
- box-shadow: none
- padding: 4%
custom_fields:
item2:
- background-color: blue
- border-radius: 12px
- position: absolute
- left: 64%
- top: >
[[[
var bri = states[variables.entity].attributes.brightness;
return Math.round(bri ? (80-(72*bri/256)) : '80') + '%';
]]]
- height: 25px
- width: 45px
- font-size: 11px
- line-height: 25px
- color: white
custom_fields:
item1:
card:
type: "custom:slider-card"
entity: "[[[ return variables.entity ]]]"
radius: 20px
rotate: 270
containerHeight: 320px
width: 250px
height: 100px
top: 100px
left: 17%
thumbHorizontalPadding: 0px
thumbWidth: 0px
mainSliderColor: rgba(var(--color-theme),0.1)
mainSliderColorOff: rgba(var(--color-theme),0.1)
secondarySliderColor: var(--color-theme)
secondarySliderColorOff: var(--color-theme)
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
}
.off {
border: 1px solid rgba(var(--color-theme),0.3) !important;
}
.on {
border: 1px solid rgba(var(--color-theme),0.3) !important;
}
item2: >
[[[
var bri = states[variables.entity].attributes.brightness;
return Math.round(bri ? (bri/256*100) : '0') + '%';
]]]
#####
color:
type: custom:light-entity-card
entity: "[[[ return variables.entity ]]]"
persist_features: true
brightness: false
color_temp: false
white_value: false
hide_header: true
effects_list: false
card_mod:
style:
".control":
$: |
#interactionLayer{ z-index: 1; filter: opacity(0.6);}
#backgroundLayer{
filter: blur(20px);
}
.: |
ha-card {
background: none !important;
box-shadow: none !important;
padding: 10px 0 10px 0 !important;
}
item3:
card:
type: custom:button-card
template: list_2_buttons
styles:
card:
- padding-top: 30px
custom_fields:
item1:
card:
icon: "mdi:lightbulb-on"
name: Luminosité
type: "custom:button-card"
template: action_button
tap_action:
action: navigate
navigation_path: "#brightness"
state:
- operator: template
value: >
[[[ return new URL(window.location.href).hash !== '#color' ]]]
styles:
icon:
- color: "rgba(var(--color-blue),1)"
img_cell:
- background-color: "rgba(var(--color-blue), 0.2)"
item2:
card:
icon: "mdi:palette"
name: Couleur
type: "custom:button-card"
template: action_button
tap_action:
action: navigate
navigation_path: "#color"
state:
- operator: template
value: >
[[[ return new URL(window.location.href).hash === '#color' ]]]
styles:
icon:
- color: "rgba(var(--color-blue),1)"
img_cell:
- background-color: "rgba(var(--color-blue), 0.2)"
item4:
card:
type: custom:button-card
template: list_3_buttons
styles:
card:
- padding-top: 30px
custom_fields:
item1:
card:
type: "custom:button-card"
template: back_button
item2:
card:
icon: "mdi:power"
name: >
[[[
if (states[variables.entity].state == 'on') return 'Allumé';
else return 'Eteindre';
]]]
type: "custom:button-card"
template: power_button
entity: "[[[ return variables.entity ]]]"
tap_action:
action: toggle