├── Conditional Vacuum Card ├── Single Mini Graph Card ├── Example Person Card ├── Double Mini Graph Card ├── Person Specific Pop-up Card ├── Conditional Plex Media Player Card ├── Bubble Card Navigation ├── Example Room Card └── Conditional Chips /Conditional Vacuum Card: -------------------------------------------------------------------------------- 1 | type: custom:mushroom-vacuum-card 2 | entity: vacuum.lightning_mcclean 3 | name: Lightning McClean 4 | icon_animation: true 5 | commands: 6 | - start_pause 7 | - stop 8 | - return_home 9 | fill_container: true 10 | visibility: 11 | - condition: state 12 | entity: vacuum.lightning_mcclean 13 | state: cleaning 14 | grid_options: 15 | columns: 12 16 | rows: 2 17 | -------------------------------------------------------------------------------- /Single Mini Graph Card: -------------------------------------------------------------------------------- 1 | type: custom:mini-graph-card 2 | name: Boiler Runtime and Calls for Heat (24h) 3 | align_header: left 4 | align_icon: left 5 | entities: 6 | - entity: sensor.heat_runtime 7 | name: Runtime (hours) 8 | color: "#1db954" 9 | - entity: sensor.heat_calls 10 | name: Calls 11 | color: "#eb4d54" 12 | show_graph: true 13 | show_state: true 14 | hours_to_show: 24 15 | hour24: false 16 | points_per_hour: 0.5 17 | show: 18 | fill: fade 19 | -------------------------------------------------------------------------------- /Example Person Card: -------------------------------------------------------------------------------- 1 | type: custom:bubble-card 2 | card_type: button 3 | button_type: state 4 | entity: person.chris 5 | force_icon: false 6 | show_last_changed: true 7 | show_attribute: false 8 | attribute: user_id 9 | sub_button: 10 | - entity: sensor.sm_f926u_battery_level 11 | name: Phone Battery 12 | icon: mdi:cellphone-charging 13 | show_state: true 14 | - entity: sensor.chris_galaxy_watch_battery_level 15 | show_state: true 16 | show_last_changed: false 17 | icon: mdi:watch 18 | show_attribute: false 19 | name: Watch Battery 20 | - entity: sensor.chris_galaxy_watch_heart_rate 21 | show_state: true 22 | show_name: false 23 | - entity: sensor.chris_galaxy_watch_daily_steps 24 | show_state: true 25 | card_layout: large-2-rows 26 | button_action: 27 | tap_action: 28 | action: navigate 29 | navigation_path: "#pop-up-chris" 30 | -------------------------------------------------------------------------------- /Double Mini Graph Card: -------------------------------------------------------------------------------- 1 | square: true 2 | type: grid 3 | cards: 4 | - type: custom:mini-graph-card 5 | name: Lynn's Room Temp 6 | align_header: left 7 | align_icon: left 8 | entities: 9 | - entity: sensor.chris_s_echo_dot_temperature 10 | name: Lynn's Room 11 | show_graph: true 12 | show_state: true 13 | show_points: false 14 | color_thresholds: 15 | - value: 75.2 16 | color: "#eb4d54" 17 | - value: 69.8 18 | color: "#1db954" 19 | - value: 64.4 20 | color: "#3a8df7" 21 | font_size: 80 22 | hours_to_show: 48 23 | hour24: false 24 | icon: mdi:bed 25 | points_per_hour: 0.5 26 | show: 27 | extrema: true 28 | fill: fade 29 | - type: custom:mini-graph-card 30 | name: Theresa's Room Temp 31 | align_header: left 32 | align_icon: left 33 | entities: 34 | - entity: sensor.theresa_s_echo_temperature 35 | name: Theresa's Room 36 | color_thresholds: 37 | - value: 75.2 38 | color: "#eb4d54" 39 | - value: 69.8 40 | color: "#1db954" 41 | - value: 64.4 42 | color: "#3a8df7" 43 | font_size: 80 44 | hours_to_show: 48 45 | hour24: false 46 | icon: mdi:bed 47 | points_per_hour: 0.5 48 | show: 49 | extrema: true 50 | fill: fade 51 | columns: 2 52 | -------------------------------------------------------------------------------- /Person Specific Pop-up Card: -------------------------------------------------------------------------------- 1 | type: vertical-stack 2 | cards: 3 | - type: custom:bubble-card 4 | card_type: pop-up 5 | hash: "#pop-up-chris" 6 | button_type: state 7 | name: "" 8 | card_layout: large-2-rows 9 | entity: person.chris 10 | - type: map 11 | entities: 12 | - entity: person.chris 13 | theme_mode: auto 14 | hours_to_show: 168 15 | - type: horizontal-stack 16 | cards: 17 | - type: custom:bubble-card 18 | card_type: button 19 | entity: sensor.sm_f926u_battery_level 20 | button_type: state 21 | name: Phone 22 | icon: mdi:cellphone-charging 23 | tap_action: 24 | action: toggle 25 | - type: custom:bubble-card 26 | card_type: button 27 | entity: sensor.sm_f926u_wifi_connection 28 | button_type: state 29 | name: Wifi Info 30 | icon: mdi:cellphone-wireless 31 | tap_action: 32 | action: toggle 33 | show_attribute: true 34 | - type: horizontal-stack 35 | cards: 36 | - type: custom:bubble-card 37 | card_type: button 38 | entity: sensor.chris_galaxy_watch_battery_level 39 | button_type: state 40 | name: Watch 41 | icon: mdi:watch 42 | tap_action: 43 | action: toggle 44 | card_layout: normal 45 | - type: custom:bubble-card 46 | card_type: button 47 | button_type: state 48 | entity: sensor.chris_galaxy_watch_heart_rate 49 | name: Chris' Heart Rate 50 | show_last_changed: true 51 | show_attribute: false 52 | -------------------------------------------------------------------------------- /Conditional Plex Media Player Card: -------------------------------------------------------------------------------- 1 | type: custom:auto-entities 2 | show_empty: false 3 | card: 4 | type: entities 5 | card_mod: 6 | style: | 7 | .card-header { 8 | background-color: black; 9 | color: orange; 10 | padding-top: 0px; 11 | padding-bottom: 0px; 12 | } 13 | filter: 14 | include: 15 | - entity_id: media_player.plex* 16 | state: /playing|paused|'on'/ 17 | options: 18 | card_type: markdown 19 | theme: plex 20 | card_mod: 21 | style: | 22 | ha-card.type-markdown { 23 | background-image: url('/local/various/plex.png'); 24 | background-position: right; 25 | background-size: contain; 26 | background-repeat: no-repeat; 27 | box-shadow: none; 28 | color: silver; 29 | margin: 8px -16px -16px -16px; 30 | } 31 | content: > 32 | {% set player = config.entity %} {% if states(player) not in 33 | ['unknown','unavailable'] %} **User:** 34 | {{state_attr(player,'username')}} {% for attr in 35 | states[player].attributes %} 36 | {%- if not attr in ['media_content_id','icon','entity_picture','hide_attributes', 37 | 'media_position_updated_at','media_duration','media_position', 38 | 'player_source','media_content_rating', 39 | 'is_volume_muted','username','friendly_name','volume_level', 40 | 'supported_features'] %} 41 | **- {{attr.split('media_')[1]|replace('_',' ')|title}}:** {{states[player].attributes[attr]|title}} {% endif %} 42 | {%- endfor %} {% else %} Nothing playing {% endif %} 43 | sort: 44 | method: name 45 | -------------------------------------------------------------------------------- /Bubble Card Navigation: -------------------------------------------------------------------------------- 1 | type: vertical-stack 2 | cards: 3 | - type: custom:bubble-card 4 | card_type: horizontal-buttons-stack 5 | auto_order: true 6 | 1_name: Outside Zone 7 | 1_link: "#pop-up-outside" 8 | 1_entity: light.outside_lights 9 | 1_pir_sensor: binary_sensor.front_door_sensor 10 | 1_icon: phu:rooms-porch 11 | 2_link: "#pop-up-dining" 12 | 2_name: Dining Room 13 | 2_icon: phu:rooms-dining 14 | 2_entity: light.dining_room_lights 15 | 2_pir_sensor: binary_sensor.front_door_sensor 16 | 3_link: "#pop-up-down-bath-room" 17 | 3_name: Downstairs Bathroom 18 | 3_icon: mdi:toilet 19 | 3_entity: light.downstairs_bathroom_lights 20 | 3_pir_sensor: binary_sensor.downstairs_bathroom_door 21 | 4_link: "#pop-up-office" 22 | 4_name: Office 23 | 4_icon: mdi:office-building 24 | 4_entity: light.office_lights 25 | 4_pir_sensor: binary_sensor.presence_sensor_fp2_175a_presence_sensor_1 26 | 5_link: "#pop-up-kitchen" 27 | 5_name: Kitchen 28 | 5_icon: phu:rooms-kitchen 29 | 5_entity: light.kitchen_lights 30 | 5_pir_sensor: input_boolean.kitchen_dot_ultrasonic_motion 31 | 6_link: "#pop-up-living-room" 32 | 6_name: Living Room 33 | 6_icon: hue:room-living 34 | 6_entity: light.living_room_lights 35 | 6_pir_sensor: binary_sensor.presence_sensor_fp2_f9d6_presence_sensor_1 36 | 7_link: "#pop-up-hallways" 37 | 7_name: Hallways 38 | 7_icon: hue:room-stairs 39 | 7_entity: light.hallway 40 | 7_pir_sensor: binary_sensor.motion_sensor 41 | 8_link: "#pop-up-master-bedroom" 42 | 8_name: Master Bedroom 43 | 8_icon: mdi:bed-king 44 | 8_entity: light.master_bedroom_lights 45 | 8_pir_sensor: binary_sensor.master_bedroom_deck_sensor 46 | 9_link: "#pop-up-lynn-bedroom" 47 | 9_name: Lynns Bedroom 48 | 9_icon: mdi:bed-double 49 | 9_entity: light.lynns_lights 50 | highlight_current_view: true 51 | 10_link: "#pop-up-theresa-bedroom" 52 | 10_name: Theresas Bedroom 53 | 10_icon: mdi:bed-double 54 | 10_entity: light.theresas_lights 55 | -------------------------------------------------------------------------------- /Example Room Card: -------------------------------------------------------------------------------- 1 | type: vertical-stack 2 | cards: 3 | - type: custom:bubble-card 4 | card_type: pop-up 5 | hash: "#pop-up-office" 6 | name: Office 7 | sub_button: [] 8 | icon: phu:rooms-office 9 | entity: sensor.temperature_and_humidity_sensor_temperature_3 10 | show_attribute: false 11 | show_state: true 12 | - type: custom:bubble-card 13 | card_type: separator 14 | name: Lights 15 | icon: phu:bulb-group 16 | - type: custom:bubble-card 17 | card_type: empty-column 18 | - type: custom:hue-like-light-card 19 | title: Office Lights 20 | icon: mdi:ceiling-fan-light 21 | slider: mushroom 22 | entities: 23 | - light.office_lights 24 | - type: custom:bubble-card 25 | card_type: empty-column 26 | - type: custom:bubble-card 27 | card_type: separator 28 | name: Sensors and Media 29 | icon: hue:sync-music 30 | sub_button: [] 31 | - type: custom:bubble-card 32 | card_type: media-player 33 | entity: media_player.office_echo_dot_3 34 | name: Office Echo Dot 35 | show_attribute: true 36 | attribute: volume_level 37 | hide: 38 | power_button: true 39 | - type: custom:bubble-card 40 | card_type: media-player 41 | entity: media_player.gaming_pc 42 | hide: 43 | power_button: true 44 | name: Gaming PC 45 | - type: custom:bubble-card 46 | card_type: button 47 | button_type: state 48 | entity: binary_sensor.presence_sensor_fp2_175a_presence_sensor_1 49 | sub_button: 50 | - entity: sensor.presence_sensor_fp2_175a_light_sensor_light_level 51 | show_state: true 52 | show_name: false 53 | - square: true 54 | type: grid 55 | cards: 56 | - type: custom:mini-graph-card 57 | name: Office Temp 58 | align_header: left 59 | align_icon: left 60 | entities: 61 | - entity: sensor.temperature_and_humidity_sensor_temperature_3 62 | - entity: sensor.temperature_and_humidity_sensor_humidity_3 63 | show_graph: false 64 | show_state: true 65 | show_points: false 66 | color_thresholds: 67 | - value: 85.2 68 | color: "#eb4d54" 69 | - value: 79.8 70 | color: "#1db954" 71 | - value: 64.4 72 | color: "#3a8df7" 73 | font_size: 85 74 | hours_to_show: 48 75 | hour24: false 76 | icon: mdi:office-building 77 | points_per_hour: 0.5 78 | show: 79 | extrema: true 80 | fill: fade 81 | - type: custom:mini-graph-card 82 | name: Office Light Level 83 | align_header: left 84 | align_icon: left 85 | entities: 86 | - entity: sensor.presence_sensor_fp2_175a_light_sensor_light_level 87 | name: office LUX 88 | color_thresholds: 89 | - value: 20 90 | color: "#eb4d54" 91 | - value: 50 92 | color: "#1db954" 93 | - value: 90 94 | color: "#3a8df7" 95 | font_size: 85 96 | hours_to_show: 24 97 | hour24: false 98 | icon: mdi:lightbulb 99 | points_per_hour: 0.5 100 | show: 101 | extrema: true 102 | fill: fade 103 | columns: 2 104 | -------------------------------------------------------------------------------- /Conditional Chips: -------------------------------------------------------------------------------- 1 | type: custom:mushroom-chips-card 2 | chips: 3 | - type: conditional 4 | conditions: 5 | - condition: numeric_state 6 | entity: sensor.weatheralerts_1 7 | above: 0 8 | chip: 9 | type: entity 10 | entity: sensor.weatheralerts_1 11 | icon_color: red 12 | tap_action: 13 | action: navigate 14 | navigation_path: "#pop-up-alerts" 15 | - type: weather 16 | entity: weather.home_weather 17 | show_conditions: true 18 | show_temperature: true 19 | - type: conditional 20 | conditions: 21 | - condition: state 22 | entity: binary_sensor.motion_sensor 23 | state: "on" 24 | chip: 25 | type: entity 26 | entity: binary_sensor.motion_sensor 27 | content_info: name 28 | icon_color: red 29 | use_entity_picture: false 30 | name: Steps 31 | - type: conditional 32 | conditions: 33 | - condition: state 34 | entity: binary_sensor.motion_sensor_2 35 | state: "on" 36 | chip: 37 | type: entity 38 | entity: binary_sensor.motion_sensor_2 39 | content_info: name 40 | icon_color: red 41 | use_entity_picture: false 42 | name: Laundry Room 43 | - type: conditional 44 | conditions: 45 | - condition: state 46 | entity: binary_sensor.front_door_sensor 47 | state: "on" 48 | chip: 49 | type: entity 50 | entity: binary_sensor.front_door_sensor 51 | name: Front Door 52 | icon_color: red 53 | content_info: name 54 | - type: conditional 55 | conditions: 56 | - condition: state 57 | entity: binary_sensor.master_bedroom_deck_sensor 58 | state: "on" 59 | chip: 60 | type: entity 61 | entity: binary_sensor.master_bedroom_deck_sensor 62 | content_info: name 63 | name: " Back Deck" 64 | icon_color: red 65 | - type: conditional 66 | conditions: 67 | - condition: state 68 | entity: binary_sensor.wyze_cam_dining_room_cam_motion 69 | state: "on" 70 | chip: 71 | type: entity 72 | entity: binary_sensor.wyze_cam_dining_room_cam_motion 73 | content_info: name 74 | name: Dining Motion 75 | - type: conditional 76 | conditions: 77 | - condition: numeric_state 78 | entity: sensor.blitzortung_lightning_counter 79 | above: 1 80 | chip: 81 | type: entity 82 | entity: sensor.blitzortung_lightning_counter 83 | icon_color: accent 84 | - type: conditional 85 | conditions: 86 | - condition: state 87 | entity: update.home_assistant_core_update 88 | state: "on" 89 | chip: 90 | type: entity 91 | entity: update.home_assistant_core_update 92 | tap_action: 93 | action: navigate 94 | navigation_path: /new-mobile-dash/mini_pc 95 | icon: mdi:home-assistant 96 | name: Core Update 97 | content_info: name 98 | icon_color: red 99 | - type: conditional 100 | conditions: 101 | - condition: state 102 | entity: update.home_assistant_operating_system_update 103 | state: "on" 104 | chip: 105 | type: entity 106 | entity: update.home_assistant_operating_system_update 107 | tap_action: 108 | action: navigate 109 | navigation_path: /new-mobile-dash/mini_pc 110 | icon: mdi:home-assistant 111 | name: OS Update 112 | content_info: name 113 | icon_color: red 114 | - type: conditional 115 | conditions: 116 | - condition: state 117 | entity: update.home_assistant_supervisor_update 118 | state: "on" 119 | chip: 120 | type: entity 121 | entity: update.home_assistant_supervisor_update 122 | tap_action: 123 | action: navigate 124 | navigation_path: /new-mobile-dash/mini_pc 125 | icon: mdi:home-assistant 126 | name: Supervisor Update 127 | content_info: name 128 | icon_color: red 129 | - type: conditional 130 | conditions: 131 | - condition: state 132 | entity: light.laundry_room_switch_1 133 | state: "on" 134 | chip: 135 | type: light 136 | entity: light.laundry_room_switch_1 137 | tap_action: 138 | action: toggle 139 | name: Laundry Room 140 | content_info: name 141 | use_light_color: false 142 | --------------------------------------------------------------------------------