diff --git a/Docs/Readme.md b/Docs/Readme.md new file mode 100644 index 0000000..fb7c8de --- /dev/null +++ b/Docs/Readme.md @@ -0,0 +1,14 @@ +# Getting Started +In order to get started with a 3 bar module, you should +1. Make sure you have [ESPHome](https://esphome.io) installed +2. Copy the file [3pages_TotalExample.yml](/examples/3pages_TotalExample.yml) to the root of the repository +3. Create a file secrets.yaml and add the following +``` +wifi_ssid: "YOUR_SSID" +wifi_password: "YOUR_PASSWORD" +``` +5. modify the yml file to your liking (optional) +6. Compile (Install, manual download) and download in modern format +7. Connect the B+ to your computer +8. Open a compatible browser such as Chrome and visit https://web.esphome.io +9. Load the downloaded file to your device and enjoy diff --git a/Examples/3pages_TotalExample.yml b/Examples/3pages_TotalExample.yml index 73595c5..3d56585 100644 --- a/Examples/3pages_TotalExample.yml +++ b/Examples/3pages_TotalExample.yml @@ -46,6 +46,9 @@ packages: globals: - id: !extend nr_of_pages initial_value: '3' + - id: active_page_name + type: std::string + initial_value: "" font: - file: "https://github.com/web-fonts/ttf/raw/refs/heads/master/bpg-ingiri-arial-webfont.ttf" @@ -490,12 +493,18 @@ display: switch (id(actual_page)){ case 0: id(containers).execute(); + // Page name to be shown on page 1 + id(active_page_name) = "Page 1"; break; case 1: id(music_card).execute(20, 125); + // Page name to be shown on page 2 + id(active_page_name) = "Music page"; break; case 2: it.print(100, 160, id(font_arial20), "This is page 3!"); + // Page name to be shown on page 3 + id(active_page_name) = "Page 3"; break; } @@ -535,6 +544,9 @@ script: 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)); // + //>>> Show page name at bottom of display + id(main_display).printf(160, 238, id(font_arial20), id(white), TextAlign::BASELINE_CENTER, "%s", id(active_page_name).c_str()); + // //>>> 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);