Milor
(Milor)
1
This code:
square: false
columns: 2
type: grid
cards:
- type: entity
entity: binary_sensor.connectivity_4
state_color: true
- type: entity
entity: binary_sensor.home_assistant_website_update_available
state_color: true
- type: entity
entity: sensor.hacs
state_color: true
name: Hacs
- type: entity
entity: sensor.potential_breaking_changes
state_color: true
name: Breaking Changes
- type: entity
entity: binary_sensor.remote_ui
state_color: true
- type: entities
entities: []
Show:
How would it be done to see it:
I have tried several cards and I did not find the way… so I kept the most similar, any suggestions? some mistake?
pedolsky
(Pedolsky)
2
WallyR
(Wally)
3
I have this setup for my take on a climate card. It might be using the card-mod from Thomas Loven, which can be installed trough HACS.
type: custom:vertical-stack-in-card
cards:
- type: markdown
content: '# Bedroom'
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 16px;
border: none;
margin: 0;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: markdown
content: >-
<ha-icon icon="mdi:thermometer"></ha-icon> Current {{
state_attr('climate.bedroomthermometer','current_temperature') }} ºC
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 16px;
border: none;
margin: 0;
}
- type: markdown
content: >-
<ha-icon icon="mdi:thermometer"></ha-icon> Target {{
state_attr('climate.bedroomthermometer','temperature') }} ºC
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 0;
border: none;
margin: 0;
}
- type: entities
entities:
- type: custom:slider-entity-row
entity: input_number.bedroom_set_temperature
full_row: true
hide_state: true
min: 5
max: 27
step: 0.5
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 0;
border: none;
margin: 0;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:button-card
icon: mdi:calendar-sync
entity: climate.bedroomthermostat
show_name: false
color: var(--primary-text-color)
state:
- value: auto
color: green
- value: heat
color: var(--primary-text-color)
- value: 'off'
color: var(--primary-text-color)
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: climate.bedroomthermostat
hvac_mode: auto
- type: custom:button-card
icon: mdi:hand-back-right
entity: climate.bedroomthermostat
show_name: false
color: var(--primary-text-color)
state:
- value: auto
color: var(--primary-text-color)
- value: heat
color: green
- value: 'off'
color: var(--primary-text-color)
tap_action:
action: call-service
service: climate.set_hvac_mode
service_data:
entity_id: climate.bedroomthermostat
hvac_mode: heat
- type: custom:button-card
icon: mdi:briefcase
entity: switch.bedroomvacation
show_name: false
color: var(--primary-text-color)
state:
- value: 'on'
color: orange
- value: 'off'
color: var(--primary-text-color)
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.bedroomvacation
- type: custom:button-card
styles:
grid:
- position: relative
custom_fields:
notification:
- position: absolute
- left: 47px
- top: 41px
- height: 25px
- width: 25px
- font-size: 12px
- color: red
custom_fields:
notification: |
[[[
if (states['climate.bedroomthermostat'].attributes.preset_mode == 'boost')
return (states['counter.bedroom_boost_timer'].state)
]]]
state:
- value: 'on'
color: red
icon: mdi:radiator
- value: 'off'
color: var(--primary-text-color)
icon: mdi:radiator
tap_action:
action: call-service
service: script.bedroom_boost_toogle
entity: sensor.bedroom_thermostat_boost
show_name: false
show_icon: true
show_state: false
- type: conditional
conditions:
- entity: switch.bedroomvacation
state: 'on'
card:
type: entities
entities:
- input_datetime.bedroom_vacation_date
- type: custom:stack-in-card
mode: horizontal
cards:
- type: markdown
content: >
{% if (state_attr('climate.bedroomthermostat','valve') != 4) %}
<font color='red'>
{% endif %} <center> <ha-icon icon="mdi:valve"></ha-icon> {{
((state_attr('climate.bedroomthermostat','level'))*100)|round }} %
<center> {% if (state_attr('climate.bedroomthermostat','valve') != 4)
%}
</font>
{% endif %}
- type: markdown
content: >
<center> <ha-icon icon="mdi:water-percent"></ha-icon>{{
state_attr('climate.bedroomthermometer','current_humidity') }} %
</center>
- type: markdown
content: >
<center> {% if (state_attr('climate.bedroomthermometer', 'battery') ==
'High') %}
<ha-icon icon="mdi:thermometer"></ha-icon><font color="green"><ha-icon icon="mdi:battery-high"></ha-icon></font>
{% elif (state_attr('climate.bedroomthermometer', 'battery') == 'Low')
%}
<ha-icon icon="mdi:thermometer"></ha-icon><font color="yellow"><ha-icon icon="mdi:battery-low"></ha-icon></font>
{% elif (state_attr('climate.bedroomthermometer', 'battery') ==
'Critical') %}
<ha-icon icon="mdi:thermometer"></ha-icon><font color="red"><ha-icon icon="mdi:battery-outline"></ha-icon></font>
{% else %}
<ha-icon icon="mdi:thermometer"></ha-icon><font color="orange"><ha-icon icon="mdi:battery-unknown"></ha-icon></font>
{% endif %} </center>
- type: markdown
content: >
<center> {% if (state_attr('climate.bedroomthermostat', 'battery') ==
'High') %}
<ha-icon icon="mdi:thermostat"></ha-icon><font color="green"><ha-icon icon="mdi:battery-high"></ha-icon></font>
{% elif (state_attr('climate.bedroomthermostat', 'battery') == 'Low')
%}
<ha-icon icon="mdi:thermostat"></ha-icon><font color="yellow"><ha-icon icon="mdi:battery-low"></ha-icon></font>
{% elif (state_attr('climate.bedroomthermostat', 'battery') ==
'Critical') %}
<ha-icon icon="mdi:thermostat"></ha-icon><font color="red"><ha-icon icon="mdi:battery-outline"></ha-icon></font>
{% else %}
<ha-icon icon="mdi:thermostat"></ha-icon><font color="orange"><ha-icon icon="mdi:battery-unknown"></ha-icon></font>
{% endif %} </center>
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 56px 30px
cards:
- type: markdown
content: |-
<center> {% if is_state('binary_sensor.bedroom_sensor_1', 'on') %}
<font color="red"><ha-icon icon="mdi:window-open-variant"></ha-icon></font>
{% elif is_state('binary_sensor.bedroom_sensor_1', 'off') %}
<font color="green"><ha-icon icon="mdi:window-closed-variant"></ha-icon></font>
{% else %}
<font color="yellow"><ha-icon icon="mdi:sync"></ha-icon></font>
{% endif %} </center>
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 26px;
border: none;
margin: 0;
}
- type: markdown
content: >-
<center> {% if (state_attr('binary_sensor.bedroom_sensor_1',
'battery') == 'High') %}
<font color="green"><ha-icon icon="mdi:battery-high"></ha-icon></font>
{% elif (state_attr('binary_sensor.bedroom_sensor_1', 'battery')
== 'Low') %}
<font color="yellow"><ha-icon icon="mdi:battery-low"></ha-icon></font>
{% elif (state_attr('binary_sensor.bedroom_sensor_1', 'battery')
== 'Critical') %}
<font color="red"><ha-icon icon="mdi:battery-outline"></ha-icon></font>
{% else %}
<font color="yellow"><ha-icon icon="mdi:battery-unknown"></ha-icon></font>
{% endif %} </center>
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 0;
border: none;
margin: 0;
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 56px 30px
cards:
- type: markdown
content: |-
<center> {% if is_state('binary_sensor.bedroom_sensor_2', 'on') %}
<font color="red"><ha-icon icon="mdi:window-open-variant"></ha-icon></font>
{% elif is_state('binary_sensor.bedroom_sensor_2', 'off') %}
<font color="green"><ha-icon icon="mdi:window-closed-variant"></ha-icon></font>
{% else %}
<font color="yellow"><ha-icon icon="mdi:sync"></ha-icon></font>
{% endif %} </center>
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 26px;
border: none;
margin: 0;
}
- type: markdown
content: >-
<center> {% if (state_attr('binary_sensor.bedroom_sensor_2',
'battery') == 'High') %}
<font color="green"><ha-icon icon="mdi:battery-high"></ha-icon></font>
{% elif (state_attr('binary_sensor.bedroom_sensor_2', 'battery')
== 'Low') %}
<font color="yellow"><ha-icon icon="mdi:battery-low"></ha-icon></font>
{% elif (state_attr('binary_sensor.bedroom_sensor_2', 'battery')
== 'Critical') %}
<font color="red"><ha-icon icon="mdi:battery-outline"></ha-icon></font>
{% else %}
<font color="yellow"><ha-icon icon="mdi:battery-unknown"></ha-icon></font>
{% endif %} </center>
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 0;
border: none;
margin: 0;
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 56px 30px
cards:
- type: markdown
content: |-
<center> {% if is_state('binary_sensor.bedroom_sensor_3', 'on') %}
<font color="red"><ha-icon icon="mdi:window-open-variant"></ha-icon></font>
{% elif is_state('binary_sensor.bedroom_sensor_3', 'off') %}
<font color="green"><ha-icon icon="mdi:window-closed-variant"></ha-icon></font>
{% else %}
<font color="yellow"><ha-icon icon="mdi:sync"></ha-icon></font>
{% endif %} </center>
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 26px;
border: none;
margin: 0;
}
- type: markdown
content: >-
<center> {% if (state_attr('binary_sensor.bedroom_sensor_3',
'battery') == 'High') %}
<font color="green"><ha-icon icon="mdi:battery-high"></ha-icon></font>
{% elif (state_attr('binary_sensor.bedroom_sensor_3', 'battery')
== 'Low') %}
<font color="yellow"><ha-icon icon="mdi:battery-low"></ha-icon></font>
{% elif (state_attr('binary_sensor.bedroom_sensor_3', 'battery')
== 'Critical') %}
<font color="red"><ha-icon icon="mdi:battery-outline"></ha-icon></font>
{% else %}
<font color="yellow"><ha-icon icon="mdi:battery-unknown"></ha-icon></font>
{% endif %} </center>
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 0;
border: none;
margin: 0;
}
- type: custom:layout-card
layout_type: grid
layout:
grid-template-columns: 56px 30px
cards:
- type: markdown
content: |-
<center> {% if is_state('binary_sensor.bedroom_sensor_4', 'on') %}
<font color="red"><ha-icon icon="mdi:window-open-variant"></ha-icon></font>
{% elif is_state('binary_sensor.bedroom_sensor_4', 'off') %}
<font color="green"><ha-icon icon="mdi:window-closed-variant"></ha-icon></font>
{% else %}
<font color="yellow"><ha-icon icon="mdi:sync"></ha-icon></font>
{% endif %} </center>
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 26px;
border: none;
margin: 0;
}
- type: markdown
content: >-
<center> {% if (state_attr('binary_sensor.bedroom_sensor_4',
'battery') == 'High') %}
<font color="green"><ha-icon icon="mdi:battery-high"></ha-icon></font>
{% elif (state_attr('binary_sensor.bedroom_sensor_4', 'battery')
== 'Low') %}
<font color="yellow"><ha-icon icon="mdi:battery-low"></ha-icon></font>
{% elif (state_attr('binary_sensor.bedroom_sensor_4', 'battery')
== 'Critical') %}
<font color="red"><ha-icon icon="mdi:battery-outline"></ha-icon></font>
{% else %}
<font color="yellow"><ha-icon icon="mdi:battery-unknown"></ha-icon></font>
{% endif %} </center>
style: |
ha-card {
box-shadow: none;
border: none;
margin: 0;
}
ha-markdown.no-header {
box-shadow: none;
padding: 0 0 0 0;
border: none;
margin: 0;
}
JeromeO
(Jérôme Oudoul)
4
I went with GitHub - ofekashery/vertical-stack-in-card: 📐 Home Assistant Card: Similar to vertical/horizontal-stack, but removes card borders to obtain this layout for my vacuum :
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-vacuum-card
entity: vacuum.vacuum
fill_container: false
icon_animation: true
commands:
- start_pause
- return_home
tap_action:
action: navigate
navigation_path: /lovelace/vacuum
layout: horizontal
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Kitchen
icon: mdi:robot-vacuum
icon_color: |
{% if is_state('vacuum.vacuum', 'cleaning') %}
orange
{% else %}
blue
{% endif %}
secondary: ''
entity: script.vacuum_kitchen_with_zone
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: rotation 8s linear infinite;' if is_state('vacuum.vacuum', 'cleaning') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
- type: custom:mushroom-template-card
primary: Kitchen + entry
icon: mdi:robot-vacuum
icon_color: |
{% if is_state('vacuum.vacuum', 'cleaning') %}
orange
{% else %}
blue
{% endif %}
secondary: ''
entity: script.vacuum_kitchen_and_entryway_with_zone
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: rotation 8s linear infinite;' if is_state('vacuum.vacuum', 'cleaning') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
1 Like