Instantly share code, notes, and snippets.
Last active
July 25, 2023 09:30
-
Save Mariusthvdb/2d59566b173c6d37bd986c213f77c348 to your computer and use it in GitHub Desktop.
My Button card templates
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
| # https://css-tricks.com/almanac/properties/a/aspect-ratio/ | |
| ########################################################################################## | |
| # 'module' templates used in Button templates | |
| ########################################################################################## | |
| action_default: | |
| tap_action: | |
| action: toggle | |
| haptic: light | |
| hold_action: | |
| action: more-info | |
| haptic: success | |
| action_more: | |
| tap_action: | |
| action: more-info | |
| haptic: light | |
| hold_action: | |
| action: more-info | |
| haptic: success | |
| no_action: | |
| tap_action: | |
| action: none | |
| hold_action: | |
| action: none | |
| chip: | |
| variables: | |
| view: > | |
| [[[ return window.location.pathname.split('/')[2]; ]]] | |
| tap_action: | |
| action: more-info | |
| show_icon: false | |
| show_name: false | |
| show_state: false | |
| show_label: true | |
| size: 90% | |
| styles: | |
| img_cell: | |
| - width: 24px | |
| card: | |
| - background: var(--background-color-off) | |
| # - border-radius: 30px | |
| # - box-shadow: var(--ha-card-box-shadow) | |
| - height: 36px | |
| - width: auto | |
| - padding-left: 6px | |
| - padding-right: 6px | |
| grid: | |
| - grid-template-areas: '"l"' | |
| label: | |
| - justify-self: center | |
| - padding: 0px 6px | |
| - font-weight: bold | |
| - font-size: 14px | |
| config_no_temp: | |
| aspect_ratio: 1 | |
| color: auto-no-temperature | |
| size: 30% | |
| config_title: | |
| template: styles_card | |
| show_label: true | |
| show_name: false | |
| show_icon: false | |
| styles: | |
| label: | |
| - font-size: 14px | |
| - font-weight: bold | |
| - justify-self: start | |
| confirm: | |
| confirmation: | |
| text: > | |
| [[[ return `Schakelen/toggle ${entity.attributes.friendly_name}?` ]]] | |
| exist: | |
| styles: | |
| card: | |
| - display: > | |
| [[[ if (!entity) return 'none'; ]]] | |
| force_body: | |
| aspect_ratio: 2 | |
| show_label: true | |
| tap_action: | |
| action: call-service | |
| service: script.turn_on | |
| data: | |
| entity_id: entity | |
| haptic: light | |
| styles: | |
| card: | |
| - font-size: 12px | |
| - font-weight: bold | |
| last_changed: | |
| show_last_changed: true | |
| template: styles_label | |
| light_color: | |
| state: | |
| - value: 'on' | |
| styles: | |
| icon: | |
| - color: &light_color | |
| > | |
| [[[ | |
| /* Use yellow if the light doesn't have temp/colour */ | |
| if (entity.attributes.color_mode != "brightness") { | |
| /*Sum of RGB colour to see how close it is to white */ | |
| const colorSum = entity.attributes.rgb_color.reduce((partialSum, a) => partialSum + a, 0); | |
| var tooWhite = colorSum/(255*3) > 0.8; | |
| /* Use white colour if in dark mode */ | |
| if (hass.themes.darkMode == true || tooWhite == false) { | |
| return "rgba(" + entity.attributes.rgb_color + ", 1)"; | |
| } | |
| } | |
| return 'red'; | |
| ]]] | |
| lock: | |
| tap_action: | |
| action: more-info | |
| haptic: light | |
| lock: | |
| enabled: true | |
| unlock: hold | |
| exemptions: | |
| - username: !secret button_unlock_name_1 | |
| - username: !secret button_unlock_name_2 | |
| confirmation: | |
| text: > | |
| [[[ return `Wil je ${entity.attributes.friendly_name} schakelen?`; ]]] | |
| # [[[ return 'Are you sure you want to toggle ' + entity.attributes.friendly_name + '?'; ]]] | |
| styles: | |
| lock: | |
| - color: red | |
| - icon: mdi:lock-alert | |
| - z-index: 1 | |
| lock_on: | |
| template: lock | |
| lock: | |
| enabled: > | |
| [[[ return (entity.state === 'on'); ]]] | |
| lock_off: | |
| template: lock | |
| lock: | |
| enabled: > | |
| [[[ return (entity.state === 'off'); ]]] | |
| main_config: | |
| color: auto | |
| size: 30% | |
| aspect_ratio: 1 | |
| show_state: true | |
| show_label: true | |
| plot: | |
| template: plot_config | |
| custom_fields: | |
| plot: | |
| card: | |
| type: custom:mini-graph-card | |
| entities: | |
| - > | |
| [[[ return entity.entity_id; ]]] | |
| plot_list: | |
| template: plot_config | |
| custom_fields: | |
| plot: | |
| card: | |
| type: custom:mini-graph-card | |
| entities: > | |
| [[[ return variables.plot_entities; ]]] | |
| plot_config: | |
| custom_fields: | |
| plot: | |
| card: | |
| group: true | |
| points_per_hour: 1 | |
| hour24: true | |
| line_color: var(--primary-color) | |
| line_width: 10 | |
| hours_to_show: 24 | |
| update_interval: 600 | |
| show: | |
| name: false | |
| icon: false | |
| state: false | |
| points: false | |
| legend: false | |
| average: false | |
| extrema: false | |
| labels: false | |
| fill: false | |
| labels_secondary: false | |
| name_adaptive_color: false | |
| icon_adaptive_color: false | |
| styles: | |
| custom_fields: | |
| plot: | |
| - position: absolute | |
| - top: 55% | |
| - left: 50% | |
| - width: calc(100% + 25px) | |
| - transform: translate(-50%, calc(-50% + 10px)) | |
| - z-index: 3 | |
| - --paper-card-background-color: rgba(0, 0, 0, 0.0) | |
| - --ha-card-background: rgba(0, 0, 0, 0.0) | |
| - pointer-events: none | |
| spin: | |
| state: | |
| - value: 'on' | |
| id: state-on | |
| spin: true | |
| state_display_light: | |
| template: styles_state_default_auto | |
| show_state: true | |
| state_display: > | |
| [[[ var statecolor = (entity.state === 'on') ? 'var(--icon-color-on)' : 'var(--icon-color-off)'; | |
| var labelcolor = (entity.state === 'on') ? 'var(--button-card-light-color)' : 'var(--power-color)'; | |
| var id = entity.entity_id.split('.')[1]; | |
| var powerId = 'sensor.' + id + '_device_power'; | |
| /* var bri = entity.attributes.brightness ? Math.round(entity.attributes.brightness/2.55) : ''; */ | |
| var content = states[powerId]? states[powerId].state + ' W': ''; | |
| var divider = states[powerId]? ': ' : ''; | |
| var fakestate = `<span style="color: ${statecolor};"> ${localize(entity)}</span>`; | |
| var power = `<span style="color: ${labelcolor};"> ${content} </span>`; | |
| return (entity.state === 'unavailable') ? localize(entity) : fakestate + divider + power; ]]] | |
| state_display_light_outdoors: | |
| state_display: > | |
| [[[ var fakestate = `<span style="color: var(--active-color);"> ${localize(entity)}:</span>`; | |
| var power = `<span style="color: var(--power-color);"> ${Math.round(entity.attributes.brightness/2.55)} %</span>`; | |
| return (entity.state === 'on') ? fakestate + ' ' + power : localize(entity); ]]] | |
| state_display_switch: | |
| template: styles_state_default | |
| show_state: true | |
| state_display: > | |
| [[[ var id = entity.entity_id.split('.')[1]; | |
| var power = states['sensor.' + id + '_actueel'].state; | |
| var fakestate = `<span style="color: var(--active-color);"> ${localize(entity)}</span>`; | |
| var fakestateOff = `<span style="color: var(--active-background-color);"> ${localize(entity)}</span>`; | |
| var powerState = `<span style="color: var(--power-color);"> ${power} W</span>`; | |
| return (entity.state === 'on') ? fakestate +': ' + powerState : | |
| (entity.state === 'off' && power > 0) ? fakestateOff +': ' + powerState : null; ]]] | |
| state_display_ikea: | |
| template: styles_state_default | |
| show_state: true | |
| state_display: > | |
| [[[ function capitalizeFirstLetter(string) { | |
| return string.charAt(0).toUpperCase() + string.slice(1); | |
| } | |
| var id = entity.entity_id.split('_').pop(-1); | |
| var fakestate = `<span style="color: var(--active-color);"> ${localize(entity)}</span>`; | |
| var power = `<span style="color: var(--power-color);"> ${capitalizeFirstLetter(id)}</span>`; | |
| return (entity.state === 'on') ? fakestate + ': ' + power : null; ]]] | |
| styles_action_button: | |
| styles: | |
| card: | |
| - color: var(--mdc-theme-primary) | |
| # - height: 36px | |
| - box-shadow: none | |
| - -webkit-font-smoothing: antialiased | |
| - font-size: var(--mdc-typography-button-font-size,.875rem) | |
| - font-weight: var(--mdc-typography-button-font-weight,500) | |
| - font-family: var(--mdc-typography-button-font-family,var(--mdc-typography-font-family,Roboto,sans-serif)) | |
| - text-transform: var(--mdc-typography-button-text-transform,uppercase) | |
| - letter-spacing: var(--mdc-typography-button-letter-spacing,.0892857143em) | |
| styles_border_top: | |
| styles: | |
| card: | |
| - border-top: > | |
| [[[ return (entity.state === 'on') | |
| ? '0.5rem solid var(--icon-color-on)' : 'none'; ]]] | |
| styles_border_top_light: | |
| styles: | |
| card: | |
| - border-top: > | |
| [[[ return (entity.state === 'on') | |
| ? '0.5rem solid var(--button-card-light-color, var(--icon-color-on))' | |
| : 'none'; ]]] | |
| styles_state_default: | |
| template: styles_state_default_auto | |
| state: | |
| - value: 'on' | |
| styles: | |
| icon: | |
| - color: var(--icon-color-on) | |
| id: state-on | |
| styles_state_default_auto: #icon color follows light color, so not set in state 'on' | |
| state: | |
| - value: 'on' | |
| <<: &on-true-home | |
| styles: | |
| card: | |
| - color: var(--text-color-on) | |
| - background-color: var(--background-color-on) | |
| # - box-shadow: 0px 0px 3px 3px var(--button-card-light-color) | |
| # label: | |
| # - color: var(--state-binary_sensor-on-color) #var(--text-color-on) | |
| id: state-on | |
| - value: 'off' | |
| <<: &off-false-not-home | |
| styles: | |
| card: | |
| - color: var(--text-color-off) | |
| - background-color: var(--background-color-off) | |
| icon: | |
| - color: var(--icon-color-off) | |
| id: state-off | |
| - value: unavailable | |
| <<: &unav | |
| styles: | |
| card: | |
| - color: grey | |
| - opacity: 0.6 | |
| # - --paper-item-icon-color: grey | |
| icon: | |
| - color: darkgrey | |
| id: state-una | |
| - operator: template | |
| id: template | |
| styles_state_group_default: #icon color follows light color, so not set in state 'on' | |
| state: | |
| - value: home | |
| <<: *on-true-home | |
| - value: not_home | |
| <<: *off-false-not-home | |
| - value: unavailable | |
| <<: *unav | |
| - operator: template | |
| id: template | |
| styles_cf_notification: | |
| styles: | |
| custom_fields: | |
| notification: | |
| - border: 1px solid var(--text-color-on) | |
| - box-sizing: border-box | |
| - border-radius: 12px #50% | |
| - font-size: 12px | |
| - font-weight: 400 | |
| # - height: 18px | |
| - line-height: 20px | |
| - min-width: 20px | |
| - min-height: 20px | |
| - padding: 0px 6px | |
| - position: absolute | |
| - top: 10% | |
| - text-align: center | |
| - right: 5% | |
| styles_cf_notification_left: | |
| styles: | |
| custom_fields: | |
| notification_left: | |
| - border: 1px solid var(--text-color-on) | |
| - box-sizing: border-box | |
| - border-radius: 12px #50% | |
| - font-size: 12px | |
| - font-weight: 400 | |
| # - height: 18px | |
| - line-height: 20px | |
| - min-width: 20px | |
| - min-height: 20px | |
| - padding: 0px 6px | |
| - position: absolute | |
| - top: 10% | |
| - text-align: center | |
| - left: 5% | |
| styles_card: | |
| styles: | |
| card: | |
| - padding: 5px | |
| styles_grid: | |
| template: styles_card | |
| styles: | |
| grid: | |
| - grid-template-areas: '"i" "n" "s" "l"' | |
| - grid-template-columns: 1fr | |
| - grid-template-rows: 1fr min-content min-content | |
| # - position: relative | |
| styles_img_cell: | |
| styles: | |
| img_cell: | |
| - align-items: start | |
| - justify-content: start | |
| # icon: | |
| # - filter: drop-shadow(0px 0px 4px rgba(0,0,0,1)) | |
| styles_label: | |
| styles: | |
| label: | |
| - font-size: 11px | |
| - justify-self: start | |
| - text-align: start | |
| styles_name: | |
| styles: | |
| name: | |
| - font-size: 13px | |
| - font-weight: bold | |
| styles_name_left: | |
| template: styles_name | |
| styles: | |
| name: | |
| - justify-self: start | |
| - text-align: start | |
| - text-overflow: unset | |
| - white-space: unset | |
| - word-break: break-word | |
| styles_ripple: | |
| styles: | |
| card: | |
| # - --mdc-ripple-color: > | |
| # [[[ return (entity.state == 'on') ? 'var(--background-color-off)' : 'var(--background-color-on)'; ]]] | |
| # [[[ | |
| # let elt = this.shadowRoot; | |
| # elt = elt && elt.getElementById("card"); | |
| # if (elt) { | |
| # return elt.style.background === 'var(--background-color-on)' ? 'var(--background-color-off)' : 'var(--background-color-on)'; | |
| # } | |
| # return null; | |
| # ]]] | |
| - --mdc-ripple-press-opacity: 0.5 | |
| styles_state: | |
| styles: | |
| state: | |
| - font-size: 11px | |
| - font-weight: bold | |
| - justify-self: start | |
| - text-align: start | |
| - text-transform: capitalize | |
| styles_summary_alert: | |
| styles: | |
| icon: | |
| - color: > | |
| [[[ return (entity.state > 0) ? 'red' : 'green'; ]]] | |
| custom_fields: | |
| notification: | |
| - color: > | |
| [[[ return (entity.state > 0) ? 'black' : 'white'; ]]] | |
| - background-color: > | |
| [[[ return (entity.state > 0) ? 'red' : 'green'; ]]] | |
| - animation: > | |
| [[[ return (entity.state > 0) ? 'blink 2s ease infinite' : 'none'; ]]] | |
| styles_menu_tooltip: | |
| styles: | |
| tooltip: | |
| - transition: opacity 0.5s | |
| - color: var(--card-background-color) | |
| - font-size: 12px | |
| - background: var(--primary-color) | |
| # - opacity: 0.5 | |
| - padding: 5px | |
| # - border-width: 0px | |
| styles_tooltip: | |
| styles: | |
| tooltip: | |
| - transition: opacity 0.5s | |
| - color: var(--primary-color) #var(--card-background-color) | |
| - border-color: var(--primary-color) | |
| styles_test_custom_icon: | |
| styles: | |
| label: | |
| - font-size: 11px | |
| - text-overflow: unset | |
| - white-space: unset | |
| - word-break: break-word | |
| tooltip: | |
| - transition: opacity 0.5s | |
| icon: | |
| - color: > | |
| [[[ return (entity.state == 'on') ? 'gold' : 'var(--primary-color)'; ]]] | |
| styles_transparent: | |
| styles: | |
| card: | |
| - background: rgba(0,0,0,0.2) | |
| styles_outdoors: | |
| state: | |
| - operator: template | |
| value: > | |
| [[[ var id = entity.entity_id.split('.')[1]; | |
| var connected = 'sensor.' + id + '_connectivity'; | |
| return states[connected] && | |
| states[connected].state === 'connectivity_issue'; ]]] | |
| styles: | |
| card: | |
| - background-color: lightgrey | |
| - color: grey | |
| name: | |
| - color: steelblue | |
| - value: 'on' | |
| styles: | |
| card: | |
| - color: var(--active-color) | |
| label: | |
| - color: black | |
| name: | |
| - color: black | |
| - value: 'off' | |
| styles: | |
| card: | |
| - color: black | |
| icon: | |
| - color: black | |
| - value: unavailable | |
| styles: | |
| card: | |
| - opacity: 0.6 | |
| - color: '#D3D3D3' | |
| icon: | |
| - color: '#D3D3D3' | |
| spot_config: | |
| template: | |
| - action_default | |
| - styles_name | |
| size: 90% | |
| aspect_ratio: 2/1 | |
| layout: icon_name | |
| subview: | |
| template: | |
| - styles_menu_tooltip | |
| show_entity_picture: true | |
| size: 100% | |
| aspect_ratio: 1 | |
| tooltip: > | |
| [[[ return variables.tooltip; ]]] | |
| # '🔗 ' + | |
| tap_action: | |
| action: navigate | |
| navigation_path: > | |
| [[[ return variables.path; ]]] | |
| entity_picture: > | |
| [[[ return variables.picture; ]]] | |
| styles: | |
| card: | |
| - padding: 0px | |
| - background: var(--background-color-off) | |
| icon: | |
| - color: var(--icon-color-off) | |
| plattegrond: | |
| template: | |
| - styles_menu_tooltip | |
| aspect_ratio: 1 | |
| tap_action: | |
| action: navigate | |
| navigation_path: > | |
| [[[ return variables.path; ]]] | |
| hold_action: | |
| action: toggle | |
| entity_picture: > | |
| [[[ return "/local/images/areas/" + variables.picture; ]]] | |
| size: 140% | |
| show_name: false | |
| show_icon: false | |
| show_entity_picture: true | |
| styles: | |
| card: | |
| - padding: 0px | |
| # - background: rgba(0, 0, 0, 0.3); ?? | |
| # - background-image: > | |
| # [[[ return `url("/local/images/areas/${variables.picture}")`; ]]] | |
| # - background-size: cover | |
| # - background-repeat: no-repeat | |
| # - border-bottom: 4rem solid transparent | |
| entity_picture: | |
| - filter: > | |
| [[[ return (entity.state == 'off' || entity.state == 'unavailable') | |
| ? 'grayscale(100%)' : 'grayscale(0%)'; ]]] | |
| var_icon: | |
| icon: > | |
| [[[ return (entity.state === 'on') ? variables.on_icon : variables.off_icon; ]]] | |
| vertical-filler: | |
| color_type: blank-card | |
| empty: | |
| color_type: blank-card | |
| # styles: | |
| # card: | |
| # - border: none | |
| # - border-width: 0px | |
| blank: | |
| aspect_ratio: 1 | |
| tap_action: &none | |
| action: none | |
| hold_action: *none | |
| # https://github.com/custom-cards/button-card/issues/419 | |
| support_custom_ui: | |
| ## icon: | | |
| ## [[[ | |
| ## if (entity && entity.attributes && entity.attributes.templates) { | |
| ## const tpl = entity.attributes.templates; | |
| ## if (tpl.icon) { | |
| ## return new Function('state', `'use strict'; ${tpl.icon}`).call(this, entity.state); | |
| ## } | |
| ## } | |
| ## return null; | |
| ## ]]] | |
| styles: | |
| icon: | |
| - color: | | |
| [[[ if (entity && entity.attributes && entity.attributes.templates) { | |
| const tpl = entity.attributes.templates; | |
| if (tpl.icon_color) { | |
| return new Function('state',`'use strict';${tpl.icon_color}`).call(this, entity.state); | |
| } | |
| } | |
| return null; ]]] | |
| support_custom_ui_notification_border: | |
| styles: | |
| custom_fields: | |
| notification: | |
| - border-style: solid | |
| - border-width: 1px | |
| - border-color: | | |
| [[[ if (entity && entity.attributes && entity.attributes.templates) { | |
| const tpl = entity.attributes.templates; | |
| if (tpl.icon_color) { | |
| return new Function('state',`'use strict';${tpl.icon_color}`).call(this, entity.state); | |
| } | |
| } | |
| return null; ]]] | |
| custom_ui_hack_for_button_card_template: | |
| aspect_ratio: 1 | |
| template: | |
| - support_custom_ui | |
| - styles_name_left | |
| - styles_card | |
| - styles_cf_notification | |
| - styles_img_cell | |
| - plot | |
| - support_custom_ui_notification_border | |
| styles: | |
| card: | |
| - background-color: var(--card-background-color) | |
| - color: var(--primary-color) | |
| custom_fields: | |
| notification: > | |
| [[[ var unit = (entity.entity_id.includes('_actueel')) ? ' W' : ' %'; | |
| return entity.state + unit; ]]] | |
| # https://hmas.swakes.co.uk/home-assistant-layouts-themes-and-all-that-jazz/ | |
| # https://codepen.io/firstchair/pen/KKXLLqq | |
| extra_styles: | |
| extra_styles: | | |
| @keyframes colorize { | |
| 0% {color: ivory;} | |
| 25% {color: brown;} | |
| 50% {color: ivory;} | |
| 75% {color: green;} | |
| 100% {color: brown;} | |
| } | |
| @keyframes wiggle { | |
| 0% { transform: rotate(0deg); } | |
| 33% { transform: rotate(20deg); } | |
| 66% { transform: rotate(-20deg); } | |
| 100% { transform: rotate(0deg); } | |
| } | |
| @keyframes card_bounce { | |
| 0% { | |
| transform: scale(1); | |
| } | |
| 15% { | |
| transform: scale(0.9); | |
| } | |
| 25% { | |
| transform: scale(1); | |
| } | |
| 30% { | |
| transform: scale(0.98); | |
| } | |
| 100% { | |
| transform: scale(1); | |
| } | |
| } | |
| @keyframes marquee { | |
| from { | |
| transform: translateX(0%); | |
| } | |
| to { | |
| transform: translateX(-50%); | |
| } | |
| } | |
| #img { | |
| # animation: 5s demo infinite linear; | |
| #} | |
| # | |
| #@keyframes demo { | |
| # from { | |
| # clip-path: inset(100% 0% 0% 0%); | |
| # } | |
| # to { | |
| # clip-path: inset(0% 0% 0% 0%); | |
| # } | |
| #} | |
| #<img src="https://www.lslegal.nl/wp-content/uploads/2017/03/Test-image-1.jpg" alt=""> | |
| hover: | |
| card_mod: | |
| style: | | |
| ha-card:hover { | |
| transform: scale(1.1); | |
| transform-origin: top center; | |
| z-index: 1; | |
| transition: all 0.5s; | |
| } | |
| ########################################################################################## | |
| # Button templates | |
| ########################################################################################## | |
| button_shortcut_menu: | |
| template: styles_menu_tooltip | |
| tooltip: > | |
| [[[ function capitalizeFirstLetter(string) { | |
| return string.charAt(0).toUpperCase() + string.slice(1); | |
| } | |
| return capitalizeFirstLetter(variables.tooltip.replace('_',' ')); ]]] | |
| variables: | |
| # dashboard: > | |
| # [[[ return window.location.pathname.split('/')[1]; ]]] | |
| view: > | |
| [[[ return window.location.pathname.split('/')[2]; ]]] | |
| size: 24px | |
| styles: | |
| # tooltip: | |
| # - color: var(--secondary-text-color) | |
| # - font-size: 10px | |
| # - background: var(--card-background-color) | |
| # # - opacity: 0.5 | |
| # - transition: opacity 0.8s | |
| # - padding: 5px | |
| icon: | |
| - color: var(--icon-color-off) | |
| card: | |
| - box-shadow: none | |
| # - border: none | |
| - background: var(--background-color-off) #> | |
| # [[[ return variables.view === variables.path | |
| # ? 'var(--secondary-background-color)' : 'var(--background-color-off)'; ]]] | |
| - padding-top: 12px | |
| - padding-bottom: 12px | |
| button_dashboard_menu: | |
| template: | |
| - styles_menu_tooltip | |
| - extra_styles | |
| tooltip: > | |
| [[[ function capitalizeFirstLetter(string) { | |
| return string.charAt(0).toUpperCase() + string.slice(1); | |
| } | |
| capitalizeFirstLetter(variables.tooltip.replace('_',' ')); ]]] | |
| variables: | |
| dash: > | |
| [[[ return window.location.pathname.split('/')[1]; ]]] | |
| view: > | |
| [[[ return window.location.pathname.split('/')[2]; ]]] | |
| size: 30px | |
| styles: | |
| # tooltip: | |
| # - color: var(--secondary-text-color) | |
| # - font-size: 10px | |
| # - background: var(--card-background-color) | |
| # # - opacity: 0.5 | |
| # - transition: opacity 0.8s | |
| # - padding: 5px | |
| # - border-width: 0px | |
| icon: | |
| - color: var(--icon-color-off) | |
| card: | |
| - animation: > | |
| [[[ return states['input_select.theme'].state != 'Christmas' | |
| ? 'none' : 'wiggle 2s ease infinite'; ]]] | |
| - box-shadow: none | |
| - border-bottom: > | |
| [[[ return variables.dash === variables.board | |
| ? '0.2rem solid var(--primary-color)' : 'transparent'; ]]] | |
| - background: > | |
| [[[ return states['input_select.theme'].state != 'Christmas' | |
| ? 'transparent' : 'ivory'; ]]] | |
| - padding-top: 12px | |
| - padding-bottom: 12px | |
| ########################################################################################## | |
| # Button templates | |
| ########################################################################################## | |
| button_feest_alert: | |
| template: styles_img_cell | |
| aspect_ratio: 1 | |
| name: > | |
| [[[ return entity.attributes.id+ ' ' + entity.attributes.type; ]]] | |
| icon: mdi:party-popper | |
| show_state: false | |
| #show_entity_picture: true | |
| #entity_picture: > | |
| # [[[ return entity.attributes.entity_picture ]]] | |
| size: 30px | |
| hold_action: | |
| action: navigate | |
| navigation_path: > | |
| [[[ return (window.location.pathname.split('/')[2] != 'kalender') | |
| ? '/ui-overzicht/kalender' : '/ui-familie/feest'; ]]] | |
| tap_action: | |
| action: call-service | |
| service: persistent_notification.dismiss | |
| data: | |
| notification_id: > | |
| [[[ return entity.attributes.id.toLowerCase(); ]]] | |
| state: | |
| - operator: template | |
| value: > | |
| [[[ var id = entity.attributes.id.toLowerCase(); | |
| var type = entity.attributes.type.toLowerCase(); | |
| var notification = 'input_boolean.' + id +'_' + type + '_notificatie'; | |
| return (states[notification].state === 'on'); ]]] | |
| spin: true | |
| styles: | |
| icon: | |
| # - align-self: start | |
| - color: orange | |
| # - justify-self: start | |
| card: | |
| - background-image: > | |
| [[[ var id = entity.attributes.id.toLowerCase(); | |
| return `url("/local/family/${id}.jpg")`; ]]] | |
| - background-repeat: no-repeat | |
| - background-size: 100% | |
| - background-position: center | |
| - color: white | |
| - font-size: 11px | |
| - padding: 5px | |
| name: | |
| - align-self: end | |
| - color: pink | |
| - justify-self: start | |
| - padding-bottom: 4px | |
| - font-weight: bold | |
| grid: | |
| - grid-template-areas: '"i leeftijd" "n n" "datum datum" "type type"' | |
| - grid-template-columns: 1fr 1fr | |
| # - grid-template-rows: 2fr 1fr 1fr | |
| custom_fields: | |
| leeftijd: | |
| - align-self: start | |
| - font-size: 20px | |
| - justify-self: end | |
| - color: red | |
| - animation: > | |
| [[[ var id = entity.attributes.id.toLowerCase(); | |
| var type = entity.attributes.type.toLowerCase(); | |
| var notification = 'input_boolean.' + id +'_' + type + '_notificatie'; | |
| return (states[notification].state === 'on') | |
| ? 'blink 2s ease infinite' : 'none'; ]]] | |
| datum: | |
| - align-self: end | |
| - justify-self: start | |
| - padding-bottom: 2px | |
| - --text-color-sensor: red | |
| type: | |
| - align-self: end | |
| - justify-self: start | |
| - padding-bottom: 2px | |
| - --text-color-sensor: yellow | |
| custom_fields: | |
| leeftijd: > | |
| [[[ return entity.attributes.leeftijd; ]]] | |
| datum: > | |
| [[[ return `Date: <span style='color: var(--text-color-sensor);'> | |
| ${entity.attributes.datum}</span>`; ]]] | |
| type: > | |
| [[[ return `Type: <span style='color: var(--text-color-sensor);'> | |
| ${entity.attributes.type}</span>`; ]]] | |
| button_header: | |
| template: | |
| - extra_styles | |
| tap_action: | |
| action: none | |
| styles: | |
| card: | |
| - box-shadow: none | |
| - padding: 12px | |
| state: | |
| - operator: template | |
| value: > | |
| [[[ return (states['input_select.theme'].state == 'Christmas'); ]]] | |
| styles: | |
| card: | |
| - border: 2px dotted green | |
| - background: '#B71515' | |
| - color: ivory | |
| - font-size: 40px | |
| - font-weight: 600 | |
| name: | |
| - animation: colorize 4s linear both infinite, marquee 4s alternate infinite | |
| - justify-self: center | |
| - operator: default | |
| styles: | |
| card: | |
| # - border: none | |
| - background: transparent | |
| - color: var(--text-color-off) | |
| - font-size: 20px | |
| - font-weight: 400 | |
| name: | |
| - justify-self: left | |
| # - border: > | |
| # [[[ return (states['input_select.theme'].state == 'Christmas') | |
| # ? '2px dotted green' : 'none'; ]]] | |
| # - background: > | |
| # [[[ return (states['input_select.theme'].state == 'Christmas') | |
| # ? '#B71515' : 'transparent'; ]]] | |
| # - color: > | |
| # [[[ return (states['input_select.theme'].state == 'Christmas') | |
| # ? 'ivory' : 'var(--text-color-off)'; ]]] | |
| # - font-size: > | |
| # [[[ return (states['input_select.theme'].state == 'Christmas') | |
| # ? '40px' : '20px'; ]]] | |
| # - font-weight: > | |
| # [[[ return (states['input_select.theme'].state == 'Christmas') | |
| # ? 600 : 400; ]]] | |
| round_button: | |
| # template: styles_tooltip | |
| show_entity_picture: true | |
| size: 100% | |
| show_name: false | |
| tooltip: > | |
| [[[ return entity.attributes.friendly_name; ]]] | |
| styles: | |
| card: | |
| - border-radius: 100% | |
| - padding: 0 | |
| button_scene: | |
| template: round_button | |
| tap_action: | |
| action: call-service | |
| service: scene.turn_on | |
| data: | |
| entity_id: entity | |
| button_button: | |
| template: round_button | |
| tap_action: | |
| action: call-service | |
| service: button.press | |
| data: | |
| entity_id: entity | |
| button_switch: | |
| variables: | |
| id: > | |
| [[[ return entity.entity_id.split('.')[1]; ]]] | |
| # z_wave: > | |
| # [[[ return states['switch.z_wave_switches'].attributes.entity_id.includes(entity.entity_id); ]]] | |
| template: | |
| - config_no_temp | |
| - last_changed | |
| - state_display_switch | |
| - styles_border_top | |
| - styles_grid | |
| - styles_img_cell | |
| - styles_name_left | |
| - styles_ripple | |
| - styles_state | |
| tap_action: | |
| action: toggle | |
| haptic: light | |
| # hold_action: | |
| # action: call-service | |
| # service: script.turn_on | |
| # data: | |
| # entity_id: > | |
| # [[[ var id = entity.entity_id.split('.')[1]; | |
| # return 'script.' + id + '_meterget_power'; ]]] | |
| hold_action: | |
| action: call-service | |
| service: zwave_js.refresh_value | |
| data: | |
| entity_id: > | |
| [[[ return 'sensor.' + variables.id + '_actueel'; ]]] | |
| # action: > | |
| # [[[ return variables.z_wave ? 'call-service' : 'call-service'; ]]] | |
| # service: > | |
| # [[[ return variables.z_wave ? 'zwave_js.refresh_value' : 'script.turn_on'; ]]] | |
| # data: | |
| # entity_id: > | |
| # [[[ return variables.z_wave ? 'sensor.' + variables.id + '_actueel' : 'script.' + variables.id + '_meterget_power'; ]]] | |
| # refresh_all_values: > | |
| # [[[ return variables.z_wave ? true : null; ]]] | |
| button_switch_ikea: | |
| template: | |
| - action_default | |
| - config_no_temp | |
| - last_changed | |
| - state_display_ikea | |
| - styles_border_top | |
| - styles_grid | |
| - styles_img_cell | |
| - styles_name_left | |
| - styles_ripple | |
| - styles_state | |
| # - var_icon | |
| button_switch_lock: | |
| template: | |
| - config_no_temp | |
| - last_changed | |
| - state_display_switch | |
| - styles_border_top | |
| - styles_grid | |
| - styles_img_cell | |
| - styles_name_left | |
| - styles_ripple | |
| - styles_state | |
| - lock | |
| button_switch_lock_permanent: | |
| template: | |
| - config_no_temp | |
| - last_changed | |
| - no_action | |
| - state_display_switch | |
| - styles_border_top | |
| - styles_grid | |
| - styles_img_cell | |
| - styles_name_left | |
| - styles_ripple | |
| - styles_state | |
| custom_fields: | |
| icon: > | |
| [[[ return `<ha-icon icon='mdi:lock-alert'></ha-icon>`; ]]] | |
| styles: | |
| custom_fields: | |
| icon: | |
| - position: absolute | |
| - left: 70% | |
| - top: 5% | |
| - z-index: 5 | |
| - height: 22px | |
| - width: 22px | |
| - color: red | |
| #button_updater: | |
| # template: button_body | |
| # styles: | |
| # icon: | |
| # - color: > | |
| # [[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]] | |
| # - animation: > | |
| # [[[ if (entity.state == 'on') return 'rotating 2s linear infinite'; ]]] | |
| # state: | |
| # - color: > | |
| # [[[ if (entity.state == 'on') return 'green'; return 'grey'; ]]] | |
| # - animation: > | |
| # [[[ if (entity.state == 'on') return 'blink 2s ease infinite'; ]]] | |
| button_updater: | |
| template: button_body | |
| state: | |
| - value: 'on' | |
| styles: | |
| icon: | |
| - color: red | |
| - animation: blink 2s ease infinite | |
| state: | |
| - color: red | |
| - animation: blink 2s ease infinite | |
| - operator: default | |
| styles: | |
| icon: | |
| - color: grey | |
| state: | |
| - color: grey | |
| # switch.laundry_sensor_motion | |
| # binary_sensor.laundry_sensor_motion | |
| button_motion: | |
| variables: | |
| id: > | |
| [[[ return 'switch.' + entity.entity_id.split('.')[1]; ]]] | |
| sensitivity: > | |
| [[[ var obj = entity.entity_id.split('.')[1]; | |
| var id = obj.split('_sensor_motion')[0]; | |
| return states['sensor.'+ id + '_motion_sensor_sensitivity'].state; ]]] | |
| template: | |
| - button_body | |
| - styles_ripple | |
| - styles_cf_notification | |
| show_last_changed: true | |
| tap_action: | |
| action: call-service | |
| service: switch.toggle | |
| data: | |
| entity_id: > | |
| [[[ return variables.id; ]]] | |
| state_display: > | |
| [[[ return states[variables.id].state === 'off' | |
| ? 'Uit' : entity.state === 'off' ? 'Geen' : 'Beweging'; ]]] | |
| custom_fields: | |
| notification: > | |
| [[[return variables.sensitivity; ]]] | |
| styles: | |
| custom_fields: | |
| notification: | |
| - color: ivory | |
| - background: > | |
| [[[ var sens = {0:'grey',1:'blue',2:'green',3:'orange',4:'red'}; | |
| return sens[variables.sensitivity] || 'gold'; ]]] | |
| state: | |
| - value: 'on' | |
| icon: > | |
| [[[ return variables.on_icon; ]]] | |
| styles: | |
| card: | |
| - color: red | |
| - border-top: 0.5rem solid red | |
| name: | |
| - color: black | |
| icon: | |
| - color: red | |
| - operator: template | |
| value: > | |
| [[[ return states[variables.id].state === 'on'; ]]] | |
| icon: > | |
| [[[ return variables.clear_icon; ]]] | |
| styles: | |
| card: | |
| - color: grey | |
| icon: | |
| - color: green | |
| state: | |
| - color: green | |
| - operator: template | |
| value: > | |
| [[[ return states[variables.id].state === 'off'; ]]] | |
| icon: > | |
| [[[ return variables.off_icon; ]]] | |
| styles: | |
| card: | |
| - color: darkgray | |
| icon: | |
| - color: grey | |
| state: | |
| - color: grey | |
| # - operator: default | |
| # icon: > | |
| # [[[ return entity.state == 'on' ? 'mdi:motion-sensor' : mdi:motion-sensor-off'; ]]] | |
| # styles: | |
| # card: | |
| # - color: grey | |
| # icon: | |
| # - color: grey | |
| button_script: | |
| template: action_default | |
| button_body: | |
| template: | |
| - action_more | |
| - main_config | |
| - styles_grid | |
| - styles_img_cell | |
| - styles_label | |
| - styles_name_left | |
| - styles_state | |
| styles: | |
| icon: | |
| - color: var(--primary-color) | |
| lock: | |
| - color: red | |
| card: | |
| - background-color: var(--card-background-color) | |
| - color: var(--primary-color) | |
| button_body_no_action: | |
| template: | |
| - main_config | |
| - styles_grid | |
| - styles_img_cell | |
| - styles_label | |
| - styles_name_left | |
| - styles_state | |
| tap_action: | |
| action: none | |
| hold_action: | |
| action: none | |
| styles: | |
| icon: | |
| - color: var(--primary-color) | |
| lock: | |
| - color: red | |
| card: | |
| - color: var(--primary-color) | |
| - background-color: var(--card-background-color) | |
| state: | |
| - color: green | |
| # https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/ | |
| # https://github.com/matt8707/hass-config/blob/master/ui-lovelace.yaml#L56 | |
| # https://community.home-assistant.io/t/custom-lovelace-card-homekit-style-card/158034/685 | |
| button_light: | |
| template: | |
| - action_default | |
| - config_no_temp | |
| - last_changed | |
| - state_display_light | |
| - styles_border_top_light | |
| - styles_grid | |
| - styles_img_cell | |
| - styles_name_left | |
| - styles_ripple | |
| - styles_state | |
| custom_fields: | |
| info: &info_light | |
| > | |
| [[[ if (entity.state === 'on' && entity.attributes.brightness) { | |
| var brightness = Math.round(entity.attributes.brightness/2.54); | |
| const radius = 20.5; | |
| const circumference = radius * 2 * Math.PI; | |
| return ` | |
| <svg viewBox="0 0 50 50"> | |
| <circle cx="25" cy="25" r="${radius}" | |
| stroke="var(--button-card-light-color,var(--active-color))" stroke-width="2" fill="none" | |
| style="transform: rotate(-90deg);transform-origin: 50% 50%; | |
| stroke-dasharray: ${circumference}; | |
| stroke-dashoffset: ${circumference - brightness / 100 * circumference};" /> | |
| <text x="50%" y="54%" fill="black" font-size="16" font-weight= "bold" | |
| text-anchor="middle" alignment-baseline="middle"> | |
| ${brightness}<tspan font-size="10">%</tspan> | |
| </text> | |
| </svg> | |
| `; | |
| } | |
| ]]] | |
| styles: | |
| # icon: | |
| # - filter: drop-shadow(0 0 12px var(--button-card-light-color)) | |
| # card: | |
| # - border-top: > | |
| # [[[ | |
| # if (entity.state == 'on') return '0.5rem solid var(--button-card-light-color)'; | |
| # return null; | |
| # ]]] | |
| custom_fields: | |
| info: &circle_pos | |
| - position: absolute | |
| - right: 5% | |
| - top: 10% | |
| - width: 30% | |
| state: | |
| - operator: template | |
| id: template | |
| value: > | |
| [[[ var id = entity.entity_id.split('.')[1]; | |
| var connected = 'sensor.' + id + '_connectivity'; | |
| return states[connected] && | |
| states[connected].state === 'connectivity_issue'; ]]] | |
| styles: | |
| card: | |
| - background-color: lightgrey | |
| - color: grey | |
| name: | |
| - color: steelblue | |
| icon: | |
| - color: green | |
| # - value: unavailable | |
| # id: state-una | |
| # styles: | |
| # icon: | |
| # - color: darkgrey | |
| # card: | |
| # - background-color: lightgrey | |
| # - opacity: 0.8 | |
| # - color: grey | |
| button_light_outdoors: | |
| template: | |
| - action_default | |
| - config_no_temp | |
| - last_changed | |
| - state_display_light_outdoors | |
| - styles_border_top_light | |
| - styles_grid | |
| - styles_img_cell | |
| - styles_name_left | |
| - styles_ripple | |
| - styles_state | |
| - styles_outdoors | |
| custom_fields: | |
| info: *info_light | |
| show_state: true | |
| # state_display: > | |
| # [[[ var fakestate = `<span style="color: var(--active-color);"> ${entity.state}:</span>`; | |
| # var fakelabel = `<span style="color: var(--active-color);"> ${Math.round(entity.attributes.brightness/2.55)} %</span>`; | |
| # return (entity.state == 'on') ? fakestate + ' ' + fakelabel : entity.state; ]]] | |
| styles: | |
| custom_fields: | |
| info: *circle_pos | |
| card: | |
| - background-color: '#1675C9' | |
| button_title_counter: | |
| template: | |
| - action_default | |
| - config_title | |
| - styles_state_default | |
| # aspect_ratio: 14/1 | |
| styles: | |
| card: | |
| - padding-left: 12px | |
| button_title_outdoors: | |
| template: | |
| - action_default | |
| - config_title | |
| aspect_ratio: 14/1 | |
| state: | |
| - value: 'on' | |
| styles: | |
| card: | |
| - background-color: '#1675C9' | |
| - color: var(--active-color) | |
| icon: | |
| - color: var(--active-color) | |
| - value: 'off' | |
| styles: | |
| card: | |
| - background-color: '#1675C9' | |
| - color: black | |
| icon: | |
| - color: black | |
| - value: unavailable | |
| styles: | |
| card: | |
| - opacity: 0.6 | |
| - color: lightgray #'#D3D3D3' | |
| icon: | |
| - color: lightgray #'#D3D3D3' | |
| button_default_title: | |
| # aspect_ratio: 12/1 | |
| show_state: false | |
| show_icon: false | |
| tap_action: | |
| action: none | |
| styles: | |
| card: | |
| # - border: none | |
| - background-color: var(--background-color-off) | |
| - color: var(--text-color-off) | |
| - font-size: 20px #24px | |
| - font-weight: 400 #300 | |
| #- letter-spacing: 0px | |
| # - font-weight: bold | |
| - padding: 12px | |
| name: | |
| - justify-self: left | |
| button_default_title_counter: | |
| template: | |
| - action_default | |
| - styles_state_default | |
| - config_title | |
| aspect_ratio: 16/1 | |
| styles: | |
| grid: | |
| - grid-template-areas: '"i l"' | |
| - grid-template-columns: 1fr 65% | |
| button_force_switch_on: | |
| template: | |
| - force_body | |
| - styles_state_default | |
| label: > | |
| [[[ var id = entity.entity_id.split('_on')[0].split('.')[1]; | |
| return states['binary_sensor.' + id + '_state'].state; ]]] | |
| state: | |
| - operator: template | |
| id: state-on | |
| value: > | |
| [[[ var id = entity.entity_id.split('_on')[0].split('.')[1]; | |
| return states['binary_sensor.' + id + '_state'].state === 'on'; ]]] | |
| icon: > | |
| [[[ return variables.on_icon; ]]] | |
| styles: | |
| icon: | |
| - color: var(--text-color-on) | |
| - operator: default | |
| id: state-off | |
| icon: > | |
| [[[ return variables.off_icon; ]]] | |
| button_force_switch_off: | |
| template: | |
| - force_body | |
| - styles_state_default | |
| label: > | |
| [[[ var id = entity.entity_id.split('_off')[0].split('.')[1]; | |
| return states['binary_sensor.' + id + '_state'].state; ]]] | |
| state: | |
| - operator: template | |
| id: state-on | |
| value: > | |
| [[[ var id = entity.entity_id.split('_off')[0].split('.')[1]; | |
| return states['binary_sensor.' + id + '_state'].state === 'off'; ]]] | |
| icon: > | |
| [[[ return variables.off_icon; ]]] | |
| styles: | |
| label: | |
| - color: var(--text-color-on) | |
| icon: | |
| - color: var(--text-color-on) | |
| - operator: default | |
| id: state-off | |
| icon: > | |
| [[[ return variables.on_icon; ]]] | |
| styles: | |
| label: | |
| - color: var(--text-color-off) | |
| button_meterget: | |
| template: force_body | |
| name: > | |
| [[[ return variables.get + states[variables.switch].attributes.friendly_name; ]]] | |
| icon: > | |
| [[[ return states[variables.switch].attributes.icon; ]]] | |
| label: > | |
| [[[ return states[variables.sensor].state + variables.unit; ]]] | |
| styles: | |
| card: | |
| - color: var(--text-color-on) | |
| - background-color: var(--background-color-on) | |
| icon: | |
| - color: var(--text-color-on) | |
| button_switch_toggle: | |
| template: force_body | |
| name: > | |
| [[[ return states[variables.switch].attributes.friendly_name; ]]] | |
| icon: > | |
| [[[ return states[variables.switch].attributes.icon; ]]] | |
| label: > | |
| [[[ return states[variables.switch].state; ]]] | |
| styles: | |
| card: | |
| - color: > | |
| [[[ return states[variables.switch].state === 'off' | |
| ? 'var(--text-color-off)' : 'var(--text-color-on)'; ]]] | |
| - background-color: > | |
| [[[ return states[variables.switch].state === 'off' | |
| ? 'var(--background-color-off)' : 'var(--background-color-on)'; ]]] | |
| icon: | |
| - color: > | |
| [[[ return states[variables.switch].state === 'off' | |
| ? 'var(--text-color-off)' : 'var(--text-color-on)'; ]]] | |
| button_meterget_power: | |
| template: force_body | |
| name: > | |
| [[[ return variables.get + states[variables.switch].attributes.friendly_name; ]]] | |
| icon: > | |
| [[[ return states[variables.switch].attributes.icon; ]]] | |
| label: > | |
| [[[ return states[variables.sensor].state + variables.unit; ]]] | |
| styles: | |
| card: | |
| - color: var(--text-color-on) | |
| - background-color: var(--background-color-on) | |
| icon: | |
| - color: > | |
| [[[ return states[variables.switch].state === 'off' && | |
| states[variables.sensor].state != 0 ? 'red' | |
| : states[variables.switch].state === 'on' && | |
| states[variables.sensor].state == 0 ? 'blue' | |
| : 'var(--text-color-on)'; ]]] | |
| button_spots_group: | |
| template: | |
| - action_default | |
| - styles_state_default | |
| size: 60% | |
| aspect_ratio: 4/1 | |
| layout: icon_name | |
| styles: | |
| name: | |
| - font-size: 16px | |
| - font-weight: bold | |
| button_spot: | |
| template: | |
| - styles_border_top_light | |
| - styles_state_default | |
| - spot_config | |
| styles: | |
| card: | |
| - padding-left: 8px | |
| button_spot_right: | |
| template: | |
| - styles_border_top_light | |
| - styles_state_default | |
| - spot_config | |
| styles: | |
| card: | |
| - padding-right: 8px | |
| grid: | |
| - grid-template-areas: '"n i"' | |
| - grid-template-columns: 1fr 40% | |
| button_picture_lock: | |
| template: | |
| - action_more | |
| - styles_tooltip | |
| size: 90% | |
| show_state: false | |
| show_label: false | |
| show_name: false | |
| show_entity_picture: true | |
| color_type: card | |
| aspect_ratio: 1 | |
| button_picture: | |
| template: | |
| - action_default | |
| - styles_tooltip | |
| size: 90% | |
| show_name: false | |
| show_entity_picture: true | |
| color_type: card | |
| aspect_ratio: 1 | |
| state: | |
| - value: 'on' | |
| color: var(--background-color-on) | |
| styles: | |
| icon: | |
| - color: var(--icon-color-on) | |
| id: on-picture | |
| - value: 'off' | |
| color: var(--background-color-off) | |
| styles: | |
| icon: | |
| - color: var(--icon-color-off) | |
| id: off-picture | |
| button_picture_family: | |
| template: | |
| - extra_styles | |
| - hover | |
| variables: | |
| id: > | |
| [[[ return entity.entity_id.split('.')[1]; ]]] | |
| united: > | |
| [[[ return states['zone.home'].state === '6'; ]]] | |
| show_name: false | |
| show_icon: false | |
| show_entity_picture: true | |
| entity_picture: > | |
| [[[ return '/local/family/' + variables.id + '.jpg'; ]]] | |
| # [[[ return states['sensor.' + variables.id + '_picture'].state; ]]] | |
| size: 95% | |
| aspect_ratio: 1 | |
| group_expand: true | |
| tap_action: | |
| action: more-info | |
| # <<: &action | |
| # action: more-info | |
| # entity: > | |
| # [[[ return 'group.' + variables.id; ]]] | |
| haptic: light | |
| hold_action: | |
| # <<: *action | |
| action: navigate | |
| navigation_path: > | |
| [[[ return (window.location.pathname.split('/')[2] === 'presence') | |
| ? null : '/ui-data/presence'; ]]] | |
| haptic: success | |
| styles: | |
| custom_fields: | |
| zone_image: | |
| - background-image: > | |
| [[[ return 'url(' + states['sensor.' + variables.id + | |
| '_overlay_image'].state +')'; ]]] | |
| - background-size: contain | |
| - background-repeat: no-repeat | |
| - bottom: 10% | |
| - position: absolute | |
| - right: 10% | |
| # - border: '3px solid #73AD21' | |
| - width: 30px | |
| - height: 30px | |
| card: | |
| - padding: 0px | |
| - background-color: > | |
| [[[ return states['sensor.' + variables.id + '_background_color'].state; ]]] | |
| # - background-image: > | |
| # [[[ return 'url(' + states['sensor.' + variables.id + '_picture'].state +')'; ]]] | |
| # - background-position: center | |
| # - background-repeat: no-repeat | |
| # - background-size: 95% | |
| - animation: > | |
| [[[ return variables.united ? 'card_bounce 4s infinite' : 'none'; ]]] | |
| entity_picture: | |
| - border-radius: var(--ha-card-border-radius) | |
| - filter: > | |
| [[[ return (entity.state == 'not_home' || entity.state == 'unavailable') | |
| ? 'grayscale(100%)' : 'grayscale(0%)'; ]]] | |
| custom_fields: | |
| zone_image: > | |
| [[[ return ' '; ]]] | |
| # [[[ return `<img src= "${states['sensor.' + variables.id + '_overlay_image'].state}" | |
| # style="width: 30px">`; ]]] | |
| button_picture_script: | |
| template: | |
| - styles_tooltip | |
| - styles_ripple | |
| size: 90% | |
| show_name: false | |
| show_entity_picture: true | |
| color_type: card | |
| aspect_ratio: 1 | |
| tap_action: | |
| action: call-service | |
| haptic: light | |
| hold_action: | |
| action: more-info | |
| haptic: success | |
| button_picture_script_small: | |
| template: | |
| - styles_name | |
| - styles_tooltip | |
| size: 70% | |
| show_entity_picture: true | |
| color_type: card | |
| aspect_ratio: 1 | |
| tap_action: | |
| # action: none | |
| haptic: light | |
| hold_action: | |
| action: more-info | |
| haptic: success | |
| color: var(--background-color-off) | |
| styles: | |
| name: | |
| - color: var(--text-color-off) | |
| button_picture_script_small_no_name: | |
| template: | |
| - styles_tooltip | |
| size: 90% | |
| show_name: false | |
| show_entity_picture: true | |
| color_type: card | |
| aspect_ratio: 1 | |
| tap_action: | |
| haptic: light | |
| hold_action: | |
| action: more-info | |
| haptic: success | |
| color: var(--background-color-off) | |
| button_alarm: | |
| template: styles_name | |
| size: 70% | |
| color_type: card | |
| aspect_ratio: 1 | |
| tap_action: | |
| action: call-service | |
| service: script.toggle | |
| data: | |
| entity_id: entity | |
| haptic: light | |
| hold_action: | |
| action: more-info | |
| entity: alarm_control_panel.ha_main_alarm | |
| haptic: success | |
| styles: | |
| card: | |
| - background-color: var(--background-color-off) | |
| - color: var(--text-color-off) | |
| button_boolean: | |
| template: | |
| - styles_name | |
| - styles_state_default | |
| size: 70% | |
| color_type: card | |
| aspect_ratio: 1 | |
| button_binary: | |
| template: | |
| - styles_name | |
| - styles_state_default | |
| - action_more | |
| size: 70% | |
| color_type: card | |
| aspect_ratio: 1 | |
| button_group: | |
| template: | |
| - styles_name | |
| - styles_state_group_default | |
| - action_more | |
| size: 70% | |
| color_type: card | |
| aspect_ratio: 1 | |
| # tap_action: | |
| # action: call-service | |
| # service: script.toggle | |
| # data: | |
| # entity_id: entity | |
| # haptic: light | |
| # hold_action: | |
| # action: more-info | |
| # entity: alarm_control_panel.ha_main_alarm | |
| # haptic: success | |
| # styles: | |
| # card: | |
| # - background-color: var(--background-color-off) | |
| # - color: var(--text-color-off) | |
| button_summary: | |
| template: | |
| - action_more | |
| - styles_cf_notification | |
| - styles_grid | |
| - styles_img_cell | |
| - styles_name_left | |
| - styles_state | |
| size: 40% | |
| show_label: true | |
| show_last_changed: true | |
| aspect_ratio: 1 | |
| custom_fields: | |
| notification: > | |
| [[[ return localize(entity); ]]] | |
| styles: | |
| card: | |
| - color: grey | |
| label: | |
| - font-size: 11px | |
| - justify-self: start | |
| - text-align: start | |
| button_summary_picture: | |
| template: action_more | |
| size: 75% | |
| show_label: true | |
| show_name: false | |
| show_entity_picture: true | |
| aspect_ratio: 1 | |
| styles: | |
| label: | |
| - font-size: 13px | |
| - font-weight: bold | |
| card: | |
| - color: grey | |
| grid: | |
| - position: relative | |
| custom_fields: | |
| time: | |
| - color: black | |
| - font-size: 13px | |
| - font-weight: bold | |
| - left: 30% | |
| - position: absolute | |
| - top: 30% |
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
| updated to the new release 4 features and changed action service_data: to data: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Added Plot: templates, see Community post in the Button-card thread for images and some explanation