Skip to content

Instantly share code, notes, and snippets.

@vigonotion
Created December 13, 2020 20:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vigonotion/58134388e957099719d62abe6e11c115 to your computer and use it in GitHub Desktop.
Save vigonotion/58134388e957099719d62abe6e11c115 to your computer and use it in GitHub Desktop.
button_card_templates:
homekit:
aspect_ratio: 1/1
hold_action:
action: more-info
show_label: true
show_state: true
color_type: card
color: '#232321'
size: 28px
styles:
card:
- filter: opacity(100%)
- background: '#1b1b1c'
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-rows: 1fr min-content min-content min-content
- grid-template-columns: 1fr
- margin-bottom: 4px
icon:
- font-size: 20px
img_cell:
- justify-content: start
- align-items: start
- margin-left: 16px
label:
- justify-self: start
- padding-left: 10px
- font-size: 11px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 11px
state:
- justify-self: start
- padding-left: 10px
- font-size: 11px
state:
- value: unavailable
styles:
icon:
- color: '#ff7f7f'
name:
- color: '#ff7f7f'
card:
- background: '#262020'
- operator: template
value: >
[[[ return entity !== undefined && entity.entity_id.split(".")[0] ==
"binary_sensor" && entity.state == "on"; ]]]
styles:
icon:
- color: '#9DBAFF'
name:
- color: '#9DBAFF'
card:
- background: '#1D1D24'
- operator: template
value: |
[[[
let domain = entity === undefined ? "" : entity.entity_id.split(".")[0];
return entity !== undefined && domain != "sensor" && entity.state != "off" && entity.state != "closed";
]]]
styles:
icon:
- color: '#FFDF9D'
name:
- color: '#FFDF9D'
card:
- background: '#232321'
homekit_banner:
size: 32px
styles:
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: min-content max-content
- grid-template-rows: 1fr
icon:
- color: var(--paper-item-icon-color)
img_cell:
- justify-content: start
- align-items: start
- margin-left: 16px
name:
- margin-left: 16px
homekit_label:
template: homekit
homekit_last_changed:
show_last_changed: true
tap_action:
action: more-info
template: homekit_label
homekit_scene:
size: 28px
styles:
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: min-content max-content
- grid-template-rows: 1fr
icon:
- color: var(--paper-item-icon-color)
img_cell:
- justify-content: start
- align-items: start
- margin-left: 16px
name:
- margin-left: 16px
- font-size: 11px
homekit_person:
size: 28px
show_state: false
show_entity_picture: true
styles:
grid:
- grid-template-areas: '"i n x s homeicon battery"'
- grid-template-columns: min-content min-content 1fr min-content min-content
- grid-template-rows: 1fr
custom_fields:
battery:
- margin-right: 16px
- margin-top: '-5px'
homeicon:
- margin-right: 4px
- margin-top: '-5px'
icon:
- color: var(--paper-item-icon-color)
- border-radius: 100px
img_cell:
- align-items: start
- margin-left: 16px
name:
- margin-left: 8px
- font-size: 11px
state:
- font-size: 11px
- margin-right: 4px
homekit_sensor:
styles:
icon: null
label:
- color: inherit
- opacity: 0.6
tap_action:
action: more-info
template: homekit
homekit_title:
styles:
card:
- box-shadow: none
- background: transparent
- height: 30px
- padding: 0
- padding-top: 10px
- margin-left: 4px
name:
- justify-self: start
- font-weight: bold
- font-size: .8em
- text-transform: uppercase
views:
- icon: 'mdi:home'
path: home
badges: []
cards:
- type: vertical-stack
cards:
- name: |
[[[
let greeting = "Hallo";
let hour = new Date().getHours();
if(hour < 3) {
greeting = "Gute Nacht";
} else if(hour < 6) {
greeting = "Hallo";
} else if(hour <= 10) {
greeting = "Guten Morgen";
} else if(hour <= 14) {
greeting = "Guten Tag";
} else if(hour <= 17) {
greeting = "Moin";
} else if(hour <= 21) {
greeting = "Guten Abend";
} else if(hour <= 23) {
greeting = "Gute Nacht";
}
return greeting + ", " + hass.user.name;
]]]
template: homekit_title
type: 'custom:button-card'
- type: grid
square: false
columns: 2
cards:
- entity: person.person1
template: homekit_person
type: 'custom:button-card'
name: >
[[[ return hass.user.name == "person2" || hass.user.name == "person4"
? "Mama" : "person1"; ]]]
custom_fields:
battery: |
[[[
return `<ha-icon
icon="mdi:battery-unknown"
style="width: 16px; height: 16px;">
</ha-icon>`
]]]
homeicon: |
[[[
return `<ha-icon
icon="mdi:${states['person.person1'].state == 'home' ? 'home' : 'home-export-outline'}"
style="width: 16px; height: 16px;">
</ha-icon>`
]]]
- entity: person.tom
template: homekit_person
type: 'custom:button-card'
custom_fields:
battery: |
[[[
let level = Math.round(parseInt(states['sensor.person2s_oneplus_8t_akkustand'].state)/10) * 10;
return `<ha-icon
icon="mdi:battery${states['sensor.person2s_oneplus_8t_akkustatus'].state == "charging" ? "-charging" : "" }${level == 100 ? "" : "-" + level}"
style="width: 16px; height: 16px; ${parseInt(states['sensor.person2s_oneplus_8t_akkustand'].state) < 15 ? "color: #e74c3c" : ""}">
</ha-icon>`
]]]
homeicon: |
[[[
return `<ha-icon
icon="mdi:${states['person.tom'].state == 'home' ? 'home' : 'home-export-outline'}"
style="width: 16px; height: 16px;">
</ha-icon>`
]]]
- entity: person.person3
name: >
[[[ return hass.user.name == "person2" || hass.user.name == "person4"
? "Papa" : "person3"; ]]]
template: homekit_person
type: 'custom:button-card'
custom_fields:
battery: |
[[[
let level = Math.round(parseInt(states['sensor.person3_battery_level'].state)/10) * 10;
return `<ha-icon
icon="mdi:battery${states['sensor.person3_battery_state'].state == "charging" ? "-charging" : "" }${level == 100 ? "" : ("-" + level)}"
style="width: 16px; height: 16px; ${parseInt(states['sensor.person3_battery_level'].state) < 15 ? "color: #e74c3c" : ""}">
</ha-icon>`
]]]
homeicon: |
[[[
return `<ha-icon
icon="mdi:${states['person.person3'].state == 'home' ? 'home' : 'home-export-outline'}"
style="width: 16px; height: 16px;">
</ha-icon>`
]]]
- entity: person.person4
template: homekit_person
type: 'custom:button-card'
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: person4
card:
type: vertical-stack
cards:
- type: picture
image: /local/person4.jpg
tap_action:
action: none
hold_action:
action: none
- type: history-graph
entities:
- entity: person.person4
hours_to_show: 24
refresh_interval: 0
- type: sensor
entity: sensor.person4_battery_level
graph: line
name: Akku
deviceID:
- this
custom_fields:
battery: |
[[[
let level = Math.round(parseInt(states['sensor.person4_battery_level'].state)/10) * 10;
return `<ha-icon
icon="mdi:battery${states['sensor.person4_battery_state'].state == "charging" ? "-charging" : "" }${level == 100 ? "" : "-" + level}"
style="width: 16px; height: 16px; ${parseInt(states['sensor.person4_battery_level'].state) < 15 ? "color: #e74c3c" : ""}">
</ha-icon>`
]]]
homeicon: |
[[[
return `<ha-icon
icon="mdi:${states['person.person4'].state == 'home' ? 'home' : 'home-export-outline'}"
style="width: 16px; height: 16px;">
</ha-icon>`
]]]
- icon: 'mdi:face-profile'
path: tom
badges: []
cards:
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: homekit_title
name: Szenen
- type: grid
square: false
columns: 2
cards:
- entity: scene.tom_abends
name: Abends
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.tom_abends
template: homekit_scene
type: 'custom:button-card'
- entity: scene.tom_nachts
name: Nachts
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.tom_nachts
template: homekit_scene
type: 'custom:button-card'
- entity: scene.tom_konzentration
name: Konzentration
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.tom_konzentration
template: homekit_scene
type: 'custom:button-card'
- entity: scene.tom_lesen
name: Lesen
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.tom_lesen
template: homekit_scene
type: 'custom:button-card'
- entity: scene.kino
name: Kino
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.1544113960241
template: homekit_scene
type: 'custom:button-card'
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: homekit_title
name: Übersicht
- type: grid
columns: 4
cards:
- type: 'custom:button-card'
entity: binary_sensor.balkontuer
template: homekit
- type: 'custom:button-card'
entity: binary_sensor.kleines_fenster
template: homekit
- type: 'custom:button-card'
entity: binary_sensor.breites_fenster
template: homekit
- type: 'custom:button-card'
entity: binary_sensor.seitenfenster
template: homekit
- type: 'custom:button-card'
entity: sensor.mi_t
template: homekit
name: Temperatur
- type: 'custom:button-card'
entity: sensor.mi_h
template: homekit
name: Luftfeuchtigkeit
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: homekit_title
name: Licht
- type: grid
columns: 4
square: false
cards:
- type: 'custom:button-card'
entity: light.og_schreibtisch
template: homekit
- type: 'custom:button-card'
entity: light.schreibtisch_hinterleuchtung
name: LED-Streifen
template: homekit
- type: 'custom:button-card'
entity: light.og_nachttisch
template: homekit
- type: 'custom:button-card'
entity: light.og_decke
template: homekit
- type: 'custom:button-card'
entity: light.og_klotz
template: homekit
- type: vertical-stack
cards:
- type: 'custom:button-card'
template: homekit_title
name: Entertainment
- type: grid
columns: 4
square: false
cards:
- type: 'custom:button-card'
entity: switch.beamer
template: homekit
- type: 'custom:button-card'
entity: cover.leinwand_safe
name: Leinwand
template: homekit
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment