The below card will cause android tablet to become laggy and unresponsive in just a few clicks. Can someone please help me understand why. Works fine on PC and Android Phone.
square: false
columns: 1
type: grid
cards:
- square: false
columns: 1
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.master_bedroom_main_lights
icon: mdi:sofa
icon_color: '#03A9F4'
primary: Living Room
secondary: |
{{ state_attr('climate.my_ecobee','current_temperature')}}°F
{% if is_state('climate.my_ecobee', 'cool') %}
Cooling
{% elif is_state('climate.my_ecobee', 'heat') %}
Heating
{% endif %}
layout: horizontal
badge_icon: |
{% if is_state('climate.my_ecobee', 'heat') %}
mdi:radiator
{% elif is_state('climate.my_ecobee', 'cool') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: |
{% if is_state('climate.my_ecobee', 'heat') %}
red
{% elif is_state('climate.my_ecobee', 'cool') %}
blue
{% 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('climate.my_ecobee', 'heat') %}
red
{% elif is_state('climate.my_ecobee', 'cool') %}
#03A9F4
{% else %}
#6c6c75
{% endif %}
}
style: |
mushroom-badge-icon {
left: 90px;
top: 25px;
}
- type: custom:mushroom-template-card
primary: Lights
icon_color: disabled
icon: mdi:lightbulb-on
secondary: null
entity: light.master_bedroom_main_lights
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Master Bedroom Lights
autoclose: false
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.master_bedroom_main_lights
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.master_bedroom_main_lights
name: 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;
--icon-animation: illumination 1s infinite;
}
@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%); }
}
{% 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-icon {
.: |
ha-card {
width: px;
margin-left: 35%;
top: -160px;
background: none;
}
:host {
--mush-icon-size: 45px;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
- type: custom:mushroom-template-card
primary: Cameras
icon_color: blue
icon: mdi:cctv
secondary: null
entity: camera.g3_flex_high
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Living Room Cameras
content:
type: vertical-stack
cards:
- type: picture-entity
show_state: false
show_name: true
camera_view: auto
image: https://demo.home-assistant.io/stub_config/bedroom.png
entity: camera.g3_flex_high
name: Living Room
camera_image: camera.g3_flex_high
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$: |
ha-icon {
--icon-animation: scan 5s ease-in-out infinite;
transform-origin: 90% 80%
}
@keyframes scan {
0%, 100% { transform: rotate(20deg); }
50% { transform: rotate(-15deg); }
}
.: |
ha-card {
width: px;
margin-left: 35%;
top: -180px;
background: none;
}
:host {
--mush-icon-size: 45px;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
- type: custom:mushroom-template-card
primary: Curtain's
secondary: ''
entity: cover.cover_group
icon: |
{% if is_state('cover.cover_group', 'open') %}
mdi:curtains
{% else %}
mdi:curtains-closed
{% endif %}
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, 'open') %}
{% 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: px;
margin-left: 35%;
top: -200px;
background: none;
}
:host {
--mush-icon-size: 45px;
}
card_mod:
style: |
ha-card {
height: 178px !important;
width: px !important;
}
Normally its “F12” with Chrome or Firefox.