Merge pull request #5 from balk77/main

Added short getting started page

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

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);