Created
December 15, 2020 09:29
-
-
Save xbmcnut/47d4e37a587136a64e43bf8fda8f0b8d to your computer and use it in GitHub Desktop.
Full config for my Home Assistant photo frame dashboard
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| views: | |
| - badges: [] | |
| cards: | |
| - cards: | |
| - cards: | |
| - entity: sensor.time | |
| style: | | |
| ha-card { | |
| color: yellow; | |
| #--paper-item-icon-color: green; | |
| font-weight: bold; | |
| #font-family: Roboslab; | |
| #font-size: 80px; | |
| } | |
| type: entity | |
| - entity: sensor.processor_use | |
| name: HA CPU | |
| type: entity | |
| - entity: sensor.north_sprinkler_time_on | |
| icon: 'mdi:sprinkler' | |
| name: North Today | |
| type: entity | |
| - entity: sensor.east_sprinkler_time_on | |
| icon: 'mdi:sprinkler' | |
| name: East Today | |
| type: entity | |
| - entity: sensor.rainy_day | |
| name: Rain? | |
| type: entity | |
| - entity: sensor.hacs | |
| name: HACS | |
| type: entity | |
| - entity: sensor.tide_my_favourite_beach_next_high_time | |
| name: High Tide | |
| style: | | |
| ha-card { | |
| color: dodgerblue; | |
| #--paper-item-icon-color: green; | |
| font-weight: bold; | |
| #font-family: Roboslab; | |
| #font-size: 80px; | |
| } | |
| type: entity | |
| type: horizontal-stack | |
| - cards: | |
| - aspect_ratio: 50% | |
| camera_image: camera.proxy_driveway_720_2fps | |
| entity: camera.proxy_driveway_720_2fps | |
| show_name: false | |
| show_state: false | |
| type: picture-entity | |
| - aspect_ratio: 50% | |
| camera_image: camera.proxy_entry_720_2fps | |
| entity: camera.proxy_entry_720_2fps | |
| show_name: false | |
| show_state: false | |
| type: picture-entity | |
| - aspect_ratio: 50% | |
| camera_image: camera.proxy_deck_720_2fps | |
| entity: camera.proxy_deck_720_2fps | |
| show_name: false | |
| show_state: false | |
| type: picture-entity | |
| - aspect_ratio: 50% | |
| camera_image: camera.proxy_path_720_2fps | |
| entity: camera.proxy_path_720_2fps | |
| show_name: false | |
| show_state: false | |
| type: picture-entity | |
| - aspect_ratio: 50% | |
| camera_image: camera.last_doorbell_snapshot | |
| entity: camera.last_doorbell_snapshot | |
| show_state: false | |
| type: picture-entity | |
| - aspect_ratio: 50% | |
| camera_image: camera.last_pool_gate_snapshot | |
| entity: camera.last_pool_gate_snapshot | |
| show_state: false | |
| type: picture-entity | |
| type: horizontal-stack | |
| - cards: | |
| - color: var(--paper-card-background-color) | |
| color_type: card | |
| custom_fields: | |
| notification: > | |
| [[[ return | |
| states['sensor.deadbolt_batteries_front_door'].state | |
| ]]] | |
| entity: lock.frontdoor_deadbolt | |
| icon: 'mdi:lock' | |
| name: Deadbolt | |
| size: 48% | |
| state: | |
| - color: red | |
| icon: 'mdi:lock-open' | |
| styles: | |
| card: | |
| - animation: blink 5s ease infinite | |
| icon: | |
| - color: var(--paper-card-background-color) | |
| name: | |
| - color: var(--paper-card-background-color) | |
| value: unlocked | |
| styles: | |
| card: | |
| - height: 85px | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| icon: | |
| - color: green | |
| custom_fields: | |
| notification: | |
| - background-color: | | |
| [[[ | |
| if (states['sensor.deadbolt_batteries_front_door'].state >= 85) | |
| return "green"; | |
| return "red"; | |
| ]]] | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 75% | |
| - top: 5% | |
| - height: 18px | |
| - width: 18px | |
| - font-size: 8px | |
| - line-height: 18px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - color: var(--paper-card-background-color) | |
| color_type: card | |
| entity: cover.garage | |
| icon: 'mdi:garage' | |
| name: Garage | |
| size: 60% | |
| state: | |
| - color: red | |
| icon: 'mdi:garage-alert' | |
| styles: | |
| card: | |
| - animation: blink 5s ease infinite | |
| icon: | |
| - color: var(--paper-card-background-color) | |
| name: | |
| - color: var(--paper-card-background-color) | |
| value: open | |
| styles: | |
| card: | |
| - height: 85px | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| icon: | |
| - color: green | |
| type: 'custom:button-card' | |
| - color: green | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ return states['sensor.steel_gate_battery_level'].state | |
| ]]] | |
| entity: binary_sensor.door_window_sensor_steel_gate | |
| icon: 'mdi:gate' | |
| name: Steel | |
| size: 40% | |
| state: | |
| - color: red | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 10s ease infinite | |
| value: 'on' | |
| - color: orange | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 3s ease infinite | |
| value: unavailable | |
| - operator: default | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - background-color: | | |
| [[[ | |
| if (states['sensor.steel_gate_battery_level'].state >= 98) | |
| return "green"; | |
| return "red"; | |
| ]]] | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 75% | |
| - top: 5% | |
| - height: 18px | |
| - width: 18px | |
| - font-size: 8px | |
| - line-height: 18px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - color: green | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ return | |
| states['sensor.courtyard_gate_battery_level'].state | |
| ]]] | |
| entity: binary_sensor.door_window_sensor_courtyard | |
| icon: 'mdi:gate' | |
| name: Courtyard | |
| size: 40% | |
| state: | |
| - color: red | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 10s ease infinite | |
| value: 'on' | |
| - color: orange | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 3s ease infinite | |
| value: unavailable | |
| - operator: default | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - background-color: | | |
| [[[ | |
| if (states['sensor.courtyard_gate_battery_level'].state >= 98) | |
| return "green"; | |
| return "red"; | |
| ]]] | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 75% | |
| - top: 5% | |
| - height: 18px | |
| - width: 18px | |
| - font-size: 8px | |
| - line-height: 18px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - color: green | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ return states['sensor.pool_gate_battery_level'].state | |
| ]]] | |
| entity: binary_sensor.door_window_sensor_pool_gate | |
| icon: 'mdi:gate' | |
| name: Pool | |
| size: 40% | |
| state: | |
| - color: red | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 10s ease infinite | |
| value: 'on' | |
| - color: orange | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 3s ease infinite | |
| value: unavailable | |
| - operator: default | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - background-color: | | |
| [[[ | |
| if (states['sensor.pool_gate_battery_level'].state >= 98) | |
| return "green"; | |
| return "red"; | |
| ]]] | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 75% | |
| - top: 5% | |
| - height: 18px | |
| - width: 18px | |
| - font-size: 8px | |
| - line-height: 18px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - color: green | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ return states['sensor.beach_gate_battery_level'].state | |
| ]]] | |
| entity: binary_sensor.door_window_sensor_beach_gate | |
| icon: 'mdi:gate' | |
| name: Beach | |
| size: 40% | |
| state: | |
| - color: red | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 10s ease infinite | |
| value: 'on' | |
| - color: orange | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 3s ease infinite | |
| value: unavailable | |
| - operator: default | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - background-color: | | |
| [[[ | |
| if (states['sensor.beach_gate_battery_level'].state >= 98) | |
| return "green"; | |
| return "red"; | |
| ]]] | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 75% | |
| - top: 5% | |
| - height: 18px | |
| - width: 18px | |
| - font-size: 8px | |
| - line-height: 18px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - color: green | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ return states['sensor.north_gate_battery_level'].state | |
| ]]] | |
| entity: binary_sensor.door_window_sensor_north_gate | |
| icon: 'mdi:gate' | |
| name: North | |
| size: 40% | |
| state: | |
| - color: red | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 10s ease infinite | |
| value: 'on' | |
| - color: orange | |
| icon: 'mdi:gate' | |
| styles: | |
| icon: | |
| - animation: blink 3s ease infinite | |
| value: unavailable | |
| - operator: default | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - background-color: | | |
| [[[ | |
| if (states['sensor.north_gate_battery_level'].state >= 98) | |
| return "green"; | |
| return "red"; | |
| ]]] | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 75% | |
| - top: 5% | |
| - height: 18px | |
| - width: 18px | |
| - font-size: 8px | |
| - line-height: 18px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - color: green | |
| color_type: icon | |
| entity: calendar.bottle_collection | |
| icon: 'mdi:recycle' | |
| name: Recycling | |
| size: 40% | |
| state: | |
| - color: green | |
| icon: 'mdi:recycle' | |
| styles: | |
| icon: | |
| - animation: blink 3s ease infinite | |
| value: 'on' | |
| - operator: default | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(0,255,0,.6)' | |
| type: 'custom:button-card' | |
| - color: green | |
| color_type: icon | |
| entity: calendar.rubbish_collection | |
| icon: 'mdi:delete' | |
| name: Rubbish | |
| size: 40% | |
| state: | |
| - color: red | |
| icon: 'mdi:delete-empty' | |
| styles: | |
| icon: | |
| - animation: blink 3s ease infinite | |
| value: 'on' | |
| - operator: default | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,0,0,.6)' | |
| type: 'custom:button-card' | |
| - entity: fan.template_bedroom_fan | |
| icon: 'mdi:fan' | |
| name: Master | |
| size: 40% | |
| state: | |
| - color: 'rgb(0, 0, 230)' | |
| spin: true | |
| value: 'on' | |
| - color: 'rgb(28, 128, 199)' | |
| value: 'off' | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - entity: fan.template_david_fan | |
| icon: 'mdi:fan' | |
| name: David | |
| size: 40% | |
| state: | |
| - color: 'rgb(0, 0, 230)' | |
| spin: true | |
| value: 'on' | |
| - color: 'rgb(28, 128, 199)' | |
| value: 'off' | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - entity: switch.office_aircon_ts_auto | |
| icon: 'mdi:air-conditioner' | |
| name: Office | |
| size: 35% | |
| state: | |
| - color: green | |
| spin: true | |
| value: 'on' | |
| - color: 'rgb(28, 128, 199)' | |
| value: 'off' | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - entity: climate.family_ac | |
| icon: 'mdi:air-conditioner' | |
| name: Family | |
| size: 35% | |
| state: | |
| - color: green | |
| spin: true | |
| value: 'on' | |
| - color: 'rgb(28, 128, 199)' | |
| value: 'off' | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - entity: switch.lounge_heat_pump | |
| icon: 'mdi:air-conditioner' | |
| name: Lounge | |
| size: 35% | |
| state: | |
| - color: green | |
| spin: true | |
| value: 'on' | |
| - color: 'rgb(28, 128, 199)' | |
| value: 'off' | |
| styles: | |
| card: | |
| - height: 85px | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| type: horizontal-stack | |
| - cards: | |
| - animate: true | |
| color_thresholds: | |
| - color: '#0012ff' | |
| value: 5 | |
| - color: '#0032ff' | |
| value: 10 | |
| - color: '#0084ff' | |
| value: 15 | |
| - color: '#00d4ff' | |
| value: 20 | |
| - color: '#00ff83' | |
| value: 25 | |
| - color: '#3eff00' | |
| value: 30 | |
| - color: '#fdff00' | |
| value: 35 | |
| - color: '#FFd200' | |
| value: 40 | |
| color_thresholds_transition: hard | |
| entities: | |
| - entity: sensor.temperature_xiaomi_office | |
| hours_to_show: 12 | |
| icon: 'mdi:thermometer' | |
| name: Office | |
| points_per_hour: 1 | |
| show: | |
| graph: line | |
| legend: false | |
| style: > | |
| ha-card {--label-badge-text-color: #b58e31; | |
| --paper-item-icon-color: dodgerblue; | |
| border: 1px solid grey;} | |
| type: 'custom:mini-graph-card' | |
| - animate: true | |
| color_thresholds: | |
| - color: '#0012ff' | |
| value: 5 | |
| - color: '#0032ff' | |
| value: 10 | |
| - color: '#0084ff' | |
| value: 15 | |
| - color: '#00d4ff' | |
| value: 20 | |
| - color: '#00ff83' | |
| value: 25 | |
| - color: '#3eff00' | |
| value: 30 | |
| - color: '#fdff00' | |
| value: 35 | |
| - color: '#FFd200' | |
| value: 40 | |
| color_thresholds_transition: hard | |
| entities: | |
| - entity: sensor.bathroom_sensor_temperature | |
| hours_to_show: 12 | |
| icon: 'mdi:thermometer' | |
| name: Bathroom | |
| points_per_hour: 1 | |
| show: | |
| graph: line | |
| style: > | |
| ha-card {--label-badge-text-color: #b58e31; | |
| --paper-item-icon-color: dodgerblue; | |
| border: 1px solid grey;} | |
| type: 'custom:mini-graph-card' | |
| - animate: true | |
| color_thresholds: | |
| - color: '#0012ff' | |
| value: 5 | |
| - color: '#0032ff' | |
| value: 10 | |
| - color: '#0084ff' | |
| value: 15 | |
| - color: '#00d4ff' | |
| value: 20 | |
| - color: '#00ff83' | |
| value: 25 | |
| - color: '#3eff00' | |
| value: 30 | |
| - color: '#fdff00' | |
| value: 35 | |
| - color: '#FFd200' | |
| value: 40 | |
| color_thresholds_transition: hard | |
| entities: | |
| - entity: sensor.temperature_xiaomi_guest | |
| hours_to_show: 12 | |
| icon: 'mdi:thermometer' | |
| name: Guest | |
| points_per_hour: 1 | |
| show: | |
| graph: line | |
| legend: false | |
| style: > | |
| ha-card {--label-badge-text-color: #b58e31; | |
| --paper-item-icon-color: dodgerblue; | |
| border: 1px solid grey;} | |
| type: 'custom:mini-graph-card' | |
| - animate: true | |
| color_thresholds: | |
| - color: '#0012ff' | |
| value: 5 | |
| - color: '#0032ff' | |
| value: 10 | |
| - color: '#0084ff' | |
| value: 15 | |
| - color: '#00d4ff' | |
| value: 20 | |
| - color: '#00ff83' | |
| value: 25 | |
| - color: '#3eff00' | |
| value: 30 | |
| - color: '#fdff00' | |
| value: 35 | |
| - color: '#FFd200' | |
| value: 40 | |
| color_thresholds_transition: hard | |
| entities: | |
| - entity: sensor.foyer_plant_temperature | |
| hours_to_show: 12 | |
| icon: 'mdi:thermometer' | |
| name: Foyer | |
| points_per_hour: 1 | |
| show: | |
| graph: line | |
| style: > | |
| ha-card {--label-badge-text-color: #b58e31; | |
| --paper-item-icon-color: dodgerblue; | |
| border: 1px solid grey;} | |
| type: 'custom:mini-graph-card' | |
| - animate: true | |
| color_thresholds: | |
| - color: '#0012ff' | |
| value: 5 | |
| - color: '#0032ff' | |
| value: 10 | |
| - color: '#0084ff' | |
| value: 15 | |
| - color: '#00d4ff' | |
| value: 20 | |
| - color: '#00ff83' | |
| value: 25 | |
| - color: '#3eff00' | |
| value: 30 | |
| - color: '#fdff00' | |
| value: 35 | |
| - color: '#FFd200' | |
| value: 40 | |
| color_thresholds_transition: hard | |
| entities: | |
| - entity: sensor.ensuite_sensor_temperature | |
| hours_to_show: 12 | |
| icon: 'mdi:thermometer' | |
| name: Ensuite | |
| points_per_hour: 1 | |
| show: | |
| graph: line | |
| style: > | |
| ha-card {--label-badge-text-color: #b58e31; | |
| --paper-item-icon-color: dodgerblue; | |
| border: 1px solid grey;} | |
| type: 'custom:mini-graph-card' | |
| - animate: true | |
| color_thresholds: | |
| - color: '#0012ff' | |
| value: 5 | |
| - color: '#0032ff' | |
| value: 10 | |
| - color: '#0084ff' | |
| value: 15 | |
| - color: '#00d4ff' | |
| value: 20 | |
| - color: '#00ff83' | |
| value: 25 | |
| - color: '#3eff00' | |
| value: 30 | |
| - color: '#fdff00' | |
| value: 35 | |
| - color: '#FFd200' | |
| value: 40 | |
| color_thresholds_transition: hard | |
| entities: | |
| - entity: sensor.temperature_xiaomi_kitchen | |
| hours_to_show: 12 | |
| icon: 'mdi:thermometer' | |
| name: Kitchen | |
| points_per_hour: 1 | |
| show: | |
| graph: line | |
| style: > | |
| ha-card {--label-badge-text-color: #b58e31; | |
| --paper-item-icon-color: dodgerblue; | |
| border: 1px solid grey;} | |
| type: 'custom:mini-graph-card' | |
| - animate: true | |
| color_thresholds: | |
| - color: '#0012ff' | |
| value: 5 | |
| - color: '#0032ff' | |
| value: 10 | |
| - color: '#0084ff' | |
| value: 15 | |
| - color: '#00d4ff' | |
| value: 20 | |
| - color: '#00ff83' | |
| value: 25 | |
| - color: '#3eff00' | |
| value: 30 | |
| - color: '#fdff00' | |
| value: 35 | |
| - color: '#FFd200' | |
| value: 40 | |
| color_thresholds_transition: hard | |
| entities: | |
| - entity: sensor.lounge_plant_temperature | |
| hours_to_show: 12 | |
| icon: 'mdi:thermometer' | |
| name: Lounge | |
| points_per_hour: 1 | |
| show: | |
| graph: line | |
| style: > | |
| ha-card {--label-badge-text-color: #b58e31; | |
| --paper-item-icon-color: dodgerblue; | |
| border: 1px solid grey;} | |
| type: 'custom:mini-graph-card' | |
| type: horizontal-stack | |
| - cards: | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ var bri = Math.round(entity.attributes.brightness / | |
| 2.55); if | |
| (entity.state === 'on') return (bri ? (bri+"%") : '') ]]] | |
| entity: light.rumpus_lights | |
| hold_action: | |
| action: more-info | |
| name: Rumpus | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 63% | |
| - top: 5% | |
| - height: 40px | |
| - width: 40px | |
| - font-size: 12px | |
| - line-height: 20px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: auto | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ var bri = Math.round(entity.attributes.brightness / | |
| 2.55); if | |
| (entity.state === 'on') return (bri ? (bri+"%") : '') ]]] | |
| entity: light.gateway_light | |
| name: Gateway | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 56% | |
| - top: 3% | |
| - height: 50px | |
| - width: 50px | |
| - font-size: 12px | |
| - line-height: 20px | |
| grid: | |
| - position: relative | |
| tap_action: | |
| action: more-info | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| entity: light.stair_lights | |
| name: Stairs | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| entity: light.colditz | |
| icon: 'mdi:spotlight' | |
| name: Garage | |
| size: 50% | |
| state: | |
| - color: yellow | |
| styles: | |
| icon: | |
| - animation: blink 3s ease infinite | |
| value: 'on' | |
| - color: orange | |
| styles: | |
| icon: | |
| - animation: blink 3s ease infinite | |
| value: unavailable | |
| - operator: default | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| entity: light.foyer_front_light | |
| name: Foyer | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ var bri = Math.round(entity.attributes.brightness / | |
| 2.55); if | |
| (entity.state === 'on') return (bri ? (bri+"%") : '') ]]] | |
| entity: light.tuya_dimmer | |
| hold_action: | |
| action: more-info | |
| name: Master | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 62% | |
| - top: 5% | |
| - height: 40px | |
| - width: 40px | |
| - font-size: 12px | |
| - line-height: 20px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ var bri = Math.round(entity.attributes.brightness / | |
| 2.55); if | |
| (entity.state === 'on') return (bri ? (bri+"%") : '') ]]] | |
| entity: light.shelly_dimmer_kitchen | |
| hold_action: | |
| action: more-info | |
| name: Kitchen | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 62% | |
| - top: 5% | |
| - height: 40px | |
| - width: 40px | |
| - font-size: 12px | |
| - line-height: 20px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| entity: light.family_room_lamp | |
| icon: 'mdi:floor-lamp' | |
| name: Lamp | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ var bri = Math.round(entity.attributes.brightness / | |
| 2.55); if | |
| (entity.state === 'on') return (bri ? (bri+"%") : '') ]]] | |
| entity: light.shelly_dimmer_lounge | |
| hold_action: | |
| action: more-info | |
| name: Lounge | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 62% | |
| - top: 5% | |
| - height: 40px | |
| - width: 40px | |
| - font-size: 12px | |
| - line-height: 20px | |
| grid: | |
| - position: relative | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| entity: light.bottle_lights | |
| icon: 'mdi:bottle-tonic-outline' | |
| name: Bottles | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: yellow | |
| color_type: icon | |
| entity: light.pool_light | |
| icon: 'mdi:spotlight' | |
| name: Deck | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| type: 'custom:button-card' | |
| - aspect_ratio: 1.3/1 | |
| color: auto | |
| color_type: icon | |
| custom_fields: | |
| notification: > | |
| [[[ var bri = Math.round(entity.attributes.brightness / | |
| 2.55); if | |
| (entity.state === 'on') return (bri ? (bri+"%") : '') ]]] | |
| entity: light.pool_led | |
| name: Pool LED | |
| size: 50% | |
| styles: | |
| card: | |
| - border-radius: 3% | |
| - border: 'solid 2px rgba(255,255,255,.2)' | |
| custom_fields: | |
| notification: | |
| - border-radius: 50% | |
| - position: absolute | |
| - left: 63% | |
| - top: 5% | |
| - height: 40px | |
| - width: 40px | |
| - font-size: 12px | |
| - line-height: 20px | |
| grid: | |
| - position: relative | |
| tap_action: | |
| action: more-info | |
| type: 'custom:button-card' | |
| type: horizontal-stack | |
| - cards: | |
| - entity: sensor.humidity_xiaomi_outside | |
| font_size: 1em | |
| gauge: | |
| animatedValue: true | |
| borders: true | |
| colorBorderInner: '#111' | |
| colorBorderInnerEnd: '#333' | |
| colorBorderMiddle: '#222' | |
| colorBorderMiddleEnd: '#111' | |
| colorBorderOuter: '#333' | |
| colorBorderOuterEnd: '#111' | |
| colorNumbers: '#ccc' | |
| colorPlate: '' | |
| colorTitle: '#f5f5f5' | |
| colorUnits: '#f5f5f5' | |
| height: 200 | |
| highlights: | |
| - color: 'rgba(74, 123, 180, .75)' | |
| from: 0 | |
| to: 40 | |
| - color: 'rgba(4, 205, 24, .75)' | |
| from: 40 | |
| to: 70 | |
| - color: 'rgba(239, 93, 13, .75)' | |
| from: 70 | |
| to: 100 | |
| majorTicks: | |
| - '0' | |
| - '10' | |
| - '20' | |
| - '30' | |
| - '40' | |
| - '50' | |
| - '60' | |
| - '70' | |
| - '80' | |
| - '90' | |
| - '100' | |
| maxValue: 100 | |
| minValue: 0 | |
| minorTicks: 5 | |
| startAngle: 45 | |
| strokeTicks: true | |
| ticksAngle: 270 | |
| title: Outside Humidity | |
| type: radial-gauge | |
| units: (%) | |
| valueBox: true | |
| valueDec: 1 | |
| valueInt: 2 | |
| width: 205 | |
| type: 'custom:canvas-gauge-card' | |
| - entity: sensor.temperature_xiaomi_outside | |
| font_size: 1em | |
| gauge: | |
| animatedValue: true | |
| borders: true | |
| colorBorderInner: '#111' | |
| colorBorderInnerEnd: '#333' | |
| colorBorderMiddle: '#222' | |
| colorBorderMiddleEnd: '#111' | |
| colorBorderOuter: '#333' | |
| colorBorderOuterEnd: '#111' | |
| colorNumbers: '#ccc' | |
| colorPlate: '' | |
| colorTitle: '#f5f5f5' | |
| colorUnits: '#f5f5f5' | |
| height: 200 | |
| highlights: | |
| - color: 'rgba(0, 68, 255, .75)' | |
| from: 0 | |
| to: 5 | |
| - color: 'rgba(74, 123, 180, .75)' | |
| from: 5 | |
| to: 15 | |
| - color: 'rgba(4, 205, 24, .75)' | |
| from: 15 | |
| to: 25 | |
| - color: 'rgba(239, 93, 13, .75)' | |
| from: 25 | |
| to: 40 | |
| majorTicks: | |
| - '0' | |
| - '5' | |
| - '10' | |
| - '15' | |
| - '20' | |
| - '25' | |
| - '30' | |
| - '35' | |
| - '40' | |
| maxValue: 40 | |
| minValue: 0 | |
| minorTicks: 5 | |
| startAngle: 45 | |
| strokeTicks: true | |
| ticksAngle: 270 | |
| title: Outside Temp | |
| type: radial-gauge | |
| units: °C | |
| valueBox: true | |
| valueDec: 1 | |
| valueInt: 2 | |
| width: 205 | |
| type: 'custom:canvas-gauge-card' | |
| - entity: sensor.pool_temperature | |
| font_size: 1em | |
| gauge: | |
| animatedValue: true | |
| borders: true | |
| colorBorderInner: '#111' | |
| colorBorderInnerEnd: '#333' | |
| colorBorderMiddle: '#222' | |
| colorBorderMiddleEnd: '#111' | |
| colorBorderOuter: '#333' | |
| colorBorderOuterEnd: '#111' | |
| colorNumbers: '#ccc' | |
| colorPlate: '' | |
| colorTitle: '#f5f5f5' | |
| colorUnits: '#f5f5f5' | |
| height: 200 | |
| highlights: | |
| - color: 'rgba(0, 68, 255, .75)' | |
| from: 5 | |
| to: 21 | |
| - color: 'rgba(4, 205, 24, .75)' | |
| from: 21 | |
| to: 26 | |
| - color: 'rgba(239, 93, 13, .75)' | |
| from: 26 | |
| to: 40 | |
| majorTicks: | |
| - '5' | |
| - '10' | |
| - '15' | |
| - '20' | |
| - '25' | |
| - '30' | |
| - '35' | |
| - '40' | |
| maxValue: 40 | |
| minValue: 5 | |
| minorTicks: 5 | |
| startAngle: 45 | |
| strokeTicks: true | |
| ticksAngle: 270 | |
| title: Pool Temp | |
| type: radial-gauge | |
| units: °C | |
| valueBox: true | |
| valueDec: 1 | |
| valueInt: 2 | |
| width: 205 | |
| type: 'custom:canvas-gauge-card' | |
| - entity: sensor.spa_temperature | |
| font_size: 1em | |
| gauge: | |
| animatedValue: true | |
| borders: true | |
| colorBorderInner: '#111' | |
| colorBorderInnerEnd: '#333' | |
| colorBorderMiddle: '#222' | |
| colorBorderMiddleEnd: '#111' | |
| colorBorderOuter: '#333' | |
| colorBorderOuterEnd: '#111' | |
| colorNumbers: '#ccc' | |
| colorPlate: '' | |
| colorTitle: '#f5f5f5' | |
| colorUnits: '#f5f5f5' | |
| height: 200 | |
| highlights: | |
| - color: 'rgba(0, 68, 255, .75)' | |
| from: 5 | |
| to: 38 | |
| - color: 'rgba(4, 205, 24, .75)' | |
| from: 38 | |
| to: 41 | |
| - color: 'rgba(239, 93, 13, .75)' | |
| from: 41 | |
| to: 45 | |
| majorTicks: | |
| - '5' | |
| - '10' | |
| - '15' | |
| - '20' | |
| - '25' | |
| - '30' | |
| - '35' | |
| - '40' | |
| - '45' | |
| maxValue: 45 | |
| minValue: 5 | |
| minorTicks: 5 | |
| startAngle: 45 | |
| strokeTicks: true | |
| ticksAngle: 270 | |
| title: Spa Temp | |
| type: radial-gauge | |
| units: °C | |
| valueBox: true | |
| valueDec: 1 | |
| valueInt: 2 | |
| width: 205 | |
| type: 'custom:canvas-gauge-card' | |
| - entities: | |
| - entity: input_boolean.swimming_season | |
| name: Swim Season | |
| - entity: input_select.pool_pump | |
| - entity: sensor.aggregate_pool_level | |
| name: Pool Level | |
| show_header_toggle: false | |
| type: entities | |
| - entities: | |
| - entity: sensor.pool_pump_time_on | |
| name: Pump Hrs | |
| - entity: sensor.w_reg12 | |
| entity_row: true | |
| height: 30 | |
| icon: 'mdi:transmission-tower' | |
| max: 12000 | |
| name: Power | |
| severity: | |
| - color: Green | |
| from: 0 | |
| to: 1000 | |
| - color: Orange | |
| from: 1000 | |
| to: 5000 | |
| - color: Red | |
| from: 5000 | |
| to: 12000 | |
| type: 'custom:bar-card' | |
| - entity: sensor.spa_element_power | |
| entity_row: true | |
| height: 30 | |
| icon: 'mdi:hot-tub' | |
| max: 3500 | |
| name: SPA | |
| severity: | |
| - color: Green | |
| from: 0 | |
| to: 1000 | |
| - color: Orange | |
| from: 1000 | |
| to: 2000 | |
| - color: Red | |
| from: 2000 | |
| to: 3500 | |
| type: 'custom:bar-card' | |
| - entity: sensor.hwc_element_status | |
| entity_row: true | |
| height: 30 | |
| icon: 'mdi:water-boiler' | |
| max: 3500 | |
| name: HWC | |
| severity: | |
| - color: Green | |
| from: 0 | |
| to: 0 | |
| - color: Red | |
| from: 1 | |
| to: 1 | |
| type: 'custom:bar-card' | |
| show_header_toggle: false | |
| theme: '' | |
| type: entities | |
| type: horizontal-stack | |
| type: vertical-stack | |
| icon: 'mdi:tablet' | |
| panel: true | |
| path: tablets | |
| theme: slate | |
| title: tablets | |
| visible: | |
| - user: 1aab1dfa28b9485880ae010f21db6976 | |
| - user: 1bcb704e16984480a82b6e9bdf61ae22 | |
| - badges: [] | |
| cards: | |
| - cards: | |
| - color_stops: | |
| '40': '#3443eb' | |
| '42': '#3443eb' | |
| '45': '#3465eb' | |
| '50': '#3474eb' | |
| '55': '#f7911b' | |
| '60': '#f76c1b' | |
| '65': '#f74b1b' | |
| '70': '#1bf7da' | |
| '75': '#1bf794' | |
| '80': '#8f040e' | |
| entities: | |
| - area: iGrill Temp | |
| decimals: 1 | |
| entity: sensor.igrill_thermometer | |
| icon: 'mdi:thermometer' | |
| name: [] | |
| - decimals: 0 | |
| entity: input_number.igrill_probe_1_target | |
| name: Preset | |
| - decimals: 0 | |
| entity: sensor.igrill_battery | |
| name: Battery | |
| horseshoe_scale: | |
| color: var(--primary-background-color) | |
| max: 80 | |
| min: 40 | |
| width: 6 | |
| horseshoe_state: | |
| color: '#FFF6E3' | |
| layout: | |
| areas: | |
| - entity_index: 0 | |
| id: 0 | |
| styles: | |
| - font-size: 0.7em; | |
| xpos: 50 | |
| ypos: 85 | |
| hlines: | |
| - color: '#FFF6E3' | |
| id: 0 | |
| length: 40 | |
| styles: | |
| - stroke: var(--primary-text-color); | |
| - stroke-width: 5; | |
| - opacity: 0.9; | |
| - stroke-linecap: round; | |
| xpos: 50 | |
| ypos: 38 | |
| names: | |
| - entity_index: 0 | |
| id: 0 | |
| styles: | |
| - font-size: 1.2em; | |
| xpos: 50 | |
| ypos: 100 | |
| - entity_index: 1 | |
| id: 1 | |
| styles: | |
| - font-size: 0.8em; | |
| - text-anchor: end; | |
| - opacity: 0.7; | |
| xpos: 46 | |
| ypos: 62 | |
| - entity_index: 2 | |
| id: 2 | |
| styles: | |
| - font-size: 0.8em; | |
| - text-anchor: start; | |
| - opacity: 0.7; | |
| xpos: 54 | |
| ypos: 62 | |
| states: | |
| - entity_index: 0 | |
| id: 0 | |
| styles: | |
| - font-size: 3em; | |
| - opacity: 0.9; | |
| xpos: 50 | |
| ypos: 30 | |
| - entity_index: 1 | |
| id: 1 | |
| styles: | |
| - font-size: 1.5em; | |
| - text-anchor: end; | |
| xpos: 46 | |
| ypos: 54 | |
| - entity_index: 2 | |
| id: 2 | |
| styles: | |
| - font-size: 1.5em; | |
| - text-anchor: start; | |
| xpos: 54 | |
| ypos: 54 | |
| vlines: | |
| - id: 0 | |
| length: 20 | |
| styles: | |
| - stroke: var(--primary-text-color); | |
| - opacity: 0.5; | |
| - stroke-width: 2; | |
| - stroke-linecap: round; | |
| xpos: 50 | |
| ypos: 56 | |
| show: | |
| horseshoe_style: lineargradient | |
| scale_tickmarks: true | |
| type: 'custom:flex-horseshoe-card' | |
| - entities: | |
| - entity: input_number.igrill_probe_1_target | |
| - entity: sensor.igrill_pretarget_alert_temp_probe_1 | |
| - entity: sensor.igrill_target_alert_temp_probe_1 | |
| - entity: automation.announce_igrill_offline | |
| - entity: automation.announce_igrill_online | |
| - entity: automation.announce_igrill_probe_1_at_prealert_temp | |
| - entity: automation.announce_igrill_probe_1_at_target_temp | |
| - entity: input_select.igrill_meat_selection | |
| show_header_toggle: false | |
| title: Weber iGrill | |
| type: entities | |
| state_color: true | |
| type: horizontal-stack | |
| icon: 'mdi:thermometer' | |
| panel: true | |
| path: thermometer | |
| title: iGrill | |
| - badges: [] | |
| cards: | |
| - cards: | |
| - aspect_ratio: 0% | |
| camera_image: camera.proxy_entry_720_2fps | |
| camera_view: live | |
| entities: | |
| - entity: lock.frontdoor_deadbolt | |
| - entity: light.foyer_front_light | |
| - entity: script.activate_gateway_siren | |
| image: 'https://demo.home-assistant.io/stub_config/kitchen.png' | |
| type: picture-glance | |
| type: horizontal-stack | |
| icon: 'mdi:cctv' | |
| panel: true | |
| path: camera | |
| - badges: [] | |
| cards: | |
| - aspect_ratio: 50% | |
| type: iframe | |
| url: >- | |
| https://embed.windy.com/embed2.html?lat=-36.851&lon=174.768&zoom=5&level=surface&overlay=wind&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=-36.851&detailLon=174.768&metricWind=default&metricTemp=default&radarRange=-1 | |
| icon: 'mdi:cloud' | |
| panel: true | |
| path: wind | |
| title: '' |
Author
xbmcnut
commented
Dec 15, 2020
Congratulations, very nice work,.
This is really nice. I'm having trouble integrating this in my config. Can you help me identify where exactly the canvas-gauge-card.js file needs to be placed. I keep getting a custom element doesn't exist error.
Apologies @Eddenm, been on holiday. Did you figure it out? If not, use HACS to install fully or place the .js file here:
config\www\community\canvas-gauge-card
I'm not sure of the path to put under http://haipaddress/config/lovelace/resources but let me know you're installing manually and that's the bit your stuck on.
Thanks @xbmcnut - I did manage to figure it out - I had placed the call to the resources in the wrong place. Spent a little more time than I would have liked troubleshooting (as should have been obvious), but when I eventually got the right place - it all kicked into gear! Thanks for the response and for the great inspiration!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment