Big UI and navigation Rewrite

new navigation
add some color to the apps
redesign menus
new settings menu
new quick settings
code clean up
size reduction by converting navigation images to font
and more...

12 files changed, 853 insertions, 0 deletions

diff --git a/src/displayapp/screens/settings/QuickSettings.cpp b/src/displayapp/screens/settings/QuickSettings.cpp
new file mode 100644
index 00000000..9fd051b8
--- /dev/null
+++ b/src/displayapp/screens/settings/QuickSettings.cpp
@@ -0,0 +1,177 @@
+#include "QuickSettings.h"
+#include "displayapp/DisplayApp.h"
+#include "displayapp/screens/Symbols.h"
+#include "displayapp/screens/BatteryIcon.h"
+
+
+using namespace Pinetime::Applications::Screens;
+
+namespace {
+  static void ButtonEventHandler(lv_obj_t * obj, lv_event_t event) {
+    QuickSettings* screen = static_cast<QuickSettings *>(obj->user_data);
+    screen->OnButtonEvent(obj, event);
+  }
+
+  static void lv_update_task(struct _lv_task_t *task) {  
+    auto user_data = static_cast<QuickSettings *>(task->user_data);
+    user_data->UpdateScreen();
+  }
+}
+
+QuickSettings::QuickSettings(
+    Pinetime::Applications::DisplayApp *app, 
+    Pinetime::Controllers::Battery& batteryController,
+    Controllers::DateTime& dateTimeController,
+    Controllers::BrightnessController& brightness,
+    Pinetime::Controllers::Settings &settingsController) : 
+  Screen(app),
+  batteryController{batteryController},
+  dateTimeController{dateTimeController},
+  brightness{brightness},
+  settingsController{settingsController}
+{
+
+  // Time
+  label_time = lv_label_create(lv_scr_act(), nullptr);  
+  lv_label_set_text_fmt(label_time,  "%02i:%02i", dateTimeController.Hours(), dateTimeController.Minutes());      
+  lv_label_set_align( label_time, LV_LABEL_ALIGN_CENTER );    
+  lv_obj_align(label_time, lv_scr_act(), LV_ALIGN_IN_TOP_LEFT, 15, 4);
+
+  batteryIcon = lv_label_create(lv_scr_act(), nullptr);
+  lv_label_set_text(batteryIcon, BatteryIcon::GetBatteryIcon(batteryController.PercentRemaining()));
+  lv_obj_align(batteryIcon, nullptr, LV_ALIGN_IN_TOP_RIGHT, -15, 4);
+  
+
+  lv_obj_t * lbl_btn;
+
+  btn1 = lv_btn_create(lv_scr_act(), nullptr);
+  btn1->user_data = this;
+  lv_obj_set_event_cb(btn1, ButtonEventHandler);
+  lv_obj_align(btn1, nullptr, LV_ALIGN_CENTER, -50, -30);  
+  lv_obj_set_style_local_radius(btn1, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
+  lv_obj_set_style_local_bg_color(btn1, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111));  
+  lv_obj_set_style_local_bg_grad_dir(btn1, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_GRAD_DIR_NONE);
+
+  lv_btn_set_fit2(btn1, LV_FIT_TIGHT, LV_FIT_TIGHT);  
+
+  btn1_lvl = lv_label_create(btn1, nullptr);
+  lv_obj_set_style_local_text_font(btn1_lvl, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48);
+  lv_label_set_text_static(btn1_lvl, brightness.GetIcon());
+
+
+  btn2 = lv_btn_create(lv_scr_act(), nullptr);
+  btn2->user_data = this;
+  lv_obj_set_event_cb(btn2, ButtonEventHandler);
+  lv_obj_align(btn2, nullptr, LV_ALIGN_CENTER, 50, -30);  
+  lv_obj_set_style_local_radius(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
+  lv_obj_set_style_local_bg_color(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111));
+  lv_obj_set_style_local_bg_grad_dir(btn2, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_GRAD_DIR_NONE);
+  lv_btn_set_fit2(btn2, LV_FIT_TIGHT, LV_FIT_TIGHT);
+
+  lbl_btn = lv_label_create(btn2, nullptr);
+  lv_obj_set_style_local_text_font(lbl_btn, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48);
+  lv_label_set_text_static(lbl_btn, Symbols::highlight);
+  
+
+  btn3 = lv_btn_create(lv_scr_act(), nullptr);
+  btn3->user_data = this;
+  lv_obj_set_event_cb(btn3, ButtonEventHandler);
+  lv_obj_align(btn3, nullptr, LV_ALIGN_CENTER, -50, 60);
+  lv_btn_set_checkable(btn3, true);
+  lv_obj_set_style_local_radius(btn3, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
+  lv_obj_set_style_local_bg_color(btn3, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111));
+  lv_obj_set_style_local_bg_grad_dir(btn3, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_GRAD_DIR_NONE);
+  lv_obj_set_style_local_bg_color(btn3, LV_BTN_PART_MAIN, LV_STATE_CHECKED, LV_COLOR_GREEN);
+  lv_obj_set_style_local_bg_grad_dir(btn1, LV_BTN_PART_MAIN, LV_STATE_CHECKED, LV_GRAD_DIR_NONE);
+  lv_btn_set_fit2(btn3, LV_FIT_TIGHT, LV_FIT_TIGHT);
+
+  btn3_lvl = lv_label_create(btn3, nullptr);
+  lv_obj_set_style_local_text_font(btn3_lvl, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48);  
+
+  if ( settingsController.GetVibrationStatus() == Controllers::Settings::Vibration::ON ) {    
+    lv_obj_add_state(btn3, LV_STATE_CHECKED);
+    lv_label_set_text_static(btn3_lvl, Symbols::notificationsOn);
+  } else {
+    lv_label_set_text_static(btn3_lvl, Symbols::notificationsOff);
+  }
+
+  btn4 = lv_btn_create(lv_scr_act(), nullptr);
+  btn4->user_data = this;
+  lv_obj_set_event_cb(btn4, ButtonEventHandler);
+  lv_obj_align(btn4, nullptr, LV_ALIGN_CENTER, 50, 60);  
+  lv_obj_set_style_local_radius(btn4, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
+  lv_obj_set_style_local_bg_color(btn4, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111));
+  lv_obj_set_style_local_bg_grad_dir(btn4, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_GRAD_DIR_NONE);
+  lv_btn_set_fit2(btn4, LV_FIT_TIGHT, LV_FIT_TIGHT);
+
+  lbl_btn = lv_label_create(btn4, nullptr);
+  lv_obj_set_style_local_text_font(lbl_btn, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &lv_font_sys_48);
+  lv_label_set_text_static(lbl_btn, Symbols::settings);
+
+  lv_obj_t * backgroundLabel = lv_label_create(lv_scr_act(), nullptr);
+  lv_label_set_long_mode(backgroundLabel, LV_LABEL_LONG_CROP);
+  lv_obj_set_size(backgroundLabel, 240, 240);
+  lv_obj_set_pos(backgroundLabel, 0, 0);
+  lv_label_set_text_static(backgroundLabel, "");
+
+  taskUpdate = lv_task_create(lv_update_task, 500000, LV_TASK_PRIO_MID, this);
+  
+}
+
+
+QuickSettings::~QuickSettings() {
+  lv_task_del(taskUpdate);
+  lv_obj_clean(lv_scr_act());
+  settingsController.SaveSettings();
+}
+
+void QuickSettings::UpdateScreen() {
+  lv_label_set_text_fmt(label_time,  "%02i:%02i", dateTimeController.Hours(), dateTimeController.Minutes());
+  lv_label_set_text(batteryIcon, BatteryIcon::GetBatteryIcon(batteryController.PercentRemaining()));
+}
+
+void QuickSettings::OnButtonEvent(lv_obj_t *object, lv_event_t event) {
+  if(object == btn2 && event == LV_EVENT_PRESSED) {
+    
+    running = false;
+    app->StartApp(Apps::FlashLight, DisplayApp::FullRefreshDirections::None);
+
+  } else if(object == btn1 && event == LV_EVENT_PRESSED) {
+    
+    brightness.Step();
+    lv_label_set_text_static(btn1_lvl, brightness.GetIcon());
+    settingsController.SetBrightness( brightness.Level() );
+
+  } else if(object == btn3 && event == LV_EVENT_VALUE_CHANGED) {
+    
+    if(lv_obj_get_state(btn3, LV_BTN_PART_MAIN) & LV_STATE_CHECKED) {
+      settingsController.SetVibrationStatus( Controllers::Settings::Vibration::ON );
+      lv_label_set_text_static(btn3_lvl, Symbols::notificationsOn);
+    } else {
+      settingsController.SetVibrationStatus(Controllers::Settings::Vibration::OFF);
+      lv_label_set_text_static(btn3_lvl, Symbols::notificationsOff);
+    }
+
+  } else if(object == btn4 && event == LV_EVENT_PRESSED) {
+    running = false;
+    settingsController.SetSettingsMenu(0);
+    app->StartApp(Apps::Settings, DisplayApp::FullRefreshDirections::Up);
+
+  }
+
+}
+
+bool QuickSettings::OnTouchEvent(Pinetime::Applications::TouchEvents event) {
+  switch (event) {
+    case Pinetime::Applications::TouchEvents::SwipeLeft:
+      running = false;
+      return false;
+
+    default:
+      return true;
+  }
+}
+
+bool QuickSettings::Refresh() {
+  return running;
+}
diff --git a/src/displayapp/screens/settings/QuickSettings.h b/src/displayapp/screens/settings/QuickSettings.h
new file mode 100644
index 00000000..329be55b
--- /dev/null
+++ b/src/displayapp/screens/settings/QuickSettings.h
@@ -0,0 +1,57 @@
+#pragma once
+
+#include <cstdint>
+#include <FreeRTOS.h>
+#include <timers.h>
+#include "displayapp/screens/Screen.h"
+#include <lvgl/lvgl.h>
+#include "components/datetime/DateTimeController.h"
+#include "components/brightness/BrightnessController.h"
+#include "components/settings/Settings.h"
+#include "components/battery/BatteryController.h"
+
+
+namespace Pinetime {
+
+  namespace Applications {
+    namespace Screens {
+
+      class QuickSettings : public Screen{
+        public:
+          QuickSettings(DisplayApp* app, 
+            Pinetime::Controllers::Battery& batteryController,
+            Controllers::DateTime& dateTimeController,
+            Controllers::BrightnessController& brightness,
+            Pinetime::Controllers::Settings &settingsController);
+
+          ~QuickSettings() override;
+
+          bool Refresh() override;
+          
+          bool OnTouchEvent(Pinetime::Applications::TouchEvents event) override;
+          void OnButtonEvent(lv_obj_t *object, lv_event_t event);
+
+          void UpdateScreen();
+
+        private:          
+
+          Pinetime::Controllers::Battery& batteryController;
+          Controllers::DateTime& dateTimeController;
+          Controllers::BrightnessController& brightness;
+          Controllers::Settings& settingsController;
+
+          lv_task_t* taskUpdate;
+          lv_obj_t * batteryIcon;
+          lv_obj_t * label_time;
+
+          lv_obj_t * btn1;
+          lv_obj_t * btn1_lvl;
+          lv_obj_t * btn2;
+          lv_obj_t * btn3;
+          lv_obj_t * btn3_lvl;
+          lv_obj_t * btn4;
+
+      };
+    }
+  }
+}
diff --git a/src/displayapp/screens/settings/SettingDisplay.cpp b/src/displayapp/screens/settings/SettingDisplay.cpp
new file mode 100644
index 00000000..6c1bc9b5
--- /dev/null
+++ b/src/displayapp/screens/settings/SettingDisplay.cpp
@@ -0,0 +1,109 @@
+#include "SettingDisplay.h"
+#include <lvgl/lvgl.h>
+#include "displayapp/DisplayApp.h"
+#include "displayapp/Messages.h"
+#include "displayapp/screens/Screen.h"
+#include "displayapp/screens/Symbols.h"
+
+using namespace Pinetime::Applications::Screens;
+
+namespace {
+  static void event_handler(lv_obj_t * obj, lv_event_t event) {
+    SettingDisplay* screen = static_cast<SettingDisplay *>(obj->user_data);
+    screen->UpdateSelected(obj, event);
+  }
+}
+
+SettingDisplay::SettingDisplay(
+  Pinetime::Applications::DisplayApp *app, Pinetime::Controllers::Settings &settingsController) :
+  Screen(app),
+  settingsController{settingsController}
+{
+
+  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,"Display timeout");
+  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::sun);
+  lv_label_set_align(icon, LV_LABEL_ALIGN_CENTER);
+  lv_obj_align(icon, title, LV_ALIGN_OUT_LEFT_MID, -10, 0);
+  
+  optionsTotal = 0;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], "  5 seconds");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.GetScreenTimeOut() == 5000 ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+  optionsTotal++;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " 15 seconds");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.GetScreenTimeOut() == 15000 ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+  optionsTotal++;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " 20 seconds");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);
+  if (settingsController.GetScreenTimeOut() == 20000 ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+  optionsTotal++;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " 30 seconds");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);
+  if (settingsController.GetScreenTimeOut() == 30000 ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+  optionsTotal++;
+}
+
+SettingDisplay::~SettingDisplay() {
+  lv_obj_clean(lv_scr_act());
+  settingsController.SaveSettings();
+}
+
+bool SettingDisplay::Refresh() {
+  return running;
+}
+
+
+void SettingDisplay::UpdateSelected(lv_obj_t *object, lv_event_t event) {
+  if(event == LV_EVENT_VALUE_CHANGED) {
+    for(int i = 0; i < optionsTotal; i++) {
+      if ( object == cbOption[i] ) {
+        lv_checkbox_set_checked(cbOption[i], true);
+        
+        if ( i == 0 ) { settingsController.SetScreenTimeOut(5000); };
+        if ( i == 1 ) { settingsController.SetScreenTimeOut(15000); };
+        if ( i == 2 ) { settingsController.SetScreenTimeOut(20000); };
+        if ( i == 3 ) { settingsController.SetScreenTimeOut(30000); };
+        
+        app->PushMessage(Applications::Display::Messages::UpdateTimeOut);
+
+      } else {
+        lv_checkbox_set_checked(cbOption[i], false);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/displayapp/screens/settings/SettingDisplay.h b/src/displayapp/screens/settings/SettingDisplay.h
new file mode 100644
index 00000000..9565d3c7
--- /dev/null
+++ b/src/displayapp/screens/settings/SettingDisplay.h
@@ -0,0 +1,30 @@
+#pragma once
+
+#include <cstdint>
+#include <lvgl/lvgl.h>
+#include "components/settings/Settings.h"
+#include "displayapp/screens/Screen.h"
+
+namespace Pinetime {
+
+  namespace Applications {
+    namespace Screens {
+
+      class SettingDisplay : public Screen{
+        public:
+          SettingDisplay(DisplayApp* app, Pinetime::Controllers::Settings &settingsController);
+          ~SettingDisplay() override;
+
+          bool Refresh() override;
+          void UpdateSelected(lv_obj_t *object, lv_event_t event);
+         
+        private:          
+
+          Controllers::Settings& settingsController;
+          uint8_t optionsTotal;
+          lv_obj_t * cbOption[4];
+          
+      };
+    }
+  }
+}
diff --git a/src/displayapp/screens/settings/SettingTimeFormat.cpp b/src/displayapp/screens/settings/SettingTimeFormat.cpp
new file mode 100644
index 00000000..ff217bda
--- /dev/null
+++ b/src/displayapp/screens/settings/SettingTimeFormat.cpp
@@ -0,0 +1,89 @@
+#include "SettingTimeFormat.h"
+#include <lvgl/lvgl.h>
+#include "displayapp/DisplayApp.h"
+#include "displayapp/screens/Screen.h"
+#include "displayapp/screens/Symbols.h"
+
+using namespace Pinetime::Applications::Screens;
+
+namespace {
+  static void event_handler(lv_obj_t * obj, lv_event_t event) {
+    SettingTimeFormat* screen = static_cast<SettingTimeFormat *>(obj->user_data);
+    screen->UpdateSelected(obj, event);
+  }
+}
+
+SettingTimeFormat::SettingTimeFormat(
+  Pinetime::Applications::DisplayApp *app, Pinetime::Controllers::Settings &settingsController) :
+  Screen(app),
+  settingsController{settingsController}
+{
+
+  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,"Time format");
+  lv_label_set_align(title, LV_LABEL_ALIGN_CENTER);
+  lv_obj_align(title, lv_scr_act(), LV_ALIGN_IN_TOP_MID, 15, 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::clock);
+  lv_label_set_align(icon, LV_LABEL_ALIGN_CENTER);
+  lv_obj_align(icon, title, LV_ALIGN_OUT_LEFT_MID, -10, 0);
+
+  optionsTotal = 0;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " 12-hour");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.GetClockType() == Controllers::Settings::ClockType::H12 ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+
+  optionsTotal++;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " 24-hour");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.GetClockType() == Controllers::Settings::ClockType::H24 ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+  optionsTotal++;
+}
+
+SettingTimeFormat::~SettingTimeFormat() {
+  lv_obj_clean(lv_scr_act());
+  settingsController.SaveSettings();
+}
+
+bool SettingTimeFormat::Refresh() {
+  return running;
+}
+
+
+void SettingTimeFormat::UpdateSelected(lv_obj_t *object, lv_event_t event) {
+  if(event == LV_EVENT_VALUE_CHANGED) {
+    for(int i = 0; i < optionsTotal; i++) {
+      if ( object == cbOption[i] ) {
+        lv_checkbox_set_checked(cbOption[i], true);
+        
+        if ( i == 0 ) { settingsController.SetClockType(Controllers::Settings::ClockType::H12); };
+        if ( i == 1 ) { settingsController.SetClockType(Controllers::Settings::ClockType::H24); };
+        
+      } else {
+        lv_checkbox_set_checked(cbOption[i], false);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/displayapp/screens/settings/SettingTimeFormat.h b/src/displayapp/screens/settings/SettingTimeFormat.h
new file mode 100644
index 00000000..a6380493
--- /dev/null
+++ b/src/displayapp/screens/settings/SettingTimeFormat.h
@@ -0,0 +1,30 @@
+#pragma once
+
+#include <cstdint>
+#include <lvgl/lvgl.h>
+#include "components/settings/Settings.h"
+#include "displayapp/screens/Screen.h"
+
+namespace Pinetime {
+
+  namespace Applications {
+    namespace Screens {
+
+      class SettingTimeFormat : public Screen{
+        public:
+          SettingTimeFormat(DisplayApp* app, Pinetime::Controllers::Settings &settingsController);
+          ~SettingTimeFormat() override;
+
+          bool Refresh() override;
+          void UpdateSelected(lv_obj_t *object, lv_event_t event);
+         
+        private:          
+
+          Controllers::Settings& settingsController;
+          uint8_t optionsTotal;
+          lv_obj_t * cbOption[2];
+          
+      };
+    }
+  }
+}
diff --git a/src/displayapp/screens/settings/SettingWakeUp.cpp b/src/displayapp/screens/settings/SettingWakeUp.cpp
new file mode 100644
index 00000000..927a9e3a
--- /dev/null
+++ b/src/displayapp/screens/settings/SettingWakeUp.cpp
@@ -0,0 +1,107 @@
+#include "SettingWakeUp.h"
+#include <lvgl/lvgl.h>
+#include "displayapp/DisplayApp.h"
+#include "displayapp/screens/Screen.h"
+#include "displayapp/screens/Symbols.h"
+#include "components/settings/Settings.h"
+
+using namespace Pinetime::Applications::Screens;
+
+namespace {
+  static void event_handler(lv_obj_t * obj, lv_event_t event) {
+    SettingWakeUp* screen = static_cast<SettingWakeUp *>(obj->user_data);
+    screen->UpdateSelected(obj, event);
+  }
+}
+
+SettingWakeUp::SettingWakeUp(
+  Pinetime::Applications::DisplayApp *app, Pinetime::Controllers::Settings &settingsController) :
+  Screen(app),
+  settingsController{settingsController}
+{
+
+  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,"Wake Up");
+  lv_label_set_align(title, LV_LABEL_ALIGN_CENTER);
+  lv_obj_align(title, lv_scr_act(), LV_ALIGN_IN_TOP_MID, 15, 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::clock);
+  lv_label_set_align(icon, LV_LABEL_ALIGN_CENTER);
+  lv_obj_align(icon, title, LV_ALIGN_OUT_LEFT_MID, -10, 0);
+
+  optionsTotal = 0;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " None");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.getWakeUpMode() == Pinetime::Controllers::Settings::WakeUpMode::None ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+  optionsTotal++;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " Single Tap");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.getWakeUpMode() == Pinetime::Controllers::Settings::WakeUpMode::SingleTap ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+  optionsTotal++;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " Double Tap");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.getWakeUpMode() == Pinetime::Controllers::Settings::WakeUpMode::DoubleTap ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+  optionsTotal++;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " Raise Wrist");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.getWakeUpMode() == Pinetime::Controllers::Settings::WakeUpMode::RaiseWrist ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+  optionsTotal++;
+}
+
+SettingWakeUp::~SettingWakeUp() {
+  lv_obj_clean(lv_scr_act());
+  settingsController.SaveSettings();
+}
+
+bool SettingWakeUp::Refresh() {
+  return running;
+}
+
+
+void SettingWakeUp::UpdateSelected(lv_obj_t *object, lv_event_t event) {
+  if(event == LV_EVENT_VALUE_CHANGED) {
+    for(int i = 0; i < optionsTotal; i++) {
+      if ( object == cbOption[i] ) {
+        lv_checkbox_set_checked(cbOption[i], true);
+        
+        if ( i == 0 ) { settingsController.setWakeUpMode(Pinetime::Controllers::Settings::WakeUpMode::None); };
+        if ( i == 1 ) { settingsController.setWakeUpMode(Pinetime::Controllers::Settings::WakeUpMode::SingleTap); };
+        if ( i == 2 ) { settingsController.setWakeUpMode(Pinetime::Controllers::Settings::WakeUpMode::DoubleTap); };
+        if ( i == 3 ) { settingsController.setWakeUpMode(Pinetime::Controllers::Settings::WakeUpMode::RaiseWrist); };
+        
+      } else {
+        lv_checkbox_set_checked(cbOption[i], false);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/displayapp/screens/settings/SettingWakeUp.h b/src/displayapp/screens/settings/SettingWakeUp.h
new file mode 100644
index 00000000..99ddd363
--- /dev/null
+++ b/src/displayapp/screens/settings/SettingWakeUp.h
@@ -0,0 +1,30 @@
+#pragma once
+
+#include <cstdint>
+#include <lvgl/lvgl.h>
+#include "components/settings/Settings.h"
+#include "displayapp/screens/Screen.h"
+
+namespace Pinetime {
+
+  namespace Applications {
+    namespace Screens {
+
+      class SettingWakeUp : public Screen{
+        public:
+          SettingWakeUp(DisplayApp* app, Pinetime::Controllers::Settings &settingsController);
+          ~SettingWakeUp() override;
+
+          bool Refresh() override;
+          void UpdateSelected(lv_obj_t *object, lv_event_t event);
+         
+        private:          
+
+          Controllers::Settings& settingsController;
+          uint8_t optionsTotal;
+          lv_obj_t * cbOption[3];
+          
+      };
+    }
+  }
+}
diff --git a/src/displayapp/screens/settings/SettingWatchFace.cpp b/src/displayapp/screens/settings/SettingWatchFace.cpp
new file mode 100644
index 00000000..f763acd4
--- /dev/null
+++ b/src/displayapp/screens/settings/SettingWatchFace.cpp
@@ -0,0 +1,88 @@
+#include "SettingWatchFace.h"
+#include <lvgl/lvgl.h>
+#include "displayapp/DisplayApp.h"
+#include "displayapp/screens/Screen.h"
+#include "displayapp/screens/Symbols.h"
+
+using namespace Pinetime::Applications::Screens;
+
+namespace {
+  static void event_handler(lv_obj_t * obj, lv_event_t event) {
+    SettingWatchFace* screen = static_cast<SettingWatchFace *>(obj->user_data);
+    screen->UpdateSelected(obj, event);
+  }
+}
+
+SettingWatchFace::SettingWatchFace(
+  Pinetime::Applications::DisplayApp *app, Pinetime::Controllers::Settings &settingsController) :
+  Screen(app),
+  settingsController{settingsController}
+{
+
+  lv_obj_t * container1 = lv_cont_create(lv_scr_act(), nullptr);
+
+  //lv_obj_set_style_local_bg_color(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111));
+  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,"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::clock);
+  lv_label_set_align(icon, LV_LABEL_ALIGN_CENTER);
+  lv_obj_align(icon, title, LV_ALIGN_OUT_LEFT_MID, -10, 0);
+
+  optionsTotal = 0;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " Digital face");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.GetClockFace() == 0 ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+
+  optionsTotal++;
+  cbOption[optionsTotal] = lv_checkbox_create(container1, nullptr);
+  lv_checkbox_set_text_static(cbOption[optionsTotal], " Analog face");
+  cbOption[optionsTotal]->user_data = this;
+  lv_obj_set_event_cb(cbOption[optionsTotal], event_handler);  
+  if (settingsController.GetClockFace() == 1 ) {
+    lv_checkbox_set_checked(cbOption[optionsTotal], true);
+  }
+
+  optionsTotal++;
+}
+
+SettingWatchFace::~SettingWatchFace() {
+  lv_obj_clean(lv_scr_act());
+  settingsController.SaveSettings();
+}
+
+bool SettingWatchFace::Refresh() {
+  return running;
+}
+
+
+void SettingWatchFace::UpdateSelected(lv_obj_t *object, lv_event_t event) {
+  if(event == LV_EVENT_VALUE_CHANGED) {
+    for(uint8_t i = 0; i < optionsTotal; i++) {
+      if ( object == cbOption[i] ) {
+        lv_checkbox_set_checked(cbOption[i], true);
+        settingsController.SetClockFace(i);
+      } else {
+        lv_checkbox_set_checked(cbOption[i], false);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/displayapp/screens/settings/SettingWatchFace.h b/src/displayapp/screens/settings/SettingWatchFace.h
new file mode 100644
index 00000000..8c30ed28
--- /dev/null
+++ b/src/displayapp/screens/settings/SettingWatchFace.h
@@ -0,0 +1,30 @@
+#pragma once
+
+#include <cstdint>
+#include <lvgl/lvgl.h>
+#include "components/settings/Settings.h"
+#include "displayapp/screens/Screen.h"
+
+namespace Pinetime {
+
+  namespace Applications {
+    namespace Screens {
+
+      class SettingWatchFace : public Screen{
+        public:
+          SettingWatchFace(DisplayApp* app, Pinetime::Controllers::Settings &settingsController);
+          ~SettingWatchFace() override;
+
+          bool Refresh() override;
+          void UpdateSelected(lv_obj_t *object, lv_event_t event);
+         
+        private:          
+
+          Controllers::Settings& settingsController;
+          uint8_t optionsTotal;
+          lv_obj_t * cbOption[2];
+          
+      };
+    }
+  }
+}
diff --git a/src/displayapp/screens/settings/Settings.cpp b/src/displayapp/screens/settings/Settings.cpp
new file mode 100644
index 00000000..b2825915
--- /dev/null
+++ b/src/displayapp/screens/settings/Settings.cpp
@@ -0,0 +1,69 @@
+#include "Settings.h"
+#include <lvgl/lvgl.h>
+#include <array>
+#include "displayapp/screens/List.h"
+#include "displayapp/Apps.h"
+#include "displayapp/DisplayApp.h"
+#include "displayapp/screens/Symbols.h"
+
+using namespace Pinetime::Applications::Screens;
+
+Settings::Settings(
+  Pinetime::Applications::DisplayApp *app,
+  Pinetime::Controllers::Settings &settingsController) :
+    Screen(app), 
+    settingsController{settingsController},
+    screens{app, 
+      settingsController.GetSettingsMenu(),
+      {
+        [this]() -> std::unique_ptr<Screen> { return CreateScreen1(); },
+        [this]() -> std::unique_ptr<Screen> { return CreateScreen2(); }
+      },
+      Screens::ScreenListModes::UpDown          
+    } {}
+
+Settings::~Settings() {
+  lv_obj_clean(lv_scr_act());
+}
+
+bool Settings::Refresh() {
+  
+  if(running)
+    running = screens.Refresh();
+  return running;
+}
+
+bool Settings::OnTouchEvent(Pinetime::Applications::TouchEvents event) {
+  return screens.OnTouchEvent(event);
+}
+
+std::unique_ptr<Screen> Settings::CreateScreen1() {
+
+  std::array<Screens::List::Applications, 4> applications {
+          {                        
+            {Symbols::sun,    "Display",     Apps::SettingDisplay},
+            {Symbols::clock,  "Wake Up",     Apps::SettingWakeUp},
+            {Symbols::clock,  "Time format", Apps::SettingTimeFormat},
+            {Symbols::clock,  "Watch face",  Apps::SettingWatchFace},
+          }
+
+  };
+
+  return std::unique_ptr<Screen>(new Screens::List(0, 2, app, settingsController, applications));
+}
+
+
+std::unique_ptr<Screen> Settings::CreateScreen2() {
+
+  std::array<Screens::List::Applications, 4> applications {
+          {
+            {Symbols::batteryHalf,  "Battery",   Apps::BatteryInfo},
+            {Symbols::check,        "Firmware",  Apps::FirmwareValidation},
+            {Symbols::list,         "About",     Apps::SysInfo},
+            {"",   "",     Apps::None},
+          }
+
+  };
+
+  return std::unique_ptr<Screen>(new Screens::List(1, 2, app, settingsController, applications));
+}
diff --git a/src/displayapp/screens/settings/Settings.h b/src/displayapp/screens/settings/Settings.h
new file mode 100644
index 00000000..9955e1d4
--- /dev/null
+++ b/src/displayapp/screens/settings/Settings.h
@@ -0,0 +1,37 @@
+#pragma once
+
+#include <cstdint>
+#include "displayapp/screens/Screen.h"
+#include "displayapp/screens/ScreenList.h"
+
+namespace Pinetime {
+
+
+  namespace Applications {
+    namespace Screens {
+
+      class Settings : public Screen{
+        public:
+          Settings(DisplayApp* app,
+          Pinetime::Controllers::Settings &settingsController);
+          ~Settings() override;
+
+          bool Refresh() override;
+          
+          void OnButtonEvent(lv_obj_t *object, lv_event_t event);
+          bool OnTouchEvent(Pinetime::Applications::TouchEvents event) override;
+
+        private:          
+
+          Controllers::Settings& settingsController;
+          
+          ScreenList<2> screens;
+
+          std::unique_ptr<Screen> CreateScreen1();
+          std::unique_ptr<Screen> CreateScreen2();
+
+
+      };
+    }
+  }
+}