Andras
May 25, 2022, 2:43pm
2173
Or you can try this one, this doesn’t require to list your lights (dynamic):
{% set lights = states.light
| selectattr('state', 'eq', 'on')
| rejectattr('domain', 'eq', 'group')
| map(attribute='state') %}
{{ lights | list | count }}
Proche72
(Jiri Pragr)
May 25, 2022, 4:01pm
2174
this work perfectly! I did not try the other two ways as I want it dynamic. Thanks Andras
1 Like
matti1207
(Matti1207)
May 25, 2022, 5:19pm
2175
hi benm7,
nice work
the header looks nice, can u share some codes of it?
thx
1 Like
Nice layout! Would you please share the code of this two include yaml pages?
/config/dashboards/template/popup_layout_template.yaml
/config/dashboards/template/popup_layout_setup.yaml
Thank you for all your hard work.
benm7
(Ben M)
May 26, 2022, 3:08am
2177
Figured this out, missing grid:
Here is the button for anyone interested, also have set it up to conditionally change the header colours based on the state of the system.
Disarmed:
Armed:
Template:
---
custom_alarm:
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:
type: custom:button-card
template:
- "icon_info"
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
tap_action:
action: more-info
label: '[[[ return states[variables.ulm_custom_alarm_grid_state].state ]]]'
styles:
card:
- background-color: 'rgba(0,0,0,0)'
state:
- value: 'disarmed'
label: 'Disarmed'
icon: "mdi:shield-off"
styles:
icon:
- color: 'rgba(var(--color-green), 1)'
img_cell:
- background-color: 'rgba(var(--color-green-bg), 1.0)'
- value: 'armed_away'
label: 'Armed'
icon: "mdi:shield-lock"
styles:
icon:
- color: 'rgba(var(--color-red), 1)'
img_cell:
- background-color: 'rgba(var(--color-red-bg), 1.0)'
- value: 'armed_home'
label: 'Home'
icon: "mdi:shield-home"
styles:
icon:
- color: 'rgba(var(--color-green), 1)'
img_cell:
- background-color: 'rgba(var(--color-green-bg), 1.0)'
item2:
card:
type: custom:button-card
template: custom_alarm_state_grid_item_list
custom_fields:
disarm:
card:
type: custom:button-card
icon: mdi:shield-off
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'disarmed'
icon: "mdi:shield-off"
styles:
icon:
- color: 'var(--google-green)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: 'var(--border-radius-bar)'
tap_action:
action: call-service
service: alarm_control_panel.alarm_disarm
service_data:
entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
haptic: success
away:
card:
type: custom:button-card
icon: mdi:shield-lock
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_away'
icon: "mdi:shield-lock"
styles:
icon:
- color: 'var(--google-red)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '14px'
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_away
service_data:
entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
haptic: success
home:
card:
type: custom:button-card
icon: mdi:shield-home
template: custom_alarm_state_grid_job_state_item_list_items
entity: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
state:
- value: 'armed_home'
icon: "mdi:shield-home"
styles:
icon:
- color: 'var(--google-green)'
card:
- background-color: 'rgba(0,0,0,0)'
- border-radius: '14px'
tap_action:
action: call-service
service: alarm_control_panel.alarm_arm_home
service_data:
entity_id: '[[[ return variables.ulm_custom_alarm_grid_state ]]]'
haptic: success
custom_alarm_state_grid_item_list:
styles:
card:
- box-shadow: none
- padding: 0px
- border-radius: 'var(--border-radius-bar)'
- pointer-events: none
- background-color: 'rgba(var(--color-theme), 0.05)'
- justify-items: center
grid:
- grid-template-areas: "'disarm away home'"
- grid-template-columns: "1fr 1fr 1fr"
- grid-template-rows: "min-content"
- column-gap: 9px
- justify-items: center
img_cell:
- justify-items: center
custom_alarm_state_grid_job_state_item_list_items:
show_icon: true
show_name: false
size: 24px
tap_action:
action: none
styles:
card:
- box-shadow: none
- padding: 2px
- border-radius: 'var(--border-radius)'
- place-self: center
- height: 40px
- width: 80px
- pointer-events: auto
- background-color: transparent
grid:
- grid-template-areas: '"i"'
icon:
- color: var(--google-grey)
10 Likes
benm7
(Ben M)
May 26, 2022, 3:13am
2178
Sure thing, here you go!
template:
card_room_wide:
template:
- "ulm_language_variables"
variables:
label_use_temperature: true
label_use_brightness: false
icon_color: green
color: "var(--google-grey-500)"
show_icon: true
show_name: true
show_label: true
size: "45%"
aspect_ratio: "2/1"
label: |-
[[[
if (variables.label_use_temperature) {
return '<ha-icon icon="mdi:thermometer" style="width: 16px; height: 18px; color:var(--main-theme);"></ha-icon>' + (entity.attributes.current_temperature || entity.attributes.temperature || entity.state || '-') + (entity.attributes.unit_of_measurement || '°C');
} else if (variables.label_use_brightness) {
if (entity.state){
if (entity.state == "off"){
return variables.ulm_off;
} else if (entity.state == "on"){
if (entity.attributes.brightness != null){
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : "0") + "%";
} else {
return variables.ulm_on
}
}
} else {
return variables.ulm_unavailable;
}
} else if (entity.state == "on") {
return variables.ulm_on
} else if (entity.state == "off") {
return variables.ulm_off
} else {
return ""
}
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: "50%"
- border: "2px solid var(--card-background-color)"
- width: "24.5px"
- height: "24.5px"
- position: "absolute"
- left: "50%"
- top: "50%"
- transform: "translate(-50%,-50%)"
- margin-top: "35%"
- margin-left: "-35%"
- line-height: 0
- display: "grid"
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
value: "unavailable"
styles:
card:
- border-radius: "var(--border-radius-bar)"
- box-shadow: "var(--box-shadow)"
- padding: "5px"
# return 'url('+ variables.room_card_image_path +')'
- background-image: >
[[[
return 'url('+ variables.room_card_image_path +')'
]]]
- background-position: "center"
- background-repeat: "no-repeat"
- background-size: "cover"
grid:
- grid-template-areas: "'i n n n n n' 'i l l l l l' '. i5 i4 i3 i2 i1'"
- grid-template-columns: "1fr 1fr 1fr 1fr 1fr 1fr"
- grid-template-rows: "1fr 1fr 1fr"
- justify-items: "center"
icon:
- color: "[[[ return 'rgba(var(--color-' + variables.icon_color + '),1)'; ]]]"
img_cell:
- background-color: "[[[ return 'rgba(var(--color-' + variables.icon_color + '-bg),1)'; ]]]"
- border-radius: "50%"
- width: "56px"
- height: "56px"
- max-width: "none"
- max-height: "none"
- position: "absolute"
- left: "3%"
- top: "6%"
# - transform: "translate(-50%,-50%)"
# - margin-top: "25%"
# - margin-left: "-25%"
name:
- justify-self: "start"
- align-self: "end"
- font-weight: "bold"
- font-size: "18px"
- margin-left: "22px"
- margin-top: "20px"
- margin-bottom: "24px"
- color: "[[[ return 'rgba(var(--color-' + variables.icon_color + '),1)'; ]]]"
label:
- justify-self: "start"
- align-self: "start"
- font-weight: "bold"
- font-size: "16px"
# - filter: "opacity(40%)"
- margin-left: "18px"
- margin-top: "-8%"
- color: "[[[ return 'rgba(var(--color-' + variables.icon_color + '-bg),1)'; ]]]"
state:
- justify-self: "start"
- font-weight: "bold"
- font-size: "12px"
- filter: "opacity(40%)"
- margin-left: "6px"
custom_fields:
i1:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i2:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i3:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i4:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
i5:
- border-radius: "50%"
- width: "80%"
- height: "80%"
- line-height: 0
- display: "grid"
custom_fields:
notification: >
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 50%; height: 50%; color: var(--primary-background-color);"></ha-icon>`
}
]]]
i1:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_1?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_1.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_1; ]]]"
entity: >
[[[
if (variables.entity_1.entity_id) {
return variables.entity_1.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_1; ]]]"
styles:
card:
- display: "none"
i2:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_2?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_2.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_2; ]]]"
entity: >
[[[
if (variables?.entity_2?.entity_id) {
return variables.entity_2.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_2; ]]]"
styles:
card:
- display: "none"
i3:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_3?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_3.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_3; ]]]"
entity: >
[[[
if (variables?.entity_3?.entity_id) {
return variables.entity_3.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_3; ]]]"
styles:
card:
- display: "none"
i4:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_4?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_4.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_4; ]]]"
entity: >
[[[
if (variables?.entity_4?.entity_id) {
return variables.entity_4.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_4; ]]]"
styles:
card:
- display: "none"
i5:
card:
type: "custom:button-card"
template: >
[[[
var templates = ['widget_icon_room'];
if (variables?.entity_5?.templates?.length) {
return ['widget_icon_room'].concat(variables.entity_5.templates);
}
return templates;
]]]
variables: "[[[ return variables.entity_5; ]]]"
entity: >
[[[
if (variables?.entity_5?.entity_id) {
return variables.entity_5.entity_id;
}
]]]
state:
- operator: "template"
value: "[[[ return !variables.entity_5; ]]]"
styles:
card:
- display: "none"
widget_icon_room:
variables:
tap_action:
action: "toggle"
hold_action:
action: "none"
tap_action:
action: >
[[[ if (variables?.tap_action?.action) return variables.tap_action.action; else return 'none'; ]]]
entity: "[[[ return variables.tap_action.entity; ]]]"
navigation_path: "[[[ return variables.tap_action.navigation_path; ]]]"
url_path: "[[[ return variables.tap_action.url_path; ]]]"
service: "[[[ return variables.tap_action.service; ]]]"
service_data: "[[[ return variables.tap_action.service_data; ]]]"
hold_action:
action: >
[[[ if (variables?.hold_action?.action) return variables.hold_action.action; else return 'none'; ]]]
entity: "[[[ return variables.hold_action.entity; ]]]"
navigation_path: "[[[ return variables.hold_action.navigation_path; ]]]"
url_path: "[[[ return variables.hold_action.url_path; ]]]"
service: "[[[ return variables.hold_action.service; ]]]"
service_data: "[[[ return variables.hold_action.service_data; ]]]"
show_icon: true
show_name: false
styles:
grid:
- grid-template-areas: "'i'"
card:
- height: "100%"
- box-shadow: "none"
- padding: "0px"
- border-radius: "50%"
icon:
- width: "50%"
- height: "50%"
- line-height: "0"
- color: "rgba(var(--color-theme),0.2)"
img_cell:
- border-radius: "50%"
- background-color: "rgba(var(--color-theme),0.05)"
size: "15px"
color: "var(--google-grey)"
Button example:
- type: 'custom:button-card'
template:
- card_room_wide
name: Outdoors
entity: sensor.dark_sky_temperature
icon: mdi:tree
tap_action:
action: navigate
navigation_path: '/ui-lovelace-minimalist/outdoors'
variables:
label_use_temperature: true
label_use_brightness: false
icon_color: green
room_card_image_path: '/local/outdoors.jpeg'
entity_1:
entity_id: light.front_lights
templates:
- yellow_on
tap_action:
action: toggle
haptic: success
entity_2:
entity_id: media_player.outdoor_sonos
templates:
- blue_playing
tap_action:
action: more-info
entity_3:
entity_id: switch.pool_pump
templates:
- blue_on
tap_action:
action: toggle
haptic: success
entity_4:
entity_id: switch.vege_patch_zone
templates:
- green_on
tap_action:
action: toggle
haptic: success
Note I use my own theme colours for the solid pale backgrounds of the buttons. Will try and upload my theme tonight to git.
4 Likes
benm7
(Ben M)
May 26, 2022, 3:15am
2179
Will do, need to get it up on Github and cant access on the work VPN so will do later tonight
Neekster
(Nathan K)
May 26, 2022, 6:23pm
2180
I use the Vertical Button Card for my input buttons.
Example:
- type: 'custom:button-card'
template: card_vertical_button
entity: input_button.myinputbutton
name: Some Amazing Name
show_last_changed: true
Gilganik
(Nik)
May 26, 2022, 7:50pm
2181
Sure,
popup_layout_template.yaml:
grid-template-columns: repeat(3, 1fr)
grid-template-areas: |
"column1 column2 column3"
mediaquery:
"(max-width: 600px)": #phone
grid-template-columns: auto
grid-template-areas: |
"column1"
"column2"
"column3"
popup_layout_setup.yaml:
.: |
:host .content {
width: calc(385px + 385px + 385px);
max-width: 100vw;
backdrop-filter: blur(30px);
background-color: var(--primary-background-color)
}
liminal
(Shane)
May 27, 2022, 12:12am
2182
Thanks mate!
I worked it out in the end, it was about default actions for some entity types. Got it fixed in the end
basbrus
(Bas)
May 27, 2022, 9:46am
2183
It’s been a long time, but here is finally a new release packed with a lot of features
Changes
Features
Code enhancements
Bug Fixes
Translations
Documentation
Thank you so much for helping out to keep this UI awesome
@13robin37 , @Eltarius , @EverythingSmartHome , @Gilganik , @MichaelBrunn3r , @Neekster , @Wesleyl89 , @aomann , @basbruss , @desty2k , @finder39 , @jordandrako , @oscfdezdz , @ulug79 , @viseradius , @wranglatang , @yagrasdemonde and pw521312
7 Likes
Edwin_D
(Edwin D.)
May 27, 2022, 1:02pm
2184
Hi, thanks for your hard work. One question though, could you please try to list breaking changes as well? Most likely because a lot of my cards are custom ones, but ALL of them ro longer render due to missing base templates:
basbrus
(Bas)
May 27, 2022, 1:05pm
2185
There are no breaking changes. This is most likely the effect of storing custom_cards
in the wrong directory. See the instructions and the warning here: Configuration - UI Lovelace Minimalist
Also try resetting your browsers’ cache with CTRL + F5 to load in all the templates.
Edwin_D
(Edwin D.)
May 27, 2022, 1:28pm
2186
That is where they are, and flushing the front end cache was the first I tried. Reverting to the previous release did not fix it (strange, because I’m sure that was the version I was on). Reverting to the one below that did fix it. Will look into it when I got time, but something is different between these releases.
Looks way better for now:
3 Likes
RaA11
May 27, 2022, 1:44pm
2187
Hi,
The popups card not working for me
I have tried to clear the browser cache, reinstall browser_mod
and reinstall minimalist.
with no sucsess
- type: "custom:button-card"
template: card_thermostat
entity: climate.bedroom_ac
variables:
ulm_card_thermostat_enable_collapse: true
ulm_card_thermostat_enable_controls: true
ulm_card_thermostat_enable_hvac_modes: true
ulm_card_thermostat_enable_popup: true
ulm_card_thermostat_enable_display_temperature: true
- type: "custom:button-card"
entity: light.wled_light_4
template: card_light_slider_collapse
variables:
ulm_card_light_slider_collapse_name:
ulm_card_light_enable_slider: true
ulm_card_light_enable_color: true
ulm_card_light_force_background_color: true
ulm_card_light_enable_popup: true
basbrus
(Bas)
May 27, 2022, 1:59pm
2188
@Edwin_D Glad you could revert to get your custom_cards back.
All changes in the latest releases and the ones before are optional, additional, or completely new cards. They should not interfere with existing setups. My personal and dev-setup were not affected.
@RaA11 card_light_slider_collapse
is deprecated and does not work with the variables you assign to it Rather use card_light
instead.
RaA11
May 27, 2022, 2:11pm
2189
@basbrus thank you for your response
I have changed the temmplate to card_light - clearing the cache, restart HA and still no popup…
hello very nice dashboard & I have a question about your pollen card I think it’s very nice could you share it & your card from the cover also very nice thanks in advance!
liminal
(Shane)
May 27, 2022, 2:41pm
2191
basbrus:
@13robin37 , @Eltarius , @EverythingSmartHome , @Gilganik , @MichaelBrunn3r , @Neekster , @Wesleyl89 , @aomann , @basbruss , @desty2k , @finder39 , @jordandrako , @oscfdezdz , @ulug79 , @viseradius , @wranglatang , @yagrasdemonde and pw521312
Thanks guys! and the other devs as well, without you we would still have… vanilla HA
2 Likes
Edwin_D
(Edwin D.)
May 27, 2022, 3:11pm
2192
The pollen card is based on data I get from Tado, based on a variation of this post:
There are very many pollen threads on the community but I couldn’t find a decent one providing pollen count for the UK. Tado introduced an air quality report some time ago and a quick poke around their web app revealed the API calls to get the data.
Simple authenticated rest call to get the JSON plus some template sensors to get the air quality for today plus pollen levels for today, tomorrow and the after. They also provide pollution levels in the json response but would be easy enough to add …
I converted the values for today, tomorrow and the day after to values ranging 0-100. For the popup I use the original one with textual states, but you yould also put the percentage one there:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_pollen
entity: sensor.air_pollen_level_grass
variables:
ulm_card_pollen_entity: sensor.air_pollen_value_grass
ulm_card_pollen_tomorrow_entity: sensor.air_pollen_value_grass_tomorrow
ulm_card_pollen_d_a_tomorrow_entity: sensor.air_pollen_value_grass_d_a_tomorrow
- type: "custom:button-card"
template: card_pollen
entity: sensor.air_pollen_level_weed
variables:
ulm_card_pollen_entity: sensor.air_pollen_value_weed
ulm_card_pollen_tomorrow_entity: sensor.air_pollen_value_weed_tomorrow
ulm_card_pollen_d_a_tomorrow_entity: sensor.air_pollen_value_weed_d_a_tomorrow
- type: "custom:button-card"
template: card_pollen
entity: sensor.air_pollen_level_tree
variables:
ulm_card_pollen_entity: sensor.air_pollen_value_tree
ulm_card_pollen_tomorrow_entity: sensor.air_pollen_value_tree_tomorrow
ulm_card_pollen_d_a_tomorrow_entity: sensor.air_pollen_value_tree_d_a_tomorrow
card_pollen:
show_icon: false
show_entity: false
show_label: false
show_name: false
triggers_update: "all"
styles:
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "0px"
grid:
- grid-template-areas: "'item1 item2'"
- grid-template-columns: "min-content auto"
- grid-template-rows: "1fr"
custom_fields:
item1:
card:
entity: "[[[ return entity == null ? variables.ulm_card_pollen_entity : entity.entity_id ]]]"
show_label: false
template:
- "icon_only"
styles:
icon:
- color: "rgba(var(--color-theme),0.9)"
card:
- box-shadow: none
- padding: "0 12px"
type: "custom:button-card"
item2:
card:
type: "custom:button-card"
template: "list_3_items"
styles:
card:
- border-radius: "14px"
- padding: "12px 12px 12px 0"
grid:
- column-gap: "0px"
custom_fields:
item1:
card:
type: "custom:bar-card"
direction: "up"
height: "44px"
positions:
name: off
value: off
icon: off
indicator: off
minmax: off
severity:
- color: "#28950088"
from: 0
to: 20
- color: "#f7d90088"
from: 20
to: 40
- color: "#f89a0088"
from: 40
to: 60
- color: "#ff990088"
from: 60
to: 80
- color: "#d81700aa"
from: 80
to: 100
entities:
- entity: "[[[ return variables.ulm_card_pollen_entity == null ? entity.entity_id : variables.ulm_card_pollen_entity ]]]"
name: "-"
style: |
bar-card-background{
margin: 0px 0 0px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 7px 0 0 7px;
border-radius: 0 7px 7px 0;
box-shadow: none;
}
#states{
padding: 0;
}
item2:
card:
type: "custom:bar-card"
direction: "up"
height: "44px"
positions:
name: off
value: off
icon: off
indicator: off
minmax: off
severity:
- color: "#28950088"
from: -1
to: 20
- color: "#f7d90088"
from: 20
to: 40
- color: "#f89a0088"
from: 40
to: 60
- color: "#ff990088"
from: 60
to: 80
- color: "#d81700aa"
from: 80
to: 101
entities:
- entity: "[[[ return variables.ulm_card_pollen_tomorrow_entity ]]]"
style: |
bar-card-background{
margin: 0px 0 0px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 0;
border-radius: 0;
box-shadow: none;
}
#states{
padding: 0;
}
item3:
card:
type: "custom:bar-card"
direction: "up"
height: "44px"
positions:
name: off
value: off
icon: off
indicator: off
minmax: off
severity:
- color: "#28950088"
from: 0
to: 20
- color: "#f7d90088"
from: 20
to: 40
- color: "#f89a0088"
from: 40
to: 60
- color: "#ff990088"
from: 60
to: 80
- color: "#d81700aa"
from: 80
to: 100
entities:
- entity: "[[[ return variables.ulm_card_pollen_d_a_tomorrow_entity ]]]"
style: |
bar-card-background{
margin: 0px 0 0px 0 !important;
text-align: initial;
}
ha-card{
--bar-card-border-radius: 0 7px 7px 0;
border-radius: 0 7px 7px 0;
box-shadow: none;
}
#states{
padding: 0;
}
3 Likes