From 4158970a655a73aa464e0b01dfd2549f31df363a Mon Sep 17 00:00:00 2001 From: Martijn Date: Sat, 7 Dec 2024 19:52:34 +0100 Subject: [PATCH] added basic example --- Examples/2BAR_1Display_Basic.yaml | 260 +++++++++++++++++++++++ Examples/3BAR_1Display_Basic.yaml | 339 ++++++++++++++++++++++++++++++ 2 files changed, 599 insertions(+) create mode 100644 Examples/2BAR_1Display_Basic.yaml create mode 100644 Examples/3BAR_1Display_Basic.yaml diff --git a/Examples/2BAR_1Display_Basic.yaml b/Examples/2BAR_1Display_Basic.yaml new file mode 100644 index 0000000..9825702 --- /dev/null +++ b/Examples/2BAR_1Display_Basic.yaml @@ -0,0 +1,260 @@ +packages: + remote_package_files: + url: https://github.com/dixi83/ESPHome_ButtonPlus + files: + - 'package/2bar_1display.yaml' + ref: main + refresh: 10s + +globals: + - id: !extend nr_of_pages + initial_value: '1' + +font: + - file: "https://github.com/web-fonts/ttf/raw/refs/heads/master/bpg-ingiri-arial-webfont.ttf" + id: font_arial20 + size: 20 + bpp: 4 + - file: "https://torinak.com/font/7segment.ttf" + id: font_clock + size: 64 + bpp: 4 + - file: "https://torinak.com/font/7segment.ttf" + id: font_date + size: 24 + bpp: 4 + +image: + - file: mdi:lightbulb + id: lightbulb + resize: 80x80 + - file: mdi:alert + id: alert + resize: 80x80 + - file: mdi:chevron-right + id: icon_next_page + resize: 30x30 + - file: mdi:chevron-left + id: icon_prev_page + resize: 30x30 + - file: mdi:home-thermometer-outline + id: icon_temp_inside + resize: 40x40 + +color: + - id: red + hex: FF0000 + - id: blue + hex: 0000FF + - id: yellow + hex: FFFF00 + - id: green + hex: 00FF00 + - id: orange + hex: FF7F00 + - id: white + hex: FFFFFF + - id: grey + hex: A6A6A6 + +event: + - platform: template + name: BAR1 button Left event + id: bar1_btn_left_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + - platform: template + name: BAR1 button Right event + id: bar1_btn_right_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + - platform: template + name: BAR2 button Left event + id: bar2_btn_left_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + - platform: template + name: BAR2 button Right event + id: bar2_btn_right_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + + +binary_sensor: + - id: !extend main_display_btn_left + on_click: + - script.execute: prev_page + - id: !extend main_display_btn_right + on_click: + - script.execute: next_page + - id: !extend bar1_btn_left + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_left_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_left_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_left_event).trigger("long press page 0"); + break; + } + - id: !extend bar1_btn_right + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_right_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_right_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_right_event).trigger("long press page 0"); + break; + } + - id: !extend bar2_btn_left + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_left_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_left_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_left_event).trigger("long press page 0"); + break; + } + - id: !extend bar2_btn_right + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_right_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_right_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_right_event).trigger("long press page 0"); + break; + } + + +display: + ######### + # MAIN ## + ######### + - id: !extend main_display + # data_rate: 40MHz + lambda: |- + id(all_pages_main).execute(); + switch (id(actual_page)){ + case 0: + it.print(100, 160, id(font_arial20), "This is page 0!"); + break; + } + +script: + - id: all_pages_main + then: + - lambda: |- + //>>> prev/next icons next to butotns + id(main_display).image(0, 208, id(icon_prev_page), ImageAlign::TOP_LEFT, id(red)); + id(main_display).image(320, 208, id(icon_next_page), ImageAlign::TOP_RIGHT, id(red)); + // + //>>> temperature inside: + id(main_display).image(36, 15, id(icon_temp_inside), ImageAlign::TOP_CENTER, id(red)); + id(main_display).printf(36, 80, id(font_arial20), id(white), TextAlign::TOP_CENTER , "%.1f°", id(inside_temperature).state); + // + //>>> print time and date + id(main_display).strftime(160, 5, id(font_clock), TextAlign::TOP_CENTER, "%H:%M", id(datetime).now()); + id(main_display).strftime(160, 80, id(font_date), TextAlign::TOP_CENTER, "%d-%m-%Y", id(datetime).now()); + - id: !extend bar1_left_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + } + - id: !extend bar1_right_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + } + - id: !extend bar2_left_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + } + - id: !extend bar2_right_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + } diff --git a/Examples/3BAR_1Display_Basic.yaml b/Examples/3BAR_1Display_Basic.yaml new file mode 100644 index 0000000..bc1a46f --- /dev/null +++ b/Examples/3BAR_1Display_Basic.yaml @@ -0,0 +1,339 @@ +packages: + remote_package_files: + url: https://github.com/dixi83/ESPHome_ButtonPlus + files: + - 'package/3bar_1display.yaml' + ref: main + refresh: 10s + +globals: + - id: !extend nr_of_pages + initial_value: '1' + +font: + - file: "https://github.com/web-fonts/ttf/raw/refs/heads/master/bpg-ingiri-arial-webfont.ttf" + id: font_arial20 + size: 20 + bpp: 4 + - file: "https://torinak.com/font/7segment.ttf" + id: font_clock + size: 64 + bpp: 4 + - file: "https://torinak.com/font/7segment.ttf" + id: font_date + size: 24 + bpp: 4 + +image: + - file: mdi:lightbulb + id: lightbulb + resize: 80x80 + - file: mdi:alert + id: alert + resize: 80x80 + - file: mdi:chevron-right + id: icon_next_page + resize: 30x30 + - file: mdi:chevron-left + id: icon_prev_page + resize: 30x30 + - file: mdi:home-thermometer-outline + id: icon_temp_inside + resize: 40x40 + +color: + - id: red + hex: FF0000 + - id: blue + hex: 0000FF + - id: yellow + hex: FFFF00 + - id: green + hex: 00FF00 + - id: orange + hex: FF7F00 + - id: white + hex: FFFFFF + - id: grey + hex: A6A6A6 + +event: + - platform: template + name: BAR1 button Left event + id: bar1_btn_left_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + - platform: template + name: BAR1 button Right event + id: bar1_btn_right_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + - platform: template + name: BAR2 button Left event + id: bar2_btn_left_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + - platform: template + name: BAR2 button Right event + id: bar2_btn_right_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + - platform: template + name: BAR3 button Left event + id: bar3_btn_left_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + - platform: template + name: BAR3 button Right event + id: bar3_btn_right_event + event_types: + - "press page 0" + - "release page 0" + - "long press page 0" + + +binary_sensor: + - id: !extend main_display_btn_left + on_click: + - script.execute: prev_page + - id: !extend main_display_btn_right + on_click: + - script.execute: next_page + - id: !extend bar1_btn_left + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_left_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_left_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_left_event).trigger("long press page 0"); + break; + } + - id: !extend bar1_btn_right + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_right_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_right_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar1_btn_right_event).trigger("long press page 0"); + break; + } + - id: !extend bar2_btn_left + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_left_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_left_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_left_event).trigger("long press page 0"); + break; + } + - id: !extend bar2_btn_right + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_right_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_right_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar2_btn_right_event).trigger("long press page 0"); + break; + } + - id: !extend bar3_btn_left + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar3_btn_left_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar3_btn_left_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar3_btn_left_event).trigger("long press page 0"); + break; + } + - id: !extend bar3_btn_right + on_click: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar3_btn_right_event).trigger("press page 0"); + break; + } + on_release: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar3_btn_right_event).trigger("release page 0"); + break; + } + on_multi_click: + - timing: + - ON for at least 2s + then: + lambda: |- + switch (id(actual_page)){ + case 0: + id(bar3_btn_right_event).trigger("long press page 0"); + break; + } + +display: + ######### + # MAIN ## + ######### + - id: !extend main_display + # data_rate: 40MHz + lambda: |- + id(all_pages_main).execute(); + switch (id(actual_page)){ + case 0: + it.print(100, 160, id(font_arial20), "This is page 0!"); + break; + } + +script: + - id: all_pages_main + then: + - lambda: |- + //>>> prev/next icons next to butotns + id(main_display).image(0, 208, id(icon_prev_page), ImageAlign::TOP_LEFT, id(red)); + id(main_display).image(320, 208, id(icon_next_page), ImageAlign::TOP_RIGHT, id(red)); + // + //>>> temperature inside: + id(main_display).image(36, 15, id(icon_temp_inside), ImageAlign::TOP_CENTER, id(red)); + id(main_display).printf(36, 80, id(font_arial20), id(white), TextAlign::TOP_CENTER , "%.1f°", id(inside_temperature).state); + // + //>>> print time and date + id(main_display).strftime(160, 5, id(font_clock), TextAlign::TOP_CENTER, "%H:%M", id(datetime).now()); + id(main_display).strftime(160, 80, id(font_date), TextAlign::TOP_CENTER, "%d-%m-%Y", id(datetime).now()); + - id: !extend bar1_left_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + } + - id: !extend bar1_right_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + } + - id: !extend bar2_left_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + } + - id: !extend bar2_right_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + } + - id: !extend bar3_left_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + } + - id: !extend bar3_right_draw + then: + - lambda: |- + switch (id(actual_page)){ + case 0: + id(bar_display).image(80, 0, id(lightbulb), ImageAlign::TOP_CENTER, id(red)); + break; + }