ui-lovelace-minimalist / ui Goto Github PK
View Code? Open in Web Editor NEWUI-Lovelace-Minimalist is a "theme" for HomeAssistant
Home Page: https://ui-lovelace-minimalist.github.io/UI/
License: Other
UI-Lovelace-Minimalist is a "theme" for HomeAssistant
Home Page: https://ui-lovelace-minimalist.github.io/UI/
License: Other
Recommend adding the following to every card. No reason not to and adds simple protection for critical devices.
If the variable is included in the card, the confirmation text is displayed. If the variable is not included, the card operates normally.
Card
variables:
custom_card_mwolter_power_outlet_confirm_text: Toggle the eGPU power?
Template
tap_action:
action: toggle
confirmation: '[[[ return variables.custom_card_mwolter_power_outlet_confirm_text == null ? false : {"text": variables.custom_card_mwolter_power_outlet_confirm_text} ]]]'
hold_action:
action: more-info
Unfortunately the card has found it's way (again) to the repo but needs to be reviewed.
There still are some errors and missing variables, especially with the news part (custom_card_paddy_welcome_with_news).
Hi,
There is a typo with variable names in templates "card_light_slider_collapse" and "card_light_slider_horizontal"
card_light_slider_collapse:
variables:
ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
(...)
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]" <==== Should be ulm_card_light_slider_collapse_name
card_light_slider_horizontal:
variables:
ulm_card_light_slider_horizontal_name: "[[[ return entity.attributes.friendly_name ]]]"
(...)
custom_fields:
item1:
card:
type: 'custom:button-card'
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]" <==== Should be ulm_card_light_slider_horizontal_name
Looks like the battery card isn't working. When defined, it gives undefined% as state.
Don't know what exactly is wrong, but I think the template tries to get the battery attribute from the battery sensor, but the state of the sensor is the battery percentage it self.
Through the generic card it works fine.
I have the problem that with media player cards neither the icon, nor the label and the status are readable when the media player is on but no cover art is available while on light theme:
Here we should probably change something about the color selection or representation in general?
I would also suggest treating media players that are in idle or pause mode similar to media players that are off. Or at least we should rethink the representation here as well.
For example, Sonos speakers are always in idle mode when nothing is playing. So for most of the day they are treated in the UI like media players that are on but idle. But from the user perspective however, they are turned off.
The seperate page FAQ.md needs to be written. Anybody any ideas or suggestions, what we should use for this? Maybe someone could check the HA thread to see if there are some obvious questions that come up more than once?
Hi, i have a problem with variables in button card.
So, i want to take the temperature of climate entity (passed with variables) and increase by 0.5 degrees.
This is for button minus and plus in a thermostat card.
But, i receive this error: undefined is not an object (evaluating variables.entity.attributes.temperature)
This is my code:
card:
type: "custom:button-card"
template: widget_icon
tap_action:
action: call-service
service: climate.set_temperature
service_data:
temperature: " [[[ return (variables.entity.attributes.temperature + 0.5) ]]]"
entity_id: "[[[ return variables.entity ]]]"
icon: "mdi:plus"
And, In the same page, this code from @Tpx01 works great:
widget_temperature:
tap_action:
action: toggle
color: var(--google-grey-500)
show_icon: false
show_name: false
show_label: true
size: 20px
label: |-
[[[
var temperature = entity.attributes.temperature;
if (temperature == null) {
var temperature = '-';
}
return temperature + '°C'
]]]
styles:
label:
- color: "rgb(var(--color-theme),0.9)"
grid:
- grid-template-areas: '"l"'
card:
- box-shadow: none
- padding: 0px
- background-color: "rgba(var(--couleur-theme),0)"
- border-radius: 14px
- place-self: center
- height: 42px
I'm currently using input selects to bring up options for different rooms. But because my CSS is crap, it looks like a dogs breakfast.
Can I request this? Or is there already a template that would work and I've missed it?
Thanks so much and awesome work :)
Since you are already using card-mod. You can add padding around the whole page with card-mod-view-yaml
card-mod-theme: minimalist-mobile
card-mod-root: |
app-toolbar {
display: none;
}
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
That way you don't need to add
- type: custom:button-card
template: edge
Around every card
Describe the bug
Using triggers_update on card template with variables not work.
To Reproduce
Steps to reproduce the behavior:
Using a variable and try to refresh, the card not show the new value using template.
To work, I need to set triggers_update at the top level of configuration like this :
Others card on Minimalist not work also.
It seems to confuse people when some variable is mandatory. We should therefore make some specifications optional. An example of this is the ulm_chip_presence_counter_guests
specification for the chip_presence_detection
template:
https://community.home-assistant.io/t/lovelace-ui-minimalist/322687/658?u=cm000n
I was using the color-background-*
colors as a variable in my custom templates, but in the light mode all colors are set to white:
color-background-yellow : 250, 250, 250
color-background-blue : 250, 250, 250
color-background-green : 250, 250, 250
color-background-red : 250, 250, 250
When changing it to the same as in the dark mode, cards that use icon_info_bg
are displayed wrong:
This is because the opacity-bg
is set to 1, as soon as you set this to 0.1 (same as in the dark theme) everything is ok.
I dont know if this intended or not, i changed it on my environment and all other buttons are still looking smooth.
This relates to both themes:
Hi,
Can you add support for cover without "current_position" attributes ?
Here is the modified code :
cover:
tap_action:
action: more-info
icon: |
[[[
var icon = 'mdi:help-circle';
if (typeof states[entity.entity_id].attributes.current_position === 'undefined'){
if (states[entity.entity_id].state == 'closed'){
var icon = 'mdi:window-shutter';
} else
var icon = 'mdi:window-shutter-open';
} else {
if (states[entity.entity_id].attributes.current_position == 0){
var icon = 'mdi:window-shutter';
} else
var icon = 'mdi:window-shutter-open';
}
return icon ;
]]]
label: >-
[[[
var icon = 'mdi:help-circle';
if (typeof states[entity.entity_id].attributes.current_position === 'undefined'){
if (states[entity.entity_id].state == 'closed'){
return variables.ulm_closed;
} else
return variables.ulm_open;
} else {
if (states[entity.entity_id].attributes.current_position == 0){
return variables.ulm_closed;
} else {
return variables.ulm_open + ' • ' + (states[entity.entity_id].attributes.current_position) + '%' ;
}
}
return icon ;
]]]
state:
- operator: template
value: "[[[ return states[entity.entity_id].attributes.current_position != 0; ]]]"
styles:
icon:
- color: "rgba(var(--color-blue),1)"
img_cell:
- background-color: "rgba(var(--color-blue),0.2)"
on the graph card, you call the template "icon_info" which doesn't exist. I believe it should be "icon_info_bg" but i didn't spend a lot of time figuring out which icon_info_* template it's meant to use
Hi,
Default icon is missing on card_media_player while it is present on card_media_player_with_control.
card_media_player:
template:
- icon_info_bg
- ulm_language_variables
icon: |
[[[
var icon = 'mdi:speaker'; <==== ADDED
if(entity.attributes.app_name){
var app = entity.attributes.app_name.toLowerCase();
if(app == 'spotify'){
var icon = 'mdi:spotify';
} else if(app == 'google podcasts'){
var icon = 'mdi:google-podcast';
} else if(app == 'plex'){
var icon = 'mdi:plex';
} else if(app == 'soundcloud'){
var icon = 'mdi:soundcloud';
} else if(app == 'youtube music'){
var icon = 'mdi:youtube';
} else if (app == 'oto music'){
var icon = 'mdi:music-circle';
}
}
return icon;
]]]
As per suggestion from @KaherdinTristan, a different light_slider could/should find the way into the repo.
And while at this: remove the conditional card and make a selection possible for with or without conditional.
In button_card_templates.yaml, on line 195 and 213, templates "vertical_buttons_blue" and "vertical_buttons_green" are defined.
The state template value contains the following:
value: "[[[ return states['input_select.localisation_thomas'].state == variables.state ]]]"
As using the template doesn't work, it does when modifying this line to:
value: "[[[ return entity.state == variables.state ]]]"
Afterwards, the button card template seems to work as expected.
I think this needs to be adjusted for the next release, as it will be overwritten each time this theme is updated without changing this part.
Hi,
Could be interesting to add unit_of_measurement (if available) to chip_icon_state and chip_icon_double_state.
chip_icon_state:
template: chips
triggers_update:
- "[[[ variables.ulm_chip_icon_state_entity ]]]"
label: |
[[[
var icon = '❔';
if (variables.ulm_chip_icon_state_icon){
var icon = variables.ulm_chip_icon_state_icon;
}
var state = '';
if (states[variables.ulm_chip_icon_state_entity].state){
var state = states[variables.ulm_chip_icon_state_entity].state;
if (states[variables.ulm_chip_icon_state_entity].attributes.unit_of_measurement){ <= ADDED
state += states[variables.ulm_chip_icon_state_entity].attributes.unit_of_measurement; <= ADDED
} <= ADDED
}
return icon + ' ' + state;
]]]
chip_icon_double_state:
template: chips
triggers_update:
- "[[[ variables.ulm_chip_icon_double_state_entity_1 ]]]"
- "[[[ variables.ulm_chip_icon_double_state_entity_2 ]]]"
label: |
[[[
var icon = '❔';
if (variables.ulm_chip_icon_double_state_icon){
var icon = variables.ulm_chip_icon_double_state_icon;
}
var state1 = '';
if (states[variables.ulm_chip_icon_double_state_entity_1].state){
var state1 = states[variables.ulm_chip_icon_double_state_entity_1].state;
if (states[variables.ulm_chip_icon_double_state_entity_1].attributes.unit_of_measurement){ <= ADDED
state1 += states[variables.ulm_chip_icon_double_state_entity_1].attributes.unit_of_measurement; <= ADDED
} <= ADDED
}
var state2 = '';
if (states[variables.ulm_chip_icon_double_state_entity_2].state){
var state2 = states[variables.ulm_chip_icon_double_state_entity_2].state;
if (states[variables.ulm_chip_icon_double_state_entity_2].attributes.unit_of_measurement){ <= ADDED
state2 += states[variables.ulm_chip_icon_double_state_entity_2].attributes.unit_of_measurement; <= ADDED
} <= ADDED
}
return icon + ' ' + state1 + ' • ' + state2;
]]]
Hi,
i noticed here https://community.home-assistant.io/t/lovelace-ui-minimalist/322687 that you use a thermostat card. But i can not find it in the documentation. The custom card template custom_card_thermostat ist not working probertly. How did you realize this template card for controlling climate entities?
Add a template that mirrors the old behaviour for Scenes (now vertical-buttons)
Hey,
Is it possible to create a tap action just for the icon of the light card?
It would be nice if i tap on the icon the details pages opens and if i tap on the card it toggles the light.
Do you know if it is possible?
Thanks in advance!
I'm using chips for view navigation too, maybe add a second template for tap action?
- type: 'custom:button-card'
template:
- chip_icon_only
- chip_navigation
variables:
ulm_chip_icon_only: 'mdi:car'
ulm_chip_navigation_path: car
Template
chip_navigation:
tap_action:
action: navigate
navigation_path: "[[[ return variables.ulm_chip_navigation_path; ]]]"
I noticed earlier this day that the more-info
tap_action
on card_person
is not working.
With a tap on the person card nothing happens at all
Maybe I'll manage to take a closer look soon and fix it myself.
But I thought I'll record it here in any case, in case someone should be faster than me ;-)
Hi,
I'm currently on vacation so I couldn't make a pull request. But I wanted to mention, that there is a typo in media_player_with_controls, which results in the card not loading.
entity_id: '[[[ return entity.ulm_card_media_player_with_controls_entity ]]]' should be
entity_id: '[[[ return variables.ulm_card_media_player_with_controls_entity ]]]'
I noticed that the app-toolbar
on the minimailist-mobile theme is still showing even if it should be hidden with card-mod-root styling:
card-mod-theme: mobile
card-mod-root: |
app-toolbar {
display: none;
}
I fixed this with writing the complete name of the them (first line of yaml file) in card-mod-theme:
card-mod-theme: minimalist-mobile
card-mod-root: |
app-toolbar {
display: none;
}
Dont know if this is a issue that only i have.
I have made an Figma with almost all the components this way you can make pictures for on the wiki
https://www.figma.com/file/dOQKR8DCP2mvH7zesjU8L6/UI-Lovelace-Minimalist?node-id=0%3A1
Added the following variables to eliminate the background on item1 for the cards below. Might be a better way to do it but this worked.
card_light_slider:
variables:
ulm_card_light_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
variables: <===== ADDED
slider_background_color: 'rgba(0,0,0,0)' <===== ADDED
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
item2:
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
card_light_slider_collapse:
variables:
ulm_card_light_slider_collapse_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
grid:
- row-gap: 12px
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
variables: <===== ADDED
slider_background_color: 'rgba(0,0,0,0)' <===== ADDED
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
state:
- styles:
card:
- background: transparent
value: 'on'
item2:
card:
type: conditional
conditions:
- entity: "[[[ return entity.entity_id ]]]"
state: 'on'
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
card_light_slider_horizontal:
variables:
ulm_card_light_slider_horizontal_name: "[[[ return entity.attributes.friendly_name ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: 'rgba(var(--color-background-yellow),var(--opacity-bg))'
styles:
grid:
- grid-template-areas: '"item1 item2"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: 'custom:button-card'
variables: <===== ADDED
slider_background_color: 'rgba(0,0,0,0)' <===== ADDED
template:
- icon_info
- light
entity: "[[[ return entity.entity_id ]]]"
name: "[[[ return variables.ulm_card_light_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) 0px 0px
- padding: 0px
item2:
card:
type: 'custom:my-slider'
entity: '[[[ return entity.entity_id ]]]'
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: '0px'
thumbVerticalPadding: '0px'
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
yellow:
variables: <===== ADDED
slider_background_color: 'rgba(var(--color-background-yellow),var(--opacity-bg))' <===== ADDED
state:
- styles:
icon:
- color: 'rgba(var(--color-yellow),1)'
label:
- color: 'rgba(var(--color-yellow-text),1)'
name:
- color: 'rgba(var(--color-yellow-text),1)'
img_cell:
- background-color: 'rgba(var(--color-yellow), 0.2)'
card:
- background-color: '[[[ return variables.slider_background_color ]]]' <===== ADDED
value: 'on'
Currently the custom_card_saxel_fan by @saxel works only for traditional fans (which is fine), however Air Purifiers like the Xiaomi ones work with the fan integration for the most part as well.
In my opinion the current button which triggers call-service fan.osciallate should switch between fan modes Off and Auto for purifiers. Should I set up a new custom card or integrate something within the existing card?
Is it possible to give a emoji to a Navigation Chip? For now, only a MDI will work.
When giving a card the Navigation Template and the Icon Only template, it shows the Emoji, but the margin is off.
- type: 'custom:button-card'
template:
- chip_icon_only
- chip_navigate
variables:
ulm_chip_navigate_path: verlichting
ulm_chip_icon_only: '💡'
This is what it looks like.
Hi,
Currency is not displayed on chip_power_consumption becuase language template is missing.
chip_power_consumption:
template:
- chips
- ulm_language_variables <= missing template
All cards that need triggers_update
need to be set to "all", as javascript templates aren't valid there.
I was trying to create a conditional chip so that, when a sensor has a certain state (ex. there is 1 light or more on) its show the chip, but when there are no lights on, it should hide it. Also, when the chip is showing, it should also show how many lights there are on.
That works, kinda...
When the chip is showing, it gives as state 0. After a browser refresh, it updates to 1. Same goes for 1 to ex. 2 or from ex. 2 to 1.
When it goes from something to 0, it hide the chip, like it should.
So the only problem is that the state of the chip is not live updating.
I'm using the state-switch card.
- type: custom:state-switch
entity: sensor.lights_on
states:
lights on:
type: 'custom:button-card'
template: chip_icon_state
variables:
ulm_chip_icon_state_icon: '💡'
ulm_chip_icon_state_entity: sensor.current_lights_on
Hello, I configure minimalist like in instructions and choose minimalist in theme. I see 2 tabs with Welcome to UI-lovelace-minimalist
but cannot add any card. I don't see anything in logs.
Regards.
The templates that are used by TBens are now kind of thrown off. Rework these templates so TBens just have to move to the new installation (aka TBens should be able to use this repo for himself!)
I have a custom slider card based on the light slider. Is there a way to hide the slider item when the given entity state is off
?
card_slider_generic:
template:
- ulm_language_variables
variables:
ulm_card_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
icon: "[[[ return entity.attributes.icon ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- icon_info
- yellow_slider
entity: "[[[ return entity.entity_id ]]]"
tap_action:
action: toggle
label: >-
[[[
if (entity.state !='unavailable'){
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;
}
]]]
name: "[[[ return variables.ulm_card_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
- padding: 0px
item2:
card:
type: "custom:my-slider"
entity: "[[[ return entity.entity_id ]]]"
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: "0px"
thumbVerticalPadding: "0px"
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
These pictures are missing from README.md:
Taken from the task-list in the old repo, here.
Also there are some pics missing in custom-cards, we need to review this.
In the light theme, the chip (for some reason not the first 2) is cut off because of the box-shadow.
I'm using the icon only chip, but also tried it with the normal generic chip, but that makes no difference.
Dark mode is fine, because there is no box-shadow. Also if I set the box-shadow to none in the light theme, the cut off is also gone, so something is up with that shadow.
PS: This is my 3rd issue, sorry! I really like this theme, so far one of the best out there, so I want to make it even better :)
When Media Player Card entry has idle state card_media_player_with_control turns completely blank and the cards partly
yaml code:
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: edge
- type: "custom:button-card"
template: card_media_player
entity: media_player.living_room_speaker_1
name: Living room Speaker
- type: "custom:button-card"
template: edge
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: edge
- type: "custom:button-card"
template: card_media_player_with_control
entity: media_player.living_room_speaker_1
name: Living room Speaker
- type: "custom:button-card"
template: edge
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: edge
- type: "custom:button-card"
template:
- card_media_player_with_controls
variables:
ulm_card_media_player_with_controls_name: "Living room Speaker"
ulm_card_media_player_with_controls_entity: media_player.living_room_speaker_1
- type: "custom:button-card"
template: edge
Fresh install - getting this error checking the config:
Error loading /config/configuration.yaml: mapping values are not allowed here
in "/config/themes/minimalist-mobile/minimalist-mobile.yaml", line 146, column 65
When using the person card with custom zones defined, the card will crash with the following error if the person is in one of the custom zones:
ButtonCardJSTemplateError: TypeError: states[variables.ulm_card_person_zone1] is undefined in 'if (states[variables.ulm_card_person_entity].state != 'home'){ if (states[variables.ulm_card_p...'
Taking a peek at the code, it looks like this is because the custom zones defined (ulm_card_person_zone1, and ulm_card_person_zone2) need to be the friendly name of the zones to match the persons state, but then the zone entity is tried to look up with just the friendly name. Suggested fix would be to have the ulm_card_person_zone1 variables be defined as the actual zone, i.e. zone.work
, then tweak the icon lookup function to something like this: (beware, I'm not a js developer, so it might need some further tweaks)
if (states[variables.ulm_card_person_entity].state != 'home'){
if (states[variables.ulm_card_person_entity].state == states[variables.ulm_card_person_zone1].attributes.friendly_name){
var icon = states[variables.ulm_card_person_zone1].attributes.icon != null ? states[variables.ulm_card_person_zone1].attributes.icon : 'mdi:help-circle'
return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
} else if (states[variables.ulm_card_person_entity].state == states[variables.ulm_card_person_zone2].attributes.friendly_name){
var icon = states[variables.ulm_card_person_zone2].attributes.icon != null ? states[variables.ulm_card_person_zone2].attributes.icon : 'mdi:help-circle'
return '<ha-icon icon="' + icon + '" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
} else {
return '<ha-icon icon="mdi:home-minus" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
}
} else {
return '<ha-icon icon="mdi:home-variant" style="width: 10px; height: 10px; color: var(--primary-background-color);"></ha-icon>';
}
Is there a way to put some kind of placeholder into the horizontal stack, so that cards fill 50% of the available space?
Please have a look at the dashboard on the left, and the expected layout on the right. I'd like the "Biuro" slider to occupy only half of the row.
Before | After |
---|---|
![]() |
![]() |
button_card_templates: !include_dir_merge_named minimalist-templates/
views:
- title: Home
cards:
- type: vertical-stack
cards:
- type: custom:button-card
template: title
name: Music
- type: entities
entities:
- type: custom:mini-media-player
group: true
name: " "
hide:
icon: true
source: true
progress: true
controls: true
volume: true
speaker_group:
platform: media_player
show_group_count: false
expanded: false
entities:
- entity_id: media_player.kuchnia
name: Kitchen
- entity_id: media_player.lazienka
name: Bathroom
- entity_id: media_player.pokoj_dzienny
name: Living room
artwork: none
tts: false
info: scroll
volume_stateless: false
entity: media_player.kuchnia
show_header_toggle: false
- type: horizontal-stack
cards:
- type: custom:button-card
template: card_slider_generic
entity: media_player.kuchnia
variables:
ulm_card_slider_name: Kuchnia
- type: custom:button-card
template: card_slider_generic
entity: media_player.lazienka
variables:
ulm_card_slider_name: Łazienka
- type: horizontal-stack
cards:
- type: custom:button-card
template: card_slider_generic
entity: media_player.pokoj_dzienny
variables:
ulm_card_slider_name: Biuro
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: Nowy Świat
ulm_card_script_icon: "mdi:radio"
tap_action:
action: call-service
service: script.play_radio
service_data:
selected_preset: 1
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: Radio 357
ulm_card_script_icon: "mdi:radio"
tap_action:
action: call-service
service: script.play_radio
service_data:
selected_preset: 2
- type: "custom:button-card"
template: card_script
variables:
ulm_card_script_title: Spotify
ulm_card_script_icon: "mdi:spotify"
tap_action:
action: call-service
service: media_player.select_source
service_data:
entity_id: media_player.kuchnia
source: spotify
And card_slider_generic
is just the modified light slider card:
card_slider_generic:
template:
- ulm_language_variables
variables:
ulm_card_slider_name: "[[[ return entity.attributes.friendly_name ]]]"
icon: "[[[ return entity.attributes.icon ]]]"
show_icon: false
show_name: false
show_label: false
state:
- operator: template
value: "[[[ return entity.state == 'on' ]]]"
styles:
card:
- background-color: "rgba(var(--color-background-yellow),var(--opacity-bg))"
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 12px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
custom_fields:
item1:
card:
type: "custom:button-card"
template:
- icon_info
- yellow_slider
entity: "[[[ return entity.entity_id ]]]"
tap_action:
action: toggle
label: >-
[[[
if (entity.state !='unavailable'){
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;
}
]]]
name: "[[[ return variables.ulm_card_slider_name ]]]"
styles:
card:
- box-shadow: none
- border-radius: var(--border-radius) var(--border-radius) var(--border-radius) var(--border-radius)
- padding: 0px
item2:
card:
type: "custom:my-slider"
entity: "[[[ return entity.entity_id ]]]"
radius: 14px
height: 42px
mainSliderColor: rgba(var(--color-yellow),1)
secondarySliderColor: rgba(var(--color-yellow),0.2)
mainSliderColorOff: rgba(var(--color-theme),0.05)
secondarySliderColorOff: rgba(var(--color-theme),0.05)
thumbHorizontalPadding: "0px"
thumbVerticalPadding: "0px"
thumbWidth: 0px
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
Could someone please check these two cards?
Are both cards ok design wise? I'm a design-dislexic and I could use some input, if these are ok to publish.
Thanks!
I'm struggling on using icons with the chips_icon_only template.
I was trying to use emojis, turned out it only works with hass: or mdi: icons
- type: 'custom:button-card'
template: chip_icon_only
variables:
ulm_chip_icon_only: '❤️'
- type: 'custom:button-card'
template: chip_icon_only
variables:
ulm_chip_icon_only: 'mdi:car'
Maybe change or add another one that can handle emojis? Or do i miss something?
- type: 'custom:button-card'
template: chip_emoji_only
variables:
ulm_chip_icon_only: '❤️'
chip_emoji_only:
template: chips
variables:
icon: '❔'
show_icon: true
label: |
[[[ return variables.ulm_chip_icon_only ? variables.ulm_chip_icon_only : variables.icon ]]]
Could it be that the "Set opacity-bg to 0.1 in light themes" chanhe is applied to the wrong state condition?
Now for a card in an off condition it becomes white and in an on condition it becomes transparent.
I would expect it the otherway around?
Thanks!
Hi,
card_power_outlet is not working.
I think code should be :
card_power_outlet:
template:
- yellow
- icon_info_bg
- ulm_language_variables
label: |-
[[[
if ((entity.state =='on') && (variables.ulm_card_power_outlet_consumption_sensor != '')) {
return variables.ulm_on + ' • ' + states[variables.ulm_card_power_outlet_consumption_sensor].state + 'W';
} else {
return variables.ulm_off;
}
]]]
I think it could be a good idea to re-read the HA forum thread and see, what different things could be found to include into the repo.
Eg. tpx01 (I think) made a room_card with a nice background as a navigation card. Should this be implemented? I'd vote for to do so.
Hi,
I'm trying to create a custom chip with a mdi:icon and a label. But when set 'show_icon: true' it doesn't appear. I've tried changing the style (grid-template), but as I'm new to CSS, I can't figure out how to style it correctly.
Thank you :)
This styling fixes it:
styles: label: - justify-self: center - align-self: center - padding: 0px 6px - margin: 2px 0 0 0 - font-weight: bold - font-size: 14px img_cell: - width: 24px grid: - grid-template-areas: '"i l"' card: - border-radius: 18px - box-shadow: var(--box-shadow) - height: 36px - width: auto - padding-left: 6px - padding-right: 6px size: 80%
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.