From 6352784e6244a523699f3f17fe65cc535ff8e97a Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Fri, 3 Mar 2023 22:19:41 +0000 Subject: [PATCH 01/14] Fix Saxel Fan Typo --- custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml b/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml index 728a35abf..d67bf4d30 100644 --- a/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml +++ b/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml @@ -78,13 +78,13 @@ custom_card_saxel_fan_common: label: |- [[[ if (entity.state != 'unavailable') { - if (variables.ulm_card_fan_slider_temp_attribute != False) { + if (variables.ulm_card_fan_slider_temp_attribute != false) { var temp = Math.round(entity.attributes[variables.ulm_card_fan_temp_attribute]); let temp_str = ' • ' + (temp ? temp : '0') + '°C'; } else { let temp_str = '' } - if (variables.ulm_card_fan_slider_hum_attribute != False) { + if (variables.ulm_card_fan_slider_hum_attribute != false) { var hum = Math.round(entity.attributes[variables.ulm_card_fan_hum_attribute]); let hum_str = ' • ' + (hum ? hum : '0') + '%'; } else { From 540c9043ac71b900e8e5c04c3cd1a9b31d3ff05b Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Fri, 3 Mar 2023 22:31:09 +0000 Subject: [PATCH 02/14] New Fan Card Card and Docs --- .../card_templates/cards/card_fan.yaml | 285 ++++++++++++++++++ docs/usage/cards/card_fan.md | 107 +++++++ 2 files changed, 392 insertions(+) create mode 100644 custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml create mode 100644 docs/usage/cards/card_fan.md diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml new file mode 100644 index 000000000..38de0e960 --- /dev/null +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml @@ -0,0 +1,285 @@ +--- +### Card Fan ### +card_fan: + template: + - "icon_more_info_new" + - "ulm_translation_engine" + variables: + ulm_card_fan_name: "[[[ return entity.attributes.friendly_name ]]]" + ulm_card_fan_icon: "[[[ return entity.attributes.icon ]]]" + ulm_card_fan_enable_horizontal: false + ulm_card_fan_color: false + ulm_card_fan_force_background_color: false + ulm_card_fan_enable_collapse: false + ulm_card_fan_enable_slider: false + ulm_card_fan_slider_min: 0 + ulm_card_fan_slider_max: 100 + ulm_card_fan_enable_button: false + ulm_card_fan_button_icon: "mdi:rotate-3d-variant" + ulm_card_fan_button_service: "fan.oscillate" + ulm_card_fan_temp_attribute: false #"temp" + ulm_card_fan_hum_attribute: false #"hum" + show_icon: false + show_name: false + show_label: false + state: + - value: "on" + styles: + card: + - background-color: > + [[[ + if (variables.ulm_card_fan_color) { + if (variables.ulm_card_fan_force_background_color || hass.themes.darkMode) { + var color = variables.ulm_card_fan_color; + return 'rgba(var(--color-' + color + '),var(--opacity-bg))'; + } + } + ]]] + styles: + grid: + - grid-template-areas: > + [[[ + if (variables.ulm_card_fan_enable_collapse && entity.state != "on") { + return "\"item1\""; + } + + var areas = []; + areas.push("item1"); + if (variables.ulm_card_fan_enable_slider) { + areas.push("item2"); + } + + if (variables.ulm_card_fan_enable_horizontal) { + return "\"" + areas.join(" ") + "\""; + } + return "\"" + areas.join("\" \"") + "\""; + ]]] + - grid-template-columns: > + [[[ + if (variables.ulm_card_fan_enable_collapse && entity.state != "on") { + return "1fr"; + } + if (variables.ulm_card_fan_enable_horizontal) { + return "1fr 1fr"; + } + return "1fr"; + ]]] + - grid-template-rows: > + [[[ + if (variables.ulm_card_fan_enable_horizontal || (variables.ulm_card_fan_enable_collapse && entity.state != "on")) { + return "min-content"; + } + + var rows = []; + rows.push("min-content"); + if (variables.ulm_card_fan_enable_slider) { + rows.push("min-content"); + } + return rows.join(" "); + ]]] + - row-gap: "12px" + card: + - border-radius: "var(--border-radius)" + - box-shadow: "var(--box-shadow)" + - padding: "12px" + custom_fields: + item2: + - display: > + [[[ + if (variables.ulm_card_fan_enable_collapse && entity.state != "on") { + return "none"; + } else if (variables.ulm_card_fan_enable_slider) { + return "block"; + } else { + return "none"; + } + ]]] + custom_fields: + item1: + card: + type: "custom:button-card" + custom_fields: + item1: + card: + type: "custom:button-card" + entity: "[[[ return entity.entity_id ]]]" + icon: "[[[ return variables.ulm_card_fan_icon ]]]" + styles: + icon: + - color: > + [[[ + if (entity.state != "off") { + if (variables.ulm_card_fan_color) { + var color = variables.ulm_card_fan_color; + return 'rgba(var(--color-' + color + '),1)'; + } + return 'rgba(var(--color-theme),1)'; + } + return 'rgba(var(--color-theme),0.2)'; + ]]] + img_cell: + - background-color: > + [[[ + if (entity.state != "off") { + if (variables.ulm_card_fan_color) { + var color = variables.ulm_card_fan_color; + return 'rgba(var(--color-' + color + '),0.2)'; + } + } + return 'rgba(var(--color-theme),0.05)'; + ]]] + item2: + card: + type: "custom:button-card" + entity: "[[[ return entity.entity_id ]]]" + name: "[[[ return variables.ulm_card_fan_name ]]]" + label: > + [[[ + if (entity.state == 'unavailable') { + return variables.ulm_translation_unavailable; + } + + let temp_str = ''; + if (variables.ulm_card_fan_temp_attribute) { + var temp = Math.round(entity.attributes[variables.ulm_card_fan_temp_attribute]); + temp_str = ' • ' + (temp ? temp : '0') + '°C'; + } + let hum_str = ''; + if (variables.ulm_card_fan_hum_attribute) { + var hum = Math.round(entity.attributes[variables.ulm_card_fan_hum_attribute]); + hum_str = ' • ' + (hum ? hum : '0') + '%'; + } + + if (entity.state != 'off') { + if (entity.attributes.percentage != null) { + var per = entity.attributes.percentage; + let per_str = (per ? per : '0') + '%'; + return per_str + temp_str + hum_str; + } + return variables.ulm_translation_on + temp_str + hum_str; + } + return variables.ulm_translation_off + temp_str + hum_str; + ]]] + state: + - value: "on" + styles: + name: + - color: > + [[[ + if (variables.ulm_card_fan_force_background_color || hass.themes.darkMode) { + if (variables.ulm_card_fan_color) { + var color = variables.ulm_card_fan_color; + return 'rgba(var(--color-' + color + '),1)'; + } + } + ]]] + label: + - color: > + [[[ + if (variables.ulm_card_fan_force_background_color || hass.themes.darkMode) { + if (variables.ulm_card_fan_color) { + var color = variables.ulm_card_fan_color; + return 'rgba(var(--color-' + color + '),1)'; + } + } + ]]] + item2: + card: + type: "custom:button-card" + template: "list_one_third_items" + styles: + grid: + - grid-template-areas: > + [[[ + if (variables.ulm_card_fan_enable_button) { + return "'slider button'" + } + return "'slider'"; + ]]] + - grid-template-columns: > + [[[ + if (variables.ulm_card_fan_enable_button) { + return "2fr 1fr" + } + return "1fr"; + ]]] + custom_fields: + button: + - display: > + [[[ + if (variables.ulm_card_fan_enable_button) { + return "block"; + } + return "none"; + ]]] + custom_fields: + slider: + card: + type: "custom:my-slider" + entity: "[[[ return entity.entity_id ]]]" + radius: "14px" + height: "42px" + minSet: "[[[ return variables.ulm_card_fan_slider_min ]]]" + maxSet: "[[[ return variables.ulm_card_fan_slider_max ]]]" + mainSliderColor: > + [[[ + if (variables.ulm_card_fan_color) { + var color = variables.ulm_card_fan_color; + if (entity.state != "off") { + return 'rgba(var(--color-' + color + '),0.8)'; + } + } + return "rgba(var(--color-grey),0.8)"; + ]]] + secondarySliderColor: > + [[[ + if (variables.ulm_card_fan_color) { + var color = variables.ulm_card_fan_color; + if (entity.state != "off") { + return 'rgba(var(--color-' + color + '),0.1)'; + } + } + return "rgba(var(--color-grey),0.1)"; + ]]] + mainSliderColorOff: "rgba(var(--color-theme),0.05)" + secondarySliderColorOff: "rgba(var(--color-theme),0.05)" + thumbHorizontalPadding: "0px" + thumbVerticalPadding: "0px" + thumbWidth: "0px" + card_mod: + style: | + ha-card { + border-radius: 14px; + box-shadow: none; + } + button: + card: + type: "custom:button-card" + template: + - "widget_icon" + icon: "[[[ return variables.ulm_card_fan_button_icon ]]]" + entity: "[[[ return entity.entity_id ]]]" + tap_action: + action: "call-service" + service: "[[[ return variables.ulm_card_fan_button_service ]]]" + service_data: + entity_id: "[[[ return entity.entity_id ]]]" + state: + - value: "on" + styles: + icon: + - color: > + [[[ + if (variables.ulm_card_fan_color && entity.state != "off") { + var color = variables.ulm_card_fan_color; + return 'rgba(var(--color-' + color + '),1)'; + } + ]]] + img_cell: + - background-color: > + [[[ + if (variables.ulm_card_fan_color && entity.state != "off") { + var color = variables.ulm_card_fan_color; + return 'rgba(var(--color-' + color + '),0.2)'; + } + ]]] diff --git a/docs/usage/cards/card_fan.md b/docs/usage/cards/card_fan.md new file mode 100644 index 000000000..478f29b3d --- /dev/null +++ b/docs/usage/cards/card_fan.md @@ -0,0 +1,107 @@ +--- +title: Fan Card +hide: + - toc +--- + + + +## Description + +This is the `fan-card`, used to toggle a fan entity. +Shows state of the fan and, if available, percentage and humidity in %. + +This is a new card based off of the Sexel Fan Custom Card. +Rather than deprecate and many breaking changes on that card for users, this new card can be used as an alternative. + + +#### Light theme + +![Light theme](../../assets/img/custom_fan_light_theme.png) + +#### Dark theme + +![Dark theme](../../assets/img/custom_fan_dark_theme.png) + + +## Variables + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableExampleRequiredExplanation
entityfan.smart_fanyesFan entity
ulm_card_fan_nameFannoName to show. If not specified the attribute friendly_name is shown instead
ulm_card_fan_iconFannoIcon to show. If not specified the attribute icon is shown instead
ulm_card_fan_enable_horizontaltruenotrue/false if the card should be horizontal. Default: false
ulm_card_fan_enable_collapsetruenotrue/false if the fan speed row should collapse when the fan is turned off. Default: false
ulm_card_fan_enable_colorbluenoCustom Color for the Card. default: false - no color
ulm_card_fan_force_background_colortruenotrue/false if the card should force the bckgrund colour, not just in dark mode. Default: false
+ +### Others + ulm_card_fan_enable_slider: false + ulm_card_fan_slider_min: 0 + ulm_card_fan_slider_max: 100 + ulm_card_fan_enable_button: false + ulm_card_fan_button_icon: "mdi:rotate-3d-variant" + ulm_card_fan_button_service: "fan.oscillate" + ulm_card_fan_temp_attribute: false #"temp" + ulm_card_fan_hum_attribute: false #"hum" + + +## Usage + +```yaml +- type: "custom:button-card" + template: card_fan + entity: fan.bedroom + variables: + ulm_card_fan_enable_slider: true + ulm_card_fan_enable_color: "blue" + ulm_card_fan_force_background_color: true +``` + +??? note "Template Code" + + ```yaml title="card_fan.yaml" + --8<-- "custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml" + ``` From befc3f57e7cfa2a363aad0a74273b5cd7f89c865 Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Fri, 3 Mar 2023 22:55:51 +0000 Subject: [PATCH 03/14] pre-commit fix for comments --- .../lovelace/ulm_templates/card_templates/cards/card_fan.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml index 38de0e960..61451fb59 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml @@ -17,8 +17,8 @@ card_fan: ulm_card_fan_enable_button: false ulm_card_fan_button_icon: "mdi:rotate-3d-variant" ulm_card_fan_button_service: "fan.oscillate" - ulm_card_fan_temp_attribute: false #"temp" - ulm_card_fan_hum_attribute: false #"hum" + ulm_card_fan_temp_attribute: false # "temp" + ulm_card_fan_hum_attribute: false # "hum" show_icon: false show_name: false show_label: false From 72421eb539ef31b117d6641add04939f8068216a Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Fri, 3 Mar 2023 22:56:13 +0000 Subject: [PATCH 04/14] Fix for Issue #1188 --- docs/usage/cards/card_fan.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/usage/cards/card_fan.md b/docs/usage/cards/card_fan.md index 478f29b3d..def5d7c76 100644 --- a/docs/usage/cards/card_fan.md +++ b/docs/usage/cards/card_fan.md @@ -14,7 +14,6 @@ Shows state of the fan and, if available, percentage and humidity in %. This is a new card based off of the Sexel Fan Custom Card. Rather than deprecate and many breaking changes on that card for users, this new card can be used as an alternative. - #### Light theme ![Light theme](../../assets/img/custom_fan_light_theme.png) @@ -23,7 +22,6 @@ Rather than deprecate and many breaking changes on that card for users, this new ![Dark theme](../../assets/img/custom_fan_dark_theme.png) - ## Variables @@ -78,6 +76,7 @@ Rather than deprecate and many breaking changes on that card for users, this new
### Others + ulm_card_fan_enable_slider: false ulm_card_fan_slider_min: 0 ulm_card_fan_slider_max: 100 @@ -87,7 +86,6 @@ Rather than deprecate and many breaking changes on that card for users, this new ulm_card_fan_temp_attribute: false #"temp" ulm_card_fan_hum_attribute: false #"hum" - ## Usage ```yaml From c584f3ee0aa43e3c685456bbf8c3cb1f8196cc2f Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Fri, 3 Mar 2023 22:56:35 +0000 Subject: [PATCH 05/14] Fixed Cover --- .../lovelace/ulm_templates/card_templates/cards/card_cover.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml index eb6edba3d..d9ee766c2 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml @@ -234,7 +234,7 @@ card_cover: "opening": hass.resources[hass['language']]['component.cover.state._.closing'] }; - if(["unknown", "unavailable"].includes(entity.state)){ + if(["unknown", "unavailable"].includes(entity.state || position === undefined)){ return variables.ulm_translation_state; } From 3bd38033feca074c7d94e1704f6414fe2cd4d97d Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Sat, 4 Mar 2023 10:13:24 +0000 Subject: [PATCH 06/14] Bracket Fix --- .../lovelace/ulm_templates/card_templates/cards/card_cover.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml index d9ee766c2..e1f7a65a0 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_cover.yaml @@ -234,7 +234,7 @@ card_cover: "opening": hass.resources[hass['language']]['component.cover.state._.closing'] }; - if(["unknown", "unavailable"].includes(entity.state || position === undefined)){ + if(["unknown", "unavailable"].includes(entity.state) || position === undefined){ return variables.ulm_translation_state; } From b482a641c495ea9abc2eff360dc2bd05df5fb05e Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Sat, 4 Mar 2023 10:17:11 +0000 Subject: [PATCH 07/14] Hardcoded Oscillation Fix --- .../lovelace/ulm_templates/card_templates/cards/card_fan.yaml | 1 + 1 file changed, 1 insertion(+) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml index 61451fb59..d401b46e4 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml @@ -264,6 +264,7 @@ card_fan: service: "[[[ return variables.ulm_card_fan_button_service ]]]" service_data: entity_id: "[[[ return entity.entity_id ]]]" + oscillating: "[[[ return !entity.attributes[oscillate] ]]]" state: - value: "on" styles: From e5b66977e8c8cb4493abfcdb78a21c4b1eaf0339 Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Sat, 4 Mar 2023 10:24:05 +0000 Subject: [PATCH 08/14] Updated Color Variable in Docs --- docs/usage/cards/card_fan.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/usage/cards/card_fan.md b/docs/usage/cards/card_fan.md index def5d7c76..3ac0a85bf 100644 --- a/docs/usage/cards/card_fan.md +++ b/docs/usage/cards/card_fan.md @@ -62,7 +62,7 @@ Rather than deprecate and many breaking changes on that card for users, this new true/false if the fan speed row should collapse when the fan is turned off. Default: false - ulm_card_fan_enable_color + ulm_card_fan_color blue no Custom Color for the Card. default: false - no color From 8d0fe6d0b87a48c7e37c25c8bff1d17fa030bc6d Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Sat, 4 Mar 2023 10:30:20 +0000 Subject: [PATCH 09/14] Variable Fix in Docs --- docs/usage/cards/card_fan.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/usage/cards/card_fan.md b/docs/usage/cards/card_fan.md index 3ac0a85bf..a2be15de6 100644 --- a/docs/usage/cards/card_fan.md +++ b/docs/usage/cards/card_fan.md @@ -94,7 +94,7 @@ Rather than deprecate and many breaking changes on that card for users, this new entity: fan.bedroom variables: ulm_card_fan_enable_slider: true - ulm_card_fan_enable_color: "blue" + ulm_card_fan_color: "blue" ulm_card_fan_force_background_color: true ``` From d1b52b44bbb930abca829d48b72312638af49b7b Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Mon, 6 Mar 2023 16:55:14 +0000 Subject: [PATCH 10/14] Saxel Variable Fixes --- .../custom_card_saxel_fan.yaml | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml b/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml index d67bf4d30..d175b17f3 100644 --- a/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml +++ b/custom_cards/custom_card_saxel_fan/custom_card_saxel_fan.yaml @@ -78,17 +78,15 @@ custom_card_saxel_fan_common: label: |- [[[ if (entity.state != 'unavailable') { - if (variables.ulm_card_fan_slider_temp_attribute != false) { + let temp_str = ''; + if (variables.ulm_card_fan_temp_attribute) { var temp = Math.round(entity.attributes[variables.ulm_card_fan_temp_attribute]); - let temp_str = ' • ' + (temp ? temp : '0') + '°C'; - } else { - let temp_str = '' + temp_str = ' • ' + (temp ? temp : '0') + '°C'; } - if (variables.ulm_card_fan_slider_hum_attribute != false) { + let hum_str = ''; + if (variables.ulm_card_fan_hum_attribute) { var hum = Math.round(entity.attributes[variables.ulm_card_fan_hum_attribute]); - let hum_str = ' • ' + (hum ? hum : '0') + '%'; - } else { - let hum_str = '' + hum_str = ' • ' + (hum ? hum : '0') + '%'; } if (entity.state == 'off') { @@ -100,12 +98,12 @@ custom_card_saxel_fan_common: } else if (entity.state == 'on') { if (entity.attributes.percentage != null) { var per = entity.attributes.percentage; - return (per ? per : '0') + '%' + temp_str + hum_str; + let per_str = (per ? per : '0') + '%'; + return per_str + temp_str + hum_str; } else { return variables.ulm_on } } - } else { return variables.ulm_unavailable; } From ad04908e647a38705f1dc76f593fc3898f828fff Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Mon, 6 Mar 2023 17:02:32 +0000 Subject: [PATCH 11/14] Oscillate Button Fixes --- .../card_templates/cards/card_fan.yaml | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml index d401b46e4..131ed78b6 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml @@ -17,6 +17,7 @@ card_fan: ulm_card_fan_enable_button: false ulm_card_fan_button_icon: "mdi:rotate-3d-variant" ulm_card_fan_button_service: "fan.oscillate" + ulm_card_fan_oscillate_attribute: "oscillate" ulm_card_fan_temp_attribute: false # "temp" ulm_card_fan_hum_attribute: false # "hum" show_icon: false @@ -264,8 +265,12 @@ card_fan: service: "[[[ return variables.ulm_card_fan_button_service ]]]" service_data: entity_id: "[[[ return entity.entity_id ]]]" - oscillating: "[[[ return !entity.attributes[oscillate] ]]]" + oscillating: "[[[ return !entity.attributes[variables.ulm_card_fan_oscillate_attribute] ]]]" state: + - value: off + styles: + icon: + - color: "rgba(var(--color-theme),0.2)" - value: "on" styles: icon: @@ -284,3 +289,29 @@ card_fan: return 'rgba(var(--color-' + color + '),0.2)'; } ]]] + - operator: "template" + value: "[[[ return entity.state === 'on' && entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]" + styles: + card: + - background-color: "rgba(250, 250, 250, 1)" + icon: + - color: "rgba(61, 90, 254, 1)" + label: + - color: "rgba(250, 250, 250, 1)" + name: + - color: "rgba(250, 250, 250, 1)" + img_cell: + - background-color: "rgba(250, 250, 250, 0.2)" + - operator: "template" + value: "[[[ return entity.state === 'on' && !entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]" + styles: + card: + - background-color: "rgba(61, 90, 254, 1)" + icon: + - color: "rgba(250, 250, 250, 1)" + label: + - color: "rgba(250, 250, 250, 1)" + name: + - color: "rgba(250, 250, 250, 1)" + img_cell: + - background-color: "rgba(250, 250, 250, 0.2)" From 36453cae68b622d6a5b471b7b7764a867936831f Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Tue, 7 Mar 2023 18:20:30 +0000 Subject: [PATCH 12/14] Fix to the Oscillate Button Color --- .../card_templates/cards/card_fan.yaml | 34 ++++--------------- 1 file changed, 6 insertions(+), 28 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml index 131ed78b6..9b8bf159a 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml @@ -18,8 +18,8 @@ card_fan: ulm_card_fan_button_icon: "mdi:rotate-3d-variant" ulm_card_fan_button_service: "fan.oscillate" ulm_card_fan_oscillate_attribute: "oscillate" - ulm_card_fan_temp_attribute: false # "temp" - ulm_card_fan_hum_attribute: false # "hum" + ulm_card_fan_temp_attribute: false + ulm_card_fan_hum_attribute: false show_icon: false show_name: false show_label: false @@ -267,35 +267,13 @@ card_fan: entity_id: "[[[ return entity.entity_id ]]]" oscillating: "[[[ return !entity.attributes[variables.ulm_card_fan_oscillate_attribute] ]]]" state: - - value: off - styles: - icon: - - color: "rgba(var(--color-theme),0.2)" - - value: "on" - styles: - icon: - - color: > - [[[ - if (variables.ulm_card_fan_color && entity.state != "off") { - var color = variables.ulm_card_fan_color; - return 'rgba(var(--color-' + color + '),1)'; - } - ]]] - img_cell: - - background-color: > - [[[ - if (variables.ulm_card_fan_color && entity.state != "off") { - var color = variables.ulm_card_fan_color; - return 'rgba(var(--color-' + color + '),0.2)'; - } - ]]] - operator: "template" value: "[[[ return entity.state === 'on' && entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]" styles: card: - - background-color: "rgba(250, 250, 250, 1)" + - background-color: "rgba(61, 90, 254, 1)" icon: - - color: "rgba(61, 90, 254, 1)" + - color: "rgba(250, 250, 250, 1)" label: - color: "rgba(250, 250, 250, 1)" name: @@ -306,9 +284,9 @@ card_fan: value: "[[[ return entity.state === 'on' && !entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]" styles: card: - - background-color: "rgba(61, 90, 254, 1)" + - background-color: "rgba(250, 250, 250, 1)" icon: - - color: "rgba(250, 250, 250, 1)" + - color: "rgba(61, 90, 254, 1)" label: - color: "rgba(250, 250, 250, 1)" name: From eaae75e8bd85451d1c1da348a5ab7783d0b19e3e Mon Sep 17 00:00:00 2001 From: basbruss <68892092+basbruss@users.noreply.github.com> Date: Thu, 9 Mar 2023 17:15:42 +0100 Subject: [PATCH 13/14] Update color logic --- .../card_templates/cards/card_fan.yaml | 95 +++++++++++-------- 1 file changed, 57 insertions(+), 38 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml index 9b8bf159a..8c4cb1b68 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml @@ -8,7 +8,7 @@ card_fan: ulm_card_fan_name: "[[[ return entity.attributes.friendly_name ]]]" ulm_card_fan_icon: "[[[ return entity.attributes.icon ]]]" ulm_card_fan_enable_horizontal: false - ulm_card_fan_color: false + ulm_card_fan_color: "blue" ulm_card_fan_force_background_color: false ulm_card_fan_enable_collapse: false ulm_card_fan_enable_slider: false @@ -167,28 +167,25 @@ card_fan: name: - color: > [[[ - if (variables.ulm_card_fan_force_background_color || hass.themes.darkMode) { - if (variables.ulm_card_fan_color) { - var color = variables.ulm_card_fan_color; - return 'rgba(var(--color-' + color + '),1)'; + if (variables.ulm_card_fan_force_background_color) { + return 'rgb(250,250,250)'; } - } ]]] label: - color: > [[[ - if (variables.ulm_card_fan_force_background_color || hass.themes.darkMode) { - if (variables.ulm_card_fan_color) { - var color = variables.ulm_card_fan_color; - return 'rgba(var(--color-' + color + '),1)'; + if (variables.ulm_card_fan_force_background_color) { + return 'rgb(250,250,250)'; } - } ]]] item2: card: type: "custom:button-card" template: "list_one_third_items" styles: + card: + - background: "none" + - overflow: "visible" grid: - grid-template-areas: > [[[ @@ -224,21 +221,24 @@ card_fan: maxSet: "[[[ return variables.ulm_card_fan_slider_max ]]]" mainSliderColor: > [[[ - if (variables.ulm_card_fan_color) { - var color = variables.ulm_card_fan_color; - if (entity.state != "off") { - return 'rgba(var(--color-' + color + '),0.8)'; - } + var color = variables.ulm_card_fan_color; + + if (entity.state != "off") { + if(variables.ulm_card_fan_force_background_color){ + return 'rgb(250,250,250)'; } + return 'rgba(var(--color-' + color + '),0.8)'; + } return "rgba(var(--color-grey),0.8)"; ]]] secondarySliderColor: > [[[ - if (variables.ulm_card_fan_color) { - var color = variables.ulm_card_fan_color; - if (entity.state != "off") { - return 'rgba(var(--color-' + color + '),0.1)'; + var color = variables.ulm_card_fan_color; + if (entity.state != "off") { + if(variables.ulm_card_fan_force_background_color){ + return 'rgba(var(--color-' + color + '),0.3)'; } + return 'rgba(var(--color-' + color + '),0.1)'; } return "rgba(var(--color-grey),0.1)"; ]]] @@ -268,28 +268,47 @@ card_fan: oscillating: "[[[ return !entity.attributes[variables.ulm_card_fan_oscillate_attribute] ]]]" state: - operator: "template" - value: "[[[ return entity.state === 'on' && entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]" + value: "[[[ return entity.state === 'on' && !entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]" styles: card: - - background-color: "rgba(61, 90, 254, 1)" + - background-color: > + [[[ + var color = variables.ulm_card_fan_color; + if(variables.ulm_card_fan_force_background_color){ + if(hass.themes.darkMode){ + return 'rgba(var(--color-' + color + '),0.2)' + } + return 'rgba(250, 250, 250,0.3)' + } + return 'rgba(var(--color-theme),0.05)'; + ]]] icon: - - color: "rgba(250, 250, 250, 1)" - label: - - color: "rgba(250, 250, 250, 1)" - name: - - color: "rgba(250, 250, 250, 1)" - img_cell: - - background-color: "rgba(250, 250, 250, 0.2)" + - color: > + [[[ + var color = variables.ulm_card_fan_color; + if(variables.ulm_card_fan_force_background_color){ + if(hass.themes.darkMode){ + return 'rgba(var(--color-' + color + '),1)' + } + return 'rgba(250, 250, 250,1)' + } + return 'rgba(var(--color-theme),0.9)'; + ]]] - operator: "template" - value: "[[[ return entity.state === 'on' && !entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]" + value: "[[[ return entity.state === 'on' && entity.attributes[variables.ulm_card_fan_oscillate_attribute]; ]]]" styles: card: - - background-color: "rgba(250, 250, 250, 1)" + - background-color: > + [[[ + var color = variables.ulm_card_fan_color; + if(variables.ulm_card_fan_force_background_color){ + return 'rgba(250, 250, 250, 1)' + } + return 'rgba(var(--color-' + color + '),0.2)'; + ]]] icon: - - color: "rgba(61, 90, 254, 1)" - label: - - color: "rgba(250, 250, 250, 1)" - name: - - color: "rgba(250, 250, 250, 1)" - img_cell: - - background-color: "rgba(250, 250, 250, 0.2)" + - color: > + [[[ + var color = variables.ulm_card_fan_color; + return 'rgba(var(--color-' + color + '),1)' + ]]] From f35e00dac6e12fdd812ee38e2eae951a220e4a85 Mon Sep 17 00:00:00 2001 From: Ben Burwood Date: Thu, 9 Mar 2023 17:30:09 +0000 Subject: [PATCH 14/14] Changes following Review --- .../card_templates/cards/card_fan.yaml | 32 +++++++++---------- docs/usage/cards/card_fan.md | 16 ++++++---- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml index 8c4cb1b68..ee8ce2fac 100644 --- a/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml +++ b/custom_components/ui_lovelace_minimalist/lovelace/ulm_templates/card_templates/cards/card_fan.yaml @@ -169,14 +169,14 @@ card_fan: [[[ if (variables.ulm_card_fan_force_background_color) { return 'rgb(250,250,250)'; - } + } ]]] label: - color: > [[[ if (variables.ulm_card_fan_force_background_color) { return 'rgb(250,250,250)'; - } + } ]]] item2: card: @@ -190,14 +190,14 @@ card_fan: - grid-template-areas: > [[[ if (variables.ulm_card_fan_enable_button) { - return "'slider button'" + return "'slider button'"; } return "'slider'"; ]]] - grid-template-columns: > [[[ if (variables.ulm_card_fan_enable_button) { - return "2fr 1fr" + return "2fr 1fr"; } return "1fr"; ]]] @@ -224,7 +224,7 @@ card_fan: var color = variables.ulm_card_fan_color; if (entity.state != "off") { - if(variables.ulm_card_fan_force_background_color){ + if (variables.ulm_card_fan_force_background_color) { return 'rgb(250,250,250)'; } return 'rgba(var(--color-' + color + '),0.8)'; @@ -235,7 +235,7 @@ card_fan: [[[ var color = variables.ulm_card_fan_color; if (entity.state != "off") { - if(variables.ulm_card_fan_force_background_color){ + if (variables.ulm_card_fan_force_background_color) { return 'rgba(var(--color-' + color + '),0.3)'; } return 'rgba(var(--color-' + color + '),0.1)'; @@ -274,11 +274,11 @@ card_fan: - background-color: > [[[ var color = variables.ulm_card_fan_color; - if(variables.ulm_card_fan_force_background_color){ - if(hass.themes.darkMode){ - return 'rgba(var(--color-' + color + '),0.2)' + if (variables.ulm_card_fan_force_background_color) { + if (hass.themes.darkMode) { + return 'rgba(var(--color-' + color + '),0.2)'; } - return 'rgba(250, 250, 250,0.3)' + return 'rgba(250, 250, 250,0.3)'; } return 'rgba(var(--color-theme),0.05)'; ]]] @@ -286,11 +286,11 @@ card_fan: - color: > [[[ var color = variables.ulm_card_fan_color; - if(variables.ulm_card_fan_force_background_color){ - if(hass.themes.darkMode){ - return 'rgba(var(--color-' + color + '),1)' + if (variables.ulm_card_fan_force_background_color) { + if (hass.themes.darkMode) { + return 'rgba(var(--color-' + color + '),1)'; } - return 'rgba(250, 250, 250,1)' + return 'rgba(250, 250, 250,1)'; } return 'rgba(var(--color-theme),0.9)'; ]]] @@ -301,8 +301,8 @@ card_fan: - background-color: > [[[ var color = variables.ulm_card_fan_color; - if(variables.ulm_card_fan_force_background_color){ - return 'rgba(250, 250, 250, 1)' + if (variables.ulm_card_fan_force_background_color) { + return 'rgba(250, 250, 250, 1)'; } return 'rgba(var(--color-' + color + '),0.2)'; ]]] diff --git a/docs/usage/cards/card_fan.md b/docs/usage/cards/card_fan.md index a2be15de6..3e0a806f4 100644 --- a/docs/usage/cards/card_fan.md +++ b/docs/usage/cards/card_fan.md @@ -65,13 +65,19 @@ Rather than deprecate and many breaking changes on that card for users, this new ulm_card_fan_color blue no - Custom Color for the Card. default: false - no color + Custom Color for the Card. default: "blue" ulm_card_fan_force_background_color true no - true/false if the card should force the bckgrund colour, not just in dark mode. Default: false + true/false if the card should force the background color, not just in dark mode." + + + ulm_card_fan_enable_button + true + no + true/false if the card should show a button next to the slider for turning Oscillation on/off." @@ -81,10 +87,8 @@ Rather than deprecate and many breaking changes on that card for users, this new ulm_card_fan_slider_min: 0 ulm_card_fan_slider_max: 100 ulm_card_fan_enable_button: false - ulm_card_fan_button_icon: "mdi:rotate-3d-variant" - ulm_card_fan_button_service: "fan.oscillate" - ulm_card_fan_temp_attribute: false #"temp" - ulm_card_fan_hum_attribute: false #"hum" + ulm_card_fan_temp_attribute: "temp" + ulm_card_fan_hum_attribute: "hum" ## Usage