Sorry, I was referring to the card below with the blue circle
Ow that is an custom card:
- type: custom:compass-card
header: false
language: nl
indicator_sensors:
- sensor: sensor.bresser51_wind_direction_sector_adjusted
indicator:
type: arrow_inward
value_sensors:
- sensor: sensor.bresser51_wind_beaufort
Are there more updates planned on this? I’m curious how all your pages look like, for inspiration.
Still very much a work in progress, but I am liking it very much.
My main screen:
My climate screen (something is wrong with the graphs, have to look into this):
My network screen:
The other two screen are for maintenance and one for settings.
I am still in the process of moving everything I have made in my ‘old’ dashboard to this one, next up are the media pages.
where do you get the information from RPI 4 from? And can you share the code of this card?
I got the info by following the steps from this youtube video:
“How To Monitor Home Assistant Performance” by KPeyanski
I copied the design of the card from someone on this website and modified it to my needs. I don’t remember from where, probably from here:
This is the design code:
type: custom:stack-in-card
title: Raspberry Pi 4 model B
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 18px;
}
.card-header {
padding-top: 1px;
padding-bottom: 1px;
color: var(--secondary-text-color);
font-weight: bold !important;
}
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: true
background: true
cards:
- type: vertical-stack
cards:
- type: grid
columns: 2
square: false
cards:
- type: custom:button-card
name: Power Status
icon: mdi:lightning-bolt
entity: binary_sensor.rpi_power_status
show_icon: true
show_label: false
show_name: true
show_state: true
state:
- value: 'off'
styles:
img_cell:
- background-color: rgba(77, 163, 100, 0.5)
icon:
- color: var(--card-background-color)
- operator: default
styles:
icon:
- color: var(--card-background-color)
img_cell:
- animation: blink 2s ease infinite
- opacity: 0.7
- background-color: '#bf5e5e'
styles:
icon:
- color: null
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
- color: ''
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 15px
- margin-left: 12px
- color: var(--secondary-text-color)
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- border-radius: 50%
- place-self: center
- width: 30px
- height: 30px
grid:
- grid-template-areas: '"i n" "i s" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 15px
- box-shadow: null
- padding: 6px
size: 60%
- type: custom:button-card
name: Last Boot
icon: mdi:restart
entity: sensor.last_booth_since
show_icon: true
show_label: false
show_name: true
show_state: true
styles:
icon:
- color: var(--card-background-color)
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
- color: ''
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 15px
- margin-left: 12px
- color: var(--secondary-text-color)
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
img_cell:
- border-radius: 50%
- place-self: center
- width: 30px
- height: 30px
- background-color: rgba(77, 163, 100, 0.5)
grid:
- grid-template-areas: '"i n" "i s" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
card:
- border-radius: 15px
- box-shadow: null
- padding: 6px
size: 60%
- type: custom:bar-card
card_mod:
style: |-
ha-card{
--bar-card-border-radius: 5px;
border-radius: 10px;
box-shadow:
}
bar-card-value {
font-size: 12px;
font-weight: bold;
color: var(--secondary-text-color);
}
bar-card-name {
color: var(--secondary-text-color);
font-size: 12px;
font-weight: bold;
}
entities:
- entity: sensor.processor_use
name: CPU
color: rgba(244, 196, 48, 0.7)
- entity: sensor.memory_use_percent
name: RAM
color: rgba(15, 82, 128, 0.7)
- entity: sensor.disk_use_percent
name: HDD
icon: mdi:harddisk
color: rgba(77, 163, 100, 0.7)
- entity: sensor.processor_temperature
name: CPU
icon: hass:thermometer
color: rgba(120, 24, 74, 0.7)
columns: 1
direction: right
positions:
icon: outside
indicator: 'off'
name: outside
value: inside
height: 20px
width: 85%
decimal: '0'
- type: grid
square: false
columns: 2
cards:
- type: custom:stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_use
color: rgba(244, 196, 48, 0.7)
- entity: sensor.memory_use_percent
color: rgba(15, 82, 128, 0.7)
hours_to_show: 24
points_per_hour: 4
lower_bound: ~0
upper_bound: 100
line_width: 1
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: custom:stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_temperature
color: rgba(120, 24, 74, 0.7)
hours_to_show: 24
points_per_hour: 4
lower_bound: ~0
upper_bound: 100
line_width: 1
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
1 Like
Mind sharing your room yaml?
Sure, no problem. These are the first 4, but i hope you’ll get what you want!?
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Kamers
card_mod:
style: |
ha-card {
margin-top: -10px;
margin-bottom: -10px;
margin-left: 1px;
margin-right: 1px;
--title-font-size: 16px !important;
}
- type: custom:layout-card
layout_type: custom:horizontal-layout
cards:
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
secondary: >-
{{ states("sensor.mi_air_purifier_3_3h_temperature") |
round(0) }} °C
icon: mdi:sofa
entity: light.woonkamer_lampen
tap_action:
action: navigate
navigation_path: woonkamer
hold_action:
action: toggle
icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background-blend-mode: darken;
}
:host {
background-image: url('/local/woonkamer.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
background-size: 50% 100%;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
background-color: rgba(var(--rgb-card-background-color), 0.5);
{% if is_state('light.woonkamer_lampen', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
{% endif %}
--mush-icon-size: 56px;
height: 66px;
margin-left: -10px !important;
}
ha-card {
{% if is_state('light.woonkamer_lampen', 'on') %}
--primary-text-color: {{ 'rgb(var(--rgb-yellow))'}};
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.woonkamer_voorkant_contact
state: 'on'
chip:
type: template
double_tap_action:
action: none
entity: cover
icon: >
{% set
state=states('binary_sensor.woonkamer_voorkant_contact')
%}
{% if state=='off' %}
fapro:door-closed
{% elif state=='on' %}
phu:lift-out-window-open
{% else %}
fapro:door-closed
{% endif %}
icon_color: >-
{% set
state=states('binary_sensor.woonkamer_voorkant_contact')
%}
{% if state=='off' %}
green
{% elif state=='on' %}
red
{% else %}
yellow
{% endif %}
card_mod:
style: >
{% if
is_state('binary_sensor.woonkamer_voorkant_contact',
'on') %}
ha-card {
animation: borderPulse 2s ease-out infinite;
}
@keyframes borderPulse {
50% {
box-shadow: 0 0 20px red;
}
}
{% endif %}
content: null
tap_action:
action: toggle
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.woonkamer
state_not: 'off'
- entity: media_player.woonkamer
state_not: unavailable
- entity: media_player.woonkamer
state_not: standby
- entity: media_player.woonkamer
state_not: paused
chip:
type: template
icon_color: red
icon: |-
{% set media_type = state_attr('media_player.woonkamer',
'app_name') %}
{% if media_type == 'NLZIET' %}
ios:nlziet-2
{% elif media_type == 'Netflix' %}
mdi:netflix
{% elif media_type == 'Videoland' %}
phu:videoland
{% elif media_type == 'Youtube' %}
mdi:youtube
{% elif media_type == 'Spotify' %}
mdi:spotify
{% elif media_type == 'Disney+' %}
phu:disney-plus
{% elif media_type == 'myTuner' %}
mdi:radio
{% else %}
mdi:plex
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.woonkamer_muziek
state_not: 'off'
- entity: media_player.woonkamer_muziek
state_not: unavailable
chip:
type: template
icon_color: blue
picture: >-
{{ state_attr('media_player.woonkamer_muziek',
'entity_picture') }}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% set speed = state_attr('media_player.woonkamer_jbl','volume_level') %}
{% set animation = (1.25 - 2*speed) %}
animation: music {{animation}}s ease-in-out infinite alternate;
transform-origin: 50% 100%
} @keyframes music {
0%, 100% { transform: translateY(0px) scaleX(1); }
20% { transform: translateY(2px) scaleX(0.9); }
40% { transform: rotateY(10deg) rotateZ(-10deg); }
60% { transform: translateY(-4px) scaleX(1.1); }
80% { transform: rotateY(-10deg) rotateZ(10deg); }
}
- type: conditional
conditions:
- entity: group.lounge_windows
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: 0px 0px;
height: 102px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Keuken
secondary: '{{ states("sensor.keuken_temp_temperature") | round(0) }} °C'
icon: fapro:knife-kitchen
entity: light.keuken_lampen
tap_action:
action: navigate
navigation_path: keuken
hold_action:
action: toggle
icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background-blend-mode: darken;
}
:host {
background-image: url('/local/kitchen.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
background-size: 50% 100%;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--mush-icon-size: 56px;
height: 66px;
margin-left: -10px !important;
background-color: rgba(var(--rgb-card-background-color), 0.5);
{% if is_state('light.keuken_lampen', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
{% endif %}
}
ha-card {
{% if is_state('light.keuken_lampen', 'on') %}
--primary-text-color: {{ 'rgb(var(--rgb-yellow))'}};
{% endif %}
}
- type: custom:mushroom-chips-card
chips: null
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: 0px 0px;
height: 102px;
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Tuin
secondary: >-
{{ states("sensor.tuin_temperatuur_temperature") | round(0) }}
°C
icon: fapro:flower-daffodil
entity: light.tuin_lampen
tap_action:
action: navigate
navigation_path: tuin
hold_action:
action: toggle
icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background-blend-mode: darken;
}
:host {
background-image: url('/local/garden.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
background-size: 50% 100%;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--mush-icon-size: 56px;
height: 66px;
margin-left: -10px !important;
background-color: rgba(var(--rgb-card-background-color), 0.5);
{% if is_state('light.tuin_lampen', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
{% endif %}
}
ha-card {
{% if is_state('light.tuin_lampen', 'on') %}
--primary-text-color: {{ 'rgb(var(--rgb-yellow))'}};
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.achterdeur_contact
state: 'on'
chip:
type: template
double_tap_action:
action: none
entity: cover
icon: >
{% set state=states('binary_sensor.achterdeur_contact')
%}
{% if state=='off' %}
fapro:door-closed
{% elif state=='on' %}
fapro:door-open
{% else %}
fapro:door-closed
{% endif %}
icon_color: >-
{% set state=states('binary_sensor.achterdeur_contact')
%}
{% if state=='off' %}
green
{% elif state=='on' %}
red
{% else %}
yellow
{% endif %}
card_mod:
style: >
{% if is_state('binary_sensor.achterdeur_contact',
'on') %}
ha-card {
animation: borderPulse 2s ease-out infinite;
}
@keyframes borderPulse {
50% {
box-shadow: 0 0 20px red;
}
}
{% endif %}
content: null
tap_action:
action: toggle
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
background: none;
box-shadow: 0px 0px;
height: 102px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Slaapkamer
secondary: >-
{{ states("sensor.slaapkamer_temp_temperature") | round(0) }}
°C
icon: fapro:bed
entity: light.slaapkamer_alle_lampen
tap_action:
action: navigate
navigation_path: slaapkamer
hold_action:
action: toggle
icon_color: '{{ ''yellow'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background-blend-mode: darken;
}
:host {
background-image: url('/local/slaapkamer.jpg') , linear-gradient(to right, rgba(var(--rgb-card-background-color), 1), rgba(var(--rgb-card-background-color), 0));
background-size: 50% 100%;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: lighten;
--mush-icon-size: 56px;
height: 66px;
margin-left: -10px !important;
background-color: rgba(var(--rgb-card-background-color), 0.5);
{% if is_state('light.mantra_smart_ceiling_fan', 'on') %}
box-shadow: 0 0 20px rgba(0, 150, 136, 0.6);
{% endif %}
}
ha-card {
{% if is_state('light.mantra_smart_ceiling_fan', 'on') %}
--primary-text-color: {{ 'rgb(var(--rgb-yellow))'}};
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.slaapkamer_raam_contact
state: 'on'
chip:
type: template
double_tap_action:
action: none
entity: cover
icon: >
{% set
state=states('binary_sensor.slaapkamer_raam_contact') %}
{% if state=='off' %}
fapro:door-closed
{% elif state=='on' %}
phu:lift-out-window-open
{% else %}
fapro:door-closed
{% endif %}
icon_color: >-
{% set
state=states('binary_sensor.slaapkamer_raam_contact') %}
{% if state=='off' %}
green
{% elif state=='on' %}
red
{% else %}
yellow
{% endif %}
card_mod:
style: >
{% if
is_state('binary_sensor.slaapkamer_raam_contact',
'on') %}
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
animation: borderPulse 2s ease-out infinite;
}
@keyframes borderPulse {
50% {
box-shadow: 0 0 20px red;
}
}
{% endif %}
content: null
tap_action:
action: toggle
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.slaapkamer_tv
state_not: 'off'
- entity: media_player.slaapkamer_tv
state_not: unavailable
chip:
type: template
icon_color: red
icon: >-
{% set media_type =
state_attr('media_player.slaapkamer_tv',
'app_name') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'Netflix' %}
mdi:netflix
{% elif media_type == 'Videoland' %}
mdi:video
{% elif media_type == 'YouTube' %}
mdi:youtube-tv
{% else %}
mdi:plex
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
- type: conditional
conditions:
- entity: fan.mantra_smart_ceiling_fan
state: 'on'
chip:
type: template
icon_color: green
icon: mdi:fan
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
animation: spin 1s linear infinite;
}
alignment: end
card_mod:
style: |
ha-card {
background: none;
box-shadow: 0px 0px;
height: 102px;
}
view_layout:
grid-area: favorites
Thanks everyone for sharing your setups!
I have been busy lately, but I added three more tablet screenshots to the first post for you. Will also add the code to Github when I have time.
1 Like
I wanted to share how my adaptive dashboard looks, and thank you for a great dashboard @ArenaCloser 
I have changed some things, including the theme colors etc, but the logic with your grid systems and navigation is stil very much intact 
Here are images of my desktop and mobile variants:
7 Likes
Cool dashboard! (And outside temperature, haha 
). Your theme looks great, the desktop navigation bar looks especially good with it.
Could you share your energy price (today and tomorrow) graph?
1 Like
Thank you, its the Noctis theme I use 
And yes, its cold in Norway this time of year 
Its an Apex card, see here:
type: custom:apexcharts-card
header:
show: true
title: Energyprice Today & Tomorrow
show_states: true
colorize_states: true
graph_span: 2d
span:
start: day
now:
show: true
yaxis:
- show: true
min: 0
apex_config:
forceNiceScale: true
tickAmount: 2
labels:
offsetX: 40
apex_config:
chart:
height: 130px
width: 120%
offsetX: -55
offsetY: 26
grid:
show: false
legend:
show: false
xaxis:
labels:
show: false
axisBorder:
show: false
axisTicks:
show: false
title:
style:
fontSize: 10px
series:
- entity: sensor.nordpool_oslo
name: Today
data_generator: |
return entity.attributes.raw_today.map((entry) => {
return [new Date(entry.start), entry.value];
});
type: column
color: '#2eb9ff'
stroke_width: 4
show:
legend_value: false
in_header: false
- entity: sensor.nordpool_oslo
name: Tomorrow
data_generator: |
return entity.attributes.raw_tomorrow.map((entry) => {
return [new Date(entry.start), entry.value];
});
type: column
color: '#FF9800'
stroke_width: 4
show:
legend_value: false
in_header: false
- entity: sensor.nordpool_oslo
name: Price Now
type: area
extend_to: now
float_precision: 2
stroke_width: 0
color: '#2eb9ff'
show:
in_chart: false
in_header: true
I do have mini-graph-card I think i like better, but its not able to show the line for the current hour, so I am not totally sure which one to go for.
Here is the mini graph card as well:
Downside is it needs 48 hourly sensors 
type: custom:mini-graph-card
entities:
- entity: sensor.nordpool_oslo
show_graph: false
show_state: true
state_adaptive_color: true
- entity: sensor.nordpool_today_hr_00_01
name: Today hour 1
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_01_02
name: Today hour 2
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_02_03
name: Today hour 3
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_03_04
name: Today hour 4
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_04_05
name: Today hour 5
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_05_06
name: Today hour 6
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_06_07
name: Today hour 7
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_07_08
name: Today hour 8
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_08_09
name: Today hour 9
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_09_10
name: Today hour 10
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_10_11
name: Today hour 11
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_11_12
name: Today hour 12
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_12_13
name: Today hour 13
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_13_14
name: Today hour 14
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_14_15
name: Today hour 15
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_15_16
name: Today hour 16
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_16_17
name: Today hour 17
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_17_18
name: Today hour 18
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_18_19
name: Today hour 19
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_19_20
name: Today hour 20
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_20_21
name: Today hour 21
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_21_22
name: Today hour 22
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_22_23
name: Today hour 23
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_today_hr_23_24
name: Today hour 24
color: '#03a9f4'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_00_01
name: Tomorrow hour 1
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_01_02
name: Tomorrow hour 2
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_02_03
name: Tomorrow hour 3
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_03_04
name: Tomorrow hour 4
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_04_05
name: Tomorrow hour 5
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_05_06
name: Tomorrow hour 6
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_06_07
name: Tomorrow hour 7
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_07_08
name: Tomorrow hour 8
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_08_09
name: Tomorrow hour 9
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_09_10
name: Tomorrow hour 10
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_10_11
name: Tomorrow hour 11
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_11_12
name: Tomorrow hour 12
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_12_13
name: Tomorrow hour 13
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_13_14
name: Tomorrow hour 14
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_14_15
name: Tomorrow hour 15
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_15_16
name: Tomorrow hour 16
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_16_17
name: Tomorrow hour 17
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_17_18
name: Tomorrow hour 18
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_18_19
name: Tomorrow hour 19
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_19_20
name: Tomorrow hour 20
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_20_21
name: Tomorrow hour 21
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_21_22
name: Tomorrow hour 22
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_22_23
name: Tomorrow hour 23
color: '#ff9800'
show_legend: false
- entity: sensor.nordpool_tomorrow_hr_23_24
name: Tomorrow hour 24
color: '#ff9800'
show_legend: false
name: Energyprice current, today, tomorrow
group_by: hour
hours_to_show: 1
hour24: true
icon: mdi:cash-multiple
show:
graph: bar
labels: true
style: |
}
.card-content {
padding-top: 0px;
padding-left: 10px;
padding-bottom: 0px;
}
1 Like
Thank you
So far it’s only setting lights to a given level, but I also want to use it to set temperatures and basic presence/motion detection when I’m not home.
this looks good, can you share your house mode card?
Hello everyone,
I think the dashboard is great and would like to use it for myself.
However, I’m having trouble with the two different views.
PC and tablet work perfectly, but it doesn’t switch to mobile on my iPhone.
When I change
mediaquery:
‘(max-width: 400px)’:
to 800px I see the footer but not at the bottom of the screen but directly below the last card.
Can you share your complete code? That would be awesome.
Can you please share the YAML of the camera and energy cards? I really like them!
Sure, here you go:
Camera
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
cards:
- square: false
type: grid
columns: 1
cards:
- square: false
type: grid
columns: 1
cards:
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_all
card:
type: grid
square: false
columns: 2
cards:
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.voortuin_main
tap_action:
action: call-service
service: script.camera_1_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.oprit_main
tap_action:
action: call-service
service: script.camera_2_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.zijpad_main
tap_action:
action: call-service
service: script.camera_3_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.achtertuin_main
tap_action:
action: call-service
service: script.camera_4_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_1
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.voortuin_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_2
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.oprit_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_3
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.zijpad_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_4
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.achtertuin_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:microsoft-windows
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_all') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_all_selection
- type: template
icon: mdi:numeric-1-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_1') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_1_selection
- type: template
icon: mdi:numeric-2-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_2') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_2_selection
- type: template
icon: mdi:numeric-3-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_3') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_3_selection
- type: template
icon: mdi:numeric-4-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_4') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_4_selection
- type: template
icon: mdi:fullscreen
icon_color: disabled
content: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: fullscreen
content:
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
cards:
- square: false
type: grid
columns: 1
cards:
- square: false
type: grid
columns: 1
cards:
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_all
card:
type: grid
square: false
columns: 2
cards:
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.voortuin_main
tap_action:
action: call-service
service: script.camera_1_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.oprit_main
tap_action:
action: call-service
service: script.camera_2_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.zijpad_main
tap_action:
action: call-service
service: script.camera_3_selection
- type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.achtertuin_main
tap_action:
action: call-service
service: script.camera_4_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_1
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.voortuin_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_2
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.oprit_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_3
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.zijpad_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: conditional
conditions:
- condition: state
entity: input_select.list_camera
state: camera_4
card:
type: picture-entity
show_state: false
show_name: false
camera_view: live
entity: camera.achtertuin_main
tap_action:
action: call-service
service: script.camera_all_selection
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:microsoft-windows
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_all') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_all_selection
- type: template
icon: mdi:numeric-1-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_1') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_1_selection
- type: template
icon: mdi:numeric-2-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_2') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_2_selection
- type: template
icon: mdi:numeric-3-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_3') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_3_selection
- type: template
icon: mdi:numeric-4-box
entity: input_select.list_camera
icon_color: |
{% if is_state(entity, 'camera_4') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.camera_4_selection
- type: template
icon: mdi:fullscreen
icon_color: amber
content: ''
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.close_popup
alignment: justify
card_mod:
style: |
.chip-container {
}
ha-card {
--chip-background: rgba(var(--cstm-rgb-on-secondary), 0.05);
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-radius: var(--mush-control-border-radius);
--chip-height: 50px;
}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
padding: 8px;
width: auto;
}
alignment: justify
card_mod:
style: |
.chip-container {
}
ha-card {
--chip-background: rgba(var(--cstm-rgb-on-secondary), 0.05);
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-radius: var(--mush-control-border-radius);
--chip-height: 45px;
}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
padding: 8px;
width: auto;
}
Energy:
type: custom:stack-in-card
keep:
box_shadow: false
border_radius: true
margin: true
outer_padding: false
background: false
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
cards:
- type: energy-date-selection
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- square: false
type: grid
columns: 1
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
cards:
- square: false
type: grid
columns: 1
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
cards:
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy1
card:
type: energy-distribution
link_dashboard: false
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy2
card:
type: energy-usage-graph
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy3
card:
type: energy-gas-graph
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy4
card:
type: energy-devices-graph
- type: conditional
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
conditions:
- condition: state
entity: input_select.list_energie
state: energy5
card:
type: energy-solar-graph
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:home-analytics
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy1') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_1_selection
- type: template
icon: mdi:lightning-bolt
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy2') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_2_selection
- type: template
icon: mdi:gas-burner
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy3') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_3_selection
- type: template
icon: mdi:solar-power
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy5') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_5_selection
- type: template
icon: mdi:chart-bar
entity: input_select.list_energie
icon_color: |
{% if is_state(entity, 'energy4') %}
amber
{% else %}
disabled
{% endif %}
content: ''
tap_action:
action: call-service
service: script.energy_4_selection
alignment: justify
card_mod:
style: |
.chip-container {
}
ha-card {
--chip-background: rgba(var(--cstm-rgb-on-secondary), 0.05);
--chip-box-shadow: none;
--ha-card-box-shadow: none;
--chip-border-radius: var(--mush-control-border-radius);
--chip-height: 45px;
}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
padding: 8px;
width: auto;
}
To make these work, you will need to add a couple of input_select helpers and scripts.
Here is a screenshot of the camera helper:
And the script. I am sure there is a way to have just one script for all camera or energy selections, but I have a script for each selection. To make it work I made a copies of this script and replaced camera_1 with camera_all, camera_2, etc.
alias: camera_1_selection
sequence:
- service: input_select.select_option
data:
option: camera_1
target:
entity_id: input_select.list_camera
description: ""
mode: single
1 Like
The footer navigation should stick to the bottom of the screen when there’s enough content/cards to ‘push’ it to the bottom
1 Like