berkans
July 8, 2022, 4:01pm
1755
It’s super easy. First I created a light group for my living room lights and pasted it to the top of my dropdown menu. The rest were individual lights within the livingroom.
Here is the code :
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-light-card
entity: light.salon_isiklar
name: Salon Işıklar
hide_state: false
use_light_color: true
show_color_control: true
collapsible_controls: true
show_brightness_control: true
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.amps_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: entities
entities:
- type: custom:mushroom-light-card
entity: light.salon_abajur_2
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Abajur
- type: custom:mushroom-light-card
entity: light.venedik_tablo
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Venedik Tablo
- type: custom:mushroom-light-card
entity: light.extended_color_light_1_2
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Arka Sol
- type: custom:mushroom-light-card
entity: light.extended_color_light_1_3
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Arka Orta
- type: custom:mushroom-light-card
entity: light.extended_color_light_2
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Arka Sağ
- type: custom:mushroom-light-card
entity: light.sarkit_orta
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Sarkıt Orta
- type: custom:mushroom-light-card
entity: light.hue_color_lamp_1
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Sarkıt Sağ
- type: custom:mushroom-light-card
entity: light.lambader
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Lambader
- type: conditional
conditions:
- entity: input_boolean.amps_dropdown
state: 'on'
card:
type: entities
entities:
- type: custom:mushroom-light-card
entity: light.hue_color_lamp_2
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Raf Sol
- type: custom:mushroom-light-card
entity: light.livingcolors_1
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Raf Sağ
- type: custom:mushroom-light-card
entity: light.hue_play_sol
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: TV Sol
- type: custom:mushroom-light-card
entity: light.tv_led_light
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: TV Led Şerit
- type: custom:mushroom-light-card
entity: light.duvar_sag
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: TV Sağ
- type: custom:mushroom-light-card
entity: light.star_projector
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Star Projector
- type: custom:mushroom-light-card
entity: light.extended_color_light_1
show_brightness_control: true
use_light_color: true
collapsible_controls: true
name: Sarkıt Sol
state_color: true
show_header_toggle: false
card_mod:
style: |
ha-card {
box-shadow: none !important;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
3 Likes
berkans
July 8, 2022, 4:04pm
1756
So how about a simple thermostat dropdown menu ?
5 Likes
robcov
July 8, 2022, 5:33pm
1757
I’m having a weird issue with the color of my chip cards. No matter what, they will not change color. They are just stuck to one color. The rest of the mushroom cards, such as the light card, seem to change color. I’ve removed all themes and tried to revert to using the stock HA theme but I still cant get a color to show up.
Any help is appreciated!
1 Like
KTibow
July 9, 2022, 12:41am
1758
Are they in the on state?
KTibow
July 9, 2022, 1:07am
1759
How snappy does the dropdown feel? I would expect it to be a bit laggy, but I suppose I could be surprised by how fast HA and LAN communication are.
berkans
July 9, 2022, 1:29am
1760
I can say there is no lag. Menus quickly responds to open and close actions. As for the lights, I use local tuya and various other brands but there is no lag as well while turning on the lights.
Mosher
July 9, 2022, 6:47am
1762
Hey,
rhysb
July 9, 2022, 7:09am
1763
Here you go:
type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-title-card
title: ''
subtitle: Printers
- type: custom:stack-in-card
cards:
- 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
primary: Colour Printer
entity: binary_sensor.sarahs_printer_online
secondary: '{{ ''Online'' if is_state(entity, ''on'') else ''Offline'' }}'
icon: >-
{{ 'mdi:printer' if is_state(entity, 'on') else 'mdi:printer-off'
}}
icon_color: '{{ ''light-blue'' if is_state(entity, ''on'') else ''disabled'' }}'
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.sarahs_printer_dropdown
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-down' if is_state(entity, 'off') else
'mdi:chevron-up' }}
icon_color: disabled
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.sarahs_printer_dropdown
state: 'on'
card:
type: custom:stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
entity: sensor.sarahs_printer_status
primary: Status
secondary: >-
{% set status = states(entity) | int %} {% if status == 3
%}
Idle
{% elif status == 4 %}
Printing
{% elif status == 5 %}
Warmup
{% else %}
Unknown
{% endif %}
icon: mdi:printer
icon_color: >-
{% set status = states(entity) | int %} {% if status == 3
%}
disabled
{% elif status == 4 %}
light-blue
{% elif status == 5 %}
red
{% else %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: custom:mushroom-template-card
secondary: |-
{% set tray = states(entity) | int %}
{% if tray == -3 %}
Full
{% else %}
Empty
{% endif %}
primary: Tray 1
icon: >-
{{ 'mdi:tray-full' if states(entity) | int == -3 else
'mdi:tray' }}
entity: sensor.sarahs_printer_paper_tray
icon_color: >-
{{ 'light-blue' if states(entity) | int == -3 else
'disabled' }}
tap_action:
action: none
hold_action:
action: none
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 130px auto
margin: '-4px -4px -8px -4px'
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.sarahs_printer_cyan_toner
icon_color: cyan
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Cyan
card_mod:
style: |
ha-card {
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.sarahs_printer_yellow_toner
icon_color: yellow
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Yellow
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-right: -8px;
}
- type: custom:mushroom-entity-card
entity: sensor.sarahs_printer_magenta_toner
icon_color: purple
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Magenta
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-right: -15px;
}
- type: custom:mushroom-entity-card
entity: sensor.sarahs_printer_black_toner
icon_color: black
tap_action:
action: none
hold_action:
action: none
primary_info: name
secondary_info: state
name: Black
card_mod:
style: |
ha-card {
margin-top: -8px;
margin-right: -8px;
}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:apexcharts-card
header:
show: false
series:
- entity: sensor.sarahs_printer_cyan_toner
name: Cyan
color: rgb(7, 188, 211)
show:
legend_value: false
- entity: sensor.sarahs_printer_yellow_toner
name: Yellow
color: rgb(252, 233, 64)
show:
legend_value: false
- entity: sensor.sarahs_printer_magenta_toner
name: Magenta
color: rgb(157, 44, 176)
- entity: sensor.sarahs_printer_black_toner
name: Black
color: rgb(7, 7, 7)
chart_type: radialBar
apex_config:
legend:
show: false
chart:
height: 265px
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
card_mod:
style: |
ha-card {
height: 306px;
}
Printer info is obtained via SNMP. This is for a HP LaserJet, but other brands should be similar.
binary_sensor:
- platform: ping
host: 192.168.10.77
name: Sarahs Printer Online
count: 1
scan_interval: 60
sensor:
- platform: snmp
name: "Sarahs Printer Cyan Max"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.43.11.1.1.8.1.2
accept_errors: true
scan_interval: 86400
- platform: snmp
name: "Sarahs Printer Magenta Max"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.43.11.1.1.8.1.3
accept_errors: true
scan_interval: 86400
- platform: snmp
name: "Sarahs Printer Yellow Max"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.43.11.1.1.8.1.4
accept_errors: true
scan_interval: 86400
- platform: snmp
name: "Sarahs Printer Black Max"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.43.11.1.1.8.1.1
accept_errors: true
scan_interval: 86400
- platform: snmp
name: "Sarahs Printer Cyan Level"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.43.11.1.1.9.1.2
accept_errors: true
scan_interval: 86400
- platform: snmp
name: "Sarahs Printer Magenta Level"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.43.11.1.1.9.1.3
accept_errors: true
scan_interval: 86400
- platform: snmp
name: "Sarahs Printer Yellow Level"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.43.11.1.1.9.1.4
accept_errors: true
scan_interval: 86400
- platform: snmp
name: "Sarahs Printer Black Level"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.43.11.1.1.9.1.1
accept_errors: true
scan_interval: 86400
- platform: snmp
name: "Sarahs Printer Status"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.25.3.5.1.1.1
accept_errors: true
scan_interval: 10
icon: mdi:printer
- platform: snmp
name: "Sarahs Printer Paper Tray"
host: 192.168.10.77
baseoid: 1.3.6.1.2.1.43.8.2.1.10.1.2
accept_errors: true
scan_interval: 60
icon: mdi:tray-full
- platform: template
sensors:
sarahs_printer_cyan_toner:
friendly_name: "Sarah's Printer Cyan Toner"
value_template: >-
{{ ( states("sensor.sarahs_printer_cyan_level") | int / states("sensor.sarahs_printer_cyan_max") | int * 100 ) | round (0) }}
unit_of_measurement: '%'
icon_template: mdi:grain
- platform: template
sensors:
sarahs_printer_yellow_toner:
friendly_name: "Sarah's Printer Yellow Toner"
value_template: >-
{{ ( states("sensor.sarahs_printer_yellow_level") | int / states("sensor.sarahs_printer_yellow_max") | int * 100 ) | round (0) }}
unit_of_measurement: '%'
icon_template: mdi:grain
- platform: template
sensors:
sarahs_printer_magenta_toner:
friendly_name: "Sarah's Printer Magenta Toner"
value_template: >-
{{ ( states("sensor.sarahs_printer_magenta_level") | int / states("sensor.sarahs_printer_magenta_max") | int * 100 ) | round (0) }}
unit_of_measurement: '%'
icon_template: mdi:grain
- platform: template
sensors:
sarahs_printer_black_toner:
friendly_name: "Sarah's Printer Black Toner"
value_template: >-
{{ ( states("sensor.sarahs_printer_black_level") | int / states("sensor.sarahs_printer_black_max") | int * 100 ) | round (0) }}
unit_of_measurement: '%'
icon_template: mdi:grain
19 Likes
rhysb
July 9, 2022, 7:41am
1764
You could try setting the border radius like this:
:host {
--mush-icon-size: 100px;
height: 66px;
margin-left: -22px !important;
margin-top: -4px !important;
border-radius: var(--ha-card-border-radius);
}
rhysb
July 9, 2022, 8:10am
1765
You can set the --icon-symbol-size like this:
type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Scenes
icon: phu:scene-relax
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: scenes
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
background: transparent;
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-symbol-size: 55px;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: rgba(var(--rgb-primary-text-color), 0.01);
--ha-card-background: transparent;
}
2 Likes
That worked, thank you.
Do you know if it’s possible to do 2 actions in a mushroom card like this? I’m trying to use navigate inside of a pop-up card but the only way for it to work seamlessly is for the pop-up to be closed automatically otherwise the user has to do it. The way I did this didn’t work.
- type: custom:mushroom-template-card
primary: ''
secondary: Secure
icon: phu:reolink-842
layout: vertical
icon_color: red
tap_action:
- action: navigate
navigation_path: cameras
- action: fire-dom-event
browser_mod:
command: close_popup
deviceID:
- this
picture: local/icons/custom_icons/camera.svg
rhysb
July 9, 2022, 8:30am
1767
You can’t with entity card, use template card instead.
rhysb
July 9, 2022, 8:35am
1768
You could try using a script…
It’s possible to do navigate in a script? How does it know the device requesting that?
rhysb
July 9, 2022, 9:01am
1770
Hey John, try this:
type: custom:mushroom-template-card
layout: vertical
secondary: 'Battery: {{ state_attr(entity, "battery") }}%'
entity: lock.front_door_lock_2
primary: |
{% if is_state(entity, 'unlocked') %}
Door is Unlocked
{% else %}
Door is Locked
{% endif %}
icon_color: |
{% if is_state(entity, 'unlocked') %}
red
{% else %}
green
{% endif %}
icon: |
{% if is_state(entity, 'unlocked') %}
mdi:lock-open
{% else %}
mdi:lock
{% endif %}
card_mod:
style: |
ha-card {
background-color: {{ 'rgba(255, 255, 255, 0.1)' if is_state('lock.front_door_lock_2', 'unlocked') else 'rgba(147, 227, 215, 0.5)' }};
height:125px !important;
}
mushroom-shape-icon {
{{ 'animation: blink 1.3s ease-in-out infinite;' if is_state('lock.front_door_lock_2', 'unlocked') }}
}
@keyframes blink {
50% {opacity: 0.1;}
}
1 Like
Yes that’s perfect!!! Thank you!!!
I love this mushroom card!!
1 Like
swifty
July 9, 2022, 10:03am
1773
Wow that looks beautiful! Do you have the full yaml shared anywhere? Particularly interest in the scenes bar, room card and detailed room view as those look spot on!
Roy75
July 9, 2022, 9:10pm
1776
nice work!
