Hello,
If someone could share a screenshot of the dashboard’s security view, that would be greatly appreciated.
I’m looking for inspiration on how to display the motion detectors, door sensors, and CCTV cameras I have.
Thanks a lot
It looks great, thanks
Could you please share your code?
I liked the look of this card but set out to make the temperature colour dynamic based on the state of the attached climate device. This proved a bit challenging because the mini-graph-card did not directly support templating in the color field. So I had to include config-template-card to achieve it.
Now when heating, the temperature icon and graph is orange, when not heating it is green.
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: sensor.bar_temperature
primary: |
{{ states(entity) | round(1) }}°C
secondary: |
{{ state_attr(entity,'friendly_name') }}
icon: mdi:thermometer
icon_color: |
{{ 'orange' if is_state('climate.thermostat_bar','heat') else 'green' }}
- type: custom:mushroom-template-card
entity: sensor.bar_humidity
primary: |
{{ states(entity) | round(1) }}%
secondary: |
{{ state_attr(entity,'friendly_name') }}
icon: mdi:water-percent
icon_color: blue
- type: custom:config-template-card
entities:
- sensor.bar_temperature
- sensor.bar_humidity
- climate.thermostat_bar
variables:
- states['climate.thermostat_bar'].state
card:
type: custom:mini-graph-card
entities:
- entity: sensor.bar_temperature
name: Temperature
color: ${vars[0]==='heat' ? 'orange':'green'}
- entity: sensor.bar_humidity
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.thermostat_bar
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
- type: custom:mushroom-climate-card
entity: climate.thermostat_bar
primary_info: none
secondary_info: none
icon_type: none
hvac_modes:
- auto
- heat
- 'off'
7 Likes
Nice! I will give it a try 
Nice work! I ended up doing a poor-man’s version of that, but just had the icon change with the HVAC mode. I’m not smart enough to code much more than that lol.
type: custom:stack-in-card
mode: vertical
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.living_room
primary_info: none
card_mod:
style: |
mushroom-shape-icon {
--card-mod-icon:
{% if is_state(config.entity, 'auto') %}
mdi:calendar-sync
{% elif is_state(config.entity, 'heat') %}
mdi:fire
{% elif is_state(config.entity, 'off') %}
mdi:power
{% endif %};
}
- type: custom:mushroom-climate-card
entity: climate.living_room
primary_info: none
secondary_info: none
icon_type: none
hvac_modes:
- auto
- 'off'
- type: custom:mushroom-climate-card
entity: climate.living_room
primary_info: none
secondary_info: none
show_temperature_control: true
icon_type: none
- type: custom:mini-graph-card
entities:
- entity: sensor.living_room_temperature
name: Temperature
color: var(--green-color)
- entity: sensor.living_room_humidity
name: Humidity
color: var(--blue-color)
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
height: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
But ho we can chage icon for auto, heat, power off, cool … ? Is any chance ?
Give this one a go. Got some help to get it working with card-mod which I much prefer over config-template-card.
This version dynamically changes the icon based on the climate state. The color for the icon only appears when it’s actually heating or cooling. (For example, climate set to heat but at target temp so it’s not actually producing heat, the icon will be grey. Then when it’s producing heat it changes to deep-orange). And lastly the graph colors change depending on the climate state. And all colors should match the mushroom icons used.
type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
entity: climate.daikinap97021
icon: |-
{% if is_state(entity, 'heat') %}
mdi:fire
{% elif is_state(entity, 'heat_cool') %}
mdi:sun-snowflake
{% elif is_state(entity, 'cool') %}
mdi:snowflake
{% elif is_state(entity, 'dry') %}
mdi:water-percent
{% elif is_state(entity, 'fan_only') %}
mdi:fan
{% else %}
mdi:radiator-off
{% endif %}
icon_color: |-
{% if is_state_attr(entity,
'hvac_action', 'heating') %}
deep-orange
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
var(--blue-color)
{% elif is_state_attr(entity,
'hvac_action', 'drying') %}
orange
{% elif is_state_attr(entity,
'hvac_action', 'fan') %}
turquoise
{% else %}
disabled
{% endif %}
primary: |
{{ states('sensor.living_room_avg_temperature') | round(1) }}°C
secondary: |-
{% if is_state(entity, 'heat_cool') %}
Heat/Cool
{% elif is_state_attr(entity,
'hvac_action', 'heating') %}
Heating
{% elif is_state_attr(entity,
'hvac_action', 'cooling') %}
Cooling
{% elif is_state_attr(entity,
'hvac_action', 'drying') %}
Drying
{% elif is_state(entity, 'heat') %}
Heat
{% elif is_state(entity, 'cool') %}
Cool
{% elif is_state(entity, 'dry') %}
Dry
{% elif is_state(entity, 'fan_only') %}
Fan
{% else %}
Off
{% endif %}
- type: custom:mushroom-template-card
entity: sensor.living_room_humidity
primary: |
{{ states(entity) | round(1) }}%
secondary: Humidity
icon: mdi:water-percent
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.living_room_avg_temperature
name: Temperature
- entity: sensor.living_room_humidity
name: Humidity
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod:
style: |
.line--rect,
.fill--rect,
.line--points {
{% if is_state('climate.daikinap97021', 'heat_cool') %}
{% set COLOR = 'green' %}
{% elif is_state('climate.daikinap97021', 'heat') %}
{% set COLOR = '#FF5722' %}
{% elif is_state('climate.daikinap97021', 'cool') %}
{% set COLOR = 'var(--blue-color)' %}
{% elif is_state('climate.daikinap97021', 'dry') %}
{% set COLOR = 'orange' %}
{% elif is_state('climate.daikinap97021', 'fan_only') %}
{% set COLOR = 'turquoise' %}
{% else %}
{% set COLOR = 'grey' %}
{% endif %}
fill: {{COLOR}};
stroke: {{COLOR}};
}
.line--rect:last-of-type,
.fill--rect:nth-of-type(2),
.line--points:last-of-type {
fill: var(--blue-color);
stroke: var(--blue-color);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.daikinap97021
primary_info: none
secondary_info: none
icon_type: none
show_temperature_control: true
- type: custom:mushroom-climate-card
entity: climate.daikinap97021
primary_info: none
secondary_info: none
icon_type: none
hvac_modes:
- heat
- cool
- heat_cool
- dry
- fan_only
- 'off'
13 Likes
New tablet home page:
no card-mod, just mushroom, mini-graph-card and bar-card
using layout-card to define the columns. (this is the screenshot from the desktop, on the tablet the bottom is aligned)
I have used peaces from my mobile dashboard, from the home page and some other from details pages.
every link like the rooms (stanze) and the category pages (status, lights, doors, etc…) brings you to the same rooms as the mobile home page.
So I have 2 home pages, one for smartphone and this for the tablet, while all the other subpages are the same.
For reference, this is the mobile home page:
8 Likes
I like that a lot, well done! Nice and subtle, and well laid out.
May ask if you can share the code for your whole card? I like it and would like to implement on my setup.
You have the full card at the end of this file in my Github.
The tiles are here:
1 Like
not using this card my self a lot, but since it is jinja, you can make those templates a bit more elegant:
{% set state = states('climate.daikinap97021') %}
{% set states = {'heat_cool':'green',
'heat':'#FF5722',
'cool':'var(--blue-color)',
'dry':'orange',
'fan_only':'turqoise'} %}
{{states.get(state,'grey')}}
same goes for the other repetitive jinja we see a lot here. Give it a try? Just trying to make it a bit less ‘verbose’.
6 Likes
Thought I’d share some of my Dash, making use of all HA Tools. The whole concept is from a guy who posted in a forum. He uses a variety of tools in a very smart way. Credits go to him and I tailered it a bit to my likings. Not fully Mushroom but maybe good enough for inspiration. Some tools used:
Fully kioskbrowser & Browsermod, getting rid of the default nav bar. Looking glas, opens a full screen pop-up searching for entities. Holding the looking glas icon, disables Kioskmode and provides a means to edit the gui. The top right card with " sensors" opens a pop-up with available options.
By means of browsermod is serves different layouts available for mobile and for desktop. On desktop the left room cards control the right (conditional part) showing the relevant room on the right. The actual pages are setup only once, by means of using “linked-lovelace-ui” cards, making it possible to edit just 1 (template)page for Mobile and Desktop set-up. still work in progress, but I love this set-up.
21 Likes
Thanks i’ll check how to tune it. I tried with energy dashboard. Not too Bad but more work to do
Your setup page wise is very similar to mine. Only I have a layout-card based layout for each page, with a version for mobile and version for tablet. Still wanting to get those merged. So I was now looking at the decluttering card to template some card/popups throughout my dashboard. But your approach seems to have a lot of benefits! Would love to see the elements and codes used from your “framework”
@Adec @mvanlijden full Dash raw yaml here: HA-Dashboard · GitHub
Most of it work in progress…
Would love to see this evolve and expanded by the community
3 Likes
layout-card based layout used as well. The linked-lovelace-ui card makes things a bit more complete 
for mobile and desktop.