thanks mate,
just another question, is the last one I promess hahha
I am making an mobile version and the background i need to stay as pure white “#FFFFFF”, I can set the background color in this version too?
no worries, this way i´m learning some stuff 
try this:
modes:
light:
primary-background-color: "#FFFFFF"
secondary-background-color: "#FFFFFF"
card-background-color: "#FFFFFF"
dark:
primary-background-color: "#FFFFFF"
secondary-background-color: "#FFFFFF"
card-background-color: "#FFFFFF"
guess you need to change the icon-color so it matches the white:
paper-tab[aria-selected=true] {
color: var(--google-blue); ### <--- ACTIVE TAP COLOR ###
}
paper-tab {
color: var(--header-all-tabs-color); ### <--- ICON COLOR ###
border-radius: 5px;
height: 32px;
padding: 0 20px;
}
2 Likes
I got one! Lot of trial and error went into this one.
Introducing a Mushroom Light Card equipped with pop-up and auto-entities card as well!
Code
type: custom:mushroom-light-card
entity: light.lr_light_group
name: All Living Room Lights
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
icon: mdi:sofa-outline
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: All Living Room Lights
content:
type: custom:auto-entities
card:
type: entities
filter:
include:
- group: light.lr_light_group
options:
type: custom:mushroom-light-card
show_brightness_control: true
use_light_color: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: true
tap_action:
action: toggle
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if is_state(config.entity, 'on') %}
background: rgba({{r}}, {{g}}, {{b}},0.1);
--primary-text-color: rgb({{r}}, {{g}}, {{b}});
--secondary-text-color: rgba({{r}}, {{g}}, {{b}},0.5);
{% endif %}
}
ha-card {
padding: 8px 24px !important;
}
ha-card {
--badge-size: 0px;
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
exclude: []
sort:
method: friendly_name
card_mod:
style: |
ha-card {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if is_state(config.entity, 'on') %}
background: rgba({{r}}, {{g}}, {{b}},0.1);
--primary-text-color: rgb({{r}}, {{g}}, {{b}});
--secondary-text-color: rgba({{r}}, {{g}}, {{b}},0.5);
{% endif %}
}
ha-card {
padding: px 24px !important;
}
ha-card {
--badge-size: 0px;
}
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
What you’ll need
(thanks to @thomasloven)
Cards Used
- Mushroom Light Card
- Auto Entities
Prerequisites Needed
- Using the “Group” helper - create a group with all your lights combined together. In my case it’s “light.lr_light_group”
Use Case
- For me it’s mobile optimized as it makes the dashboard smaller and more effecient
- With auto entities card it allows for the dashboard to talk with the backend. I.e those pesky times when you have to remove or change an entity in the backend and then have to update the dashboard side as well. Now it’ll automatically update!
- Can be expanded into other entity types then just lights
Hope this all helps!
30 Likes
Information Light Card: I use this card to see if any lights are on and how many (mostly used when I’am not home to see if someone forgot to turn off any lights).
I use automations and motions sensors for all lights, but that can not fix all scenarios in my home! To many peolpe and animals with diffrent time schedules!
We also have 73 lights and I don’t want to have endless of lights in a popup menu or have a dedicated dashboard for all lights.
This one also have the rhyb’s animated icon when a light is on! 
How to setup;
- You need a template for all lights. Put this code in the config file of Home Assistant
(check the config before restart) If you are not using Philips Hue then this line is not needed | rejectattr(‘attributes.is_hue_group’, ‘true’)
Template Sensor
- platform: template
sensors:
lights_on:
friendly_name: "Lights On"
value_template: >
{{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('attributes.is_hue_group', 'true')
| map(attribute='entity_id')
| list | count }}
-
Areas in your Home Assistant needs to have all the lights.
Change the bold text to your own Areas in the code of Light Card - {% set areas = [‘Vardagsrum’] %} -
A input_boolean.lights_on helper (to open and close the card).
-
The code to be used in Mushroom cards.
Light Card
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.lights_on
primary: Belysningen i Hemmet
secondary: >
{% if is_state('sensor.lights_on','0') %} Släckt {%else%}
{{states('sensor.lights_on')}}/{{ states.light |
rejectattr('attributes.is_hue_group', 'true') |
map(attribute='entity_id') | list | count }} Lampor är på {% endif
%}
icon: >
{% if is_state('sensor.lights_on','0') %} mdi:lightbulb {%else%}
mdi:lightbulb-on {% endif %}
icon_color: >
{% if is_state('sensor.lights_on','0') %} grey {%else%} orange {%
endif %}
fill_container: false
multiline_secondary: false
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% if is_state('sensor.lights_on', '0') %}
{%else%}
--icon-animation: illumination 2s infinite;
{% endif %}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
card_mod: null
style: |
ha-card {
background: none;
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
entity: input_boolean.lights_on
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else
'mdi:chevron-down' }}
icon_color: black
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-border-width: 0;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.lights_on
state: 'on'
card:
type: custom:vertical-stack-in-card
cards:
- type: markdown
content: >
{% set areas = ['Vardagsrum'] %} {% for rooms in areas %} {%-
set lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['TV Rum'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Sovrum'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Matrum'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Killarnas Rum'] %} {% for rooms in areas %} {%-
set lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Stellas Rum'] %} {% for rooms in areas %} {%-
set lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Gym'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
{% set areas = ['Utomhus'] %} {% for rooms in areas %} {%- set
lights = expand(area_entities(rooms))
|rejectattr('attributes.is_hue_group', 'true')
|selectattr('domain', 'eq', 'light') |list -%} {%- set on =
lights |selectattr('state', 'eq', 'on') |map(attribute='name')
|list -%} {%- if on -%}<b>{{ rooms }}</b>: ({{ on |count }}/{{
lights |count }}) - {{ on | join(', ') }} {% else %}{{ '' }}{%
endif %}{%- endfor %}
card_mod: null
style: |
ha-card {
--ha-card-border-width: 0;
}
Best Regards
Thekholm
16 Likes
A few weeks back I saw the great work on a minimalist inspired room card by @theandouz and had the same thoughts as @PatrickJanson for a smaller version to be able to fit more cards on the screen at once.
I re-worked things a bit to make it smaller and added a few extra “features”.
- The secondary text displays temp and humidity, color is based on the room’s climate devices hvac state (heating, cooling) as well as an icon to quickly display the state.
- The light chip is constant and supports the light entity’s color or a default color if there isn’t one. Single tap brings up a quick popup to show all light entities in that room.
- Can display up to 4 conditional chips at a time (You can add as many as you like but only 4 display) with certain chips bringing up a popup including the beautiful media card from @rhysb. I personally preferred the conditional chips to just display the icon without the circle around it. I found it easier to notice.
Here’s the code. Certainly open to any additional ideas or tweaks.
Minimalist Room Card
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: group.master_bedroom
icon: mdi:bed
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
primary: Master Bedroom
secondary: >-
{{ states('sensor.thermostat_master_bedroom_local_temperature') | round(0)
}}°C | {{ states('sensor.thermostat_master_bedroom_humidity') |
round(0) }}%
layout: horizontal
tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
double_tap_action:
action: navigate
navigation_path: /mobile-dashboard/master-bedroom
hold_action:
action: toggle
badge_icon: >
{% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'heating') %}
mdi:radiator
{% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'cooling') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: >
{% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'heating') %}
red
{% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action',
'cooling') %}
#03A9F4
{% else %} {% endif %}
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -50px;
left: -155px;
overflow: visible !important;
white-space: normal !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -52px;
left: -155px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -43px;
top: 55px;
}
.: |
:host {
--mush-icon-size: 146px;
--secondary-text-color:
{% if is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'heating') %}
red
{% elif is_state_attr('climate.thermostat_master_bedroom', 'hvac_action', 'cooling') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
style: |
mushroom-badge-icon {
left: 69px;
top: 25px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb
secondary: none
entity: light.master_bedroom_light
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.master_bedroom_light
name: Master Bedroom Light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-light-card
entity: light.closet_light
use_light_color: true
show_brightness_control: true
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
hold_action:
action: toggle
double_tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'on') %}
{% if state_attr(config.entity, 'rgb_color') == none %}
--icon-color: rgb(255,190,137) !important;
--shape-color: rgb(255,190,137, 0.2 ) !important;
{% else %}
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
{% endif %}
}
.: |
ha-card {
width: 66px;
margin-left: 68%;
top: -178px;
background: none;
}
:host {
--mush-icon-size: 38px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.in_bed
state: 'on'
chip:
type: entity
entity: input_boolean.in_bed
icon: mdi:bed
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: binary_sensor.motion_master_bedroom_occupancy
state: 'on'
chip:
type: entity
entity: binary_sensor.motion_master_bedroom_occupancy
icon: mdi:motion-sensor
icon_color: blue
content_info: none
- type: conditional
conditions:
- entity: fan.master_bedroom_fan
state: 'on'
chip:
type: entity
entity: fan.master_bedroom_fan
icon: mdi:fan
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Fan
content:
type: custom:mushroom-fan-card
entity: fan.master_bedroom_fan
name: Master Bedroom Fan
icon_animation: true
fill_container: false
show_percentage_control: true
show_oscillate_control: false
collapsible_controls: true
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: switch.plug_master_bedroom
state: 'on'
chip:
type: entity
entity: switch.plug_master_bedroom
icon: mdi:power-plug
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Plugs
content:
type: custom:mushroom-entity-card
entity: switch.plug_master_bedroom
name: Master Bedroom Plug
icon: mdi:power-plug
icon_color: '#03A9F4'
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: media_player.emby_bedroom
state: playing
chip:
type: entity
entity: media_player.emby_bedroom
icon: mdi:play-pause
icon_color: blue
content_info: none
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Media Player
content:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.emby_bedroom
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.emby_bedroom
state_not: 'off'
- entity: media_player.emby_bedroom
state_not: idle
card:
entity: media_player.emby_bedroom
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.emby_bedroom', 'idle') %}
background: url( '{{ state_attr('media_player.emby_bedroom', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
card_mod:
style:
.: |
ha-card {
width: 66px;
margin-left: 76%;
top: -186px;
background: none;
--chip-border-width: 0;
}
:host {
--mush-icon-size: 20px;
--mush-chip-spacing: -2.9px
}
card_mod:
style: |
ha-card {
height: 178px !important;
width: 178px !important;
}
60 Likes
Came here to share an RGB card that I put together using Mushroom Cards and a few others. I’ve never been a fan of the convoluted way HA manages RGB Bulbs by default and always wanted to build a unified solution. Mushroom Cards make it SUPER easy. Hopefully others find this helpful.
In addition to Mushroom Cards, you’ll need to install the following cards via HACS (or manually)
- stack-in-card - removes the empty gaps between Mushroom cards
- card_mod - Allows for tweaking of cards (Border removal, background and text colors, etc.)
- text-divider-row - Simple and clean way to create a divider with a title
A couple of points to note:
- Card_mod and text-divider-row do not support UI mode. Card_mod, in particular, breaks Mushroom Card’s UI editor functionality. (At least it does in my experience.)
- The entity in my code is actually a Light Group consisting of all my RGB bulb entities. The use of Light Groups is necessary to control multiple RGB bulbs at once.
- The preset background colors leverage the RGB equivalent values of the Kelvin temperature. For example, the Daylight preset uses a Kelvin value of 5500K. In order for the background to reflect the Kelvin “color”, the RGB value of (255, 236, 224) is used.
To adapt this card to your environment, simply copy/paste the YAML into a new card and then change all entity: values to your specific light or light group.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-light-card
entity: light.all_livingroom_bulbs
layout: vertical
primary_info: name
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:text-divider-row
text: Presets
- type: custom:mushroom-chips-card
chips:
- type: light
entity: light.all_livingroom_bulbs
name: Daylight
icon: mdi:lightbulb
content_info: name
use_light_color: false
tap_action:
action: call-service
service: light.turn_on
data:
kelvin: 5500
brightness: 50
transition: 2
target:
entity_id: light.all_livingroom_bulbs
card_mod:
style: |
ha-card {
--chip-background: rgb(255, 236, 224);
--text-color: black;
}
- type: light
entity: light.all_livingroom_bulbs
name: Cool White
tap_action:
action: call-service
service: light.turn_on
data:
kelvin: 3500
brightness: 50
transition: 2
target:
entity_id: light.all_livingroom_bulbs
content_info: name
use_light_color: false
icon: mdi:lightbulb
card_mod:
style: |
ha-card {
--chip-background: rgb(255, 196, 137);
--text-color: black;
}
- type: light
entity: light.living_room_lamps
icon: mdi:lightbulb
name: Cozy
use_light_color: false
content_info: name
tap_action:
action: call-service
service: light.turn_on
data:
transition: 2
brightness: 50
kelvin: 2700
target:
entity_id: light.all_livingroom_bulbs
card_mod:
style: |
ha-card {
--chip-background: rgb(255, 169, 87);
--text-color: black;
}
alignment: center
- type: custom:text-divider-row
text: Manual Adjustments
- type: custom:mushroom-light-card
entity: light.all_livingroom_bulbs
show_brightness_control: true
show_color_control: false
name: Brightness
layout: horizontal
fill_container: false
use_light_color: true
secondary_info: none
icon: mdi:brightness-7
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-light-card
entity: light.all_livingroom_bulbs
show_color_control: true
name: Color
use_light_color: true
layout: horizontal
secondary_info: none
icon: mdi:palette
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
- type: custom:mushroom-light-card
entity: light.all_livingroom_bulbs
show_color_temp_control: true
name: Temperature
use_light_color: true
layout: horizontal
secondary_info: none
icon: mdi:white-balance-sunny
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
}
36 Likes
wow this is amazing. Great work! Do you happen to have any more code examples of other rooms? Cheers!
All my room cards are basically the same thing with different entities swapped in. So in place of light.kitchen it may be light.dining_room for example.
1 Like
can you hare your Room Cards?
sure, it´s just the template card tho…
type: custom:mushroom-template-card
primary: Wohnzimmer
icon: fas:couch
layout: vertical
tap_action:
action: navigate
navigation_path: wohnzimmer
entity: light.wohnzimmer
double_tap_action:
action: toggle
secondary: >-
{{state_attr('climate.livingroom', 'current_temperature') | round(0) }}° |
{{states('sensor.humidity_livingroom') | round(0) }}%
icon_color: '{{ ''#ff9800'' if is_state(entity,''on'') else '''' }}'
badge_color: blue
badge_icon: >-
{{ 'mdi:window-open' if is_state('group.sensor_window_wohnzimmer','on') else
'' }}
2 Likes
Hi,
Can i ask you what cards do you use in addition of vertical stack in card?
It will be helpful for testing your code. thx
vertical-stack
vertical-stack-in-card
mushroom-template-card
mushroom-light-card
mushroom-chips-card
When i past your code, the card look like this. i have check all the code but i don’t understand why…
I’m guessing you’ve got a theme applied that changes the radius of the circle so it’s more square. And I can’t see the code but the secondary text template doesn’t seem to be resolving. Possibly an invalid entity since my code is set to pull from a thermostat entity.
I’m guessing you’ve got a theme applied that changes the radius of the circle so it’s more square.
Yes it work now thx a lot
And I can’t see the code but the secondary text template doesn’t seem to be resolving. Possibly an invalid entity since my code is set to pull from a thermostat entity.
For that its ok, i have to put my entity now.
Thx for the help
1 Like
Please read the first post!
I would like this post to be all about pictures with codes, nothing else! So if you have something to share or offer, please do it with pictures and code.
Do not ask any questions here, instead ask them directly to the person or in the original Mushroom post!
Try to keep this as clean as possible and share with pictures and code.
Best regards
Thekholm
11 Likes
My speedtest card using card mod and custom:apexcharts-card.
Version with static colors:
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: ''
primary: Voer speedtest uit
secondary: ''
multiline_secondary: true
icon: mdi:speedometer
icon_color: grey
tap_action:
action: call-service
service: speedtestdotnet.speedtest
data: {}
target: {}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 12px 0px 12px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.speedtest_download
color: rgb(255, 87, 34)
max: 60
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 130
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: custom:mushroom-entity-card
entity: sensor.speedtest_download
primary_info: state
secondary_info: name
name: Download
icon: mdi:download
icon_color: deep-orange
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:apexcharts-card
chart_type: radialBar
series:
- entity: sensor.speedtest_upload
color: rgb(33, 150, 243)
max: 60
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
gradient:
shade: light
type: horizontal
shadeIntensity: 0.3
inverseColors: false
opacityFrom: 1
opacityTo: 1
stops:
- 0
- 50
- 55
- 90
legend:
show: false
chart:
height: 130
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: custom:mushroom-entity-card
entity: sensor.speedtest_upload
primary_info: state
secondary_info: name
name: Upload
icon: mdi:upload
icon_color: blue
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.speedtest_ping
primary_info: state
secondary_info: name
name: Ping
icon_color: teal
icon: mdi:wan
layout: vertical
card_mod:
style: |
ha-card {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
Version with dynamic colors based on download/upload value, using the experimental color_threshold feature of apex-charts. You can change the min/max/in-between values yourself in the code (currently 50-200 for download and 5-100 for upload):
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
entity: ''
primary: Run speedtest
secondary: ''
multiline_secondary: true
icon: mdi:wifi-refresh
icon_color: grey
tap_action:
action: call-service
service: speedtestdotnet.speedtest
data: {}
target: {}
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
margin: -25px 12px 0px 12px;
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
}
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: vertical-stack
cards:
- type: custom:apexcharts-card
chart_type: radialBar
experimental:
color_threshold: true
series:
- entity: sensor.speedtest_download
color_threshold:
- value: 50
color: rgb(244, 67, 54)
- value: 75
color: rgb(255, 87, 34)
- value: 100
color: rgb(255, 152, 0)
- value: 125
color: rgb(255, 193, 7)
- value: 150
color: rgb(255, 235, 59)
- value: 175
color: rgb(205, 220, 57)
- value: 200
color: rgb(129, 915, 74)
- value: 225
color: rgb(76, 175, 80)
- value: 250
color: rgb(78, 175, 80)
max: 500
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
legend:
show: false
chart:
height: 130
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: custom:mushroom-template-card
entity: sensor.speedtest_download
primary: |
{{states('sensor.speedtest_download')|round(1)}} Mbps
secondary: Download
icon: mdi:download
icon_color: |-
{% set value = states('sensor.speedtest_download') | int %}
{% if value < 50 %}
red
{% elif value < 75 %}
deep-orange
{% elif value < 100 %}
orange
{% elif value < 125 %}
amber
{% elif value < 150 %}
yellow
{% elif value < 175 %}
lime
{% elif value < 200 %}
light-green
{% elif value < 225 %}
green
{% else %}
green
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:apexcharts-card
chart_type: radialBar
experimental:
color_threshold: true
series:
- entity: sensor.speedtest_upload
color_threshold:
- value: 5
color: rgb(244, 67, 54)
- value: 13
color: rgb(255, 87, 34)
- value: 25
color: rgb(255, 152, 0)
- value: 38
color: rgb(255, 193, 7)
- value: 50
color: rgb(255, 235, 59)
- value: 63
color: rgb(205, 220, 57)
- value: 75
color: rgb(129, 915, 74)
- value: 88
color: rgb(76, 175, 80)
- value: 100
color: rgb(78, 175, 80)
max: 100
show:
legend_value: false
apex_config:
plotOptions:
radialBar:
offsetY: 0
startAngle: -108
endAngle: 108
hollow:
size: 80%
dataLabels:
name:
show: false
value:
show: false
track:
strokeWidth: 70%
margin: 0
fill:
type: gradient
legend:
show: false
chart:
height: 130
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
- type: custom:mushroom-template-card
entity: sensor.speedtest_upload
primary: |
{{states('sensor.speedtest_upload')|round(1)}} Mbps
secondary: Upload
icon: mdi:upload
icon_color: |-
{% set value = states('sensor.speedtest_upload') | int %}
{% if value < 5 %}
red
{% elif value < 13 %}
deep-orange
{% elif value < 25 %}
orange
{% elif value < 38 %}
amber
{% elif value < 50 %}
yellow
{% elif value < 63 %}
lime
{% elif value < 75 %}
light-green
{% elif value < 88 %}
green
{% else %}
green
{% endif %}
layout: vertical
card_mod:
style: |
ha-card {
margin-top: -65px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
- type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.speedtest_ping
primary_info: state
secondary_info: name
name: Ping
icon_color: teal
icon: mdi:wan
layout: vertical
card_mod:
style: |
ha-card {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
box-shadow: none;
background: none;
}
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
}
48 Likes
Thank you for this creation and sharing the code. I’m well on my way to bastardizing it and adopting it for my needs. I love it!
One thing I’m having a hard time figuring out though, I have some lights that shut off when a Timer Helper reaches 0. I’d like to show that timer either below the temp/humidity, or somewhere on the bottom of the card (maybe over the icon?). I just can’t figure out how to get it in there, any ideas?
1 Like
My Homepage, inspired by many other people on this forum allowing me to learning bits and pieces from them and puzzling them together into this. Kudos to them!!
I used Mushroom card, Layout card, Browser Mod and Card Mod for the main design elements.
All of this is also located in a “Minimalist UI” Yaml config to allow for some graphic design elements.
The orange bars are for controlling the light, whereas the blue bars allow me to control the volume of my AVR.
The code (Below the pictures) might not be the prettiest, but like a said, it’s a lot of puzzle work based on the amazing work of several others here!
Also I am very open to hear any feedback!
CODE SNIPPETS
Living Room Card Code
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:mushroom-light-card
entity: light.living_room_lights
fill_container: true
show_brightness_control: true
use_light_color: false
icon: mdi:sofa
name: Living Room
secondary_info: none
layout: horizontal
tap_action:
# action: navigate
# navigation_path: '/ui-lovelace-minimalist/Living'
action: call-service
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: 'custom:button-card'
template: card_title
name: Living Room Media
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
name: Living Room TV
entity: media_player.tv_living_room
media_controls:
- on_off
- play_pause_stop
tap_action:
action: more-info
use_media_info: true
show_volume_level: false
fill_container: false
layout: vertical
volume_controls: []
icon_type: none
primary_info: name
secondary_info: none
view_layout:
grid-column: 1
grid-row: 1
card_mod:
style: |
ha-card {
border-radius: 20px 20px 0px 0px;
height: 100px;
margin-top: 0px;
outline-color: red;
--chip-spacing: 0px;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.home_theater
media_controls: []
tap_action:
action: more-info
use_media_info: true
show_volume_level: false
fill_container: false
layout: vertical
volume_controls:
- volume_set
- volume_mute
icon_type: none
primary_info: none
secondary_info: none
view_layout:
grid-column: 1
grid-row: 2
card_mod:
style: |
ha-card {
border-radius: 0px 0px 0px 0px;
height: 85px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
}
- type: custom:stack-in-card
cards:
- show_name: true
show_icon: false
type: button
tap_action:
action: more-info
entity: media_player.tv_living_room
name: TV Settings
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
border-radius: 0px 0px 0px 0px;
height: 55px;
margin-top: -40px;
outline-color: red;
--chip-spacing: 0px;
}
- type: custom:stack-in-card
cards:
- show_name: true
show_icon: false
type: button
tap_action:
action: more-info
entity: media_player.home_theater
name: Home Theater Settings
view_layout:
grid-column: 1
grid-row: 4
card_mod:
style: |
ha-card {
border-radius: 0px 0px 20px 20px;
height: 55px;
margin-top: -20px;
outline-color: red;
--chip-spacing: 0px;
}
- type: entities
entities:
- type: divider
- type: 'custom:button-card'
template: card_title
name: Living Room Lights
#label: 'Subtitle'
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.bar_table_lights
#layout: horizontal
show_color_temp_control: true
show_brightness_control: true
show_color_control: true
name: Bar Table Lights
- type: custom:mushroom-light-card
entity: light.spotlights
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.tv_table_lights
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
- type: custom:mushroom-light-card
entity: light.light_bars
show_brightness_control: true
hide_state: false
show_color_control: true
show_color_temp_control: true
use_light_color: true
# layout: vertical
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.upstairs_lights
tap_action:
action: more-info
use_light_color: true
- type: custom:mushroom-light-card
entity: light.sofa_ledstrip
use_light_color: true
tap_action:
action: more-info
- type: entities
entities:
- type: divider
- type: 'custom:button-card'
template: card_title
name: Other
- type: custom:mushroom-vacuum-card
entity: vacuum.roborock_s6_pure
name: Robo Cleaner
commands:
- start_pause
- stop
- return_home
right_button: Close
view_layout:
grid_areas: 1
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: #2D3033;
--mush-icon-size: 50px;
}
ha-card {
border-radius: 10px 10px 0px 0px;
--control-height: 20px;
--control-top: 16px;
--control-border-radius: 5px;
--control-border-spacing: 2px;
--card-primary-font-size: 17px;
icon-size: 50px;
background: url('/local/images/tv_area.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 90%);
background-size: 80% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.home_theater
show_volume_level: true
volume_controls:
- volume_set
icon_type: none
primary_info: none
fill_container: false
name: Volume
use_media_info: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
secondary_info: none
icon: ''
collapsible_controls: false
layout: horizontal
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: rgb(var(--rgb-card-background-color));
--mush-icon-size: 14px;
}
ha-card {
border-radius: 10px 10px 0px 0px;
--icon-size: 24px;
--control-height: 15px;
--control-top: 16px;
--control-border-radius: 5px;
--control-border-spacing: 2px;
--card-primary-font-size: 14px;
}
view_layout:
grid-column: 1
grid-row: 2
card_mod:
style: |
ha-card {
border-radius: 0px 0px 0px 0px;
height: 45px;
margin-top: -14px;
outline-color: red;
--icon-size: 2px;
--chip-spacing: 0px;
background: url('/local/images/tv_area_bottom.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 90%);
background-size: 300px , cover;
background-position: right;
background-position: bottom;
background-repeat: no-repeat;
background-blend-mode: saturation;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
entity: light.livingroom_lights
icon: >-
{% if is_state('group.livingroom_lights', 'on') %}
mdi:lightbulb-on {% else %} mdi:lightbulb {% endif %}
icon_color: >-
{% if is_state('group.livingroom_lights', 'on') %} amber {% else
%} grey {% endif %}
content: >-
{% if is_state('group.livingroom_lights', 'on') %} {{
expand(state_attr('group.livingroom_lights', 'entity_id')) |
selectattr('state','eq','on') | list | count }}{% endif %}
- type: template
content: '{{ states(''sensor.kitchen_temperature'') }} ºC'
icon: mdi:thermometer
icon_color: >-
{% set state=states('sensor.kitchen_temperature')|float(0) %} {%
if state<20 %} blue {% elif state<23 %} green {% elif state<25 %}
amber {% else %} red {% endif %}
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -16px;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
border-radius: 0px 0px 10px 10px;
height: 40px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #352E1F;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: action
icon: mdi:audio-video
tap_action:
action: call-service
service: media_player.toggle
data: {}
target:
entity_id: media_player.home_theater
- type: action
icon: mdi:power
tap_action:
action: call-service
service: wake_on_lan.send_magic_packet
data:
mac: XX:XX:XX:XX:XX:XX
broadcast_address: XXX.XXX.XX.XX
- type: action
icon: mdi:remote-tv
tap_action:
action: call-service
service: browser_mod.popup
data:
content:
type: custom:lg-remote-control
entity: media_player.tv_living_room
mac: XX:XX:XX:XX:XX:XX
title: TV Remote
size: fullscreen
target: {}
- type: action
tap_action:
action: call-service
service: script.upstairs_light_movie_mode
data: {}
target: {}
icon: mdi:movie-play-outline
- type: action
tap_action:
action: call-service
service: script.upstairs_light_bright
data: {}
target: {}
icon: mdi:white-balance-sunny
- type: action
icon: mdi:weather-night
tap_action:
action: call-service
service: script.living_room_cozy
data: {}
target: {}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
height: 40px;
margin-top: -14px;
border-radius: 0px 0px 10px 10px;
--ha-card-background: none;
}
- type: custom:gap-card
height: 25
Dining Area card Code
###### Dining room card
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:mushroom-light-card
entity: light.dining_table_lights
fill_container: true
show_brightness_control: true
use_light_color: false
icon: mdi:silverware
name: Dining Area
secondary_info: none
layout: horizontal
tap_action:
action: call-service
service: browser_mod.popup
data:
content:
type: vertical-stack
cards:
- type: 'custom:button-card'
template: card_title
name: Dining Lights
#label: 'Subtitle'
- type: custom:mushroom-light-card
entity: light.dining_table_lights
show_brightness_control: true
show_color_temp_control: true
icon: mdi:lightbulb-variant-outline
use_light_color: true
- type: custom:mushroom-light-card
entity: light.liqour_cabinet_led_strip
show_brightness_control: true
show_color_temp_control: false
icon: mdi:led-strip-variant
show_color_control: true
use_light_color: true
right_button: Close
# action: navigate
# navigation_path: /ui-lovelace-minimalist/Dining
view_layout:
grid_areas: 1
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: #2D3033;
--mush-icon-size: 50px;
height: 113px;
}
ha-card {
border-radius: 10px 10px 0px 0px;
--control-height: 40px;
--control-top: 16px;
--control-border-radius: 5px;
--control-border-spacing: 2px;
--card-primary-font-size: 17px;
icon-size: 50px;
background: url('/local/images/dining_area.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 80%);
background-size: 80% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
entity: light.livingroom_lights
icon: >-
{% if is_state('light.dining_table_lights', 'on') %}
mdi:lightbulb-on {% else %} mdi:lightbulb {% endif %}
icon_color: >-
{% if is_state('light.dining_table_lights', 'on') %} amber {% else
%} grey {% endif %}
content: >-
{% if is_state('light.dining_table_lights', 'on') %} {{
expand(state_attr('light.dining_table_lights', 'entity_id')) |
selectattr('state','eq','on') | list | count }}{% endif %}
- type: template
content: '{{ states(''sensor.kitchen_temperature'') }} ºC'
icon: mdi:thermometer
icon_color: >-
{% set state=states('sensor.kitchen_temperature')|float(0) %} {%
if state<20 %} blue {% elif state<23 %} green {% elif state<25 %}
amber {% else %} red {% endif %}
- type: template
content: '{{ states(''sensor.kitchen_humidity'') }} %'
icon: mdi:water-percent
icon_color: >-
{% set state=states('sensor.kitchen_humidity')|float(0) %} {%
if state<40 %} red {% elif state<50 %} amber {% elif state<60 %}
blue {% else %} blue {% endif %}
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
border-radius: 0px 0px 10px 10px;
height: 40px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #352E1F;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
- type: action
tap_action:
action: call-service
service: light.turn_off
data: {}
target:
entity_id:
- light.dining_table_lights
- light.liqour_cabinet_led_strip
icon: mdi:lightbulb-group-off-outline
- type: action
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.dining_area_bright_2
icon: mdi:white-balance-sunny
- type: action
icon: mdi:weather-night
tap_action:
action: call-service
service: scene.turn_on
data: {}
target:
entity_id: scene.dining_area_cozy
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
height: 40px;
margin-top: -14px;
border-radius: 0px 0px 10px 10px;
--ha-card-background: none;
}
Kitchen Room Card Code
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto
grid-template-rows: auto
column-gap: 0px
row-gap: 0px
grid-template-areas: |
"1"
"2"
"3"
"4"
"5"
"6"
"7"
"8"
"9"
"10"
"11"
"12"
cards:
- type: custom:gap-card
height: 25
- type: custom:mushroom-light-card
entity: light.kitchen_spotlights
fill_container: true
show_brightness_control: true
use_light_color: false
icon: mdi:lightbulb-spot
name: Kitchen Area
secondary_info: none
layout: horizontal
tap_action:
action: call-service
service: light.toggle
data: {}
target:
entity_id:
- light.kitchen_spotlights
view_layout:
grid_areas: 1
card_mod:
style: |
:host([dark-mode]) {
--ha-card-background: #2D3033;
--mush-icon-size: 50px;
height: 113px;
}
ha-card {
border-radius: 10px 10px 0px 0px;
--control-height: 40px;
--control-top: 16px;
--control-border-radius: 5px;
--control-border-spacing: 2px;
--card-primary-font-size: 20px;
icon-size: 50px;
background: url('/local/images/kitchen.jpg'), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 80%);
background-size: 80% auto, cover;
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
entity: light.kitchen_spotlights
icon: >-
{% if is_state('light.kitchen_spotlights', 'on') %}
mdi:lightbulb-on {% else %} mdi:lightbulb {% endif %}
icon_color: >-
{% if is_state('light.kitchen_spotlights', 'on') %} amber {% else
%} grey {% endif %}
content: >-
{% if is_state('light.kitchen_spotlights', 'on') %} {{
expand(state_attr('light.kitchen_spotlights', 'entity_id')) |
selectattr('state','eq','on') | list | count + 1}}{% endif %}
- type: template
content: '{{ states(''sensor.kitchen_temperature'') }} ºC'
icon: mdi:thermometer
icon_color: >-
{% set state=states('sensor.kitchen_temperature')|float(0) %} {%
if state<20 %} blue {% elif state<23 %} green {% elif state<25 %}
amber {% else %} red {% endif %}
- type: template
content: '{{ states(''sensor.kitchen_humidity'') }} %'
icon: mdi:water-percent
icon_color: >-
{% set state=states('sensor.kitchen_humidity')|float(0) %} {%
if state<40 %} red {% elif state<50 %} amber {% elif state<60 %}
blue {% else %} blue {% endif %}
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
border-radius: 0px 0px 10px 10px;
height: 40px;
margin-top: -14px;
outline-color: red;
--chip-spacing: 0px;
--ha-card-background: #352E1F;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
content: >-
{% if is_state('switch.grill', 'on') %} The Grill Is Turned On!!!!{% endif %}
alignment: center
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: {% if is_state('switch.grill', 'on') %} red{% endif %};
--chip-spacing: 0;
--chip-height: 38px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
height: 40px;
margin-top: -14px;
border-radius: 0px 0px 10px 10px;
--ha-card-background: none;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
fill_container: true
chips:
- type: template
- type: action
icon: mdi:grill
tap_action:
action: call-service
service: switch.toggle
data: {}
target:
entity_id:
- switch.grill
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-height: 40px;
}
view_layout:
grid-column: 1
grid-row: 3
card_mod:
style: |
ha-card {
height: 40px;
margin-top: -14px;
border-radius: 0px 0px 10px 10px;
--ha-card-background: none;
}
39 Likes