Thank you for the response. I knew what the footer area values were, my question was the descrepency between the graph values and the header values for temp and humidity when they are supposed to represent the same sensors. I now see that it is just a rounding difference. Also, why do both graph lines show the temp value on the left and humidity on the right? I would think the left end of the orange line would show starting temp value for the timeframe and the right end of the orange line would show current temp value. Same for the blue line but for humidity. My graph seems to switch values from left to right.
3 Likes
Ya that’s just how that card works. You could swap it out with the apexcharts card. When there are multiple lines on the graph, that one gives you a little popup box to show the actual recorded number at that point as you drag your curser over the graph.
Kind of like this:
More button-card than Mushroom but still thought I’d share here: a minimalistic card for controlling Chromecast with Google TV (kind of like the remote that comes with it), using the Android TV Remote integration. On that page they show a dashboard example, but I thought it looked terrible. I prefer my iteration 
The logos in the bottom row are shortcuts to open apps, and will highlight when the app is currently active. To add your own shortcuts to open apps, have a look at this thread.
Code
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
name: Chromecast 4K • Remote
icon: mdi:remote-tv
entity: remote.chromecast_4k
tap_action:
action: more-info
icon_color: red
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
icon: mdi:arrow-left-bottom
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: BACK
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item1
- type: custom:button-card
icon: mdi:arrow-up
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_UP
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_UP
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item2
- type: custom:button-card
icon: mdi:home
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: HOME
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item3
- type: custom:button-card
icon: mdi:arrow-left
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_LEFT
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_LEFT
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item4
- type: custom:button-card
icon: mdi:cursor-pointer
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_CENTER
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_CENTER
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item5
- type: custom:button-card
icon: mdi:arrow-right
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_RIGHT
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_RIGHT
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item6
- type: custom:button-card
entity: media_player.tv
icon: |
[[[ if (entity.attributes.is_volume_muted) {
return 'mdi:volume-off'
} else {
return 'mdi:volume-high'
}
]]]
tap_action:
action: call-service
service: script.samsung_tv_volume_mute
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item7
- type: custom:button-card
icon: mdi:arrow-down
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_DOWN
hold_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.chromecast_4k
command: DPAD_DOWN
num_repeats: 1
delay_secs: 0.5
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item8
- type: custom:button-card
entity: remote.chromecast_4k
icon: mdi:youtube
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: https://www.youtube.com
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: |
[[[ if (entity.attributes.current_activity == 'com.youtube') {
return 'rgba(var(--mush-rgb-red),0.3)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--mush-rgb-red),0.9)
size: 20px
view_layout:
grid-area: item9
- type: custom:button-card
entity: remote.chromecast_4k
icon: mdi:netflix
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: netflix://
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: >
[[[ if (entity.attributes.current_activity ==
'com.netflix.ninja') {
return 'rgba(var(--mush-rgb-red),0.3)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--mush-rgb-red),0.9)
size: 20px
view_layout:
grid-area: item10
- type: custom:button-card
entity: remote.chromecast_4k
entity_picture: https://upload.wikimedia.org/wikipedia/commons/a/ad/AppleTVLogo.svg
show_entity_picture: true
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: https://tv.apple.com
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: >
[[[ if (entity.attributes.current_activity ==
'com.apple.atve.androidtv.appletv') {
return 'rgba(var(--cstm-rgb-on-secondary),0.2)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 22px
view_layout:
grid-area: item11
- type: custom:button-card
entity: remote.chromecast_4k
icon: mdi:spotify
tap_action:
action: call-service
service: remote.turn_on
service_data:
entity_id: remote.chromecast_4k
activity: spotify://
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: >
[[[ if (entity.attributes.current_activity ==
'com.spotify.tv.android') {
return 'rgba(var(--mush-rgb-green),0.2)'
} else {
return 'rgba(var(--cstm-rgb-on-secondary),0.05)'
} ]]]
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--mush-rgb-green),0.9)
size: 20px
view_layout:
grid-area: item12
layout:
grid-template-columns: 1fr 1fr 1fr 1fr
grid-template-rows: min-content
grid-template-areas: |
". item2 . item1"
"item4 item5 item6 item3"
". item8 . item7"
"item9 item10 item11 item12"
gap: 0px
margin: '-4px 8px 4px'
You’ll see I use a custom variable, var(--cstm-rgb-on-secondary). You can set it in your theme:
mode:
light:
cstm-rgb-on-secondary: 51, 51, 51
dark:
cstm-rgb-on-secondary: 221, 221, 221
13 Likes
That remote looks very good.
But it’s not working with me, this is what is get:
Repaced all the remote.yourremote with my remote.
Thanks
Looks like the buttons are there but with 1px height or something. Please check your values for var(--mush-control-height) and the other mushroom theme variables, or replace them with e.g. 14 px in the button-cards.
You should check out the Firemote Card. Instead of having a card that’s “Kind of like the remote that comes with it”, you can have a card that actually IS the remote that comes with it. Also supports Shield, Fire TV and Apple TV. It’s great combined with a popup card to save space on the dashboard.
1 Like
This is what it looks like, copied it from your code.
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:button-card
icon: mdi:arrow-left-bottom
tap_action:
action: call-service
service: remote.send_command
service_data:
entity_id: remote.mibox4
command: BACK
show_icon: true
show_name: false
styles:
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--cstm-rgb-on-secondary),0.05)
- border-radius: var(--mush-control-border-radius)
- place-self: center
- height: var(--mush-control-height)
icon:
- color: rgba(var(--cstm-rgb-on-secondary),0.9)
size: 20px
view_layout:
grid-area: item1
The problem above what fixed by changing the following:
- border-radius: 14px - height: 42px
Solutions mentioned by ArenaCloser in a PB, thanks again! 
There is only one thing that is not working with me.
When i open Netflix and start watchting, the netflix logo on the remote does not get colored or something, any idea why is that?
1 Like
When Netflix is running, check the value of the current_activity attribute of your remote. For me it’s com.netflix.ninja, maybe for you it’s different. You can get the button to light up by editing the if-statement:
Continuing the fun with more cards. Some printer cards have already been shared here, but I’ll just add to the variety with another one. Largely inspired by this post, it uses the custom bar-card.
Version with vertical bars
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Epson WF2540
entity: sensor.epson_wf_2540_series
secondary: |-
{% if is_state('sensor.epson_wf_2540_series', 'idle') %}
Aan • Inactief
{% elif is_state('sensor.epson_wf_2540_series', 'printing') %}
Aan • Printen...
{% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}
Aan • Gestopt
{% else %}
Uit
{% endif %}
icon: mdi:printer
icon_color: >-
{{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
"disabled" }}
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
direction: up
entities:
- color: MediumTurquoise
entity: sensor.epson_wf_2540_series_cyan_ink
name: C
- color: Gold
entity: sensor.epson_wf_2540_series_yellow_ink
name: 'Y'
- color: MediumOrchid
entity: sensor.epson_wf_2540_series_magenta_ink
name: M
- color: rgb(var(--cstm-rgb-on))
entity: sensor.epson_wf_2540_series_black_ink
name: B
height: 120px
positions:
icon: 'off'
value: outside
name: outside
target: 0
stack: horizontal
card_mod:
style: |
ha-card {
--bar-card-border-radius: 14px;
margin: -12px -2px -24px -2px;
box-shadow: none;
}
bar-card-name {
font-size: 12px;
}
bar-card-value {
font-size: 12px
}I’m not such a big fan of the thick bars though. After playing around I came up with this compact version with thin horizontal lines, I love it.
Version with horizontal bars
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Epson WF2540
entity: sensor.epson_wf_2540_series
secondary: |-
{% if is_state('sensor.epson_wf_2540_series', 'idle') %}
Aan • Inactief
{% elif is_state('sensor.epson_wf_2540_series', 'printing') %}
Aan • Printen...
{% elif is_state('sensor.epson_wf_2540_series', 'stopped') %}
Aan • Gestopt
{% else %}
Uit
{% endif %}
icon: mdi:printer
icon_color: >-
{{ "teal" if is_state(entity, "idle") or is_state(entity, "printing") else
"disabled" }}
tap_action:
action: more-info
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
direction: right
entities:
- color: MediumTurquoise
entity: sensor.epson_wf_2540_series_cyan_ink
name: C
- color: Gold
entity: sensor.epson_wf_2540_series_yellow_ink
name: 'Y'
- color: MediumOrchid
entity: sensor.epson_wf_2540_series_magenta_ink
name: M
- color: rgb(var(--cstm-rgb-on))
entity: sensor.epson_wf_2540_series_black_ink
name: B
height: 8px
positions:
icon: 'off'
value: 'off'
name: 'off'
target: 0
stack: vertical
card_mod:
style: |
ha-card {
--bar-card-border-radius: 30px;
margin: -12px -2px -8px -2px;
box-shadow: none;
}For the black ink, I’m using a custom theme variable again that returns white color in dark mode, var(--cstm-rgb-on):
mode:
light:
cstm-rgb-on: 30, 30, 30
dark:
cstm-rgb-on: 255, 255, 255
11 Likes
hi, which font did you use?
Would you like to share how this card ended upp in your setup. I guess your version might be better than mine hacked up thing ofacard.
And would you like to describe what values/sensors you are using.
It is easy to mix and choose the wrong sensor, since there are
Watt, watthours, daily, etc… for all enteties…
Below is how my homepage dash on mobile looks like. It just has the bare essentials. All rooms etc (except few exceptions) are on other views (0 for floor 0 etc)
What sensors to use is difficult to say an up to you. In some cases I just want to see current power consumption in watt and sometimes (for instance counting solar power for that day) I use KwH. Generally you will have current power consumption available but KwH not. You will have to create a custom sensor in that case
A thousand thanks! What did you use for the icons instead? I can’t find these here like for example “fapro:fork-knife-duotone”
Don’t you use the play/pause and volume buttons with this remote?
Make default Lovelace card to Mushroom design
Using card mod theme.
- Define default color variable in your theme
mush-rgb-red: 244, 67, 54
mush-rgb-pink: 233, 30, 99
mush-rgb-purple: 156, 39, 176
mush-rgb-deep-purple: 103, 58, 183
mush-rgb-indigo: 63, 81, 181
mush-rgb-blue: 33, 150, 243
mush-rgb-light-blue: 3, 169, 244
mush-rgb-cyan: 0, 188, 212
mush-rgb-teal: 0, 150, 136
mush-rgb-green: 76, 175, 80
mush-rgb-light-green: 139, 195, 74
mush-rgb-lime: 205, 220, 57
mush-rgb-yellow: 255, 235, 59
mush-rgb-amber: 255, 193, 7
mush-rgb-orange: 255, 152, 0
mush-rgb-deep-orange: 255, 87, 34
mush-rgb-brown: 121, 85, 72
mush-rgb-grey: 158, 158, 158
mush-rgb-blue-grey: 96, 125, 139
mush-rgb-black: 0, 0, 0
mush-rgb-white: 255, 255, 255
Default lovelace glance card
card-mod-glance-yaml: |
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
.name {
font-weight: bold;
}
state-badge {
{% if is_state(config.entity, 'on') %}
color: rgba(var(--mush-rgb-green), 1);
background: rgba(var(--mush-rgb-green), .2);
{% elif is_state(config.entity, 'off') %}
color: rgba(var(--mush-rgb-red), 1);
background: rgba(var(--mush-rgb-red), .2);
{% else %}
color: rgba(var(--mush-rgb-blue), 1);
background: rgba(var(--mush-rgb-blue), .2);
{% endif %}
margin: 15px 0px;
--mdc-icon-size: 22px;
}
state-badge + div {
font-weight: bold;
font-size: 12px;
color: var(--secondary-text-color)
}
Default lovelace entities card
card-mod-row-yaml: |
hui-generic-entity-row:
$:
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
state-badge {
{% if is_state(config.entity, 'on') %}
color: rgba(var(--mush-rgb-green), 1);
background: rgba(var(--mush-rgb-green), .2);
{% elif is_state(config.entity, 'off') %}
color: rgba(var(--mush-rgb-red), 1);
background: rgba(var(--mush-rgb-red), .2);
{% else %}
color: rgba(var(--mush-rgb-blue), 1);
background: rgba(var(--mush-rgb-blue), .2);
{% endif %}
background-size: cover;
background-position: center;
border-radius: 100% !important;
margin: 0 15px 0 0;
--mdc-icon-size: 22px;
}
.secondary {
overflow: unset !important;
white-space: normal !important;
font-weight:400 !important;
font-size: 12px !important;
font-weight: bold !important;
}
.info, .value {
margin-left: 0px !important;
font-weight: bold;
padding: 16px 0;
position: relative;
}
Default HA more info dialog
card-mod-more-info-yaml: |
ha-more-info-info:
$:
state-card-display,state-card-button,state-card-input_button,state-card-input_number,state-card-media_player,state-card-input_select:
$:
.: |
.state {
font-weight: bold;
}
state-info:
$:
state-badge:
$:
ha-state-icon:
$: |
ha-icon {
display: block;
}
ha-icon, ha-svg-icon {
height: 22px !important;
position: relative;
top: -1px;
color: rgba(var(--mush-rgb-blue), 1) !important;
}
@media screen and (max-width: 800px) {
ha-icon, ha-svg-icon {
top: 2px !important;
}
}
.: |
state-badge {
color: rgba(var(--mush-rgb-blue), 1) !important;
background: rgba(var(--mush-rgb-blue), .2);
margin: 0 15px 0 0;
background-size: contain;
border-radius: 100% !important;
--mdc-icon-size: 22px;
}
.time-ago {
overflow: unset !important;
white-space: normal !important;
font-weight:400 !important;
font-size: 12px !important;
font-weight: bold !important;
}
.info, .state {
margin-left: 0px !important;
font-weight: bold;
padding: 8px 0;
position: relative;
}
7 Likes
Those are paid Fontawesome icons.
Mushroom inspired Energy-Card (Electricity, Water, Gas)
A compact card with tons of information about Electrical-Energy, Water and Gas-Consumption per Day, Month, Week and Year.
This card uses the following components:
- Stack in a card
- ApexChart-card
- History-Explorer-Card
- Mushroom-Cards
- Button-card
- Tabbed-card
- Browser-Mod (for the Pop-Up-Card)
Can´t Paste the YAML-Code here - too long
YAML-Code for the Card
YAML-Code for the Pop-Up-Card
31 Likes
I like the use of the icons in the Sankey chart! Will add those to mine too.
1 Like