Hello everyone,
I would like to tap into your expertise once again.
Currently, I’m using the fantastic cards from Anashost (GitHub - Anashost/MY-HA-DASH). I’m absolutely loving this layout.
Recently, I got a new heating boiler, complete with a modern thermostat and thermostat knobs, which I seamlessly integrated into Home Assistant.
Now, I’d like to integrate thermostat control into various room cards in the form of an extra swipe card. I’ve been struggling a bit with this, unable to achieve the polished look that Anashost has accomplished. Coding and customization aren’t my strong suits.
If any of you have ideas on this and are willing to share, I’d greatly appreciate it.
Currently, I’m using the following room card, which I’ve adjusted to my liking based on Anashost’s example.
I’d like to add the energy card on the right as an extra swipe card to the room card, but I’m struggling with the formatting. Maybe you have some other cool ideas to tweak the card to fit nicely with the room card.
Here is the YAML code of the room card:
type: custom:swipe-card
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
{% if is_state('light.group_livingroom_lights','on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
mode: vertical
keep:
outer_padding: false
cards:
- type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: |
@keyframes ping {
0% { box-shadow: 0 0 1px 1px rgba(var(--rgb-{{ config.icon_color }}), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
mushroom-shape-icon {
--icon-size: 76px;
display: flex;
margin: -20px 0px 0px -20px !important;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
}
primary: Woonkamer
icon: mdi:sofa
layout: horizontal
entity: light.group_livingroom_lights
icon_color: |-
{% if is_state('light.group_livingroom_lights','on')%}
amber
{%endif%}
tap_action:
action: navigate
navigation_path: lights
hold_action:
action: toggle
double_tap_action:
action: none
badge_color: ''
badge_icon: ''
fill_container: true
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: none
state:
- operator: default
color: grey
- value: 'on'
color: orange
icon: mdi:lightbulb-group
entity: light.group_livingroom_lights
styles:
icon:
- width: 19px
grid:
- position: relative
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 50%
- top: 3%
- height: 20px
- width: 20px
- font-size: 10px
- line-height: 20px
- font-weight: bold
card:
- border-radius: 50%
- width: 40px
- height: 40px
custom_fields:
notification: |
[[[
if (states['sensor.livingroom_lights_of_count'].state == '0')
return ' '
return `${states['sensor.livingroom_lights_of_count'].state}`
]]]
name: ' '
- type: custom:button-card
state:
- value: 'on'
icon: mdi:thermometer
entity: sensor.device2_actual_temperature
styles:
icon:
- color: |
[[[
return `${states['sensor.livingroom_temp_color'].state}`
]]]
- width: 15px
- position: relative
- top: 4px
- right: 12px
card:
- border-radius: 80%
- width: 40px
- height: 40px
name:
- color: null
- font-size: 10px
- position: relative
- bottom: 10px
- left: 5px
- font-weight: bold
name: |
[[[
if (states['sensor.device2_actual_temperature'].state == 'unknown')
return '-'
return `${states['sensor.device2_actual_temperature'].state}°`
]]]
- type: custom:button-card
state:
- operator: default
color: yellow
- value: 'off'
color: grey
- value: 'on'
color: rgb(255, 71, 26)
styles:
card:
- border-radius: 50%
icon: mdi:motion-sensor
tap_action:
action: more-info
entity: binary_sensor.bewegings_sensor_woonkamer_occupancy
styles:
icon:
- width: 18px
card:
- width: 40px
- height: 40px
name: ' '
- type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
state:
- operator: default
color: grey
- value: 'on'
color: orange
- value: 'off'
color: grey
styles:
card:
- border-radius: 50%
icon: none
tap_action:
action: none
entity: light.empty
styles:
icon:
- width: 18px
card:
- width: 40px
- height: 40px
name: ' '
- type: horizontal-stack
cards:
- type: custom:button-card
color_type: blank-card
- type: custom:button-card
state:
- operator: default
color: grey
- value: 'on'
color: orange
- value: 'off'
color: grey
styles:
card:
- border-radius: 50%
icon: mdi:light-flood-down
tap_action:
action: toggle
entity: null
styles:
icon:
- width: 23px
card:
- width: 40px
- height: 40px
name: ' '
- type: custom:button-card
color_type: blank-card
- type: horizontal-stack
cards:
- type: custom:button-card
state:
- operator: default
color: grey
- value: 'on'
color: orange
- value: 'off'
color: grey
styles:
card:
- border-radius: 50%
icon: none
tap_action:
action: none
entity: null
styles:
icon:
- width: 18px
card:
- width: 40px
- height: 40px
name: ' '
Once again, it shouldn’t be an obligation to respond. But all feedback and ideas are more than welcome.
Many many thanks in advance,
Herman F.