├── subview_camera_card.yaml ├── screens_card.yaml ├── subview_energy_distribution_card.yaml ├── energy_electricity_netto_last_weekcard.yaml ├── subview_climate_trapkast_card.yaml ├── energy_gas_last_week.yaml ├── energy_water_last_week.yaml ├── energy_electricity_in_last_week_card.yaml ├── energy_electricity_out_last_week_card.yaml ├── energy_solar_today_vs_prediction_card.yaml ├── multimedia_mediaplayer_card.yaml ├── energy_gas_vs_temp_last_week_card.yaml ├── subview_climate_graph_card.yaml ├── energy_solar_today_vs_yesterday_vs_prediction_card.yaml ├── temperatures_climate_card.yaml ├── subview_kinderkamer_sophie_slaapwekker_card.yaml ├── top_navigation_buttons.yaml ├── achtertuin_room_card.yaml ├── top_chips_today_overview.yaml ├── subview_trapkast_detailed_card.yaml ├── subview_kinderkamer_sophie_detailed_card.yaml ├── overkapping_room_card.yaml ├── overloop1_room_card.yaml ├── speelhuis_room_card.yaml ├── toilet_room_card.yaml ├── keuken_room_card.yaml ├── top_chips_current_overview.yaml ├── overloop2_room_card.yaml ├── subview_kinderkamer_lucas_detailed_card.yaml ├── multimedia_tv_audio_controll_card.yaml ├── vlinderhuis_room_card.yaml ├── slaapkamer_room_card.yaml ├── trapkast_room_card.yaml ├── garage_room_card.yaml ├── badkamer_room_card.yaml ├── zolderkamer_room_card.yaml ├── washok_room_card.yaml ├── pomphuis_room_card.yaml ├── top_persons_without_popup.yaml ├── kinderkamer_lucas_room_card.yaml ├── kinderkamer_sophie_room_card.yaml └── woonkamer_room_card.yaml /subview_camera_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:webrtc-camera 2 | url: rtsp://127.0.0.1:8560/sophie 3 | muted: true 4 | -------------------------------------------------------------------------------- /screens_card.yaml: -------------------------------------------------------------------------------- 1 | type: grid 2 | title: Screens Verdieping 1 3 | cards: 4 | - type: custom:mushroom-cover-card 5 | entity: cover.screen_lucas 6 | name: Lucas 7 | show_buttons_control: true 8 | icon: mdi:window-shutter 9 | tap_action: 10 | action: more-info 11 | - type: custom:mushroom-cover-card 12 | entity: cover.screen_sophie 13 | name: Sophie 14 | show_buttons_control: true 15 | tap_action: 16 | action: more-info 17 | icon: mdi:window-shutter 18 | columns: 2 19 | square: false 20 | -------------------------------------------------------------------------------- /subview_energy_distribution_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | mode: vertical 3 | cards: 4 | - type: energy-date-selection 5 | - type: custom:sankey-chart 6 | height: 200 7 | unit_prefix: k 8 | round: 1 9 | min_box_height: 20 10 | min_box_distance: 5 11 | show_states: true 12 | show_units: true 13 | show_names: true 14 | show_icons: true 15 | energy_date_selection: true 16 | wide: true 17 | sections: 18 | - entities: 19 | - entity_id: sensor.kinderkamer_sophie_total_energy_kwh 20 | type: remaining_child_state 21 | name: Sophie 22 | color: red 23 | children: 24 | - sensor.kinderkamer_sophie_elektronica_plug_tuya_energy 25 | - entities: 26 | - entity_id: sensor.kinderkamer_sophie_elektronica_plug_tuya_energy 27 | type: entity 28 | color: blue 29 | -------------------------------------------------------------------------------- /energy_electricity_netto_last_weekcard.yaml: -------------------------------------------------------------------------------- 1 | type: custom:stack-in-card 2 | title: Netto Elektriciteit 3 | cards: 4 | - type: custom:apexcharts-card 5 | graph_span: 3d 6 | span: 7 | end: day 8 | apex_config: 9 | chart: 10 | height: 150px 11 | fontFamily: Raleway,sans-serif 12 | legend: 13 | show: true 14 | stroke: 15 | width: 3 16 | plotOptions: 17 | bar: 18 | columnWidth: 100% 19 | grid: 20 | show: true 21 | borderColor: '#00000030' 22 | strokeDashArray: 4 23 | position: back 24 | experimental: 25 | color_threshold: true 26 | header: 27 | show: true 28 | show_states: false 29 | colorize_states: false 30 | yaxis: 31 | - id: first 32 | decimals: 2 33 | apex_config: 34 | tickAmount: 1 35 | series: 36 | - entity: sensor.power_p1_netto_daily_kwh 37 | name: temp 38 | yaxis_id: first 39 | show: 40 | legend_value: true 41 | datalabels: false 42 | in_header: true 43 | name_in_header: true 44 | type: area 45 | opacity: 0.2 46 | color: yellow 47 | extend_to: false 48 | group_by: 49 | func: avg 50 | duration: 60min 51 | -------------------------------------------------------------------------------- /subview_climate_trapkast_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:stack-in-card 2 | cards: 3 | - type: grid 4 | square: false 5 | columns: 3 6 | cards: 7 | - type: custom:mushroom-entity-card 8 | entity: sensor.trapkast_temperature 9 | primary_info: state 10 | secondary_info: name 11 | name: Temperature 12 | icon_color: orange 13 | - type: custom:mini-graph-card 14 | entities: 15 | - entity: sensor.trapkast_temperature 16 | name: Temperature 17 | color_thresholds: 18 | - value: -20 19 | color: '#264CFF' 20 | - value: -15 21 | color: '#3FA0FF' 22 | - value: -10 23 | color: '#72D8FF' 24 | - value: -5 25 | color: '#AAF7FF' 26 | - value: 0 27 | color: '#E0FFFF' 28 | - value: 5 29 | color: '#FFFFBF' 30 | - value: 10 31 | color: '#FFE099' 32 | - value: 15 33 | color: '#FFAD72' 34 | - value: 20 35 | color: '#F76D5E' 36 | - value: 25 37 | color: '#D82632' 38 | - value: 30 39 | color: '#A50021' 40 | hours_to_show: 24 41 | line_width: 3 42 | font_size: 50 43 | animate: true 44 | show: 45 | name: false 46 | icon: false 47 | state: false 48 | legend: false 49 | fill: fade 50 | -------------------------------------------------------------------------------- /energy_gas_last_week.yaml: -------------------------------------------------------------------------------- 1 | type: custom:stack-in-card 2 | title: Gas 3 | cards: 4 | - type: custom:apexcharts-card 5 | graph_span: 7d 6 | span: 7 | end: day 8 | apex_config: 9 | chart: 10 | height: 150px 11 | fontFamily: Raleway,sans-serif 12 | legend: 13 | show: false 14 | stroke: 15 | width: 5 16 | plotOptions: 17 | bar: 18 | columnWidth: 100% 19 | grid: 20 | show: true 21 | borderColor: '#00000030' 22 | strokeDashArray: 4 23 | position: back 24 | experimental: 25 | color_threshold: true 26 | header: 27 | show: true 28 | show_states: false 29 | colorize_states: false 30 | yaxis: 31 | - id: first 32 | decimals: 0 33 | min: 0 34 | apex_config: 35 | tickAmount: 2 36 | series: 37 | - entity: sensor.gas_import_p1_daily 38 | name: Gas 39 | yaxis_id: first 40 | show: 41 | legend_value: true 42 | datalabels: true 43 | in_header: true 44 | name_in_header: true 45 | type: column 46 | group_by: 47 | func: max 48 | duration: 1d 49 | color_threshold: 50 | - value: 0 51 | color: green 52 | - value: 10 53 | color: orange 54 | - value: 12 55 | color: red 56 | -------------------------------------------------------------------------------- /energy_water_last_week.yaml: -------------------------------------------------------------------------------- 1 | type: custom:stack-in-card 2 | title: Water 3 | cards: 4 | - type: custom:apexcharts-card 5 | graph_span: 7d 6 | span: 7 | end: day 8 | apex_config: 9 | chart: 10 | height: 150px 11 | fontFamily: Raleway,sans-serif 12 | legend: 13 | show: false 14 | stroke: 15 | width: 5 16 | plotOptions: 17 | bar: 18 | columnWidth: 100% 19 | grid: 20 | show: true 21 | borderColor: '#00000030' 22 | strokeDashArray: 4 23 | position: back 24 | experimental: 25 | color_threshold: true 26 | header: 27 | show: true 28 | show_states: false 29 | colorize_states: false 30 | yaxis: 31 | - id: first 32 | decimals: 0 33 | min: 0 34 | apex_config: 35 | tickAmount: 2 36 | series: 37 | - entity: sensor.waterverbruik_per_dag 38 | name: Water 39 | yaxis_id: first 40 | show: 41 | legend_value: true 42 | datalabels: true 43 | in_header: true 44 | name_in_header: true 45 | type: column 46 | group_by: 47 | func: max 48 | duration: 1d 49 | color_threshold: 50 | - value: 0.2 51 | color: green 52 | - value: 0.3 53 | color: orange 54 | - value: 0.5 55 | color: red 56 | -------------------------------------------------------------------------------- /energy_electricity_in_last_week_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:stack-in-card 2 | title: Electriciteit In 3 | cards: 4 | - type: custom:apexcharts-card 5 | graph_span: 7d 6 | span: 7 | end: day 8 | apex_config: 9 | chart: 10 | height: 150px 11 | fontFamily: Raleway,sans-serif 12 | legend: 13 | show: false 14 | stroke: 15 | width: 5 16 | plotOptions: 17 | bar: 18 | columnWidth: 100% 19 | grid: 20 | show: true 21 | borderColor: '#00000030' 22 | strokeDashArray: 4 23 | position: back 24 | experimental: 25 | color_threshold: true 26 | header: 27 | show: true 28 | show_states: false 29 | colorize_states: false 30 | yaxis: 31 | - id: first 32 | decimals: 0 33 | min: 0 34 | apex_config: 35 | tickAmount: 2 36 | series: 37 | - entity: sensor.power_import_p1_daily 38 | name: Electriciteit 39 | yaxis_id: first 40 | show: 41 | legend_value: true 42 | datalabels: true 43 | in_header: true 44 | name_in_header: true 45 | type: column 46 | group_by: 47 | func: max 48 | duration: 1d 49 | color_threshold: 50 | - value: 5 51 | color: green 52 | - value: 10 53 | color: orange 54 | - value: 15 55 | color: red 56 | -------------------------------------------------------------------------------- /energy_electricity_out_last_week_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:stack-in-card 2 | title: Electriciteit Uit 3 | cards: 4 | - type: custom:apexcharts-card 5 | graph_span: 7d 6 | span: 7 | end: day 8 | apex_config: 9 | chart: 10 | height: 150px 11 | fontFamily: Raleway,sans-serif 12 | legend: 13 | show: false 14 | stroke: 15 | width: 5 16 | plotOptions: 17 | bar: 18 | columnWidth: 100% 19 | grid: 20 | show: true 21 | borderColor: '#00000030' 22 | strokeDashArray: 4 23 | position: back 24 | experimental: 25 | color_threshold: true 26 | header: 27 | show: true 28 | show_states: false 29 | colorize_states: false 30 | yaxis: 31 | - id: first 32 | decimals: 0 33 | min: 0 34 | apex_config: 35 | tickAmount: 2 36 | series: 37 | - entity: sensor.power_export_p1_daily 38 | name: Electriciteit 39 | yaxis_id: first 40 | show: 41 | legend_value: true 42 | datalabels: true 43 | in_header: true 44 | name_in_header: true 45 | type: column 46 | group_by: 47 | func: max 48 | duration: 1d 49 | color_threshold: 50 | - value: 5 51 | color: red 52 | - value: 10 53 | color: orange 54 | - value: 15 55 | color: green 56 | -------------------------------------------------------------------------------- /energy_solar_today_vs_prediction_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:apexcharts-card 2 | graph_span: 48h 3 | update_interval: 1h 4 | header: 5 | show: true 6 | title: Zon 7 | experimental: 8 | color_threshold: true 9 | all_series_config: 10 | stroke_width: 2 11 | group_by: 12 | func: min 13 | duration: 1h 14 | span: 15 | start: day 16 | now: 17 | show: true 18 | label: Now 19 | yaxis: 20 | - id: estimate 21 | decimals: 0 22 | - id: actueel 23 | decimals: 0 24 | show: false 25 | apex_config: 26 | plotOptions: 27 | bar: 28 | columnWidth: 100% 29 | series: 30 | - entity: sensor.power_production_now 31 | name: Voorspelling 32 | yaxis_id: estimate 33 | color_threshold: 34 | - value: 0 35 | color: moccasin 36 | - value: 500 37 | color: khaki 38 | - value: 1000 39 | color: yellow 40 | - value: 1500 41 | color: gold 42 | - value: 2000 43 | color: orange 44 | - value: 2500 45 | color: darkorange 46 | - value: 3000 47 | color: tomato 48 | - value: 3500 49 | color: sandybrown 50 | - value: 4000 51 | color: peru 52 | - value: 4500 53 | color: orangered 54 | - value: 5000 55 | color: maroon 56 | - value: 5500 57 | color: purple 58 | - value: 6000 59 | color: darkred 60 | type: column 61 | show: 62 | extremas: true 63 | - entity: sensor.envoy_122217065650_current_power_production 64 | yaxis_id: actueel 65 | type: line 66 | name: Actueel 67 | extend_to: false 68 | color: red 69 | -------------------------------------------------------------------------------- /multimedia_mediaplayer_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | title: Woonkamer 3 | cards: 4 | - type: custom:vertical-stack-in-card 5 | cards: 6 | - type: custom:mushroom-media-player-card 7 | entity: media_player.volumiowoonkamer 8 | icon: mdi:speaker 9 | name: VolumioWoonkamer 10 | media_controls: 11 | - play_pause_stop 12 | show_volume_level: false 13 | use_media_info: true 14 | fill_container: true 15 | collapsible_controls: true 16 | - type: custom:vertical-stack-in-card 17 | cards: 18 | - type: custom:mushroom-media-player-card 19 | entity: media_player.volumiowoonkamer 20 | volume_controls: 21 | - volume_mute 22 | - volume_buttons 23 | - volume_set 24 | icon_type: none 25 | primary_info: none 26 | secondary_info: none 27 | show_volume_level: none 28 | collabsible_controls: true 29 | - type: custom:mushroom-chips-card 30 | alignment: center 31 | chips: 32 | - type: entity 33 | entity: script.audio_volumio_radio538 34 | tap_action: 35 | action: toggle 36 | content_info: name 37 | name: 538 38 | - type: entity 39 | entity: script.audio_volumio_radio538top50 40 | tap_action: 41 | action: toggle 42 | content_info: name 43 | name: 538 Top50 44 | - type: entity 45 | entity: script.audio_volumio_100nl 46 | tap_action: 47 | action: toggle 48 | content_info: name 49 | name: 100% NL 50 | card_mod: 51 | style: | 52 | ha-card { 53 | --ha-card-box-shadow: none; 54 | --chip-background: none; 55 | --chip-box-shadow: none; 56 | --chip-spacing: 0; 57 | : -36px; 58 | } 59 | -------------------------------------------------------------------------------- /energy_gas_vs_temp_last_week_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:stack-in-card 2 | title: Gas 3 | cards: 4 | - type: custom:apexcharts-card 5 | graph_span: 7d 6 | span: 7 | end: day 8 | apex_config: 9 | chart: 10 | height: 150px 11 | fontFamily: Raleway,sans-serif 12 | legend: 13 | show: true 14 | stroke: 15 | width: 3 16 | plotOptions: 17 | bar: 18 | columnWidth: 100% 19 | grid: 20 | show: true 21 | borderColor: '#00000030' 22 | strokeDashArray: 4 23 | position: back 24 | experimental: 25 | color_threshold: true 26 | header: 27 | show: true 28 | show_states: false 29 | colorize_states: false 30 | yaxis: 31 | - id: first 32 | decimals: 0 33 | min: 0 34 | apex_config: 35 | tickAmount: 2 36 | - id: second 37 | opposite: true 38 | decimals: 0 39 | apex_config: 40 | tickAmount: 2 41 | series: 42 | - entity: sensor.gas_usage_today 43 | name: Gas 44 | yaxis_id: first 45 | show: 46 | legend_value: true 47 | datalabels: true 48 | in_header: true 49 | name_in_header: true 50 | type: column 51 | group_by: 52 | func: max 53 | duration: 1d 54 | color_threshold: 55 | - value: 0 56 | color: green 57 | - value: 10 58 | color: green 59 | - value: 12 60 | color: green 61 | - entity: sensor.buienradar_temperature 62 | name: temp 63 | yaxis_id: second 64 | show: 65 | legend_value: true 66 | datalabels: false 67 | in_header: true 68 | name_in_header: true 69 | type: area 70 | curve: smooth 71 | opacity: 0.2 72 | color: yellow 73 | extend_to: false 74 | group_by: 75 | func: avg 76 | duration: 60min 77 | -------------------------------------------------------------------------------- /subview_climate_graph_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:stack-in-card 2 | cards: 3 | - type: grid 4 | square: false 5 | columns: 3 6 | cards: 7 | - type: custom:mushroom-entity-card 8 | entity: sensor.kinderkamer_sophie_temperature 9 | primary_info: state 10 | secondary_info: name 11 | name: Temperature 12 | icon_color: orange 13 | - type: custom:mushroom-entity-card 14 | entity: sensor.kinderkamer_sophie_humidity 15 | primary_info: state 16 | secondary_info: name 17 | name: Humidity 18 | icon_color: blue 19 | - type: custom:mushroom-entity-card 20 | entity: sensor.kinderkamer_sophie_illuminance 21 | primary_info: state 22 | secondary_info: name 23 | name: illumination 24 | icon_color: white 25 | - type: custom:mini-graph-card 26 | entities: 27 | - entity: sensor.kinderkamer_sophie_temperature 28 | name: Temperature 29 | color_thresholds: 30 | - value: -20 31 | color: '#264CFF' 32 | - value: -15 33 | color: '#3FA0FF' 34 | - value: -10 35 | color: '#72D8FF' 36 | - value: -5 37 | color: '#AAF7FF' 38 | - value: 0 39 | color: '#E0FFFF' 40 | - value: 5 41 | color: '#FFFFBF' 42 | - value: 10 43 | color: '#FFE099' 44 | - value: 15 45 | color: '#FFAD72' 46 | - value: 20 47 | color: '#F76D5E' 48 | - value: 25 49 | color: '#D82632' 50 | - value: 30 51 | color: '#A50021' 52 | - entity: sensor.kinderkamer_sophie_humidity 53 | name: Humidity 54 | color: '#2196f3' 55 | y_axis: secondary 56 | hours_to_show: 24 57 | line_width: 3 58 | font_size: 50 59 | animate: true 60 | show: 61 | name: false 62 | icon: false 63 | state: false 64 | legend: false 65 | fill: fade 66 | -------------------------------------------------------------------------------- /energy_solar_today_vs_yesterday_vs_prediction_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:config-template-card 2 | entities: 3 | - sensor.sun_next_setting 4 | - sensor.sun_next_noon 5 | - sensor.sun_next_rising 6 | - sensor.envoy_122217065650_current_power_production 7 | - sensor.power_production_now 8 | card: 9 | type: custom:apexcharts-card 10 | header: 11 | title: Solar generation today 12 | span: 13 | start: day 14 | graph_span: 24h 15 | update_interval: 10mins 16 | all_series_config: 17 | type: area 18 | group_by: 19 | func: avg 20 | duration: 10mins 21 | color_list: 22 | - yellow 23 | - orange 24 | - blue 25 | series: 26 | - entity: sensor.envoy_122217065650_current_power_production 27 | name: Vandaag 28 | type: line 29 | opacity: 1 30 | stroke_width: 2 31 | - entity: sensor.envoy_122217065650_current_power_production 32 | name: Gisteren 33 | offset: '-24h' 34 | type: line 35 | opacity: 1 36 | stroke_width: 2 37 | show: 38 | in_header: true 39 | - entity: sensor.power_production_now 40 | name: Voorspelling 41 | type: line 42 | opacity: 1 43 | stroke_width: 2 44 | show: 45 | in_header: false 46 | apex_config: 47 | yaxis: 48 | min: 0 49 | forceNiceScale: true 50 | decimalsInFloat: false 51 | annotations: 52 | xaxis: 53 | - x: ${new Date(states['sensor.sun_next_rising'].state).getTime()} 54 | label: 55 | text: Sunrise ☀️ 56 | borderWidth: 0 57 | style: 58 | background: '#0000' 59 | - x: ${new Date(states['sensor.sun_next_noon'].state).getTime()} 60 | label: 61 | text: 😎 62 | borderWidth: 0 63 | style: 64 | background: '#0000' 65 | - x: ${new Date(states['sensor.sun_next_setting'].state).getTime()} 66 | label: 67 | text: Sunset 🌙 68 | borderWidth: 0 69 | style: 70 | background: '#0000' 71 | chart: 72 | height: 150 73 | -------------------------------------------------------------------------------- /temperatures_climate_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:mushroom-climate-card 2 | entity: climate.airco_lucas 3 | hvac_modes: 4 | - heat_cool 5 | - heat 6 | - cool 7 | - fan_only 8 | - dry 9 | show_temperature_control: true 10 | collapsible_controls: false 11 | name: Airco Lucas 12 | card_mod: 13 | style: | 14 | mushroom-shape-icon { 15 | {% if is_state(config.entity, 'heat_cool') %} 16 | --card-mod-icon: mdi:autorenew; 17 | animation: spin 3s ease-in-out infinite alternate; 18 | {% elif is_state(config.entity, 'heat') %} 19 | --card-mod-icon: mdi:fire; 20 | animation: heat 2s infinite; 21 | {% elif is_state(config.entity, 'cool') %} 22 | --card-mod-icon: mdi:snowflake; 23 | animation: cool 6s ease-in-out infinite; 24 | {% elif is_state(config.entity, 'dry') %} 25 | --card-mod-icon: mdi:water-percent; 26 | animation: dry 1.5s linear infinite; 27 | {% elif is_state(config.entity, 'fan_only') %} 28 | --card-mod-icon: mdi:fan; 29 | animation: spin 1s linear infinite; 30 | {% else %} 31 | --card-mod-icon: mdi:air-conditioner; 32 | {% endif %} 33 | display: flex; 34 | } 35 | @keyframes cool { 36 | 0%, 100% { transform: rotate(25deg); } 37 | 25% { transform: rotate(-25deg); } 38 | 50% { transform: rotate(50deg); } 39 | 75% { transform: rotate(-50deg); } 40 | } 41 | @keyframes heat { 42 | 0%, 100% { --icon-color: rgba(var(--rgb-red), 1); } 43 | 10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); } 44 | 20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); } 45 | 30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); } 46 | 40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); } 47 | 50% { --icon-color: rgba(var(--rgb-red), 0); } 48 | } 49 | @keyframes dry { 50 | 0%, 100% { --icon-symbol-size: 21px; } 51 | 10%, 90% { --icon-symbol-size: 22px; } 52 | 20%, 80% { --icon-symbol-size: 23px; } 53 | 30%, 70% { --icon-symbol-size: 24px; } 54 | 40%, 60% { --icon-symbol-size: 25px; } 55 | 50% { --icon-symbol-size: 26px; } 56 | } 57 | -------------------------------------------------------------------------------- /subview_kinderkamer_sophie_slaapwekker_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | horizontal: false 3 | title: Slaapwekker👀 4 | cards: 5 | - type: custom:vertical-stack-in-card 6 | horizontal: false 7 | cards: 8 | - type: custom:mushroom-light-card 9 | entity: light.wled_night_sophie_master 10 | primary_info: none 11 | secondary_info: state 12 | layout: vertical 13 | fill_container: false 14 | show_brightness_control: true 15 | show_color_temp_control: true 16 | show_color_control: true 17 | collapsible_controls: false 18 | use_light_color: true 19 | double_tap_action: 20 | action: call-service 21 | service: input_boolean.toggle 22 | target: 23 | entity_id: input_boolean.node_red_kinderkamer_sophie_oogjes_automations 24 | data: {} 25 | card_mod: 26 | style: 27 | mushroom-shape-icon$: > 28 | {% if 29 | is_state('input_boolean.node_red_kinderkamer_sophie_oogjes_automations', 30 | 'on') %} 31 | 32 | .shape { 33 | --shape-animation: ping 3s infinite; 34 | } 35 | 36 | @keyframes ping { 37 | 0% { 38 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 39 | } 40 | 41 | 100% { 42 | box-shadow: 0 0 5px 5px transparent; 43 | } 44 | } 45 | 46 | {% elif 47 | is_state('input_boolean.node_red_kinderkamer_sophie_oogjes_automations', 48 | 'off') %} 49 | 50 | {% endif %} 51 | - type: custom:mushroom-chips-card 52 | chips: 53 | - type: template 54 | icon: mdi:eye-closed 55 | icon_color: white 56 | entity: script.wled_night_sophie_preset_eyesclosed 57 | tap_action: 58 | action: toggle 59 | - type: template 60 | icon: mdi:eye-closed 61 | icon_color: white 62 | entity: input_datetime.wled_night_sophie_inbed 63 | content: '{{ states("input_datetime.wled_night_sophie_inbed") }}' 64 | tap_action: 65 | action: more-info 66 | - type: template 67 | icon: mdi:eye-outline 68 | icon_color: white 69 | entity: input_datetime.wled_night_sophie_uitbed 70 | content: '{{ states("input_datetime.wled_night_sophie_uitbed") }}' 71 | tap_action: 72 | action: more-info 73 | - type: template 74 | icon: mdi:eye-outline 75 | icon_color: white 76 | entity: script.wled_night_sophie_preset_eyesopen 77 | tap_action: 78 | action: toggle 79 | alignment: center 80 | card_mod: 81 | style: 82 | mushroom-template-chip: | 83 | ha-card { 84 | --ha-card-box-shadow: none; 85 | --chip-background: none; 86 | --chip-box-shadow: none; 87 | --chip-spacing: 0; 88 | : -36px; 89 | } 90 | -------------------------------------------------------------------------------- /top_navigation_buttons.yaml: -------------------------------------------------------------------------------- 1 | type: horizontal-stack 2 | cards: 3 | - type: custom:mushroom-template-card 4 | primary: '' 5 | secondary: '' 6 | icon: |- 7 | {% if states('sensor.power_p1_netto_daily_kwh') | float < 0 %} 8 | mdi:transmission-tower-import 9 | {% elif states('sensor.power_p1_netto_daily_kwh') | float > 0 %} 10 | mdi:transmission-tower-export 11 | {% else %} 12 | mdi:transmission-tower-export 13 | {% endif %} 14 | icon_color: |- 15 | {% if states('sensor.power_p1_netto_daily_kwh') | float < 0 %} 16 | green 17 | {% elif states('sensor.power_p1_netto_daily_kwh') | float > 0 %} 18 | red 19 | {% else %} 20 | grey 21 | {% endif %} 22 | layout: vertical 23 | tap_action: 24 | action: navigate 25 | navigation_path: /dashboard-subviews/energy 26 | - type: custom:mushroom-template-card 27 | primary: '' 28 | secondary: '' 29 | icon: |- 30 | {% if states('sensor.woonkamer_motion_hue_temperature') | float < 0 %} 31 | mdi:temperature-celsius 32 | {% elif states('sensor.woonkamer_motion_hue_temperature') | float > 0 %} 33 | mdi:temperature-celsius 34 | {% else %} 35 | mdi:temperature-celsius 36 | {% endif %} 37 | icon_color: |- 38 | {% if states('sensor.woonkamer_motion_hue_temperature') | float < 10 %} 39 | blue 40 | {% elif states('sensor.woonkamer_motion_hue_temperature') | float > 20 %} 41 | red 42 | {% else %} 43 | orange 44 | {% endif %} 45 | layout: vertical 46 | tap_action: 47 | action: navigate 48 | navigation_path: /dashboard-subviews/verwarming 49 | - type: custom:mushroom-template-card 50 | primary: '' 51 | secondary: '' 52 | icon: mdi:speaker 53 | icon_color: teal 54 | layout: vertical 55 | tap_action: 56 | action: navigate 57 | navigation_path: /dashboard-subviews/multimedia 58 | card_mod: 59 | style: | 60 | ha-state-icon { 61 | animation: beat 1.3s ease-out infinite both; 62 | transform-origin: 50% 60%; 63 | } 64 | @keyframes beat { 65 | 0% { transform: scale(1); } 66 | 10% { transform: scale(1.1); } 67 | 17% { transform: scale(1.05); } 68 | 33% { transform: scale(1.25); } 69 | 60% { transform: scale(1); } 70 | } 71 | - type: custom:mushroom-template-card 72 | primary: '' 73 | secondary: '' 74 | icon: |- 75 | {% if states('switch.shellyplugs_3dprinter_e3pro', 'on') %} 76 | mdi:printer-3d-nozzle 77 | {% elif states('switch.shellyplugs_3dprinter_e3pro', 'off') %} 78 | mdi:printer-3d-nozzle 79 | {% else %} 80 | mdi:printer-3d-nozzle 81 | {% endif %} 82 | icon_color: |- 83 | {% if states('switch.shellyplugs_3dprinter_e3pro', 'off') %} 84 | grey 85 | {% elif states('switch.shellyplugs_3dprinter_e3pro', 'on') %} 86 | green 87 | {% else %} 88 | red 89 | {% endif %} 90 | layout: vertical 91 | tap_action: 92 | action: navigate 93 | navigation_path: /dashboard-subviews/3dprinter 94 | - type: custom:mushroom-template-card 95 | primary: '' 96 | secondary: '' 97 | icon: mdi:server 98 | icon_color: green 99 | layout: vertical 100 | tap_action: 101 | action: navigate 102 | navigation_path: /dashboard-subviews/servers 103 | - type: custom:mushroom-template-card 104 | primary: '' 105 | secondary: '' 106 | icon: mdi:window-shutter-settings 107 | icon_color: white 108 | layout: vertical 109 | tap_action: 110 | action: navigate 111 | navigation_path: /dashboard-subviews/screens 112 | -------------------------------------------------------------------------------- /achtertuin_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | horizontal: false 3 | cards: 4 | - type: custom:stack-in-card 5 | cards: 6 | - type: custom:mushroom-template-card 7 | primary: Achtertuin 8 | icon: mdi:shovel 9 | icon_color: teal 10 | layout: horizontal 11 | entity: sensor.achtertuin_buitentemperatuur 12 | secondary: '🌡️{{states(''sensor.achtertuin_buitentemperatuur'') }}°C ' 13 | tap_action: 14 | action: more-info 15 | fill_container: true 16 | multiline_secondary: false 17 | card_mod: 18 | style: | 19 | ha-card { 20 | z-index: 1; 21 | } 22 | - type: custom:mini-graph-card 23 | entities: 24 | - entity: sensor.achtertuin_buitentemperatuur 25 | name: Temperature 26 | color_thresholds: 27 | - value: -20 28 | color: '#264CFF' 29 | - value: -15 30 | color: '#3FA0FF' 31 | - value: -10 32 | color: '#72D8FF' 33 | - value: -5 34 | color: '#AAF7FF' 35 | - value: 0 36 | color: '#E0FFFF' 37 | - value: 5 38 | color: '#FFFFBF' 39 | - value: 10 40 | color: '#FFE099' 41 | - value: 15 42 | color: '#FFAD72' 43 | - value: 20 44 | color: '#F76D5E' 45 | - value: 25 46 | color: '#D82632' 47 | - value: 30 48 | color: '#A50021' 49 | height: 50 50 | hours_to_show: 24 51 | line_width: 2 52 | font_size: 50 53 | animate: true 54 | show: 55 | name: false 56 | icon: false 57 | state: false 58 | legend: false 59 | fill: fade 60 | labels: false 61 | labels_secondary: false 62 | points: false 63 | card_mod: 64 | style: | 65 | ha-card { 66 | position: absolute !important; 67 | height: 100%; 68 | width: 100%; 69 | top: 0px; 70 | --ha-card-border-width: 0; 71 | } 72 | ha-card:after { 73 | content: ""; 74 | position: absolute; 75 | width: 100%; 76 | height: 100%; 77 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 78 | } 79 | - type: custom:vertical-stack-in-card 80 | mode: vertical 81 | cards: 82 | - type: custom:vertical-stack-in-card 83 | horizontal: true 84 | cards: 85 | - type: custom:mushroom-template-card 86 | entity: light.ledstriptuin 87 | layout: vertical 88 | use_light_color: true 89 | icon: |- 90 | {% if is_state('light.ledstriptuin', 'on') %} 91 | mdi:bird 92 | {% else %} 93 | mdi:bird 94 | {% endif %} 95 | icon_color: |- 96 | {% if is_state('light.ledstriptuin', 'on') %} 97 | yellow 98 | {% endif %} 99 | - type: custom:mushroom-chips-card 100 | chips: 101 | - type: template 102 | icon: mdi:cctv 103 | icon_color: |2- 104 | {% if is_state(entity, 'on') %} 105 | green 106 | {% else %} 107 | grey 108 | {% endif %} 109 | entity: switch.tandenborstels 110 | tap_action: 111 | action: more-info 112 | alignment: end 113 | card_mod: 114 | style: 115 | mushroom-template-chip: | 116 | ha-card { 117 | --ha-card-box-shadow: none; 118 | --chip-background: none; 119 | --chip-box-shadow: none; 120 | --chip-spacing: 0; 121 | : -36px; 122 | } 123 | -------------------------------------------------------------------------------- /top_chips_today_overview.yaml: -------------------------------------------------------------------------------- 1 | type: custom:mushroom-chips-card 2 | chips: 3 | - type: template 4 | content: Vandaag 5 | - type: template 6 | icon: |- 7 | {% if states('sensor.power_p1_netto_daily_kwh') | float < 0 %} 8 | mdi:transmission-tower-import 9 | {% elif states('sensor.power_p1_netto_daily_kwh') | float > 0 %} 10 | mdi:transmission-tower-export 11 | {% else %} 12 | mdi:transmission-tower-export 13 | {% endif %} 14 | icon_color: |- 15 | {% if states('sensor.power_p1_netto_daily_kwh') | float < 0 %} 16 | green 17 | {% elif states('sensor.power_p1_netto_daily_kwh') | float > 0 %} 18 | red 19 | {% else %} 20 | grey 21 | {% endif %} 22 | content: "{{ states(\"sensor.power_p1_netto_daily_kwh\") }} kWh" 23 | entity: sensor.power_p1_netto_daily_kwh 24 | tap_action: 25 | action: more-info 26 | - type: template 27 | icon: |- 28 | {% if states('sensor.gas_import_p1_daily') | float < 0 %} 29 | mdi:gas-cylinder 30 | {% elif states('sensor.gas_import_p1_daily') | float > 0 %} 31 | mdi:gas-cylinder 32 | {% else %} 33 | mdi:gas-cylinder 34 | {% endif %} 35 | icon_color: |- 36 | {% if states('sensor.gas_import_p1_daily') | float < 0 %} 37 | green 38 | {% elif states('sensor.gas_import_p1_daily') | float > 0 %} 39 | red 40 | {% else %} 41 | grey 42 | {% endif %} 43 | content: "{{ (states(\"sensor.gas_import_p1_daily\")|round(1)) }} m3" 44 | entity: sensor.gas_import_p1_daily 45 | tap_action: 46 | action: more-info 47 | - type: template 48 | icon: |- 49 | {% if states('sensor.p1_meter_current_power') | float < 0 %} 50 | mdi:water 51 | {% elif states('sensor.p1_meter_current_power') | float > 0 %} 52 | mdi:water 53 | {% else %} 54 | mdi:water 55 | {% endif %} 56 | icon_color: |- 57 | {% if states('sensor.water_daily_total') | float < 0 %} 58 | blue 59 | {% elif states('sensor.water_daily_total') | float > 0 %} 60 | blue 61 | {% else %} 62 | grey 63 | {% endif %} 64 | content: "{{ (states(\"sensor.water_daily_total\")|float *1000)|round }} L" 65 | entity: sensor.water_daily_total 66 | tap_action: 67 | action: more-info 68 | - type: template 69 | icon: >- 70 | {% if states('sensor.envoy_122217065650_today_s_energy_production') | 71 | float < 0 %} 72 | 73 | mdi:solar-power-variant 74 | 75 | {% elif states('sensor.envoy_122217065650_today_s_energy_production') | 76 | float > 0 %} 77 | 78 | mdi:solar-power-variant 79 | 80 | {% else %} 81 | 82 | mdi:solar-power-variant 83 | 84 | {% endif %} 85 | icon_color: >- 86 | {% if states('sensor.envoy_122217065650_today_s_energy_production') | 87 | float < 0 %} 88 | 89 | grey 90 | 91 | {% elif states('sensor.envoy_122217065650_today_s_energy_production') | 92 | float > 0 %} 93 | 94 | yellow 95 | 96 | {% else %} 97 | 98 | grey 99 | 100 | {% endif %} 101 | content: >- 102 | {{ (states("sensor.envoy_122217065650_today_s_energy_production")|float / 103 | 1000)|round(1) }} kWh 104 | entity: sensor.envoy_122217065650_today_s_energy_production 105 | tap_action: 106 | action: more-info 107 | alignment: center 108 | card_mod: 109 | style: 110 | mushroom-template-chip: | 111 | ha-card { 112 | --ha-card-box-shadow: none; 113 | --chip-background: none; 114 | --chip-box-shadow: none; 115 | --chip-spacing: 0; 116 | : -36px; 117 | } 118 | mushroom-template-chip:nth-child(5)$: > 119 | {% if states('sensor.envoy_122217065650_current_power_production') | float 120 | > 0.1 %} 121 | 122 | ha-state-icon { 123 | animation: rays 2s infinite; 124 | } 125 | 126 | 127 | @keyframes rays { 128 | 0%, 100% { clip-path: inset(0 0 0 0); } 129 | 80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); } 130 | } 131 | 132 | {% else %} 133 | 134 | 135 | {% endif %} 136 | 137 | } 138 | -------------------------------------------------------------------------------- /subview_trapkast_detailed_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | mode: vertical 3 | cards: 4 | - type: custom:mushroom-template-card 5 | primary: Trapkast 6 | icon: mdi:stairs 7 | icon_color: teal 8 | layout: horizontal 9 | entity: light.trapkast_hue 10 | secondary: null 11 | tap_action: 12 | action: none 13 | badge_icon: | 14 | {% if is_state('binary_sensor.trapkast_occupancy', 'on') %} 15 | mdi:human-greeting 16 | {% else %} 17 | mdi:motion-sensor-off 18 | {% endif %} 19 | badge_color: | 20 | {% if is_state('binary_sensor.trapkast_occupancy', 'on') %} 21 | green 22 | {% else %} 23 | disabled 24 | {% endif %} 25 | - type: custom:vertical-stack-in-card 26 | mode: vertical 27 | cards: 28 | - type: custom:vertical-stack-in-card 29 | horizontal: true 30 | cards: 31 | - type: custom:mushroom-light-card 32 | entity: light.trapkast_hue 33 | primary_info: none 34 | secondary_info: state 35 | layout: vertical 36 | fill_container: false 37 | show_brightness_control: true 38 | show_color_temp_control: true 39 | show_color_control: true 40 | collapsible_controls: false 41 | use_light_color: true 42 | double_tap_action: 43 | action: call-service 44 | service: input_boolean.toggle 45 | target: 46 | entity_id: input_boolean.node_red_trapkast_automations 47 | data: {} 48 | card_mod: 49 | style: 50 | mushroom-shape-icon$: > 51 | {% if is_state('input_boolean.node_red_trapkast_automations', 52 | 'on') %} 53 | 54 | .shape { 55 | --shape-animation: ping 3s infinite; 56 | } 57 | 58 | @keyframes ping { 59 | 0% { 60 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 61 | } 62 | 63 | 100% { 64 | box-shadow: 0 0 5px 5px transparent; 65 | } 66 | } 67 | 68 | {% elif is_state('input_boolean.node_red_hal_automations', 69 | 'off') %} 70 | 71 | {% endif %} 72 | - type: custom:mushroom-chips-card 73 | chips: 74 | - type: template 75 | icon: mdi:motion-sensor 76 | icon_color: |2- 77 | {% if is_state(entity, 'on') %} 78 | blue 79 | {% else %} 80 | grey 81 | {% endif %} 82 | entity: binary_sensor.trapkast_occupancy 83 | tap_action: 84 | action: more-info 85 | alignment: end 86 | card_mod: 87 | style: 88 | mushroom-template-chip: | 89 | ha-card { 90 | --ha-card-box-shadow: none; 91 | --chip-background: none; 92 | --chip-box-shadow: none; 93 | --chip-spacing: 0; 94 | : -36px; 95 | } 96 | mushroom-template-chip:nth-child(1)$: | 97 | {% if is_state('binary_sensor.trapkast_occupancy','on') %} 98 | ha-state-icon { 99 | animation: clip 2s linear infinite; 100 | } 101 | @keyframes clip { 102 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 103 | } 104 | .shape { 105 | --shape-animation: motion 2s linear infinite; 106 | } 107 | @keyframes motion { 108 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 109 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 110 | } 111 | } 112 | {% else %} 113 | 114 | {% endif %} 115 | } 116 | mushroom-template-chip:nth-child(2)$: | 117 | {% if is_state('switch.shelly1l_toiletfan','on') %} 118 | ha-state-icon { 119 | animation: rotation 2s linear infinite; 120 | } 121 | @keyframes rotation { 122 | 0% { 123 | transform: rotate(0deg); 124 | } 125 | 100% { 126 | transform: rotate(360deg); 127 | } 128 | } 129 | } 130 | {% else %} 131 | 132 | {% endif %} 133 | } 134 | -------------------------------------------------------------------------------- /subview_kinderkamer_sophie_detailed_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | horizontal: false 3 | cards: 4 | - type: custom:stack-in-card 5 | cards: 6 | - type: custom:mushroom-template-card 7 | primary: Sophie 👸 8 | icon: mdi:bed 9 | icon_color: pink 10 | layout: horizontal 11 | entity: light.kinderkamer_sophie_group_hue 12 | secondary: >- 13 | 🌡️{{states('sensor.kinderkamer_sophie_temperature') }}°C | 14 | 💧{{states('sensor.kinderkamer_sophie_humidity') | int }}% | 15 | 💡{{states('sensor.kinderkamer_sophie_illuminance') | int }}lux | 16 | 🔌{{states('sensor.sophie_total_energy_watt') | int }}W 17 | tap_action: 18 | action: navigate 19 | navigation_path: /lovelace-tablet/sophie 20 | fill_container: true 21 | multiline_secondary: false 22 | card_mod: 23 | style: | 24 | ha-card { 25 | z-index: 1; 26 | } 27 | - type: custom:vertical-stack-in-card 28 | mode: vertical 29 | cards: 30 | - type: custom:vertical-stack-in-card 31 | horizontal: true 32 | cards: 33 | - type: custom:mushroom-light-card 34 | entity: light.kinderkamer_sophie_hue 35 | primary_info: none 36 | secondary_info: state 37 | layout: vertical 38 | fill_container: false 39 | show_brightness_control: true 40 | show_color_temp_control: true 41 | show_color_control: false 42 | collapsible_controls: false 43 | use_light_color: true 44 | - type: custom:mushroom-light-card 45 | entity: light.wled_bureau_sophie 46 | primary_info: none 47 | secondary_info: state 48 | layout: vertical 49 | fill_container: false 50 | show_brightness_control: true 51 | show_color_temp_control: true 52 | show_color_control: true 53 | collapsible_controls: false 54 | use_light_color: true 55 | - type: custom:vertical-stack-in-card 56 | horizontal: true 57 | cards: 58 | - type: custom:mushroom-light-card 59 | entity: light.wled_unicorn 60 | primary_info: none 61 | secondary_info: state 62 | layout: vertical 63 | fill_container: false 64 | show_brightness_control: true 65 | show_color_temp_control: true 66 | show_color_control: true 67 | collapsible_controls: false 68 | use_light_color: true 69 | - type: custom:mushroom-chips-card 70 | chips: 71 | - type: template 72 | icon: mdi:motion-sensor 73 | icon_color: |2- 74 | {% if is_state(entity, 'on') %} 75 | blue 76 | {% else %} 77 | grey 78 | {% endif %} 79 | entity: binary_sensor.kinderkamer_sophie_occupancy 80 | tap_action: 81 | action: more-info 82 | - type: template 83 | icon: |- 84 | {% if is_state(entity, 'off') %} 85 | mdi:window-closed 86 | {% else %} 87 | mdi:window-open 88 | {% endif %} 89 | icon_color: |2- 90 | {% if is_state(entity, 'off') %} 91 | green 92 | {% else %} 93 | red 94 | {% endif %} 95 | entity: binary_sensor.kinderkamer_sophie_raam_aqara_contact 96 | tap_action: 97 | action: more-info 98 | alignment: end 99 | card_mod: 100 | style: 101 | mushroom-template-chip: | 102 | ha-card { 103 | --ha-card-box-shadow: none; 104 | --chip-background: none; 105 | --chip-box-shadow: none; 106 | --chip-spacing: 0; 107 | : -36px; 108 | } 109 | mushroom-template-chip:nth-child(1)$: > 110 | {% if is_state('binary_sensor.kinderkamer_sophie_occupancy','on') 111 | %} 112 | 113 | ha-state-icon { 114 | animation: clip 2s linear infinite; 115 | } 116 | 117 | @keyframes clip { 118 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 119 | } 120 | 121 | .shape { 122 | --shape-animation: motion 2s linear infinite; 123 | } 124 | 125 | @keyframes motion { 126 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 127 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 128 | } 129 | 130 | } 131 | 132 | {% else %} 133 | 134 | 135 | {% endif %} 136 | 137 | } 138 | -------------------------------------------------------------------------------- /overkapping_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | horizontal: false 3 | cards: 4 | - type: custom:stack-in-card 5 | cards: 6 | - type: custom:mushroom-template-card 7 | primary: Overkapping 8 | icon: mdi:greenhouse 9 | icon_color: teal 10 | layout: horizontal 11 | entity: sensor.overkapping_temperature_aqara_temperature 12 | secondary: '🌡️{{states(''sensor.overkapping_temperature_aqara_temperature'') }}°C ' 13 | tap_action: 14 | action: more-info 15 | fill_container: true 16 | multiline_secondary: false 17 | card_mod: 18 | style: | 19 | ha-card { 20 | z-index: 1; 21 | } 22 | - type: custom:mini-graph-card 23 | entities: 24 | - entity: sensor.overkapping_temperature_aqara_temperature 25 | name: Temperature 26 | - entity: sensor.overkapping_temperature_aqara_humidity 27 | name: Humidity 28 | color: blue 29 | y_axis: secondary 30 | color_thresholds: 31 | - value: -20 32 | color: '#264CFF' 33 | - value: -15 34 | color: '#3FA0FF' 35 | - value: -10 36 | color: '#72D8FF' 37 | - value: -5 38 | color: '#AAF7FF' 39 | - value: 0 40 | color: '#E0FFFF' 41 | - value: 5 42 | color: '#FFFFBF' 43 | - value: 10 44 | color: '#FFE099' 45 | - value: 15 46 | color: '#FFAD72' 47 | - value: 20 48 | color: '#F76D5E' 49 | - value: 25 50 | color: '#D82632' 51 | - value: 30 52 | color: '#A50021' 53 | height: 50 54 | hours_to_show: 24 55 | line_width: 2 56 | font_size: 50 57 | animate: true 58 | show: 59 | name: false 60 | icon: false 61 | state: false 62 | legend: false 63 | fill: fade 64 | labels: false 65 | labels_secondary: false 66 | points: false 67 | card_mod: 68 | style: | 69 | ha-card { 70 | position: absolute !important; 71 | height: 100%; 72 | width: 100%; 73 | top: 0px; 74 | --ha-card-border-width: 0; 75 | } 76 | ha-card:after { 77 | content: ""; 78 | position: absolute; 79 | width: 100%; 80 | height: 100%; 81 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 82 | } 83 | - type: custom:vertical-stack-in-card 84 | mode: vertical 85 | cards: 86 | - type: custom:vertical-stack-in-card 87 | horizontal: true 88 | cards: 89 | - type: custom:mushroom-template-card 90 | entity: light.ledstripoverkapping 91 | layout: vertical 92 | use_light_color: true 93 | icon: |- 94 | {% if is_state('light.ledstripoverkapping', 'on') %} 95 | mdi:led-strip-variant 96 | {% else %} 97 | mdi:led-strip-variant-off 98 | {% endif %} 99 | icon_color: |- 100 | {% if is_state('light.ledstripoverkapping', 'on') %} 101 | yellow 102 | {% endif %} 103 | - type: custom:mushroom-template-card 104 | primary: '' 105 | icon: none 106 | layout: horizontal 107 | icon_color: blue 108 | entity: sensor.overkapping_temperature_aqara_humidity 109 | badge_icon: mdi:water-percent 110 | badge_color: '#3498db' 111 | secondary: '' 112 | tap_action: 113 | action: more-info 114 | card_mod: 115 | style: 116 | mushroom-shape-icon$: | 117 | .shape { 118 | /* Radial progress bar */ 119 | background: radial-gradient(var(--card-background-color) 60%, 120 | transparent calc(60% + 1px)), 121 | conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%, 122 | var(--card-background-color) 0% 100%); 123 | } 124 | .shape:after { 125 | content: ''; 126 | height: 100%; 127 | width: 100%; 128 | position: absolute; 129 | border-radius: var(--icon-border-radius); 130 | background: var(--shape-color); 131 | } 132 | .: | 133 | ha-state-icon:after { 134 | content: "{{ states(config.entity) | round(0) }}%"; 135 | font-size: 12px; 136 | position: absolute; 137 | top: 21px; 138 | left: 12px; 139 | } 140 | - type: custom:mushroom-chips-card 141 | chips: 142 | - type: template 143 | icon: mdi:solar-power-variant 144 | icon_color: >- 145 | {% if states('sensor.zonnepanelen_overkapping_total_watt') | float 146 | > 0.1 %} 147 | 148 | yellow 149 | 150 | {% else %} 151 | 152 | grey 153 | 154 | {% endif %} 155 | content: '{{ states("sensor.zonnepanelen_overkapping_total_watt") }} W' 156 | entity: sensor.zonnepanelen_overkapping_total_watt 157 | tap_action: 158 | action: more-info 159 | alignment: end 160 | card_mod: 161 | style: 162 | mushroom-template-chip: | 163 | ha-card { 164 | --ha-card-box-shadow: none; 165 | --chip-background: none; 166 | --chip-box-shadow: none; 167 | --chip-spacing: 0; 168 | : -36px; 169 | } 170 | -------------------------------------------------------------------------------- /overloop1_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Overloop1 7 | icon: hue:room-other 8 | icon_color: teal 9 | layout: horizontal 10 | entity: light.overloop1_hue 11 | secondary: >- 12 | {{states('sensor.overloop1_motion_hue_temperature') }}°C | 13 | {{states('sensor.overloop1_motion_hue_illuminance_lux') | int }}lux 14 | tap_action: 15 | action: navigate 16 | navigation_path: /dashboard-subviews/overloop1 17 | fill_container: true 18 | multiline_secondary: false 19 | card_mod: 20 | style: | 21 | ha-card { 22 | z-index: 1; 23 | } 24 | - type: custom:mini-graph-card 25 | entities: 26 | - entity: sensor.overloop1_motion_hue_temperature 27 | name: Temperature 28 | color_thresholds: 29 | - value: -20 30 | color: "#264CFF" 31 | - value: -15 32 | color: "#3FA0FF" 33 | - value: -10 34 | color: "#72D8FF" 35 | - value: -5 36 | color: "#AAF7FF" 37 | - value: 0 38 | color: "#E0FFFF" 39 | - value: 5 40 | color: "#FFFFBF" 41 | - value: 10 42 | color: "#FFE099" 43 | - value: 15 44 | color: "#FFAD72" 45 | - value: 20 46 | color: "#F76D5E" 47 | - value: 25 48 | color: "#D82632" 49 | - value: 30 50 | color: "#A50021" 51 | height: 50 52 | hours_to_show: 24 53 | line_width: 2 54 | font_size: 50 55 | animate: true 56 | show: 57 | name: false 58 | icon: false 59 | state: false 60 | legend: false 61 | fill: fade 62 | labels: false 63 | labels_secondary: false 64 | points: false 65 | card_mod: 66 | style: | 67 | ha-card { 68 | position: absolute !important; 69 | height: 100%; 70 | width: 100%; 71 | top: 0px; 72 | --ha-card-border-width: 0; 73 | } 74 | ha-card:after { 75 | content: ""; 76 | position: absolute; 77 | width: 100%; 78 | height: 100%; 79 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 80 | } 81 | - type: custom:vertical-stack-in-card 82 | mode: vertical 83 | cards: 84 | - type: custom:vertical-stack-in-card 85 | horizontal: true 86 | cards: 87 | - type: custom:mushroom-template-card 88 | entity: light.overloop1_hue 89 | layout: vertical 90 | icon: |- 91 | {% if is_state('light.overloop1_hue', 'on') %} 92 | hue:single-spot 93 | {% else %} 94 | hue:single-spot 95 | {% endif %} 96 | icon_color: |- 97 | {% if is_state('light.overloop1_hue', 'on') %} 98 | yellow 99 | {% endif %} 100 | - type: custom:mushroom-chips-card 101 | chips: 102 | - type: template 103 | icon: mdi:smoke 104 | icon_color: |2- 105 | {% if is_state(entity, 'on') %} 106 | red 107 | {% else %} 108 | grey 109 | {% endif %} 110 | entity: binary_sensor.rookmelder_overloop1_kaku_smoke 111 | tap_action: 112 | action: more-info 113 | - type: template 114 | icon: mdi:motion-sensor 115 | icon_color: |2- 116 | {% if is_state(entity, 'on') %} 117 | blue 118 | {% else %} 119 | grey 120 | {% endif %} 121 | entity: binary_sensor.overloop1_motion_hue_occupancy 122 | tap_action: 123 | action: more-info 124 | alignment: end 125 | card_mod: 126 | style: 127 | mushroom-template-chip: | 128 | ha-card { 129 | --ha-card-box-shadow: none; 130 | --chip-background: none; 131 | --chip-box-shadow: none; 132 | --chip-spacing: 0; 133 | : -36px; 134 | } 135 | mushroom-template-chip:nth-child(1)$: > 136 | {% if 137 | is_state('binary_sensor.rookmelder_overloop1_kaku_smoke','on') %} 138 | 139 | ha-state-icon { 140 | animation: clip 2s linear infinite; 141 | } 142 | 143 | @keyframes clip { 144 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 145 | } 146 | 147 | .shape { 148 | animation: motion 2s linear infinite; 149 | } 150 | 151 | @keyframes motion { 152 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 153 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 154 | } 155 | 156 | } 157 | 158 | {% else %} {% endif %} } 159 | mushroom-template-chip:nth-child(2)$: > 160 | {% if 161 | is_state('binary_sensor.overloop1_motion_hue_occupancy','on') %} 162 | 163 | ha-state-icon { 164 | animation: clip 2s linear infinite; 165 | } 166 | 167 | @keyframes clip { 168 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 169 | } 170 | 171 | .shape { 172 | --shape-animation: motion 2s linear infinite; 173 | } 174 | 175 | @keyframes motion { 176 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 177 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 178 | } 179 | 180 | } 181 | 182 | {% else %} 183 | 184 | 185 | {% endif %} 186 | 187 | } 188 | -------------------------------------------------------------------------------- /speelhuis_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | mode: vertical 3 | cards: 4 | - type: custom:mushroom-template-card 5 | primary: Speelhuis 6 | icon: mdi:home-heart 7 | icon_color: pink 8 | layout: horizontal 9 | entity: sensor.achtertuin_buitentemperatuur 10 | secondary: Sophie 11 | tap_action: 12 | action: navigate 13 | navigation_path: /lovelace-tablet/speelhuis 14 | - type: custom:vertical-stack-in-card 15 | horizontal: true 16 | cards: 17 | - type: custom:mushroom-template-card 18 | entity: light.esp_speelhuis_ledstrip 19 | layout: vertical 20 | icon: |- 21 | {% if is_state('light.esp_speelhuis_ledstrip', 'on') %} 22 | hue:single-spot 23 | {% else %} 24 | hue:single-spot 25 | {% endif %} 26 | icon_color: |- 27 | {% if is_state('light.esp_speelhuis_ledstrip', 'on') %} 28 | yellow 29 | {% endif %} 30 | - type: custom:mushroom-template-card 31 | entity: switch.esp_speelhuis_waterpomp 32 | layout: vertical 33 | use_light_color: true 34 | icon: |- 35 | {% if is_state('switch.esp_speelhuis_waterpomp', 'on') %} 36 | mdi:water-pump 37 | {% else %} 38 | mdi:water-pump-off 39 | {% endif %} 40 | icon_color: |- 41 | {% if is_state('switch.esp_speelhuis_waterpomp', 'on') %} 42 | yellow 43 | {% endif %} 44 | - type: custom:vertical-stack-in-card 45 | horizontal: true 46 | cards: 47 | - type: custom:apexcharts-card 48 | chart_type: radialBar 49 | experimental: 50 | color_threshold: true 51 | apex_config: 52 | legend: 53 | show: false 54 | chart: 55 | height: 250px 56 | plotOptions: 57 | radialBar: 58 | startAngle: -90 59 | endAngle: 90 60 | dataLabels: 61 | name: 62 | show: true 63 | offsetY: 35 64 | value: 65 | show: true 66 | offsetY: -25 67 | total: 68 | show: true 69 | label: Thuis Batterij 70 | formatter: | 71 | EVAL:(w) => { 72 | return w.globals.seriesTotals + '%'; 73 | } 74 | hollow: 75 | size: 45% 76 | imageWidth: 70 77 | imageHeight: 70 78 | imageOffsetY: -40 79 | imageClipped: false 80 | track: 81 | show: true 82 | strokeWidth: 175% 83 | dropShadow: 84 | enabled: true 85 | top: 2 86 | left: 0 87 | blur: 4 88 | opacity: 0.15 89 | stroke: 90 | dashArray: 5 91 | lineCap: butt 92 | series: 93 | - entity: sensor.esp_speelhuis_battery_level 94 | show: 95 | header_color_threshold: true 96 | color_threshold: 97 | - color: '#B20000' 98 | value: 10 99 | - color: '#FF9912' 100 | value: 15 101 | - color: '#FFFF00' 102 | value: 25 103 | - color: '#98FB98' 104 | value: 60 105 | - color: '#008C23' 106 | value: 100 107 | - type: custom:mushroom-chips-card 108 | chips: 109 | - type: template 110 | icon: |- 111 | {% if is_state(entity, 'on') %} 112 | mdi:water-pump 113 | {% else %} 114 | mdi:water-pump-off 115 | {% endif %} 116 | icon_color: |2- 117 | {% if is_state(entity, 'on') %} 118 | blue 119 | {% else %} 120 | disabled 121 | {% endif %} 122 | entity: switch.speelhuis_waterpomp 123 | tap_action: 124 | action: more-info 125 | - type: template 126 | content: '{{states(''sensor.esp_speelhuis_battery_voltage'') }} v' 127 | entity: sensor.esp_speelhuis_battery_voltage 128 | icon: |2 129 | {% set bl = states('sensor.esp_speelhuis_battery_level') | int %} 130 | {% if bl < 10 %} mdi:battery-outline 131 | {% elif bl < 20 %} mdi:battery-10 132 | {% elif bl < 30 %} mdi:battery-20 133 | {% elif bl < 40 %} mdi:battery-30 134 | {% elif bl < 50 %} mdi:battery-40 135 | {% elif bl < 60 %} mdi:battery-50 136 | {% elif bl < 70 %} mdi:battery-60 137 | {% elif bl < 80 %} mdi:battery-70 138 | {% elif bl < 90 %} mdi:battery-80 139 | {% elif bl < 100 %} mdi:battery-90 140 | {% elif bl == 100 %} mdi:battery 141 | {% else %} mdi:battery-unknown 142 | {% endif %} 143 | icon_color: |2- 144 | {% set bl = states('sensor.esp_speelhuis_battery_level') | int %} 145 | {% if bl < 10 %} red 146 | {% elif bl < 20 %} red 147 | {% elif bl < 30 %} red 148 | {% elif bl < 40 %} orange 149 | {% elif bl < 50 %} orange 150 | {% elif bl < 60 %} green 151 | {% elif bl < 70 %} green 152 | {% elif bl < 80 %} green 153 | {% elif bl < 90 %} green 154 | {% elif bl < 100 %} green 155 | {% elif bl == 100 %} green 156 | {% else %} grey 157 | {% endif %} 158 | tap_action: 159 | action: more-info 160 | alignment: end 161 | card_mod: 162 | style: | 163 | ha-card { 164 | --ha-card-box-shadow: none; 165 | --chip-background: none; 166 | --chip-box-shadow: none; 167 | --chip-spacing: 0; 168 | : -36px; 169 | } 170 | mushroom-template-chip:nth-child(1)$: | 171 | {% if is_state('switch.speelhuis_waterpomp','on') %} 172 | ha-icon { 173 | animation: drip 2s infinite; 174 | } 175 | @keyframes drip { 176 | 0%, 100% { clip-path: inset(0 0 0 0); } 177 | 15%, 85% { clip-path: polygon(0 0, 100% 0, 100% 57%, 64% 57%, 64% 100%, 0 100%); } 178 | } 179 | } 180 | {% else %} 181 | 182 | {% endif %} 183 | } 184 | -------------------------------------------------------------------------------- /toilet_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Toilet 7 | icon: mdi:toilet 8 | icon_color: blue 9 | layout: horizontal 10 | entity: light.shellydim_toilet 11 | secondary: >- 12 | 🌡️{{states('sensor.toilet_beneden_temperature_aqara_temperature') 13 | }}°C | 💧{{states('sensor.toilet_beneden_temperature_aqara_humidity') 14 | | int }}% 15 | tap_action: 16 | action: navigate 17 | navigation_path: /dashboard-subviews/toilet-beneden 18 | fill_container: true 19 | multiline_secondary: false 20 | card_mod: 21 | style: | 22 | ha-card { 23 | z-index: 1; 24 | } 25 | - type: custom:mini-graph-card 26 | entities: 27 | - entity: sensor.toilet_beneden_temperature_aqara_temperature 28 | name: Temperature 29 | - entity: sensor.toilet_beneden_temperature_aqara_humidity 30 | name: Humidity 31 | color: blue 32 | y_axis: secondary 33 | color_thresholds: 34 | - value: -20 35 | color: "#264CFF" 36 | - value: -15 37 | color: "#3FA0FF" 38 | - value: -10 39 | color: "#72D8FF" 40 | - value: -5 41 | color: "#AAF7FF" 42 | - value: 0 43 | color: "#E0FFFF" 44 | - value: 5 45 | color: "#FFFFBF" 46 | - value: 10 47 | color: "#FFE099" 48 | - value: 15 49 | color: "#FFAD72" 50 | - value: 20 51 | color: "#F76D5E" 52 | - value: 25 53 | color: "#D82632" 54 | - value: 30 55 | color: "#A50021" 56 | height: 50 57 | hours_to_show: 24 58 | line_width: 2 59 | font_size: 50 60 | animate: true 61 | show: 62 | name: false 63 | icon: false 64 | state: false 65 | legend: false 66 | fill: fade 67 | labels: false 68 | labels_secondary: false 69 | points: false 70 | card_mod: 71 | style: | 72 | ha-card { 73 | position: absolute !important; 74 | height: 100%; 75 | width: 100%; 76 | top: 0px; 77 | --ha-card-border-width: 0; 78 | } 79 | ha-card:after { 80 | content: ""; 81 | position: absolute; 82 | width: 100%; 83 | height: 100%; 84 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 85 | } 86 | - type: custom:vertical-stack-in-card 87 | mode: vertical 88 | cards: 89 | - type: custom:vertical-stack-in-card 90 | horizontal: true 91 | cards: 92 | - type: custom:mushroom-template-card 93 | entity: light.shellydim_voordeurlamp 94 | layout: vertical 95 | icon: |- 96 | {% if is_state('light.shellydim_toilet', 'on') %} 97 | hue:ceiling-being 98 | {% else %} 99 | hue:ceiling-being 100 | {% endif %} 101 | icon_color: |- 102 | {% if is_state('light.shellydim_toilet', 'on') %} 103 | yellow 104 | {% endif %} 105 | double_tap_action: 106 | action: call-service 107 | service: input_boolean.toggle 108 | target: 109 | entity_id: input_boolean.node_red_toilet_automations 110 | data: {} 111 | card_mod: 112 | style: 113 | mushroom-shape-icon$: > 114 | {% if is_state('input_boolean.node_red_toilet_automations', 115 | 'on') %} 116 | 117 | .shape { 118 | --shape-animation: ping 3s infinite; 119 | } 120 | 121 | @keyframes ping { 122 | 0% { 123 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 124 | } 125 | 126 | 100% { 127 | box-shadow: 0 0 5px 5px transparent; 128 | } 129 | } 130 | 131 | {% elif 132 | is_state('input_boolean.node_red_voordeurlamp_automations', 133 | 'off') %} 134 | 135 | {% endif %} 136 | - type: custom:mushroom-chips-card 137 | chips: 138 | - type: template 139 | icon: mdi:motion-sensor 140 | icon_color: |2- 141 | {% if is_state(entity, 'on') %} 142 | blue 143 | {% else %} 144 | grey 145 | {% endif %} 146 | entity: binary_sensor.toilet_beneden_occupancy 147 | tap_action: 148 | action: more-info 149 | - type: template 150 | icon: mdi:fan 151 | icon_color: |2- 152 | {% if is_state(entity, 'on') %} 153 | green 154 | {% else %} 155 | grey 156 | {% endif %} 157 | entity: switch.shelly1l_toiletfan 158 | tap_action: 159 | action: more-info 160 | alignment: end 161 | card_mod: 162 | style: 163 | mushroom-template-chip: | 164 | ha-card { 165 | --ha-card-box-shadow: none; 166 | --chip-background: none; 167 | --chip-box-shadow: none; 168 | --chip-spacing: 0; 169 | : -36px; 170 | } 171 | mushroom-template-chip:nth-child(1)$: | 172 | {% if is_state('binary_sensor.toilet_beneden_occupancy','on') %} 173 | ha-state-icon { 174 | animation: clip 2s linear infinite; 175 | } 176 | @keyframes clip { 177 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 178 | } 179 | .shape { 180 | --shape-animation: motion 2s linear infinite; 181 | } 182 | @keyframes motion { 183 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 184 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 185 | } 186 | } 187 | {% else %} 188 | 189 | {% endif %} 190 | } 191 | mushroom-template-chip:nth-child(2)$: | 192 | {% if is_state('switch.shelly1l_toiletfan','on') %} 193 | ha-state-icon { 194 | animation: rotation 2s linear infinite; 195 | } 196 | @keyframes rotation { 197 | 0% { 198 | transform: rotate(0deg); 199 | } 200 | 100% { 201 | transform: rotate(360deg); 202 | } 203 | } 204 | } 205 | {% else %} 206 | 207 | {% endif %} 208 | } 209 | -------------------------------------------------------------------------------- /keuken_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:mushroom-template-card 4 | primary: Keuken 5 | icon: mdi:countertop 6 | icon_color: teal 7 | layout: horizontal 8 | entity: light.woonkamer_keuken_dimmer_6sp_ecodim 9 | secondary: >- 10 | 🌡️{{states('sensor.woonkamer_temperature') }}°C | 11 | 💡{{states('sensor.woonkamer_illuminance') | int }}lux | 12 | 🔌{{states('sensor.keuken_total_energy_watt') | int }}W 13 | tap_action: 14 | action: navigate 15 | navigation_path: /dashboard-subviews/keuken 16 | - type: custom:vertical-stack-in-card 17 | horizontal: true 18 | cards: 19 | - type: custom:mushroom-template-card 20 | entity: light.woonkamer_keuken_dimmer_6sp_ecodim 21 | layout: vertical 22 | icon: |- 23 | {% if is_state('light.woonkamer_keuken_dimmer_6sp_ecodim', 'on') %} 24 | hue:bulb-group-ceiling-flush-circular 25 | {% else %} 26 | hue:bulb-group-ceiling-flush-circular 27 | {% endif %} 28 | icon_color: |- 29 | {% if is_state('light.woonkamer_keuken_dimmer_6sp_ecodim', 'on') %} 30 | yellow 31 | {% endif %} 32 | - type: custom:mushroom-chips-card 33 | chips: 34 | - type: template 35 | icon: mdi:coffee-maker 36 | icon_color: |2- 37 | {% if states('sensor.keuken_koffie_plug_bw_power') | float > 2 %} 38 | brown 39 | {% else %} 40 | disabled 41 | {% endif %} 42 | entity: sensor.keuken_koffie_plug_bw_power 43 | tap_action: 44 | action: more-info 45 | - type: template 46 | icon: mdi:dishwasher 47 | icon_color: |2- 48 | {% if is_state(entity, 'on') %} 49 | blue 50 | {% else %} 51 | disabled 52 | {% endif %} 53 | entity: binary_sensor.vaatwasser_status 54 | tap_action: 55 | action: more-info 56 | - type: template 57 | icon: |- 58 | {% if is_state(entity, 'off') %} 59 | mdi:window-closed 60 | {% else %} 61 | mdi:window-open 62 | {% endif %} 63 | icon_color: |2- 64 | {% if is_state(entity, 'off') %} 65 | green 66 | {% else %} 67 | red 68 | {% endif %} 69 | entity: binary_sensor.keuken_raam_aqara_contact 70 | tap_action: 71 | action: more-info 72 | - type: template 73 | icon: |- 74 | {% if is_state(entity, 'off') %} 75 | mdi:door-sliding-lock 76 | {% else %} 77 | mdi:door-sliding-open 78 | {% endif %} 79 | icon_color: |2- 80 | {% if is_state(entity, 'off') %} 81 | green 82 | {% else %} 83 | red 84 | {% endif %} 85 | entity: binary_sensor.achterdeur_aqara_contact 86 | tap_action: 87 | action: more-info 88 | alignment: end 89 | card_mod: 90 | style: 91 | mushroom-template-chip: | 92 | ha-card { 93 | --ha-card-box-shadow: none; 94 | --chip-background: none; 95 | --chip-box-shadow: none; 96 | --chip-spacing: 0; 97 | : -36px; 98 | } 99 | mushroom-template-chip:nth-child(1)$: | 100 | {% if states('sensor.keuken_koffie_plug_bw_power') | float > 2 %} 101 | ha-state-icon { 102 | animation: java 4s linear infinite; 103 | } 104 | @keyframes java { 105 | 0%, 80%, 100% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 0 100%); } 106 | 10% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 77%, 55% 80%, 57% 100%, 0 100%); } 107 | 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 79%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 77%, 55% 80%, 55% 100%, 0 100%); } 108 | 20% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 55%, 42% 70%, 47% 76%, 55% 76%, 57% 100%, 0 100%); } 109 | 25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 76%, 63% 76%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 47% 76%, 55% 76%, 56% 100%, 0 100%); } 110 | 30% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 55%, 42% 69%, 44% 73%, 55% 73%, 57% 100%, 0 100%); } 111 | 35% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 73%, 64% 73%, 66% 70%, 66% 55%, 42% 54%, 42% 69%, 44% 73%, 55% 73%, 56% 100%, 0 100%); } 112 | 40% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 57% 70%, 57% 100%, 0 100%); } 113 | 45% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 70%, 67% 70%, 66% 54%, 42% 54%, 42% 70%, 55% 70%, 56% 100%, 0 100%); } 114 | 50% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 57% 65%, 57% 100%, 0 100%); } 115 | 55% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 66%, 67% 65%, 66% 54%, 42% 54%, 42% 65%, 55% 65%, 56% 100%, 0 100%); } 116 | 60% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 57% 60%, 57% 100%, 0 100%); } 117 | 65% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 60%, 66% 60%, 66% 54%, 42% 54%, 42% 60%, 55% 60%, 56% 100%, 0 100%); } 118 | 70% { clip-path: polygon(0 0, 100% 0, 100% 32%, 47% 32%, 47% 43%, 100% 43%, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 57% 56%, 57% 100%, 0 100%); } 119 | 75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 55% 100%, 55% 56%, 66% 56%, 66% 54%, 42% 54%, 42% 56%, 55% 56%, 55% 100%, 0 100%); } 120 | } 121 | {% else %} 122 | 123 | {% endif %} 124 | } 125 | mushroom-template-chip:nth-child(2)$: | 126 | {% if is_state('binary_sensor.vaatwasser_status','on') %} 127 | ha-state-icon { 128 | animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite; 129 | transform-origin: 50% 75%; 130 | } 131 | @keyframes bounce { 132 | 0%, 20%, 50%, 80%, 100% {transform: translateY(0); } 133 | 40% { transform: translateY(-1.2px) rotate(5deg); } 134 | 60% { transform: translateY(-1.1px) rotate(-4deg); } 135 | } 136 | @keyframes wash { 137 | 50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); } 138 | } 139 | {% else %} 140 | 141 | {% endif %} 142 | } 143 | -------------------------------------------------------------------------------- /top_chips_current_overview.yaml: -------------------------------------------------------------------------------- 1 | type: custom:mushroom-chips-card 2 | chips: 3 | - type: template 4 | icon: |- 5 | {% if states('sensor.achtertuin_buitentemperatuur') | float < 0 %} 6 | mdi:temperature-celsius 7 | {% elif states('sensor.achtertuin_buitentemperatuur') | float > 0 %} 8 | mdi:temperature-celsius 9 | {% else %} 10 | mdi:temperature-celsius 11 | {% endif %} 12 | icon_color: |- 13 | {% if states('sensor.achtertuin_buitentemperatuur') | float < 10 %} 14 | blue 15 | {% elif states('sensor.achtertuin_buitentemperatuur') | float > 20 %} 16 | red 17 | {% else %} 18 | orange 19 | {% endif %} 20 | content: "{{ states(\"sensor.achtertuin_buitentemperatuur\") }}" 21 | entity: sensor.achtertuin_buitentemperatuur 22 | tap_action: 23 | action: more-info 24 | - type: template 25 | icon: |- 26 | {% if is_state(entity, 'off') %} 27 | mdi:door-closed-lock 28 | {% else %} 29 | mdi:door-open 30 | {% endif %} 31 | icon_color: |2- 32 | {% if is_state(entity, 'off') %} 33 | green 34 | {% else %} 35 | red 36 | {% endif %} 37 | entity: binary_sensor.voordeur_aqara_contact 38 | tap_action: 39 | action: more-info 40 | - type: template 41 | icon: |- 42 | {% if is_state(entity, 'off') %} 43 | mdi:door-sliding-lock 44 | {% else %} 45 | mdi:door-sliding-open 46 | {% endif %} 47 | icon_color: |2- 48 | {% if is_state(entity, 'off') %} 49 | green 50 | {% else %} 51 | red 52 | {% endif %} 53 | entity: binary_sensor.achterdeur_aqara_contact 54 | tap_action: 55 | action: more-info 56 | - type: template 57 | icon: |- 58 | {% if is_state(entity, 'off') %} 59 | mdi:garage-variant-lock 60 | {% else %} 61 | mdi:garage-open-variant 62 | {% endif %} 63 | icon_color: |2- 64 | {% if is_state(entity, 'off') %} 65 | green 66 | {% else %} 67 | red 68 | {% endif %} 69 | entity: binary_sensor.garage_garagedeur_aqara_contact 70 | tap_action: 71 | action: more-info 72 | - type: template 73 | icon: |- 74 | {% if states('sensor.p1_meter_current_power') | float < 0 %} 75 | mdi:transmission-tower-import 76 | {% elif states('sensor.p1_meter_current_power') | float > 0 %} 77 | mdi:transmission-tower-export 78 | {% else %} 79 | mdi:transmission-tower-export 80 | {% endif %} 81 | icon_color: |- 82 | {% if states('sensor.p1_meter_current_power') | float < 0 %} 83 | green 84 | {% elif states('sensor.p1_meter_current_power') | float > 0 %} 85 | red 86 | {% else %} 87 | grey 88 | {% endif %} 89 | content: "{{ states(\"sensor.p1_meter_current_power\") }} W" 90 | entity: sensor.p1_meter_current_power 91 | tap_action: 92 | action: more-info 93 | - type: template 94 | icon: mdi:solar-power-variant 95 | icon_color: >- 96 | {% if states('sensor.envoy_122217065650_current_power_production') | float 97 | > 0.1 %} 98 | 99 | yellow 100 | 101 | {% else %} 102 | 103 | grey 104 | 105 | {% endif %} 106 | content: "{{ states(\"sensor.envoy_122217065650_current_power_production\") }} W" 107 | entity: sensor.envoy_122217065650_current_power_production 108 | tap_action: 109 | action: more-info 110 | - type: conditional 111 | conditions: 112 | - entity: light.wled_vuilniswagen 113 | state: "on" 114 | chip: 115 | type: template 116 | icon: |- 117 | {% if is_state(entity, 'on') %} 118 | mdi:trash-can-outline 119 | {% else %} 120 | mdi:recycle 121 | {% endif %} 122 | icon_color: |2- 123 | {% if is_state('sensor.avalex_tomorrow', 'None') %} 124 | disabled 125 | {% elif is_state('sensor.avalex_tomorrow', 'PMD') %} 126 | #FF00FF 127 | {% elif is_state('sensor.avalex_tomorrow', 'Papier') %} 128 | blue 129 | {% elif is_state('sensor.avalex_tomorrow', 'GFT') %} 130 | green 131 | {% elif is_state('sensor.avalex_tomorrow', 'Restafval') %} 132 | yellow 133 | {% else %} 134 | disabled 135 | {% endif %} 136 | entity: light.wled_vuilniswagen 137 | tap_action: 138 | action: toggle 139 | - type: template 140 | icon: |- 141 | {% if is_state(entity, 'on') %} 142 | mdi:fuse 143 | {% else %} 144 | mdi:fuse-alert 145 | {% endif %} 146 | icon_color: |2- 147 | {% if is_state(entity, 'on') %} 148 | disabled 149 | {% else %} 150 | red 151 | {% endif %} 152 | entity: switch.away_mode_switches 153 | tap_action: 154 | action: navigate 155 | navigation_path: /dashboard-subviews/fuses 156 | - type: conditional 157 | conditions: 158 | - entity: binary_sensor.voordeur_ding 159 | state: "on" 160 | chip: 161 | type: template 162 | icon: |- 163 | {% if is_state(entity, 'on') %} 164 | mdi:bell-ring 165 | {% else %} 166 | mdi:bell-ring 167 | {% endif %} 168 | icon_color: |- 169 | {% if is_state(entity, 'on') %} 170 | red 171 | {% else %} 172 | disabled 173 | {% endif %} 174 | entity: binary_sensor.voordeur_ding 175 | tap_action: 176 | action: none 177 | - type: conditional 178 | conditions: 179 | - condition: numeric_state 180 | entity: sensor.frigate_vogelhuis_bird_count 181 | above: 0 182 | chip: 183 | type: template 184 | icon: |- 185 | {% if states('sensor.frigate_vogelhuis_bird_count') | float < 0 %} 186 | mdi:bird 187 | {% else %} 188 | mdi:bird 189 | {% endif %} 190 | icon_color: |- 191 | {% if states('sensor.frigate_vogelhuis_bird_count') | float < 0 %} 192 | yellow 193 | {% else %} 194 | grey 195 | {% endif %} 196 | content: "{{ states(\"sensor.frigate_vogelhuis_bird_count\") }} " 197 | entity: sensor.frigate_vogelhuis_bird_count 198 | tap_action: 199 | action: more-info 200 | alignment: center 201 | card_mod: 202 | style: 203 | mushroom-template-chip: | 204 | ha-card { 205 | --ha-card-box-shadow: none; 206 | --chip-background: none; 207 | --chip-box-shadow: none; 208 | --chip-height: 20px; 209 | --chip-spacing: 0; 210 | : -36px; 211 | } 212 | mushroom-template-chip:nth-child(6)$: > 213 | {% if states('sensor.envoy_122217065650_current_power_production') | float 214 | > 0.1 %} 215 | 216 | ha-state-icon { 217 | animation: rays 2s infinite; 218 | } 219 | 220 | 221 | @keyframes rays { 222 | 0%, 100% { clip-path: inset(0 0 0 0); } 223 | 80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); } 224 | } 225 | 226 | {% else %} 227 | 228 | 229 | {% endif %} 230 | 231 | } 232 | -------------------------------------------------------------------------------- /overloop2_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Overloop2 7 | icon: hue:room-other 8 | icon_color: teal 9 | layout: horizontal 10 | entity: light.overloop2_hue 11 | secondary: >- 12 | {{states('sensor.overloop2_motion_hue_temperature') }}°C | 13 | {{states('sensor.overloop2_motion_hue_illuminance_lux') | int }}lux 14 | tap_action: 15 | action: navigate 16 | navigation_path: /dashboard-subviews/overloop2 17 | fill_container: true 18 | multiline_secondary: false 19 | card_mod: 20 | style: | 21 | ha-card { 22 | z-index: 1; 23 | } 24 | - type: custom:mini-graph-card 25 | entities: 26 | - entity: sensor.overloop2_motion_hue_temperature 27 | name: Temperature 28 | color_thresholds: 29 | - value: -20 30 | color: "#264CFF" 31 | - value: -15 32 | color: "#3FA0FF" 33 | - value: -10 34 | color: "#72D8FF" 35 | - value: -5 36 | color: "#AAF7FF" 37 | - value: 0 38 | color: "#E0FFFF" 39 | - value: 5 40 | color: "#FFFFBF" 41 | - value: 10 42 | color: "#FFE099" 43 | - value: 15 44 | color: "#FFAD72" 45 | - value: 20 46 | color: "#F76D5E" 47 | - value: 25 48 | color: "#D82632" 49 | - value: 30 50 | color: "#A50021" 51 | height: 50 52 | hours_to_show: 24 53 | line_width: 2 54 | font_size: 50 55 | animate: true 56 | show: 57 | name: false 58 | icon: false 59 | state: false 60 | legend: false 61 | fill: fade 62 | labels: false 63 | labels_secondary: false 64 | points: false 65 | card_mod: 66 | style: | 67 | ha-card { 68 | position: absolute !important; 69 | height: 100%; 70 | width: 100%; 71 | top: 0px; 72 | --ha-card-border-width: 0; 73 | } 74 | ha-card:after { 75 | content: ""; 76 | position: absolute; 77 | width: 100%; 78 | height: 100%; 79 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 80 | } 81 | - type: custom:vertical-stack-in-card 82 | mode: vertical 83 | cards: 84 | - type: custom:vertical-stack-in-card 85 | horizontal: true 86 | cards: 87 | - type: custom:mushroom-template-card 88 | entity: light.overloop2_hue 89 | layout: vertical 90 | icon: |- 91 | {% if is_state('light.overloop2_hue', 'on') %} 92 | hue:single-spot 93 | {% else %} 94 | hue:single-spot 95 | {% endif %} 96 | icon_color: |- 97 | {% if is_state('light.overloop2_hue', 'on') %} 98 | yellow 99 | {% endif %} 100 | double_tap_action: 101 | action: call-service 102 | service: input_boolean.toggle 103 | target: 104 | entity_id: input_boolean.node_red_overloop2_automations 105 | data: {} 106 | card_mod: 107 | style: 108 | mushroom-shape-icon$: > 109 | {% if is_state('input_boolean.node_red_overloop2_automations', 110 | 'on') %} 111 | 112 | .shape { 113 | --shape-animation: ping 3s infinite; 114 | } 115 | 116 | @keyframes ping { 117 | 0% { 118 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 119 | } 120 | 121 | 100% { 122 | box-shadow: 0 0 5px 5px transparent; 123 | } 124 | } 125 | 126 | {% elif 127 | is_state('input_boolean.node_red_overloop2_automations', 128 | 'off') %} 129 | 130 | {% endif %} 131 | - type: custom:mushroom-chips-card 132 | chips: 133 | - type: template 134 | icon: mdi:smoke 135 | icon_color: |2- 136 | {% if is_state(entity, 'on') %} 137 | red 138 | {% else %} 139 | grey 140 | {% endif %} 141 | entity: binary_sensor.rookmelder_overloop2_kaku_smoke 142 | tap_action: 143 | action: more-info 144 | - type: template 145 | icon: mdi:motion-sensor 146 | icon_color: |2- 147 | {% if is_state(entity, 'on') %} 148 | blue 149 | {% else %} 150 | grey 151 | {% endif %} 152 | entity: binary_sensor.overloop2_motion_hue_occupancy 153 | tap_action: 154 | action: more-info 155 | alignment: end 156 | card_mod: 157 | style: 158 | mushroom-template-chip: | 159 | ha-card { 160 | --ha-card-box-shadow: none; 161 | --chip-background: none; 162 | --chip-box-shadow: none; 163 | --chip-spacing: 0; 164 | : -36px; 165 | } 166 | mushroom-template-chip:nth-child(1)$: > 167 | {% if 168 | is_state('binary_sensor.rookmelder_overloop2_kaku_smoke','on') %} 169 | 170 | ha-state-icon { 171 | animation: clip 2s linear infinite; 172 | } 173 | 174 | @keyframes clip { 175 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 176 | } 177 | 178 | .shape { 179 | --shape-animation: motion 2s linear infinite; 180 | } 181 | 182 | @keyframes motion { 183 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 184 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 185 | } 186 | 187 | } 188 | 189 | {% else %} {% endif %} } 190 | mushroom-template-chip:nth-child(2)$: > 191 | {% if 192 | is_state('binary_sensor.overloop2_motion_hue_occupancy','on') %} 193 | 194 | ha-state-icon { 195 | animation: clip 2s linear infinite; 196 | } 197 | 198 | @keyframes clip { 199 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 200 | } 201 | 202 | .shape { 203 | --shape-animation: motion 2s linear infinite; 204 | } 205 | 206 | @keyframes motion { 207 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 208 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 209 | } 210 | 211 | } 212 | 213 | {% else %} 214 | 215 | 216 | {% endif %} 217 | 218 | } 219 | -------------------------------------------------------------------------------- /subview_kinderkamer_lucas_detailed_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | horizontal: false 3 | cards: 4 | - type: custom:stack-in-card 5 | cards: 6 | - type: custom:mushroom-template-card 7 | primary: Lucas 👶 8 | icon: mdi:cradle 9 | icon_color: blue 10 | layout: horizontal 11 | entity: light.kleinekamer_hue 12 | secondary: >- 13 | 🌡️{{states('sensor.kinderkamer_lucas_temperature') }}°C | 14 | 💧{{states('sensor.kinderkamer_lucas_humidity') | int }}% | 15 | 💡{{states('sensor.kinderkamer_lucas_illuminance') | int }}lux | 16 | 🔌{{states('sensor.lucas_total_energy_watt') | int }}W 17 | tap_action: 18 | action: navigate 19 | navigation_path: /dashboard-subviews/kinderkamer-lucas 20 | fill_container: true 21 | multiline_secondary: false 22 | - type: custom:vertical-stack-in-card 23 | mode: vertical 24 | cards: 25 | - type: custom:vertical-stack-in-card 26 | horizontal: true 27 | cards: 28 | - type: custom:mushroom-light-card 29 | entity: light.kleinekamer_hue 30 | primary_info: none 31 | secondary_info: state 32 | layout: vertical 33 | fill_container: false 34 | show_brightness_control: true 35 | show_color_temp_control: true 36 | show_color_control: false 37 | collapsible_controls: false 38 | use_light_color: true 39 | - type: custom:mushroom-light-card 40 | entity: light.kinderkamer_ledstrip 41 | primary_info: none 42 | secondary_info: state 43 | layout: vertical 44 | fill_container: false 45 | show_brightness_control: true 46 | show_color_temp_control: true 47 | show_color_control: false 48 | collapsible_controls: false 49 | use_light_color: true 50 | - type: custom:vertical-stack-in-card 51 | horizontal: true 52 | cards: 53 | - type: custom:mushroom-template-card 54 | entity: climate.airco_sophie 55 | layout: vertical 56 | icon: |- 57 | {% if is_state('climate.airco_lucas', 'heat') %} 58 | mdi:thermometer-chevron-up 59 | {% elif is_state('climate.airco_lucas', 'cool') %} 60 | mdi:thermometer-chevron-down 61 | {% elif is_state('climate.airco_lucas', 'off') %} 62 | mdi:thermostat 63 | {% else %} 64 | disbled 65 | {% endif %} 66 | icon_color: |- 67 | {% if is_state('climate.airco_lucas', 'heat') %} 68 | red 69 | {% elif is_state('climate.airco_lucas', 'cool') %} 70 | blue 71 | {% elif is_state('climate.airco_lucas', 'off') %} 72 | disabled 73 | {% else %} 74 | disbled 75 | {% endif %} 76 | tap_action: 77 | action: more-info 78 | double_tap_action: 79 | action: call-service 80 | service: input_boolean.toggle 81 | target: 82 | entity_id: input_boolean.node_red_kinderkamer_lucas_airco_automations 83 | data: {} 84 | card_mod: 85 | style: 86 | mushroom-shape-icon$: > 87 | {% if 88 | is_state('input_boolean.node_red_kinderkamer_lucas_airco_automations', 89 | 'on') %} 90 | 91 | .shape { 92 | --shape-animation: ping 3s infinite; 93 | } 94 | 95 | @keyframes ping { 96 | 0% { 97 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 98 | } 99 | 100 | 100% { 101 | box-shadow: 0 0 5px 5px transparent; 102 | } 103 | } 104 | 105 | {% elif 106 | is_state('input_boolean.node_red_kinderkamer_lucas_airco_automations', 107 | 'off') %} 108 | 109 | {% endif %} 110 | - type: custom:mushroom-template-card 111 | entity: switch.esp_kinderkamer_nachtlampje 112 | layout: vertical 113 | icon: |- 114 | {% if is_state('switch.esp_kinderkamer_nachtlampje', 'on') %} 115 | mdi:butterfly 116 | {% else %} 117 | mdi:butterfly 118 | {% endif %} 119 | icon_color: |- 120 | {% if is_state('switch.esp_kinderkamer_nachtlampje', 'on') %} 121 | green 122 | {% endif %} 123 | - type: custom:mushroom-chips-card 124 | chips: 125 | - type: template 126 | icon: mdi:motion-sensor 127 | icon_color: |2- 128 | {% if is_state(entity, 'on') %} 129 | blue 130 | {% else %} 131 | grey 132 | {% endif %} 133 | entity: binary_sensor.kinderkamer_lucas_occupancy 134 | tap_action: 135 | action: more-info 136 | - type: template 137 | icon: |- 138 | {% if is_state(entity, 'off') %} 139 | mdi:window-closed 140 | {% else %} 141 | mdi:window-open 142 | {% endif %} 143 | icon_color: |2- 144 | {% if is_state(entity, 'off') %} 145 | green 146 | {% else %} 147 | red 148 | {% endif %} 149 | entity: binary_sensor.kleinekamer_raam_aqara_contact 150 | tap_action: 151 | action: more-info 152 | - type: template 153 | icon: |- 154 | {% if is_state(entity, 'off') %} 155 | mdi:thermostat 156 | {% else %} 157 | mdi:thermostat 158 | {% endif %} 159 | icon_color: |2- 160 | {% if is_state(entity, 'heat') %} 161 | red 162 | {% elif is_state(entity, 'cool') %} 163 | blue 164 | {% else %} 165 | disabled 166 | {% endif %} 167 | entity: climate.airco_lucas 168 | tap_action: 169 | action: more-info 170 | alignment: end 171 | card_mod: 172 | style: 173 | mushroom-template-chip: | 174 | ha-card { 175 | --ha-card-box-shadow: none; 176 | --chip-background: none; 177 | --chip-box-shadow: none; 178 | --chip-spacing: 0; 179 | : -36px; 180 | } 181 | mushroom-template-chip:nth-child(1)$: > 182 | {% if is_state('binary_sensor.kinderkamer_lucas_occupancy','on') 183 | %} 184 | 185 | ha-state-icon { 186 | animation: clip 2s linear infinite; 187 | } 188 | 189 | @keyframes clip { 190 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 191 | } 192 | 193 | .shape { 194 | --shape-animation: motion 2s linear infinite; 195 | } 196 | 197 | @keyframes motion { 198 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 199 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 200 | } 201 | 202 | } 203 | 204 | {% else %} 205 | 206 | 207 | {% endif %} 208 | 209 | } 210 | -------------------------------------------------------------------------------- /multimedia_tv_audio_controll_card.yaml: -------------------------------------------------------------------------------- 1 | square: false 2 | columns: 2 3 | type: grid 4 | cards: 5 | - type: custom:vertical-stack-in-card 6 | cards: 7 | - type: custom:stack-in-card 8 | mode: horizontal 9 | cards: 10 | - type: custom:mushroom-template-card 11 | icon: >- 12 | {% if states('sensor.woonkamer_multimedia_tv_plug_tuya_power') | 13 | float < 1 %} mdi:television-off {% elif 14 | states('sensor.woonkamer_multimedia_tv_plug_tuya_power') | float > 15 | 0 %} mdi:television {% else %} mdi:music-off {% endif %} 16 | icon_color: >- 17 | {% if states('sensor.woonkamer_multimedia_tv_plug_tuya_power') | 18 | float < 1 %} disabled {% elif 19 | states('sensor.woonkamer_multimedia_tv_plug_tuya_power') | float > 20 | 1 %} green {% else %} red {% endif %} 21 | entity: script.tv_philipstv_ir_on_off 22 | tap_action: 23 | action: toggle 24 | - type: custom:mushroom-template-card 25 | icon: |- 26 | {% if is_state(entity, 'playing') %} 27 | mdi:set-top-box 28 | {% else %} 29 | mdi:set-top-box 30 | {% endif %} 31 | icon_color: |- 32 | {% if is_state(entity, 'playing') %} 33 | green 34 | {% else %} 35 | disabled 36 | {% endif %} 37 | entity: media_player.ziggonext 38 | tap_action: 39 | action: toggle 40 | - type: custom:mushroom-chips-card 41 | chips: 42 | - type: template 43 | icon: |2- 44 | {% if state_attr('media_player.philipstv', 'source') == 'org.droidtv.playtv' %} 45 | phu:ziggo 46 | {% else %} 47 | phu:ziggo 48 | {% endif %} 49 | icon_color: |2- 50 | {% if state_attr('media_player.philipstv', 'source') == 'org.droidtv.playtv' %} 51 | green 52 | {% else %} 53 | disabled 54 | {% endif %} 55 | entity: script.tv_philips_tv_source_hdmi1 56 | tap_action: 57 | action: toggle 58 | - type: template 59 | icon: |2- 60 | {% if state_attr('media_player.philipstv', 'source') == 'YouTube' %} 61 | mdi:youtube 62 | {% else %} 63 | mdi:youtube 64 | {% endif %} 65 | icon_color: |2- 66 | {% if state_attr('media_player.philipstv', 'source') == 'YouTube' %} 67 | green 68 | {% else %} 69 | disabled 70 | {% endif %} 71 | entity: script.tv_philipstv_source_youtube 72 | tap_action: 73 | action: toggle 74 | - type: template 75 | icon: |2- 76 | {% if state_attr('media_player.philipstv', 'source') == 'Netflix' %} 77 | mdi:netflix 78 | {% else %} 79 | mdi:netflix 80 | {% endif %} 81 | icon_color: |2- 82 | {% if state_attr('media_player.philipstv', 'source') == 'Netflix' %} 83 | green 84 | {% else %} 85 | disabled 86 | {% endif %} 87 | entity: script.tv_philipstv_source_netflix 88 | tap_action: 89 | action: toggle 90 | - type: template 91 | icon: |2- 92 | {% if state_attr('media_player.philipstv', 'source') == 'Jellyfin' %} 93 | phu:jellyfin 94 | {% else %} 95 | phu:jellyfin 96 | {% endif %} 97 | icon_color: |2- 98 | {% if state_attr('media_player.philipstv', 'source') == 'Jellyfin' %} 99 | green 100 | {% else %} 101 | disabled 102 | {% endif %} 103 | entity: script.tv_philipstv_source_jellyfin 104 | tap_action: 105 | action: toggle 106 | alignment: center 107 | card_mod: 108 | style: | 109 | ha-card { 110 | --ha-card-box-shadow: none; 111 | --chip-background: none; 112 | --chip-box-shadow: none; 113 | --chip-spacing: 2px; 114 | --chip-height: 42px; 115 | : -36px; 116 | } 117 | - type: custom:vertical-stack-in-card 118 | mode: vertical 119 | cards: 120 | - type: custom:mushroom-template-card 121 | icon: >- 122 | {% if states('sensor.woonkamer_multimedia_audio_plug_tuya_power') | 123 | float < 1 %} mdi:music {% elif 124 | states('sensor.woonkamer_multimedia_audio_plug_tuya_power') | float > 125 | 0 %} mdi:music {% else %} mdi:music-off {% endif %} 126 | icon_color: >- 127 | {% if states('sensor.woonkamer_multimedia_audio_plug_tuya_power') | 128 | float < 1 %} disabled {% elif 129 | states('sensor.woonkamer_multimedia_audio_plug_tuya_power') | float > 130 | 1 %} green {% else %} red {% endif %} 131 | entity: script.audio_z5500_on_off 132 | tap_action: 133 | action: toggle 134 | - type: custom:mushroom-chips-card 135 | chips: 136 | - type: template 137 | icon: >- 138 | {% if is_state('input_select.audio_z5500_last_source', 'optical') 139 | %} 140 | 141 | mdi:audio-input-rca 142 | 143 | {% elif is_state('input_select.audio_z5500_last_source', 'stereo') 144 | %} 145 | 146 | mdi:audio-input-rca 147 | 148 | {% else %} 149 | 150 | mdi:audio-input-rca 151 | 152 | {% endif %} 153 | icon_color: >- 154 | {% if is_state('input_select.audio_z5500_last_source', 'optical') 155 | %} 156 | 157 | disabled 158 | 159 | {% elif is_state('input_select.audio_z5500_last_source', 'stereo') 160 | %} 161 | 162 | green 163 | 164 | {% else %} 165 | 166 | grey 167 | 168 | {% endif %} 169 | entity: script.z5500_direct 170 | tap_action: 171 | action: toggle 172 | - type: template 173 | icon: >- 174 | {% if is_state('input_select.audio_z5500_last_source', 'optical') 175 | %} mdi:toslink {% elif 176 | is_state('input_select.audio_z5500_last_source', 'stereo') %} 177 | mdi:toslink {% else %} mdi:toslink {% endif %} 178 | icon_color: >- 179 | {% if is_state('input_select.audio_z5500_last_source', 'optical') 180 | %} green {% elif is_state('input_select.audio_z5500_last_source', 181 | 'stereo') %} disabled {% else %} grey {% endif %} 182 | entity: script.z5500_optical 183 | tap_action: 184 | action: toggle 185 | - type: template 186 | icon: mdi:volume-plus 187 | entity: script.audio_z5500_volume_up 188 | tap_action: 189 | action: toggle 190 | - type: template 191 | icon: mdi:volume-minus 192 | entity: script.audio_z5500_volume_down 193 | tap_action: 194 | action: toggle 195 | alignment: center 196 | card_mod: 197 | style: | 198 | ha-card { 199 | --ha-card-box-shadow: none; 200 | --chip-background: none; 201 | --chip-box-shadow: none; 202 | --chip-spacing: 2px; 203 | --chip-height: 42px; 204 | : -36px; 205 | } 206 | -------------------------------------------------------------------------------- /vlinderhuis_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | horizontal: false 3 | cards: 4 | - type: custom:stack-in-card 5 | cards: 6 | - type: custom:mushroom-template-card 7 | primary: Vlinderhuis 8 | icon: mdi:greenhouse 9 | icon_color: pink 10 | layout: horizontal 11 | entity: sensor.vlinderhuis_temperatuur 12 | secondary: >- 13 | 🌡️{{states('input_number.esp_vlinderhuis_temperature_last') }}°C | 14 | {{states('input_number.esp_vlinderhuis_luchtdruk_last') | int }} hPa 15 | tap_action: 16 | action: more-info 17 | fill_container: true 18 | multiline_secondary: false 19 | card_mod: 20 | style: | 21 | ha-card { 22 | z-index: 1; 23 | } 24 | - type: custom:mini-graph-card 25 | entities: 26 | - entity: input_number.esp_vlinderhuis_temperature_last 27 | name: Temperature 28 | color_thresholds: 29 | - value: -20 30 | color: '#264CFF' 31 | - value: -15 32 | color: '#3FA0FF' 33 | - value: -10 34 | color: '#72D8FF' 35 | - value: -5 36 | color: '#AAF7FF' 37 | - value: 0 38 | color: '#E0FFFF' 39 | - value: 5 40 | color: '#FFFFBF' 41 | - value: 10 42 | color: '#FFE099' 43 | - value: 15 44 | color: '#FFAD72' 45 | - value: 20 46 | color: '#F76D5E' 47 | - value: 25 48 | color: '#D82632' 49 | - value: 30 50 | color: '#A50021' 51 | height: 50 52 | hours_to_show: 24 53 | line_width: 2 54 | font_size: 50 55 | animate: true 56 | show: 57 | name: false 58 | icon: false 59 | state: false 60 | legend: false 61 | fill: fade 62 | labels: false 63 | labels_secondary: false 64 | points: false 65 | card_mod: 66 | style: | 67 | ha-card { 68 | position: absolute !important; 69 | height: 100%; 70 | width: 100%; 71 | top: 0px; 72 | --ha-card-border-width: 0; 73 | } 74 | ha-card:after { 75 | content: ""; 76 | position: absolute; 77 | width: 100%; 78 | height: 100%; 79 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 80 | } 81 | - type: custom:vertical-stack-in-card 82 | mode: vertical 83 | cards: 84 | - type: custom:vertical-stack-in-card 85 | horizontal: true 86 | cards: 87 | - type: custom:apexcharts-card 88 | chart_type: radialBar 89 | experimental: 90 | color_threshold: true 91 | apex_config: 92 | legend: 93 | show: false 94 | chart: 95 | height: 250px 96 | plotOptions: 97 | radialBar: 98 | startAngle: -90 99 | endAngle: 90 100 | dataLabels: 101 | name: 102 | show: true 103 | offsetY: 35 104 | value: 105 | show: true 106 | offsetY: -25 107 | total: 108 | show: true 109 | label: Batterij 110 | formatter: | 111 | EVAL:(w) => { 112 | return w.globals.seriesTotals + '%'; 113 | } 114 | hollow: 115 | size: 45% 116 | imageWidth: 70 117 | imageHeight: 70 118 | imageOffsetY: -40 119 | imageClipped: false 120 | track: 121 | show: true 122 | strokeWidth: 175% 123 | dropShadow: 124 | enabled: true 125 | top: 2 126 | left: 0 127 | blur: 4 128 | opacity: 0.15 129 | stroke: 130 | dashArray: 5 131 | lineCap: butt 132 | series: 133 | - entity: input_number.esp_vlinderhuis_battery_percentage_last 134 | show: 135 | header_color_threshold: true 136 | color_threshold: 137 | - color: '#B20000' 138 | value: 10 139 | - color: '#FF9912' 140 | value: 15 141 | - color: '#FFFF00' 142 | value: 25 143 | - color: '#98FB98' 144 | value: 60 145 | - color: '#008C23' 146 | value: 100 147 | - type: custom:mushroom-chips-card 148 | chips: 149 | - type: template 150 | icon: |- 151 | {% if is_state(entity, 'on') %} 152 | mdi:update 153 | {% else %} 154 | mdi:update 155 | {% endif %} 156 | icon_color: |2- 157 | {% if is_state(entity, 'on') %} 158 | green 159 | {% else %} 160 | disabled 161 | {% endif %} 162 | entity: input_boolean.esp_vlinderhuis_ota_update 163 | tap_action: 164 | action: more-info 165 | - type: template 166 | content: '{{states(''input_number.esp_vlinderhuis_battery_voltage_last'') }} v' 167 | entity: input_number.esp_vlinderhuis_battery_voltage_last 168 | icon: |2 169 | {% set bl = states('input_number.esp_vlinderhuis_battery_percentage_last') | int %} 170 | {% if bl < 10 %} mdi:battery-outline 171 | {% elif bl < 20 %} mdi:battery-10 172 | {% elif bl < 30 %} mdi:battery-20 173 | {% elif bl < 40 %} mdi:battery-30 174 | {% elif bl < 50 %} mdi:battery-40 175 | {% elif bl < 60 %} mdi:battery-50 176 | {% elif bl < 70 %} mdi:battery-60 177 | {% elif bl < 80 %} mdi:battery-70 178 | {% elif bl < 90 %} mdi:battery-80 179 | {% elif bl < 100 %} mdi:battery-90 180 | {% elif bl == 100 %} mdi:battery 181 | {% else %} mdi:battery-unknown 182 | {% endif %} 183 | icon_color: |2- 184 | {% set bl = states('input_number.esp_vlinderhuis_battery_percentage_last') | int %} 185 | {% if bl < 10 %} red 186 | {% elif bl < 20 %} red 187 | {% elif bl < 30 %} red 188 | {% elif bl < 40 %} orange 189 | {% elif bl < 50 %} orange 190 | {% elif bl < 60 %} green 191 | {% elif bl < 70 %} green 192 | {% elif bl < 80 %} green 193 | {% elif bl < 90 %} green 194 | {% elif bl < 100 %} green 195 | {% elif bl == 100 %} green 196 | {% else %} grey 197 | {% endif %} 198 | tap_action: 199 | action: more-info 200 | alignment: end 201 | card_mod: 202 | style: | 203 | ha-card { 204 | --ha-card-box-shadow: none; 205 | --chip-background: none; 206 | --chip-box-shadow: none; 207 | --chip-spacing: 0; 208 | : -36px; 209 | } 210 | -------------------------------------------------------------------------------- /slaapkamer_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Slaapkamer 💑 7 | icon: hue:room-bedroom 8 | icon_color: teal 9 | layout: horizontal 10 | entity: light.masterbedroom_group_hue 11 | secondary: >- 12 | 🌡️{{states('sensor.masterbedroom_temperature') }}°C | 13 | 💧{{states('sensor.masterbedroom_humidity') | int }}% | 14 | 💡{{states('sensor.masterbedroom_illuminance') | int }}lux 15 | tap_action: 16 | action: navigate 17 | navigation_path: /dashboard-subviews/slaapkamer 18 | badge_icon: | 19 | {% if is_state('binary_sensor.masterbedroom_occupancy', 'on') %} 20 | mdi:human-greeting 21 | {% else %} 22 | mdi:motion-sensor-off 23 | {% endif %} 24 | badge_color: | 25 | {% if is_state('binary_sensor.masterbedroom_occupancy', 'on') %} 26 | green 27 | {% else %} 28 | disabled 29 | {% endif %} 30 | fill_container: true 31 | multiline_secondary: false 32 | card_mod: 33 | style: | 34 | ha-card { 35 | z-index: 1; 36 | } 37 | - type: custom:mini-graph-card 38 | entities: 39 | - entity: sensor.masterbedroom_temperature 40 | name: Temperature 41 | - entity: sensor.masterbedroom_humidity 42 | name: Humidity 43 | color: blue 44 | y_axis: secondary 45 | color_thresholds: 46 | - value: -20 47 | color: "#264CFF" 48 | - value: -15 49 | color: "#3FA0FF" 50 | - value: -10 51 | color: "#72D8FF" 52 | - value: -5 53 | color: "#AAF7FF" 54 | - value: 0 55 | color: "#E0FFFF" 56 | - value: 5 57 | color: "#FFFFBF" 58 | - value: 10 59 | color: "#FFE099" 60 | - value: 15 61 | color: "#FFAD72" 62 | - value: 20 63 | color: "#F76D5E" 64 | - value: 25 65 | color: "#D82632" 66 | - value: 30 67 | color: "#A50021" 68 | height: 50 69 | hours_to_show: 24 70 | line_width: 2 71 | font_size: 50 72 | animate: true 73 | show: 74 | name: false 75 | icon: false 76 | state: false 77 | legend: false 78 | fill: fade 79 | labels: false 80 | labels_secondary: false 81 | points: false 82 | card_mod: 83 | style: | 84 | ha-card { 85 | position: absolute !important; 86 | height: 100%; 87 | width: 100%; 88 | top: 0px; 89 | --ha-card-border-width: 0; 90 | } 91 | ha-card:after { 92 | content: ""; 93 | position: absolute; 94 | width: 100%; 95 | height: 100%; 96 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 97 | } 98 | - type: custom:vertical-stack-in-card 99 | mode: vertical 100 | cards: 101 | - type: custom:vertical-stack-in-card 102 | horizontal: true 103 | cards: 104 | - type: custom:mushroom-template-card 105 | entity: light.masterbedroom_group_hue 106 | layout: vertical 107 | icon: |- 108 | {% if is_state('light.masterbedroom_group_hue_group_hue', 'on') %} 109 | hue:ceiling-fugato-three 110 | {% else %} 111 | hue:ceiling-fugato-three 112 | {% endif %} 113 | icon_color: |- 114 | {% if is_state('light.masterbedroom_group_hue', 'on') %} 115 | yellow 116 | {% endif %} 117 | - type: custom:mushroom-template-card 118 | entity: light.masterbedroom_ledstrip_group 119 | layout: vertical 120 | icon: |- 121 | {% if is_state('light.masterbedroom_ledstrip_group', 'on') %} 122 | mdi:bed-king-outline 123 | {% else %} 124 | mdi:bed-king-outline 125 | {% endif %} 126 | icon_color: |- 127 | {% if is_state('light.masterbedroom_ledstrip_group', 'on') %} 128 | yellow 129 | {% endif %} 130 | - type: custom:vertical-stack-in-card 131 | horizontal: true 132 | cards: 133 | - type: custom:mushroom-template-card 134 | entity: light.shellyrgbw_masterbedroombed_kast 135 | layout: vertical 136 | icon: |- 137 | {% if is_state('light.shellyrgbw_masterbedroombed_kast', 'on') %} 138 | mdi:wardrobe-outline 139 | {% else %} 140 | mdi:wardrobe-outline 141 | {% endif %} 142 | icon_color: |- 143 | {% if is_state('light.shellyrgbw_masterbedroombed_kast', 'on') %} 144 | yellow 145 | {% endif %} 146 | - type: custom:mushroom-template-card 147 | entity: switch.slaapkamer_fan_plug_bw 148 | layout: vertical 149 | use_light_color: true 150 | icon: |- 151 | {% if is_state('switch.slaapkamer_fan_plug_bw', 'on') %} 152 | mdi:fan 153 | {% else %} 154 | mdi:fan 155 | {% endif %} 156 | icon_color: |- 157 | {% if is_state('switch.slaapkamer_fan_plug_bw', 'on') %} 158 | green 159 | {% endif %} 160 | - type: custom:mushroom-chips-card 161 | chips: 162 | - type: template 163 | icon: mdi:clock-digital 164 | icon_color: blue 165 | entity: input_datetime.masterbedroom_wakeuplight_time 166 | tap_action: 167 | action: more-info 168 | - type: template 169 | icon: mdi:motion-sensor 170 | icon_color: |2- 171 | {% if is_state(entity, 'on') %} 172 | blue 173 | {% else %} 174 | disabled 175 | {% endif %} 176 | entity: binary_sensor.masterbedroom_occupancy 177 | tap_action: 178 | action: more-info 179 | - type: template 180 | icon: |- 181 | {% if is_state(entity, 'off') %} 182 | mdi:window-closed 183 | {% else %} 184 | mdi:window-open 185 | {% endif %} 186 | icon_color: |2- 187 | {% if is_state(entity, 'off') %} 188 | green 189 | {% else %} 190 | red 191 | {% endif %} 192 | entity: binary_sensor.masterbedroom_raam_aqara_contact 193 | tap_action: 194 | action: more-info 195 | alignment: end 196 | card_mod: 197 | style: 198 | mushroom-template-chip: | 199 | ha-card { 200 | --ha-card-box-shadow: none; 201 | --chip-background: none; 202 | --chip-box-shadow: none; 203 | --chip-spacing: 0; 204 | : -36px; 205 | } 206 | mushroom-template-chip:nth-child(1)$: | 207 | {% if is_state('binary_sensor.masterbedroom_occupancy','on') %} 208 | ha-state-icon { 209 | animation: clip 2s linear infinite; 210 | } 211 | @keyframes clip { 212 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 213 | } 214 | .shape { 215 | --shape-animation: motion 2s linear infinite; 216 | } 217 | @keyframes motion { 218 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 219 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 220 | } 221 | } 222 | {% else %} 223 | 224 | {% endif %} 225 | } 226 | -------------------------------------------------------------------------------- /trapkast_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Trapkast 7 | icon: hue:room-stairs 8 | icon_color: teal 9 | layout: horizontal 10 | entity: light.trapkast_hue 11 | secondary: "{{states('sensor.trapkast_temperature') }}°C" 12 | tap_action: 13 | action: navigate 14 | navigation_path: /dashboard-subviews/trapkast 15 | badge_icon: | 16 | {% if is_state('binary_sensor.trapkast_occupancy', 'on') %} 17 | mdi:human-greeting 18 | {% else %} 19 | mdi:motion-sensor-off 20 | {% endif %} 21 | badge_color: | 22 | {% if is_state('binary_sensor.trapkast_occupancy', 'on') %} 23 | green 24 | {% else %} 25 | disabled 26 | {% endif %} 27 | fill_container: true 28 | multiline_secondary: false 29 | card_mod: 30 | style: | 31 | ha-card { 32 | z-index: 1; 33 | } 34 | - type: custom:mini-graph-card 35 | entities: 36 | - entity: sensor.trapkast_temperature 37 | name: Temperature 38 | color_thresholds: 39 | - value: -20 40 | color: "#264CFF" 41 | - value: -15 42 | color: "#3FA0FF" 43 | - value: -10 44 | color: "#72D8FF" 45 | - value: -5 46 | color: "#AAF7FF" 47 | - value: 0 48 | color: "#E0FFFF" 49 | - value: 5 50 | color: "#FFFFBF" 51 | - value: 10 52 | color: "#FFE099" 53 | - value: 15 54 | color: "#FFAD72" 55 | - value: 20 56 | color: "#F76D5E" 57 | - value: 25 58 | color: "#D82632" 59 | - value: 30 60 | color: "#A50021" 61 | height: 50 62 | hours_to_show: 24 63 | line_width: 2 64 | font_size: 50 65 | animate: true 66 | show: 67 | name: false 68 | icon: false 69 | state: false 70 | legend: false 71 | fill: fade 72 | labels: false 73 | labels_secondary: false 74 | points: false 75 | card_mod: 76 | style: | 77 | ha-card { 78 | position: absolute !important; 79 | height: 100%; 80 | width: 100%; 81 | top: 0px; 82 | --ha-card-border-width: 0; 83 | } 84 | ha-card:after { 85 | content: ""; 86 | position: absolute; 87 | width: 100%; 88 | height: 100%; 89 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 90 | } 91 | - type: custom:vertical-stack-in-card 92 | mode: vertical 93 | cards: 94 | - type: custom:vertical-stack-in-card 95 | horizontal: true 96 | cards: 97 | - type: custom:mushroom-template-card 98 | entity: light.trapkast_hue 99 | layout: vertical 100 | icon: |- 101 | {% if is_state('light.trapkast_hue', 'on') %} 102 | hue:single-spot 103 | {% else %} 104 | hue:single-spot 105 | {% endif %} 106 | icon_color: |- 107 | {% if is_state('light.trapkast_hue', 'on') %} 108 | yellow 109 | {% endif %} 110 | tap_action: 111 | action: toggle 112 | double_tap_action: 113 | action: call-service 114 | service: input_boolean.toggle 115 | target: 116 | entity_id: input_boolean.node_red_trapkast_automations 117 | data: {} 118 | card_mod: 119 | style: 120 | mushroom-shape-icon$: > 121 | {% if is_state('input_boolean.node_red_trapkast_automations', 122 | 'on') %} 123 | 124 | .shape { 125 | --shape-animation: ping 3s infinite; 126 | } 127 | 128 | @keyframes ping { 129 | 0% { 130 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 131 | } 132 | 133 | 100% { 134 | box-shadow: 0 0 5px 5px transparent; 135 | } 136 | } 137 | 138 | {% elif 139 | is_state('input_boolean.node_red_trapkast_automations', 'off') 140 | %} 141 | 142 | {% endif %} 143 | - type: custom:mushroom-chips-card 144 | chips: 145 | - type: template 146 | icon: mdi:motion-sensor 147 | icon_color: |2- 148 | {% if is_state(entity, 'on') %} 149 | blue 150 | {% else %} 151 | disabled 152 | {% endif %} 153 | entity: binary_sensor.trapkast_occupancy 154 | tap_action: 155 | action: more-info 156 | - type: template 157 | icon: mdi:water-pump 158 | icon_color: |2- 159 | {% if states('sensor.watermeter_flow') | float > 0 %} 160 | blue 161 | {% else %} 162 | disabled 163 | {% endif %} 164 | entity: sensor.watermeter_flow 165 | tap_action: 166 | action: more-info 167 | - type: template 168 | icon: mdi:heat-pump-outline 169 | icon_color: |2- 170 | {% if is_state(entity, 'on') %} 171 | red 172 | {% else %} 173 | disabled 174 | {% endif %} 175 | entity: switch.vloerverwarming_pomp_plug_tuya 176 | tap_action: 177 | action: more-info 178 | - type: template 179 | icon: |- 180 | {% if is_state(entity, 'unavailable') %} 181 | mdi:car-off 182 | {% else %} 183 | mdi:car-electric 184 | {% endif %} 185 | icon_color: |2- 186 | {% if is_state(entity, 'unavailable') %} 187 | disabled 188 | {% else %} 189 | green 190 | {% endif %} 191 | entity: sensor.esp_remote_car_rc_car_wifi_signal_db 192 | tap_action: 193 | action: navigate 194 | navigation_path: /dashboard-subviews/vehicles 195 | alignment: end 196 | card_mod: 197 | style: 198 | mushroom-template-chip: | 199 | ha-card { 200 | --ha-card-box-shadow: none; 201 | --ha-card-border-width: 0; 202 | --chip-background: none; 203 | --chip-box-shadow: none; 204 | --chip-spacing: 0; 205 | : -36px; 206 | } 207 | mushroom-template-chip:nth-child(1)$: | 208 | {% if is_state('binary_sensor.trapkast_occupancy','on') %} 209 | ha-state-icon { 210 | animation: clip 2s linear infinite; 211 | } 212 | @keyframes clip { 213 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 214 | } 215 | .shape { 216 | --shape-animation: motion 2s linear infinite; 217 | } 218 | @keyframes motion { 219 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 220 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 221 | } 222 | } 223 | {% else %} 224 | 225 | {% endif %} 226 | } 227 | mushroom-template-chip:nth-child(2)$: | 228 | {% if states('sensor.watermeter_flow') | float > 0 %} 229 | ha-state-icon { 230 | animation: drip 2s infinite; 231 | } @keyframes drip { 232 | 0%, 100% { clip-path: inset(0 0 0 0); } 233 | 15%, 85% { clip-path: polygon(0 0, 100% 0, 100% 57%, 64% 57%, 64% 100%, 0 100%); } 234 | } 235 | } 236 | {% else %} 237 | 238 | {% endif %} 239 | } 240 | -------------------------------------------------------------------------------- /garage_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Garage 7 | icon: mdi:garage 8 | icon_color: white 9 | layout: horizontal 10 | entity: light.garage_group_hue 11 | secondary: >- 12 | {{states('sensor.garage_motion_hue_temperature') }}°C | 13 | {{states('sensor.garage_motion_hue_illuminance_lux') | int }}lux 14 | tap_action: 15 | action: navigate 16 | navigation_path: /dashboard-subviews/garage 17 | badge_icon: | 18 | {% if is_state('binary_sensor.garage_motion_hue_occupancy', 'on') %} 19 | mdi:human-greeting 20 | {% else %} 21 | mdi:motion-sensor-off 22 | {% endif %} 23 | badge_color: | 24 | {% if is_state('binary_sensor.garage_motion_hue_occupancy', 'on') %} 25 | green 26 | {% else %} 27 | disabled 28 | {% endif %} 29 | fill_container: true 30 | multiline_secondary: false 31 | card_mod: 32 | style: | 33 | ha-card { 34 | z-index: 1; 35 | } 36 | - type: custom:mini-graph-card 37 | entities: 38 | - entity: sensor.garage_motion_hue_temperature 39 | name: Temperature 40 | color_thresholds: 41 | - value: -20 42 | color: "#264CFF" 43 | - value: -15 44 | color: "#3FA0FF" 45 | - value: -10 46 | color: "#72D8FF" 47 | - value: -5 48 | color: "#AAF7FF" 49 | - value: 0 50 | color: "#E0FFFF" 51 | - value: 5 52 | color: "#FFFFBF" 53 | - value: 10 54 | color: "#FFE099" 55 | - value: 15 56 | color: "#FFAD72" 57 | - value: 20 58 | color: "#F76D5E" 59 | - value: 25 60 | color: "#D82632" 61 | - value: 30 62 | color: "#A50021" 63 | height: 50 64 | hours_to_show: 24 65 | line_width: 2 66 | font_size: 50 67 | animate: true 68 | show: 69 | name: false 70 | icon: false 71 | state: false 72 | legend: false 73 | fill: fade 74 | labels: false 75 | labels_secondary: false 76 | points: false 77 | card_mod: 78 | style: | 79 | ha-card { 80 | position: absolute !important; 81 | height: 100%; 82 | width: 100%; 83 | top: 0px; 84 | --ha-card-border-width: 0; 85 | } 86 | ha-card:after { 87 | content: ""; 88 | position: absolute; 89 | width: 100%; 90 | height: 100%; 91 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 92 | } 93 | - type: custom:vertical-stack-in-card 94 | mode: vertical 95 | cards: 96 | - type: custom:vertical-stack-in-card 97 | horizontal: true 98 | cards: 99 | - type: custom:mushroom-template-card 100 | entity: light.garage_group_hue 101 | layout: vertical 102 | icon: |- 103 | {% if is_state('light.garage_group_hue', 'on') %} 104 | hue:single-spot 105 | {% else %} 106 | hue:single-spot 107 | {% endif %} 108 | icon_color: |- 109 | {% if is_state('light.garage_group_hue', 'on') %} 110 | yellow 111 | {% endif %} 112 | tap_action: 113 | action: toggle 114 | double_tap_action: 115 | action: call-service 116 | service: input_boolean.toggle 117 | target: 118 | entity_id: input_boolean.node_red_garage_automations 119 | data: {} 120 | card_mod: 121 | style: 122 | mushroom-shape-icon$: > 123 | {% if is_state('input_boolean.node_red_garage_automations', 124 | 'on') %} 125 | 126 | .shape { 127 | --shape-animation: ping 3s infinite; 128 | } 129 | 130 | @keyframes ping { 131 | 0% { 132 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 133 | } 134 | 135 | 100% { 136 | box-shadow: 0 0 5px 5px transparent; 137 | } 138 | } 139 | 140 | {% elif is_state('input_boolean.node_red_garage_automations', 141 | 'off') %} 142 | 143 | {% endif %} 144 | - type: custom:mushroom-template-card 145 | entity: light.garagekeuken 146 | layout: vertical 147 | use_light_color: true 148 | icon: |- 149 | {% if is_state('light.garagekeuken', 'on') %} 150 | mdi:countertop 151 | {% else %} 152 | mdi:countertop 153 | {% endif %} 154 | icon_color: |- 155 | {% if is_state('light.garagekeuken', 'on') %} 156 | yellow 157 | {% endif %} 158 | - type: custom:mushroom-chips-card 159 | chips: 160 | - type: template 161 | icon: mdi:motion-sensor 162 | icon_color: |2- 163 | {% if is_state(entity, 'on') %} 164 | blue 165 | {% else %} 166 | grey 167 | {% endif %} 168 | entity: binary_sensor.garage_motion_hue_occupancy 169 | tap_action: 170 | action: more-info 171 | - type: entity 172 | entity: sensor.ikea_vindriktning_garage_pm25 173 | icon_color: blue 174 | - type: template 175 | icon: |- 176 | {% if is_state(entity, 'on') %} 177 | mdi:bicycle-electric 178 | {% else %} 179 | mdi:bicycle-electric 180 | {% endif %} 181 | icon_color: |2- 182 | {% if is_state(entity, 'on') %} 183 | green 184 | {% else %} 185 | grey 186 | {% endif %} 187 | entity: switch.garage_fietsen_plug_bw 188 | tap_action: 189 | action: more-info 190 | - type: template 191 | icon: |- 192 | {% if is_state(entity, 'off') %} 193 | mdi:garage-variant-lock 194 | {% else %} 195 | mdi:garage-open-variant 196 | {% endif %} 197 | icon_color: |2- 198 | {% if is_state(entity, 'off') %} 199 | green 200 | {% else %} 201 | red 202 | {% endif %} 203 | entity: binary_sensor.garage_garagedeur_aqara_contact 204 | tap_action: 205 | action: more-info 206 | - type: template 207 | icon: |- 208 | {% if is_state(entity, 'off') %} 209 | mdi:door-closed-lock 210 | {% else %} 211 | mdi:door-open 212 | {% endif %} 213 | icon_color: |2- 214 | {% if is_state(entity, 'off') %} 215 | green 216 | {% else %} 217 | red 218 | {% endif %} 219 | entity: binary_sensor.garage_tuindeur_aqara_contact 220 | tap_action: 221 | action: more-info 222 | alignment: end 223 | card_mod: 224 | style: | 225 | ha-card { 226 | --ha-card-box-shadow: none; 227 | --chip-background: none; 228 | --chip-box-shadow: none; 229 | --chip-spacing: 0; 230 | : -36px; 231 | } 232 | mushroom-template-chip:nth-child(1)$: | 233 | {% if is_state('binary_sensor.garage_motion_hue_occupancy','on') %} 234 | ha-state-icon { 235 | animation: clip 2s linear infinite; 236 | } 237 | @keyframes clip { 238 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 239 | } 240 | .shape { 241 | --shape-animation: motion 2s linear infinite; 242 | } 243 | @keyframes motion { 244 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 245 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 246 | } 247 | } 248 | {% else %} 249 | 250 | {% endif %} 251 | } 252 | -------------------------------------------------------------------------------- /badkamer_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Badkamer 🚿 7 | secondary: >- 8 | 🌡️{{states('sensor.badkamer_temperatuur_aqara_temperature') }}°C | 9 | 💧{{states('sensor.badkamer_temperatuur_aqara_humidity') | int }}% 10 | tap_action: 11 | action: navigate 12 | navigation_path: /dashboard-subviews/badkamer 13 | entity: light.bathroom 14 | icon: mdi:shower-head 15 | icon_color: blue 16 | fill_container: true 17 | layout: horizontal 18 | multiline_secondary: false 19 | card_mod: 20 | style: | 21 | ha-card { 22 | z-index: 1; 23 | } 24 | - type: custom:mini-graph-card 25 | entities: 26 | - entity: sensor.badkamer_temperatuur_aqara_temperature 27 | name: Temperature 28 | - entity: sensor.badkamer_temperatuur_aqara_humidity 29 | name: Humidity 30 | color: blue 31 | y_axis: secondary 32 | color_thresholds: 33 | - value: -20 34 | color: "#264CFF" 35 | - value: -15 36 | color: "#3FA0FF" 37 | - value: -10 38 | color: "#72D8FF" 39 | - value: -5 40 | color: "#AAF7FF" 41 | - value: 0 42 | color: "#E0FFFF" 43 | - value: 5 44 | color: "#FFFFBF" 45 | - value: 10 46 | color: "#FFE099" 47 | - value: 15 48 | color: "#FFAD72" 49 | - value: 20 50 | color: "#F76D5E" 51 | - value: 25 52 | color: "#D82632" 53 | - value: 30 54 | color: "#A50021" 55 | height: 50 56 | hours_to_show: 24 57 | line_width: 2 58 | font_size: 50 59 | animate: true 60 | show: 61 | name: false 62 | icon: false 63 | state: false 64 | legend: false 65 | fill: fade 66 | labels: false 67 | labels_secondary: false 68 | points: false 69 | card_mod: 70 | style: | 71 | ha-card { 72 | position: absolute !important; 73 | height: 100%; 74 | width: 100%; 75 | top: 0px; 76 | --ha-card-border-width: 0; 77 | } 78 | ha-card:after { 79 | content: ""; 80 | position: absolute; 81 | width: 100%; 82 | height: 100%; 83 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 84 | } 85 | - type: custom:vertical-stack-in-card 86 | horizontal: true 87 | cards: 88 | - type: custom:mushroom-template-card 89 | entity: switch.badkamer_fan_sonoff 90 | layout: vertical 91 | use_light_color: true 92 | icon: |- 93 | {% if is_state('switch.badkamer_fan_sonoff', 'on') %} 94 | mdi:fan 95 | {% else %} 96 | mdi:fan 97 | {% endif %} 98 | icon_color: |- 99 | {% if is_state('switch.badkamer_fan_sonoff', 'on') %} 100 | green 101 | {% endif %} 102 | tap_action: 103 | action: more-info 104 | double_tap_action: 105 | action: call-service 106 | service: input_boolean.toggle 107 | target: 108 | entity_id: input_boolean.node_red_badkamer_automations 109 | data: {} 110 | card_mod: 111 | style: 112 | mushroom-shape-icon$: > 113 | {% if is_state('input_boolean.node_red_badkamer_automations', 114 | 'on') %} 115 | 116 | .shape { 117 | --shape-animation: ping 3s infinite; 118 | } 119 | 120 | @keyframes ping { 121 | 0% { 122 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 123 | } 124 | 125 | 100% { 126 | box-shadow: 0 0 5px 5px transparent; 127 | } 128 | } 129 | 130 | {% elif is_state('input_boolean.node_red_badkamer_automations', 131 | 'off') %} 132 | 133 | {% endif %} 134 | - type: custom:mushroom-chips-card 135 | chips: 136 | - type: template 137 | icon: mdi:toothbrush-electric 138 | icon_color: |2- 139 | {% if is_state(entity, 'on') %} 140 | green 141 | {% else %} 142 | grey 143 | {% endif %} 144 | entity: switch.badkamer_tandenborstels_sonoff 145 | tap_action: 146 | action: more-info 147 | - type: template 148 | icon: mdi:fan 149 | icon_color: |2- 150 | {% if is_state(entity, 'on') %} 151 | green 152 | {% else %} 153 | grey 154 | {% endif %} 155 | entity: switch.badkamer_fan_sonoff 156 | tap_action: 157 | action: more-info 158 | - type: template 159 | icon: mdi:shower-head 160 | icon_color: |2- 161 | {% if is_state(entity, 'on') %} 162 | blue 163 | {% else %} 164 | grey 165 | {% endif %} 166 | entity: binary_sensor.hot_tap_water 167 | tap_action: 168 | action: more-info 169 | - type: template 170 | icon: |- 171 | {% if is_state(entity, 'off') %} 172 | mdi:window-closed 173 | {% else %} 174 | mdi:window-open 175 | {% endif %} 176 | icon_color: |2- 177 | {% if is_state(entity, 'off') %} 178 | green 179 | {% else %} 180 | red 181 | {% endif %} 182 | entity: binary_sensor.badkamer_raam_aqara_contact 183 | tap_action: 184 | action: more-info 185 | alignment: end 186 | card_mod: 187 | style: 188 | mushroom-template-chip: | 189 | ha-card { 190 | --ha-card-box-shadow: none; 191 | --chip-background: none; 192 | --chip-box-shadow: none; 193 | --chip-spacing: 0; 194 | : -36px; 195 | } 196 | mushroom-template-chip:nth-child(1)$: | 197 | {% if is_state('switch.badkamer_tandenborstels_sonoff','on') %} 198 | ha-state-icon { 199 | animation: charge 1s linear infinite; 200 | } 201 | @keyframes charge { 202 | 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% { transform: translate(0, 0); } 203 | 5% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 204 | 15% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 205 | 25% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 206 | 35% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 207 | 45% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 208 | 55% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 209 | 65% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 210 | 75% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 211 | 85% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 212 | 95% { transform: translate({{ range(-10, 10) | random / 10 }}px, {{ range(-10, 10) | random / 10 }}px); } 213 | } 214 | } 215 | {% else %} 216 | 217 | {% endif %} 218 | } 219 | mushroom-template-chip:nth-child(2)$: | 220 | {% if is_state('switch.badkamer_fan_sonoff','on') %} 221 | ha-state-icon { 222 | animation: rotation 2s linear infinite; 223 | } 224 | @keyframes rotation { 225 | 0% { 226 | transform: rotate(0deg); 227 | } 228 | 100% { 229 | transform: rotate(360deg); 230 | } 231 | } 232 | } 233 | {% else %} 234 | 235 | {% endif %} 236 | } 237 | mushroom-template-chip:nth-child(3)$: | 238 | {% if is_state('binary_sensor.hot_tap_water','on') %} 239 | ha-state-icon { 240 | animation: clip 0.7s ease-out infinite; 241 | } 242 | @keyframes clip { 243 | 0% {clip-path: inset(0 0 45% 0); } 244 | 100% { clip-path: inset(0 0 0 0); } 245 | } 246 | } 247 | {% else %} 248 | 249 | {% endif %} 250 | } 251 | -------------------------------------------------------------------------------- /zolderkamer_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Zolderkamer 7 | icon: hue:room-office 8 | icon_color: teal 9 | layout: horizontal 10 | entity: light.zolderkamer_hue 11 | secondary: >- 12 | 🌡️{{states('sensor.esp_3dprinter_esp_3dprinter_temperature') }}°C | 13 | 💧{{states('sensor.esp_3dprinter_esp_3dprinter_humidity') | int }}% | 14 | 💡{{states('sensor.esp_3dprinter_esp_3dprinter_illuminance') | int 15 | }}lux 16 | tap_action: 17 | action: navigate 18 | navigation_path: /dashboard-subviews/zolderkamer 19 | fill_container: true 20 | multiline_secondary: false 21 | card_mod: 22 | style: | 23 | ha-card { 24 | z-index: 1; 25 | } 26 | - type: custom:mini-graph-card 27 | entities: 28 | - entity: sensor.esp_3dprinter_esp_3dprinter_temperature 29 | name: Temperature 30 | - entity: sensor.esp_3dprinter_esp_3dprinter_humidity 31 | name: Humidity 32 | color: blue 33 | y_axis: secondary 34 | color_thresholds: 35 | - value: -20 36 | color: "#264CFF" 37 | - value: -15 38 | color: "#3FA0FF" 39 | - value: -10 40 | color: "#72D8FF" 41 | - value: -5 42 | color: "#AAF7FF" 43 | - value: 0 44 | color: "#E0FFFF" 45 | - value: 5 46 | color: "#FFFFBF" 47 | - value: 10 48 | color: "#FFE099" 49 | - value: 15 50 | color: "#FFAD72" 51 | - value: 20 52 | color: "#F76D5E" 53 | - value: 25 54 | color: "#D82632" 55 | - value: 30 56 | color: "#A50021" 57 | height: 50 58 | hours_to_show: 24 59 | line_width: 2 60 | font_size: 50 61 | animate: true 62 | show: 63 | name: false 64 | icon: false 65 | state: false 66 | legend: false 67 | fill: fade 68 | labels: false 69 | labels_secondary: false 70 | points: false 71 | card_mod: 72 | style: | 73 | ha-card { 74 | position: absolute !important; 75 | height: 100%; 76 | width: 100%; 77 | top: 0px; 78 | --ha-card-border-width: 0; 79 | } 80 | ha-card:after { 81 | content: ""; 82 | position: absolute; 83 | width: 100%; 84 | height: 100%; 85 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 86 | } 87 | - type: custom:vertical-stack-in-card 88 | mode: vertical 89 | cards: 90 | - type: custom:vertical-stack-in-card 91 | horizontal: true 92 | cards: 93 | - type: custom:mushroom-template-card 94 | entity: light.zolderkamer_hue 95 | layout: vertical 96 | icon: |- 97 | {% if is_state('light.zolderkamer_hue', 'on') %} 98 | hue:pendant-round 99 | {% else %} 100 | hue:pendant-round 101 | {% endif %} 102 | icon_color: |- 103 | {% if is_state('light.zolderkamer_hue', 'on') %} 104 | yellow 105 | {% endif %} 106 | - type: custom:mushroom-template-card 107 | entity: light.wled_monitor_master 108 | layout: vertical 109 | use_light_color: true 110 | icon: |- 111 | {% if is_state('light.wled_monitor', 'on') %} 112 | mdi:television-ambient-light 113 | {% else %} 114 | mdi:television-ambient-light 115 | {% endif %} 116 | icon_color: |- 117 | {% if is_state('light.wled_monitor', 'on') %} 118 | yellow 119 | {% endif %} 120 | - type: custom:vertical-stack-in-card 121 | horizontal: true 122 | cards: 123 | - type: custom:mushroom-template-card 124 | entity: light.wled_lines 125 | layout: vertical 126 | use_light_color: true 127 | icon: |- 128 | {% if is_state('light.wled_lines', 'on') %} 129 | mdi:chart-timeline-variant 130 | {% else %} 131 | mdi:chart-timeline-variant 132 | {% endif %} 133 | icon_color: |- 134 | {% if is_state('light.wled_lines', 'on') %} 135 | yellow 136 | {% endif %} 137 | - type: custom:mushroom-template-card 138 | entity: light.wled_zolderkamer_raam 139 | layout: vertical 140 | use_light_color: true 141 | icon: |- 142 | {% if is_state('light.wled_zolderkamer_raam', 'on') %} 143 | mdi:pine-tree-box 144 | {% else %} 145 | mdi:pine-tree-box 146 | {% endif %} 147 | icon_color: |- 148 | {% if is_state('light.wled_zolderkamer_raam', 'on') %} 149 | yellow 150 | {% endif %} 151 | - type: custom:vertical-stack-in-card 152 | horizontal: true 153 | cards: 154 | - type: custom:mushroom-template-card 155 | entity: switch.zolderschotvoor 156 | layout: vertical 157 | use_light_color: true 158 | icon: |- 159 | {% if is_state('switch.zolderschotvoor', 'on') %} 160 | mdi:cabin-a-frame 161 | {% else %} 162 | mdi:cabin-a-frame 163 | {% endif %} 164 | icon_color: |- 165 | {% if is_state('switch.zolderschotvoor', 'on') %} 166 | yellow 167 | {% endif %} 168 | - type: custom:mushroom-template-card 169 | entity: switch.zolderschotachter 170 | layout: vertical 171 | use_light_color: true 172 | icon: |- 173 | {% if is_state('switch.zolderschotachter', 'on') %} 174 | mdi:cabin-a-frame 175 | {% else %} 176 | mdi:cabin-a-frame 177 | {% endif %} 178 | icon_color: |- 179 | {% if is_state('switch.zolderschotachter', 'on') %} 180 | yellow 181 | {% endif %} 182 | - type: custom:mushroom-chips-card 183 | chips: 184 | - type: entity 185 | entity: sensor.esp_3dprinter_3d_printer_gas_sensor 186 | icon_color: blue 187 | - type: entity 188 | entity: sensor.esp_vindriktning_zolder_pm25 189 | icon_color: blue 190 | - type: template 191 | icon: |- 192 | {% if is_state(entity, 'on') %} 193 | mdi:iron 194 | {% else %} 195 | mdi:iron 196 | {% endif %} 197 | icon_color: |2- 198 | {% if is_state(entity, 'on') %} 199 | red 200 | {% else %} 201 | disabled 202 | {% endif %} 203 | entity: switch.strijkplank 204 | tap_action: 205 | action: more-info 206 | - type: template 207 | icon: |- 208 | {% if is_state(entity, 'off') %} 209 | mdi:window-closed 210 | {% else %} 211 | mdi:window-open 212 | {% endif %} 213 | icon_color: |2- 214 | {% if is_state(entity, 'off') %} 215 | green 216 | {% else %} 217 | red 218 | {% endif %} 219 | entity: binary_sensor.zolder_kamer_raam_voor_aqara_contact 220 | tap_action: 221 | action: more-info 222 | - type: template 223 | icon: |- 224 | {% if is_state(entity, 'off') %} 225 | mdi:window-closed 226 | {% else %} 227 | mdi:window-open 228 | {% endif %} 229 | icon_color: |2- 230 | {% if is_state(entity, 'off') %} 231 | green 232 | {% else %} 233 | red 234 | {% endif %} 235 | entity: binary_sensor.zolder_kamer_raam_achter_aqara_contact 236 | tap_action: 237 | action: more-info 238 | - type: template 239 | icon: mdi:remote 240 | entity: sensor.zolderkamer_dimmer_hue_battery 241 | icon_color: |2- 242 | {% if states('sensor.zolderkamer_dimmer_hue_battery') | float < 25 %} 243 | red 244 | {% elif states('sensor.zolderkamer_dimmer_hue_battery') | float < 50 %} 245 | orange 246 | {% elif states('sensor.zolderkamer_dimmer_hue_battery') | float >= 50 %} 247 | green 248 | {% else %} 249 | disabled 250 | {% endif %} 251 | tap_action: 252 | action: more-info 253 | alignment: end 254 | card_mod: 255 | style: 256 | mushroom-template-chip: | 257 | ha-card { 258 | --ha-card-box-shadow: none; 259 | --chip-background: none; 260 | --chip-box-shadow: none; 261 | --chip-spacing: 0; 262 | : -36px; 263 | } 264 | -------------------------------------------------------------------------------- /washok_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Washok 7 | icon: mdi:washing-machine 8 | icon_color: teal 9 | layout: horizontal 10 | entity: light.washok_hue 11 | secondary: >- 12 | 🌡️{{states('sensor.washok_motion_hue_temperature') }}°C | 13 | 💡{{states('sensor.washok_motion_hue_illuminance_lux') | int }}lux | 14 | 🔌{{states('sensor.washok_elektronica_plug_bw_power') | int }}W 15 | tap_action: 16 | action: navigate 17 | navigation_path: /dashboard-subviews/washok 18 | badge_icon: | 19 | {% if is_state('binary_sensor.washok_motion_hue_occupancy', 'on') %} 20 | mdi:human-greeting 21 | {% else %} 22 | mdi:motion-sensor-off 23 | {% endif %} 24 | badge_color: | 25 | {% if is_state('binary_sensor.washok_motion_hue_occupancy', 'on') %} 26 | green 27 | {% else %} 28 | disabled 29 | {% endif %} 30 | fill_container: true 31 | multiline_secondary: false 32 | card_mod: 33 | style: | 34 | ha-card { 35 | z-index: 1; 36 | } 37 | - type: custom:mini-graph-card 38 | entities: 39 | - entity: sensor.washok_motion_hue_temperature 40 | name: Temperature 41 | color_thresholds: 42 | - value: -20 43 | color: "#264CFF" 44 | - value: -15 45 | color: "#3FA0FF" 46 | - value: -10 47 | color: "#72D8FF" 48 | - value: -5 49 | color: "#AAF7FF" 50 | - value: 0 51 | color: "#E0FFFF" 52 | - value: 5 53 | color: "#FFFFBF" 54 | - value: 10 55 | color: "#FFE099" 56 | - value: 15 57 | color: "#FFAD72" 58 | - value: 20 59 | color: "#F76D5E" 60 | - value: 25 61 | color: "#D82632" 62 | - value: 30 63 | color: "#A50021" 64 | height: 50 65 | hours_to_show: 24 66 | line_width: 2 67 | font_size: 50 68 | animate: true 69 | show: 70 | name: false 71 | icon: false 72 | state: false 73 | legend: false 74 | fill: fade 75 | labels: false 76 | labels_secondary: false 77 | points: false 78 | card_mod: 79 | style: | 80 | ha-card { 81 | position: absolute !important; 82 | height: 100%; 83 | width: 100%; 84 | top: 0px; 85 | --ha-card-border-width: 0; 86 | } 87 | ha-card:after { 88 | content: ""; 89 | position: absolute; 90 | width: 100%; 91 | height: 100%; 92 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 93 | } 94 | - type: custom:vertical-stack-in-card 95 | mode: vertical 96 | cards: 97 | - type: custom:vertical-stack-in-card 98 | horizontal: true 99 | cards: 100 | - type: custom:mushroom-template-card 101 | entity: light.washok_hue 102 | layout: vertical 103 | icon: |- 104 | {% if is_state('light.washok_hue', 'on') %} 105 | hue:bulb-sultan 106 | {% else %} 107 | hue:bulb-sultan 108 | {% endif %} 109 | icon_color: |- 110 | {% if is_state('light.washok_hue', 'on') %} 111 | yellow 112 | {% endif %} 113 | double_tap_action: 114 | action: call-service 115 | service: input_boolean.toggle 116 | target: 117 | entity_id: input_boolean.node_red_washok_automations 118 | data: {} 119 | card_mod: 120 | style: 121 | mushroom-shape-icon$: > 122 | {% if is_state('input_boolean.node_red_washok_automations', 123 | 'on') %} 124 | 125 | .shape { 126 | --shape-animation: ping 3s infinite; 127 | } 128 | 129 | @keyframes ping { 130 | 0% { 131 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 132 | } 133 | 134 | 100% { 135 | box-shadow: 0 0 5px 5px transparent; 136 | } 137 | } 138 | 139 | {% elif is_state('input_boolean.node_red_washok_automations', 140 | 'off') %} 141 | 142 | {% endif %} 143 | - type: custom:mushroom-chips-card 144 | chips: 145 | - type: template 146 | icon: mdi:washing-machine 147 | icon_color: |2- 148 | {% if is_state(entity, 'on') %} 149 | blue 150 | {% else %} 151 | grey 152 | {% endif %} 153 | entity: binary_sensor.wasmachine_status 154 | tap_action: 155 | action: more-info 156 | - type: template 157 | icon: mdi:tumble-dryer 158 | icon_color: |2- 159 | {% if is_state(entity, 'on') %} 160 | red 161 | {% else %} 162 | grey 163 | {% endif %} 164 | entity: binary_sensor.droger_status 165 | tap_action: 166 | action: more-info 167 | - type: template 168 | icon: mdi:motion-sensor 169 | icon_color: |2- 170 | {% if is_state(entity, 'on') %} 171 | blue 172 | {% else %} 173 | grey 174 | {% endif %} 175 | entity: binary_sensor.washok_motion_hue_occupancy 176 | tap_action: 177 | action: more-info 178 | - type: template 179 | icon: |- 180 | {% if is_state(entity, 'off') %} 181 | mdi:window-closed 182 | {% else %} 183 | mdi:window-open 184 | {% endif %} 185 | icon_color: |2- 186 | {% if is_state(entity, 'off') %} 187 | green 188 | {% else %} 189 | red 190 | {% endif %} 191 | entity: binary_sensor.zolder_washok_raam_aqara_contact 192 | tap_action: 193 | action: more-info 194 | alignment: end 195 | card_mod: 196 | style: 197 | mushroom-template-chip: | 198 | ha-card { 199 | --ha-card-box-shadow: none; 200 | --chip-background: none; 201 | --chip-box-shadow: none; 202 | --chip-spacing: 0; 203 | : -36px; 204 | } 205 | mushroom-template-chip:nth-child(1)$: | 206 | {% if is_state('binary_sensor.wasmachine_status','on') %} 207 | ha-state-icon { 208 | animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; 209 | transform-origin: 50% 110%; 210 | } 211 | @keyframes shake { 212 | 0%, 100% { transform: translate(0, 0) rotate(0); } 213 | 20% { transform: translate(0.4px, -0.4px) rotate(-4deg); } 214 | 40% { transform: translate(-0.4px, 0.4px) rotate(4deg); } 215 | 60% { transform: translate(0.4px, 0.4px) rotate(-4deg); } 216 | 80% { transform: translate(-0.4px, -0.4px) rotate(4deg); } 217 | } 218 | @keyframes drum { 219 | 50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); } 220 | } 221 | } 222 | {% else %} 223 | 224 | {% endif %} 225 | } 226 | mushroom-template-chip:nth-child(2)$: | 227 | {% if is_state('binary_sensor.droger_status','on') %} 228 | ha-state-icon { 229 | animation: shake 400ms ease-in-out infinite, drum 1s infinite; 230 | transform-origin: 50% 65%; 231 | } 232 | @keyframes shake { 233 | 0%, 100% { transform: rotate(4deg); } 234 | 50% { transform: rotate(-4deg); } 235 | } 236 | @keyframes drum { 237 | 50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); } 238 | } 239 | } 240 | {% else %} 241 | 242 | {% endif %} 243 | } 244 | mushroom-template-chip:nth-child(3)$: > 245 | {% if is_state('binary_sensor.washok_motion_hue_occupancy','on') 246 | %} 247 | 248 | ha-state-icon { 249 | animation: clip 2s linear infinite; 250 | } 251 | 252 | @keyframes clip { 253 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 254 | } 255 | 256 | .shape { 257 | --shape-animation: motion 2s linear infinite; 258 | } 259 | 260 | @keyframes motion { 261 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 262 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 263 | } 264 | 265 | } 266 | 267 | {% else %} 268 | 269 | 270 | {% endif %} 271 | 272 | } 273 | -------------------------------------------------------------------------------- /pomphuis_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | horizontal: false 3 | cards: 4 | - type: custom:stack-in-card 5 | cards: 6 | - type: custom:mushroom-template-card 7 | primary: Pomphuis 8 | icon: mdi:greenhouse 9 | icon_color: green 10 | layout: horizontal 11 | entity: sensor.esp_pomphuis_esp_pomphuis_temperature 12 | secondary: >- 13 | 🌡️{{states('input_number.esp_pomphuis_temperature_last') }}°C | 14 | 💧{{states('input_number.esp_pomphuis_humidity_last') | int }}% | 15 | 💡{{states('input_number.esp_pomphuis_illuminance_last') | int }} lux 16 | tap_action: 17 | action: more-info 18 | fill_container: true 19 | multiline_secondary: false 20 | card_mod: 21 | style: | 22 | ha-card { 23 | z-index: 1; 24 | } 25 | - type: custom:mini-graph-card 26 | entities: 27 | - entity: input_number.esp_pomphuis_temperature_last 28 | name: Temperature 29 | - entity: input_number.esp_pomphuis_humidity_last 30 | name: Humidity 31 | color: blue 32 | y_axis: secondary 33 | color_thresholds: 34 | - value: -20 35 | color: '#264CFF' 36 | - value: -15 37 | color: '#3FA0FF' 38 | - value: -10 39 | color: '#72D8FF' 40 | - value: -5 41 | color: '#AAF7FF' 42 | - value: 0 43 | color: '#E0FFFF' 44 | - value: 5 45 | color: '#FFFFBF' 46 | - value: 10 47 | color: '#FFE099' 48 | - value: 15 49 | color: '#FFAD72' 50 | - value: 20 51 | color: '#F76D5E' 52 | - value: 25 53 | color: '#D82632' 54 | - value: 30 55 | color: '#A50021' 56 | height: 50 57 | hours_to_show: 24 58 | line_width: 2 59 | font_size: 50 60 | animate: true 61 | show: 62 | name: false 63 | icon: false 64 | state: false 65 | legend: false 66 | fill: fade 67 | labels: false 68 | labels_secondary: false 69 | points: false 70 | card_mod: 71 | style: | 72 | ha-card { 73 | position: absolute !important; 74 | height: 100%; 75 | width: 100%; 76 | top: 0px; 77 | --ha-card-border-width: 0; 78 | } 79 | ha-card:after { 80 | content: ""; 81 | position: absolute; 82 | width: 100%; 83 | height: 100%; 84 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 85 | } 86 | - type: custom:vertical-stack-in-card 87 | mode: vertical 88 | cards: 89 | - type: custom:vertical-stack-in-card 90 | horizontal: true 91 | cards: 92 | - type: custom:mushroom-template-card 93 | entity: switch.esp_pomphuis_pomphuis_waterpomp 94 | layout: vertical 95 | use_light_color: true 96 | icon: |- 97 | {% if is_state('switch.esp_pomphuis_pomphuis_waterpomp', 'on') %} 98 | mdi:water-pump 99 | {% else %} 100 | mdi:water-pump-off 101 | {% endif %} 102 | icon_color: |- 103 | {% if is_state('switch.esp_pomphuis_pomphuis_waterpomp', 'on') %} 104 | yellow 105 | {% endif %} 106 | - type: custom:vertical-stack-in-card 107 | horizontal: false 108 | cards: 109 | - type: custom:apexcharts-card 110 | chart_type: radialBar 111 | experimental: 112 | color_threshold: true 113 | apex_config: 114 | legend: 115 | show: false 116 | chart: 117 | height: 250px 118 | plotOptions: 119 | radialBar: 120 | startAngle: -90 121 | endAngle: 90 122 | dataLabels: 123 | name: 124 | show: true 125 | offsetY: 35 126 | value: 127 | show: true 128 | offsetY: -25 129 | total: 130 | show: true 131 | label: Batterij 132 | formatter: | 133 | EVAL:(w) => { 134 | return w.globals.seriesTotals + '%'; 135 | } 136 | hollow: 137 | size: 45% 138 | imageWidth: 70 139 | imageHeight: 70 140 | imageOffsetY: -40 141 | imageClipped: false 142 | track: 143 | show: true 144 | strokeWidth: 175% 145 | dropShadow: 146 | enabled: true 147 | top: 2 148 | left: 0 149 | blur: 4 150 | opacity: 0.15 151 | stroke: 152 | dashArray: 5 153 | lineCap: butt 154 | series: 155 | - entity: input_number.esp_pomphuis_battery_percentage_last 156 | show: 157 | header_color_threshold: true 158 | color_threshold: 159 | - color: '#B20000' 160 | value: 10 161 | - color: '#FF9912' 162 | value: 15 163 | - color: '#FFFF00' 164 | value: 25 165 | - color: '#98FB98' 166 | value: 60 167 | - color: '#008C23' 168 | value: 100 169 | - type: custom:mushroom-chips-card 170 | chips: 171 | - type: template 172 | icon: |- 173 | {% if is_state(entity, 'on') %} 174 | mdi:water-pump 175 | {% else %} 176 | mdi:water-pump-off 177 | {% endif %} 178 | icon_color: |2- 179 | {% if is_state(entity, 'on') %} 180 | blue 181 | {% else %} 182 | disabled 183 | {% endif %} 184 | entity: switch.esp_pomphuis_pomphuis_waterpomp 185 | tap_action: 186 | action: more-info 187 | - type: template 188 | icon: |- 189 | {% if is_state(entity, 'on') %} 190 | mdi:update 191 | {% else %} 192 | mdi:update 193 | {% endif %} 194 | icon_color: |2- 195 | {% if is_state(entity, 'on') %} 196 | green 197 | {% else %} 198 | disabled 199 | {% endif %} 200 | entity: input_boolean.esp_pomphuis_ota_update 201 | tap_action: 202 | action: more-info 203 | - type: template 204 | content: '{{states(''input_number.esp_pomphuis_battery_voltage_last'') }} v' 205 | entity: input_number.esp_pomphuis_battery_voltage_last 206 | icon: |2 207 | {% set bl = states('input_number.esp_pomphuis_battery_percentage_last') | int %} 208 | {% if bl < 10 %} mdi:battery-outline 209 | {% elif bl < 20 %} mdi:battery-10 210 | {% elif bl < 30 %} mdi:battery-20 211 | {% elif bl < 40 %} mdi:battery-30 212 | {% elif bl < 50 %} mdi:battery-40 213 | {% elif bl < 60 %} mdi:battery-50 214 | {% elif bl < 70 %} mdi:battery-60 215 | {% elif bl < 80 %} mdi:battery-70 216 | {% elif bl < 90 %} mdi:battery-80 217 | {% elif bl < 100 %} mdi:battery-90 218 | {% elif bl == 100 %} mdi:battery 219 | {% else %} mdi:battery-unknown 220 | {% endif %} 221 | icon_color: |2- 222 | {% set bl = states('input_number.esp_pomphuis_battery_percentage_last') | int %} 223 | {% if bl < 10 %} red 224 | {% elif bl < 20 %} red 225 | {% elif bl < 30 %} red 226 | {% elif bl < 40 %} orange 227 | {% elif bl < 50 %} orange 228 | {% elif bl < 60 %} green 229 | {% elif bl < 70 %} green 230 | {% elif bl < 80 %} green 231 | {% elif bl < 90 %} green 232 | {% elif bl < 100 %} green 233 | {% elif bl == 100 %} green 234 | {% else %} grey 235 | {% endif %} 236 | tap_action: 237 | action: more-info 238 | alignment: end 239 | card_mod: 240 | style: | 241 | ha-card { 242 | --ha-card-box-shadow: none; 243 | --chip-background: none; 244 | --chip-box-shadow: none; 245 | --chip-spacing: 0; 246 | : -36px; 247 | } 248 | mushroom-template-chip:nth-child(1)$: | 249 | {% if is_state('switch.speelhuis_waterpomp','on') %} 250 | ha-state-icon { 251 | animation: drip 2s infinite; 252 | } 253 | @keyframes drip { 254 | 0%, 100% { clip-path: inset(0 0 0 0); } 255 | 15%, 85% { clip-path: polygon(0 0, 100% 0, 100% 57%, 64% 57%, 64% 100%, 0 100%); } 256 | } 257 | } 258 | {% else %} 259 | 260 | {% endif %} 261 | } 262 | -------------------------------------------------------------------------------- /top_persons_without_popup.yaml: -------------------------------------------------------------------------------- 1 | square: false 2 | columns: 3 3 | type: grid 4 | cards: 5 | - type: custom:vertical-stack-in-card 6 | mode: vertical 7 | cards: 8 | - type: custom:mushroom-person-card 9 | icon_type: entity-picture 10 | layout: horizontal 11 | entity: person.sander 12 | tap_action: 13 | action: more-info 14 | - type: custom:mushroom-chips-card 15 | chips: 16 | - type: template 17 | icon: |2- 18 | {% if is_state(entity, 'on') %} 19 | mdi:power-plug 20 | {% else %} 21 | mdi:power-plug-off 22 | {% endif %} 23 | icon_color: |2- 24 | {% if is_state(entity, 'on') %} 25 | green 26 | {% else %} 27 | grey 28 | {% endif %} 29 | entity: binary_sensor.pixel_6_pro_is_charging 30 | tap_action: 31 | action: more-info 32 | - type: template 33 | entity: sensor.pixel_6_pro_battery_level 34 | icon: |2 35 | {% set bl = states('sensor.pixel_6_pro_battery_level') | int %} 36 | {% if bl < 10 %} mdi:battery-outline 37 | {% elif bl < 20 %} mdi:battery-10 38 | {% elif bl < 30 %} mdi:battery-20 39 | {% elif bl < 40 %} mdi:battery-30 40 | {% elif bl < 50 %} mdi:battery-40 41 | {% elif bl < 60 %} mdi:battery-50 42 | {% elif bl < 70 %} mdi:battery-60 43 | {% elif bl < 80 %} mdi:battery-70 44 | {% elif bl < 90 %} mdi:battery-80 45 | {% elif bl < 100 %} mdi:battery-90 46 | {% elif bl == 100 %} mdi:battery 47 | {% else %} mdi:battery-unknown 48 | {% endif %} 49 | icon_color: |2- 50 | {% set bl = states('sensor.pixel_6_pro_battery_level') | int %} 51 | {% if bl < 10 %} red 52 | {% elif bl < 20 %} red 53 | {% elif bl < 30 %} red 54 | {% elif bl < 40 %} orange 55 | {% elif bl < 50 %} orange 56 | {% elif bl < 60 %} green 57 | {% elif bl < 70 %} green 58 | {% elif bl < 80 %} green 59 | {% elif bl < 90 %} green 60 | {% elif bl < 100 %} green 61 | {% elif bl == 100 %} green 62 | {% else %} grey 63 | {% endif %} 64 | tap_action: 65 | action: more-info 66 | - type: template 67 | icon: |2- 68 | {% if is_state(entity, 'Transmitting') %} 69 | mdi:bluetooth 70 | {% else %} 71 | mdi:bluetooth-off 72 | {% endif %} 73 | icon_color: |2- 74 | {% if is_state(entity, 'Transmitting') %} 75 | blue 76 | {% else %} 77 | grey 78 | {% endif %} 79 | entity: sensor.pixel_6_pro_ble_transmitter 80 | tap_action: 81 | action: more-info 82 | alignment: center 83 | card_mod: 84 | style: | 85 | ha-card { 86 | --ha-card-box-shadow: none; 87 | --chip-background: none; 88 | --chip-box-shadow: none; 89 | --chip-spacing: 0; 90 | : -36px; 91 | } 92 | - type: custom:vertical-stack-in-card 93 | mode: vertical 94 | cards: 95 | - type: custom:mushroom-person-card 96 | icon_type: entity-picture 97 | layout: horizontal 98 | entity: person.jolanda 99 | tap_action: 100 | action: more-info 101 | - type: custom:mushroom-chips-card 102 | chips: 103 | - type: template 104 | icon: |2- 105 | {% if is_state(entity, 'on') %} 106 | mdi:power-plug 107 | {% else %} 108 | mdi:power-plug-off 109 | {% endif %} 110 | icon_color: |2- 111 | {% if is_state(entity, 'on') %} 112 | green 113 | {% else %} 114 | grey 115 | {% endif %} 116 | entity: binary_sensor.pixel_4_xl_is_charging 117 | tap_action: 118 | action: more-info 119 | - type: template 120 | entity: sensor.pixel_4_xl_battery_level 121 | icon: |2 122 | {% set bl = states('sensor.pixel_4_xl_battery_level') | int %} 123 | {% if bl < 10 %} mdi:battery-outline 124 | {% elif bl < 20 %} mdi:battery-10 125 | {% elif bl < 30 %} mdi:battery-20 126 | {% elif bl < 40 %} mdi:battery-30 127 | {% elif bl < 50 %} mdi:battery-40 128 | {% elif bl < 60 %} mdi:battery-50 129 | {% elif bl < 70 %} mdi:battery-60 130 | {% elif bl < 80 %} mdi:battery-70 131 | {% elif bl < 90 %} mdi:battery-80 132 | {% elif bl < 100 %} mdi:battery-90 133 | {% elif bl == 100 %} mdi:battery 134 | {% else %} mdi:battery-unknown 135 | {% endif %} 136 | icon_color: |2- 137 | {% set bl = states('sensor.pixel_4_xl_battery_level') | int %} 138 | {% if bl < 10 %} red 139 | {% elif bl < 20 %} red 140 | {% elif bl < 30 %} red 141 | {% elif bl < 40 %} orange 142 | {% elif bl < 50 %} orange 143 | {% elif bl < 60 %} green 144 | {% elif bl < 70 %} green 145 | {% elif bl < 80 %} green 146 | {% elif bl < 90 %} green 147 | {% elif bl < 100 %} green 148 | {% elif bl == 100 %} green 149 | {% else %} grey 150 | {% endif %} 151 | tap_action: 152 | action: more-info 153 | - type: template 154 | icon: |2- 155 | {% if is_state(entity, 'Transmitting') %} 156 | mdi:bluetooth 157 | {% else %} 158 | mdi:bluetooth-off 159 | {% endif %} 160 | icon_color: |2- 161 | {% if is_state(entity, 'Transmitting') %} 162 | blue 163 | {% else %} 164 | grey 165 | {% endif %} 166 | entity: sensor.pixel_4_xl_ble_transmitter 167 | tap_action: 168 | action: more-info 169 | alignment: center 170 | card_mod: 171 | style: | 172 | ha-card { 173 | --ha-card-box-shadow: none; 174 | --chip-background: none; 175 | --chip-box-shadow: none; 176 | --chip-spacing: 0; 177 | } 178 | - type: custom:vertical-stack-in-card 179 | mode: vertical 180 | cards: 181 | - type: custom:mushroom-person-card 182 | icon_type: entity-picture 183 | layout: horizontal 184 | entity: person.tesla_m3 185 | tap_action: 186 | action: more-info 187 | double_tap_action: 188 | action: call-service 189 | service: script.tesla_m3_pre_heat_on 190 | - type: custom:mushroom-chips-card 191 | chips: 192 | - type: template 193 | icon: |2- 194 | {% if is_state(entity, 'on') %} 195 | mdi:ev-station 196 | {% else %} 197 | mdi:ev-station 198 | {% endif %} 199 | icon_color: |2- 200 | {% if is_state(entity, 'on') %} 201 | green 202 | {% else %} 203 | grey 204 | {% endif %} 205 | entity: switch.tesla_model_3_charger 206 | tap_action: 207 | action: more-info 208 | - type: template 209 | entity: sensor.tesla_model_3_battery 210 | icon: |2 211 | {% set bl = states('sensor.tesla_model_3_battery') | int %} 212 | {% if bl < 10 %} mdi:battery-outline 213 | {% elif bl < 20 %} mdi:battery-10 214 | {% elif bl < 30 %} mdi:battery-20 215 | {% elif bl < 40 %} mdi:battery-30 216 | {% elif bl < 50 %} mdi:battery-40 217 | {% elif bl < 60 %} mdi:battery-50 218 | {% elif bl < 70 %} mdi:battery-60 219 | {% elif bl < 80 %} mdi:battery-70 220 | {% elif bl < 90 %} mdi:battery-80 221 | {% elif bl < 100 %} mdi:battery-90 222 | {% elif bl == 100 %} mdi:battery 223 | {% else %} mdi:battery-unknown 224 | {% endif %} 225 | icon_color: |2- 226 | {% set bl = states('sensor.tesla_model_3_battery') | int %} 227 | {% if bl < 10 %} red 228 | {% elif bl < 20 %} red 229 | {% elif bl < 30 %} red 230 | {% elif bl < 40 %} orange 231 | {% elif bl < 50 %} orange 232 | {% elif bl < 60 %} green 233 | {% elif bl < 70 %} green 234 | {% elif bl < 80 %} green 235 | {% elif bl < 90 %} green 236 | {% elif bl < 100 %} green 237 | {% elif bl == 100 %} green 238 | {% else %} grey 239 | {% endif %} 240 | tap_action: 241 | action: more-info 242 | alignment: center 243 | card_mod: 244 | style: > 245 | {% if is_state('climate.tesla_model_3_hvac_climate_system', 246 | 'heat_cool') %} 247 | 248 | ha-card { 249 | border-radius: 20px !important; 250 | animation: ping 2s infinite; 251 | } 252 | 253 | @keyframes ping { 254 | 0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);} 255 | 70% {box-shadow: 0 0 0 10px transparent;} 256 | 100% {box-shadow: 0 0 0 0 transparent;} 257 | } {% elif is_state('climate.tesla_model_3_hvac_climate_system', 258 | 'off') %} 259 | 260 | {% endif %} 261 | -------------------------------------------------------------------------------- /kinderkamer_lucas_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Lucas 👶 7 | icon: mdi:cradle 8 | icon_color: blue 9 | layout: horizontal 10 | entity: light.kleinekamer_hue 11 | secondary: >- 12 | 🌡️{{states('sensor.kinderkamer_lucas_temperature') }}°C | 13 | 💧{{states('sensor.kinderkamer_lucas_humidity') | int }}% | 14 | 💡{{states('sensor.kinderkamer_lucas_illuminance') | int }}lux | 15 | 🔌{{states('sensor.lucas_total_energy_watt') | int }}W 16 | tap_action: 17 | action: navigate 18 | navigation_path: /dashboard-subviews/kinderkamer-lucas 19 | fill_container: true 20 | multiline_secondary: false 21 | card_mod: 22 | style: | 23 | ha-card { 24 | z-index: 1; 25 | } 26 | - type: custom:mini-graph-card 27 | entities: 28 | - entity: sensor.kinderkamer_lucas_temperature 29 | name: Temperature 30 | - entity: sensor.kinderkamer_lucas_humidity 31 | name: Humidity 32 | color: blue 33 | y_axis: secondary 34 | color_thresholds: 35 | - value: -20 36 | color: "#264CFF" 37 | - value: -15 38 | color: "#3FA0FF" 39 | - value: -10 40 | color: "#72D8FF" 41 | - value: -5 42 | color: "#AAF7FF" 43 | - value: 0 44 | color: "#E0FFFF" 45 | - value: 5 46 | color: "#FFFFBF" 47 | - value: 10 48 | color: "#FFE099" 49 | - value: 15 50 | color: "#FFAD72" 51 | - value: 20 52 | color: "#F76D5E" 53 | - value: 25 54 | color: "#D82632" 55 | - value: 30 56 | color: "#A50021" 57 | height: 50 58 | hours_to_show: 24 59 | line_width: 2 60 | font_size: 50 61 | animate: true 62 | show: 63 | name: false 64 | icon: false 65 | state: false 66 | legend: false 67 | fill: fade 68 | labels: false 69 | labels_secondary: false 70 | points: false 71 | card_mod: 72 | style: | 73 | ha-card { 74 | position: absolute !important; 75 | height: 100%; 76 | width: 100%; 77 | top: 0px; 78 | --ha-card-border-width: 0; 79 | } 80 | ha-card:after { 81 | content: ""; 82 | position: absolute; 83 | width: 100%; 84 | height: 100%; 85 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 86 | } 87 | - type: custom:vertical-stack-in-card 88 | mode: vertical 89 | cards: 90 | - type: custom:vertical-stack-in-card 91 | horizontal: true 92 | cards: 93 | - type: custom:mushroom-template-card 94 | entity: light.kinderkamer_lucas_hue 95 | layout: vertical 96 | icon: |- 97 | {% if is_state('light.kinderkamer_lucas_hue', 'on') %} 98 | hue:ceiling-xamento 99 | {% else %} 100 | hue:ceiling-xamento 101 | {% endif %} 102 | icon_color: |- 103 | {% if is_state('light.kinderkamer_lucas_hue', 'on') %} 104 | yellow 105 | {% endif %} 106 | - type: custom:mushroom-template-card 107 | entity: climate.airco_sophie 108 | layout: vertical 109 | icon: |- 110 | {% if is_state('climate.airco_lucas', 'heat') %} 111 | mdi:thermometer-chevron-up 112 | {% elif is_state('climate.airco_lucas', 'cool') %} 113 | mdi:thermometer-chevron-down 114 | {% elif is_state('climate.airco_lucas', 'off') %} 115 | mdi:thermostat 116 | {% else %} 117 | disbled 118 | {% endif %} 119 | icon_color: |- 120 | {% if is_state('climate.airco_lucas', 'heat') %} 121 | red 122 | {% elif is_state('climate.airco_lucas', 'cool') %} 123 | blue 124 | {% elif is_state('climate.airco_lucas', 'off') %} 125 | disabled 126 | {% else %} 127 | disbled 128 | {% endif %} 129 | tap_action: 130 | action: more-info 131 | double_tap_action: 132 | action: call-service 133 | service: input_boolean.toggle 134 | target: 135 | entity_id: input_boolean.node_red_kinderkamer_lucas_airco_automations 136 | data: {} 137 | card_mod: 138 | style: 139 | mushroom-shape-icon$: > 140 | {% if 141 | is_state('input_boolean.node_red_kinderkamer_lucas_airco_automations', 142 | 'on') %} 143 | 144 | .shape { 145 | --shape-animation: ping 3s infinite; 146 | } 147 | 148 | @keyframes ping { 149 | 0% { 150 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 151 | } 152 | 153 | 100% { 154 | box-shadow: 0 0 5px 5px transparent; 155 | } 156 | } 157 | 158 | {% elif 159 | is_state('input_boolean.node_red_kinderkamer_lucas_airco_automations', 160 | 'off') %} 161 | 162 | {% endif %} 163 | - type: custom:vertical-stack-in-card 164 | horizontal: true 165 | cards: 166 | - type: custom:mushroom-template-card 167 | entity: light.wled_dino 168 | layout: vertical 169 | icon: |- 170 | {% if is_state('light.wled_dino', 'on') %} 171 | mdi:google-downasaur 172 | {% else %} 173 | mdi:google-downasaur 174 | {% endif %} 175 | icon_color: |- 176 | {% if is_state('light.wled_dino', 'on') %} 177 | yellow 178 | {% endif %} 179 | - type: custom:mushroom-template-card 180 | entity: light.wled_night_lucas_primair 181 | layout: vertical 182 | use_light_color: true 183 | icon: |- 184 | {% if is_state('light.wled_night_lucas_primair', 'on') %} 185 | mdi:eye-outline 186 | {% else %} 187 | mdi:eye-outline 188 | {% endif %} 189 | icon_color: |- 190 | {% if is_state('light.wled_night_lucas_primair', 'on') %} 191 | purple 192 | {% endif %} 193 | double_tap_action: 194 | action: call-service 195 | service: input_boolean.toggle 196 | target: 197 | entity_id: input_boolean.node_red_kinderkamer_lucas_oogjes_automations 198 | data: {} 199 | card_mod: 200 | style: 201 | mushroom-shape-icon$: > 202 | {% if 203 | is_state('input_boolean.node_red_kinderkamer_lucas_oogjes_automations', 204 | 'on') %} 205 | 206 | .shape { 207 | --shape-animation: ping 3s infinite; 208 | } 209 | 210 | @keyframes ping { 211 | 0% { 212 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 213 | } 214 | 215 | 100% { 216 | box-shadow: 0 0 5px 5px transparent; 217 | } 218 | } 219 | 220 | {% elif 221 | is_state('input_boolean.node_red_kinderkamer_lucas_oogjes_automations', 222 | 'off') %} 223 | 224 | {% endif %} 225 | - type: custom:mushroom-chips-card 226 | chips: 227 | - type: template 228 | icon: mdi:motion-sensor 229 | icon_color: |2- 230 | {% if is_state(entity, 'on') %} 231 | blue 232 | {% else %} 233 | grey 234 | {% endif %} 235 | entity: binary_sensor.kinderkamer_lucas_occupancy 236 | tap_action: 237 | action: more-info 238 | - type: template 239 | icon: |- 240 | {% if is_state(entity, 'off') %} 241 | mdi:window-closed 242 | {% else %} 243 | mdi:window-open 244 | {% endif %} 245 | icon_color: |2- 246 | {% if is_state(entity, 'off') %} 247 | green 248 | {% else %} 249 | red 250 | {% endif %} 251 | entity: binary_sensor.kleinekamer_raam_aqara_contact 252 | tap_action: 253 | action: more-info 254 | - type: template 255 | icon: |- 256 | {% if is_state(entity, 'off') %} 257 | mdi:thermostat 258 | {% else %} 259 | mdi:thermostat 260 | {% endif %} 261 | icon_color: |2- 262 | {% if is_state(entity, 'heat') %} 263 | red 264 | {% elif is_state(entity, 'cool') %} 265 | blue 266 | {% else %} 267 | disabled 268 | {% endif %} 269 | entity: climate.airco_lucas 270 | tap_action: 271 | action: more-info 272 | - type: template 273 | icon: mdi:remote 274 | entity: sensor.kinderkamer_lucas_dimmer_hue_battery 275 | icon_color: |2- 276 | {% if states('sensor.kinderkamer_lucas_dimmer_hue_battery') | float < 25 %} 277 | red 278 | {% elif states('sensor.kinderkamer_lucas_dimmer_hue_battery') | float < 50 %} 279 | orange 280 | {% elif states('sensor.kinderkamer_lucas_dimmer_hue_battery') | float >= 50 %} 281 | green 282 | {% else %} 283 | disabled 284 | {% endif %} 285 | tap_action: 286 | action: more-info 287 | alignment: end 288 | card_mod: 289 | style: 290 | mushroom-template-chip: | 291 | ha-card { 292 | --ha-card-box-shadow: none; 293 | --chip-background: none; 294 | --chip-box-shadow: none; 295 | --chip-spacing: 0; 296 | : -36px; 297 | } 298 | mushroom-template-chip:nth-child(1)$: > 299 | {% if is_state('binary_sensor.kinderkamer_lucas_occupancy','on') 300 | %} 301 | 302 | ha-state-icon { 303 | animation: clip 2s linear infinite; 304 | } 305 | 306 | @keyframes clip { 307 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 308 | } 309 | 310 | .shape { 311 | --shape-animation: motion 2s linear infinite; 312 | } 313 | 314 | @keyframes motion { 315 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 316 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 317 | } 318 | 319 | } 320 | 321 | {% else %} 322 | 323 | 324 | {% endif %} 325 | 326 | } 327 | -------------------------------------------------------------------------------- /kinderkamer_sophie_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Sophie 👸 7 | icon: mdi:bed 8 | icon_color: pink 9 | layout: horizontal 10 | entity: light.kinderkamer_sophie_group_hue 11 | secondary: >- 12 | 🌡️{{states('sensor.kinderkamer_sophie_temperature') }}°C | 13 | 💧{{states('sensor.kinderkamer_sophie_humidity') | int }}% | 14 | 💡{{states('sensor.kinderkamer_sophie_illuminance') | int }}lux | 15 | 🔌{{states('sensor.sophie_total_energy_watt') | int }}W 16 | tap_action: 17 | action: navigate 18 | navigation_path: /dashboard-subviews/kinderkamer-sophie 19 | fill_container: true 20 | multiline_secondary: false 21 | card_mod: 22 | style: | 23 | ha-card { 24 | z-index: 1; 25 | } 26 | - type: custom:mini-graph-card 27 | entities: 28 | - entity: sensor.kinderkamer_sophie_temperature 29 | name: Temperature 30 | - entity: sensor.kinderkamer_sophie_humidity 31 | name: Humidity 32 | color: blue 33 | y_axis: secondary 34 | color_thresholds: 35 | - value: -20 36 | color: "#264CFF" 37 | - value: -15 38 | color: "#3FA0FF" 39 | - value: -10 40 | color: "#72D8FF" 41 | - value: -5 42 | color: "#AAF7FF" 43 | - value: 0 44 | color: "#E0FFFF" 45 | - value: 5 46 | color: "#FFFFBF" 47 | - value: 10 48 | color: "#FFE099" 49 | - value: 15 50 | color: "#FFAD72" 51 | - value: 20 52 | color: "#F76D5E" 53 | - value: 25 54 | color: "#D82632" 55 | - value: 30 56 | color: "#A50021" 57 | height: 50 58 | hours_to_show: 24 59 | line_width: 2 60 | font_size: 50 61 | animate: true 62 | show: 63 | name: false 64 | icon: false 65 | state: false 66 | legend: false 67 | fill: fade 68 | labels: false 69 | labels_secondary: false 70 | points: false 71 | card_mod: 72 | style: | 73 | ha-card { 74 | position: absolute !important; 75 | height: 100%; 76 | width: 100%; 77 | top: 0px; 78 | --ha-card-border-width: 0; 79 | } 80 | ha-card:after { 81 | content: ""; 82 | position: absolute; 83 | width: 100%; 84 | height: 100%; 85 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 86 | } 87 | - type: custom:vertical-stack-in-card 88 | mode: vertical 89 | cards: 90 | - type: custom:vertical-stack-in-card 91 | horizontal: true 92 | cards: 93 | - type: custom:mushroom-template-card 94 | entity: light.kinderkamer_sophie_hue 95 | layout: vertical 96 | icon: |- 97 | {% if is_state('light.kinderkamer_sophie_hue', 'on') %} 98 | hue:ceiling-fugato-three 99 | {% else %} 100 | hue:ceiling-fugato-three 101 | {% endif %} 102 | icon_color: |- 103 | {% if is_state('light.kinderkamer_sophie_hue', 'on') %} 104 | yellow 105 | {% endif %} 106 | - type: custom:mushroom-template-card 107 | entity: climate.airco_sophie 108 | layout: vertical 109 | icon: |- 110 | {% if is_state('climate.airco_sophie', 'heat') %} 111 | mdi:thermometer-chevron-up 112 | {% elif is_state('climate.airco_sophie', 'cool') %} 113 | mdi:thermometer-chevron-down 114 | {% elif is_state('climate.airco_sophie', 'off') %} 115 | mdi:thermostat 116 | {% else %} 117 | disbled 118 | {% endif %} 119 | icon_color: |- 120 | {% if is_state('climate.airco_sophie', 'heat') %} 121 | red 122 | {% elif is_state('climate.airco_sophie', 'cool') %} 123 | blue 124 | {% elif is_state('climate.airco_sophie', 'off') %} 125 | disabled 126 | {% else %} 127 | disbled 128 | {% endif %} 129 | tap_action: 130 | action: more-info 131 | double_tap_action: 132 | action: call-service 133 | service: input_boolean.toggle 134 | target: 135 | entity_id: input_boolean.node_red_kinderkamer_sophie_airco_automations 136 | data: {} 137 | card_mod: 138 | style: 139 | mushroom-shape-icon$: > 140 | {% if 141 | is_state('input_boolean.node_red_kinderkamer_sophie_airco_automations', 142 | 'on') %} 143 | 144 | .shape { 145 | --shape-animation: ping 3s infinite; 146 | } 147 | 148 | @keyframes ping { 149 | 0% { 150 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 151 | } 152 | 153 | 100% { 154 | box-shadow: 0 0 5px 5px transparent; 155 | } 156 | } 157 | 158 | {% elif 159 | is_state('input_boolean.node_red_kinderkamer_sophie_airco_automations', 160 | 'off') %} 161 | 162 | {% endif %} 163 | - type: custom:vertical-stack-in-card 164 | horizontal: true 165 | cards: 166 | - type: custom:mushroom-template-card 167 | entity: light.wled_unicorn 168 | layout: vertical 169 | icon: |- 170 | {% if is_state('light.wled_unicorn', 'on') %} 171 | mdi:unicorn-variant 172 | {% else %} 173 | mdi:unicorn-variant 174 | {% endif %} 175 | icon_color: |- 176 | {% if is_state('light.wled_unicorn', 'on') %} 177 | purple 178 | {% endif %} 179 | - type: custom:mushroom-template-card 180 | entity: light.kinderkamer_sophie_bed 181 | layout: vertical 182 | use_light_color: true 183 | icon: |- 184 | {% if is_state('light.kinderkamer_sophie_bed', 'on') %} 185 | mdi:bed 186 | {% else %} 187 | mdi:bed 188 | {% endif %} 189 | icon_color: |- 190 | {% if is_state('light.kinderkamer_sophie_bed', 'on') %} 191 | purple 192 | {% endif %} 193 | - type: custom:mushroom-template-card 194 | entity: light.wled_night_sophie_master 195 | layout: vertical 196 | use_light_color: true 197 | icon: |- 198 | {% if is_state('light.wled_night_sophie_master', 'on') %} 199 | mdi:eye-outline 200 | {% else %} 201 | mdi:eye-outline 202 | {% endif %} 203 | icon_color: |- 204 | {% if is_state('light.wled_night_sophie_master', 'on') %} 205 | purple 206 | {% endif %} 207 | double_tap_action: 208 | action: call-service 209 | service: input_boolean.toggle 210 | target: 211 | entity_id: input_boolean.node_red_kinderkamer_sophie_oogjes_automations 212 | data: {} 213 | card_mod: 214 | style: 215 | mushroom-shape-icon$: > 216 | {% if 217 | is_state('input_boolean.node_red_kinderkamer_sophie_oogjes_automations', 218 | 'on') %} 219 | 220 | .shape { 221 | --shape-animation: ping 3s infinite; 222 | } 223 | 224 | @keyframes ping { 225 | 0% { 226 | box-shadow: 0 0 5px 1px rgba(var(--rgb-blue), 0.7); 227 | } 228 | 229 | 100% { 230 | box-shadow: 0 0 5px 5px transparent; 231 | } 232 | } 233 | 234 | {% elif 235 | is_state('input_boolean.node_red_kinderkamer_sophie_oogjes_automations', 236 | 'off') %} 237 | 238 | {% endif %} 239 | - type: custom:mushroom-chips-card 240 | chips: 241 | - type: template 242 | icon: mdi:motion-sensor 243 | icon_color: |2- 244 | {% if is_state(entity, 'on') %} 245 | blue 246 | {% else %} 247 | grey 248 | {% endif %} 249 | entity: binary_sensor.kinderkamer_sophie_occupancy 250 | tap_action: 251 | action: more-info 252 | - type: template 253 | icon: |- 254 | {% if is_state(entity, 'off') %} 255 | mdi:window-closed 256 | {% else %} 257 | mdi:window-open 258 | {% endif %} 259 | icon_color: |2- 260 | {% if is_state(entity, 'off') %} 261 | green 262 | {% else %} 263 | red 264 | {% endif %} 265 | entity: binary_sensor.kinderkamer_sophie_raam_aqara_contact 266 | tap_action: 267 | action: more-info 268 | - type: template 269 | icon: |- 270 | {% if is_state(entity, 'off') %} 271 | mdi:thermostat 272 | {% else %} 273 | mdi:thermostat 274 | {% endif %} 275 | icon_color: |2- 276 | {% if is_state(entity, 'heat') %} 277 | red 278 | {% elif is_state(entity, 'cool') %} 279 | blue 280 | {% else %} 281 | disabled 282 | {% endif %} 283 | entity: climate.airco_sophie 284 | tap_action: 285 | action: more-info 286 | - type: template 287 | icon: mdi:remote 288 | entity: sensor.kinderkamer_sophie_dimmer_hue_battery 289 | icon_color: |2- 290 | {% if states('sensor.kinderkamer_sophie_dimmer_hue_battery') | float < 25 %} 291 | red 292 | {% elif states('sensor.kinderkamer_sophie_dimmer_hue_battery') | float < 50 %} 293 | orange 294 | {% elif states('sensor.kinderkamer_sophie_dimmer_hue_battery') | float >= 50 %} 295 | green 296 | {% else %} 297 | disabled 298 | {% endif %} 299 | tap_action: 300 | action: more-info 301 | alignment: end 302 | card_mod: 303 | style: 304 | mushroom-template-chip: | 305 | ha-card { 306 | --ha-card-box-shadow: none; 307 | --chip-background: none; 308 | --chip-box-shadow: none; 309 | --chip-spacing: 0; 310 | : -36px; 311 | } 312 | mushroom-template-chip:nth-child(1)$: > 313 | {% if is_state('binary_sensor.kinderkamer_sophie_occupancy','on') 314 | %} 315 | 316 | ha-state-icon { 317 | animation: clip 2s linear infinite; 318 | } 319 | 320 | @keyframes clip { 321 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 322 | } 323 | 324 | .shape { 325 | --shape-animation: motion 2s linear infinite; 326 | } 327 | 328 | @keyframes motion { 329 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 330 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 331 | } 332 | 333 | } 334 | 335 | {% else %} 336 | 337 | 338 | {% endif %} 339 | 340 | } 341 | -------------------------------------------------------------------------------- /woonkamer_room_card.yaml: -------------------------------------------------------------------------------- 1 | type: custom:vertical-stack-in-card 2 | cards: 3 | - type: custom:stack-in-card 4 | cards: 5 | - type: custom:mushroom-template-card 6 | primary: Woonkamer 7 | icon: mdi:sofa 8 | icon_color: teal 9 | layout: horizontal 10 | entity: light.staanlamp_hue 11 | secondary: >- 12 | 🌡️{{states('sensor.woonkamer_temperature') }}°C | 13 | 💡{{states('sensor.woonkamer_illuminance') | int }}lux | 14 | 🔌{{states('sensor.woonkamer_total_energy_watt') | int }}W 15 | tap_action: 16 | action: navigate 17 | navigation_path: /dashboard-subviews/woonkamer 18 | badge_icon: | 19 | {% if is_state('binary_sensor.woonkamer_occupancy', 'on') %} 20 | mdi:human-greeting 21 | {% else %} 22 | mdi:motion-sensor-off 23 | {% endif %} 24 | badge_color: | 25 | {% if is_state('binary_sensor.woonkamer_occupancy', 'on') %} 26 | green 27 | {% else %} 28 | disabled 29 | {% endif %} 30 | fill_container: true 31 | multiline_secondary: false 32 | card_mod: 33 | style: | 34 | ha-card { 35 | z-index: 1; 36 | } 37 | - type: custom:mini-graph-card 38 | entities: 39 | - entity: sensor.woonkamer_temperature 40 | name: Temperature 41 | color_thresholds: 42 | - value: -20 43 | color: "#264CFF" 44 | - value: -15 45 | color: "#3FA0FF" 46 | - value: -10 47 | color: "#72D8FF" 48 | - value: -5 49 | color: "#AAF7FF" 50 | - value: 0 51 | color: "#E0FFFF" 52 | - value: 5 53 | color: "#FFFFBF" 54 | - value: 10 55 | color: "#FFE099" 56 | - value: 15 57 | color: "#FFAD72" 58 | - value: 20 59 | color: "#F76D5E" 60 | - value: 25 61 | color: "#D82632" 62 | - value: 30 63 | color: "#A50021" 64 | height: 50 65 | hours_to_show: 24 66 | line_width: 2 67 | font_size: 50 68 | animate: true 69 | show: 70 | name: false 71 | icon: false 72 | state: false 73 | legend: false 74 | fill: fade 75 | labels: false 76 | labels_secondary: false 77 | points: false 78 | card_mod: 79 | style: | 80 | ha-card { 81 | position: absolute !important; 82 | height: 100%; 83 | width: 100%; 84 | top: 0px; 85 | --ha-card-border-width: 0; 86 | } 87 | ha-card:after { 88 | content: ""; 89 | position: absolute; 90 | width: 100%; 91 | height: 100%; 92 | background: linear-gradient(to right, var(--card-background-color) 20%, transparent); 93 | } 94 | - type: custom:vertical-stack-in-card 95 | mode: vertical 96 | cards: 97 | - type: custom:vertical-stack-in-card 98 | horizontal: true 99 | cards: 100 | - type: custom:mushroom-template-card 101 | entity: light.staanlamp_hue 102 | layout: vertical 103 | icon: |- 104 | {% if is_state('light.staanlamp_hue', 'on') %} 105 | hue:beyond-up 106 | {% else %} 107 | hue:beyond-up 108 | {% endif %} 109 | icon_color: |- 110 | {% if is_state('light.staanlamp_hue', 'on') %} 111 | yellow 112 | {% else %} 113 | disabled 114 | {% endif %} 115 | - type: custom:mushroom-template-card 116 | entity: light.philipstv 117 | layout: vertical 118 | use_light_color: true 119 | icon: |- 120 | {% if is_state('light.philipstv', 'on') %} 121 | mdi:television-ambient-light 122 | {% else %} 123 | mdi:television-ambient-light 124 | {% endif %} 125 | icon_color: |- 126 | {% if is_state('light.philipstv', 'on') %} 127 | yellow 128 | {% else %} 129 | disabled 130 | {% endif %} 131 | - type: custom:mushroom-template-card 132 | entity: switch.esp_servieskast_kerst 133 | layout: vertical 134 | use_light_color: true 135 | icon: |- 136 | {% if is_state('switch.esp_servieskast_kerst', 'on') %} 137 | mdi:string-lights 138 | {% else %} 139 | mdi:string-lights 140 | {% endif %} 141 | icon_color: |- 142 | {% if is_state('switch.esp_servieskast_kerst', 'on') %} 143 | yellow 144 | {% else %} 145 | disabled 146 | {% endif %} 147 | - type: custom:vertical-stack-in-card 148 | horizontal: true 149 | cards: 150 | - type: custom:mushroom-template-card 151 | entity: light.eettafel_hue 152 | layout: vertical 153 | icon: |- 154 | {% if is_state('light.eettafel_hue', 'on') %} 155 | hue:pendant-round 156 | {% else %} 157 | hue:pendant-round 158 | {% endif %} 159 | icon_color: |- 160 | {% if is_state('light.eettafel_hue', 'on') %} 161 | yellow 162 | {% else %} 163 | disabled 164 | {% endif %} 165 | - type: custom:mushroom-template-card 166 | entity: light.woonkamer_knutseltafel_hue 167 | layout: vertical 168 | use_light_color: true 169 | icon: |- 170 | {% if is_state('light.woonkamer_knutseltafel_hue', 'on') %} 171 | mdi:desk 172 | {% else %} 173 | mdi:desk 174 | {% endif %} 175 | icon_color: |- 176 | {% if is_state('light.woonkamer_knutseltafel_hue', 'on') %} 177 | yellow 178 | {% else %} 179 | disabled 180 | {% endif %} 181 | - type: custom:mushroom-template-card 182 | entity: light.woonkamer_achter_dimmer_3sp_ecodim 183 | layout: vertical 184 | use_light_color: true 185 | icon: >- 186 | {% if is_state('light.woonkamer_achter_dimmer_3sp_ecodim', 'on') 187 | %} 188 | 189 | hue:bulb-group-ceiling-flush-circular 190 | 191 | {% else %} 192 | 193 | hue:bulb-group-ceiling-flush-circular 194 | 195 | {% endif %} 196 | icon_color: >- 197 | {% if is_state('light.woonkamer_achter_dimmer_3sp_ecodim', 'on') 198 | %} 199 | yellow 200 | {% endif %} 201 | - type: custom:vertical-stack-in-card 202 | horizontal: true 203 | cards: 204 | - type: custom:mushroom-template-card 205 | entity: light.woonkamer_tv_achter_hue 206 | layout: vertical 207 | icon: |- 208 | {% if is_state('light.woonkamer_tv_achter_hue', 'on') %} 209 | mdi:lamp 210 | {% else %} 211 | mdi:lamp 212 | {% endif %} 213 | icon_color: |- 214 | {% if is_state('light.woonkamer_tv_achter_hue', 'on') %} 215 | yellow 216 | {% else %} 217 | disabled 218 | {% endif %} 219 | - type: custom:mushroom-template-card 220 | entity: light.hue_tv_ledstrip 221 | layout: vertical 222 | use_light_color: true 223 | icon: |- 224 | {% if is_state('light.hue_tv_ledstrip', 'on') %} 225 | hue:gradient-lightstrip 226 | {% else %} 227 | hue:gradient-lightstrip 228 | {% endif %} 229 | icon_color: |- 230 | {% if is_state('light.hue_tv_ledstrip', 'on') %} 231 | yellow 232 | {% else %} 233 | disabled 234 | {% endif %} 235 | - type: custom:mushroom-template-card 236 | entity: light.ledstrippiano 237 | layout: vertical 238 | use_light_color: true 239 | icon: |- 240 | {% if is_state('light.ledstrippiano', 'on') %} 241 | mdi:piano 242 | {% else %} 243 | mdi:piano 244 | {% endif %} 245 | icon_color: |- 246 | {% if is_state('light.ledstrippiano', 'on') %} 247 | yellow 248 | {% else %} 249 | disabled 250 | {% endif %} 251 | - type: custom:mushroom-template-card 252 | entity: switch.esp_kerstboom 253 | layout: vertical 254 | use_light_color: true 255 | icon: |- 256 | {% if is_state('switch.esp_kerstboom', 'on') %} 257 | mdi:pine-tree 258 | {% else %} 259 | mdi:pine-tree 260 | {% endif %} 261 | icon_color: |- 262 | {% if is_state('switch.esp_kerstboom', 'on') %} 263 | yellow 264 | {% else %} 265 | disabled 266 | {% endif %} 267 | - type: custom:mushroom-chips-card 268 | chips: 269 | - type: template 270 | icon: mdi:clock-digital 271 | icon_color: |2- 272 | {% if is_state(entity, 'on') %} 273 | green 274 | {% else %} 275 | disabled 276 | {% endif %} 277 | entity: light.esp_leddisplay_tt_matrix_color 278 | tap_action: 279 | action: more-info 280 | - type: template 281 | icon: |- 282 | {% if is_state(entity, 'playing') %} 283 | mdi:television-play 284 | {% elif is_state(entity, 'paused') %} 285 | mdi:television-pause 286 | {% elif is_state(entity, 'idle') %} 287 | mdi:television 288 | {% else %} 289 | mdi:television 290 | {% endif %} 291 | icon_color: |2- 292 | {% if is_state(entity, 'playing') %} 293 | yellow 294 | {% elif is_state(entity, 'paused') %} 295 | yellow 296 | {% elif is_state(entity, 'idle') %} 297 | yellow 298 | {% else %} 299 | grey 300 | {% endif %} 301 | entity: media_player.philipstv 302 | content: "{{ state_attr('media_player.philipstv', 'source') }}" 303 | tap_action: 304 | action: more-info 305 | - type: template 306 | icon: mdi:motion-sensor 307 | icon_color: |2- 308 | {% if is_state(entity, 'on') %} 309 | blue 310 | {% else %} 311 | grey 312 | {% endif %} 313 | entity: binary_sensor.woonkamer_occupancy 314 | tap_action: 315 | action: more-info 316 | - type: entity 317 | entity: sensor.esp_vindriktning_woonkamer_pm25 318 | icon_color: blue 319 | - type: entity 320 | entity: vacuum.sri 321 | icon_color: yellow 322 | alignment: end 323 | card_mod: 324 | style: 325 | mushroom-template-chip: | 326 | ha-card { 327 | --ha-card-box-shadow: none; 328 | --chip-background: none; 329 | --chip-box-shadow: none; 330 | --chip-spacing: 0; 331 | : -36px; 332 | } 333 | mushroom-template-chip:nth-child(3)$: > 334 | {% if is_state('binary_sensor.woonkamer_occupancy','on') %} 335 | ha-state-icon { 336 | animation: clip 2s linear infinite; 337 | } @keyframes clip { 338 | 50% { clip-path: polygon(0 0, 55% 0, 100% 100%, 0 100%); } 339 | } .shape { 340 | --shape-animation: motion 2s linear infinite; 341 | } @keyframes motion { 342 | 0%, 100% { --shape-color: rgba(var(--rgb-blue), 0.3); } 343 | 50% { --shape-color: rgba(var(--rgb-blue), 0.2); } 344 | } } {% else %} 345 | 346 | {% endif %} } 347 | --------------------------------------------------------------------------------