Refine calendar event data display, prevent overlapping and display

event's end time.

esphome/epaperframe.yaml

@@ -15,7 +15,7 @@ esphome:
     priority: -10
     then:
       - delay: 10s
-      - display.page.show: environment # temporary for power page dev
+      - display.page.show: calendar # temporary for power page dev
       - component.update: epaper
 
 esp32:
@@ -46,6 +46,9 @@ api:
   encryption:
     key: !secret apikey
 
+# Include ArduinoJson support for the compact calendar event feed.
+json:
+
 ota:
   platform: esphome
   password: !secret ota
@@ -248,6 +251,12 @@ font:
     id: roboto_med_30
     size: 30
 
+  # Small, digits-only font used to emphasize the current date in the month grid.
+  - file: "fonts/Roboto-Bold.ttf"
+    id: calendar_day_bold
+    size: 15
+    glyphs: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+
   - file: "fonts/Roboto-Regular.ttf"
     id: footer_font
     size: 15
@@ -1136,7 +1145,7 @@ display:
 
           /* LEFT PANE: agenda */
           it.image(10, 10, id(c1024_logo));
-          it.print(100, 27, id(roboto_med_30), TextAlign::BASELINE_LEFT, "TERMINE");
+          it.print(226, 38, id(roboto_med_30), TextAlign::BASELINE_CENTER, "TERMINE");
           it.line(10, 55, 355, 55);
           it.line(365, 10, 365, 352);
 
@@ -1161,31 +1170,37 @@ display:
                 break;
               }
 
+              const int group_y = agenda_y;
+              int event_y = group_y;
               const int day_number = day["day"] | 0;
               const char *weekday = day["weekday"] | "";
-              const bool is_today = (day["today"] | 0) == 1;
+              it.printf(30, group_y, id(sub_sensor_font), TextAlign::TOP_CENTER, "%d", day_number);
-              it.printf(30, agenda_y, id(sub_sensor_font), TextAlign::TOP_CENTER, "%d", day_number);
+              it.printf(30, group_y + 28, id(footer_font), TextAlign::TOP_CENTER, "%s", weekday);
-              it.printf(30, agenda_y + 28, id(footer_font), TextAlign::TOP_CENTER, "%s", weekday);
-              it.print(68, agenda_y + 2, id(footer_font), TextAlign::TOP_LEFT, is_today ? "HEUTE" : "");
-              it.line(58, agenda_y, 58, agenda_y + 32 + events.size() * 35);
-              agenda_y += 36;
 
               for (JsonVariant event_variant : events) {
-                if (agenda_y + 33 > 345) {
+                if (event_y + 33 > 345) {
                   has_hidden_events = true;
                   break;
                 }
                 JsonObject event = event_variant.as<JsonObject>();
                 const char *title = event["title"] | "Ohne Titel";
                 const char *time = event["time"] | "";
+                const char *end_time = event["end"] | "";
                 const char *meta = event["meta"] | "";
-                it.printf(72, agenda_y, id(sensor_unit), TextAlign::TOP_LEFT, "%s", title);
+                it.printf(72, event_y, id(sensor_unit), TextAlign::TOP_LEFT, "%s", title);
-                it.printf(350, agenda_y, id(sensor_unit), TextAlign::TOP_RIGHT, "%s", time);
+                it.printf(350, event_y, id(sensor_unit), TextAlign::TOP_RIGHT, "%s", time);
-                it.printf(72, agenda_y + 20, id(footer_font), TextAlign::TOP_LEFT, "%s", meta);
+                it.printf(72, event_y + 20, id(footer_font), TextAlign::TOP_LEFT, "%s", meta);
-                agenda_y += 35;
+                if (end_time[0] != '\0') {
+                  it.printf(350, event_y + 20, id(footer_font), TextAlign::TOP_RIGHT, "%s", end_time);
+                }
+                event_y += 35;
                 has_events = true;
               }
-              agenda_y += 5;
+
+              int group_bottom = event_y;
+              if (group_bottom < group_y + 36) group_bottom = group_y + 36;
+              it.line(58, group_y, 58, group_bottom);
+              agenda_y = group_bottom + 5;
               if (has_hidden_events) break;
             }
           }
@@ -1201,7 +1216,6 @@ display:
           char month_title[24];
           snprintf(month_title, sizeof(month_title), "%s %d", months[month - 1], year);
           it.printf(502, 18, id(sensor_unit), TextAlign::TOP_CENTER, "%s", month_title);
-          it.line(375, 28, 630, 28);
           it.print(384, 47, id(footer_font), TextAlign::TOP_CENTER, "KW");
           for (int column = 0; column < 7; column++) {
             it.printf(415 + column * 30, 47, id(footer_font), TextAlign::TOP_CENTER, "%s", weekdays[column]);
@@ -1237,8 +1251,8 @@ display:
               if (day < 1 || day > month_days) continue;
               const int cell_x = 415 + column * 30;
               if (day == today) {
-                it.filled_rectangle(cell_x - 12, cell_y - 2, 25, 18, Color::BLACK);
+                it.filled_rectangle(cell_x - 12, cell_y - 2, 25, 18, COLOR_ON);
-                it.printf(cell_x, cell_y, id(footer_font), Color::WHITE, TextAlign::TOP_CENTER, "%d", day);
+                it.printf(cell_x, cell_y, id(calendar_day_bold), COLOR_OFF, TextAlign::TOP_CENTER, "%d", day);
               } else {
                 it.printf(cell_x, cell_y, id(footer_font), TextAlign::TOP_CENTER, "%d", day);
               }
@@ -1246,12 +1260,39 @@ display:
           }
 
           /* RIGHT BOTTOM: quote placeholder, intentionally inverted */
-          it.filled_rectangle(375, 220, 255, 130, Color::BLACK);
+          it.filled_rectangle(375, 220, 255, 130, COLOR_ON);
-          it.print(502, 234, id(footer_font), Color::WHITE, TextAlign::TOP_CENTER, "DEMOTIVATION");
+          it.print(502, 246, id(sensor_unit), COLOR_OFF, TextAlign::TOP_CENTER, "Es ist nie zu spät,");
-          it.print(502, 267, id(sensor_unit), Color::WHITE, TextAlign::TOP_CENTER, "Es ist nie zu spät,");
+          it.print(502, 271, id(sensor_unit), COLOR_OFF, TextAlign::TOP_CENTER, "die Erwartungen zu");
-          it.print(502, 291, id(sensor_unit), Color::WHITE, TextAlign::TOP_CENTER, "die Erwartungen zu senken.");
+          it.print(502, 296, id(sensor_unit), COLOR_OFF, TextAlign::TOP_CENTER, "senken.");
-          it.print(502, 326, id(footer_font), Color::WHITE, TextAlign::TOP_CENTER, "Zitatquelle folgt");
+          it.print(502, 326, id(footer_font), COLOR_OFF, TextAlign::TOP_CENTER, "Zitatquelle folgt");
 
           /* FOOTER */
           it.strftime(614, 380, id(footer_font), TextAlign::BASELINE_RIGHT,
                       "Aktualisiert um %d.%m.%Y %H:%M", now);
+
+          /* WiFi Signal Strenght */
+          if(id(wifisignal).has_state()) {
+            int x = 630;
+            int y = 384;
+            if (id(wifisignal).state >= -50) {
+                // Excellent
+                it.print(x, y, id(mdi_wifi), TextAlign::BASELINE_CENTER, "󰤨");
+                ESP_LOGI("WiFi", "Excellent");
+            } else if (id(wifisignal).state  >= -60) {
+                // Good
+                it.print(x, y, id(mdi_wifi), TextAlign::BASELINE_CENTER, "󰤥");
+                ESP_LOGI("WiFi", "Good");
+            } else if (id(wifisignal).state  >= -75) {
+                // Fair
+                it.print(x, y, id(mdi_wifi), TextAlign::BASELINE_CENTER, "󰤢");
+                ESP_LOGI("WiFi", "Fair");
+            } else if (id(wifisignal).state  >= -100) {
+                // Weak
+                it.print(x, y, id(mdi_wifi), TextAlign::BASELINE_CENTER, "󰤟");
+                ESP_LOGI("WiFi", "Weak");
+            } else {
+                // Unlikely working signal
+                it.print(x, y, id(mdi_wifi), TextAlign::BASELINE_CENTER, "󰤫");
+                ESP_LOGI("WiFi", "Unlikely");
+            }
+          }

python_scripts/epaper_calendar_data.py

@@ -5,8 +5,9 @@ CALENDAR_NAMES = {
 }
 DAY_NAMES = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]
 MAX_ENTRIES = 8
-MAX_TITLE_LENGTH = 28
+# Reserve the right side of each row for start and end times.
-MAX_META_LENGTH = 32
+MAX_TITLE_LENGTH = 19
+MAX_META_LENGTH = 28
 
 
 def shorten(value, maximum):
@@ -19,7 +20,9 @@ def shorten(value, maximum):
 def compact_event(event, calendar_name):
     start = event.get("start", "")
     all_day = "T" not in start
+    end = event.get("end", "")
     time = "ganztägig" if all_day else start[11:16]
+    end_time = "" if all_day or "T" not in end else end[11:16]
 
     location = (event.get("location") or "").split("\n")[0].strip()
     meta = calendar_name
@@ -29,6 +32,7 @@ def compact_event(event, calendar_name):
     return {
         "title": shorten(event.get("summary", "Ohne Titel"), MAX_TITLE_LENGTH),
         "time": time,
+        "end": end_time,
         "meta": shorten(meta, MAX_META_LENGTH),
         "all_day": int(all_day),
     }