Nice dashboard. Please share washer and dryer YAML code, if you don’t mind. Thank you
Here is my front page, if anyone interested, I could post YAML code.
Badges on the top pop up when door or window open, towel warmer on or fridge lost power etc.
Rooms badges clickable (navigate to sub-view of the room)
3 Likes
Since the standard powerflow card and the (great!) custom card from flixlix both use quite much space, i decided do put some work in it and made my own representation of basic energy data, resulting in a abomination of the picture-entity-card and card-mod. Maybe you folks find it inspring:
5 Likes
I like your dashboard.
If you don’t mind to share the code I would be interested in it
Not at all
keep_texts_in_tabs:
enabled: true
mobile_config:
enabled: false
custom_header: {}
sidebar:
active: true
bottomcard: true
width:
mobile: 0
tablet: 25
desktop: 25
breakpoints:
mobile: 768
tablet: 1000
desktop: 1024
style: |
:host {
--sidebar-background: transparent !important;
--sidebar-text-color: white;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
--sidebar-icon-color: darkorange;
--divider-color: white;
}
.title h1{
text-align: center;
text-color: red;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 255px;
}
digitalClock: false
twelveHourVersion: true
hideHassSidebar: false
hideTopMenu: false
date: false
dateFormat: dddd DD MMM
clock: false
bottomCard:
type: grid
cardOptions:
columns: 1
square: false
cards:
- type: custom:text-divider-row
text: '-'
text-divider-color: transparent
- type: custom:stack-in-card
cards:
- type: markdown
tap_action:
action: navigate
navigation_path: weather
card_mod:
style:
.: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem
}
ha-markdown-element:second-of-type h1 {
background-color: rgba(0,0,0,0);
color: var(--primary-text-color);
font-weight: normal;
font-size: 10px;
line-height: 3px;
}
content: >
###{% if now().hour < 5 %} Good Night {{'\U0001F634'}} {% elif
now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}} {% elif
now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}} {%
else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %} ,
{{user}}.<br/> Today is {{ now().strftime('%A') }}, {{
now().strftime('%B') }} {% set suffix = ['st', 'nd', 'rd'] %}{%
set day = now().day %}{% set index = 3 if day // 10 == 1 or day
% 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2 else
day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}.
<br/> Temperature
{{states('sensor.openweathermap_temperature') | int }}°C,
{{states('sensor.openweathermap_condition') }}. <br/> Cat Litter
Box {{ states ('sensor.litter_box_pad_days_left') }} days until
next cleaning. <br/> HVAC Filter need to be changed in {{
states('sensor.hvac_filter_days_left') }} days!
- type: picture
image: /local/MyPictures/OIP-removebg-preview.png
tap_action:
action: navigate
navigation_path: weather
card_mod:
style: |
ha-card {
background-color: transparent !important;
}
card_mod:
style: |
ha-card {
height: 20em !important;
background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status_2')}})) 10%), url({{states('sensor.weather_froggy_picture')}});
background-size: cover, 200% auto;
background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
background-repeat: no-repeat;
background-blend-mode: saturation;
font-size: 12px;
}
- type: custom:text-divider-row
text: '-'
text-divider-color: white
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Main Page
secondary: ''
icon: ios:house
icon_color: teal
fill_container: true
tap_action:
action: navigate
navigation_path: main-page
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem;
#width:15px !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--primary-color);
}
cards:
- type: custom:expander-card
card_mod:
style: |
button.open {
background: teal !important;
}
button.close {
background: transparent !important;
}
title-card:
type: custom:mushroom-template-card
primary: First Floor
secondary: '{{ states(''light.first_floor_lights'') }}'
icon: mdi:home-floor-1
icon_color: >-
{%if is_state('light.first_floor_lights', 'off') %} teal
{% else %} amber {% endif %}
card_mod:
style: >
ha-card {
background: none !important;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq',
'on')
| rejectattr('name', 'search', 'First Floor')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Living Room', 'Kitchen', 'Hallway','Kids Room','Garage','My Bathroom'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: '{{ states(''light.living_room_lights'') }}'
icon: mdi:sofa
icon_color: >-
{%if is_state('light.living_room_lights', 'off') %} teal
{% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: living-room
- type: custom:mushroom-template-card
primary: Kitchen
secondary: '{{ states(''light.kitchen_lights_2'') }}'
icon: mdi:pot-steam
icon_color: >-
{%if is_state('light.kitchen_lights_2', 'off') %} teal
{% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: kitchen
- type: custom:mushroom-template-card
primary: Hallway
secondary: '{{ states(''light.hallway_lights'') }}'
icon: mdi:hat-fedora
icon_color: >-
{%if is_state('light.hallway_lights', 'off') %} teal {%
else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: hallway
- type: custom:mushroom-template-card
primary: Kids Room
secondary: '{{ states(''light.kids_fan_down_light'') }}'
icon: mdi:teddy-bear
icon_color: >-
{%if is_state('light.kids_fan_down_light', 'off') %}
teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: kids-room
- type: custom:mushroom-template-card
primary: Bathroom
secondary: '{{ states(''light.my_bathroom_lights'') }}'
icon: mdi:shower-head
icon_color: >-
{%if is_state('light.my_bathroom_lights', 'off') %} teal
{% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: first-floor-bathroom
- type: custom:mushroom-template-card
primary: Garage
secondary: '{{ states(''light.my_bathroom_lights'') }}'
icon: mdi:go-kart
icon_color: >-
{%if is_state('light.garage_lights_light', 'off') %}
teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: garage
- type: custom:expander-card
card_mod:
style: |
button.open {
background: teal !important;
}
button.close {
background: transparent !important;
}
title-card:
type: custom:mushroom-template-card
primary: Second Floor
secondary: '{{ states(''light.second_floor_lights'') }}'
icon: mdi:home-floor-2
icon_color: >-
{%if is_state('light.second_floor_lights', 'off') %} teal
{% else %} amber {% endif %}
card_mod:
style: >
ha-card {
background: none !important;
} ha-card:after { content: " {{ states.light |
selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Second Floor')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Upstairs', 'Master Bedroom', 'Sonia Room','Artem Room', 'Master Bathroom'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: '{{ states(''light.master_bedroom_lights'') }}'
icon: mdi:bed-king
icon_color: >-
{%if is_state('light.master_bedroom_lights', 'off') %}
teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: master-bedroom
- type: custom:mushroom-template-card
primary: Master Bathroom
secondary: '{{ states(''light.master_bathroom_lights'') }}'
icon: phu:rooms-bathroom
icon_color: >-
{%if is_state('light.master_bathroom_lights', 'off') %}
teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: master-bathroom
- type: custom:mushroom-template-card
primary: Upstairs
secondary: '{{ states(''light.upstairs_lights'') }}'
icon: mdi:escalator-up
icon_color: >-
{%if is_state('light.upstairs_lights', 'off') %} teal {%
else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: upstairs-hallway
- type: custom:mushroom-template-card
primary: Artem Room
secondary: '{{ states(''light.artem_fan'') }}'
icon: mdi:zodiac-taurus
icon_color: >-
{%if is_state('light.artem_fan', 'off') %} teal {% else
%}
amber {% endif %
tap_action:
action: navigate
navigation_path: artem-room
- type: custom:mushroom-template-card
primary: Sonia Room
secondary: '{{ states(''light.sonia_s_bulbs'') }}'
icon: mdi:zodiac-leo
icon_color: >-
{%if is_state('light.sonia_s_bulbs', 'off') %} teal {%
else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: sonia-room
- type: custom:expander-card
card_mod:
style: |
button.open {
background: teal !important;
}
button.close {
background: transparent !important;
}
title-card:
type: custom:mushroom-template-card
primary: Basement
secondary: '{{ states(''light.basement_lights_all'') }}'
icon: mdi:home-floor-b
icon_color: >-
{%if is_state('light.basement_lights_all', 'off') %} teal
{% else %} amber {% endif %}
card_mod:
style: >
ha-card {
background: none !important;
} ha-card:after { content: " {{ states.light |
selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Basement')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Basement', 'Basement Restroom', 'Utility','Office'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
cards:
- type: custom:mushroom-template-card
primary: Basement
secondary: '{{ states(''light.basement_lights'') }}'
icon: mdi:escalator-down
icon_color: >-
{%if is_state('light.basement_lights', 'off') %} teal {%
else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: basement-room
- type: custom:mushroom-template-card
primary: Laundry
secondary: '{{ states(''light.laundry_vanity_light_light'') }}'
icon: mdi:washing-machine
icon_color: >-
{%if is_state('light.laundry_vanity_light_light', 'off')
%} teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: laundry-room
- type: custom:mushroom-template-card
primary: Utility
secondary: '{{ states(''light.utility_room_light_light_2'') }}'
icon: mdi:water-boiler
icon_color: >-
{%if is_state('light.utility_room_light_light_2', 'off')
%} teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: utility-room
- type: custom:mushroom-template-card
primary: Office
secondary: '{{ states(''light.office_light_switch_light'') }}'
icon: hue:room-office
icon_color: >-
{%if is_state('light.office_light_switch_light', 'off')
%} teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: office
- type: custom:mushroom-template-card
primary: Outside
secondary: '{{ states(''light.outside_lights'') }}'
tap_action:
action: navigate
navigation_path: outside
icon: phu:outside
icon_color: >-
{%if is_state('light.outside_lights', 'off') %} teal {% else %}
amber {% endif %}
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem;
#width:15px !important;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Outside')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Outside'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.yevgeniy
name: Yevgeniy
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: custom:mushroom-person-card
entity: person.irina
name: Irina
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: custom:mushroom-person-card
entity: device_tracker.life360_sonia
name: Sonia
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: custom:mushroom-person-card
entity: device_tracker.life360_boris_bolembakh
name: Papa
icon_type: entity-picture
fill_container: true
tap_action:
action: navigate
navigation_path: /our-home/family
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: navigate
navigation_path: /api/hassio/app/entrypoint.js
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:menu
icon_color: teal
- type: action
tap_action:
action: navigate
navigation_path: family
icon: mdi:family-tree
icon_color: primary
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: action
tap_action:
action: navigate
navigation_path: weather
icon: mdi:weather-hazy
icon_color: primary
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
- type: action
icon_color: primary
tap_action:
action: navigate
navigation_path: ha-info
icon: mdi:memory
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
alignment: center
- type: custom:layout-break
- type: custom:layout-break
- type: custom:layout-break
- type: custom:layout-break
- type: custom:layout-break
- type: custom:layout-break
This is just a sidebar. Than you can add Views with pages or the rest you can do in UI.
Nice layout, very similar to mine.
What card are you using for shopping list?
It’s a tile-card and the standard todo-list with the item-list invisible, to just get the input field.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:layout-card
layout_type: grid-layout
layout:
grid-template-columns: 26% 74%
margin: 0
cards:
- color: teal
type: tile
entity: todo.wocheneinkauf
icon: mdi:cart-outline
name: Bring!
icon_tap_action:
action: url
url_path: >-
http://assistant.xxxx.xx:8123/todo?entity_id=todo.wocheneinkauf
card_mod:
style: |
ha-card {box-shadow: none !important; padding-top: 8}
- type: todo-list
entity: todo.wocheneinkauf
card_mod:
style: |
ha-card {box-shadow: none !important;
}
ha-sortable {display: none}
.addRow {padding: 8px !important}
.addBox {height: 36px}
.addButton {display: none}
label {border: none;}
1 Like
Looks very nice, could you please share the yaml?
Sure, im happy to share the code. (i know it’s messy, because the stacking of elements is a bit fiddely… was try and error)
type: picture-elements
elements:
- type: state-icon
icon: none
style:
left: 67.2%
top: 41%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.calimero_estemated_charging_power
card_mod:
style: |
state-badge {
width: 14.7em;
height: 3.7em;
border-radius: 0;
border-top-left-radius: 30px;
{% if states.sensor.calimero_estemated_charging_power.state | float < 1.0 %}
border-left: 3px dashed #444;
border-top: 3px dashed #444;
{% else %}
border-left: 3px solid #B87333;
border-top: 3px solid #B87333;
{% endif %}
box-sizing: inherit;
}
- type: state-icon
icon: none
style:
left: 70%
top: 75%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.stromverbrauch
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
height: 0;
width: 12.8em;
border-radius: 0;
border-top: 3px solid #2478B7;
box-sizing: inherit;
}
- type: state-icon
icon: none
style:
left: 30%
top: 75%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.stromverbrauch_ohne_server
card_mod:
style: |
state-badge {
height: 0;
width: 13.0em;
border-radius: 0;
border-top: 3px solid #4EA586;
box-sizing: inherit;
}
- type: state-icon
style:
left: 50%
top: 75%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.stromverbrauch
icon: mdi:home
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
border: 3px solid #4EA586;
border-right: 3px solid #2478B7;
border-top: 3px solid #B87333;
{% if states.sensor.calimero_estemated_charging_power.state | float < 1.0 %}
border-top: 3px dashed #444;
{% else %}
border-top: 3px solid #B87333;
{% endif %}
box-sizing: inherit;
padding: 0px 10px 20px 10px;
}
- type: state-label
style:
left: 50%
top: 82%
font-size: .7em
entity: sensor.stromverbrauch_ohne_server
- type: state-icon
icon: none
style:
left: 10%
top: 50%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.power_production_now
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
width: 0;
height: 2em;
border-radius: 0;
box-sizing: inherit;
{% if states.sensor.power_production_now.state | float < 0.1 %}
border-left: 3px dashed #444;
{% else %}
border-left: 3px solid #9c8c24;
{% endif %}
}
- type: state-icon
style:
left: 10%
top: 25%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.power_production_now
icon: mdi:solar-power
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
{% if states.sensor.power_production_now.state | float < 0.1 %}
border: 3px solid #444;
{% else %}
border: 3px solid #9c8c24;
{% endif %}
box-sizing: inherit;
padding: 0px 10px 20px 10px;
}
- type: state-label
style:
left: 10%
top: 32%
font-size: .7em
entity: sensor.power_production_now
- type: state-icon
style:
left: 10%
top: 75%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.netz_gesamtverbrauch
icon: mdi:transmission-tower
card_mod:
style: |
state-badge {
border: 3px solid #4EA586;
border-top: 3px solid #9c8c24;
{% if states.sensor.power_production_now.state | float < 0.1 %}
border-top: 3px dashed #444;
{% else %}
border-top: 3px solid #9c8c24;
{% endif %}
background-color: rgb(31, 44, 52);
box-sizing: inherit;
padding: 0px 10px 20px 10px;
}
- type: state-label
style:
left: 10%
top: 82%
font-size: .7em
entity: sensor.netz_gesamtverbrauch
- type: state-icon
style:
left: 70%
top: 25%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.calimero_estemated_charging_power
icon: mdi:ev-plug-type2
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
{% if states.sensor.calimero_estemated_charging_power.state | float < 0.1 %}
border-top: 3px dashed #2e1c0c;
border: 3px solid #444;
{% else %}
border: 3px solid #B87333;
{% endif %}
box-sizing: inherit;
padding: 0px 10px 20px 10px;
}
- type: state-label
style:
left: 70%
top: 32%
font-size: .7em
entity: sensor.estemated_charging_power_kw
- type: state-icon
style:
left: 90%
top: 75%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.usv_load_abs
icon: mdi:server-network
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
border: 3px solid #2478B7;
box-sizing: inherit;
padding: 0px 10px 20px 10px;
}
- type: state-label
style:
left: 90%
top: 82%
font-size: .7em
entity: sensor.usv_load_abs
- type: state-label
style:
left: 60%
top: 70%
font-size: .7em
color: "#bbb"
entity: sensor.qnapups_eingangsspannung
- type: state-label
style:
left: 80%
top: 70%
font-size: .7em
color: "#bbb"
entity: sensor.qnapups_ausgangsspannung
- type: state-icon
style:
left: 70%
top: 75%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.qnapups_akku_ladung
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
border: 3px solid #2478B7;
box-sizing: inherit;
padding: 0px 10px 20px 10px;
border-radius: 20%;
}
- type: state-label
style:
left: 70%
top: 82%
font-size: .7em
entity: sensor.qnapups_akku_ladung
- type: state-icon
icon: none
style:
left: 25%
top: 50%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.electricity_maps_anteil_fossiler_brennstoffe_im_netz
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
width: 0;
height: 4em;
border-radius: 0;
border-left: 3px dotted #168235;
box-sizing: inherit;
}
- type: state-icon
icon: none
style:
left: 25%
top: 75%
transform: translate(-50%, -50%) scale(0.5, 0.5)
entity: sensor.electricity_maps_anteil_fossiler_brennstoffe_im_netz
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
border: 5px dotted #168235;
box-sizing: inherit;
padding: 0px 0px 0px 0px;
}
- type: state-icon
style:
left: 25%
top: 25%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.electricity_maps_anteil_fossiler_brennstoffe_im_netz
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
border: 3px dotted #168235;
box-sizing: inherit;
padding: 0px 10px 20px 10px;
}
- type: state-label
style:
left: 25%
top: 32%
font-size: .7em
entity: sensor.electricity_maps_anteil_fossiler_brennstoffe_im_netz
- type: state-icon
style:
left: 90%
top: 25%
transform: translate(-50%, -50%) scale(0.8, 0.8)
entity: sensor.calimero_battery_level
card_mod:
style: |
state-badge {
background-color: rgb(31, 44, 52);
border: 3px solid #B87333;
box-sizing: inherit;
padding: 0px 10px 20px 10px;
border-radius: 20%;
}
- type: state-label
style:
left: 90%
top: 32%
font-size: .7em
entity: sensor.calimero_battery_level
image: /api/image/serve/0a8e00f8e5ce73b0e9b94e7aa7922943/512x512
the background picture is just a static 1 by 3 image in the right height to fit the content.
1 Like
This is the package for washer (same model for other appliances):
homeassistant:
customize:
package.node_anchors:
customize: &customize
package: 'Centro Controllo Lavatrice'
setting:
####################################################
# #
# INPUT NUMBER #
# #
####################################################
input_number:
####################################################
lunedi_elettrodomestici_consumo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "kwh"
lunedi_elettrodomestici_costo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "€"
####################################################
martedi_elettrodomestici_consumo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "kwh"
martedi_elettrodomestici_costo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "€"
####################################################
mercoledi_elettrodomestici_consumo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "kwh"
mercoledi_elettrodomestici_costo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "€"
####################################################
giovedi_elettrodomestici_consumo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "kwh"
giovedi_elettrodomestici_costo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "€"
####################################################
venerdi_elettrodomestici_consumo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "kwh"
venerdi_elettrodomestici_costo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "€"
####################################################
sabato_elettrodomestici_consumo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "kwh"
sabato_elettrodomestici_costo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "€"
####################################################
domenica_elettrodomestici_consumo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "kwh"
domenica_elettrodomestici_costo_1:
icon: mdi:counter
min: 0
max: 999999
mode: box
unit_of_measurement: "€"
####################################################
# #
# UTILITY METER #
# #
####################################################
utility_meter:
# Tempo
elettrodomestici_tempo_oggi_1:
source: sensor.time_on_elettrodomestici_1
cycle: daily
elettrodomestici_tempo_mese_1:
source: sensor.time_on_elettrodomestici_1
cycle: monthly
elettrodomestici_tempo_anno_1:
source: sensor.time_on_elettrodomestici_1
cycle: yearly
# Cicli
cicli_oggi_elettrodomestici_1:
source: counter.cicli_funzionamento_elettrodomestici_totale_1
cycle: daily
cicli_mese_elettrodomestici_1:
source: counter.cicli_funzionamento_elettrodomestici_totale_1
cycle: monthly
cicli_anno_elettrodomestici_1:
source: counter.cicli_funzionamento_elettrodomestici_totale_1
cycle: yearly
# Consumi KWh
energy_oggi_elettrodomestici_1:
source: sensor.consumo_yy_lavatrice
cycle: daily
energy_mese_elettrodomestici_1:
source: sensor.consumo_yy_lavatrice
cycle: monthly
energy_anno_elettrodomestici_1:
source: sensor.consumo_yy_lavatrice
cycle: yearly
####################################################
# #
# TEMPLATE #
# #
####################################################
template:
- trigger:
- platform: state
entity_id: input_boolean.durata_ciclo_attivo_elettrodomestici_1
from: "off"
to: "on"
sensor:
- name: Inizio Ciclo Elettrodomestici 1
state: "{{states('sensor.consumo_yy_lavatrice')}}"
- trigger:
- platform: state
entity_id: binary_sensor.lavatrice_accesa
from: "on"
to: "off"
sensor:
- name: Fine Ciclo Elettrodomestici 1
state: "{{now().strftime('%d/%m/%Y %H:%M')}}"
- trigger:
- platform: state
entity_id: input_boolean.durata_ciclo_attivo_elettrodomestici_1
from: 'off'
to: "on"
sensor:
- name: Tempo Riavvio 1
state: "{{as_timestamp(now())}}"
####################################################
- sensor:
- name: "time_on_elettrodomestici_1"
icon: mdi:history
state: >-
{%if is_state('binary_sensor.lavatrice_accesa', 'on') and (as_timestamp(states.binary_sensor.lavatrice_accesa.last_changed)+1) <= as_timestamp(now())%}
{{((as_timestamp(now()) - as_timestamp(states.binary_sensor.lavatrice_accesa.last_changed))/3600)}}
{% else %} 0 {% endif %}
attributes:
terminato: "{{ states('sensor.fine_ciclo_elettrodomestici_1') if is_state('binary_sensor.lavatrice_accesa', 'off') else 'In funzione' }}"
tempo_ciclo_elettrodomestici_1: >
{%set hours =(as_timestamp(now()) - states('sensor.tempo_riavvio_1')|float(0))/3600 %}
{% set minutes = ((hours % 1) * 60) | int (0)%}
{% set hours = (hours - (hours % 1)) | int(0) %}
{%set day = ((hours |int(0) /24))|int(0) %}
{%if is_state('input_boolean.durata_ciclo_attivo_elettrodomestici_1', 'on')%}
{% if day|int(0) >0 %}
{{day}}d {{(hours|int(0))-(day*24)}}h {{minutes}}m
{% elif hours|int(0) >0 %}
{{hours}}h {{minutes}}m
{% else %}
{{minutes}}min
{% endif %}
{%else%}
{{states('input_text.ultimo_ciclo_attivo_elettrodomestici_1')}}
{%endif%}
Oggi: >
{% set hours = states('sensor.elettrodomestici_tempo_oggi_1') | float(0) %}
{% set minutes = ((hours % 1) * 60) | int(0) %}
{% set hours = (hours - (hours % 1)) | int(0) %}
{% if hours|int(0) >0 %}
{{hours}}h {{minutes}}m
{% else %}
{{minutes}}min
{% endif %}
Mese: >
{% set hours = states('sensor.elettrodomestici_tempo_mese_1') | float(0) %}
{% set minutes = ((hours % 1) * 60) | int(0) %}
{% set hours = (hours - (hours % 1)) | int(0) %}
{% set day = ((hours |int /24))|int(0) %}
{% if day|int(0) >0 %}
{{day}}d {{(hours|int)-(day*24)}}h {{minutes}}m
{% elif hours|int(0) >0 %}
{{hours}}h {{minutes}}m
{% else %}
{{minutes}}min
{% endif %}
Anno: >
{% set hours = states('sensor.elettrodomestici_tempo_anno_1') | float(0) %}
{% set minutes = ((hours % 1) * 60) | int(0) %}
{% set hours = (hours - (hours % 1)) | int(0) %}
{% set day = ((hours |int(0) /24))|int(0) %}
{% if day|int(0) >0 %}
{{day}}d {{(hours|int(0))-(day*24)}}h {{minutes}}m
{% elif hours|int(0) >0 %}
{{hours}}h {{minutes}}m
{% else %}
{{minutes}}min
{% endif %}
Ieri: >
{% set hours = state_attr('sensor.elettrodomestici_tempo_oggi_1', 'last_period') | float(0) %}
{% set minutes = ((hours % 1) * 60) | int(0) %}
{% set hours = (hours - (hours % 1)) | int(0) %}
{% if hours|int(0) >0 %}
{{hours}}h {{minutes}}m
{% else %}
{{minutes}}min
{% endif %}
Mese Precedente: >
{% set hours = state_attr('sensor.elettrodomestici_tempo_mese_1', 'last_period') | float(0) %}
{% set minutes = ((hours % 1) * 60) | int(0) %}
{% set hours = (hours - (hours % 1)) | int(0) %}
{% set day = ((hours |int /24))|int(0) %}
{% if day|int(0) >0 %}
{{day}}d {{(hours|int)-(day*24)}}h {{minutes}}m
{% elif hours|int(0) >0 %}
{{hours}}h {{minutes}}m
{% else %}
{{minutes}}min
{% endif %}
Anno Precedente: >
{% set hours = state_attr('sensor.elettrodomestici_tempo_anno_1', 'last_period') | float(0) %}
{% set minutes = ((hours % 1) * 60) | int(0) %}
{% set hours = (hours - (hours % 1)) | int(0) %}
{% set day = ((hours |int(0) /24))|int(0) %}
{% if day|int(0) >0 %}
{{day}}d {{(hours|int(0))-(day*24)}}h {{minutes}}m
{% elif hours|int(0) >0 %}
{{hours}}h {{minutes}}m
{% else %}
{{minutes}}min
{% endif %}
consumo_ciclo_elettrodomestici_1: "{{(states('sensor.consumo_yy_lavatrice')|float(0)-states('sensor.inizio_ciclo_elettrodomestici_1')|float(0))|round(2)}} kWh"
costo_ciclo_elettrodomestici_1: "{{((states('sensor.consumo_yy_lavatrice')|float(0)-states('sensor.inizio_ciclo_elettrodomestici_1')|float(0)) * (states('sensor.prezzo_attuale_energia_al_dettaglio')| float(0))) | round(2, default=0) }}"
costo_consumo_giornaliero_elettrodomestici_1: "{{((states('sensor.energy_oggi_elettrodomestici_1') | float(0)) * (states('sensor.prezzo_attuale_energia_al_dettaglio')| float(0))) | round(2, default=0) }}"
costo_consumo_mensile_elettrodomestici_1: "{{((states('sensor.energy_mese_elettrodomestici_1') | float(0)) * (states('sensor.prezzo_attuale_energia_al_dettaglio')| float(0))) | round(2, default=0) }}"
costo_consumo_annuale_elettrodomestici_1: "{{((states('sensor.energy_anno_elettrodomestici_1') | float(0)) * (states('sensor.prezzo_attuale_energia_al_dettaglio') | float(0))) | round(2, default=0) }}"
costo_consumo_ieri_elettrodomestici_1: "{{((state_attr('sensor.energy_oggi_elettrodomestici_1', 'last_period') | float(0)) * (states('sensor.prezzo_attuale_energia_al_dettaglio')| float(0))) | round(2, default=0) }}"
costo_consumo_mese_precedente_elettrodomestici_1: "{{((state_attr('sensor.energy_mese_elettrodomestici_1', 'last_period') | float(0)) * (states('sensor.prezzo_attuale_energia_al_dettaglio')| float(0))) | round(2, default=0) }}"
costo_consumo_anno_precedente_elettrodomestici_1: "{{((state_attr('sensor.energy_anno_elettrodomestici_1', 'last_period') | float(0)) * (states('sensor.prezzo_attuale_energia_al_dettaglio') | float(0))) | round(2, default=0) }}"
####################################################
# #
# CUONTER #
# #
####################################################
counter:
cicli_funzionamento_elettrodomestici_totale_1:
name: Cicli Funzionamento Elettrodomestici Totale
initial: 0
step: 1
####################################################
# #
# INPUT BOOLEAN #
# #
####################################################
input_boolean:
durata_ciclo_attivo_elettrodomestici_1:
name: Ciclo Attivo Elettrodomestici
####################################################
# #
# INPUT DATETIME #
# #
####################################################
input_datetime:
elettrodomestici_off_1:
name: Elettrodomestici Off
has_date: false
has_time: true
####################################################
# #
# INPUT TEXT #
# #
####################################################
input_text:
data_reset_sensori_elettrodomestici_1:
nome_elettrodomestico_1:
ultimo_ciclo_attivo_elettrodomestici_1:
lunedi_elettrodomestici_cicli_1:
lunedi_elettrodomestici_tempo_1:
martedi_elettrodomestici_cicli_1:
martedi_elettrodomestici_tempo_1:
mercoledi_elettrodomestici_cicli_1:
mercoledi_elettrodomestici_tempo_1:
giovedi_elettrodomestici_cicli_1:
giovedi_elettrodomestici_tempo_1:
venerdi_elettrodomestici_cicli_1:
venerdi_elettrodomestici_tempo_1:
sabato_elettrodomestici_cicli_1:
sabato_elettrodomestici_tempo_1:
domenica_elettrodomestici_cicli_1:
domenica_elettrodomestici_tempo_1:
####################################################
# #
# AUTOMAZIONI #
# #
####################################################
automation:
- alias: Automazioni Elettrodomestici 1
id: Automazioni Elettrodomestici 1
trigger:
- platform: state
entity_id: binary_sensor.lavatrice_accesa
from: 'off'
to: 'on'
id: inizio_ciclo
- platform: state
entity_id: binary_sensor.lavatrice_accesa
from: 'on'
to: 'off'
id: fine_ciclo
- platform: time
at: '23:59:59'
id: incremento_sensori_7_giorni_elettrodomestici
action:
####################################################
# Incremento 7 Giorni Statistiche
- choose:
- conditions:
- condition: trigger
id: incremento_sensori_7_giorni_elettrodomestici
sequence:
# Cicli
- service: input_text.set_value
target:
entity_id: >
{% set today = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'][now().weekday()] %}
{% if (today in ["Monday"]) %} input_text.lunedi_elettrodomestici_cicli_1
{% elif (today in ["Tuesday"]) %} input_text.martedi_elettrodomestici_cicli_1
{% elif (today in ["Wednesday"]) %} input_text.mercoledi_elettrodomestici_cicli_1
{% elif (today in ["Thursday"]) %} input_text.giovedi_elettrodomestici_cicli_1
{% elif (today in ["Friday"]) %} input_text.venerdi_elettrodomestici_cicli_1
{% elif (today in ["Saturday"]) %} input_text.sabato_elettrodomestici_cicli_1
{% elif (today in ["Sunday"]) %} input_text.domenica_elettrodomestici_cicli_1
{% endif %}
data:
value: "{{states('sensor.cicli_oggi_elettrodomestici_1')}}"
# Tempo
- service: input_text.set_value
target:
entity_id: >
{% set today = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'][now().weekday()] %}
{% if (today in ["Monday"]) %} input_text.lunedi_elettrodomestici_tempo_1
{% elif (today in ["Tuesday"]) %} input_text.martedi_elettrodomestici_tempo_1
{% elif (today in ["Wednesday"]) %} input_text.mercoledi_elettrodomestici_tempo_1
{% elif (today in ["Thursday"]) %} input_text.giovedi_elettrodomestici_tempo_1
{% elif (today in ["Friday"]) %} input_text.venerdi_elettrodomestici_tempo_1
{% elif (today in ["Saturday"]) %} input_text.sabato_elettrodomestici_tempo_1
{% elif (today in ["Sunday"]) %} input_text.domenica_elettrodomestici_tempo_1
{% endif %}
data:
value: "{{state_attr('sensor.time_on_elettrodomestici_1','Oggi')}}"
# Consumo
- service: input_number.set_value
target:
entity_id: >
{% set today = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'][now().weekday()] %}
{% if (today in ["Monday"]) %} input_number.lunedi_elettrodomestici_consumo_1
{% elif (today in ["Tuesday"]) %} input_number.martedi_elettrodomestici_consumo_1
{% elif (today in ["Wednesday"]) %} input_number.mercoledi_elettrodomestici_consumo_1
{% elif (today in ["Thursday"]) %} input_number.giovedi_elettrodomestici_consumo_1
{% elif (today in ["Friday"]) %} input_number.venerdi_elettrodomestici_consumo_1
{% elif (today in ["Saturday"]) %} input_number.sabato_elettrodomestici_consumo_1
{% elif (today in ["Sunday"]) %} input_number.domenica_elettrodomestici_consumo_1
{% endif %}
data:
value: "{{states('sensor.energy_oggi_elettrodomestici_1')}}"
# Costi
- service: input_number.set_value
target:
entity_id: >
{% set today = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'][now().weekday()] %}
{% if (today in ["Monday"]) %} input_number.lunedi_elettrodomestici_costo_1
{% elif (today in ["Tuesday"]) %} input_number.martedi_elettrodomestici_costo_1
{% elif (today in ["Wednesday"]) %} input_number.mercoledi_elettrodomestici_costo_1
{% elif (today in ["Thursday"]) %} input_number.giovedi_elettrodomestici_costo_1
{% elif (today in ["Friday"]) %} input_number.venerdi_elettrodomestici_costo_1
{% elif (today in ["Saturday"]) %} input_number.sabato_elettrodomestici_costo_1
{% elif (today in ["Sunday"]) %} input_number.domenica_elettrodomestici_costo_1
{% endif %}
data:
value: "{{state_attr('sensor.time_on_elettrodomestici_1','costo_consumo_giornaliero_elettrodomestici_1')}}"
####################################################
# Inizio Ciclo
- choose:
- conditions:
- condition: trigger
id: inizio_ciclo
sequence:
- entity_id: input_boolean.durata_ciclo_attivo_elettrodomestici_1
service: input_boolean.turn_on
####################################################
# Fine Ciclo
- choose:
- conditions:
- condition: trigger
id: fine_ciclo
sequence:
- service: input_text.set_value
target:
entity_id: input_text.ultimo_ciclo_attivo_elettrodomestici_1
data:
value: >-
{{state_attr('sensor.time_on_elettrodomestici_1','tempo_ciclo_elettrodomestici_1')}}
- service: counter.increment
target:
entity_id:
- counter.cicli_funzionamento_elettrodomestici_totale_1
- delay: '00:00:05'
- entity_id: input_boolean.durata_ciclo_attivo_elettrodomestici_1
service: input_boolean.turn_off
####################################################
ALL THANKS to DomHouse.it
I have just finished rebuilding my dashboard as well. This time, i went for one page view with a lot of conditional cards and expander cards as well. I wanted something that is very simple but also provide all the information i need. It looks like this:
There is a certain structure that i follow on each section. On top, is battery levels of battery operated devices (that can be hidden from the options), followed by lights (with color coded groups) and then i have additional entities hidden in expander cards (gray cards) that are of second imporance but still useful therefore available. The dashboard also has entire sections that are hidden and they appear if toggle helpers are on. These helpers are located on top of the dashboard inside the expander card:
Also, i have created 6 pages that change with the 2 button arrows located in the bottom right corner of the dashboard. Here is an example of a different page:
If anyones needs help to build something like this feel free to ask!
Thanks
3 Likes
and this is for dashboard:
type: custom:button-card
entity: sensor.lavatrice_power
entity_picture: /local/gif/Lavatriceferma.png
show_entity_picture: true
name: Lavatrice
styles:
card:
- padding-top: 25px
- background-color: rgba(0, 0, 0, 0.0)
icon:
- width: 100px
- height: 100px
name:
- font-size: 95%
- color: grey
state:
- value: 3
operator: ">"
entity_picture: /local/gif/Lavatrice.gif
styles:
name:
- color: orange
- font-weight: bold
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
dismissable: true
title: Centro Controllo Elettrodomestici - Lavatrice
content:
type: entities
card_mod:
style: |
.card-header {
padding: 0px 0px 0px 0px !important;
}
show_header_toggle: "off"
entities:
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: picture-entity
aspect_ratio: ""
entity: binary_sensor.lavatrice_accesa
show_name: false
show_state: false
fit_mode: contain
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px !important;
margin: 0px -0px -0px 0px;
border-width: 0px !important;
padding: 10px;
background: none
}
state_image:
"on": /local/gif/Lavatrice.gif
"off": /local/gif/Lavatriceferma.png
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Ultimi 7 Giorni
style: >
--popup-background-color:
var(--secondary-background-color);
--dialog-backdrop-filter: blur(2em)
brightness(0.75);
content:
type: vertical-stack
cards:
- type: entities
entities:
- style:
background: "#62717b"
height: 1px
margin-left: auto
margin-right: auto
type: divider
- entity: >-
input_number.lunedi_elettrodomestici_costo_1
name: Lunedì
type: custom:multiple-entity-row
state_header: EURO
state_color: false
icon: mdi:calendar
tap_action:
action: null
entities:
- entity: >-
input_text.lunedi_elettrodomestici_cicli_1
name: CICLI
tap_action:
action: null
- entity: >-
input_text.lunedi_elettrodomestici_tempo_1
name: TEMPO
tap_action:
action: null
- entity: >-
input_number.lunedi_elettrodomestici_consumo_1
name: CONSUMO
tap_action:
action: null
- type: divider
- entity: >-
input_number.martedi_elettrodomestici_costo_1
name: Martedì
type: custom:multiple-entity-row
state_header: EURO
state_color: false
icon: mdi:calendar
tap_action:
action: null
entities:
- entity: >-
input_text.martedi_elettrodomestici_cicli_1
name: CICLI
tap_action:
action: null
- entity: >-
input_text.martedi_elettrodomestici_tempo_1
name: TEMPO
tap_action:
action: null
- entity: >-
input_number.martedi_elettrodomestici_consumo_1
name: CONSUMO
tap_action:
action: null
- type: divider
- entity: >-
input_number.mercoledi_elettrodomestici_costo_1
name: Mercoledì
type: custom:multiple-entity-row
state_header: EURO
state_color: false
icon: mdi:calendar
tap_action:
action: null
entities:
- entity: >-
input_text.mercoledi_elettrodomestici_cicli_1
name: CICLI
tap_action:
action: null
- entity: >-
input_text.mercoledi_elettrodomestici_tempo_1
name: TEMPO
tap_action:
action: null
- entity: >-
input_number.mercoledi_elettrodomestici_consumo_1
name: CONSUMO
tap_action:
action: null
- type: divider
- entity: >-
input_number.giovedi_elettrodomestici_costo_1
name: Giovedì
type: custom:multiple-entity-row
state_header: EURO
state_color: false
icon: mdi:calendar
tap_action:
action: null
entities:
- entity: >-
input_text.giovedi_elettrodomestici_cicli_1
name: CICLI
tap_action:
action: null
- entity: >-
input_text.giovedi_elettrodomestici_tempo_1
name: TEMPO
tap_action:
action: null
- entity: >-
input_number.giovedi_elettrodomestici_consumo_1
name: CONSUMO
tap_action:
action: null
- type: divider
- entity: >-
input_number.venerdi_elettrodomestici_costo_1
name: Venerdì
type: custom:multiple-entity-row
state_header: EURO
state_color: false
icon: mdi:calendar
tap_action:
action: null
entities:
- entity: >-
input_text.venerdi_elettrodomestici_cicli_1
name: CICLI
tap_action:
action: null
- entity: >-
input_text.venerdi_elettrodomestici_tempo_1
name: TEMPO
tap_action:
action: null
- entity: >-
input_number.venerdi_elettrodomestici_consumo_1
name: CONSUMO
tap_action:
action: null
- type: divider
- entity: >-
input_number.sabato_elettrodomestici_costo_1
name: Sabato
type: custom:multiple-entity-row
state_header: EURO
state_color: false
icon: mdi:calendar
tap_action:
action: null
entities:
- entity: >-
input_text.sabato_elettrodomestici_cicli_1
name: CICLI
tap_action:
action: null
- entity: >-
input_text.sabato_elettrodomestici_tempo_1
name: TEMPO
tap_action:
action: null
- entity: >-
input_number.sabato_elettrodomestici_consumo_1
name: CONSUMO
tap_action:
action: null
- type: divider
- entity: >-
input_number.domenica_elettrodomestici_costo_1
name: Domenica
type: custom:multiple-entity-row
state_header: EURO
state_color: false
icon: mdi:calendar
tap_action:
action: null
entities:
- entity: >-
input_text.domenica_elettrodomestici_cicli_1
name: CICLI
tap_action:
action: null
- entity: >-
input_text.domenica_elettrodomestici_tempo_1
name: TEMPO
tap_action:
action: null
- entity: >-
input_number.domenica_elettrodomestici_consumo_1
name: CONSUMO
tap_action:
action: null
- style:
background: "#62717b"
height: 1px
margin-left: auto
margin-right: auto
type: divider
- type: vertical-stack
cards:
- type: custom:button-card
entity: binary_sensor.lavatrice_accesa
icon: mdi:power
tap_action:
action: null
state_color: false
show_name: false
show_icon: true
show_state: true
show_label: true
label: >
[[[ return
states['sensor.time_on_elettrodomestici_1'].attributes.terminato;
]]]
state_display: >
[[[ return entity.state === 'on' ? 'Stato': 'Ultimo
Avvio'; ]]]
styles:
grid:
- grid-template-areas: "\"i s \" \"i l\""
- grid-template-columns: 50px auto
icon:
- padding: 0px 0px
- color: var(--primary-text-color)
- height: 30px
- width: 30px
card:
- "--ha-card-background": rgba(0, 0, 0, 0.0)
- "--ha-card-box-shadow": none
- "--ha-card-border-width": 0px
label:
- padding: 0px 10px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 15px
state:
- padding: 0px 10px
- justify-self: start
- color: var(--primary-text-color)
- type: custom:button-card
entity: binary_sensor.lavatrice_accesa
state_color: false
icon: mdi:history
tap_action:
action: null
show_name: false
show_icon: true
show_state: true
show_label: true
label: >
[[[ return
states['sensor.time_on_elettrodomestici_1'].attributes.tempo_ciclo_elettrodomestici_1;
]]]
state_display: >
[[[ return entity.state === 'on' ? 'Durata Ciclo':
'Durata Ultimo'; ]]]
styles:
grid:
- grid-template-areas: "\"i s \" \"i l\""
- grid-template-columns: 50px auto
icon:
- padding: 0px 0px
- color: var(--primary-text-color)
- height: 30px
- width: 30px
card:
- "--ha-card-background": rgba(0, 0, 0, 0.0)
- "--ha-card-box-shadow": none
- "--ha-card-border-width": 0px
label:
- padding: 0px 10px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 15px
state:
- padding: 0px 10px
- justify-self: start
- color: var(--primary-te
- type: custom:button-card
entity: binary_sensor.lavatrice_accesa
state_color: false
icon: mdi:counter
tap_action:
action: null
show_name: false
show_icon: true
show_state: true
show_label: true
label: >
[[[ return
states['sensor.time_on_elettrodomestici_1'].attributes.consumo_ciclo_elettrodomestici_1;
]]]
state_display: >
[[[ return entity.state === 'on' ? 'Consumo ON':
'Consumo Ultimo'; ]]]
styles:
grid:
- grid-template-areas: "\"i s \" \"i l\""
- grid-template-columns: 50px auto
icon:
- padding: 0px 0px
- color: var(--primary-text-color)
- height: 30px
- width: 30px
card:
- "--ha-card-background": rgba(0, 0, 0, 0.0)
- "--ha-card-box-shadow": none
- "--ha-card-border-width": 0px
label:
- padding: 0px 10px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 15px
state:
- padding: 0px 10px
- justify-self: start
- color: var(--primary-text-color)
- type: custom:button-card
entity: binary_sensor.lavatrice_accesa
tap_action:
action: null
state_color: false
show_name: false
show_icon: true
show_state: true
show_label: true
label: >
[[[ return
states['sensor.time_on_elettrodomestici_1'].attributes.costo_ciclo_elettrodomestici_1+('
€'); ]]]
icon: mdi:currency-eur
state_display: >
[[[ return entity.state === 'on' ? 'Costo Attuale':
'Costo Ultimo'; ]]]
styles:
grid:
- grid-template-areas: "\"i s \" \"i l\""
- grid-template-columns: 50px auto
icon:
- padding: 0px 0px
- color: var(--primary-text-color)
- height: 30px
- width: 30px
card:
- "--ha-card-background": rgba(0, 0, 0, 0.0)
- "--ha-card-box-shadow": none
- "--ha-card-border-width": 0px
label:
- padding: 0px 10px
- justify-self: start
- font-family: Roboto, sans-serif
- font-size: 15px
state:
- padding: 0px 10px
- justify-self: start
- color: var(--primary-text-color)
- type: custom:bar-card
show_icon: true
align: split
columns: 1
max: 2000
positions:
icon: inside
indicator: inside
name: inside
value: inside
unit_of_measurement: W
severity:
- color: "#1e90ff"
from: 0
to: 600
- color: Orange
from: 601
to: 1000
- color: red
from: 1001
to: 4000
card_mod:
style: |
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color';
--ha-card-box-shadow: 'none';
}
entity: sensor.lavatrice_power
name: Consumo Istantaneo
entity_row: true
- type: custom:paper-buttons-row
buttons:
- icon: hass:chart-line
name: STATISTICHE
styles:
icon:
- color: deepskyblue
name:
- color: white
- font-size: 18px
state: "{{ states('xxx') }}"
state_styles:
"on":
icon:
color: var(--paper-item-icon-active-color)
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Statistiche
style: >
--popup-background-color:
var(--secondary-background-color);
--dialog-backdrop-filter: blur(2em)
brightness(0.75);
content:
type: entities
card_mod:
style: |
.card-header {
padding: 0px 0px 0px 0px !important;
}
show_header_toggle: "off"
entities:
- type: section
label: Lavatrice (ultimo utilizzo)
- type: custom:hui-element
card_type: vertical-stack
cards:
- type: vertical-stack
cards:
- type: custom:multiple-entity-row
entity: sensor.time_on_elettrodomestici_1
attribute: costo_ciclo_elettrodomestici_1
icon: mdi:power-plug
unit: €
name: false
state_header: EURO
state_color: true
entities:
- entity: sensor.time_on_elettrodomestici_1
attribute: terminato
name: STATO
- type: attribute
entity: sensor.time_on_elettrodomestici_1
name: TEMPO
attribute: tempo_ciclo_elettrodomestici_1
- entity: sensor.time_on_elettrodomestici_1
attribute: consumo_ciclo_elettrodomestici_1
name: CONSUMO
- type: custom:swipe-card
start_card: 1
parameters:
roundLengths: true
effect: coverflow
speed: 650
spaceBetween: 20
threshold: 7
coverflowEffect:
rotate: 80
depth: 300
cards:
- type: entities
card_mod:
style: |
ha-card {
border-width: 0px !important;
background: none
}
entities:
- type: section
label: Oggi
- entity: sensor.time_on_elettrodomestici_1
type: custom:multiple-entity-row
attribute: >-
costo_consumo_giornaliero_elettrodomestici_1
unit: €
name: false
state_header: EURO
icon: mdi:calendar
state_color: true
entities:
- entity: sensor.cicli_oggi_elettrodomestici_1
name: CICLI
- entity: sensor.time_on_elettrodomestici_1
attribute: Oggi
name: TEMPO
- entity: sensor.energy_oggi_elettrodomestici_1
name: CONSUMO
- type: section
label: Mese
- type: custom:multiple-entity-row
entity: sensor.time_on_elettrodomestici_1
attribute: costo_consumo_mensile_elettrodomestici_1
unit: €
icon: mdi:calendar-week-begin
name: false
state_header: EURO
state_color: true
entities:
- entity: sensor.cicli_mese_elettrodomestici_1
name: CICLI
- entity: sensor.time_on_elettrodomestici_1
name: TEMPO
attribute: Mese
- entity: sensor.energy_mese_elettrodomestici_1
name: CONSUMO
- type: section
label: Anno
- type: custom:multiple-entity-row
entity: sensor.time_on_elettrodomestici_1
attribute: costo_consumo_annuale_elettrodomestici_1
unit: €
icon: mdi:calendar-month
name: false
state_header: EURO
state_color: true
entities:
- entity: sensor.cicli_anno_elettrodomestici_1
name: CICLI
- entity: sensor.time_on_elettrodomestici_1
name: TEMPO
attribute: Anno
- entity: sensor.energy_anno_elettrodomestici_1
name: CONSUMO
- type: section
- type: entities
card_mod:
style: |
ha-card {
border-width: 0px !important;
background: none
}
entities:
- type: section
label: Ieri
- type: custom:multiple-entity-row
entity: sensor.time_on_elettrodomestici_1
attribute: costo_consumo_ieri_elettrodomestici_1
unit: €
name: false
icon: mdi:calendar
state_header: EURO
state_color: true
entities:
- entity: sensor.cicli_oggi_elettrodomestici_1
name: CICLI
attribute: last_period
- entity: sensor.time_on_elettrodomestici_1
attribute: Ieri
name: TEMPO
- entity: sensor.energy_oggi_elettrodomestici_1
attribute: last_period
unit: kWh
name: CONSUMO
- type: section
label: Mese Precedente
- type: custom:multiple-entity-row
entity: sensor.time_on_elettrodomestici_1
attribute: >-
costo_consumo_mese_precedente_elettrodomestici_1
unit: €
name: false
icon: mdi:calendar-week-begin
state_header: EURO
state_color: true
entities:
- entity: sensor.cicli_mese_elettrodomestici_1
name: CICLI
attribute: last_period
- entity: sensor.time_on_elettrodomestici_1
attribute: Mese Precedente
name: TEMPO
- entity: sensor.energy_mese_elettrodomestici_1
attribute: last_period
unit: kWh
name: CONSUMO
- type: section
label: Anno Precedente
- type: custom:multiple-entity-row
entity: sensor.time_on_elettrodomestici_1
attribute: >-
costo_consumo_anno_precedente_elettrodomestici_1
unit: €
name: false
icon: mdi:calendar-month
state_header: EURO
state_color: true
entities:
- entity: sensor.cicli_anno_elettrodomestici_1
name: CICLI
attribute: last_period
- entity: sensor.time_on_elettrodomestici_1
attribute: Anno Precedente
name: TEMPO
- entity: sensor.energy_anno_elettrodomestici_1
attribute: last_period
unit: kWh
name: CONSUMO
That’s an interesting approach! 
I’m always working on creating the perfect room card for me.
Here is the code for the current design of the section:
Theme: Material Rounded Transparent Card No Mod Dark
Theme: Material Rounded Transparent Card No Mod Light
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
name: Stube
card_layout: large
sub_button:
- entity: binary_sensor.og_stube_fenster_ms_opening
show_background: true
show_state: false
show_name: false
show_last_changed: false
show_attribute: false
tap_action:
action: none
- entity: sensor.og_stube_luftsensor_pm2_5
show_background: true
show_state: true
show_name: false
show_last_changed: false
show_attribute: false
tap_action:
action: none
- entity: sensor.og_stube_luftsensor_luftfeuchtigkeit
show_background: true
show_state: true
show_name: false
show_last_changed: false
show_attribute: false
tap_action:
action: none
- entity: sensor.og_stube_temperatur
show_background: true
show_state: true
show_name: false
show_last_changed: false
show_attribute: false
tap_action:
action: none
styles: |-
.bubble-line {
background: var(--primary-text-color);
opacity: 0.2;
}
.bubble-sub-button-1 {
display: ${hass.states['binary_sensor.og_stube_fenster_ms_opening'].state === 'on' ? '' : 'none'} !important;
}
.bubble-sub-button-2 {
background-color: ${hass.states['sensor.og_stube_luftsensor_pm2_5'].state >= 30 ? 'tomato' :
hass.states['sensor.og_stube_luftsensor_pm2_5'].state >= 20 ? '#FFB347' :
'transparent'} !important;
}
.bubble-sub-button-3 {
background-color: ${hass.states['sensor.og_stube_luftsensor_luftfeuchtigkeit'].state >= 80 ? 'tomato' :
hass.states['sensor.og_stube_luftsensor_luftfeuchtigkeit'].state >= 60 ? '#FFB347' :
'transparent'} !important;
color: ${hass.states['sensor.og_stube_luftsensor_luftfeuchtigkeit'].state >= 60 && hass.states['sensor.og_stube_luftsensor_luftfeuchtigkeit'].state <= 80 ? '#383838' : 'inherit'} !important;
}
.bubble-sub-button-4 {
background-color: ${hass.states['sensor.og_stube_temperatur'].state >= 28 ? 'tomato' :
hass.states['sensor.og_stube_temperatur'].state >= 23 ? '#FFB347' :
hass.states['sensor.og_stube_temperatur'].state >= 17 ? 'transparent' :
'LightSkyBlue'} !important;
color: ${hass.states['sensor.og_stube_temperatur'].state < 17 ? '#383838' : 'inherit'} !important;
}
icon: ""
- type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Sandra
tap_action:
action: more-info
entity: light.og_stube_schreibtisch_sandra_licht
show_icon: true
show_name: true
show_state: false
show_attribute: false
- name: PC
tap_action:
action: more-info
entity: switch.og_stube_schreibtisch_sandra_steckdose_pc
show_icon: true
show_name: true
show_state: false
show_attribute: false
- name: Niklas
tap_action:
action: more-info
entity: light.og_stube_schreibtisch
show_icon: true
show_name: true
show_state: false
show_attribute: false
- name: PC
tap_action:
action: more-info
entity: switch.pc_niklas
show_icon: true
show_name: true
show_state: false
show_attribute: false
styles: |-
.bubble-button-card-container {
background: none;
}
.bubble-sub-button {
height: 50px !important;
width: 70px !important;
flex-direction: column;
}
.bubble-sub-button-icon {
--mdc-icon-size: 20px !important;
margin-bottom: 5%;
}
.bubble-sub-button-container {
width: 100%;
gap: 7%;
justify-content: center;
}
${subButtonIcon[1].setAttribute("icon",
hass.states['switch.og_stube_schreibtisch_sandra_steckdose_pc'].state
=== 'on' ? 'mdi:desktop-tower-monitor' : 'mdi:monitor-speaker-off')}
${subButtonIcon[3].setAttribute("icon",
hass.states['switch.pc_niklas'].state === 'on' ?
'mdi:desktop-tower-monitor' : 'mdi:monitor-speaker-off')}
- type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: ""
tap_action:
action: more-info
entity: light.og_stube_sofa_licht
show_icon: true
show_name: true
show_state: false
show_attribute: false
- name: ""
tap_action:
action: more-info
entity: climate.og_stube_heizungsthermostat
show_icon: true
show_name: true
show_state: false
show_attribute: false
styles: |-
.bubble-button-card-container {
background: none;
}
.bubble-sub-button {
height: 50px !important;
width: 70px !important;
flex-direction: column;
}
.bubble-sub-button-icon {
--mdc-icon-size: 20px !important;
margin-bottom: 5%;
}
.bubble-sub-button-container {
width: 100%;
gap: 7%;
justify-content: center;
}
Just finished building my dashboard which is being displayed on a wall mounted 11" tablet in the kitchen. Has everything I need to start the day 
5 Likes
It’s two weather cards combined. Here’s the code with a small update to get rid of the visible rounded border between the cards:
type: custom:vertical-stack-in-card
cards:
- type: custom:weather-card
entity: weather.home_assistant
details: false
forecast: false
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:hourly-weather
entity: weather.home_assistant
icons: true
show_precipitation_amounts: false
show_precipitation_probability: true
num_segments: "9"
name: " "
card_mod:
style: |
ha-card {
border: none;
}
2 Likes