Skip to content

Instantly share code, notes, and snippets.

@SinanMQTT
Last active March 5, 2024 22:09
Show Gist options
  • Save SinanMQTT/56f22122620036660e106d05a29417b1 to your computer and use it in GitHub Desktop.
Save SinanMQTT/56f22122620036660e106d05a29417b1 to your computer and use it in GitHub Desktop.
HA Phone Dashboard by Sinan
square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.sinan_ibrahim
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Sinan
content:
type: vertical-stack
cards:
- type: map
entities:
- entity: person.sinan_ibrahim
dark_mode: false
hours_to_show: 12
aspect_ratio: '4:3'
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
/* Style person marker & adjust position to avoid blocking waypoints */
border: 3px solid var(--state-person) !important;
border-radius: 50% 50% 50% 0px !important;
transform: rotate(-45deg) translate(50%, -50%);
overflow: visible !important;
background: var(--state-person) !important;
}
.entity-picture {
/* Correct orientation of person avatar */
transform: rotate(45deg);
border-radius: 50%;
}
ha-map $: |
path:first-child {
/* Style accuracy radius */
stroke: var(--state-person);
fill: color-mix(in srgb, var(--state-person) 50%, transparent);
stroke-width: 0px;
}
path:nth-child(even) {
/* Styling for waypoints */
stroke: var(--purple-color);
fill: var(--purple-color);
stroke-width: 4px;
}
path:nth-child(odd):not(:first-child) {
/* Styling for lines */
stroke: var(--purple-color);
stroke-width: 4px;
}
.leaflet-control-attribution {
/* Style attribution text */
#display: none;
background: rgba(var(--rgb-card-background-color), 0.4) !important;
font-size: 10px;
}
.leaflet-container a {
/* Set color of zoom icons & attribution text */
color: var(--secondary-text-color);
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
/* Style zoom buttons like Chips */
border-radius: var(--mush-chip-border-radius, 19px) !important;
padding: 3px;
background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
margin: 8px 8px 0px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
.leaflet-top {
/* Move zoom buttons to bottom of map */
bottom: 0px !important;
}
.leaflet-control-zoom {
/* Allow buttons to be moved */
position: absolute !important;
/* Remove extra margin */
margin: 0px !important;
/* Remove zoom control border */
border: none !important;
}
.: |
ha-card {
/* Remove default card styling without affecting child elements */
box-shadow: none;
border-width: 0;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set person state color */
--state-person:
{% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
ha-icon-button {
/* Position center button */
bottom: 8px;
left: 8px !important;
top: auto !important;
/* Style center button to match Chip */
color: var(--deep-orange-color) !important;
background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
card_mod:
style:
ha-header-bar$: |
.mdc-top-app-bar__section--align-start {
justify-content: end !important;
}
.mdc-top-app-bar__section {
padding: 0px !important;
}
.mdc-top-app-bar__title {
display: none;
}
.mdc-top-app-bar__row {
height: 36px !important;
}
.mdc-top-app-bar {
padding: 8px;
}
.: |
ha-icon-button {
background: color-mix(in srgb, var(--grey-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-header-bar {
margin-bottom: -64px;
width: 36px;
margin-left: auto !important;
}
:host {
/* Remove border from poup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 18px;
}
.content {
/* Remove extra bottom border */
margin: -24px -24px -24px !important;
}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.sinans_iphone_battery_state') %}
{% if state=='Charging' or state=='Full' %}
green
{% elif state=='Not Charging' %}
#6f6f6f
{% endif %}
entity: sensor.sinans_iphone_battery_state
icon: mdi:power-plug
tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.sinans_iphone_battery_level
icon: |2
{% set bl = states('sensor.sinans_iphone_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sinans_iphone_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
content: '{{states(''sensor.sinans_iphone_battery_level'') | round(0) }}%'
alignment: end
card_mod:
style: |
.chip-contain
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.enas
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Enas
content:
type: vertical-stack
cards:
- type: map
entities:
- entity: person.enas
dark_mode: false
hours_to_show: 12
aspect_ratio: '4:3'
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
/* Style person marker & adjust position to avoid blocking waypoints */
border: 3px solid var(--state-person) !important;
border-radius: 50% 50% 50% 0px !important;
transform: rotate(-45deg) translate(50%, -50%);
overflow: visible !important;
background: var(--state-person) !important;
}
.entity-picture {
/* Correct orientation of person avatar */
transform: rotate(45deg);
border-radius: 50%;
}
ha-map $: |
path:first-child {
/* Style accuracy radius */
stroke: var(--state-person);
fill: color-mix(in srgb, var(--state-person) 50%, transparent);
stroke-width: 0px;
}
path:nth-child(even) {
/* Styling for waypoints */
stroke: var(--purple-color);
fill: var(--purple-color);
stroke-width: 4px;
}
path:nth-child(odd):not(:first-child) {
/* Styling for lines */
stroke: var(--purple-color);
stroke-width: 4px;
}
.leaflet-control-attribution {
/* Style attribution text */
#display: none;
background: rgba(var(--rgb-card-background-color), 0.4) !important;
font-size: 10px;
}
.leaflet-container a {
/* Set color of zoom icons & attribution text */
color: var(--secondary-text-color);
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
/* Style zoom buttons like Chips */
border-radius: var(--mush-chip-border-radius, 19px) !important;
padding: 3px;
background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
margin: 8px 8px 0px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
.leaflet-top {
/* Move zoom buttons to bottom of map */
bottom: 0px !important;
}
.leaflet-control-zoom {
/* Allow buttons to be moved */
position: absolute !important;
/* Remove extra margin */
margin: 0px !important;
/* Remove zoom control border */
border: none !important;
}
.: |
ha-card {
/* Remove default card styling without affecting child elements */
box-shadow: none;
border-width: 0;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set person state color */
--state-person:
{% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
ha-icon-button {
/* Position center button */
bottom: 8px;
left: 8px !important;
top: auto !important;
/* Style center button to match Chip */
color: var(--deep-orange-color) !important;
background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
card_mod:
style:
ha-header-bar$: |
.mdc-top-app-bar__section--align-start {
justify-content: end !important;
}
.mdc-top-app-bar__section {
padding: 0px !important;
}
.mdc-top-app-bar__title {
display: none;
}
.mdc-top-app-bar__row {
height: 36px !important;
}
.mdc-top-app-bar {
padding: 8px;
}
.: |
ha-icon-button {
background: color-mix(in srgb, var(--grey-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-header-bar {
margin-bottom: -64px;
width: 36px;
margin-left: auto !important;
}
:host {
/* Remove border from poup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 18px;
}
.content {
/* Remove extra bottom border */
margin: -24px -24px -24px !important;
}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.oppo_battery_state') %}
{% if state=='charging' or state=='Full' %}
green
{% elif state=='not_charging' %}
#6f6f6f
{% endif %}
entity: sensor.oppo_battery_state
icon: mdi:power-plug
tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.oppo_battery_level
icon: |2
{% set bl = states('sensor.oppo_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.oppo_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
content: '{{states(''sensor.oppo_battery_level'') | round(0) }}%'
alignment: end
card_mod:
style: |
.chip-contain
columns: 2
hello all
first after installing hacs, we must install theses integration and frontend
1.browser-mod
2.button-card
3.stack in card
4.light entity card
5.vertical stack-in card
6.card mod
7.layout card
8.custom brand icons
9.mushroom
10.mushroom themes
11.minimalistic area card
12.my cards bundle
after installing these , you are now ready to restart your HA, then you will start to create helpers(groups)to be used or implemented into you HA lovelace dashboard
now i will share the code, accordingly you will change type of entities to be effective in your HA lovelace dashboard, like creating groups for lights, switches, sensors or media..
they will be usesful for creating your dashboard
-First Code is for upper part of the dashboard which includes person Card Buttons
-Second Code is Sample for two rooms
-Third Code is for whole entire of my HA phone lovelace dashboard
type: vertical-stack
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.kitchen_all_lights
icon: mdi:silverware-fork-knife
icon_color: |
{% if is_state(entity, 'on') %}
#3ae431
{% else %}
grey
{% endif %}
primary: Kitchen
secondary: >-
{{ states('sensor.lumi_lumi_weather_temperature_2') }}°C | {% set
all = expand('light.kitchen_all_lights')| list -%}
{% set ND1 = all | selectattr('state','eq','on')|list|count%}
lights ON:{{ND1}}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/kitchen
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
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.bedroom', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.bedroom', 'hvac_action', 'cool') %}
#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: null
entity: light.kitchen_all_lights
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Kitchen All Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.kitchen_lights
name: Kitchen light 1
use_light_color: false
show_brightness_control: false
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.kitchen_lights_2
name: Kitchen light 2
use_light_color: false
show_brightness_control: false
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.kitchen_lights_3
name: Kitchen light 3
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.hot_kitchen_light_1
name: Hot Kitchen light 1
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.hot_kitchen_light_2
name: Hot Kitchen light 2
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: template
entity: switch.sonoff_10014d6afd_3
icon: mdi:pump
icon_color: |-
{% if is_state('switch.sonoff_10014d6afd_3', 'on') %}
blue
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: switch.sonoff_10014d6afd_4
state: 'on'
chip:
type: entity
entity: switch.sonoff_10014d6afd_4
icon_color: green
content_info: none
tap_action:
action: toggle
- type: template
entity: light.kitchen_mubarida_light
icon: mdi:air-filter
icon_color: |-
{% if is_state('light.kitchen_mubarida_light', 'on') %}
blue
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: binary_sensor.kitchen_door_3
state: 'on'
chip:
type: entity
entity: binary_sensor.kitchen_door_3
content_info: none
icon_color: red
- type: conditional
conditions:
- entity: media_player.kitchen_speaker
state: 'on'
chip:
type: entity
entity: media_player.kitchen_speaker
content_info: none
icon: mdi:play-pause
icon_color: blue-grey
- type: conditional
conditions:
- entity: lock.front_door
state: unlocked
chip:
type: entity
entity: lock.front_door
content_info: none
icon_color: red
tap_action:
action: toggle
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;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.sonoff_1000f79034
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
#df7c33
{% else %}
grey
{% endif %}
primary: Living
secondary: >-
{{ states('sensor.lumi_lumi_weather_temperature') }}°C | {% set
all = expand('switch.sonoff_1000f79034')| list -%}
{% set ND1 = all | selectattr('state','eq','on')|list|count%}
lights ON:{{ND1}}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/living-room
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
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.sinan_room_ac', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.sinan_room_ac', 'hvac_action', 'cool') %}
#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: null
entity: switch.sonoff_1000f79034
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Living Lights All
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: switch.sonoff_1000f79034
name: null
use_light_color: false
show_brightness_control: false
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.living_room_mubarida_light
name: null
use_light_color: false
show_brightness_control: false
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: template
entity: switch.sonoff_1000f79034
icon: mdi:toggle-switch-off-outline
icon_color: |-
{% if is_state('switch.sonoff_1000f79034', 'on') %}
yellow
{% else %}
grey
{% endif %}
- type: entity
entity: climate.livng_room_ac
icon_color: cyan
content_info: none
icon: phu:air-conditioner
double_tap_action:
action: toggle
- type: conditional
conditions:
- entity: media_player.tv_samsung_led48
state: 'on'
chip:
type: entity
entity: media_player.tv_samsung_led48
content_info: none
icon: mdi:television
icon_color: deep-orange
tap_action:
action: toggle
- type: template
icon_color: |-
{% if is_state('light.living_room_mubarida_light', 'on') %}
blue
{% else %}
grey
{% endif %}
entity: light.living_room_mubarida_light
tap_action:
action: toggle
icon: mdi:air-filter
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;
}
views:
- theme: minimalist-mobile
title: Home
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: lock.front_door
icon_color: red
tap_action:
action: toggle
- type: alarm-control-panel
entity: alarm_control_panel.aqara_hub_m1s_7272_security_system
content_info: none
name: Alarm
tap_action:
action: navigate
navigation_path: /dashboard-sinan/alarm
- type: conditional
conditions:
- entity: light.all_lights
state: 'on'
chip:
type: template
icon: phu:bulb-group-golfball-e14
content: >-
{{ expand(states.light.all_lights) | selectattr(
'state', 'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: light.all_lights
icon_color: amber
- type: conditional
conditions:
- entity: binary_sensor.all_door_sensors
state: 'on'
chip:
type: template
icon_color: pink
icon: mdi:door-open
content: >-
{{ expand(states.binary_sensor.all_door_sensors) |
selectattr( 'state', 'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: binary_sensor.all_door_sensors
- type: conditional
conditions:
- entity: binary_sensor.all_motion_sensors
state: 'on'
chip:
type: template
icon_color: red
icon: mdi:motion-sensor
content: >-
{{ expand(states.binary_sensor.all_motion_sensors) |
selectattr( 'state', 'eq', 'on') | list | count }}
tap_action:
action: more-info
entity: binary_sensor.all_motion_sensors
- type: entity
entity: weather.forecastf_homem
- square: false
type: grid
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.sinan_ibrahim
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Sinan
content:
type: vertical-stack
cards:
- type: map
entities:
- entity: person.sinan_ibrahim
dark_mode: false
hours_to_show: 12
aspect_ratio: '4:3'
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
/* Style person marker & adjust position to avoid blocking waypoints */
border: 3px solid var(--state-person) !important;
border-radius: 50% 50% 50% 0px !important;
transform: rotate(-45deg) translate(50%, -50%);
overflow: visible !important;
background: var(--state-person) !important;
}
.entity-picture {
/* Correct orientation of person avatar */
transform: rotate(45deg);
border-radius: 50%;
}
ha-map $: |
path:first-child {
/* Style accuracy radius */
stroke: var(--state-person);
fill: color-mix(in srgb, var(--state-person) 50%, transparent);
stroke-width: 0px;
}
path:nth-child(even) {
/* Styling for waypoints */
stroke: var(--purple-color);
fill: var(--purple-color);
stroke-width: 4px;
}
path:nth-child(odd):not(:first-child) {
/* Styling for lines */
stroke: var(--purple-color);
stroke-width: 4px;
}
.leaflet-control-attribution {
/* Style attribution text */
#display: none;
background: rgba(var(--rgb-card-background-color), 0.4) !important;
font-size: 10px;
}
.leaflet-container a {
/* Set color of zoom icons & attribution text */
color: var(--secondary-text-color);
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
/* Style zoom buttons like Chips */
border-radius: var(--mush-chip-border-radius, 19px) !important;
padding: 3px;
background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
margin: 8px 8px 0px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
.leaflet-top {
/* Move zoom buttons to bottom of map */
bottom: 0px !important;
}
.leaflet-control-zoom {
/* Allow buttons to be moved */
position: absolute !important;
/* Remove extra margin */
margin: 0px !important;
/* Remove zoom control border */
border: none !important;
}
.: |
ha-card {
/* Remove default card styling without affecting child elements */
box-shadow: none;
border-width: 0;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set person state color */
--state-person:
{% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
ha-icon-button {
/* Position center button */
bottom: 8px;
left: 8px !important;
top: auto !important;
/* Style center button to match Chip */
color: var(--deep-orange-color) !important;
background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
card_mod:
style:
ha-header-bar$: |
.mdc-top-app-bar__section--align-start {
justify-content: end !important;
}
.mdc-top-app-bar__section {
padding: 0px !important;
}
.mdc-top-app-bar__title {
display: none;
}
.mdc-top-app-bar__row {
height: 36px !important;
}
.mdc-top-app-bar {
padding: 8px;
}
.: |
ha-icon-button {
background: color-mix(in srgb, var(--grey-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-header-bar {
margin-bottom: -64px;
width: 36px;
margin-left: auto !important;
}
:host {
/* Remove border from poup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 18px;
}
.content {
/* Remove extra bottom border */
margin: -24px -24px -24px !important;
}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.sinans_iphone_battery_state') %}
{% if state=='Charging' or state=='Full' %}
green
{% elif state=='Not Charging' %}
#6f6f6f
{% endif %}
entity: sensor.sinans_iphone_battery_state
icon: mdi:power-plug
tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.sinans_iphone_battery_level
icon: |2
{% set bl = states('sensor.sinans_iphone_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sinans_iphone_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
content: >-
{{states('sensor.sinans_iphone_battery_level') | round(0)
}}%
alignment: end
card_mod:
style: |
.chip-contain
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.enas
content_info: none
use_entity_picture: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Enas
content:
type: vertical-stack
cards:
- type: map
entities:
- entity: person.enas
dark_mode: false
hours_to_show: 12
aspect_ratio: '4:3'
card_mod:
style:
ha-map $ ha-entity-marker $: |
.marker {
/* Style person marker & adjust position to avoid blocking waypoints */
border: 3px solid var(--state-person) !important;
border-radius: 50% 50% 50% 0px !important;
transform: rotate(-45deg) translate(50%, -50%);
overflow: visible !important;
background: var(--state-person) !important;
}
.entity-picture {
/* Correct orientation of person avatar */
transform: rotate(45deg);
border-radius: 50%;
}
ha-map $: |
path:first-child {
/* Style accuracy radius */
stroke: var(--state-person);
fill: color-mix(in srgb, var(--state-person) 50%, transparent);
stroke-width: 0px;
}
path:nth-child(even) {
/* Styling for waypoints */
stroke: var(--purple-color);
fill: var(--purple-color);
stroke-width: 4px;
}
path:nth-child(odd):not(:first-child) {
/* Styling for lines */
stroke: var(--purple-color);
stroke-width: 4px;
}
.leaflet-control-attribution {
/* Style attribution text */
#display: none;
background: rgba(var(--rgb-card-background-color), 0.4) !important;
font-size: 10px;
}
.leaflet-container a {
/* Set color of zoom icons & attribution text */
color: var(--secondary-text-color);
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
/* Style zoom buttons like Chips */
border-radius: var(--mush-chip-border-radius, 19px) !important;
padding: 3px;
background: rgb(var(--rgb-secondary-text-color), 0.2) !important;
margin: 8px 8px 0px;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
.leaflet-top {
/* Move zoom buttons to bottom of map */
bottom: 0px !important;
}
.leaflet-control-zoom {
/* Allow buttons to be moved */
position: absolute !important;
/* Remove extra margin */
margin: 0px !important;
/* Remove zoom control border */
border: none !important;
}
.: |
ha-card {
/* Remove default card styling without affecting child elements */
box-shadow: none;
border-width: 0;
border-radius: 0px 0px var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px);
transition: all 0s;
}
:host {
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
/* Set person state color */
--state-person:
{% if is_state(config.entities[0].entity, ['home', 'not_home', 'unknown']) %}
var(--state-person-{{ states(config.entities[0].entity) | replace('_', '-') }})
{% else %}
var(--state-person-zone)
{% endif %};
}
ha-icon-button {
/* Position center button */
bottom: 8px;
left: 8px !important;
top: auto !important;
/* Style center button to match Chip */
color: var(--deep-orange-color) !important;
background: color-mix(in srgb, var(--deep-orange-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
card_mod:
style:
ha-header-bar$: |
.mdc-top-app-bar__section--align-start {
justify-content: end !important;
}
.mdc-top-app-bar__section {
padding: 0px !important;
}
.mdc-top-app-bar__title {
display: none;
}
.mdc-top-app-bar__row {
height: 36px !important;
}
.mdc-top-app-bar {
padding: 8px;
}
.: |
ha-icon-button {
background: color-mix(in srgb, var(--grey-color) 20%, transparent);
border-radius: var(--mush-chip-border-radius, 19px);
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-header-bar {
margin-bottom: -64px;
width: 36px;
margin-left: auto !important;
}
:host {
/* Remove border from poup */
--popup-padding-x: 0px;
--popup-padding-y: 0px;
--popup-min-width: 450px;
--mdc-icon-button-size: 36px;
--mdc-icon-size: 18px;
}
.content {
/* Remove extra bottom border */
margin: -24px -24px -24px !important;
}
card_mod:
style: |
/* Color border around avatar to show person status */
ha-card {
--chip-background:
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
{% else %}
rgb(var(--rgb-state-person-zone))
{% endif %};
}
/* Slightly enlarge & bring to front on hover */
ha-card:hover {
transform: scale(1.2);
transform-origin: top center;
z-index: 1;
transition: all 1s;
}
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.oppo_battery_state') %}
{% if state=='charging' or state=='Full' %}
green
{% elif state=='not_charging' %}
#6f6f6f
{% endif %}
entity: sensor.oppo_battery_state
icon: mdi:power-plug
tap_action:
action: more-info
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.oppo_battery_level
icon: |2
{% set bl = states('sensor.oppo_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.oppo_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
content: '{{states(''sensor.oppo_battery_level'') | round(0) }}%'
alignment: end
card_mod:
style: |
.chip-contain
columns: 2
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
icon: mdi:power
icon_color: >-
{% if
is_state('binary_sensor.main_electricity_sonoff_spare_iaszone',
'on') %}
amber
{% else %}
grey
{% endif %}
entity: binary_sensor.main_electricity_sonoff_spare_iaszone
tap_action:
action: more-info
primary: main power
badge_color: ''
badge_icon: ''
secondary: >-
{% if
relative_time(states.binary_sensor.main_electricity_sonoff_spare_iaszone.last_updated)
== '0 seconds' %}
Now
{% else %}
{{ relative_time(states.binary_sensor.main_electricity_sonoff_spare_iaszone.last_updated) }} ago
{% endif %}
layout: vertical
multiline_secondary: false
fill_container: false
double_tap_action:
action: navigate
navigation_path: /sinan-dashboard-content/sensors
card_mod:
style:
mushroom-shape-icon$: >
.shape {
{{ '--shape-animation: ping 1.5s infinite, blink 1.5s
ease-in-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states:
- armed_night
name: Alarm
secondary_info: state
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: AC
secondary: ''
icon: phu:air-conditioner
icon_color: '#f077b3'
layout: vertical
tap_action:
action: navigate
navigation_path: /dashboard-sinan/ac-switches
badge_color: ''
badge_icon: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 1.5s ease-out infinite;
}
@keyframes clip {
0% {clip-path: inset(0 0 45% 0); }
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:mushroom-template-card
icon: mdi:cctv
icon_color: '#37ed48'
primary: CCTV
tap_action:
action: navigate
navigation_path: /dashboard-sinan/camera
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: scan 3s ease-in-out infinite;
transform-origin: 90% 80%
}
@keyframes scan {
0%, 100% { transform: rotate(20deg); }
50% { transform: rotate(-15deg); }
}
- type: custom:mushroom-template-card
primary: Sens
secondary: ''
icon: mdi:motion-sensor
layout: vertical
tap_action:
action: navigate
navigation_path: /dashboard-sinan/sensors
icon_color: amber
badge_icon: ''
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: clip 2s linear infinite;
}
@keyframes clip {
50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); }
}
.shape {
--shape-animation: motion 2s linear infinite;
}
@keyframes motion {
0%, 100% { --shape-color: rgba(var(--rgb-amber), 0.3); }
50% { --shape-color: rgba(var(--rgb-amber), 0.2); }
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: ''
icon: none
entity: sensor.garden_watertank_percent
layout: vertical
multiline_secondary: false
icon_color: ''
tap_action:
action: call-service
service: switch.turn_on
data: {}
target:
entity_id: switch.sonoff_10014d6afd_3
double_tap_action:
action: call-service
service: switch.turn_off
data: {}
target:
entity_id: switch.sonoff_10014d6afd_3
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states(config.entity) | int %}
{% if water_level > 80 %}
background: url("/local/levelpngs/Water 5.png") no-repeat center;
{% elif water_level > 60 %}
background: url("/local/levelpngs/Water 4.png") no-repeat center;
{% elif water_level > 40 %}
background: url("/local/levelpngs/Water 3.png") no-repeat center;
{% elif water_level > 20 %}
background: url("/local/levelpngs/Water 2.png") no-repeat center;
{% else %}
background: url("/local/levelpngs/Water 1.png") no-repeat center;
{% endif %}
background-size: contain;
--shape-color: none;
}
- type: custom:mushroom-template-card
primary: ''
secondary: >-
{{ (states(entity) | as_datetime | as_local - now()).days + 1 }}
day
icon: mdi:wifi
entity: input_datetime.reminder_date
layout: vertical
multiline_secondary: false
icon_color: white
hold_action:
action: call-service
service: script.new_script
target: {}
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-blue)) {{ ((states(config.entity) | as_datetime | as_local - now()).days + 1) / 30 * 100 }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
- type: vertical-stack
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.garage_all_lights
icon: mdi:car
icon_color: |
{% if is_state(entity, 'on') %}
#d9db0e
{% else %}
grey
{% endif %}
primary: Garage
secondary: >-
{% set all = expand('light.garage_all_lights')| list -%}
{% set ND1 = all |
selectattr('state','eq','on')|list|count%}
lights ON:{{ND1}}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/garage
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
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.bedroom', 'hvac_modes', 'heat') %}
red
{% elif is_state_attr('climate.bedroom', 'hvac_modes', 'cool') %}
#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: null
entity: light.garage_all_lights
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Garage All
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.garage_lights
name: Garage light 1
use_light_color: false
show_brightness_control: false
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.garage_lights_2
name: Garage light 2
use_light_color: false
show_brightness_control: false
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.garage_lights_3
name: Garage light 3
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: template
entity: input_boolean.pump_valve
icon: mdi:water-pump
icon_color: |-
{% if is_state('input_boolean.pump_valve', 'on') %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: toggle
- type: template
entity: switch.garden_zone
icon: mdi:water-alert-outline
icon_color: |-
{% if is_state('switch.garden_zone', 'on') %}
blue
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: binary_sensor.guest_door_2
state: 'on'
chip:
type: entity
entity: binary_sensor.guest_door_2
content_info: none
icon_color: red
- type: conditional
conditions:
- entity: binary_sensor.motion_sensor_557a
state: 'on'
chip:
type: entity
entity: binary_sensor.motion_sensor_557a
content_info: none
icon_color: red
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;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.sinan_lights_all
icon: mdi:sony-playstation
icon_color: |
{% if is_state(entity, 'on') %}
#03A9F1
{% else %}
grey
{% endif %}
primary: Sinan
secondary: |+
{{ states('sensor.lumi_lumi_weather_temperature_4') }}°C
{% if is_state('climate.sinan_room_ac', 'cool') %}
{% elif is_state('climate.sinan_room_ac', 'heat') %}
{% endif %}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/sinan-room
double_tap_action:
action: none
hold_action:
action: none
badge_icon: |
{% if is_state('climate.sinan_room_ac', 'heat') %}
mdi:fire
{% elif is_state('climate.sinan_room_ac', 'cool') %}
mdi:snowflake
{% else %} {% endif %}
badge_color: |
{% if is_state('climate.sinan_room_ac', 'heat') %}
red
{% elif is_state('climate.sinan_room_ac', '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_attr('climate.sinan_room_ac', 'hvac_modes', 'heat') %}
red
{% elif is_state_attr('climate.sinan_room_ac', 'hvac_modes', 'cool') %}
#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: null
entity: light.sinan_lights_all
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Sinan Lights All
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.sinan_room_lights
name: Sinan light 1
use_light_color: false
show_brightness_control: false
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.sinan_room_lights_2
name: Sinan light 2
use_light_color: false
show_brightness_control: false
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: binary_sensor.sinan_motion_sensor_iaszone
state: 'on'
chip:
type: entity
entity: binary_sensor.sinan_motion_sensor_iaszone
icon_color: red
content_info: none
- type: template
entity: switch.sonoff_1000f79035
icon_color: |-
{% if is_state('switch.sonoff_1000f79035', 'on') %}
yellow
{% else %}
grey
{% endif %}
icon: mdi:toggle-switch-off-outline
- type: entity
entity: climate.sinan_room_ac
icon_color: cyan
content_info: none
icon: phu:air-conditioner
double_tap_action:
action: toggle
- type: conditional
conditions:
- entity: light.philip_hue_lights
state: 'on'
chip:
type: entity
entity: light.philip_hue_lights
content_info: none
use_entity_picture: true
tap_action:
action: toggle
icon_color: amber
- type: conditional
conditions:
- entity: media_player.lg_webos_smart_tv
state: 'on'
chip:
type: entity
entity: media_player.lg_webos_smart_tv
content_info: none
icon_color: red
tap_action:
action: toggle
- type: conditional
conditions:
- entity: binary_sensor.sinan_motion_sensor_occupancy
state: ''
chip:
type: entity
entity: binary_sensor.sinan_motion_sensor_occupancy
- type: conditional
conditions:
- entity: switch.ps5_power
state: 'on'
chip:
type: entity
entity: switch.ps5_power
icon: mdi:sony-playstation
icon_color: blue
content_info: none
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;
}
- type: vertical-stack
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.closet_all
icon: mdi:hanger
icon_color: |
{% if is_state(entity, 'on') %}
#ae73cf
{% else %}
grey
{% endif %}
primary: Closet
secondary: >-
{{ states('sensor.lumi_lumi_weather_temperature_3')
}}°C|{% set all = expand('light.closet_all')| list -%}
{% set ND1 = all |
selectattr('state','eq','on')|list|count%}
lights ON:{{ND1}}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/closet
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
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.bedroom', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.bedroom', 'hvac_action', 'cool') %}
#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: null
entity: light.closet_all
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Closet All Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: switch.sonoff_1000ac6e49_1
name: Closet light 1
use_light_color: false
show_brightness_control: false
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: switch.sonoff_1000ac6e49_2
name: Closet light 2
use_light_color: false
show_brightness_control: false
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: switch.sonoff_1000ac6e49_3
name: Closet light 3
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: template
entity: binary_sensor.closet_motion_sensor_iaszone
icon: mdi:motion-sensor
icon_color: >-
{% if
is_state('binary_sensor.closet_motion_sensor_iaszone',
'on') %}
red
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: template
entity: switch.mujamida_lt
icon: mdi:snowflake-alert
icon_color: |-
{% if is_state('switch.mujamida_lt', 'on') %}
yellow
{% else %}
grey
{% endif %}
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;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.bathroom_all
icon: mdi:bathtub-outline
icon_color: |
{% if is_state(entity, 'on') %}
#e15c4e
{% else %}
grey
{% endif %}
primary: Bathroom
secondary: >-
{% set all = expand('switch.bathroom_all')| list -%}
{% set ND1 = all |
selectattr('state','eq','on')|list|count%}
Devices ON:{{ND1}}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/bathroom
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
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.sinan_room_ac', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.sinan_room_ac', 'hvac_action', 'cool') %}
#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: null
entity: switch.bathroom_all
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Bathroom All
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.light
name: Bathroom Light
use_light_color: false
show_brightness_control: false
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: switch.sonoff_1001372506_1
name: Bathroom Fan
use_light_color: false
show_brightness_control: false
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: switch.sonoff_100128d5d1
name: Washer Machine
use_light_color: false
show_brightness_control: false
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: template
entity: switch.sonoff_1000f79025
icon: mdi:fire-circle
icon_color: |-
{% if is_state('switch.sonoff_1000f79025', 'on') %}
orange
{% else %}
grey
{% endif %}
- type: template
entity: switch.sonoff_1001372506_1
icon: mdi:fan
icon_color: |-
{% if is_state('switch.sonoff_1001372506_1', 'on') %}
green
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: switch.sonoff_100128d5d1
state: 'on'
chip:
type: entity
entity: switch.sonoff_100128d5d1
icon_color: orange
content_info: none
- type: conditional
conditions:
- entity: binary_sensor.bathroom_motion_sensor_iaszone
state: 'on'
chip:
type: entity
entity: binary_sensor.bathroom_motion_sensor_iaszone
icon_color: red
content_info: none
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;
}
- type: vertical-stack
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.kitchen_all_lights
icon: mdi:silverware-fork-knife
icon_color: |
{% if is_state(entity, 'on') %}
#3ae431
{% else %}
grey
{% endif %}
primary: Kitchen
secondary: >-
{{ states('sensor.lumi_lumi_weather_temperature_2') }}°C |
{% set all = expand('light.kitchen_all_lights')| list -%}
{% set ND1 = all |
selectattr('state','eq','on')|list|count%}
lights ON:{{ND1}}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/kitchen
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
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.bedroom', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.bedroom', 'hvac_action', 'cool') %}
#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: null
entity: light.kitchen_all_lights
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Kitchen All Lights
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.kitchen_lights
name: Kitchen light 1
use_light_color: false
show_brightness_control: false
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.kitchen_lights_2
name: Kitchen light 2
use_light_color: false
show_brightness_control: false
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.kitchen_lights_3
name: Kitchen light 3
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.hot_kitchen_light_1
name: Hot Kitchen light 1
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.hot_kitchen_light_2
name: Hot Kitchen light 2
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: template
entity: switch.sonoff_10014d6afd_3
icon: mdi:pump
icon_color: |-
{% if is_state('switch.sonoff_10014d6afd_3', 'on') %}
blue
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: switch.sonoff_10014d6afd_4
state: 'on'
chip:
type: entity
entity: switch.sonoff_10014d6afd_4
icon_color: green
content_info: none
tap_action:
action: toggle
- type: template
entity: light.kitchen_mubarida_light
icon: mdi:air-filter
icon_color: >-
{% if is_state('light.kitchen_mubarida_light', 'on')
%}
blue
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: binary_sensor.kitchen_door_3
state: 'on'
chip:
type: entity
entity: binary_sensor.kitchen_door_3
content_info: none
icon_color: red
- type: conditional
conditions:
- entity: media_player.kitchen_speaker
state: 'on'
chip:
type: entity
entity: media_player.kitchen_speaker
content_info: none
icon: mdi:play-pause
icon_color: blue-grey
- type: conditional
conditions:
- entity: lock.front_door
state: unlocked
chip:
type: entity
entity: lock.front_door
content_info: none
icon_color: red
tap_action:
action: toggle
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;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.sonoff_1000f79034
icon: mdi:sofa
icon_color: |
{% if is_state(entity, 'on') %}
#df7c33
{% else %}
grey
{% endif %}
primary: Living
secondary: >-
{{ states('sensor.lumi_lumi_weather_temperature') }}°C |
{% set all = expand('switch.sonoff_1000f79034')| list -%}
{% set ND1 = all |
selectattr('state','eq','on')|list|count%}
lights ON:{{ND1}}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/living-room
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
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.sinan_room_ac', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.sinan_room_ac', 'hvac_action', 'cool') %}
#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: null
entity: switch.sonoff_1000f79034
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Living Lights All
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: switch.sonoff_1000f79034
name: null
use_light_color: false
show_brightness_control: false
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.living_room_mubarida_light
name: null
use_light_color: false
show_brightness_control: false
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: template
entity: switch.sonoff_1000f79034
icon: mdi:toggle-switch-off-outline
icon_color: |-
{% if is_state('switch.sonoff_1000f79034', 'on') %}
yellow
{% else %}
grey
{% endif %}
- type: entity
entity: climate.livng_room_ac
icon_color: cyan
content_info: none
icon: phu:air-conditioner
double_tap_action:
action: toggle
- type: conditional
conditions:
- entity: media_player.tv_samsung_led48
state: 'on'
chip:
type: entity
entity: media_player.tv_samsung_led48
content_info: none
icon: mdi:television
icon_color: deep-orange
tap_action:
action: toggle
- type: template
icon_color: >-
{% if is_state('light.living_room_mubarida_light',
'on') %}
blue
{% else %}
grey
{% endif %}
entity: light.living_room_mubarida_light
tap_action:
action: toggle
icon: mdi:air-filter
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;
}
- type: vertical-stack
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.sonoff_1000f79115
icon: mdi:bed
icon_color: |
{% if is_state(entity, 'on') %}
#22d0d2
{% else %}
grey
{% endif %}
primary: Bedroom
secondary: >-
{{ states('sensor.bedroom_temperature_feels_like') }}°C |
{% set all = expand('switch.sonoff_1000f79115')| list -%}
{% set ND1 = all |
selectattr('state','eq','on')|list|count%}
Device ON:{{ND1}}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/bedroom
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
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.sinan_room_ac', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.sinan_room_ac', 'hvac_action', 'cool') %}
#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: null
entity: climate.bedroom
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Bedroom All
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: climate.bedroom
name: Bedroom AC
use_light_color: false
show_brightness_control: false
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: switch.sonoff_1000f79115
name: Bedroom AC Switch
use_light_color: false
show_brightness_control: false
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: null
name: null
use_light_color: false
show_brightness_control: false
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: template
entity: switch.sonoff_1000f79115
icon: mdi:toggle-switch-off-outline
icon_color: |-
{% if is_state('switch.sonoff_1000f79115', 'on') %}
yellow
{% else %}
grey
{% endif %}
- type: entity
entity: climate.bedroom
icon_color: cyan
content_info: none
icon: phu:air-conditioner
- type: template
entity: light.bedroom_mubarida_light
icon: mdi:air-filter
icon_color: >-
{% if is_state('light.bedroom_mubarida_light', 'on')
%}
blue
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: binary_sensor.vibration_sensor
state: 'on'
chip:
type: entity
entity: binary_sensor.vibration_sensor
content_info: none
icon_color: red
- type: template
entity: switch.bedroom_mobile_plug_outlet
icon: mdi:power-socket-uk
icon_color: >-
{% if is_state('switch.bedroom_mobile_plug_outlet',
'on') %}
yellow
{% else %}
grey
{% endif %}
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;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: switch.kids_plug_lt
icon: mdi:face-man-shimmer
icon_color: |
{% if is_state(entity, 'on') %}
#d10cb8
{% else %}
grey
{% endif %}
primary: Kids
secondary: >-
{{ states('sensor.lumi_lumi_weather_temperature_5') }}°C |
{% set all = expand('switch.kids_plug_lt')| list -%}
{% set ND1 = all |
selectattr('state','eq','on')|list|count%}
Device ON:{{ND1}}
layout: horizontal
tap_action:
action: navigate
navigation_path: /dashboard-sinan/kids-room
double_tap_action:
action: none
hold_action:
action: none
badge_icon: ''
badge_color: ''
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.kids_room_ac', 'hvac_action', 'heat') %}
red
{% elif is_state_attr('climate.kids_room_ac', 'hvac_action', 'cool') %}
#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: null
entity: switch.kids_plug_lt
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Kids All
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: switch.kids_plug_lt
name: Kids Plug
use_light_color: false
show_brightness_control: false
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: climate.kids_room_ac
name: Kids AC
use_light_color: false
show_brightness_control: false
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: entity
entity: climate.kids_room_ac
content_info: none
icon_color: cyan
icon: phu:air-conditioner
- type: template
entity: switch.kids_plug_lt
icon: mdi:power-socket-eu
icon_color: |-
{% if is_state('switch.kids_plug_lt', 'on') %}
yellow
{% else %}
grey
{% endif %}
- type: conditional
conditions:
- entity: binary_sensor.upstairs_door_sensor
state: 'on'
chip:
type: entity
entity: binary_sensor.upstairs_door_sensor
icon_color: red
content_info: none
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;
}
- title: Sensors
path: sensors
icon: mdi:motion-sensor
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: custom:auto-entities
card:
show_header_toggle: false
title: Battery low
type: entities
state_color: true
filter:
include:
- attributes:
device_class: battery
state: <= 15
exclude:
- name: /[Ll]ow/
- name: /[Ss]tate/
sort:
method: state
numeric: true
- type: custom:apexcharts-card
experimental:
color_threshold: true
graph_span: 7d
span:
end: day
show:
last_updated: true
header:
show: true
title: Main Power Last 24 hour
show_states: true
colorize_states: true
yaxis:
- min: 0
max: ~24
decimals: 0
apex_config:
tickAmount: 6
series:
- entity: sensor.main_power_on_duration
show:
header_color_threshold: true
extremas: true
as_duration: hour
type: column
name: duration
group_by:
func: last
duration: 1d
color_threshold:
- value: 24
color: green
- value: 20
color: blue
- value: 16
color: cyan
- value: 12
color: yellow
- value: 8
color: orange
- value: 4
color: darkred
- type: horizontal-stack
cards:
- graph: line
hours_to_show: 72
type: sensor
detail: 1
entity: sensor.lumi_lumi_weather_temperature_2
- type: horizontal-stack
cards:
- graph: line
hours_to_show: 72
type: sensor
detail: 2
entity: sensor.lumi_lumi_weather_temperature_3
- graph: line
hours_to_show: 72
type: sensor
detail: 2
entity: sensor.garden_watertank_percent
name: water level
- type: entities
entities:
- entity: sensor.ijai_v3_f07c_status
name: Robot Cleaner Status
- entity: sensor.ijai_v3_f07c_hypa_life
name: Sweep hypa-life
- entity: sensor.ijai_v3_f07c_main_brush_life
name: Sweep main-brush-life
- entity: sensor.ijai_v3_f07c_mop_life
name: Sweep mop-life
- entity: sensor.ijai_v3_f07c_side_brush_life
name: Sweep side-brush-life
title: Xiaomi Miot
state_color: true
- type: horizontal-stack
cards:
- graph: line
hours_to_show: 72
type: sensor
detail: 1
entity: sensor.lumi_lumi_weather_temperature_5
- type: horizontal-stack
cards:
- graph: line
hours_to_show: 72
type: sensor
detail: 2
entity: sensor.lumi_lumi_weather_temperature_4
- type: custom:auto-entities
card:
type: entities
state_color: true
filter:
include:
- domain: binary_sensor
attributes:
device_class: motion
sort:
method: last_changed
reverse: true
count: null
- type: custom:auto-entities
card:
type: entities
state_color: true
filter:
include:
- attributes:
device_class: battery
sort:
method: last_changed
reverse: true
count: null
- type: custom:auto-entities
card:
type: entities
state_color: true
filter:
include:
- domain: binary_sensor
attributes:
device_class: door
sort:
method: last_changed
reverse: true
count: null
- type: custom:auto-entities
show_empty: false
card:
type: entities
title: Lights on
show_header_toggle: false
filter:
include:
- domain: light
exclude:
- state: 'off'
- state: unavailable
- hidden_by: user
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: Ac Switches
path: ac-switches
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: entities
entities:
- entity: switch.sonoff_1000f79115
- entity: switch.sonoff_1000f79034
- entity: switch.sonoff_1000f79035
- entity: switch.sonoff_1000f79025
title: AC Switches
state_color: true
- type: grid
square: false
columns: 1
cards:
- type: entities
entities:
- select.bedroom_light
- type: thermostat
entity: climate.bedroom
- type: custom:better-thermostat-ui-card
entity: climate.sinan_room_ac
set_current_as_main: false
name: Sinan Room AC
eco_temperature: 25
- type: custom:better-thermostat-ui-card
entity: climate.livng_room_ac
name: Living Room AC
eco_temperature: 30
- type: custom:better-thermostat-ui-card
entity: climate.kids_room_ac
disable_eco: true
name: Kids Room AC
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: Camera
path: camera
icon: mdi:cctv
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: custom:frigate-card
cameras:
- camera_entity: camera.garage
dimensions:
aspect_ratio_mode: dynamic
view:
default: live
camera_select: live
menu:
position: right
alignment: right
- type: custom:frigate-card
cameras:
- camera_entity: camera.roof
dimensions:
aspect_ratio_mode: dynamic
view:
default: live
camera_select: live
menu:
position: right
alignment: right
- camera_view: live
type: picture-glance
title: Sinan Room
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities: []
camera_image: camera.sinan_cam_hd_stream
- camera_view: live
type: picture-glance
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities:
- entity: binary_sensor.camera_hub_g2hpro_b8d4_motion_sensor
title: 'Living room '
camera_image: camera.camera_hub_g2hpro_b8d4
- type: horizontal-stack
cards:
- camera_view: live
type: picture-glance
title: Kids Cam
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities: []
camera_image: camera.kids_cam
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: alarm
path: alarm
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: custom:digital-clock
- type: alarm-panel
states:
- arm_night
entity: alarm_control_panel.alarmo
- title: Kitchen
path: kitchen
icon: mdi:silverware-clean
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- graph: line
hours_to_show: 24
type: sensor
detail: 1
entity: sensor.lumi_lumi_weather_temperature_2
- type: entities
entities:
- entity: lock.front_door
secondary_info: last-changed
- entity: light.kitchen_lights
- entity: light.kitchen_lights_2
- entity: light.kitchen_lights_3
- entity: light.hot_kitchen_light_1
- entity: light.hot_kitchen_light_2
- entity: light.controller_rgb_2c4b68
- entity: switch.eno_power_plug_socket_1
secondary_info: last-changed
- entity: switch.kitchen_plug_socket_1
secondary_info: last-changed
- entity: switch.sonoff_10014d6afd_3
- entity: switch.sonoff_10014d6afd_4
- entity: light.kitchen_mubarida_light
secondary_info: last-changed
- entity: switch.bot_3640
- entity: vacuum.ijai_v3_f07c_robot_cleaner
- entity: binary_sensor.kitchen_door_3
icon: mdi:door
secondary_info: last-changed
- entity: binary_sensor.trust_smokesensor_em_smoke
- entity: sensor.garden_watertank_percent
title: Kitchen
state_color: true
theme: Mushroom Shadow
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.kitchen_door_battery_sensor_3
theme: Mushroom Shadow
min: 0
max: 100
needle: true
severity:
green: 50
yellow: 20
red: 0
name: Kitchen Door Sensor
- type: gauge
entity: sensor.bot_3640_battery
name: Bot
min: 0
max: 100
needle: true
severity:
green: 50
yellow: 20
red: 0
- type: gauge
entity: sensor.ijai_v3_f07c_battery_level
name: Vaccum Robot
min: 0
max: 100
needle: true
severity:
green: 50
yellow: 20
red: 0
- type: gauge
entity: sensor.lumi_lumi_weather_battery_2
name: Kitchen Temp batt
min: 0
max: 100
needle: true
severity:
green: 50
yellow: 20
red: 0
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: light.kitchen_all_lights
show_state: true
icon: mdi:lightbulb-group
- type: custom:mushroom-template-card
entity: switch.sonoff_10014d6afd_4
primary: ساحبة المطبخ
icon: mdi:fan
icon_color: |-
{% if is_state('switch.sonoff_10014d6afd_4', 'on') %}
teal
{% else %}
grey
{% endif %}
secondary: >-
{% if relative_time(states.switch.sonoff_10014d6afd_4.last_updated) ==
'0 seconds' %}
Now
{% else %}
{{ relative_time(states.switch.sonoff_10014d6afd_4.last_updated) }} ago
{% endif %}
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state(config.entity, 'on') }}
}
- type: custom:mushroom-media-player-card
entity: media_player.kitchen_speaker
volume_controls:
- volume_mute
- volume_set
- volume_buttons
media_controls:
- on_off
- play_pause_stop
collapsible_controls: true
use_media_info: true
show_volume_level: true
- type: horizontal-stack
cards:
- show_name: true
show_icon: true
type: button
entity: script.media_kral_fm
icon: mdi:radio
tap_action:
action: toggle
name: Kral FM
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: Living Room
path: living-room
icon: mdi:sofa
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: sensor.lumi_lumi_weather_temperature
secondary_info: last-changed
- entity: switch.sonoff_1000f79034
- entity: light.living_room_mubarida_light
secondary_info: last-changed
title: Living Room
state_color: true
theme: Mushroom Shadow
- camera_view: live
type: picture-glance
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities:
- entity: binary_sensor.camera_hub_g2hpro_b8d4_motion_sensor
- entity: alarm_control_panel.aqara_hub_m1s_7272_security_system
title: 'Living room '
camera_image: camera.camera_hub_g2hpro_b8d4
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.samsung_tv_test
icon: mdi:television-play
use_entity_picture: true
name: samsung tv
content_info: name
tap_action:
action: toggle
icon_color: pink
alignment: center
- type: custom:mini-media-player
entity: media_player.tv_samsung_led48
- type: custom:better-thermostat-ui-card
entity: climate.livng_room_ac
name: Livng Room AC
disable_eco: true
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: Garage
path: garage
icon: mdi:car-traction-control
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: vertical-stack
cards:
- type: entities
entities:
- entity: light.garage_lights
- entity: light.garage_lights_2
- entity: light.garage_lights_3
- entity: switch.water_pump_outside_socket_1
secondary_info: last-changed
- entity: switch.smart_valve_controller_switch_1
secondary_info: last-changed
- entity: input_boolean.pump_valve
secondary_info: last-changed
- entity: binary_sensor.guest_door_2
icon: mdi:door
secondary_info: last-changed
- entity: binary_sensor.motion_sensor_557a
secondary_info: last-changed
name: Motion Sensor
- entity: switch.garden_zone
secondary_info: last-changed
- entity: timer.graden_timer
title: Garage
state_color: true
theme: Mushroom Shadow
- type: horizontal-stack
cards:
- type: gauge
entity: sensor.guest_door_battery_sensor_2
min: 0
max: 100
needle: true
severity:
green: 50
yellow: 20
red: 0
name: Guests Door Sensor
- type: gauge
name: Garage T&H sensor
needle: true
severity:
green: 50
yellow: 20
red: 0
min: 0
max: 99
entity: sensor.lumi_lumi_weather_battery_3
- type: custom:frigate-card
cameras:
- camera_entity: camera.garage
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: Sinan Room
path: sinan-room
icon: mdi:sony-playstation
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: entities
entities:
- entity: sensor.lumi_lumi_weather_temperature_4
secondary_info: last-changed
- entity: light.sinan_room_lights
secondary_info: last-changed
- entity: light.sinan_room_lights_2
secondary_info: last-changed
- entity: light.upstairs_room
secondary_info: last-changed
- entity: switch.sonoff_1000f79035
secondary_info: last-changed
- entity: binary_sensor.sinan_motion_sensor_iaszone
secondary_info: last-changed
- entity: sensor.ps5_activity
secondary_info: last-changed
- entity: switch.ps5_power
secondary_info: last-changed
title: Sinan Room
state_color: true
theme: Mushroom Shadow
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: PlayStation 5
secondary: |-
{% if is_state('switch.ps5_power', 'on') %}
{{ state_attr('sensor.ps5_activity', 'title_name')
or states('sensor.ps5_activity')
}}
{%- else -%}
{{ states('switch.ps5_power') }}
{%- endif -%}
icon: mdi:sony-playstation
entity: switch.ps5_power
picture: >-
{% if state_attr('sensor.ps5_activity', 'activity') == "playing"
%}
{{state_attr('sensor.ps5_activity', 'title_image')}}
{% else %}
{% endif %}
badge_icon: |-
{% if is_state('sensor.ps5_activity', 'playing') %}
mdi:controller
{%- elif is_state('sensor.ps5_activity', 'idle') -%}
mdi:sleep
{%- endif -%}
tap_action:
action: more-info
hold_action:
action: toggle
- camera_view: live
type: picture-glance
title: Sinan Room
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities: []
camera_image: camera.sinan_cam_hd_stream
- type: horizontal-stack
cards:
- type: gauge
needle: true
severity:
green: 51
yellow: 20
red: 0
min: 0
max: 100
name: 'Motion Sensor '
entity: sensor.sinan_motion_sensor_battery
- type: gauge
entity: sensor.lumi_lumi_weather_battery_4
min: 0
max: 100
needle: true
severity:
green: 50
yellow: 20
red: 0
name: T&H Sensor
- type: custom:mushroom-climate-card
entity: climate.sinan_room_ac
icon: phu:air-conditioner
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.hue_go_1
use_light_color: true
show_brightness_control: true
show_color_control: true
hold_action:
action: none
double_tap_action:
action: none
icon: phu:go
- type: custom:mushroom-light-card
entity: light.hue_go_2
show_brightness_control: true
use_light_color: true
show_color_control: true
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.hue_color_lamp_1
use_light_color: true
show_brightness_control: true
show_color_control: true
hold_action:
action: none
double_tap_action:
action: none
icon: phu:bulb-flood
- type: custom:mushroom-light-card
entity: light.hue_color_lamp_2
show_brightness_control: true
use_light_color: true
show_color_control: true
hold_action:
action: none
double_tap_action:
action: none
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.hue_play_1
use_light_color: true
show_brightness_control: true
show_color_control: true
hold_action:
action: none
double_tap_action:
action: none
icon: phu:play
- type: custom:mushroom-light-card
entity: light.hue_play_2
show_brightness_control: true
use_light_color: true
show_color_control: true
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-light-card
entity: light.hue_play_gradient_lightstrip_1
use_light_color: true
show_brightness_control: true
show_color_control: true
hold_action:
action: none
double_tap_action:
action: none
layout: horizontal
icon: phu:light-strip
- type: custom:mini-media-player
entity: media_player.sinan_room
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.lg_tv_test
icon: mdi:television-play
name: Lg TV
content_info: name
tap_action:
action: toggle
use_entity_picture: true
icon_color: pink
alignment: center
- type: custom:mini-media-player
entity: media_player.lg_webos_smart_tv
- type: custom:better-thermostat-ui-card
entity: climate.sinan_room_ac
name: Sinan Room AC
disable_eco: true
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: Closet
path: closet
icon: mdi:hanger
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: sensor.lumi_lumi_weather_temperature_3
secondary_info: last-changed
- entity: light.closet_light_1
secondary_info: last-changed
- entity: light.closet_light_2
secondary_info: last-changed
- entity: light.closet_strip_lights
secondary_info: last-changed
- entity: binary_sensor.closet_motion_sensor_iaszone
name: Closet Motion Sensor
secondary_info: last-changed
- entity: timer.twenty_minutes_timer
title: Closet Room
state_color: true
theme: Mushroom Shadow
- type: entities
entities:
- entity: switch.mujamida_lt
state_color: true
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: Kids Room
path: kids-room
icon: mdi:face-man-shimmer
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: sensor.lumi_lumi_weather_temperature_5
secondary_info: last-changed
- entity: switch.kids_plug_lt
name: Kids Plug
icon: mdi:power-socket-eu
title: Kids Room
state_color: true
- type: gauge
min: 0
max: 100
needle: true
severity:
green: 50
yellow: 20
red: 0
theme: Mushroom Shadow
entity: sensor.lumi_lumi_weather_battery_5
- camera_view: live
type: picture-glance
title: Kids Cam
image: https://demo.home-assistant.io/stub_config/kitchen.png
entities:
- entity: switch.kids_cam_motion_alarm
camera_image: camera.kids_cam
- graph: line
hours_to_show: 168
type: sensor
detail: 2
entity: sensor.lumi_lumi_weather_temperature_5
- type: custom:better-thermostat-ui-card
entity: climate.kids_room_ac
disable_eco: true
- graph: line
hours_to_show: 168
type: sensor
detail: 2
entity: sensor.lumi_lumi_weather_humidity_5
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: Bathroom
path: bathroom
icon: mdi:bathtub-outline
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: sensor.sonoff_1001372506_voltage_1
- entity: switch.sonoff_1001372506_1
secondary_info: last-changed
- entity: light.light
secondary_info: last-changed
- entity: switch.sonoff_1000f79025
secondary_info: last-changed
- entity: switch.sonoff_100128d5d1
- entity: sensor.sonoff_1001372506_current_1
- entity: binary_sensor.bathroom_motion_sensor_iaszone
secondary_info: last-changed
- entity: timer.three_minutes_timer
title: Bathroom
state_color: true
theme: Mushroom Shadow
- type: custom:mushroom-template-card
primary: Water Heater (Giizar)
icon: mdi:fire
icon_color: |-
{% if is_state('switch.sonoff_1000f79025', 'on') %}
red
{% else %}
grey
{% endif %}
entity: switch.sonoff_1000f79025
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{{ '--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- title: Bedroom
path: bedroom
icon: mdi:bed
theme: kibibit-dark-cards
visible:
- user: e5d4be460d2e49f2b645f4d88edbb8f7
badges: []
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
- type: horizontal-stack
cards:
- type: entities
entities:
- entity: switch.sonoff_1000f79115
secondary_info: last-changed
- entity: light.bedroom_mubarida_light
secondary_info: last-changed
name: Bedroom Mubarida
- entity: switch.bedroom_mobile_plug_outlet
secondary_info: last-changed
title: Bedroom
theme: Mushroom Shadow
state_color: true
- type: grid
square: false
columns: 1
cards:
- type: entities
entities:
- select.bedroom_light
- type: thermostat
entity: climate.bedroom
- type: custom:mushroom-chips-card
chips:
- type: action
double_tap_action:
action: none
icon: mdi:arrow-left
tap_action:
action: navigate
navigation_path: /dashboard-sinan/0
hold_action:
action: none
icon_color: green
title: Sinan Dashboard
@saschaludwig
Copy link

saschaludwig commented Mar 7, 2023

Thank you very much for sharing!
What is "my cards bundle" for a card? I can't find it on HACS

@SinanMQTT
Copy link
Author

Thank you very much for sharing! What is "my cards bundle" for a card? I can't find it on HACS

https://github.com/AnthonMS/my-cards

@saschaludwig
Copy link

Where exactly are they used?
I can't find any reference to custom:my-* in your YAML files.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment