Merge pull request #1024 from dmlls/infineat-pr

Infineat Watchface + support for external resources.

src/CMakeLists.txt

@@ -396,6 +396,7 @@ list(APPEND SOURCE_FILES
         displayapp/screens/Motion.cpp
         displayapp/screens/FlashLight.cpp
         displayapp/screens/List.cpp
+        displayapp/screens/CheckboxList.cpp
         displayapp/screens/BatteryInfo.cpp
         displayapp/screens/Steps.cpp
         displayapp/screens/Timer.cpp
@@ -426,6 +427,7 @@ list(APPEND SOURCE_FILES
         displayapp/icons/bg_clock.c
         displayapp/screens/WatchFaceAnalog.cpp
         displayapp/screens/WatchFaceDigital.cpp
+        displayapp/screens/WatchFaceInfineat.cpp
         displayapp/screens/WatchFaceTerminal.cpp
         displayapp/screens/WatchFacePineTimeStyle.cpp
 
@@ -602,6 +604,7 @@ set(INCLUDE_FILES
         displayapp/screens/FirmwareUpdate.h
         displayapp/screens/FirmwareValidation.h
         displayapp/screens/ApplicationList.h
+        displayapp/screens/CheckboxList.h
         displayapp/Apps.h
         displayapp/screens/Notifications.h
         displayapp/screens/HeartRate.h

src/components/datetime/DateTimeController.cpp

@@ -7,6 +7,7 @@ using namespace Pinetime::Controllers;
 
 namespace {
   char const* DaysStringShort[] = {"--", "MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"};
+  char const* DaysStringShortLow[] = {"--", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"};
   char const* MonthsString[] = {"--", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"};
   char const* MonthsStringLow[] = {"--", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"};
 }
@@ -126,6 +127,10 @@ const char* DateTime::MonthShortToStringLow(Months month) {
   return MonthsStringLow[static_cast<uint8_t>(month)];
 }
 
+const char* DateTime::DayOfWeekShortToStringLow() const {
+  return DaysStringShortLow[static_cast<uint8_t>(dayOfWeek)];
+}
+
 void DateTime::Register(Pinetime::System::SystemTask* systemTask) {
   this->systemTask = systemTask;
 }

src/components/datetime/DateTimeController.h

@@ -64,6 +64,7 @@ namespace Pinetime {
       const char* MonthShortToString() const;
       const char* DayOfWeekShortToString() const;
       static const char* MonthShortToStringLow(Months month);
+      const char* DayOfWeekShortToStringLow() const;
 
       std::chrono::time_point<std::chrono::system_clock, std::chrono::nanoseconds> CurrentDateTime() const {
         return currentDateTime;

src/components/settings/Settings.h

@@ -42,6 +42,10 @@ namespace Pinetime {
         Colors ColorBar = Colors::Teal;
         Colors ColorBG = Colors::Black;
       };
+      struct WatchFaceInfineat {
+        bool showSideCover = true;
+        int colorIndex = 0;
+      };
 
       Settings(Pinetime::Controllers::FS& fs);
 
@@ -95,6 +99,26 @@ namespace Pinetime {
         return settings.PTS.ColorBG;
       };
 
+      void SetInfineatShowSideCover(bool show) {
+        if (show != settings.watchFaceInfineat.showSideCover) {
+          settings.watchFaceInfineat.showSideCover = show;
+          settingsChanged = true;
+        }
+      };
+      bool GetInfineatShowSideCover() const {
+        return settings.watchFaceInfineat.showSideCover;
+      };
+
+      void SetInfineatColorIndex(int index) {
+        if (index != settings.watchFaceInfineat.colorIndex) {
+          settings.watchFaceInfineat.colorIndex = index;
+          settingsChanged = true;
+        }
+      };
+      int GetInfineatColorIndex() const {
+        return settings.watchFaceInfineat.colorIndex;
+      };
+
       void SetAppMenu(uint8_t menu) {
         appMenu = menu;
       };
@@ -110,6 +134,14 @@ namespace Pinetime {
         return settingsMenu;
       };
 
+      void SetWatchfacesMenu(uint8_t menu) {
+        watchFacesMenu = menu;
+      };
+
+      uint8_t GetWatchfacesMenu() const {
+        return watchFacesMenu;
+      };
+
       void SetClockType(ClockType clocktype) {
         if (clocktype != settings.clockType) {
           settingsChanged = true;
@@ -213,7 +245,7 @@ namespace Pinetime {
     private:
       Pinetime::Controllers::FS& fs;
 
-      static constexpr uint32_t settingsVersion = 0x0003;
+      static constexpr uint32_t settingsVersion = 0x0004;
       struct SettingsData {
         uint32_t version = settingsVersion;
         uint32_t stepsGoal = 10000;
@@ -227,6 +259,8 @@ namespace Pinetime {
 
         PineTimeStyle PTS;
 
+        WatchFaceInfineat watchFaceInfineat;
+
         std::bitset<4> wakeUpMode {0};
         uint16_t shakeWakeThreshold = 150;
         Controllers::BrightnessController::Levels brightLevel = Controllers::BrightnessController::Levels::Medium;
@@ -237,6 +271,7 @@ namespace Pinetime {
 
       uint8_t appMenu = 0;
       uint8_t settingsMenu = 0;
+      uint8_t watchFacesMenu = 0;
       /* ble state is intentionally not saved with the other watch settings and initialized
        * to off (false) on every boot because we always want ble to be enabled on startup
        */

src/displayapp/DisplayApp.cpp

@@ -75,7 +75,8 @@ DisplayApp::DisplayApp(Drivers::St7789& lcd,
                        Pinetime::Controllers::TimerController& timerController,
                        Pinetime::Controllers::AlarmController& alarmController,
                        Pinetime::Controllers::BrightnessController& brightnessController,
-                       Pinetime::Controllers::TouchHandler& touchHandler)
+                       Pinetime::Controllers::TouchHandler& touchHandler,
+                       Pinetime::Controllers::FS& filesystem)
   : lcd {lcd},
     lvgl {lvgl},
     touchPanel {touchPanel},
@@ -91,7 +92,8 @@ DisplayApp::DisplayApp(Drivers::St7789& lcd,
     timerController {timerController},
     alarmController {alarmController},
     brightnessController {brightnessController},
-    touchHandler {touchHandler} {
+    touchHandler {touchHandler},
+    filesystem {filesystem} {
 }
 
 void DisplayApp::Start(System::BootErrors error) {
@@ -324,7 +326,8 @@ void DisplayApp::LoadApp(Apps app, DisplayApp::FullRefreshDirections direction)
                                                        notificationManager,
                                                        settingsController,
                                                        heartRateController,
-                                                       motionController);
+                                                       motionController,
+                                                       filesystem);
       break;
 
     case Apps::Error:

src/displayapp/DisplayApp.h

@@ -62,7 +62,8 @@ namespace Pinetime {
                  Pinetime::Controllers::TimerController& timerController,
                  Pinetime::Controllers::AlarmController& alarmController,
                  Pinetime::Controllers::BrightnessController& brightnessController,
-                 Pinetime::Controllers::TouchHandler& touchHandler);
+                 Pinetime::Controllers::TouchHandler& touchHandler,
+                 Pinetime::Controllers::FS& filesystem);
       void Start(System::BootErrors error);
       void PushMessage(Display::Messages msg);
 
@@ -90,6 +91,7 @@ namespace Pinetime {
       Pinetime::Controllers::AlarmController& alarmController;
       Pinetime::Controllers::BrightnessController& brightnessController;
       Pinetime::Controllers::TouchHandler& touchHandler;
+      Pinetime::Controllers::FS& filesystem;
 
       Pinetime::Controllers::FirmwareValidator validator;
 

src/displayapp/DisplayAppRecovery.cpp

@@ -2,6 +2,7 @@
 #include <FreeRTOS.h>
 #include <task.h>
 #include <libraries/log/nrf_log.h>
+#include "components/fs/FS.h"
 #include "components/rle/RleDecoder.h"
 #include "touchhandler/TouchHandler.h"
 #include "displayapp/icons/infinitime/infinitime-nb.c"
@@ -24,7 +25,8 @@ DisplayApp::DisplayApp(Drivers::St7789& lcd,
                        Pinetime::Controllers::TimerController& timerController,
                        Pinetime::Controllers::AlarmController& alarmController,
                        Pinetime::Controllers::BrightnessController& brightnessController,
-                       Pinetime::Controllers::TouchHandler& touchHandler)
+                       Pinetime::Controllers::TouchHandler& touchHandler,
+                       Pinetime::Controllers::FS& filesystem)
   : lcd {lcd}, bleController {bleController} {
 }
 

src/displayapp/DisplayAppRecovery.h

@@ -35,6 +35,7 @@ namespace Pinetime {
     class TimerController;
     class AlarmController;
     class BrightnessController;
+    class FS;
   }
 
   namespace System {
@@ -59,7 +60,8 @@ namespace Pinetime {
                  Pinetime::Controllers::TimerController& timerController,
                  Pinetime::Controllers::AlarmController& alarmController,
                  Pinetime::Controllers::BrightnessController& brightnessController,
-                 Pinetime::Controllers::TouchHandler& touchHandler);
+                 Pinetime::Controllers::TouchHandler& touchHandler,
+                 Pinetime::Controllers::FS& filesystem);
       void Start();
       void Start(Pinetime::System::BootErrors) {
         Start();

src/displayapp/screens/CheckboxList.cpp

@@ -0,0 +1,117 @@
+#include "displayapp/screens/CheckboxList.h"
+#include "displayapp/DisplayApp.h"
+#include "displayapp/screens/Styles.h"
+
+using namespace Pinetime::Applications::Screens;
+
+namespace {
+  static void event_handler(lv_obj_t* obj, lv_event_t event) {
+    CheckboxList* screen = static_cast<CheckboxList*>(obj->user_data);
+    screen->UpdateSelected(obj, event);
+  }
+
+}
+
+CheckboxList::CheckboxList(const uint8_t screenID,
+                           const uint8_t numScreens,
+                           DisplayApp* app,
+                           Controllers::Settings& settingsController,
+                           const char* optionsTitle,
+                           const char* optionsSymbol,
+                           void (Controllers::Settings::*SetOptionIndex)(uint8_t),
+                           uint8_t (Controllers::Settings::*GetOptionIndex)() const,
+                           std::array<const char*, MaxItems> options)
+  : Screen(app),
+    screenID {screenID},
+    settingsController {settingsController},
+    SetOptionIndex {SetOptionIndex},
+    GetOptionIndex {GetOptionIndex},
+    options {options} {
+
+  settingsController.SetWatchfacesMenu(screenID);
+
+  // Set the background to Black
+  lv_obj_set_style_local_bg_color(lv_scr_act(), LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLACK);
+
+  if (numScreens > 1) {
+    pageIndicatorBasePoints[0].x = LV_HOR_RES - 1;
+    pageIndicatorBasePoints[0].y = 0;
+    pageIndicatorBasePoints[1].x = LV_HOR_RES - 1;
+    pageIndicatorBasePoints[1].y = LV_VER_RES;
+
+    pageIndicatorBase = lv_line_create(lv_scr_act(), NULL);
+    lv_obj_set_style_local_line_width(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, 3);
+    lv_obj_set_style_local_line_color(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111));
+    lv_line_set_points(pageIndicatorBase, pageIndicatorBasePoints.data(), 2);
+
+    const uint16_t indicatorSize = LV_VER_RES / numScreens;
+    const uint16_t indicatorPos = indicatorSize * screenID;
+
+    pageIndicatorPoints[0].x = LV_HOR_RES - 1;
+    pageIndicatorPoints[0].y = indicatorPos;
+    pageIndicatorPoints[1].x = LV_HOR_RES - 1;
+    pageIndicatorPoints[1].y = indicatorPos + indicatorSize;
+
+    pageIndicator = lv_line_create(lv_scr_act(), NULL);
+    lv_obj_set_style_local_line_width(pageIndicator, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, 3);
+    lv_obj_set_style_local_line_color(pageIndicator, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GRAY);
+    lv_line_set_points(pageIndicator, pageIndicatorPoints.data(), 2);
+  }
+
+  lv_obj_t* container1 = lv_cont_create(lv_scr_act(), nullptr);
+
+  lv_obj_set_style_local_bg_opa(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP);
+  lv_obj_set_style_local_pad_all(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 10);
+  lv_obj_set_style_local_pad_inner(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 5);
+  lv_obj_set_style_local_border_width(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 0);
+
+  lv_obj_set_pos(container1, 10, 60);
+  lv_obj_set_width(container1, LV_HOR_RES - 20);
+  lv_obj_set_height(container1, LV_VER_RES - 50);
+  lv_cont_set_layout(container1, LV_LAYOUT_COLUMN_LEFT);
+
+  lv_obj_t* title = lv_label_create(lv_scr_act(), nullptr);
+  lv_label_set_text_static(title, optionsTitle);
+  lv_label_set_align(title, LV_LABEL_ALIGN_CENTER);
+  lv_obj_align(title, lv_scr_act(), LV_ALIGN_IN_TOP_MID, 10, 15);
+
+  lv_obj_t* icon = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(icon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_ORANGE);
+  lv_label_set_text_static(icon, optionsSymbol);
+  lv_label_set_align(icon, LV_LABEL_ALIGN_CENTER);
+  lv_obj_align(icon, title, LV_ALIGN_OUT_LEFT_MID, -10, 0);
+
+  for (unsigned int i = 0; i < options.size(); i++) {
+    if (strcmp(options[i], "")) {
+      cbOption[i] = lv_checkbox_create(container1, nullptr);
+      lv_checkbox_set_text(cbOption[i], options[i]);
+      cbOption[i]->user_data = this;
+      lv_obj_set_event_cb(cbOption[i], event_handler);
+      SetRadioButtonStyle(cbOption[i]);
+
+      if (static_cast<unsigned int>((settingsController.*GetOptionIndex)() - MaxItems * screenID) == i) {
+        lv_checkbox_set_checked(cbOption[i], true);
+      }
+    }
+  }
+}
+
+CheckboxList::~CheckboxList() {
+  lv_obj_clean(lv_scr_act());
+  settingsController.SaveSettings();
+}
+
+void CheckboxList::UpdateSelected(lv_obj_t* object, lv_event_t event) {
+  if (event == LV_EVENT_VALUE_CHANGED) {
+    for (unsigned int i = 0; i < options.size(); i++) {
+      if (strcmp(options[i], "")) {
+        if (object == cbOption[i]) {
+          lv_checkbox_set_checked(cbOption[i], true);
+          (settingsController.*SetOptionIndex)(MaxItems * screenID + i);
+        } else {
+          lv_checkbox_set_checked(cbOption[i], false);
+        }
+      }
+    }
+  }
+}

src/displayapp/screens/CheckboxList.h

@@ -0,0 +1,48 @@
+#pragma once
+
+#include <lvgl/lvgl.h>
+#include <cstdint>
+#include <memory>
+#include <array>
+#include "displayapp/screens/Screen.h"
+#include "displayapp/Apps.h"
+#include "components/settings/Settings.h"
+
+namespace Pinetime {
+  namespace Applications {
+    namespace Screens {
+      class CheckboxList : public Screen {
+      public:
+        static constexpr size_t MaxItems = 4;
+
+        CheckboxList(const uint8_t screenID,
+                     const uint8_t numScreens,
+                     DisplayApp* app,
+                     Controllers::Settings& settingsController,
+                     const char* optionsTitle,
+                     const char* optionsSymbol,
+                     void (Controllers::Settings::*SetOptionIndex)(uint8_t),
+                     uint8_t (Controllers::Settings::*GetOptionIndex)() const,
+                     std::array<const char*, MaxItems> options);
+
+        ~CheckboxList() override;
+
+        void UpdateSelected(lv_obj_t* object, lv_event_t event);
+
+      private:
+        const uint8_t screenID;
+        Controllers::Settings& settingsController;
+        const char* optionsTitle;
+        const char* optionsSymbol;
+        void (Controllers::Settings::*SetOptionIndex)(uint8_t);
+        uint8_t (Controllers::Settings::*GetOptionIndex)() const;
+        std::array<const char*, MaxItems> options;
+        std::array<lv_obj_t*, MaxItems> cbOption;
+        std::array<lv_point_t, 2> pageIndicatorBasePoints;
+        std::array<lv_point_t, 2> pageIndicatorPoints;
+        lv_obj_t* pageIndicatorBase;
+        lv_obj_t* pageIndicator;
+      };
+    }
+  }
+}

src/displayapp/screens/Clock.cpp

@@ -10,6 +10,7 @@
 #include "displayapp/DisplayApp.h"
 #include "displayapp/screens/WatchFaceDigital.h"
 #include "displayapp/screens/WatchFaceTerminal.h"
+#include "displayapp/screens/WatchFaceInfineat.h"
 #include "displayapp/screens/WatchFaceAnalog.h"
 #include "displayapp/screens/WatchFacePineTimeStyle.h"
 
@@ -22,7 +23,8 @@ Clock::Clock(DisplayApp* app,
              Controllers::NotificationManager& notificatioManager,
              Controllers::Settings& settingsController,
              Controllers::HeartRateController& heartRateController,
-             Controllers::MotionController& motionController)
+             Controllers::MotionController& motionController,
+             Controllers::FS& filesystem)
   : Screen(app),
     dateTimeController {dateTimeController},
     batteryController {batteryController},
@@ -31,6 +33,7 @@ Clock::Clock(DisplayApp* app,
     settingsController {settingsController},
     heartRateController {heartRateController},
     motionController {motionController},
+    filesystem {filesystem},
     screen {[this, &settingsController]() {
       switch (settingsController.GetClockFace()) {
         case 0:
@@ -45,6 +48,9 @@ Clock::Clock(DisplayApp* app,
         case 3:
           return WatchFaceTerminalScreen();
           break;
+        case 4:
+          return WatchFaceInfineatScreen();
+          break;
       }
       return WatchFaceDigitalScreen();
     }()} {
@@ -103,3 +109,14 @@ std::unique_ptr<Screen> Clock::WatchFaceTerminalScreen() {
                                                       heartRateController,
                                                       motionController);
 }
+
+std::unique_ptr<Screen> Clock::WatchFaceInfineatScreen() {
+  return std::make_unique<Screens::WatchFaceInfineat>(app,
+                                                      dateTimeController,
+                                                      batteryController,
+                                                      bleController,
+                                                      notificatioManager,
+                                                      settingsController,
+                                                      motionController,
+                                                      filesystem);
+}

src/displayapp/screens/Clock.h

@@ -28,7 +28,8 @@ namespace Pinetime {
               Controllers::NotificationManager& notificatioManager,
               Controllers::Settings& settingsController,
               Controllers::HeartRateController& heartRateController,
-              Controllers::MotionController& motionController);
+              Controllers::MotionController& motionController,
+              Controllers::FS& filesystem);
         ~Clock() override;
 
         bool OnTouchEvent(TouchEvents event) override;
@@ -42,12 +43,14 @@ namespace Pinetime {
         Controllers::Settings& settingsController;
         Controllers::HeartRateController& heartRateController;
         Controllers::MotionController& motionController;
+        Controllers::FS& filesystem;
 
         std::unique_ptr<Screen> screen;
         std::unique_ptr<Screen> WatchFaceDigitalScreen();
         std::unique_ptr<Screen> WatchFaceAnalogScreen();
         std::unique_ptr<Screen> WatchFacePineTimeStyleScreen();
         std::unique_ptr<Screen> WatchFaceTerminalScreen();
+        std::unique_ptr<Screen> WatchFaceInfineatScreen();
       };
     }
   }

src/displayapp/screens/WatchFaceInfineat.cpp

@@ -0,0 +1,605 @@
+#include "displayapp/screens/WatchFaceInfineat.h"
+
+#include <date/date.h>
+#include <lvgl/lvgl.h>
+#include <cstdio>
+#include "displayapp/screens/Symbols.h"
+#include "displayapp/screens/BleIcon.h"
+#include "components/settings/Settings.h"
+#include "components/battery/BatteryController.h"
+#include "components/ble/BleController.h"
+#include "components/ble/NotificationManager.h"
+#include "components/motion/MotionController.h"
+
+using namespace Pinetime::Applications::Screens;
+
+namespace {
+  void event_handler(lv_obj_t* obj, lv_event_t event) {
+    auto* screen = static_cast<WatchFaceInfineat*>(obj->user_data);
+    screen->UpdateSelected(obj, event);
+  }
+}
+
+WatchFaceInfineat::WatchFaceInfineat(DisplayApp* app,
+                                     Controllers::DateTime& dateTimeController,
+                                     Controllers::Battery& batteryController,
+                                     Controllers::Ble& bleController,
+                                     Controllers::NotificationManager& notificationManager,
+                                     Controllers::Settings& settingsController,
+                                     Controllers::MotionController& motionController,
+                                     Controllers::FS& fs)
+  : Screen(app),
+    currentDateTime {{}},
+    dateTimeController {dateTimeController},
+    batteryController {batteryController},
+    bleController {bleController},
+    notificationManager {notificationManager},
+    settingsController {settingsController},
+    motionController {motionController} {
+  lfs_file f = {};
+  if (fs.FileOpen(&f, "/fonts/teko.bin", LFS_O_RDONLY) >= 0) {
+    font_teko = lv_font_load("F:/fonts/teko.bin");
+  }
+
+  if (fs.FileOpen(&f, "/fonts/bebas.bin", LFS_O_RDONLY) >= 0) {
+    font_bebas = lv_font_load("F:/fonts/bebas.bin");
+  }
+
+  // Black background covering the whole screen
+  background = lv_obj_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_bg_color(background, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLACK);
+  lv_obj_set_size(background, 240, 240);
+  lv_obj_align(background, lv_scr_act(), LV_ALIGN_IN_TOP_LEFT, 0, 0);
+
+  // Side Cover
+  line0 = lv_line_create(lv_scr_act(), nullptr);
+  line1 = lv_line_create(lv_scr_act(), nullptr);
+  line2 = lv_line_create(lv_scr_act(), nullptr);
+  line3 = lv_line_create(lv_scr_act(), nullptr);
+  line4 = lv_line_create(lv_scr_act(), nullptr);
+  line5 = lv_line_create(lv_scr_act(), nullptr);
+  line6 = lv_line_create(lv_scr_act(), nullptr);
+  line7 = lv_line_create(lv_scr_act(), nullptr);
+  line8 = lv_line_create(lv_scr_act(), nullptr);
+  lineBattery = lv_line_create(lv_scr_act(), nullptr);
+
+  lv_style_init(&line0Style);
+  lv_style_set_line_width(&line0Style, LV_STATE_DEFAULT, 18);
+  lv_style_set_line_color(&line0Style,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines]));
+  lv_obj_add_style(line0, LV_LINE_PART_MAIN, &line0Style);
+  line0Points[0] = {30, 25};
+  line0Points[1] = {68, -8};
+  lv_line_set_points(line0, line0Points, 2);
+
+  lv_style_init(&line1Style);
+  lv_style_set_line_width(&line1Style, LV_STATE_DEFAULT, 15);
+  lv_style_set_line_color(&line1Style,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 1]));
+  lv_obj_add_style(line1, LV_LINE_PART_MAIN, &line1Style);
+  line1Points[0] = {26, 167};
+  line1Points[1] = {43, 216};
+  lv_line_set_points(line1, line1Points, 2);
+
+  lv_style_init(&line2Style);
+  lv_style_set_line_width(&line2Style, LV_STATE_DEFAULT, 14);
+  lv_style_set_line_color(&line2Style,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 2]));
+  lv_obj_add_style(line2, LV_LINE_PART_MAIN, &line2Style);
+  line2Points[0] = {27, 40};
+  line2Points[1] = {27, 196};
+  lv_line_set_points(line2, line2Points, 2);
+
+  lv_style_init(&line3Style);
+  lv_style_set_line_width(&line3Style, LV_STATE_DEFAULT, 22);
+  lv_style_set_line_color(&line3Style,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 3]));
+  lv_obj_add_style(line3, LV_LINE_PART_MAIN, &line3Style);
+  line3Points[0] = {12, 182};
+  line3Points[1] = {65, 249};
+  lv_line_set_points(line3, line3Points, 2);
+
+  lv_style_init(&line4Style);
+  lv_style_set_line_width(&line4Style, LV_STATE_DEFAULT, 20);
+  lv_style_set_line_color(&line4Style,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 4]));
+  lv_obj_add_style(line4, LV_LINE_PART_MAIN, &line4Style);
+  line4Points[0] = {17, 99};
+  line4Points[1] = {17, 144};
+  lv_line_set_points(line4, line4Points, 2);
+
+  lv_style_init(&line5Style);
+  lv_style_set_line_width(&line5Style, LV_STATE_DEFAULT, 18);
+  lv_style_set_line_color(&line5Style,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 5]));
+  lv_obj_add_style(line5, LV_LINE_PART_MAIN, &line5Style);
+  line5Points[0] = {14, 81};
+  line5Points[1] = {40, 127};
+  lv_line_set_points(line5, line5Points, 2);
+
+  lv_style_init(&line6Style);
+  lv_style_set_line_width(&line6Style, LV_STATE_DEFAULT, 18);
+  lv_style_set_line_color(&line6Style,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 6]));
+  lv_obj_add_style(line6, LV_LINE_PART_MAIN, &line6Style);
+  line6Points[0] = {14, 163};
+  line6Points[1] = {40, 118};
+  lv_line_set_points(line6, line6Points, 2);
+
+  lv_style_init(&line7Style);
+  lv_style_set_line_width(&line7Style, LV_STATE_DEFAULT, 52);
+  lv_style_set_line_color(&line7Style,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 7]));
+  lv_obj_add_style(line7, LV_LINE_PART_MAIN, &line7Style);
+  line7Points[0] = {-20, 124};
+  line7Points[1] = {25, -11};
+  lv_line_set_points(line7, line7Points, 2);
+
+  lv_style_init(&line8Style);
+  lv_style_set_line_width(&line8Style, LV_STATE_DEFAULT, 48);
+  lv_style_set_line_color(&line8Style,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 8]));
+  lv_obj_add_style(line8, LV_LINE_PART_MAIN, &line8Style);
+  line8Points[0] = {-29, 89};
+  line8Points[1] = {27, 254};
+  lv_line_set_points(line8, line8Points, 2);
+
+  logoPine = lv_img_create(lv_scr_act(), nullptr);
+  lv_img_set_src(logoPine, "F:/images/pine_small.bin");
+  lv_obj_set_pos(logoPine, 15, 106);
+
+  lv_style_init(&lineBatteryStyle);
+  lv_style_set_line_width(&lineBatteryStyle, LV_STATE_DEFAULT, 24);
+  lv_style_set_line_color(&lineBatteryStyle,
+                          LV_STATE_DEFAULT,
+                          lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 4]));
+  lv_style_set_line_opa(&lineBatteryStyle, LV_STATE_DEFAULT, 190);
+  lv_obj_add_style(lineBattery, LV_LINE_PART_MAIN, &lineBatteryStyle);
+  lineBatteryPoints[0] = {27, 105};
+  lineBatteryPoints[1] = {27, 106};
+  lv_line_set_points(lineBattery, lineBatteryPoints, 2);
+  lv_obj_move_foreground(lineBattery);
+
+  notificationIcon = lv_obj_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_bg_color(notificationIcon,
+                                  LV_BTN_PART_MAIN,
+                                  LV_STATE_DEFAULT,
+                                  lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 7]));
+  lv_obj_set_style_local_radius(notificationIcon, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE);
+  lv_obj_set_size(notificationIcon, 13, 13);
+  lv_obj_set_hidden(notificationIcon, true);
+
+  if (!settingsController.GetInfineatShowSideCover()) {
+    ToggleBatteryIndicatorColor(false);
+    lv_obj_set_hidden(line0, true);
+    lv_obj_set_hidden(line1, true);
+    lv_obj_set_hidden(line2, true);
+    lv_obj_set_hidden(line3, true);
+    lv_obj_set_hidden(line4, true);
+    lv_obj_set_hidden(line5, true);
+    lv_obj_set_hidden(line6, true);
+    lv_obj_set_hidden(line7, true);
+    lv_obj_set_hidden(line8, true);
+  }
+
+  timeContainer = lv_obj_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_bg_opa(timeContainer, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP);
+  if (font_bebas != nullptr) {
+    lv_obj_set_size(timeContainer, 185, 185);
+    lv_obj_align(timeContainer, lv_scr_act(), LV_ALIGN_CENTER, 0, -10);
+  } else {
+    lv_obj_set_size(timeContainer, 110, 145);
+    lv_obj_align(timeContainer, lv_scr_act(), LV_ALIGN_CENTER, 0, 0);
+  }
+
+  labelHour = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_font(labelHour, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_extrabold_compressed);
+  lv_label_set_text(labelHour, "01");
+  if (font_bebas != nullptr) {
+    lv_obj_set_style_local_text_font(labelHour, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, font_bebas);
+    lv_obj_align(labelHour, timeContainer, LV_ALIGN_IN_TOP_MID, 0, 0);
+  } else {
+    lv_obj_set_style_local_text_font(labelHour, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_extrabold_compressed);
+    lv_obj_align(labelHour, timeContainer, LV_ALIGN_IN_TOP_MID, 0, 5);
+  }
+
+  labelMinutes = lv_label_create(lv_scr_act(), nullptr);
+  if (font_bebas != nullptr) {
+    lv_obj_set_style_local_text_font(labelMinutes, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, font_bebas);
+  } else {
+    lv_obj_set_style_local_text_font(labelMinutes, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_extrabold_compressed);
+  }
+  lv_label_set_text(labelMinutes, "00");
+  lv_obj_align(labelMinutes, timeContainer, LV_ALIGN_IN_BOTTOM_MID, 0, 0);
+
+  labelTimeAmPm = lv_label_create(lv_scr_act(), nullptr);
+  if (font_teko != nullptr) {
+    lv_obj_set_style_local_text_font(labelTimeAmPm, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, font_teko);
+  } else {
+    lv_obj_set_style_local_text_font(labelTimeAmPm, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_bold_20);
+  }
+
+  lv_label_set_text(labelTimeAmPm, "");
+  lv_obj_align(labelTimeAmPm, timeContainer, LV_ALIGN_OUT_RIGHT_TOP, 0, 15);
+
+  dateContainer = lv_obj_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_bg_opa(dateContainer, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP);
+  lv_obj_set_size(dateContainer, 60, 30);
+  lv_obj_align(dateContainer, lv_scr_act(), LV_ALIGN_IN_RIGHT_MID, 0, 5);
+
+  labelDate = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(labelDate, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x999999));
+  if (font_teko != nullptr) {
+    lv_obj_set_style_local_text_font(labelDate, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, font_teko);
+  } else {
+    lv_obj_set_style_local_text_font(labelDate, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_bold_20);
+  }
+  lv_obj_align(labelDate, dateContainer, LV_ALIGN_IN_TOP_MID, 0, 0);
+  lv_label_set_text(labelDate, "Mon 01");
+
+  bleIcon = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(bleIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x999999));
+  lv_label_set_text(bleIcon, Symbols::bluetooth);
+  lv_obj_align(bleIcon, dateContainer, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
+
+  stepValue = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(stepValue, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x999999));
+  if (font_teko != nullptr) {
+    lv_obj_set_style_local_text_font(stepValue, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, font_teko);
+  } else {
+    lv_obj_set_style_local_text_font(stepValue, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_bold_20);
+  }
+  lv_obj_align(stepValue, lv_scr_act(), LV_ALIGN_IN_BOTTOM_RIGHT, 10, 0);
+  lv_label_set_text(stepValue, "0");
+
+  stepIcon = lv_label_create(lv_scr_act(), nullptr);
+  lv_obj_set_style_local_text_color(stepIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x999999));
+  lv_label_set_text(stepIcon, Symbols::shoe);
+  lv_obj_align(stepIcon, stepValue, LV_ALIGN_OUT_LEFT_MID, -5, 0);
+
+  // Setting buttons
+  btnClose = lv_btn_create(lv_scr_act(), nullptr);
+  btnClose->user_data = this;
+  lv_obj_set_size(btnClose, 60, 60);
+  lv_obj_align(btnClose, lv_scr_act(), LV_ALIGN_CENTER, 0, -80);
+  lv_obj_set_style_local_bg_opa(btnClose, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_70);
+  lv_obj_set_style_local_value_str(btnClose, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "X");
+  lv_obj_set_event_cb(btnClose, event_handler);
+  lv_obj_set_hidden(btnClose, true);
+
+  btnNextColor = lv_btn_create(lv_scr_act(), nullptr);
+  btnNextColor->user_data = this;
+  lv_obj_set_size(btnNextColor, 60, 60);
+  lv_obj_align(btnNextColor, lv_scr_act(), LV_ALIGN_IN_RIGHT_MID, -15, 0);
+  lv_obj_set_style_local_bg_opa(btnNextColor, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_70);
+  lv_obj_set_style_local_value_str(btnNextColor, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, ">");
+  lv_obj_set_event_cb(btnNextColor, event_handler);
+  lv_obj_set_hidden(btnNextColor, true);
+
+  btnPrevColor = lv_btn_create(lv_scr_act(), nullptr);
+  btnPrevColor->user_data = this;
+  lv_obj_set_size(btnPrevColor, 60, 60);
+  lv_obj_align(btnPrevColor, lv_scr_act(), LV_ALIGN_IN_LEFT_MID, 15, 0);
+  lv_obj_set_style_local_bg_opa(btnPrevColor, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_70);
+  lv_obj_set_style_local_value_str(btnPrevColor, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, "<");
+  lv_obj_set_event_cb(btnPrevColor, event_handler);
+  lv_obj_set_hidden(btnPrevColor, true);
+
+  btnToggleCover = lv_btn_create(lv_scr_act(), nullptr);
+  btnToggleCover->user_data = this;
+  lv_obj_set_size(btnToggleCover, 60, 60);
+  lv_obj_align(btnToggleCover, lv_scr_act(), LV_ALIGN_CENTER, 0, 80);
+  lv_obj_set_style_local_bg_opa(btnToggleCover, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_70);
+  const char* labelToggle = settingsController.GetInfineatShowSideCover() ? "ON" : "OFF";
+  lv_obj_set_style_local_value_str(btnToggleCover, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, labelToggle);
+  lv_obj_set_event_cb(btnToggleCover, event_handler);
+  lv_obj_set_hidden(btnToggleCover, true);
+
+  // Button to access the settings
+  btnSettings = lv_btn_create(lv_scr_act(), nullptr);
+  btnSettings->user_data = this;
+  lv_obj_set_size(btnSettings, 150, 150);
+  lv_obj_align(btnSettings, lv_scr_act(), LV_ALIGN_CENTER, 0, 0);
+  lv_obj_set_style_local_radius(btnSettings, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 30);
+  lv_obj_set_style_local_bg_opa(btnSettings, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_70);
+  lv_obj_set_event_cb(btnSettings, event_handler);
+  labelBtnSettings = lv_label_create(btnSettings, nullptr);
+  lv_obj_set_style_local_text_font(labelBtnSettings, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48);
+  lv_label_set_text_static(labelBtnSettings, Symbols::settings);
+  lv_obj_set_hidden(btnSettings, true);
+
+  taskRefresh = lv_task_create(RefreshTaskCallback, LV_DISP_DEF_REFR_PERIOD, LV_TASK_PRIO_MID, this);
+  Refresh();
+}
+
+WatchFaceInfineat::~WatchFaceInfineat() {
+  lv_task_del(taskRefresh);
+
+  lv_style_reset(&line0Style);
+  lv_style_reset(&line1Style);
+  lv_style_reset(&line2Style);
+  lv_style_reset(&line3Style);
+  lv_style_reset(&line4Style);
+  lv_style_reset(&line5Style);
+  lv_style_reset(&line6Style);
+  lv_style_reset(&line7Style);
+  lv_style_reset(&line8Style);
+  lv_style_reset(&lineBatteryStyle);
+
+  if (font_bebas != nullptr) {
+    lv_font_free(font_bebas);
+  }
+  if (font_teko != nullptr) {
+    lv_font_free(font_teko);
+  }
+
+  lv_obj_clean(lv_scr_act());
+}
+
+bool WatchFaceInfineat::OnTouchEvent(Pinetime::Applications::TouchEvents event) {
+  if ((event == Pinetime::Applications::TouchEvents::LongTap) && lv_obj_get_hidden(btnSettings)) {
+    lv_obj_set_hidden(btnSettings, false);
+    savedTick = lv_tick_get();
+    return true;
+  }
+  // Prevent screen from sleeping when double tapping with settings on
+  if ((event == Pinetime::Applications::TouchEvents::DoubleTap) && !lv_obj_get_hidden(btnClose)) {
+    return true;
+  }
+  return false;
+}
+
+void WatchFaceInfineat::CloseMenu() {
+  settingsController.SaveSettings();
+  lv_obj_set_hidden(btnClose, true);
+  lv_obj_set_hidden(btnNextColor, true);
+  lv_obj_set_hidden(btnPrevColor, true);
+  lv_obj_set_hidden(btnToggleCover, true);
+}
+
+bool WatchFaceInfineat::OnButtonPushed() {
+  if (!lv_obj_get_hidden(btnClose)) {
+    CloseMenu();
+    return true;
+  }
+  return false;
+}
+
+void WatchFaceInfineat::UpdateSelected(lv_obj_t* object, lv_event_t event) {
+  if (event == LV_EVENT_CLICKED) {
+    bool showSideCover = settingsController.GetInfineatShowSideCover();
+    int colorIndex = settingsController.GetInfineatColorIndex();
+
+    if (object == btnSettings) {
+      lv_obj_set_hidden(btnSettings, true);
+      lv_obj_set_hidden(btnClose, false);
+      lv_obj_set_hidden(btnNextColor, !showSideCover);
+      lv_obj_set_hidden(btnPrevColor, !showSideCover);
+      lv_obj_set_hidden(btnToggleCover, false);
+    }
+    if (object == btnClose) {
+      CloseMenu();
+    }
+    if (object == btnToggleCover) {
+      settingsController.SetInfineatShowSideCover(!showSideCover);
+      ToggleBatteryIndicatorColor(!showSideCover);
+      lv_obj_set_hidden(line0, showSideCover);
+      lv_obj_set_hidden(line1, showSideCover);
+      lv_obj_set_hidden(line2, showSideCover);
+      lv_obj_set_hidden(line3, showSideCover);
+      lv_obj_set_hidden(line4, showSideCover);
+      lv_obj_set_hidden(line5, showSideCover);
+      lv_obj_set_hidden(line6, showSideCover);
+      lv_obj_set_hidden(line7, showSideCover);
+      lv_obj_set_hidden(line8, showSideCover);
+      lv_obj_set_hidden(btnNextColor, showSideCover);
+      lv_obj_set_hidden(btnPrevColor, showSideCover);
+      const char* labelToggle = showSideCover ? "OFF" : "ON";
+      lv_obj_set_style_local_value_str(btnToggleCover, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, labelToggle);
+    }
+    if (object == btnNextColor) {
+      colorIndex = (colorIndex + 1) % nColors;
+      settingsController.SetInfineatColorIndex(colorIndex);
+    }
+    if (object == btnPrevColor) {
+      colorIndex -= 1;
+      if (colorIndex < 0)
+        colorIndex = nColors - 1;
+      settingsController.SetInfineatColorIndex(colorIndex);
+    }
+    if (object == btnNextColor || object == btnPrevColor) {
+      lv_obj_set_style_local_line_color(line0,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 0]));
+      lv_obj_set_style_local_line_color(line1,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 1]));
+      lv_obj_set_style_local_line_color(line2,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 2]));
+      lv_obj_set_style_local_line_color(line3,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 3]));
+      lv_obj_set_style_local_line_color(line4,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 4]));
+      lv_obj_set_style_local_line_color(line5,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 5]));
+      lv_obj_set_style_local_line_color(line6,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 6]));
+      lv_obj_set_style_local_line_color(line7,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 7]));
+      lv_obj_set_style_local_line_color(line8,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 8]));
+      lv_obj_set_style_local_line_color(lineBattery,
+                                        LV_LINE_PART_MAIN,
+                                        LV_STATE_DEFAULT,
+                                        lv_color_hex(infineatColors.orange[colorIndex * nLines + 4]));
+      lv_obj_set_style_local_bg_color(notificationIcon,
+                                      LV_BTN_PART_MAIN,
+                                      LV_STATE_DEFAULT,
+                                      lv_color_hex(infineatColors.orange[colorIndex * nLines + 7]));
+    }
+  }
+}
+
+void WatchFaceInfineat::Refresh() {
+  notificationState = notificationManager.AreNewNotificationsAvailable();
+  if (notificationState.IsUpdated()) {
+    lv_obj_set_hidden(notificationIcon, !notificationState.Get());
+    lv_obj_align(notificationIcon, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, 0, 0);
+  }
+
+  currentDateTime = dateTimeController.CurrentDateTime();
+
+  if (currentDateTime.IsUpdated()) {
+    auto newDateTime = currentDateTime.Get();
+
+    auto dp = date::floor<date::days>(newDateTime);
+    auto time = date::make_time(newDateTime - dp);
+    auto yearMonthDay = date::year_month_day(dp);
+
+    auto year = static_cast<int>(yearMonthDay.year());
+    auto month = static_cast<Pinetime::Controllers::DateTime::Months>(static_cast<unsigned>(yearMonthDay.month()));
+    auto day = static_cast<unsigned>(yearMonthDay.day());
+    auto dayOfWeek = static_cast<Pinetime::Controllers::DateTime::Days>(date::weekday(yearMonthDay).iso_encoding());
+
+    int hour = time.hours().count();
+    auto minute = time.minutes().count();
+
+    char minutesChar[3];
+    sprintf(minutesChar, "%02d", static_cast<int>(minute));
+
+    char hoursChar[3];
+    char ampmChar[3];
+
+    if (settingsController.GetClockType() == Controllers::Settings::ClockType::H12) {
+      if (hour < 12) {
+        if (hour == 0) {
+          hour = 12;
+        }
+        sprintf(ampmChar, "AM");
+      } else { // hour >= 12
+        if (hour != 12) {
+          hour = hour - 12;
+        }
+        sprintf(ampmChar, "PM");
+      }
+    }
+    sprintf(hoursChar, "%02d", hour);
+
+    if ((hoursChar[0] != displayedChar[0]) || (hoursChar[1] != displayedChar[1]) || (minutesChar[0] != displayedChar[2]) ||
+        (minutesChar[1] != displayedChar[3])) {
+      displayedChar[0] = hoursChar[0];
+      displayedChar[1] = hoursChar[1];
+      displayedChar[2] = minutesChar[0];
+      displayedChar[3] = minutesChar[1];
+
+      lv_label_set_text_fmt(labelHour, "%s", hoursChar);
+      lv_label_set_text_fmt(labelMinutes, "%s", minutesChar);
+    }
+
+    if (settingsController.GetClockType() == Controllers::Settings::ClockType::H12) {
+      lv_label_set_text(labelTimeAmPm, ampmChar);
+      lv_obj_align(labelTimeAmPm, timeContainer, LV_ALIGN_OUT_RIGHT_TOP, 0, 10);
+      lv_obj_align(labelHour, timeContainer, LV_ALIGN_IN_TOP_MID, 0, 5);
+      lv_obj_align(labelMinutes, timeContainer, LV_ALIGN_IN_BOTTOM_MID, 0, 0);
+    }
+
+    if ((year != currentYear) || (month != currentMonth) || (dayOfWeek != currentDayOfWeek) || (day != currentDay)) {
+      lv_label_set_text_fmt(labelDate, "%s %02d", dateTimeController.DayOfWeekShortToStringLow(), day);
+      lv_obj_realign(labelDate);
+
+      currentYear = year;
+      currentMonth = month;
+      currentDayOfWeek = dayOfWeek;
+      currentDay = day;
+    }
+  }
+
+  batteryPercentRemaining = batteryController.PercentRemaining();
+  isCharging = batteryController.IsCharging();
+  // We store if battery and charging are updated before calling Get(),
+  // since Get() sets isUpdated to false.
+  bool isBatteryUpdated = batteryPercentRemaining.IsUpdated();
+  bool isChargingUpdated = isCharging.IsUpdated();
+  if (isCharging.Get()) { // Charging battery animation
+    chargingBatteryPercent += 1;
+    if (chargingBatteryPercent > 100) {
+      chargingBatteryPercent = batteryPercentRemaining.Get();
+    }
+    SetBatteryLevel(chargingBatteryPercent);
+  } else if (isChargingUpdated || isBatteryUpdated) {
+    chargingBatteryPercent = batteryPercentRemaining.Get();
+    SetBatteryLevel(chargingBatteryPercent);
+  }
+
+  bleState = bleController.IsConnected();
+  bleRadioEnabled = bleController.IsRadioEnabled();
+  if (bleState.IsUpdated()) {
+    lv_label_set_text(bleIcon, BleIcon::GetIcon(bleState.Get()));
+    lv_obj_align(bleIcon, dateContainer, LV_ALIGN_OUT_BOTTOM_MID, 0, 3);
+  }
+
+  stepCount = motionController.NbSteps();
+  motionSensorOk = motionController.IsSensorOk();
+  if (stepCount.IsUpdated() || motionSensorOk.IsUpdated()) {
+    lv_label_set_text_fmt(stepValue, "%lu", stepCount.Get());
+    lv_obj_align(stepValue, lv_scr_act(), LV_ALIGN_IN_BOTTOM_MID, 10, 0);
+    lv_obj_align(stepIcon, stepValue, LV_ALIGN_OUT_LEFT_MID, -5, 0);
+  }
+
+  if (!lv_obj_get_hidden(btnSettings)) {
+    if ((savedTick > 0) && (lv_tick_get() - savedTick > 3000)) {
+      lv_obj_set_hidden(btnSettings, true);
+      savedTick = 0;
+    }
+  }
+}
+
+void WatchFaceInfineat::SetBatteryLevel(uint8_t batteryPercent) {
+  // starting point (y) + Pine64 logo height * (100 - batteryPercent) / 100
+  lineBatteryPoints[1] = {27, static_cast<lv_coord_t>(105 + 32 * (100 - batteryPercent) / 100)};
+  lv_line_set_points(lineBattery, lineBatteryPoints, 2);
+}
+
+void WatchFaceInfineat::ToggleBatteryIndicatorColor(bool showSideCover) {
+  if (!showSideCover) { // make indicator and notification icon color white
+    lv_obj_set_style_local_image_recolor_opa(logoPine, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_100);
+    lv_obj_set_style_local_image_recolor(logoPine, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_WHITE);
+    lv_obj_set_style_local_line_color(lineBattery, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_BLACK);
+    lv_obj_set_style_local_bg_color(notificationIcon, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_WHITE);
+  } else {
+    lv_obj_set_style_local_image_recolor_opa(logoPine, LV_IMG_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_0);
+    lv_obj_set_style_local_line_color(lineBattery,
+                                      LV_LINE_PART_MAIN,
+                                      LV_STATE_DEFAULT,
+                                      lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 4]));
+    lv_obj_set_style_local_bg_color(notificationIcon,
+                                    LV_BTN_PART_MAIN,
+                                    LV_STATE_DEFAULT,
+                                    lv_color_hex(infineatColors.orange[settingsController.GetInfineatColorIndex() * nLines + 7]));
+  }
+}

src/displayapp/screens/WatchFaceInfineat.h

@@ -0,0 +1,144 @@
+#pragma once
+
+#include <lvgl/lvgl.h>
+#include <chrono>
+#include <cstdint>
+#include <memory>
+#include "displayapp/screens/Screen.h"
+#include "components/datetime/DateTimeController.h"
+
+namespace Pinetime {
+  namespace Controllers {
+    class Settings;
+    class Battery;
+    class Ble;
+    class NotificationManager;
+    class MotionController;
+  }
+
+  namespace Applications {
+    namespace Screens {
+
+      class WatchFaceInfineat : public Screen {
+      public:
+        WatchFaceInfineat(DisplayApp* app,
+                          Controllers::DateTime& dateTimeController,
+                          Controllers::Battery& batteryController,
+                          Controllers::Ble& bleController,
+                          Controllers::NotificationManager& notificationManager,
+                          Controllers::Settings& settingsController,
+                          Controllers::MotionController& motionController,
+                          Controllers::FS& fs);
+
+        ~WatchFaceInfineat() override;
+
+        bool OnTouchEvent(TouchEvents event) override;
+        bool OnButtonPushed() override;
+        void UpdateSelected(lv_obj_t* object, lv_event_t event);
+        void CloseMenu();
+
+        void Refresh() override;
+
+      private:
+        char displayedChar[5] {};
+
+        uint16_t currentYear = 1970;
+        Pinetime::Controllers::DateTime::Months currentMonth = Pinetime::Controllers::DateTime::Months::Unknown;
+        Pinetime::Controllers::DateTime::Days currentDayOfWeek = Pinetime::Controllers::DateTime::Days::Unknown;
+        uint8_t currentDay = 0;
+        uint32_t savedTick = 0;
+        uint8_t chargingBatteryPercent = 101; // not a mistake ;)
+
+        DirtyValue<uint8_t> batteryPercentRemaining {};
+        DirtyValue<bool> isCharging {};
+        DirtyValue<bool> bleState {};
+        DirtyValue<bool> bleRadioEnabled {};
+        DirtyValue<std::chrono::time_point<std::chrono::system_clock, std::chrono::nanoseconds>> currentDateTime {};
+        DirtyValue<bool> motionSensorOk {};
+        DirtyValue<uint32_t> stepCount {};
+        DirtyValue<bool> notificationState {};
+
+        lv_obj_t* background;
+
+        // Lines making up the side cover
+        lv_obj_t* line0;
+        lv_obj_t* line1;
+        lv_obj_t* line2;
+        lv_obj_t* line3;
+        lv_obj_t* line4;
+        lv_obj_t* line5;
+        lv_obj_t* line6;
+        lv_obj_t* line7;
+        lv_obj_t* line8;
+        lv_obj_t* lineBattery;
+
+        lv_style_t line0Style;
+        lv_style_t line1Style;
+        lv_style_t line2Style;
+        lv_style_t line3Style;
+        lv_style_t line4Style;
+        lv_style_t line5Style;
+        lv_style_t line6Style;
+        lv_style_t line7Style;
+        lv_style_t line8Style;
+        lv_style_t lineBatteryStyle;
+
+        lv_point_t line0Points[2];
+        lv_point_t line1Points[2];
+        lv_point_t line2Points[2];
+        lv_point_t line3Points[2];
+        lv_point_t line4Points[2];
+        lv_point_t line5Points[2];
+        lv_point_t line6Points[2];
+        lv_point_t line7Points[2];
+        lv_point_t line8Points[2];
+        lv_point_t lineBatteryPoints[2];
+
+        lv_obj_t* logoPine;
+
+        lv_obj_t* timeContainer;
+        lv_obj_t* labelHour;
+        lv_obj_t* labelMinutes;
+        lv_obj_t* labelTimeAmPm;
+        lv_obj_t* dateContainer;
+        lv_obj_t* labelDate;
+        lv_obj_t* bleIcon;
+        lv_obj_t* stepIcon;
+        lv_obj_t* stepValue;
+        lv_obj_t* notificationIcon;
+        lv_obj_t* btnClose;
+        lv_obj_t* btnNextColor;
+        lv_obj_t* btnToggleCover;
+        lv_obj_t* btnPrevColor;
+        lv_obj_t* btnSettings;
+        lv_obj_t* labelBtnSettings;
+
+        static constexpr int nLines = 9;
+        static constexpr int nColors = 7; // must match number of colors in InfineatColors
+        struct InfineatColors {
+          int orange[nLines] = {0xfd872b, 0xdb3316, 0x6f1000, 0xfd7a0a, 0xffffff, 0xffffff, 0xffffff, 0xe85102, 0xea1c00};
+          int blue[nLines] = {0xe7f8ff, 0x2232d0, 0x182a8b, 0xe7f8ff, 0xffffff, 0xffffff, 0xffffff, 0x5991ff, 0x1636ff};
+          int green[nLines] = {0xb8ff9b, 0x088608, 0x004a00, 0xb8ff9b, 0xffffff, 0xffffff, 0xffffff, 0x62d515, 0x007400};
+          int rainbow[nLines] = {0x2da400, 0xac09c4, 0xfe0303, 0x0d57ff, 0xffffff, 0xffffff, 0xffffff, 0xe0b900, 0xe85102};
+          int gray[nLines] = {0xeeeeee, 0x98959b, 0x191919, 0xeeeeee, 0xffffff, 0xffffff, 0xffffff, 0x919191, 0x3a3a3a};
+          int nordBlue[nLines] = {0xc3daf2, 0x4d78ce, 0x153451, 0xc3daf2, 0xffffff, 0xffffff, 0xffffff, 0x5d8ad2, 0x21518a};
+          int nordGreen[nLines] = {0xd5f0e9, 0x238373, 0x1d413f, 0xd5f0e9, 0xffffff, 0xffffff, 0xffffff, 0x2fb8a2, 0x11705a};
+        } infineatColors;
+
+        Controllers::DateTime& dateTimeController;
+        Controllers::Battery& batteryController;
+        Controllers::Ble& bleController;
+        Controllers::NotificationManager& notificationManager;
+        Controllers::Settings& settingsController;
+        Controllers::MotionController& motionController;
+
+        void SetBatteryLevel(uint8_t batteryPercent);
+        void ToggleBatteryIndicatorColor(bool showSideCover);
+
+        lv_task_t* taskRefresh;
+        lv_font_t* font_teko = nullptr;
+        lv_font_t* font_bebas = nullptr;
+      };
+    }
+  }
+}

src/displayapp/screens/settings/SettingWatchFace.cpp

@@ -1,58 +1,29 @@
 #include "displayapp/screens/settings/SettingWatchFace.h"
 #include <lvgl/lvgl.h>
 #include "displayapp/DisplayApp.h"
+#include "displayapp/screens/CheckboxList.h"
 #include "displayapp/screens/Screen.h"
 #include "displayapp/screens/Styles.h"
 #include "displayapp/screens/Symbols.h"
+#include "components/settings/Settings.h"
 
 using namespace Pinetime::Applications::Screens;
 
-namespace {
+constexpr const char* SettingWatchFace::title;
-  void event_handler(lv_obj_t* obj, lv_event_t event) {
+constexpr const char* SettingWatchFace::symbol;
-    auto* screen = static_cast<SettingWatchFace*>(obj->user_data);
-    screen->UpdateSelected(obj, event);
-  }
-}
-
-constexpr std::array<const char*, 4> SettingWatchFace::options;
 
 SettingWatchFace::SettingWatchFace(Pinetime::Applications::DisplayApp* app, Pinetime::Controllers::Settings& settingsController)
-  : Screen(app), settingsController {settingsController} {
+  : Screen(app),
-
+    settingsController {settingsController},
-  lv_obj_t* container1 = lv_cont_create(lv_scr_act(), nullptr);
+    screens {app,
-
+             settingsController.GetWatchfacesMenu(),
-  lv_obj_set_style_local_bg_opa(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_TRANSP);
+             {[this]() -> std::unique_ptr<Screen> {
-  lv_obj_set_style_local_pad_all(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 10);
+                return CreateScreen1();
-  lv_obj_set_style_local_pad_inner(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 5);
+              },
-  lv_obj_set_style_local_border_width(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 0);
+              [this]() -> std::unique_ptr<Screen> {
-
+                return CreateScreen2();
-  lv_obj_set_pos(container1, 10, 60);
+              }},
-  lv_obj_set_width(container1, LV_HOR_RES - 20);
+             Screens::ScreenListModes::UpDown} {
-  lv_obj_set_height(container1, LV_VER_RES - 50);
-  lv_cont_set_layout(container1, LV_LAYOUT_COLUMN_LEFT);
-
-  lv_obj_t* title = lv_label_create(lv_scr_act(), nullptr);
-  lv_label_set_text_static(title, "Watch face");
-  lv_label_set_align(title, LV_LABEL_ALIGN_CENTER);
-  lv_obj_align(title, lv_scr_act(), LV_ALIGN_IN_TOP_MID, 10, 15);
-
-  lv_obj_t* icon = lv_label_create(lv_scr_act(), nullptr);
-  lv_obj_set_style_local_text_color(icon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_ORANGE);
-  lv_label_set_text_static(icon, Symbols::home);
-  lv_label_set_align(icon, LV_LABEL_ALIGN_CENTER);
-  lv_obj_align(icon, title, LV_ALIGN_OUT_LEFT_MID, -10, 0);
-
-  for (unsigned int i = 0; i < options.size(); i++) {
-    cbOption[i] = lv_checkbox_create(container1, nullptr);
-    lv_checkbox_set_text(cbOption[i], options[i]);
-    cbOption[i]->user_data = this;
-    lv_obj_set_event_cb(cbOption[i], event_handler);
-    SetRadioButtonStyle(cbOption[i]);
-
-    if (settingsController.GetClockFace() == i) {
-      lv_checkbox_set_checked(cbOption[i], true);
-    }
-  }
 }
 
 SettingWatchFace::~SettingWatchFace() {
@@ -60,15 +31,32 @@ SettingWatchFace::~SettingWatchFace() {
   settingsController.SaveSettings();
 }
 
-void SettingWatchFace::UpdateSelected(lv_obj_t* object, lv_event_t event) {
+bool SettingWatchFace::OnTouchEvent(Pinetime::Applications::TouchEvents event) {
-  if (event == LV_EVENT_VALUE_CHANGED) {
+  return screens.OnTouchEvent(event);
-    for (unsigned int i = 0; i < options.size(); i++) {
-      if (object == cbOption[i]) {
-        lv_checkbox_set_checked(cbOption[i], true);
-        settingsController.SetClockFace(i);
-      } else {
-        lv_checkbox_set_checked(cbOption[i], false);
-      }
 }
+
+std::unique_ptr<Screen> SettingWatchFace::CreateScreen1() {
+  std::array<const char*, 4> watchfaces {"Digital face", "Analog face", "PineTimeStyle", "Terminal"};
+  return std::make_unique<Screens::CheckboxList>(0,
+                                                 2,
+                                                 app,
+                                                 settingsController,
+                                                 title,
+                                                 symbol,
+                                                 &Controllers::Settings::SetClockFace,
+                                                 &Controllers::Settings::GetClockFace,
+                                                 watchfaces);
 }
+
+std::unique_ptr<Screen> SettingWatchFace::CreateScreen2() {
+  std::array<const char*, 4> watchfaces {"Infineat face", "", "", ""};
+  return std::make_unique<Screens::CheckboxList>(1,
+                                                 2,
+                                                 app,
+                                                 settingsController,
+                                                 title,
+                                                 symbol,
+                                                 &Controllers::Settings::SetClockFace,
+                                                 &Controllers::Settings::GetClockFace,
+                                                 watchfaces);
 }

src/displayapp/screens/settings/SettingWatchFace.h

@@ -4,8 +4,10 @@
 #include <cstdint>
 #include <lvgl/lvgl.h>
 
+#include "displayapp/screens/ScreenList.h"
 #include "components/settings/Settings.h"
 #include "displayapp/screens/Screen.h"
+#include "displayapp/screens/Symbols.h"
 
 namespace Pinetime {
 
@@ -17,13 +19,16 @@ namespace Pinetime {
         SettingWatchFace(DisplayApp* app, Pinetime::Controllers::Settings& settingsController);
         ~SettingWatchFace() override;
 
-        void UpdateSelected(lv_obj_t* object, lv_event_t event);
+        bool OnTouchEvent(TouchEvents event) override;
 
       private:
-        static constexpr std::array<const char*, 4> options = {"Digital face", "Analog face", "PineTimeStyle", "Terminal"};
         Controllers::Settings& settingsController;
+        ScreenList<2> screens;
 
-        lv_obj_t* cbOption[options.size()];
+        static constexpr const char* title = "Watch face";
+        static constexpr const char* symbol = Symbols::home;
+        std::unique_ptr<Screen> CreateScreen1();
+        std::unique_ptr<Screen> CreateScreen2();
       };
     }
   }

src/main.cpp

@@ -131,7 +131,8 @@ Pinetime::Applications::DisplayApp displayApp(lcd,
                                               timerController,
                                               alarmController,
                                               brightnessController,
-                                              touchHandler);
+                                              touchHandler,
+                                              fs);
 
 Pinetime::System::SystemTask systemTask(spi,
                                         lcd,

src/resources/fonts.json

@@ -3,7 +3,7 @@
       "sources": [
          {
             "file": "fonts/Teko-Light.ttf",
-            "symbols": "0123456789:/amp"
+            "symbols": "0123456789:/ampMonTueWdhFriSt "
          }
       ],
       "bpp": 1,

src/resources/images.json

@@ -1,7 +1,7 @@
 {
    "pine_small" : {
       "sources": "images/pine_logo.png",
-      "color_format": "CF_TRUE_COLOR",
+      "color_format": "CF_TRUE_COLOR_ALPHA",
       "output_format": "bin",
       "binary_format": "ARGB8565_RBSWAP",
       "target_path": "/images/"