diff --git a/thermostat.yml b/thermostat.yml index 5051901..487be88 100644 --- a/thermostat.yml +++ b/thermostat.yml @@ -92,7 +92,7 @@ time: id: time_label text: !lambda |- auto time = id(hass_time).now(); - return time.strftime("%a %m/%d/%y %I:%M"); + return time.strftime("%a %b %e, %I:%M %p"); # - script.execute: update_date_time_label sensor: - platform: bme280_i2c @@ -108,6 +108,10 @@ sensor: text: !lambda |- auto temp = x * (9.0/5.0) + 32.0; return str_truncate(to_string(temp), 4); + - lvgl.indicator.update: + id: current_temp_needle + value: !lambda |- + return x * 10.0; humidity: name: "Humidity" id: humidity @@ -162,11 +166,27 @@ climate: - name: Home default_target_temperature_low: 67 °F default_target_temperature_high: 78 °F + - name: Summer + default_target_temperature_low: 60 °F + default_target_temperature_high: 77 °F + - name: Winter + default_target_temperature_low: 68 °F + default_target_temperature_high: 85 °F - name: Away default_target_temperature_low: 60 °F default_target_temperature_high: 85 °F on_state: then: + - lvgl.indicator.update: + id: hvac_temp_ticks + start_value: !lambda |- + return x.target_temperature_high * 10.0; + end_value: !lambda |- + return x.target_temperature_low * 10.0; + - lvgl.arc.update: + id: hvac_temp_knob + value: !lambda |- + return x.target_temperature_high * 10.0; - if: condition: lambda: "return x.mode != CLIMATE_MODE_OFF;" @@ -438,435 +458,365 @@ lvgl: pages: - id: main_page bg_color: 0x282A36 - layout: - type: flex - pad_row: 4 - pad_column: 4 - flex_align_main: CENTER - flex_align_cross: CENTER - flex_align_track: CENTER widgets: - obj: - align: top_mid + align: center bg_color: 0x282A36 - height: 480 - flex_grow: 1 border_width: 0 - widgets: - - label: - id: time_label - text: "" - text_color: ${color_darker_white} - text_font: h3 - align: top_left - x: 10 - y: 10 - - label: - id: wifi_label - text: "󰖩" - text_color: ${color_darker_white} - align: top_right - text_font: sm_icons - y: 10 - x: -10 - - button: - id: beat_button - height: 60 - width: 60 - x: 30 - y: 50 - bg_color: 0x34353e - border_width: 2 - border_color: 0xE2E4E5 - radius: 20 - checkable: true - checked: - bg_color: 0xff5c57 - on_click: - then: - - switch.toggle: heater - widgets: - - label: - text: "\U000F0238" - align: center - text_font: icons - text_color: 0xE2E4E5 - - button: - id: k_button - height: 60 - width: 60 - x: 40 - y: 120 - bg_color: 0x34353e - border_width: 2 - border_color: 0xE2E4E5 - radius: 20 - checkable: true - checked: - bg_color: 0x9aedfe - on_click: - then: - - switch.toggle: ac - widgets: - - label: - text: "\U000F0717" - align: center - text_font: icons - text_color: 0xE2E4E5 - - button: - id: f_button - height: 60 - width: 60 - x: 40 - y: 200 - bg_color: 0x34353e - border_width: 2 - border_color: 0xE2E4E5 - radius: 20 - checkable: true - checked: - bg_color: 0x9aedfe - on_click: - then: - - switch.toggle: fan - widgets: - - label: - text: "\U000F0717" - align: center - text_font: icons - text_color: 0xE2E4E5 - - obj: - bg_color: 0x282A36 height: 480 - flex_grow: 2 - border_width: 0 + width: 800 + scrollable: false widgets: - obj: - align: BOTTOM_MID + bg_color: ${color_bg} width: 100% - bg_color: 0x282A36 border_width: 0 - layout: - type: flex - pad_row: 4 - pad_column: 4 - flex_align_main: CENTER - flex_align_cross: END - flex_align_track: END widgets: - - button: - id: heat_button - height: 60 - width: 60 - bg_color: 0x34353e - border_width: 2 - border_color: 0xE2E4E5 - radius: 20 - checkable: true - checked: - bg_color: 0xff5c57 - on_click: - then: - - lvgl.widget.update: - id: off_button - state: - checked: false - - lvgl.widget.update: - id: fan_button - state: - checked: false - - lvgl.widget.update: - id: cool_button - state: - checked: false - - climate.control: - id: climape - mode: HEAT - widgets: - - label: - text: "\U000F0238" - align: center - text_font: icons - text_color: 0xE2E4E5 - - button: - id: cool_button - height: 60 - width: 60 - bg_color: 0x34353e - border_width: 2 - border_color: 0xE2E4E5 - radius: 20 - checkable: true - checked: - bg_color: 0x9aedfe - on_click: - then: - - lvgl.widget.update: - id: off_button - state: - checked: false - - lvgl.widget.update: - id: fan_button - state: - checked: false - - lvgl.widget.update: - id: heat_button - state: - checked: false - - climate.control: - id: climape - mode: COOL - widgets: - - label: - text: "\U000F0717" - align: center - text_font: icons - text_color: 0xE2E4E5 - - button: - id: fan_button - height: 60 - width: 60 - bg_color: 0x34353e - border_width: 2 - border_color: 0xE2E4E5 - radius: 20 - checkable: true - checked: - bg_color: 0x5AF78E - on_click: - then: - - lvgl.widget.update: - id: off_button - state: - checked: false - - lvgl.widget.update: - id: cool_button - state: - checked: false - - lvgl.widget.update: - id: heat_button - state: - checked: false - - climate.control: - id: climape - mode: FAN_ONLY - widgets: - - label: - text: "\U000F0210" - align: center - text_font: icons - text_color: 0xE2E4E5 - - button: - id: off_button - height: 60 - width: 60 - bg_color: 0x34353E - border_width: 2 - border_color: 0xE2E4E5 - radius: 20 - checkable: true - checked: - bg_color: 0xFF5C57 - on_click: - then: - - lvgl.widget.update: - id: fan_button - state: - checked: false - - lvgl.widget.update: - id: cool_button - state: - checked: false - - lvgl.widget.update: - id: heat_button - state: - checked: false - - climate.control: - id: climape - mode: 'OFF' - widgets: - - label: - text: "\U000F09DF" - text_font: icons - align: center - text_color: 0xE2E4E5 - - # Arc Outer Ring only for visual effect - - arc: - id: arc_ring_outer - height: 370 - width: 370 - y: -20 - align: CENTER - arc_color: ${color_light_blue} - arc_opa: COVER - arc_width: 5 - knob: - bg_color: ${color_white} - # Meter ticks and needle - - meter: - id: meter_ticks - hidden: false - height: 360 - width: 360 - y: -20 - align: CENTER - bg_opa: TRANSP - border_width: 0 - scales: - range_from: 160 # 16°C - range_to: 340 # 34°C - # Set temperature ticks background - ticks: - count: 60 - length: 18 - width: 2 - color: ${color_white} - indicators: - # Curremt temperature needle - - line: - id: current_temp_needle - color: ${color_green} - width: 3 - r_mod: 10 - value: 340 # 34°C Should be the same as the current temperature label - # Set temperature ticks - - tick_style: - id: hvac_temp_ticks - start_value: 160 - end_value: 240 # 24°C Should be the same as the set temperature label - color_start: ${color_red} - color_end: ${color_red} - width: 2 - # Meter inner Ring only for visual effect + - label: + id: time_label + text: "" + text_color: ${color_darker_white} + text_font: h3 + align: top_left + - label: + id: wifi_label + text: "󰖩" + text_color: ${color_darker_white} + align: top_right + text_font: sm_icons - obj: - id: meter_ring_inner - height: 300 - width: 300 - y: -20 - radius: 150 - align: CENTER - border_width: 12 - border_color: ${color_bg} - bg_color: ${color_bg_alt} - # Set temperature knob, should change with the set temperature ticks - - arc: - id: hvac_temp_knob - hidden: false - align: CENTER - arc_opa: TRANSP - adjustable: true - value: 240 # 24°C (24x10) Should be the same as the set temperature needle - min_value: 160 - max_value: 340 - width: 335 - height: 335 - y: -20 - arc_width: 16 - change_rate: 30 - indicator: - arc_opa: TRANSP - arc_width: 16 - knob: - bg_color: ${color_dark_blue} - border_width: 4 - border_color: ${color_white} - on_change: - then: - - if: - condition: - lambda: "return id(climape).mode == CLIMATE_MODE_COOL;" + bg_opa: 0 + height: 480 + width: 100% + border_width: 0 + widgets: + - obj: + align: BOTTOM_MID + width: 100% + bg_color: 0x282A36 + border_width: 0 + layout: + type: flex + pad_row: 4 + pad_column: 4 + flex_align_main: CENTER + flex_align_cross: END + flex_align_track: END + widgets: + - button: + id: heat_button + height: 60 + width: 60 + bg_color: 0x34353e + border_width: 2 + border_color: 0xE2E4E5 + radius: 20 + checkable: true + checked: + bg_color: 0xff5c57 + on_click: + then: + - lvgl.widget.update: + id: off_button + state: + checked: false + - lvgl.widget.update: + id: fan_button + state: + checked: false + - lvgl.widget.update: + id: cool_button + state: + checked: false + - climate.control: + id: climape + mode: HEAT + widgets: + - label: + text: "\U000F0238" + align: center + text_font: icons + text_color: 0xE2E4E5 + - button: + id: cool_button + height: 60 + width: 60 + bg_color: 0x34353e + border_width: 2 + border_color: 0xE2E4E5 + radius: 20 + checkable: true + checked: + bg_color: 0x9aedfe + on_click: + then: + - lvgl.widget.update: + id: off_button + state: + checked: false + - lvgl.widget.update: + id: fan_button + state: + checked: false + - lvgl.widget.update: + id: heat_button + state: + checked: false + - climate.control: + id: climape + mode: COOL + widgets: + - label: + text: "\U000F0717" + align: center + text_font: icons + text_color: 0xE2E4E5 + - button: + id: fan_button + height: 60 + width: 60 + bg_color: 0x34353e + border_width: 2 + border_color: 0xE2E4E5 + radius: 20 + checkable: true + checked: + bg_color: 0x5AF78E + on_click: + then: + - lvgl.widget.update: + id: off_button + state: + checked: false + - lvgl.widget.update: + id: cool_button + state: + checked: false + - lvgl.widget.update: + id: heat_button + state: + checked: false + - climate.control: + id: climape + mode: FAN_ONLY + widgets: + - label: + text: "\U000F0210" + align: center + text_font: icons + text_color: 0xE2E4E5 + - button: + id: off_button + height: 60 + width: 60 + bg_color: 0x34353E + border_width: 2 + border_color: 0xE2E4E5 + radius: 20 + checkable: true + checked: + bg_color: 0xFF5C57 + on_click: + then: + - lvgl.widget.update: + id: fan_button + state: + checked: false + - lvgl.widget.update: + id: cool_button + state: + checked: false + - lvgl.widget.update: + id: heat_button + state: + checked: false + - climate.control: + id: climape + mode: 'OFF' + widgets: + - label: + text: "\U000F09DF" + text_font: icons + align: center + text_color: 0xE2E4E5 + + # Arc Outer Ring only for visual effect + - arc: + id: arc_ring_outer + height: 370 + width: 370 + y: -20 + align: CENTER + arc_color: ${color_light_blue} + arc_opa: COVER + arc_width: 5 + knob: + bg_color: ${color_white} + # Meter ticks and needle + - meter: + id: meter_ticks + hidden: false + height: 360 + width: 360 + y: -20 + align: CENTER + bg_opa: TRANSP + border_width: 0 + scales: + range_from: 160 # 16°C + range_to: 340 # 34°C + # Set temperature ticks background + ticks: + count: 60 + length: 18 + width: 2 + color: ${color_white} + indicators: + # Curremt temperature needle + - line: + id: current_temp_needle + color: ${color_red} + width: 3 + r_mod: 10 + value: 340 # 34°C Should be the same as the current temperature label + # Set temperature ticks + - tick_style: + id: hvac_temp_ticks + start_value: 160 + end_value: 240 # 24°C Should be the same as the set temperature label + color_start: ${color_green} + color_end: ${color_green} + width: 2 + # Meter inner Ring only for visual effect + - obj: + id: meter_ring_inner + height: 300 + width: 300 + y: -20 + radius: 150 + align: CENTER + border_width: 12 + border_color: ${color_bg} + bg_color: ${color_bg_alt} + # Set temperature knob, should change with the set temperature ticks + - arc: + id: hvac_temp_knob + hidden: false + align: CENTER + arc_opa: TRANSP + adjustable: true + value: 240 # 24°C (24x10) Should be the same as the set temperature needle + min_value: 160 + max_value: 340 + width: 335 + height: 335 + y: -20 + arc_width: 16 + change_rate: 30 + indicator: + arc_opa: TRANSP + arc_width: 16 + knob: + bg_color: ${color_dark_blue} + border_width: 4 + border_color: ${color_white} + on_change: then: - - climate.control: - id: climape - target_temperature_high: !lambda |- - return (x - 32.0) / (9.0 / 5.0); - - if: - condition: - lambda: "return id(climape).mode == CLIMATE_MODE_FAN_ONLY;" - then: - - climate.control: - id: climape - target_temperature_high: !lambda |- - return (x - 32.0) / (9.0 / 5.0); - - if: - condition: - lambda: "return id(climape).mode == CLIMATE_MODE_HEAT;" - then: - - climate.control: - id: climape - target_temperature_low: !lambda |- - return (x - 32.0) / (9.0 / 5.0); - - - - - - - # - arc: - # id: current_temp_arc - # adjustable: true - # min_value: 40 # 12°C (* 10 because decimals not supported) - # max_value: 95 # 34°C - # height: 360 - # width: 360 - # align: CENTER - # arc_width: 20 - # indicator: - # arc_width: 20 - # knob: - # width: 30 - # value: !lambda |- - # auto mode = id(climape).mode; - # if (mode == CLIMATE_MODE_COOL) - # return id(climape).target_temperature_high * (9.0 / 5.0) + 32; - # on_change: - # then: - # - if: - # condition: - # lambda: "return id(climape).mode == CLIMATE_MODE_COOL;" - # then: - # - climate.control: - # id: climape - # target_temperature_high: !lambda |- - # return (x - 32.0) / (9.0 / 5.0); - # - if: - # condition: - # lambda: "return id(climape).mode == CLIMATE_MODE_FAN_ONLY;" - # then: - # - climate.control: - # id: climape - # target_temperature_high: !lambda |- - # return (x - 32.0) / (9.0 / 5.0); - # - if: - # condition: - # lambda: "return id(climape).mode == CLIMATE_MODE_HEAT;" - # then: - # - climate.control: - # id: climape - # target_temperature_low: !lambda |- - # return (x - 32.0) / (9.0 / 5.0); - - - label: - id: set_temp_label - text_font: h2 - text: "Loading..." - align: center - y: -90 - text_color: 0xA5A5A9 - - label: - id: action_label - text_font: h3 - text: "Loading..." - align: center - # x: 145 - y: 70 - text_color: 0xA5A5A9 - - label: - id: temp_label - text_font: h1 - text: "Loading..." - align: center - y: -10 - text_color: 0xE2E4E5 - + - if: + condition: + lambda: "return id(climape).mode == CLIMATE_MODE_COOL;" + then: + - climate.control: + id: climape + target_temperature_high: !lambda |- + return x / 10; + - if: + condition: + lambda: "return id(climape).mode == CLIMATE_MODE_FAN_ONLY;" + then: + - climate.control: + id: climape + target_temperature_high: !lambda |- + return x / 10; + - if: + condition: + lambda: "return id(climape).mode == CLIMATE_MODE_HEAT;" + then: + - climate.control: + id: climape + target_temperature_low: !lambda |- + return x / 10; + + + + + + + # - arc: + # id: current_temp_arc + # adjustable: true + # min_value: 40 # 12°C (* 10 because decimals not supported) + # max_value: 95 # 34°C + # height: 360 + # width: 360 + # align: CENTER + # arc_width: 20 + # indicator: + # arc_width: 20 + # knob: + # width: 30 + # value: !lambda |- + # auto mode = id(climape).mode; + # if (mode == CLIMATE_MODE_COOL) + # return id(climape).target_temperature_high * (9.0 / 5.0) + 32; + # on_change: + # then: + # - if: + # condition: + # lambda: "return id(climape).mode == CLIMATE_MODE_COOL;" + # then: + # - climate.control: + # id: climape + # target_temperature_high: !lambda |- + # return (x - 32.0) / (9.0 / 5.0); + # - if: + # condition: + # lambda: "return id(climape).mode == CLIMATE_MODE_FAN_ONLY;" + # then: + # - climate.control: + # id: climape + # target_temperature_high: !lambda |- + # return (x - 32.0) / (9.0 / 5.0); + # - if: + # condition: + # lambda: "return id(climape).mode == CLIMATE_MODE_HEAT;" + # then: + # - climate.control: + # id: climape + # target_temperature_low: !lambda |- + # return (x - 32.0) / (9.0 / 5.0); + + - label: + id: set_temp_label + text_font: h2 + text: "Loading..." + align: center + y: -90 + text_color: 0xA5A5A9 + - label: + id: action_label + text_font: h3 + text: "Loading..." + align: center + # x: 145 + y: 70 + text_color: 0xA5A5A9 + - label: + id: temp_label + text_font: h1 + text: "Loading..." + align: center + y: -10 + text_color: 0xE2E4E5 + +