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
#################################################
....
Se7enair
July 27, 2021, 1:37pm
1474
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.
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
1 Like
tomerbs
July 27, 2021, 2:17pm
1475
Hi mrpharderwijk
Your configuration is looking great, can you share your code?
Thanks.
1 Like
Se7enair
July 28, 2021, 4:24pm
1480
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
1 Like
arifroni
July 29, 2021, 1:37pm
1481
I have a strange problem when I am using some of the code.
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.
Giblet
August 3, 2021, 5:07pm
1483
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>'; ]]]
Giblet
August 3, 2021, 5:15pm
1484
pedolsky
August 3, 2021, 5:41pm
1485
Do it the same way as for state:
icon: >
[[[ return entity.state === 'on' ? 'mdi:blinds-open' : 'mdi:blinds'; ]]]
Giblet
August 3, 2021, 6:37pm
1486
Did it =D
tpx01
August 5, 2021, 9:55pm
1487
I’ve noticed the margins act weird when trying to add additional rows/tiles to a room…
When adding no more than 2 rows of tiles I do not observe the issue…
Any idea what might be the culprit here? Maybe some padding/margin?
swifty
August 6, 2021, 12:45pm
1488
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!
Hi guys,
What am I doing wrong?
Cheers, Chris
MaxBec92
August 8, 2021, 11:04am
1490
Hey guys,
do you know how to update the hassio core via a button click on the lovelace interface?
All the best,
remy1010
August 8, 2021, 1:42pm
1491
Hello,
I really like this dashboard so I tried to copy all the files to recreate it for my own HA instance.
I can’t get it to work, things that are not working properly are:
layout is not right, for example the 3 icons at the buttom of the sidebar are at the top of the next column.
popups aren’t working
Overall there seems to be less margin between the tiles, so it can’t fit the same tiles on the screen as the screenshot.
I also noticed that the custom icons that are included are not showing up right to.
Some help yo get me started on this dashboard would be greatly appreciated!
remy1010
August 8, 2021, 1:45pm
1492
I had the same issue, seems that the used integration “layout-card” is changed.
- type: custom:layout-card
pedolsky
August 8, 2021, 3:53pm
1493
Do you mean the service call service: homeassistant.reload_core_config ?
