Improve date display

2 files changed, 47 insertions, 15 deletions

diff --git a/src/displayapp/screens/WatchFaceDigital.cpp b/src/displayapp/screens/WatchFaceDigital.cpp
index 6d9ed32..4bb465b 100644
--- a/src/displayapp/screens/WatchFaceDigital.cpp
+++ b/src/displayapp/screens/WatchFaceDigital.cpp
@@ -53,16 +53,11 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app,
   lv_label_set_text_static(notificationIcon, NotificationIcon::GetIcon(false));
   lv_obj_align(notificationIcon, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 0);
 
-  label_date = lv_label_create(lv_scr_act(), nullptr);
-  lv_obj_align(label_date, lv_scr_act(), LV_ALIGN_CENTER, 0, 60);
-  lv_obj_set_style_local_text_color(label_date, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x999999));
-  lv_obj_set_style_local_text_font(label_date, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &neofont2);
-
   label_temp = lv_label_create(lv_scr_act(), nullptr);
   lv_obj_set_style_local_text_color(  label_temp, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x222222));
   lv_obj_set_style_local_text_font(   label_temp, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &neofont15);
   lv_label_set_text_fmt(label_temp, "??°C");
-  lv_obj_align(label_temp, lv_scr_act(), LV_ALIGN_CENTER, 60, -60);
+  lv_obj_align(label_temp, lv_scr_act(), LV_ALIGN_CENTER, 75, -75);
 
   label_time = lv_label_create(lv_scr_act(), nullptr);
   lv_obj_set_style_local_text_font(label_time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &neofont3);
@@ -79,6 +74,34 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app,
   lv_label_set_text_static(label_time_ampm, "");
   lv_obj_align(label_time_ampm, lv_scr_act(), LV_ALIGN_IN_RIGHT_MID, -30, -55);
 
+  label_date_dd = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(label_date_dd, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x999999));
+  lv_label_set_text_fmt(label_date_dd, "DD");
+  lv_obj_set_style_local_text_font(label_date_dd, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &neofont2);
+  lv_obj_align(label_date_dd, label_time, LV_ALIGN_OUT_TOP_MID, 0, 0);
+  lv_label_set_long_mode(label_date_dd, LV_LABEL_LONG_CROP);
+  lv_label_set_align(label_date_dd, LV_LABEL_ALIGN_CENTER);
+
+  label_date_dow = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(label_date_dow, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x999999));
+  lv_label_set_text_fmt(label_date_dow, "DOW ");
+  lv_obj_set_style_local_text_font(label_date_dow, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &neofont2);
+  lv_obj_align(label_date_dow, label_date_dd, LV_ALIGN_OUT_LEFT_MID, 0, 0);
+
+  label_date_mmm = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(label_date_mmm, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x999999));
+  lv_label_set_text_fmt(label_date_mmm, "MMM");
+  lv_obj_set_style_local_text_font(label_date_mmm, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &neofont15);
+  lv_obj_align(label_date_mmm, label_date_dd, LV_ALIGN_OUT_TOP_MID, 0, 0);
+
+  label_date_yyyy = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(label_date_yyyy, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x999999));
+  lv_label_set_text_fmt(label_date_yyyy, "YYYY");
+  lv_obj_set_style_local_text_font(label_date_yyyy, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &neofont1);
+  lv_obj_align(label_date_yyyy, label_date_mmm, LV_ALIGN_OUT_TOP_MID, 0, 0);
+  lv_label_set_long_mode(label_date_yyyy, LV_LABEL_LONG_CROP);
+  lv_label_set_align(label_date_yyyy, LV_LABEL_ALIGN_CENTER);
+
   backgroundLabel = lv_label_create(lv_scr_act(), nullptr);
   lv_obj_set_click(backgroundLabel, true);
   lv_label_set_long_mode(backgroundLabel, LV_LABEL_LONG_CROP);
@@ -187,14 +210,20 @@ void WatchFaceDigital::Refresh() {
     }
 
     if ((year != currentYear) || (month != currentMonth) || (dayOfWeek != currentDayOfWeek) || (day != currentDay)) {
-      if (settingsController.GetClockType() == Controllers::Settings::ClockType::H24) {
-        lv_label_set_text_fmt(
-          label_date, "%s %d %s %d", dateTimeController.DayOfWeekShortToString(), day, dateTimeController.MonthShortToString(), year);
-      } else {
-        lv_label_set_text_fmt(
-          label_date, "%s %s %d %d", dateTimeController.DayOfWeekShortToString(), dateTimeController.MonthShortToString(), day, year);
-      }
-      lv_obj_realign(label_date);
+      // if (settingsController.GetClockType() == Controllers::Settings::ClockType::H24) {
+        // lv_label_set_text_fmt(
+        //     label_date, "%s %d %s %d", dateTimeController.DayOfWeekShortToString(), day, dateTimeController.MonthShortToString(), year);
+      // } else {
+        // lv_label_set_text_fmt(
+        //     label_date, "%s %s %d %d", dateTimeController.DayOfWeekShortToString(), dateTimeController.MonthShortToString(), day, year);
+      // }
+      // lv_obj_realign(label_date);
+      lv_label_set_text_static(label_date, "");
+      lv_label_set_text_fmt(label_date_dd, "%d", day);
+      // should rather extract info from the timestamp
+      lv_label_set_text_static(label_date_dow, dateTimeController.DayOfWeekShortToString());
+      lv_label_set_text_static(label_date_mmm, dateTimeController.MonthShortToString());
+      lv_label_set_text_fmt(label_date_yyyy, "%d", year);
 
       currentYear = year;
       currentMonth = month;
diff --git a/src/displayapp/screens/WatchFaceDigital.h b/src/displayapp/screens/WatchFaceDigital.h
index 560176f..12ffe0b 100644
--- a/src/displayapp/screens/WatchFaceDigital.h
+++ b/src/displayapp/screens/WatchFaceDigital.h
@@ -58,7 +58,10 @@ namespace Pinetime {
         lv_obj_t* label_time;
         lv_obj_t* label_time_sec;
         lv_obj_t* label_time_ampm;
-        lv_obj_t* label_date;
+        lv_obj_t* label_date_dd;
+        lv_obj_t* label_date_dow;
+        lv_obj_t* label_date_mmm;
+        lv_obj_t* label_date_yyyy;
         lv_obj_t* backgroundLabel;
         lv_obj_t* batteryIcon;
         lv_obj_t* bleIcon;