Wow!!! Willing to share your code?
Will share my hass-config via Github asap. I will make a new topic when finished 
. I will tag you in that topic. Thanks!
Thank you! I will try to test it.
I have two icons for my curtains. How can I make it change from one icon to the other when open or closed? I don’t need animation - just want it to change icon
I tried this in the switch.yaml but it gives me no icon at all:
- platform: template
switches:
rullegardin:
friendly_name: "Rullegardin"
value_template: '{{ is_state("cover.rullegardin", "open") }}'
turn_on:
- service: cover.open_cover
target:
entity_id: cover.rullegardin
turn_off:
- service: cover.close_cover
data:
entity_id: cover.rullegardin
icon_template: >-
{% if is_state('switch.rullegardin', 'on') %}
mdi:blinds-open
{% else %}
mdi:blinds
{% endif %}
In the lovelace it looks like this:
- type: custom:button-card
entity: switch.rullegardin #hue_group
name: Rullegardin
template:
- rullegardin
And the template looking like this:
rullegardin:
template:
- base
state_display: >
[[[ return variables.state === 'on' ? 'Åpen' : 'Lukket'; ]]]
icon: mdi:blinds-open
This is amazing!
Can I ask, how did you make the “tab” buttons across the top change to different screens?
Thank you!
Those are just navigation buttons ;-).
#################################################
#
# MAIN MENU
#
#################################################
type: 'custom:mod-card'
style: !include main_menu.styles.yaml
card:
type: 'horizontal-stack'
columns: 6
cards:
#################################################
# HOME
#################################################
- type: 'custom:button-card'
name: 'Home'
icon: 'mdi:home-assistant'
tap_action:
action: 'navigate'
navigation_path: '/hass-nolu/home'
template:
- main_menu_item
#################################################
# ROOMS
#################################################
....
At the moment I am working on a popup for my robomower.
Above the buttons at the bottom there is a line called “Pause für X Tag”. Which allows me to pause the mower for X days.
Below that, there are two buttons to increase or decrease this time. I am looking for a way to get both in one line. I dont need the slider. Only the text and the value.
Any ideas? I tried to pack it together with grid, but it doesnt look good.
action: fire-dom-event
browser_mod:
command: popup
title: Mähi
style:
hui-vertical-stack-card:
$hui-conditional-card>hui-grid-card$hui-horizontal-stack-card$: |
#root {
justify-content: space-evenly !important;
}
$hui-conditional-card>hui-grid-card$: |
hui-horizontal-stack-card {
padding: 0em 2em 0 2em !important;
height: 5.5em !important;
}
#root {
grid-gap: 0 !important;
}
card:
type: vertical-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: entities
entities:
- entity: sensor.maehroboter_status_lesbar
secondary_info: last-changed
icon: mdi:robot-mower
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: "%"
positions:
icon: outside
indicator: "off"
name: outside
severity:
- color: "#303435"
from: 11
to: 100
- color: "#6d2525"
from: 0
to: 10
entity_row: true
entities:
- entity: sensor.maehroboter_batterie
name: Batterie
- entity: sensor.maehroboter_messerqualitaet
name: Messerqualität
- entity: sensor.maehroboter_fehlernachricht
- entity: sensor.maehroboter_wetterstop
- entity: input_number.maehroboter_pause
name: Pause für X Tage
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: &horizontal2-style |
#root {
justify-content: flex-end;
margin: 1.7em -0.7em 0 0;
}
cards:
- type: custom:button-card
icon: mdi:plus
tap_action:
action: call-service
service: input_number.increment
target:
entity_id: input_number.maehroboter_pause
template: icon_name
- type: custom:button-card
icon: mdi:minus
tap_action:
action: call-service
service: input_number.decrement
target:
entity_id: input_number.maehroboter_pause
template: icon_name
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: &horizontal-style |
#root {
justify-content: space-evenly;
margin: 1.7em -0.7em 0 0;
}
cards:
- type: custom:button-card
icon: mdi:autorenew
name: Auto
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: auto
template: icon_name
- type: custom:button-card
icon: mdi:home
name: Home
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: home
template: icon_name
- type: custom:button-card
icon: mdi:clock-check-outline
name: Feierabend
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: eod
template: icon_name
Found a good way for me.
Need to work/learn more with custom:hui-element
action: fire-dom-event
browser_mod:
command: popup
title: Mähi
style:
hui-vertical-stack-card:
$hui-conditional-card>hui-grid-card$hui-horizontal-stack-card$: |
#root {
justify-content: space-evenly !important;
}
$hui-conditional-card>hui-grid-card$: |
hui-horizontal-stack-card {
padding: 0em 2em 0 2em !important;
height: 5.5em !important;
}
#root {
grid-gap: 0 !important;
}
card:
type: vertical-stack
cards:
- type: grid
columns: 1
square: false
cards:
- type: entities
entities:
- entity: sensor.maehroboter_status_lesbar
secondary_info: last-changed
icon: mdi:robot-mower
- type: custom:bar-card
width: 55%
height: 2em
decimal: 0
unit_of_measurement: "%"
positions:
icon: outside
indicator: "off"
name: outside
severity:
- color: "#303435"
from: 11
to: 100
- color: "#6d2525"
from: 0
to: 10
entity_row: true
entities:
- entity: sensor.maehroboter_batterie
name: Batterie
- entity: sensor.maehroboter_messerqualitaet
name: Messerqualität
- entity: sensor.maehroboter_fehlernachricht
name: Fehler
- entity: sensor.maehroboter_wetterstop
name: Wetterstop
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: &horizontal2-style |
#root {
justify-content: flex-end;
margin: 1.7em -0.7em 0 0;
}
cards:
- type: custom:hui-element
card_type: markdown
# content: Pause für {{ states('input_number.maehroboter_pause')| round(0) }} Tage
content: >
{% if states('input_number.maehroboter_pause')|int == 1 %}
Pause für einen Tag
{% elif states('input_number.maehroboter_pause')|int > 1 %}
Pause für {{ states('input_number.maehroboter_pause')| round(0) }} Tage
{% else %}
Keine Pause
{% endif %}
- type: custom:button-card
icon: mdi:plus
tap_action:
action: call-service
service: input_number.increment
service_data:
entity_id: input_number.maehroboter_pause
template: icon_name
- type: custom:button-card
icon: mdi:minus
tap_action:
action: call-service
service: input_number.decrement
service_data:
entity_id: input_number.maehroboter_pause
template: icon_name
- type: custom:hui-element
card_type: horizontal-stack
card_mod:
style: &horizontal-style |
#root {
justify-content: space-evenly;
margin: 1.7em -0.7em 0 0;
}
cards:
- type: custom:button-card
icon: mdi:autorenew
name: Auto
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: auto
template: icon_name
- type: custom:button-card
icon: mdi:home
name: Home
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: home
template: icon_name
- type: custom:button-card
icon: mdi:clock-check-outline
name: Feierabend
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.maehroboter
option: eod
template: icon_name
I have a strange problem when I am using some of the code.
my code for a light button is:
button_card_templates: !include ../button_card_templates_mattias.yaml
views:
- type: custom:grid-layout
path: 0
layout:
#default
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(4, 1fr) 0
grid-template-rows: 0 repeat(2, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . . ."
"sidebar vardagsrum studio sovrum ."
"sidebar media övrigt hemma ."
"sidebar footer footer footer ."
mediaquery:
#phone
"(max-width: 800px)":
grid-gap: calc(var(--custom-layout-card-padding) * 1.5)
grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr
grid-template-areas: |
". . . ."
". sidebar sidebar ."
". vardagsrum sovrum ."
". studio övrigt ."
". media hemma ."
". footer footer ."
". . . ."
#portrait
"(max-width: 1200px)":
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: repeat(3, 1fr) 0
grid-template-rows: 0 repeat(3, fit-content(100%)) 0fr
grid-template-areas: |
"sidebar . . ."
"sidebar vardagsrum sovrum ."
"sidebar studio övrigt ."
"sidebar media hemma ."
"sidebar footer footer ."
"sidebar . . ."
cards:
- type: grid
title: Vardagsrum
view_layout:
grid-area: vardagsrum
columns: 2
cards:
- type: custom:button-card
entity: light.bedroom
name: Bedroom
template:
- light
- icon_hue
When I use the theme ‘tablet’ as you are using, I don’t get the button, but with another theme, I can see the button
If I remove grid card and directly use custom button card like below, I can see the button with tablet theme.
Anybody has any guess where I am doing mistake?
Hi, your style is amazing… can i ask you weather’s card codes?
thanks in advance.
EDIT: Added an open and closed mode =D Thanks @pedolsky for the tip!
styles:
custom_fields:
icon:
- width: 70%
- stroke: >
[[[ return variables.state === 'closed' ? '#3181b7' : '#9da0a2'; ]]]
custom_fields:
icon: >
[[[ if (entity.state === 'open') return '<svg viewBox="0 0 50 50">
<path d="M10 3v44.5M2 1.8v46.5M48 1.8v46.5M1 3h48m-6 44h6m-5.5-11.5v12.7M40 46h3.5m1-43v17.5M40 3v44.5M5.5 3v17.5m1 15l-.2 12.7M10 46H6.5m.5 1H1" stroke-width="2.5"/> </svg> ' ;
else return '<svg viewBox="0 0 50 50"> <path d="M2 3v44M48 3v44M.8 2.5h48.4M38 47.5h11.2M34.5 35v12m.5-.5h3M43.5 2v18M25 3v44M7.5 2v18m9 15v12m-.5-.5h-3m0 1H.8M38.5 32v15m-26-15v15m3.5.5h19M19.5 8v18m12-18v18" stroke-width="2.5"/> </svg>'; ]]]
Could try the yamls from: GitHub - fastender/blob: The Blob - Documentation
Do it the same way as for state:
icon: >
[[[ return entity.state === 'on' ? 'mdi:blinds-open' : 'mdi:blinds'; ]]]
Did it =D
Not actually animated, but it has different icons for open and closed!
Thanks for the tip on how to accomplish it!
Anyone encountered strangeness with the TV icon ? - Mine seems to work randomly… most of the time when the TV is on the blue ‘screen’ effect on the icon doesn’t appear, or its there but at a twisted angle.
Other times it shows up OK and looks fine! 
