From 747610e283a11b23636ff13cd87ad8aae9c304bb Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Thu, 19 May 2022 00:43:28 +0200 Subject: [PATCH 1/9] [card_welcome_scenes] Rework auto-entities add input_select support add scenes_card add dynamic total of pills --- .../card_templates/cards/card_scenes.yaml | 254 +++++++++++ .../cards/card_welcome_scenes.yaml | 429 +++--------------- docs/testenv.code-workspace | 10 + 3 files changed, 337 insertions(+), 356 deletions(-) create mode 100644 custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml create mode 100644 docs/testenv.code-workspace diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml new file mode 100644 index 000000000..53749a06f --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml @@ -0,0 +1,254 @@ +--- +card_scenes_welcome: + show_icon: false + show_name: true + show_label: false + variables: + entity_1: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_2: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_3: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_4: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_5: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_6: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_7: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + styles: + grid: + - grid-template-areas: > + [[[ + var pills = [] + const entities = [variables.entity_1.entity_id, variables.entity_2.entity_id, variables.entity_3.entity_id, variables.entity_4.entity_id, variables.entity_5.entity_id, variables.entity_6.entity_id, variables.entity_7.entity_id] + function entity_check(item) { + if (item != "") { + pills.push("item" + (pills.length+1)) + } + } + entities.forEach(entity_check) + return pills.join(" ") + ]]] + - display: "flex" + - grid-template-rows: "min-content" + - justify-content: "space-evenly" + card: + - border-radius: "var(--border-radius)" + - box-shadow: "var(--box-shadow)" + - padding: "12px" + - overflow: "visible" + custom_fields: + item1: + - display: "[[[ return (variables.entity_1.entity_id != '') ? 'block' : 'none' ]]]" + item2: + - display: "[[[ return (variables.entity_2.entity_id != '') ? 'block' : 'none' ]]]" + item3: + - display: "[[[ return (variables.entity_3.entity_id != '') ? 'block' : 'none' ]]]" + item4: + - display: "[[[ return (variables.entity_4.entity_id != '') ? 'block' : 'none' ]]]" + item5: + - display: "[[[ return (variables.entity_5.entity_id != '') ? 'block' : 'none' ]]]" + item6: + - display: "[[[ return (variables.entity_6.entity_id != '') ? 'block' : 'none' ]]]" + item7: + - display: "[[[ return (variables.entity_7.entity_id != '') ? 'block' : 'none' ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_1; ]]]" + entity: "[[[ return variables.entity_1.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_1.entity_id ]]]" + icon: "[[[ return variables.entity_1.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_1.entity_id ]]]" + name: "[[[ return variables.entity_1.name ]]]" + item2: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_2; ]]]" + entity: "[[[ return variables.entity_2.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_2.entity_id ]]]" + icon: "[[[ return variables.entity_2.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_2.entity_id ]]]" + name: "[[[ return variables.entity_2.name ]]]" + item3: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_3; ]]]" + entity: "[[[ return variables.entity_3.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_3.entity_id ]]]" + icon: "[[[ return variables.entity_3.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_3.entity_id ]]]" + name: "[[[ return variables.entity_3.name ]]]" + item4: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_4; ]]]" + entity: "[[[ return variables.entity_4.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_4.entity_id ]]]" + icon: "[[[ return variables.entity_4.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_4.entity_id ]]]" + name: "[[[ return variables.entity_4.name ]]]" + item5: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_5; ]]]" + entity: "[[[ return variables.entity_5.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_5.entity_id ]]]" + icon: "[[[ return variables.entity_5.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_5.entity_id ]]]" + name: "[[[ return variables.entity_5.name ]]]" + item6: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_6; ]]]" + entity: "[[[ return variables.entity_6.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_6.entity_id ]]]" + icon: "[[[ return variables.entity_6.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_6.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_6.color}), 0.20)`;]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_6.entity_id ]]]" + name: "[[[ return variables.entity_6.name ]]]" + item7: + card: + type: "custom:button-card" + template: "card_scenes_pill_welcome" + variables: "[[[ return variables.entity_7; ]]]" + entity: "[[[ return variables.entity_7.entity_id ]]]" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_7.entity_id ]]]" + icon: "[[[ return variables.entity_7.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 0.20)`;]]]" + item2: + card: + type: "custom:button-card" + entity: "[[[ return variables.entity_7.entity_id ]]]" + name: "[[[ return variables.entity_7.name ]]]" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml index 66b41b255..bedc2ee36 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml @@ -2,57 +2,7 @@ card_welcome_scenes: variables: ulm_weather: "[[[ return variables.ulm_weather]]]" - ulm_language: "[[[return window.navigator.language ]]]" - entity_1: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" - color: > - [[[ - var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; - var color = colors[Math.floor(Math.random() * colors.length)]; - return color; - ]]] - entity_2: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" - color: > - [[[ - var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; - var color = colors[Math.floor(Math.random() * colors.length)]; - return color; - ]]] - entity_3: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" - color: > - [[[ - var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; - var color = colors[Math.floor(Math.random() * colors.length)]; - return color; - ]]] - entity_4: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" - color: > - [[[ - var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; - var color = colors[Math.floor(Math.random() * colors.length)]; - return color; - ]]] - entity_5: - entity_id: - icon: "[[[ return entity.attributes.icon ]]]" - name: "[[[ return entity.attributes.friendly_name ]]]" - color: > - [[[ - var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; - var color = colors[Math.floor(Math.random() * colors.length)]; - return color; - ]]] + ulm_language: "[[[ return window.navigator.language ]]]" template: - "ulm_language_variables" show_icon: false @@ -179,7 +129,7 @@ card_welcome_scenes: type: "custom:button-card" template: > [[[ - if(variables.entity_1.entity_id && variables.entity_2.entity_id && variables.entity_3.entity_id && variables.entity_4.entity_id && variables.entity_5.entity_id){ + if(variables?.entity_1?.entity_id && variables?.entity_2?.entity_id && variables?.entity_3?.entity_id && variables?.entity_4?.entity_id && variables?.entity_5?.entity_id){ return 'card_scenes_welcome' } else { return 'card_scenes_welcome_auto' @@ -196,6 +146,8 @@ card_welcome_scenes: entity_3: "[[[ return variables.entity_3]]]" entity_4: "[[[ return variables.entity_4]]]" entity_5: "[[[ return variables.entity_5]]]" + entity_6: "[[[ return variables.entity_6]]]" + entity_7: "[[[ return variables.entity_7]]]" card_title_welcome: tap_action: action: "none" @@ -224,137 +176,8 @@ card_title_welcome: - font-weight: "bold" - font-size: "1rem" - opacity: "0.4" -card_scenes_welcome: - show_icon: false - show_name: true - show_label: false - styles: - grid: - - grid-template-areas: "'item1 item2 item3 item4 item5'" - - grid-template-columns: "1fr 1fr 1fr 1fr 1fr" - - grid-template-rows: "min-content" - - justify-items: "center" - card: - - border-radius: "var(--border-radius)" - - box-shadow: "var(--box-shadow)" - - padding: "12px" - - overflow: "visible" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_1.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_1.entity_id ]]]" - icon: "[[[ return variables.entity_1.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_1.entity_id ]]]" - name: "[[[ return variables.entity_1.name ]]]" - item2: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_2.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_2.entity_id ]]]" - icon: "[[[ return variables.entity_2.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_2.entity_id ]]]" - name: "[[[ return variables.entity_2.name ]]]" - item3: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_3.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_3.entity_id ]]]" - icon: "[[[ return variables.entity_3.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_3.entity_id ]]]" - name: "[[[ return variables.entity_3.name ]]]" - item4: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_4.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_4.entity_id ]]]" - icon: "[[[ return variables.entity_4.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_4.entity_id ]]]" - name: "[[[ return variables.entity_4.name ]]]" - item5: - card: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - entity: "[[[ return variables.entity_5.entity_id ]]]" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_5.entity_id ]]]" - icon: "[[[ return variables.entity_5.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "[[[ return variables.entity_5.entity_id ]]]" - name: "[[[ return variables.entity_5.name ]]]" + +# pill card_scenes_pill_welcome: show_icon: false show_label: false @@ -363,7 +186,7 @@ card_scenes_pill_welcome: - operator: "template" value: > [[[ - return (entity.state !== 'on' && entity.state !== 'playing') + return (entity.state !== 'on' && entity.state !== 'playing' && entity.state != variables?.state) ]]] styles: card: @@ -398,6 +221,31 @@ card_scenes_pill_welcome: show_icon: true show_label: false show_name: false + tap_action: + action: "call-service" + service: > + [[[ + if(entity.entity_id.startsWith("scene.")){ + return "scene.turn_on" + } + else if(entity.entity_id.startsWith("media_player.")){ + return "media_player.media_play_pause" + } + else if(entity.entity_id.startsWith("input_select.")){ + return "input_select.select_option" + } else { + return "homeassistant.toggle" + } + ]]] + service_data: | + [[[ + var obj; + if( entity.entity_id.startsWith("input_select.") ) + obj = { entity_id: entity.entity_id, option: variables.state }; + else + obj = { entity_id: entity.entity_id }; + return obj; + ]]] styles: grid: - grid-template-areas: "i" @@ -417,7 +265,7 @@ card_scenes_pill_welcome: - operator: "template" value: > [[[ - return (entity.state !== 'on' && entity.state !== 'playing') + return (entity.state !== 'on' && entity.state !== 'playing' && entity.state != variables?.state) ]]] styles: card: @@ -435,6 +283,31 @@ card_scenes_pill_welcome: type: "custom:button-card" show_icon: false show_label: false + tap_action: + action: "call-service" + service: > + [[[ + if(entity.entity_id.startsWith("scene.")){ + return "scene.turn_on" + } + else if(entity.entity_id.startsWith("media_player.")){ + return "media_player.media_play_pause" + } + else if(entity.entity_id.startsWith("input_select.")){ + return "input_select.select_option" + } else { + return "homeassistant.toggle" + } + ]]] + service_data: | + [[[ + var obj; + if( entity.entity_id.startsWith("input_select.") ) + obj = { entity_id: entity.entity_id, option: variables.state }; + else + obj = { entity_id: entity.entity_id }; + return obj; + ]]] styles: grid: - grid-template-areas: "n" @@ -537,13 +410,18 @@ card_scenes_welcome_auto: show_icon: false show_name: true show_label: false + variables: + colors: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] styles: grid: - - grid-template-areas: "'item1 item2 item3 item4 item5'" - - grid-template-columns: "1fr 1fr 1fr 1fr 1fr" - - grid-template-rows: "min-content" - - justify-items: "center" - - column-gap: "24px" + - grid-template-areas: "item1" + - display: "flex" + - justify-content: "center" card: - border-radius: "var(--border-radius)" - box-shadow: "var(--box-shadow)" @@ -554,49 +432,14 @@ card_scenes_welcome_auto: type: "custom:auto-entities" card: type: "grid" - columns: 1 - square: false - card_param: "cards" - sort: - count: 1 - filter: - include: - - domain: "script" - options: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - icon: "[[[ return variables.entity_1.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - name: "[[[ return variables.entity_1.name ]]]" - item2: - card: - type: "custom:auto-entities" - card: - type: "grid" - columns: 1 + columns: 5 square: false card_param: "cards" sort: - count: 1 - first: 1 + count: 5 filter: include: - - domain: "script" + - domain: "scene" options: type: "custom:button-card" template: "card_scenes_pill_welcome" @@ -604,139 +447,13 @@ card_scenes_welcome_auto: item1: card: type: "custom:button-card" - template: "tap_action" entity: "this.entity_id" - icon: "[[[ return variables.entity_2.icon ]]]" styles: icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]" + - color: "[[[ return `rgba(var(--color-${variables.colors}), 1)`;]]]" img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]" + - background-color: "[[[ return `rgba(var(--color-${variables.colors}), 0.20)`;]]]" item2: card: type: "custom:button-card" - template: "tap_action" entity: "this.entity_id" - name: "[[[ return variables.entity_2.name ]]]" - item3: - card: - type: "custom:auto-entities" - card: - type: "grid" - columns: 1 - square: false - card_param: "cards" - sort: - count: 1 - first: 2 - filter: - include: - - domain: "script" - options: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - icon: "[[[ return variables.entity_3.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - name: "[[[ return variables.entity_3.name ]]]" - item4: - card: - type: "custom:auto-entities" - card: - type: "grid" - columns: 1 - square: false - card_param: "cards" - sort: - count: 1 - first: 3 - filter: - include: - - domain: "script" - options: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - icon: "[[[ return variables.entity_4.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - name: "[[[ return variables.entity_4.name ]]]" - item5: - card: - type: "custom:auto-entities" - card: - type: "grid" - columns: 1 - square: false - card_param: "cards" - sort: - count: 1 - first: 4 - filter: - include: - - domain: "script" - options: - type: "custom:button-card" - template: "card_scenes_pill_welcome" - custom_fields: - item1: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - icon: "[[[ return variables.entity_5.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]" - item2: - card: - type: "custom:button-card" - template: "tap_action" - entity: "this.entity_id" - name: "[[[ return variables.entity_5.name ]]]" -### tap_action -tap_action: - tap_action: - action: "call-service" - service: > - [[[ - if(entity.entity_id.startsWith("scene.")){ - return "scene.turn_on" - } - else if(entity.entity_id.startsWith("media_player.")){ - return "media_player.media_play_pause" - } else { - return "homeassistant.toggle" - } - ]]] - service_data: - entity_id: "[[[ return entity.entity_id]]]" diff --git a/docs/testenv.code-workspace b/docs/testenv.code-workspace new file mode 100644 index 000000000..985f94a15 --- /dev/null +++ b/docs/testenv.code-workspace @@ -0,0 +1,10 @@ +{ + "folders": [ + { + "path": ".." + }, + { + "path": "../../../config" + } + ] +} From 529e4c5e40eae949dac583527e5b38c17b1fbe9f Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Thu, 19 May 2022 08:36:55 +0200 Subject: [PATCH 2/9] Update documentation --- docs/usage/cards/card_welcome_scenes.md | 81 +++++++++++++------------ 1 file changed, 43 insertions(+), 38 deletions(-) diff --git a/docs/usage/cards/card_welcome_scenes.md b/docs/usage/cards/card_welcome_scenes.md index 8f7c6082f..62f48348b 100644 --- a/docs/usage/cards/card_welcome_scenes.md +++ b/docs/usage/cards/card_welcome_scenes.md @@ -17,16 +17,28 @@ This is a card which shows the basic needs for your dashboard. This card can gen |----------|---------|------------------|-------------------| | ulm_card_welcome_scenes_collapse | | :material-close: | Enables the collapse function.
requires an `input_boolean` to track the state| | ulm_weather | | :material-check: | This is your weather provider.
Example: `weather.your_provider`| -| ulm_language | Language of your system | :material-close: | You can set a different format with the [BCP-47 language tags](https://www.techonthenet.com/js/language_tags.php)
Example: -`"en-US"` or just `"en"`| -| entity_ | | :material-check: | Support almost all types of entities
Scenes do always show as off | -| icon_ | | :material-close: | The icon to show | -| name_ | | :material-close: | The name to show| -| color_ | Random | :material-close: | Color of the icon
Can choose between: `blue`, `red`, `green`, `yellow`, `pink`, `purple`
If not specified, it will take a random color | +| ulm_language | Language of your system | :material-close: | You can set a different format with the [BCP-47 language tags](https://www.techonthenet.com/js/language_tags.php)
Example: `"en-US"` or just `"en"`| +| entity_1 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities | +| entity_2 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities| +| entity_3 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities| +| entity_4 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities| +| entity_5 | auto-entities | :material-close: | Can be any common type of entity
if no entity is specified defaults to auto-entities| +| entity_6 | none | :material-close: | Can be any common type of entity | +| entity_7 | none | :material-close: | Can be any common type of entity | -## Collapse +## Entity Variables -!!! note +| Variable | Default | Required | Notes | +|----------|---------|------------------|-------------------| +| _entity_id | | :material-close: | Support almost all types of entities
Scenes do always show as off | +| _icon | | :material-close: | The icon to show | +| _name | | :material-close: | The name to show| +| _color | Random | :material-close: | Color of the icon
Can choose between: `blue`, `red`, `green`, `yellow`, `pink`, `purple`
If not specified, it will take a random color | +| _state | `on` or `playing` | :material-close: | Define `input_select` state or give manual state for pill to be full | + +## Requirement Collapse Function + +!!! note "" This feature is fully optional. It requires some more manual configuration! You need to create a `input_boolean` in HA to track the state. See [Docs](https://www.home-assistant.io/integrations/input_boolean/). Furthermore, you need to add the `input_boolean` to the variable `ulm_card_welcome_scenes_collapse` **and** to either the `entity` or `triggers_update` to make sure it directly refreshes the state. @@ -35,6 +47,10 @@ Furthermore, you need to add the `input_boolean` to the variable `ulm_card_welco ## Usage +!!! note "" + You can set 1 to 7 entities to show 1 to 7 pills dynamically
+ If set none it uses `auto-entities` with max 5 pills + ```yaml - type: "custom:button-card" template: "card_welcome_scenes" @@ -68,6 +84,16 @@ Furthermore, you need to add the `input_boolean` to the variable `ulm_card_welco icon: "mdi:YOUR_ICON" #OPTIONAL name: "YOUR_NAME" #OPTIONAL color: "yellow" + entity_6: + entity_id: "" + icon: "mdi:YOUR_ICON" #OPTIONAL + name: "YOUR_NAME" #OPTIONAL + color: "pink" + entity_7: + entity_id: "" + icon: "mdi:YOUR_ICON" #OPTIONAL + name: "YOUR_NAME" #OPTIONAL + color: "yellow" ``` ??? note "Auto-entities" @@ -80,31 +106,6 @@ Furthermore, you need to add the `input_boolean` to the variable `ulm_card_welco variables: ulm_card_welcome_scenes_collapse: input_boolean. #OPTIONAl --> uncomment also entity or triggers_update ulm_weather: "weather.YOUR_WEATHERPROVIDER" - entity_1: - entity_id: - icon: - name: - color: "blue" #OPTIONAL - entity_2: - entity_id: - icon: - name: - color: "red" #OPTIONAL - entity_3: - entity_id: - icon: - name: - color: "green" #OPTIONAL - entity_4: - entity_id: - icon: - name: - color: "purple" #OPTIONAL - entity_5: - entity_id: - icon: - name: - color: "yellow" #OPTIONAL ``` ??? note "Random Colors" @@ -121,27 +122,31 @@ Furthermore, you need to add the `input_boolean` to the variable `ulm_card_welco entity_id: "" icon: "mdi:YOUR_ICON" #OPTIONAL name: "YOUR_NAME" #OPTIONAL - color: entity_2: entity_id: "" icon: "mdi:YOUR_ICON" #OPTIONAL name: "YOUR_NAME" #OPTIONAL - color: entity_3: entity_id: "" icon: "mdi:YOUR_ICON" #OPTIONAL name: "YOUR_NAME" #OPTIONAL - color: entity_4: entity_id: "" icon: "mdi:YOUR_ICON" #OPTIONAL name: "YOUR_NAME" #OPTIONAL - color: entity_5: entity_id: "" icon: "mdi:YOUR_ICON" #OPTIONAL name: "YOUR_NAME" #OPTIONAL - color: + entity_6: + entity_id: "" + icon: "mdi:YOUR_ICON" #OPTIONAL + name: "YOUR_NAME" #OPTIONAL + entity_7: + entity_id: "" + icon: "mdi:YOUR_ICON" #OPTIONAL + name: "YOUR_NAME" #OPTIONAL + ``` ??? note "Template Code" From 35b148366b4497fa6ba46476af6f2775b1b1f480 Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Thu, 19 May 2022 08:51:09 +0200 Subject: [PATCH 3/9] Add navigation function --- .../cards/card_welcome_scenes.yaml | 20 +++++++++++++++++-- docs/usage/cards/card_welcome_scenes.md | 1 + 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml index bedc2ee36..26d2ba4a3 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml @@ -222,7 +222,14 @@ card_scenes_pill_welcome: show_label: false show_name: false tap_action: - action: "call-service" + action: > + [[[ + if(variables?.nav_path){ + return "navigate" + } else { + return "call-service" + } + ]]] service: > [[[ if(entity.entity_id.startsWith("scene.")){ @@ -237,6 +244,7 @@ card_scenes_pill_welcome: return "homeassistant.toggle" } ]]] + navigation_path: "[[[ return variables.nav_path; ]]]" service_data: | [[[ var obj; @@ -284,7 +292,15 @@ card_scenes_pill_welcome: show_icon: false show_label: false tap_action: - action: "call-service" + action: > + [[[ + if(variables?.nav_path){ + return "navigate" + } else { + return "call-service" + } + ]]] + navigation_path: "[[[ return variables.nav_path; ]]]" service: > [[[ if(entity.entity_id.startsWith("scene.")){ diff --git a/docs/usage/cards/card_welcome_scenes.md b/docs/usage/cards/card_welcome_scenes.md index 62f48348b..d44f4eb17 100644 --- a/docs/usage/cards/card_welcome_scenes.md +++ b/docs/usage/cards/card_welcome_scenes.md @@ -35,6 +35,7 @@ This is a card which shows the basic needs for your dashboard. This card can gen | _name | | :material-close: | The name to show| | _color | Random | :material-close: | Color of the icon
Can choose between: `blue`, `red`, `green`, `yellow`, `pink`, `purple`
If not specified, it will take a random color | | _state | `on` or `playing` | :material-close: | Define `input_select` state or give manual state for pill to be full | +| _nav_path | | :material-close: | Navigate to another view
*Overrides other types of actions* ## Requirement Collapse Function From 5a85027628ef3ab79e90ccb81516be45112714ca Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 20 May 2022 14:14:24 +0200 Subject: [PATCH 4/9] Better darkmode support --- .../card_templates/cards/card_scenes.yaml | 37 +------------------ .../cards/card_welcome_scenes.yaml | 15 +++++++- 2 files changed, 14 insertions(+), 38 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml index 53749a06f..a31fed7d4 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml @@ -1,5 +1,5 @@ --- -card_scenes_welcome: +card_scenes: show_icon: false show_name: true show_label: false @@ -110,11 +110,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_1.entity_id ]]]" icon: "[[[ return variables.entity_1.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -132,11 +127,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_2.entity_id ]]]" icon: "[[[ return variables.entity_2.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -154,11 +144,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_3.entity_id ]]]" icon: "[[[ return variables.entity_3.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -176,11 +161,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_4.entity_id ]]]" icon: "[[[ return variables.entity_4.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -198,11 +178,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_5.entity_id ]]]" icon: "[[[ return variables.entity_5.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -220,11 +195,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_6.entity_id ]]]" icon: "[[[ return variables.entity_6.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_6.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_6.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -242,11 +212,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_7.entity_id ]]]" icon: "[[[ return variables.entity_7.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml index 26d2ba4a3..1e174c378 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml @@ -258,10 +258,21 @@ card_scenes_pill_welcome: grid: - grid-template-areas: "i" icon: - - color: "[[[ return `rgba(var(--color-theme), 0.20)`;]]]" + - color: > + [[[ + var color = variables?.color + if(hass.themes.darkMode){var color = "#FAFAFA";} + return `rgba(var(--color-${color}), 1)`; + ]]] - width: "20px" img_cell: - - background-color: "[[[ return `rgba(var(--color-theme), 0.05)`;]]] " + - background-color: > + [[[ + var color = variables?.color + var opacity = '0.20' + if(hass.themes.darkMode){var opacity = '1'} + return `rgba(var(--color-${color}), ${opacity})`; + ]]] - border-radius: "50%" - width: "42px" - height: "42px" From b6e82cd30cd1f6c8e97bf7e7f74e84bc7752b473 Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 20 May 2022 15:47:16 +0200 Subject: [PATCH 5/9] Revert "Add navigation function" This reverts commit 35b148366b4497fa6ba46476af6f2775b1b1f480. --- .../cards/card_welcome_scenes.yaml | 20 ++----------------- docs/usage/cards/card_welcome_scenes.md | 1 - 2 files changed, 2 insertions(+), 19 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml index 1e174c378..610d4b245 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml @@ -222,14 +222,7 @@ card_scenes_pill_welcome: show_label: false show_name: false tap_action: - action: > - [[[ - if(variables?.nav_path){ - return "navigate" - } else { - return "call-service" - } - ]]] + action: "call-service" service: > [[[ if(entity.entity_id.startsWith("scene.")){ @@ -244,7 +237,6 @@ card_scenes_pill_welcome: return "homeassistant.toggle" } ]]] - navigation_path: "[[[ return variables.nav_path; ]]]" service_data: | [[[ var obj; @@ -303,15 +295,7 @@ card_scenes_pill_welcome: show_icon: false show_label: false tap_action: - action: > - [[[ - if(variables?.nav_path){ - return "navigate" - } else { - return "call-service" - } - ]]] - navigation_path: "[[[ return variables.nav_path; ]]]" + action: "call-service" service: > [[[ if(entity.entity_id.startsWith("scene.")){ diff --git a/docs/usage/cards/card_welcome_scenes.md b/docs/usage/cards/card_welcome_scenes.md index d44f4eb17..62f48348b 100644 --- a/docs/usage/cards/card_welcome_scenes.md +++ b/docs/usage/cards/card_welcome_scenes.md @@ -35,7 +35,6 @@ This is a card which shows the basic needs for your dashboard. This card can gen | _name | | :material-close: | The name to show| | _color | Random | :material-close: | Color of the icon
Can choose between: `blue`, `red`, `green`, `yellow`, `pink`, `purple`
If not specified, it will take a random color | | _state | `on` or `playing` | :material-close: | Define `input_select` state or give manual state for pill to be full | -| _nav_path | | :material-close: | Navigate to another view
*Overrides other types of actions* ## Requirement Collapse Function From 2a34abc122eec6d0fd80d961baa63fac3ada9a28 Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 20 May 2022 15:57:35 +0200 Subject: [PATCH 6/9] Revert "Revert "Add navigation function"" This reverts commit b6e82cd30cd1f6c8e97bf7e7f74e84bc7752b473. --- .../cards/card_welcome_scenes.yaml | 20 +++++++++++++++++-- docs/usage/cards/card_welcome_scenes.md | 1 + 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml index 610d4b245..1e174c378 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml @@ -222,7 +222,14 @@ card_scenes_pill_welcome: show_label: false show_name: false tap_action: - action: "call-service" + action: > + [[[ + if(variables?.nav_path){ + return "navigate" + } else { + return "call-service" + } + ]]] service: > [[[ if(entity.entity_id.startsWith("scene.")){ @@ -237,6 +244,7 @@ card_scenes_pill_welcome: return "homeassistant.toggle" } ]]] + navigation_path: "[[[ return variables.nav_path; ]]]" service_data: | [[[ var obj; @@ -295,7 +303,15 @@ card_scenes_pill_welcome: show_icon: false show_label: false tap_action: - action: "call-service" + action: > + [[[ + if(variables?.nav_path){ + return "navigate" + } else { + return "call-service" + } + ]]] + navigation_path: "[[[ return variables.nav_path; ]]]" service: > [[[ if(entity.entity_id.startsWith("scene.")){ diff --git a/docs/usage/cards/card_welcome_scenes.md b/docs/usage/cards/card_welcome_scenes.md index 62f48348b..d44f4eb17 100644 --- a/docs/usage/cards/card_welcome_scenes.md +++ b/docs/usage/cards/card_welcome_scenes.md @@ -35,6 +35,7 @@ This is a card which shows the basic needs for your dashboard. This card can gen | _name | | :material-close: | The name to show| | _color | Random | :material-close: | Color of the icon
Can choose between: `blue`, `red`, `green`, `yellow`, `pink`, `purple`
If not specified, it will take a random color | | _state | `on` or `playing` | :material-close: | Define `input_select` state or give manual state for pill to be full | +| _nav_path | | :material-close: | Navigate to another view
*Overrides other types of actions* ## Requirement Collapse Function From b4acb01a8f2d9d4088e87ea9cd7795d049ff7e0a Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 20 May 2022 15:57:43 +0200 Subject: [PATCH 7/9] Revert "Better darkmode support" This reverts commit 5a85027628ef3ab79e90ccb81516be45112714ca. --- .../card_templates/cards/card_scenes.yaml | 37 ++++++++++++++++++- .../cards/card_welcome_scenes.yaml | 15 +------- 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml index a31fed7d4..53749a06f 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml @@ -1,5 +1,5 @@ --- -card_scenes: +card_scenes_welcome: show_icon: false show_name: true show_label: false @@ -110,6 +110,11 @@ card_scenes: type: "custom:button-card" entity: "[[[ return variables.entity_1.entity_id ]]]" icon: "[[[ return variables.entity_1.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -127,6 +132,11 @@ card_scenes: type: "custom:button-card" entity: "[[[ return variables.entity_2.entity_id ]]]" icon: "[[[ return variables.entity_2.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -144,6 +154,11 @@ card_scenes: type: "custom:button-card" entity: "[[[ return variables.entity_3.entity_id ]]]" icon: "[[[ return variables.entity_3.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -161,6 +176,11 @@ card_scenes: type: "custom:button-card" entity: "[[[ return variables.entity_4.entity_id ]]]" icon: "[[[ return variables.entity_4.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -178,6 +198,11 @@ card_scenes: type: "custom:button-card" entity: "[[[ return variables.entity_5.entity_id ]]]" icon: "[[[ return variables.entity_5.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -195,6 +220,11 @@ card_scenes: type: "custom:button-card" entity: "[[[ return variables.entity_6.entity_id ]]]" icon: "[[[ return variables.entity_6.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_6.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_6.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -212,6 +242,11 @@ card_scenes: type: "custom:button-card" entity: "[[[ return variables.entity_7.entity_id ]]]" icon: "[[[ return variables.entity_7.icon ]]]" + styles: + icon: + - color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 1)`;]]]" + img_cell: + - background-color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml index 1e174c378..26d2ba4a3 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml @@ -258,21 +258,10 @@ card_scenes_pill_welcome: grid: - grid-template-areas: "i" icon: - - color: > - [[[ - var color = variables?.color - if(hass.themes.darkMode){var color = "#FAFAFA";} - return `rgba(var(--color-${color}), 1)`; - ]]] + - color: "[[[ return `rgba(var(--color-theme), 0.20)`;]]]" - width: "20px" img_cell: - - background-color: > - [[[ - var color = variables?.color - var opacity = '0.20' - if(hass.themes.darkMode){var opacity = '1'} - return `rgba(var(--color-${color}), ${opacity})`; - ]]] + - background-color: "[[[ return `rgba(var(--color-theme), 0.05)`;]]] " - border-radius: "50%" - width: "42px" - height: "42px" From dfdaa8ead79d6306372a4540f7f85d6f09c9184c Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 20 May 2022 16:05:45 +0200 Subject: [PATCH 8/9] Revert "Revert "Better darkmode support"" This reverts commit b4acb01a8f2d9d4088e87ea9cd7795d049ff7e0a. --- .../card_templates/cards/card_scenes.yaml | 37 +------------------ .../cards/card_welcome_scenes.yaml | 15 +++++++- 2 files changed, 14 insertions(+), 38 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml index 53749a06f..a31fed7d4 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_scenes.yaml @@ -1,5 +1,5 @@ --- -card_scenes_welcome: +card_scenes: show_icon: false show_name: true show_label: false @@ -110,11 +110,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_1.entity_id ]]]" icon: "[[[ return variables.entity_1.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_1.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -132,11 +127,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_2.entity_id ]]]" icon: "[[[ return variables.entity_2.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_2.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -154,11 +144,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_3.entity_id ]]]" icon: "[[[ return variables.entity_3.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_3.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -176,11 +161,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_4.entity_id ]]]" icon: "[[[ return variables.entity_4.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_4.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -198,11 +178,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_5.entity_id ]]]" icon: "[[[ return variables.entity_5.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_5.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -220,11 +195,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_6.entity_id ]]]" icon: "[[[ return variables.entity_6.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_6.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_6.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" @@ -242,11 +212,6 @@ card_scenes_welcome: type: "custom:button-card" entity: "[[[ return variables.entity_7.entity_id ]]]" icon: "[[[ return variables.entity_7.icon ]]]" - styles: - icon: - - color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 1)`;]]]" - img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.entity_7.color}), 0.20)`;]]]" item2: card: type: "custom:button-card" diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml index 26d2ba4a3..1e174c378 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml @@ -258,10 +258,21 @@ card_scenes_pill_welcome: grid: - grid-template-areas: "i" icon: - - color: "[[[ return `rgba(var(--color-theme), 0.20)`;]]]" + - color: > + [[[ + var color = variables?.color + if(hass.themes.darkMode){var color = "#FAFAFA";} + return `rgba(var(--color-${color}), 1)`; + ]]] - width: "20px" img_cell: - - background-color: "[[[ return `rgba(var(--color-theme), 0.05)`;]]] " + - background-color: > + [[[ + var color = variables?.color + var opacity = '0.20' + if(hass.themes.darkMode){var opacity = '1'} + return `rgba(var(--color-${color}), ${opacity})`; + ]]] - border-radius: "50%" - width: "42px" - height: "42px" From a77f5a142c92f35ae671f3778f52312a66c0dc47 Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Fri, 20 May 2022 16:32:11 +0200 Subject: [PATCH 9/9] fix bugs in testing fase --- .../cards/card_welcome_scenes.yaml | 82 +++++++++++++++++-- 1 file changed, 75 insertions(+), 7 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml index 1e174c378..866750c88 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_welcome_scenes.yaml @@ -3,6 +3,62 @@ card_welcome_scenes: variables: ulm_weather: "[[[ return variables.ulm_weather]]]" ulm_language: "[[[ return window.navigator.language ]]]" + entity_1: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_2: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_3: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_4: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_5: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_6: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] + entity_7: + entity_id: "" + color: > + [[[ + var colors = ['yellow', 'blue', 'red', 'purple','green', 'pink']; + var color = colors[Math.floor(Math.random() * colors.length)]; + return color; + ]]] template: - "ulm_language_variables" show_icon: false @@ -129,8 +185,8 @@ card_welcome_scenes: type: "custom:button-card" template: > [[[ - if(variables?.entity_1?.entity_id && variables?.entity_2?.entity_id && variables?.entity_3?.entity_id && variables?.entity_4?.entity_id && variables?.entity_5?.entity_id){ - return 'card_scenes_welcome' + if(variables?.entity_1?.entity_id != ""){ + return 'card_scenes' } else { return 'card_scenes_welcome_auto' } @@ -244,7 +300,7 @@ card_scenes_pill_welcome: return "homeassistant.toggle" } ]]] - navigation_path: "[[[ return variables.nav_path; ]]]" + navigation_path: "[[[ return variables?.nav_path; ]]]" service_data: | [[[ var obj; @@ -311,7 +367,7 @@ card_scenes_pill_welcome: return "call-service" } ]]] - navigation_path: "[[[ return variables.nav_path; ]]]" + navigation_path: "[[[ return variables?.nav_path; ]]]" service: > [[[ if(entity.entity_id.startsWith("scene.")){ @@ -466,7 +522,7 @@ card_scenes_welcome_auto: count: 5 filter: include: - - domain: "scene" + - domain: "light" options: type: "custom:button-card" template: "card_scenes_pill_welcome" @@ -477,9 +533,21 @@ card_scenes_welcome_auto: entity: "this.entity_id" styles: icon: - - color: "[[[ return `rgba(var(--color-${variables.colors}), 1)`;]]]" + - color: > + [[[ + var color = variables.colors + if(hass.themes.darkMode){var color = "#FAFAFA";} + return `rgba(var(--color-${color}), 1)`; + ]]] + - width: "20px" img_cell: - - background-color: "[[[ return `rgba(var(--color-${variables.colors}), 0.20)`;]]]" + - background-color: > + [[[ + var color = variables.colors + var opacity = '0.20' + if(hass.themes.darkMode){var opacity = '1'} + return `rgba(var(--color-${color}), ${opacity})`; + ]]] item2: card: type: "custom:button-card"