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)
2 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:
2 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