Popup not refreshed even if I wait one minute.
I also think the problem is linked with browser-mod.
Hmmm, thatās unfortunate. Iām not using browser-mod myself, have it installed but never really got it, and want to uninstall it āfor agesāā¦
I just took a short look in the repo of browser-mod, there seems to be nothing āsticking outā in case of not updated entities.
On thinking further about it, does the real state for the brightness (checked in developer-tools) change? Or does this stay at 29% as well?
can you share your Fan Config? 
It changes. Everything works fine except the display that is not refreshed.
Absolutely!
But just know with the dark theme it still looks like the previous picture. I havenāt had time to dig into this yet. Lots to learn here 
The Natural mode triggers a switch button, but the oscillate is triggered directly with service calls. I guess going forward the oscillate might as well just trigger a switch button as well so it can be tied to a voice assistant.
ui-lovelace.yaml
- type: custom:button-card
entity: fan.xiaomi_smart_fan
variables:
entity: fan.xiaomi_smart_fan
name: Fan
switch_natural: switch.xiaomi_smart_fan_natural
template:
- fan_buttons
button_card_templates.yaml
fan_buttons:
show_icon: false
show_name: false
show_label: false
variables:
entity:
switch_natural:
name: 'Fan'
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
name: '[[[ return variables.name ]]]'
tap_action:
action: toggle
hold_action:
action: more-info
template:
- icon_info
- fan
type: 'custom:button-card'
item2:
card:
template: list_items_columns_4
type: 'custom:button-card'
custom_fields:
item1:
card:
entity: '[[[ return variables.entity ]]]'
icon: 'mdi:fan'
styles:
icon:
- transform: scale(0.625)
tap_action:
action: call-service
service: fan.decrease_speed
service_data:
entity_id: entity
percentage_step: 10
type: 'custom:button-card'
template: widget_icon
item2:
card:
icon: 'mdi:leaf'
entity: '[[[ return variables.entity ]]]'
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: '[[[ return variables.switch_natural ]]]'
type: 'custom:button-card'
template:
- >-
[[[
if (entity.attributes.mode === 'Nature') {
return 'blue';
} else {
return 'widget_icon';
}
]]]
- widget_icon
item3:
card:
icon: 'mdi:rotate-3d-variant'
entity: '[[[ return variables.entity ]]]'
tap_action:
action: call-service
service: fan.oscillate
service_data:
entity_id: entity
oscillating: >-
[[[ return !entity.attributes.oscillate ]]]
type: 'custom:button-card'
template:
- >-
[[[
if (entity.attributes.oscillate) {
return 'blue';
} else {
return 'widget_icon';
}
]]]
- widget_icon
item4:
card:
entity: '[[[ return variables.entity ]]]'
icon: 'mdi:fan'
tap_action:
action: call-service
service: fan.increase_speed
service_data:
entity_id: entity
percentage_step: 10
type: 'custom:button-card'
template: widget_icon
list_items_columns_4:
styles:
card:
- box-shadow: none
- padding: 0px
grid:
- grid-template-areas: '"item1 item2 item3 item4"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: min-content
- column-gap: 7px
4 Likes
I had the same last month: Discord
I had to stop working on it but the problem is related to light-popup-card for me (i use view and not popup).
Iām going to see how you did it but the operation of light-popup is seems different apart from a popup
I have to find the time to finish the map but I am running out of time
here a preview, itās a poc, so impossible to share it for the moment, but yours is almost identical so you will probably release it before me so to see if it is useful or not to continue 
Ouch ! gifmaker doesnāt like color pickerā¦ 
in summary, I would ask for help on the topic of browser-mod 
Ps:
I just remembered that I wanted to go on another card than light-popup because the problem seems to come from her :
2 Likes
Thank you Clemalex, maybe youāre right I should ask for help in browser-mod topic because I really want this to be a popup.
I still have a lot of work to do but your design is exactly what I was thinking. (I donāt know if I am able to create blur effect and animation to be honest 
)
Also you can continue to work on yours. Having 2 possibilities (popup and view) is always interesting for community.
All popups can be turn into a view (in panel mode)
Just ask
- type: custom:light-entity-card
card_mod:
style:
'#light-entity-card-light-salon_lampe_01':
$: |
#interactionLayer{ z-index: 1; filter: opacity(0.6);}
#backgroundLayer{
filter: blur(20px);
}
Itās a config of state-card
type: custom:state-switch
default: color-card
transition: flip #<-- activation
transition_time: 500 #<-- config
1 Like
Thank you !!! 
Sorry for this; how do I go about to make it possible for me to use this layout in Lovelace?
I have HACS, and button card installed. But thenā¦?
Then you would have to setup the button_card_templates.yaml file, the āthemesā and use the templates in your view. Thatās the short version. 
Wait a few days, there will be instructions available on how to install and use this āthemeā a little different but easier. This āthemeā is not something that was ādevelopedā for public use, it is the code @tben uses for his own installation and was kind enough to share his setup. Right now this is not something you should install or work with, if you donāt have a little deeper knowledge on how and why things happen here.
As I said, wait a few days. I know, thatās always lame, if someone say āwaitā, but in this case I strongly advise to do so.
3 Likes
Iāve been away from HA a while, but right now Iām all wild and crazy with these layouts. Im gonna gove it a try to implement this anyway =)
Whats is comming in a few days? Someone trying to get this into Hacz? =) =)
There are a few people working on re-writing this āthemeā, where re-write is not exactly correct. The thing is, right now, it is a very specific way to āinstallā and use this āthemeā. It is fitted like tailor-made clothes to the installation of @tben, eg. he is from France and therefor the custom text is partly in french.
He made this for his installation and so there are some things, that need to be adapted, if someone else is using it. In one card for example there is a sensor hardcoded into the template. If you donāt have that sensor (exactly that sensor), you will get errors.
And yes, one of the goals would be to bring this to the public by using HACS. But that is unfortunately not as easy as it looked, as this is, technically spoken, not a theme in the conventional way. There are themes involved, but they are only a small part. The main part are button-card-templates, and these are handled differently in your installation. Simply spoken, this āthemeā doesnāt fit into HACS, because itās neither a āthemeā, nor an āintegrationā in the HACS way of thinking. But Iām sure this will be possible sooner or later, but it is not the main task at the moment. The main task is to bring this into public and make it easily maintanable (and usable).
Right now the code is nearly ready and checked, but the documentation and examples unfortunately doesnāt write themself.
Btw. what is your current knowledge about HA and itās use? Are you more like an experienced user or are you a UI guy (not meant disrespectful!)?
6 Likes
@paddy0174 I hacked my way through TBens yaml files and created my own, but Iām looking forward to see what youāre putting together.
1 Like
Thanks for the explanation!
Regarding my level of knowledge and usage; Iām a happy enthusiast, been running HA supervised in docker for 10 months but now HA OS (Rpi4). Im also using WG on another RpiZ and pihole, for home usage.
Iām just as interested in the technical details as in the GUI. Iām not schooled in Linux but I can use terminal commands sufficiently.
I would love to play Devilās Advocate for your ReadMe/installation procedure (Iām kinda picky, so itās usually a productive process for the receiving endā¦)
Pm me if it sounds interesting
2 Likes
Hi all,
Iām trying to modify the thermostat card so that is shows Eco mode and turns the color to green when the thermostat is in eco mode. But Iām having a hard time with changing the color. I thing the issue is with the condition template.
thermostat:
hold_action:
action: more-info
entity: climate.woonkamer
label: >-
[[[
if (entity.state =='off')
{
return 'Off' ;
}
else
{
if (states['climate.woonkamer'].state == 'heat')
{
if (entity.attributes.preset_mode == 'eco')
{
var etat = "Eco";
}
else
{
var etat = "Verwarmen";
}
}
else
{
var etat = "Inactief";
}
return (entity.attributes.temperature ) + 'Ā°' + ' ā¢ ' + etat ;
}
]]]
state:
- operator: template
value: >
[[[
return states['climate.woonkamer'].state == 'heat'
]]]
styles:
icon:
- color: 'rgba(var(--color-red),1)'
img_cell:
- background-color: 'rgba(var(--color-red),0.2)'
card:
- background-color: 'rgba(var(--color-background-red),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-red-text),1)'
label:
- color: 'rgba(var(--color-red-text),1)'
- operator: template
value: >
[[[
return states['climate.woonkamer'].preset_mode == 'eco'
]]]
styles:
icon:
- color: 'rgba(var(--color-green),1)'
img_cell:
- background-color: 'rgba(var(--color-green),0.2)'
card:
- background-color: 'rgba(var(--color-background-green),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-green-text),1)'
label:
- color: 'rgba(var(--color-green-text),1)'
I think the problem is here but Iām not sure what to change it to.
- operator: template
value: >
[[[
return states['climate.woonkamer'].preset_mode == 'eco'
]]]
Any help?
This canāt be correct,
if this
works.
I assume, the states should be an attribute of a sensor, shouldnāt it? Then try this
states['climate.woonkamer'].attributes.preset_mode. Even better would be to simply use the entity, like this entity.attributes.preset_mode.
And while at it, change the hold_action to entity as well:
thermostat:
hold_action:
action: more-info
entity: "[[[ return entity.entity_id ]]]"
This assumes, that you provide an entity in your view for this entry, otherwise this will not work.
And I noticed, the indentation seems to be off. That may very well be a copy&paste error, but if not, that could be another issue.
1 Like
Thank you @paddy0174 !
I managed to get it working using your input. Here is the full code is anyone is interested:
thermostat:
hold_action:
action: more-info
entity: "[[[ return entity.entity_id ]]]"
label: >-
[[[
if (entity.state =='off')
{
return 'Off' ;
}
else
{
if (entity.state == 'heat')
{
if (entity.attributes.preset_mode == 'eco')
{
var etat = "Eco";
}
else
{
var etat = "Verwarmen";
}
}
else
{
var etat = "Inactief";
}
return (entity.attributes.temperature ) + 'Ā°' + ' ā¢ ' + etat ;
}
]]]
state:
- operator: template
value: >
[[[
return entity.state == 'heat' && entity.attributes.preset_mode == 'none'
]]]
styles:
icon:
- color: 'rgba(var(--color-red),1)'
img_cell:
- background-color: 'rgba(var(--color-red),0.2)'
card:
- background-color: 'rgba(var(--color-background-red),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-red-text),1)'
label:
- color: 'rgba(var(--color-red-text),1)'
- operator: template
value: >
[[[
return entity.state == 'heat' &&entity.attributes.preset_mode == 'eco'
]]]
styles:
icon:
- color: 'rgba(var(--color-green),1)'
img_cell:
- background-color: 'rgba(var(--color-green),0.2)'
card:
- background-color: 'rgba(var(--color-background-green),var(--opacity-bg))'
name:
- color: 'rgba(var(--color-green-text),1)'
label:
- color: 'rgba(var(--color-green-text),1)'
So a little teaser for you all!
The re-write of this great āthemeā is moving forward and seems to be getting to a point, where a first public beta version can be rolled out. Nothing fancy you think - you will be surprised! 
This is, what you can expect from the rollout:
- re-write of the āthemeā so updating and maintainance getās a lot easier
- new structure for the files
- possibilty to extend your installation by adding
custom-cards(modular, you install only what you need) - easily extend our code with yours without disturbing updates
- adding language specific strings (EN, DE and FR are already taken care of, other languages welcome)
- a quite comprehensive wiki at the new repository with
- installation guides
- an example page (this unfortunately is not ready yet, input is welcome!)
- guides to setup your first page, update, upgrade and more
- all things you donāt even want to know about the āthemeā
- developer corner to support the development of this āthemeā (eg.
custom_cards)
- CodeGenerators to ease the installation and usage in
UI-mode (thatās one funny thing) - a few new cards like eg. two modified light-sliders, a welcome card and much more
and some other things!
Stay tuned, if things work out well, we should be ready within a week for the first public beta. This will not be a stable release, but we are getting there!
PS: Thanks a lot to the beta-testers, your input is very much appreciated!
PPS: If youād like to see some specific things in this āthemeā, this is the time to tell us!
28 Likes