From bc93600ed48b96fc8338ccc0a995b7d05c7ed426 Mon Sep 17 00:00:00 2001 From: aderusha Date: Sun, 12 Dec 2021 12:18:38 -0500 Subject: [PATCH] Add color and text customization options --- Home_Assistant/blueprints/README.md | 10 + ...p_Display_Weather_Condition_Icon_Only.yaml | 301 +++++++++++++----- ...p_Display_Weather_Condition_with_Icon.yaml | 228 ++++++++++--- ...sp_Display_Weather_Condition_Icon_Only.png | Bin 0 -> 843 bytes ...sp_Display_Weather_Condition_with_Icon.png | Bin 2092 -> 2138 bytes 5 files changed, 409 insertions(+), 130 deletions(-) create mode 100644 images/hasp_Display_Weather_Condition_Icon_Only.png diff --git a/Home_Assistant/blueprints/README.md b/Home_Assistant/blueprints/README.md index f9c808e..0fe6e47 100644 --- a/Home_Assistant/blueprints/README.md +++ b/Home_Assistant/blueprints/README.md @@ -166,6 +166,16 @@ A HASPone button displays the current weather condition on the right with a matc --- +### Display Weather Condition Icon Only + +[![Display Weather Condition Icon Only](https://my.home-assistant.io/badges/blueprint_import.svg)](https://my.home-assistant.io/redirect/blueprint_import/?blueprint_url=https%3A%2F%2Fgithub.com%2FHASwitchPlate%2FHASPone%2Fblob%2Fmain%2FHome_Assistant%2Fblueprints%2Fhasp_Display_Weather_Condition_Icon_Only.yaml) + +![Preview](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/hasp_Display_Weather_Condition_Icon_Only.png) + +A HASPone button displays the current weather condition as an icon + +--- + ### Display Weather Forecast [![Display Weather Forecast](https://my.home-assistant.io/badges/blueprint_import.svg)](https://my.home-assistant.io/redirect/blueprint_import/?blueprint_url=https%3A%2F%2Fgithub.com%2FHASwitchPlate%2FHASPone%2Fblob%2Fmain%2FHome_Assistant%2Fblueprints%2Fhasp_Display_Weather_Forecast.yaml) diff --git a/Home_Assistant/blueprints/hasp_Display_Weather_Condition_Icon_Only.yaml b/Home_Assistant/blueprints/hasp_Display_Weather_Condition_Icon_Only.yaml index 0074141..35f74fc 100644 --- a/Home_Assistant/blueprints/hasp_Display_Weather_Condition_Icon_Only.yaml +++ b/Home_Assistant/blueprints/hasp_Display_Weather_Condition_Icon_Only.yaml @@ -12,15 +12,45 @@ blueprint: ## HASPone Page and Button reference + The images below show each available HASPone page along with the layout of available button objects. +
- This automation is designed to work with the full-width buttons found on pages 1-3 + | Page 0 | Pages 1-3 | Pages 4-5 | + |--------|-----------|-----------| + | ![Page 0](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p0_Init_Screen.png) | ![Pages 1-3](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p1-p3_4buttons.png) | ![Pages 4-5](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p4-p5_3sliders.png) | - | Pages 1-3 | - |-----------| - | ![Pages 1-3](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p1-p3_4buttons.png) | + | Page 6 | Page 7 | Page 8 | + |--------|--------|--------| + | ![Page 6](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p6_8buttons.png) | ![Page 7](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p7_12buttons.png) | ![Page 8](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p8_5buttons+1slider.png) | + + | Page 9 | Page 10 | Page 11 | + |--------|---------|---------| + | ![Page 9](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p9_9buttons.png) | ![Page 10](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p10_5buttons.png) | ![Page 11](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p11_1button+1slider.png)
+ + ## HASPone Font Reference + +
+ + Weather icons are available in 6 different sizes + + | Font | Name | + | :--- | :---------------- | + | 5 | Noto Sans 24 | + | 6 | Noto Sans 32 | + | 7 | Noto Sans 48 | + | 8 | Noto Sans 64 | + | 9 | Noto Sans 80 | + | 10 | Noto Sans Bold 80 | + + ### Font examples + + ![HASPone Fonts 4-7](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_Fonts_4-7.png) ![HASPone Fonts 8-10](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_Fonts_8-10.png) + +
+ domain: automation input: haspdevice: @@ -57,6 +87,81 @@ blueprint: selector: entity: domain: weather + font_select: + name: "Font" + description: "Select the font for the displayed icon. Refer to the HASPone Font Reference above." + default: "8 - Noto Sans 64" + selector: + select: + options: + - "5 - Noto Sans 24" + - "6 - Noto Sans 32" + - "7 - Noto Sans 48" + - "8 - Noto Sans 64" + - "9 - Noto Sans 80" + - "10 - Noto Sans Bold 80" + xcen_select: + name: "Icon horizontal alignment" + description: "Horizontal icon alignment: 0=Left 1=Center 2=Right" + default: "1 - Centered" + selector: + select: + options: + - "0 - Left aligned" + - "1 - Centered" + - "2 - Right aligned" + ycen_select: + name: "Icon vertical alignment" + description: "Vertical icon alignment: 0=Top 1=Center 2=Bottom" + default: "1 - Centered" + selector: + select: + options: + - "0 - Top aligned" + - "1 - Centered" + - "2 - Bottom aligned" + selected_fgcolor: + name: "Selected foreground color" + description: 'Selected foreground color in Nextion RGB565 format (see "Nextion color codes" above for reference). -1 = Current theme selected foreground color.' + default: -1 + selector: + number: + min: -1 + max: 65535 + mode: slider + selected_bgcolor: + name: "Selected background color" + description: 'Selected background color in Nextion RGB565 format (see "Nextion color codes" above for reference). -1 = Current theme selected background color.' + default: -1 + selector: + number: + min: -1 + max: 65535 + mode: slider + unselected_fgcolor: + name: "Unselected foreground color" + description: 'Unselected foreground color in Nextion RGB565 format (see "Nextion color codes" above for reference). -1 = Current theme unselected foreground color.' + default: -1 + selector: + number: + min: -1 + max: 65535 + mode: slider + unselected_bgcolor: + name: "Unselected background color" + description: 'Unselected background color in Nextion RGB565 format (see "Nextion color codes" above for reference). -1 = Current theme unselected background color.' + default: -1 + selector: + number: + min: -1 + max: 65535 + mode: slider + colorize_icon: + name: "Colorize weather icon" + description: "When enabled, weather condition icon will be colored based on the condition (eg, sunny will be yellow). If disabled, use the colors selected above." + default: true + selector: + boolean: mode: parallel max_exceeded: silent @@ -77,6 +182,17 @@ variables: hasppage: !input hasppage haspbutton: !input haspbutton weather_provider: !input weather_provider + font_select: !input font_select + font: '{{ font_select.split(" - ")[0] | int }}' + xcen_select: !input xcen_select + xcen: '{{ xcen_select.split(" - ")[0] | int }}' + ycen_select: !input ycen_select + ycen: '{{ ycen_select.split(" - ")[0] | int }}' + selected_fgcolor: !input selected_fgcolor + selected_bgcolor: !input selected_bgcolor + unselected_fgcolor: !input unselected_fgcolor + unselected_bgcolor: !input unselected_bgcolor + colorize_icon: !input colorize_icon haspobject: '{{ "p[" ~ hasppage ~ "].b[" ~ haspbutton ~ "]" }}' commandtopic: '{{ "hasp/" ~ haspname ~ "/command/" ~ haspobject }}' jsoncommandtopic: '{{ "hasp/" ~ haspname ~ "/command/json" }}' @@ -90,7 +206,7 @@ variables: {%- elif condition == "fog" -%}  {%- elif condition == "hail" -%} -  +  {%- elif condition == "lightning" -%}  {%- elif condition == "lightning-rainy" -%} @@ -116,32 +232,6 @@ variables: {%- else -%}  {%- endif -%} - text: >- - {{- - states(weather_provider) | - replace("windy-variant","windy") | - replace("clear-night","clear night") | - replace("partlycloudy","partly cloudy") | - replace("lightning-rainy","lightning & rain") | - replace("snowy-rainy","snow & rain") | - title - -}} - font: >- - {%- set weatherlength = text | length -%} - {%- if weatherlength < 7 -%} - 8 - {%- elif weatherlength < 12 -%} - 7 - {%- else -%} - 6 - {%- endif -%} - ypos: "{{(haspbutton|int - 4) * 67 + 2}}" - xpos: 0 - iconwidth: 65 - iconheight: 65 - iconfont: 7 - xcen: 1 - ycen: 1 activepage: >- {%- set activepage = namespace() -%} {%- for entity in device_entities(haspdevice) -%} @@ -155,53 +245,108 @@ variables: unselectedfgtopic: '{{ "hasp/" ~ haspname ~ "/light/unselectedforegroundcolor/rgb" }}' unselectedbgtopic: '{{ "hasp/" ~ haspname ~ "/light/unselectedbackgroundcolor/rgb" }}' selectedfg: >- - {%- set color = namespace() -%} - {%- for entity in device_entities(haspdevice) -%} - {%- if entity|regex_search("^light\..*_selected_foreground_color(?:_\d+|)$") -%} - {%- set color.source=entity -%} - {%- endif -%} - {%- endfor -%} - {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} - {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} - {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} - {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} - {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- if (selected_fgcolor|int) >= 0 -%} + {{ selected_fgcolor }} + {%- else -%} + {%- set color = namespace() -%} + {%- for entity in device_entities(haspdevice) -%} + {%- if entity|regex_search("^light\..*_selected_foreground_color(?:_\d+|)$") -%} + {%- set color.source=entity -%} + {%- endif -%} + {%- endfor -%} + {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} + {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} + {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} + {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} + {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} selectedbg: >- - {%- set color = namespace() -%} - {%- for entity in device_entities(haspdevice) -%} - {%- if entity|regex_search("^light\..*_selected_background_color(?:_\d+|)$") -%} - {%- set color.source=entity -%} - {%- endif -%} - {%- endfor -%} - {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} - {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} - {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} - {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} - {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- if (selected_bgcolor|int) >= 0 -%} + {{ selected_bgcolor }} + {%- else -%} + {%- set color = namespace() -%} + {%- for entity in device_entities(haspdevice) -%} + {%- if entity|regex_search("^light\..*_selected_background_color(?:_\d+|)$") -%} + {%- set color.source=entity -%} + {%- endif -%} + {%- endfor -%} + {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} + {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} + {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} + {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} + {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} unselectedfg: >- - {%- set color = namespace() -%} - {%- for entity in device_entities(haspdevice) -%} - {%- if entity|regex_search("^light\..*_unselected_foreground_color(?:_\d+|)$") -%} - {%- set color.source=entity -%} - {%- endif -%} - {%- endfor -%} - {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} - {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} - {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} - {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} - {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- if (unselected_fgcolor|int) >= 0 -%} + {{ unselected_fgcolor }} + {%- else -%} + {%- set color = namespace() -%} + {%- for entity in device_entities(haspdevice) -%} + {%- if entity|regex_search("^light\..*_unselected_foreground_color(?:_\d+|)$") -%} + {%- set color.source=entity -%} + {%- endif -%} + {%- endfor -%} + {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} + {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} + {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} + {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} + {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} unselectedbg: >- - {%- set color = namespace() -%} - {%- for entity in device_entities(haspdevice) -%} - {%- if entity|regex_search("^light\..*_unselected_background_color(?:_\d+|)$") -%} - {%- set color.source=entity -%} + {%- if (unselected_bgcolor|int) >= 0 -%} + {{ unselected_bgcolor }} + {%- else -%} + {%- set color = namespace() -%} + {%- for entity in device_entities(haspdevice) -%} + {%- if entity|regex_search("^light\..*_unselected_background_color(?:_\d+|)$") -%} + {%- set color.source=entity -%} + {%- endif -%} + {%- endfor -%} + {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} + {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} + {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} + {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} + {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} + icon_color: >- + {%- if not colorize_icon -%} + {{ selectedfg }} + {%- else -%} + {%- set condition=states(weather_provider) -%} + {%- if condition == "clear-night" -%} + 6350 + {%- elif condition == "cloudy" -%} + 29779 + {%- elif condition == "fog" -%} + 29779 + {%- elif condition == "hail" -%} + 29779 + {%- elif condition == "lightning" -%} + 65504 + {%- elif condition == "lightning-rainy" -%} + 65504 + {%- elif condition == "partlycloudy" -%} + 29779 + {%- elif condition == "pouring" -%} + 29779 + {%- elif condition == "rainy" -%} + 29779 + {%- elif condition == "snowy" -%} + 1535 + {%- elif condition == "snowy-rainy" -%} + 1535 + {%- elif condition == "sunny" -%} + 65504 + {%- elif condition == "windy" -%} + 1535 + {%- elif condition == "windy-variant" -%} + 1535 + {%- elif condition == "exceptional" -%} + 63488 + {%- else -%} + {{ selected_fgcolor }} {%- endif -%} - {%- endfor -%} - {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} - {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} - {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} - {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} - {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} trigger_variables: haspdevice: !input haspdevice @@ -267,10 +412,10 @@ action: data: topic: "{{jsoncommandtopic}}" payload: >- - ["{{haspobject}}.font={{iconfont}}", + ["{{haspobject}}.font={{font}}", "{{haspobject}}.xcen={{xcen}}", "{{haspobject}}.ycen={{ycen}}", - "{{haspobject}}.pco={{selectedfg}}", + "{{haspobject}}.pco={{icon_color}}", "{{haspobject}}.bco={{selectedbg}}", "{{haspobject}}.pco2={{unselectedfg}}", "{{haspobject}}.bco2={{unselectedbg}}", @@ -285,7 +430,7 @@ action: data: topic: "{{jsoncommandtopic}}" payload: >- - ["{{haspobject}}.pco={{selectedfg}}", + ["{{haspobject}}.pco={{icon_color}}", "{{haspobject}}.font={{font}}", "{{haspobject}}.txt=\"{{icon}} \""] ######################################################################### @@ -300,7 +445,7 @@ action: # Any change to the button will remove the overlaid icon. - conditions: - condition: template - value_template: "{{ trigger.topic == selectedfgtopic }}" + value_template: "{{ (trigger.topic == selectedfgtopic) and not colorize_icon }}" sequence: - service: mqtt.publish data: diff --git a/Home_Assistant/blueprints/hasp_Display_Weather_Condition_with_Icon.yaml b/Home_Assistant/blueprints/hasp_Display_Weather_Condition_with_Icon.yaml index 263d0e1..aa90a09 100644 --- a/Home_Assistant/blueprints/hasp_Display_Weather_Condition_with_Icon.yaml +++ b/Home_Assistant/blueprints/hasp_Display_Weather_Condition_with_Icon.yaml @@ -21,6 +21,28 @@ blueprint: | ![Pages 1-3](https://raw.githubusercontent.com/HASwitchPlate/HASPone/main/images/NextionUI_p1-p3_4buttons.png) | + + ## Nextion color codes + +
+ + The Nextion environment utilizes RGB 565 encoding. [Use this handy convertor](https://nodtem66.github.io/nextion-hmi-color-convert/index.html) to select your colors and convert to the RGB 565 format. + + Here are some example colors: + + | Color | Code | + |--------|-------| + | White | 65535 | + | Black | 0 | + | Grey | 25388 | + | Red | 63488 | + | Green | 2016 | + | Blue | 31 | + | Yellow | 65504 | + | Orange | 64512 | + | Brown | 48192 | + +
domain: automation input: haspdevice: @@ -57,6 +79,48 @@ blueprint: selector: entity: domain: weather + selected_fgcolor: + name: "Selected foreground color" + description: 'Selected foreground color in Nextion RGB565 format (see "Nextion color codes" above for reference). -1 = Current theme selected foreground color.' + default: -1 + selector: + number: + min: -1 + max: 65535 + mode: slider + selected_bgcolor: + name: "Selected background color" + description: 'Selected background color in Nextion RGB565 format (see "Nextion color codes" above for reference). -1 = Current theme selected background color.' + default: -1 + selector: + number: + min: -1 + max: 65535 + mode: slider + unselected_fgcolor: + name: "Unselected foreground color" + description: 'Unselected foreground color in Nextion RGB565 format (see "Nextion color codes" above for reference). -1 = Current theme unselected foreground color.' + default: -1 + selector: + number: + min: -1 + max: 65535 + mode: slider + unselected_bgcolor: + name: "Unselected background color" + description: 'Unselected background color in Nextion RGB565 format (see "Nextion color codes" above for reference). -1 = Current theme unselected background color.' + default: -1 + selector: + number: + min: -1 + max: 65535 + mode: slider + colorize_icon: + name: "Colorize weather icon" + description: "When enabled, weather condition icon will be colored based on the condition (eg, sunny will be yellow). If disabled, use the colors selected above." + default: true + selector: + boolean: mode: parallel max_exceeded: silent @@ -77,6 +141,11 @@ variables: hasppage: !input hasppage haspbutton: !input haspbutton weather_provider: !input weather_provider + selected_fgcolor: !input selected_fgcolor + selected_bgcolor: !input selected_bgcolor + unselected_fgcolor: !input unselected_fgcolor + unselected_bgcolor: !input unselected_bgcolor + colorize_icon: !input colorize_icon haspobject: '{{ "p[" ~ hasppage ~ "].b[" ~ haspbutton ~ "]" }}' commandtopic: '{{ "hasp/" ~ haspname ~ "/command/" ~ haspobject }}' jsoncommandtopic: '{{ "hasp/" ~ haspname ~ "/command/json" }}' @@ -90,7 +159,7 @@ variables: {%- elif condition == "fog" -%}  {%- elif condition == "hail" -%} -  +  {%- elif condition == "lightning" -%}  {%- elif condition == "lightning-rainy" -%} @@ -155,53 +224,108 @@ variables: unselectedfgtopic: '{{ "hasp/" ~ haspname ~ "/light/unselectedforegroundcolor/rgb" }}' unselectedbgtopic: '{{ "hasp/" ~ haspname ~ "/light/unselectedbackgroundcolor/rgb" }}' selectedfg: >- - {%- set color = namespace() -%} - {%- for entity in device_entities(haspdevice) -%} - {%- if entity|regex_search("^light\..*_selected_foreground_color(?:_\d+|)$") -%} - {%- set color.source=entity -%} - {%- endif -%} - {%- endfor -%} - {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} - {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} - {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} - {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} - {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- if (selected_fgcolor|int) >= 0 -%} + {{ selected_fgcolor }} + {%- else -%} + {%- set color = namespace() -%} + {%- for entity in device_entities(haspdevice) -%} + {%- if entity|regex_search("^light\..*_selected_foreground_color(?:_\d+|)$") -%} + {%- set color.source=entity -%} + {%- endif -%} + {%- endfor -%} + {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} + {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} + {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} + {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} + {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} selectedbg: >- - {%- set color = namespace() -%} - {%- for entity in device_entities(haspdevice) -%} - {%- if entity|regex_search("^light\..*_selected_background_color(?:_\d+|)$") -%} - {%- set color.source=entity -%} - {%- endif -%} - {%- endfor -%} - {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} - {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} - {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} - {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} - {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- if (selected_bgcolor|int) >= 0 -%} + {{ selected_bgcolor }} + {%- else -%} + {%- set color = namespace() -%} + {%- for entity in device_entities(haspdevice) -%} + {%- if entity|regex_search("^light\..*_selected_background_color(?:_\d+|)$") -%} + {%- set color.source=entity -%} + {%- endif -%} + {%- endfor -%} + {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} + {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} + {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} + {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} + {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} unselectedfg: >- - {%- set color = namespace() -%} - {%- for entity in device_entities(haspdevice) -%} - {%- if entity|regex_search("^light\..*_unselected_foreground_color(?:_\d+|)$") -%} - {%- set color.source=entity -%} - {%- endif -%} - {%- endfor -%} - {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} - {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} - {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} - {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} - {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- if (unselected_fgcolor|int) >= 0 -%} + {{ unselected_fgcolor }} + {%- else -%} + {%- set color = namespace() -%} + {%- for entity in device_entities(haspdevice) -%} + {%- if entity|regex_search("^light\..*_unselected_foreground_color(?:_\d+|)$") -%} + {%- set color.source=entity -%} + {%- endif -%} + {%- endfor -%} + {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} + {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} + {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} + {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} + {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} unselectedbg: >- - {%- set color = namespace() -%} - {%- for entity in device_entities(haspdevice) -%} - {%- if entity|regex_search("^light\..*_unselected_background_color(?:_\d+|)$") -%} - {%- set color.source=entity -%} + {%- if (unselected_bgcolor|int) >= 0 -%} + {{ unselected_bgcolor }} + {%- else -%} + {%- set color = namespace() -%} + {%- for entity in device_entities(haspdevice) -%} + {%- if entity|regex_search("^light\..*_unselected_background_color(?:_\d+|)$") -%} + {%- set color.source=entity -%} + {%- endif -%} + {%- endfor -%} + {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} + {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} + {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} + {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} + {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} + icon_color: >- + {%- if not colorize_icon -%} + {{ selectedfg }} + {%- else -%} + {%- set condition=states(weather_provider) -%} + {%- if condition == "clear-night" -%} + 6350 + {%- elif condition == "cloudy" -%} + 29779 + {%- elif condition == "fog" -%} + 29779 + {%- elif condition == "hail" -%} + 29779 + {%- elif condition == "lightning" -%} + 65504 + {%- elif condition == "lightning-rainy" -%} + 65504 + {%- elif condition == "partlycloudy" -%} + 29779 + {%- elif condition == "pouring" -%} + 29779 + {%- elif condition == "rainy" -%} + 29779 + {%- elif condition == "snowy" -%} + 1535 + {%- elif condition == "snowy-rainy" -%} + 1535 + {%- elif condition == "sunny" -%} + 65504 + {%- elif condition == "windy" -%} + 1535 + {%- elif condition == "windy-variant" -%} + 1535 + {%- elif condition == "exceptional" -%} + 63488 + {%- else -%} + {{ selected_fgcolor }} {%- endif -%} - {%- endfor -%} - {%- set brightness = state_attr(color.source, "brightness")|int(default=255) / 255 -%} - {%- set red=(state_attr(color.source, "rgb_color")[0] * brightness)|int(default=0) -%} - {%- set green=(state_attr(color.source, "rgb_color")[1] * brightness)|int(default=0) -%} - {%- set blue=(state_attr(color.source, "rgb_color")[2] * brightness)|int(default=0) -%} - {{ (red|bitwise_and(248)*256) + (green|bitwise_and(252)*8) + (blue|bitwise_and(248)/8)|int }} + {%- endif -%} trigger_variables: haspdevice: !input haspdevice @@ -276,7 +400,7 @@ action: "{{haspobject}}.bco2={{unselectedbg}}", "{{haspobject}}.txt=\"{{text}} \"" {%- if activepage|int == hasppage|int -%} - ,"delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{selectedfg}},0,1,1,3,\"{{icon}}\"" + ,"delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{icon_color}},0,1,1,3,\"{{icon}}\"" {%- endif -%}] ######################################################################### # Update weather condition if our weather provider changed state @@ -292,7 +416,7 @@ action: "{{haspobject}}.font={{font}}", "{{haspobject}}.txt=\"{{text}} \"" {%- if activepage|int == hasppage|int -%} - ,"delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{selectedfg}},0,1,1,3,\"{{icon}}\"" + ,"delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{icon_color}},0,1,1,3,\"{{icon}}\"" {%- endif -%}] ######################################################################### @@ -318,7 +442,7 @@ action: - service: mqtt.publish data: topic: "{{jsoncommandtopic}}" - payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{selectedfg}},0,1,1,3,\"{{icon}}\""]' + payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{icon_color}},0,1,1,3,\"{{icon}}\""]' - conditions: # Page changed to our page, so place the icon on the screen. - condition: template value_template: '{{ (trigger.topic == jsontopic ) and (trigger.payload_json.event == "page" ) and (trigger.payload_json.value == hasppage|int) }}' @@ -326,7 +450,7 @@ action: - service: mqtt.publish data: topic: "{{jsoncommandtopic}}" - payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{selectedfg}},0,1,1,3,\"{{icon}}\""]' + payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{icon_color}},0,1,1,3,\"{{icon}}\""]' ######################################################################### # Theme: Apply selected foreground color when it changes. # Any change to the button will remove the overlaid icon. @@ -344,7 +468,7 @@ action: - service: mqtt.publish data: topic: "{{jsoncommandtopic}}" - payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{trigger.payload}},0,1,1,3,\"{{icon}}\""]' + payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{icon_color}},0,1,1,3,\"{{icon}}\""]' ######################################################################### # Theme: Apply selected background color on change - conditions: @@ -361,7 +485,7 @@ action: - service: mqtt.publish data: topic: "{{jsoncommandtopic}}" - payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{selectedfg}},0,1,1,3,\"{{icon}}\""]' + payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{icon_color}},0,1,1,3,\"{{icon}}\""]' ######################################################################### # Theme: Apply unselected foreground color on change - conditions: @@ -378,7 +502,7 @@ action: - service: mqtt.publish data: topic: "{{jsoncommandtopic}}" - payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{selectedfg}},0,1,1,3,\"{{icon}}\""]' + payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{icon_color}},0,1,1,3,\"{{icon}}\""]' ######################################################################### # Theme: Apply unselected background color on change - conditions: @@ -395,4 +519,4 @@ action: - service: mqtt.publish data: topic: "{{jsoncommandtopic}}" - payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{selectedfg}},0,1,1,3,\"{{icon}}\""]' + payload: '["delay=1","xstr {{xpos}},{{ypos}},{{iconwidth}},{{iconheight}},{{iconfont}},{{icon_color}},0,1,1,3,\"{{icon}}\""]' diff --git a/images/hasp_Display_Weather_Condition_Icon_Only.png b/images/hasp_Display_Weather_Condition_Icon_Only.png new file mode 100644 index 0000000000000000000000000000000000000000..a147ec24228e82c354baff5c2b0f409a0b01ea07 GIT binary patch literal 843 zcmV-R1GM~!P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D01|XXSaefwW^{L9 za%BKVa%E+1b7*gLUR4MM0008QNklfCzvVA6=S+>(``FWch!6P3lu@pmR^eLYA1*0*brhS2u)1o@DIQc2o0t{ zXfOprgDDUiOo7l~3WQ$H+xv(91jT^RsffP!k5AXPcR#Lv5A*ZajXe10@5A%UtNton z4ut+5F;%P$Jf4b}t$zlW0HNo|Qh6Au+4>Z)F9)+H#j|m7oiQ5 z=VA1!Ai|5#X3BFHM$}Wd5ZYLI?!q{46c<8QJ=~ZILyu8h2yLw2=)>+X#)Z(u-W|F! zoVLUubj4w77=zFihc-F}q3e!bA)H`SSa<2dCdLUW6|5+v`?FuMGxx5n3=dyrbV3#gWk5672y;LJMZb9o)q+g)gCn z!oOT5B{Ul|xD#5a+G%Fb^LP|msI>Q>Hh+s#p#|9^)-{}_Z%)Cl&>dB1&6nJz<6Y>U z=a*OUM&vFhQj+po2>hf(|Z42s*eFA?V;zgrI{<5r2XXE=34BxD*=*`opKs zzx?*c4?q73`{uhJ(+|J@`4{|*2!f+nC1~gv3T_)>7##%rGbm^jU?beNA)Y<2%Ui|A zk00s%YQQ1$;01aQXGG9xYtd`y#r_xNN%8*udwRbbaL7D(f!@RE9{Ahue=q3L$8E52tV7vD&Qdv~?P)ef8=U&qf6VK;O0P1cQVSG`)w@ zF|g+m&|~Q_@$Y~Bg}A4BkDuXx$cqtZlqbOrl+Dfxwh19R%%#%quhm&4?RCu|o7l zE`POz`w2R~@QQP&m2fuSXv@6_Lxtih6)C4agPN0}NN@P^j>{vU#?ZSF%q!INXJkrm z1yAsPg4P#5ptnTvp2Ic;8-zuHjvW^$gq}yulVRtxiLALi!tsJOC%z_n&ElPUCqbLE zi&M?(G#eCHaJD&akNRRR9(WBq@K(Q4w||GN-+^$21dpD&U|yk^yz7i67WKLqP=wI} zU30XaoKt1=4SE&kdd5dKlwgq1b*AjVMnh+_m5+&BA>nvIvrXvO6e{wxI|-U?f^({# z4U&#&+#yZ9r`N|U`po5dvNd&@DV+ zOKPNZTH|#4;UWpWE42vo3b~-iln1m>^1J^Yf*#B1?8RmwUnMYhIZfOLe&81g$9~J* zYh$|(^Z1<0ZVgN-Pec+e1haP^>VRjwE3zx%;LQ&9Kn*PTfb`bKk zT{24Ok`L&e!#2S=RZm(C1=V)y?*T<7qqko4;HvxVSQp^Ceo<=lhwl%-2WU3m#$?)$1YA}~j6f|J7 z;3+~36>7p_v#^*mKXx|EF=2~~<4mj3T~OWimAR(G%m#izyAIBH6kQ%B(y}t51X`gO zkFaWjHuvTBaAuOVU>&x&gJPV54H;|}HcYEwsN~lxQ(HX`c3`8MbAQ^J{l-L5(+MLu9?NOI)E+*)UtrI^p4WHlKz(eNp4j25W_S!{8QQBJmAuzmIZoOu$%%)!j1kR zUyNf=+$ciI7Y4PQTAuG-hS}hn2!dg#Wns-mYa#?4JPiF5yZ&)75rPgL2DL1#e;iDN zpo7Ptch7*{)pdlRg9l*LoWB7aCIlVq4z?3tUQG-6cQkM^ZVN)t!R|n^6mP~Ruj(`* z=wNqhg5GeaF%g0eb|?Qfev?mm&lmT#68Ma4DXiUq6S1UB*JtVHdL3 a&;J8EZ}(DbhQOx)0000UoQcUg% zct!(p1u1H=g8!Qb4+w(WAw+3r{POzk)nER)&C3PtuUoxd{y5H!a6vn_!UgTz3Kz6< zD_qddt#Cm*x55SO+zJ=8b1PiX&aH4kJGa6G?c9n9f_{5@`+xlT^MAt2%S-s<>({Ta z)5CF&Vw0euV<@-|eCX{s`!gtLBwz~G2K-s`zWh-9{{5TQe+CShgBNH$oDo5XqeU;M z#rije;}m}V`bFzM1BT4O3$z|icf+4PePWmUL0v|)~`XY`F!r5N;FS-`^qbCEw$3*iU&d z0*!_~*nzTHS-~>F1x@SWSR01^*wYzQGX0S$9J!XQ_QMbg76>kAS`WwCa7BW9a6qcY z8H0@_grmhmdK5ujMp3X#a6!|0IM#;Q%>!Y>`;g7e-+#Y06?zy(d~ z;g}lked;`gUC$nDLs5}(M9GtZ1Q#@|hhu8^;Pb`;4({y1RFH|;fRMez8-U>i7c{Mh zV`_NIv*#`B@%dsj?|=oHVK~7BP3z&98fG64XOB}yl%6Llj}e8guyEEN<=}1C`G?g6 zT3gUtpnu7L?kE0;#)!8Zyg;iEjgD3WaAq}Wk=81g7W5vUEHbn(>#z}EP{Fcn@QHR; z1Xhu*WhyeNKyQJjGT1Yfexhh`qe%$H00u&OIh-vub}1t zl7IBXhj$DrAji-;3C0yl`io>rYXOV%euCDUAJCd3d(B~)f(1fTpkw0#8Q1Hmc>yP% zDY9lb;dntu3ttkwrg^2_NzhT)W>?cZ%>o4`oMnc~qu$KfftQFIp7oWwJ=lH%VIaYx zr!E**$Oi9P(LhtLO@}P>7HC?d^ z1`SWIIr7Jm!r zEP=7@wD4^B#1Bw<89sQhzTkom(4-iPX{@D(lfBz(I@EbK{2|U83+!|!`dT(HS#=m! zNCjQjWd&Uk(E4BxL63FS*pny$)2d*BV87E?ct*V7)4B>{KWWkDQ9$b?7*udU)0#uC zLL}Ly+?zb>ock$vFJq^U==M34-G3GsR7fL_DG$`;wTGa`V%lp}JoRAlH?2K9!+k74 zkA1T=N&s_D9Ska9&1iivrV=n+(9J4iUG1txCqdu#(IoWV4hEhL{|kZ!tp8wa*0M07 zfYqf{!7{<#E=0^alOEeOt3=!0*wwC{=u71?C>^2eRHk`0{ISl^!w)*5Q-8@dTE1`P3F*1?0} zgsh;Wy+mu3W|b(L(pp9DD?sZStu5pHSi)*_6X7DjH$w0kU{#aBJ_1|5s}yB5fW@$% z0ZK5IkQFpwv0zC;bQMa%Vt=vFjG2y|1#2R==HwW|YIGH3cfB*Wq?lF1AL!J<9*?5a z!$O!=dgMSU6k`!qNzl=Cx!zpV$&#~nYo4I!r(i(>i-n0{HFTBudS*(qXCZEwA+ODr z^Tt9}(*YD=ei!i8ay@04P+5{FR5qtVyB4_Cek-N@86rn2xJuYa z*$mNw-U>u!*$|nAFMjZt`)}_`38oG!uVI-`7c{`K(X~Z0R3O!KmasRp7DM$Cr6d{= zI%(V|nrK&m`Z26YzJKA%YI^#w3(M%emO=)5|au_JrdMLoEwi4q6K?Xy-KaUF`PT!GH_eISp!A z*nT@0a6vogpij?$*3Gz}ofC-EoIU{@#s%%{4vrIlA59DCXEZR