Merge branch 'develop' into refresh_rework

Author: Riksu9000

doc/ui/example.png

@@ -0,0 +1,16 @@
+# UI design guidelines
+
+- Align objects all the way to the edge or corner
+- Buttons should generally be at least 50px high
+- Buttons should generally be on the bottom edge
+- Make interactable objects **big**
+- Recommendations for inner padding, aka distance between buttons:
+	- When aligning 4 objects: 4px, e.g. Settings
+	- When aligning 3 objects: 6px, e.g. App list
+	- When aligning 2 objects: 10px, e.g. Quick settings
+- When using a page indicator, leave 8px for it on the right side
+	- It is acceptable to leave 8px on the left side as well to center the content
+- Top bar takes at least 20px + padding
+	- Top bar right icons move 8px to the left when using a page indicator
+
+![example layouts](./ui/example.png)

doc/ui_guidelines.md

@@ -3,7 +3,8 @@
 #include "systemtask/SystemTask.h"
 #include "app_timer.h"
 
-APP_TIMER_DEF(vibTimer);
+APP_TIMER_DEF(shortVibTimer);
+APP_TIMER_DEF(longVibTimer);
 
 using namespace Pinetime::Controllers;
 
@@ -13,19 +14,39 @@ MotorController::MotorController(Controllers::Settings& settingsController) : se
 void MotorController::Init() {
   nrf_gpio_cfg_output(pinMotor);
   nrf_gpio_pin_set(pinMotor);
-  app_timer_create(&vibTimer, APP_TIMER_MODE_SINGLE_SHOT, vibrate);
+  app_timer_init();
+
+  app_timer_create(&shortVibTimer, APP_TIMER_MODE_SINGLE_SHOT, StopMotor);
+  app_timer_create(&longVibTimer, APP_TIMER_MODE_REPEATED, Ring);
 }
 
-void MotorController::SetDuration(uint8_t motorDuration) {
+void MotorController::Ring(void* p_context) {
+  auto* motorController = static_cast<MotorController*>(p_context);
+  motorController->RunForDuration(50);
+}
 
-  if (settingsController.GetVibrationStatus() == Controllers::Settings::Vibration::OFF)
+void MotorController::RunForDuration(uint8_t motorDuration) {
+  if (settingsController.GetVibrationStatus() == Controllers::Settings::Vibration::OFF) {
     return;
+  }
 
   nrf_gpio_pin_clear(pinMotor);
-  /* Start timer for motorDuration miliseconds and timer triggers vibrate() when it finishes*/
-  app_timer_start(vibTimer, APP_TIMER_TICKS(motorDuration), NULL);
+  app_timer_start(shortVibTimer, APP_TIMER_TICKS(motorDuration), nullptr);
+}
+
+void MotorController::StartRinging() {
+  if (settingsController.GetVibrationStatus() == Controllers::Settings::Vibration::OFF) {
+    return;
+  }
+  Ring(this);
+  app_timer_start(longVibTimer, APP_TIMER_TICKS(1000), this);
 }
 
-void MotorController::vibrate(void* p_context) {
+void MotorController::StopRinging() {
+  app_timer_stop(longVibTimer);
   nrf_gpio_pin_set(pinMotor);
-}
+}
+
+void MotorController::StopMotor(void* p_context) {
+  nrf_gpio_pin_set(pinMotor);
+}

src/components/motor/MotorController.cpp

@@ -12,11 +12,14 @@ namespace Pinetime {
     public:
       MotorController(Controllers::Settings& settingsController);
       void Init();
-      void SetDuration(uint8_t motorDuration);
+      void RunForDuration(uint8_t motorDuration);
+      void StartRinging();
+      static void StopRinging();
 
     private:
+      static void Ring(void* p_context);
       Controllers::Settings& settingsController;
-      static void vibrate(void* p_context);
+      static void StopMotor(void* p_context);
     };
   }
 }

src/components/motor/MotorController.h

@@ -336,12 +336,12 @@ void DisplayApp::LoadApp(Apps app, DisplayApp::FullRefreshDirections direction)
 
     case Apps::Notifications:
       currentScreen = std::make_unique<Screens::Notifications>(
-        this, notificationManager, systemTask->nimble().alertService(), Screens::Notifications::Modes::Normal);
+        this, notificationManager, systemTask->nimble().alertService(), motorController, Screens::Notifications::Modes::Normal);
       ReturnApp(Apps::Clock, FullRefreshDirections::Up, TouchEvents::SwipeUp);
       break;
     case Apps::NotificationsPreview:
       currentScreen = std::make_unique<Screens::Notifications>(
-        this, notificationManager, systemTask->nimble().alertService(), Screens::Notifications::Modes::Preview);
+        this, notificationManager, systemTask->nimble().alertService(), motorController, Screens::Notifications::Modes::Preview);
       ReturnApp(Apps::Clock, FullRefreshDirections::Up, TouchEvents::SwipeUp);
       break;
     case Apps::Timer:

src/displayapp/DisplayApp.cpp

@@ -38,8 +38,9 @@ FirmwareValidation::FirmwareValidation(Pinetime::Applications::DisplayApp* app,
     lv_label_set_text(labelIsValidated, "Please #00ff00 Validate# this version or\n#ff0000 Reset# to rollback to the previous version.");
 
     buttonValidate = lv_btn_create(lv_scr_act(), nullptr);
-    lv_obj_align(buttonValidate, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
     buttonValidate->user_data = this;
+    lv_obj_set_size(buttonValidate, 115, 50);
+    lv_obj_align(buttonValidate, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
     lv_obj_set_event_cb(buttonValidate, ButtonEventHandler);
     lv_obj_set_style_local_bg_color(buttonValidate, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x009900));
 
@@ -48,6 +49,7 @@ FirmwareValidation::FirmwareValidation(Pinetime::Applications::DisplayApp* app,
 
     buttonReset = lv_btn_create(lv_scr_act(), nullptr);
     buttonReset->user_data = this;
+    lv_obj_set_size(buttonReset, 115, 50);
     lv_obj_align(buttonReset, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
     lv_obj_set_style_local_bg_color(buttonReset, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x990000));
     lv_obj_set_event_cb(buttonReset, ButtonEventHandler);

src/displayapp/screens/FirmwareValidation.cpp

@@ -6,24 +6,24 @@ Label::Label(uint8_t screenID, uint8_t numScreens, Pinetime::Applications::Displ
   : Screen(app), labelText {labelText} {
 
   if (numScreens > 1) {
-    pageIndicatorBasePoints[0].x = 240 - 1;
-    pageIndicatorBasePoints[0].y = 6;
-    pageIndicatorBasePoints[1].x = 240 - 1;
-    pageIndicatorBasePoints[1].y = 240 - 6;
+    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_obj_set_style_local_line_rounded(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, true);
     lv_line_set_points(pageIndicatorBase, pageIndicatorBasePoints, 2);
 
-    uint16_t indicatorSize = 228 / numScreens;
+    uint16_t indicatorSize = LV_VER_RES / numScreens;
     uint16_t indicatorPos = indicatorSize * screenID;
 
-    pageIndicatorPoints[0].x = 240 - 1;
-    pageIndicatorPoints[0].y = (6 + indicatorPos);
-    pageIndicatorPoints[1].x = 240 - 1;
-    pageIndicatorPoints[1].y = (6 + indicatorPos) + indicatorSize;
+    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);

src/displayapp/screens/Label.cpp

@@ -25,42 +25,38 @@ List::List(uint8_t screenID,
   settingsController.SetSettingsMenu(screenID);
 
   if (numScreens > 1) {
-    pageIndicatorBasePoints[0].x = 240 - 1;
-    pageIndicatorBasePoints[0].y = 6;
-    pageIndicatorBasePoints[1].x = 240 - 1;
-    pageIndicatorBasePoints[1].y = 240 - 6;
+    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_obj_set_style_local_line_rounded(pageIndicatorBase, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, true);
     lv_line_set_points(pageIndicatorBase, pageIndicatorBasePoints, 2);
 
-    uint16_t indicatorSize = 228 / numScreens;
-    uint16_t indicatorPos = indicatorSize * screenID;
+    const uint16_t indicatorSize = LV_VER_RES / numScreens;
+    const uint16_t indicatorPos = indicatorSize * screenID;
 
-    pageIndicatorPoints[0].x = 240 - 1;
-    pageIndicatorPoints[0].y = 6 + indicatorPos;
-    pageIndicatorPoints[1].x = 240 - 1;
-    pageIndicatorPoints[1].y = 6 + indicatorPos + indicatorSize;
+    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_obj_set_style_local_line_rounded(pageIndicator, LV_LINE_PART_MAIN, LV_STATE_DEFAULT, true);
     lv_line_set_points(pageIndicator, pageIndicatorPoints, 2);
   }
 
   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_pad_inner(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 4);
   lv_obj_set_style_local_border_width(container1, LV_CONT_PART_MAIN, LV_STATE_DEFAULT, 0);
 
   lv_obj_set_pos(container1, 0, 0);
-  lv_obj_set_width(container1, LV_HOR_RES - 15);
+  lv_obj_set_width(container1, LV_HOR_RES - 8);
   lv_obj_set_height(container1, LV_VER_RES);
   lv_cont_set_layout(container1, LV_LAYOUT_COLUMN_LEFT);
 
@@ -73,11 +69,11 @@ List::List(uint8_t screenID,
 
       itemApps[i] = lv_btn_create(container1, nullptr);
       lv_obj_set_style_local_bg_opa(itemApps[i], LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20);
-      lv_obj_set_style_local_radius(itemApps[i], LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
+      lv_obj_set_style_local_radius(itemApps[i], LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 57);
       lv_obj_set_style_local_bg_color(itemApps[i], LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA);
 
-      lv_obj_set_width(itemApps[i], LV_HOR_RES - 25);
-      lv_obj_set_height(itemApps[i], 52);
+      lv_obj_set_width(itemApps[i], LV_HOR_RES - 8);
+      lv_obj_set_height(itemApps[i], 57);
       lv_obj_set_event_cb(itemApps[i], ButtonEventHandler);
       lv_btn_set_layout(itemApps[i], LV_LAYOUT_ROW_MID);
       itemApps[i]->user_data = this;

src/displayapp/screens/List.cpp

@@ -86,9 +86,9 @@ void Metronome::Refresh() {
       counter--;
       if (counter == 0) {
         counter = bpb;
-        motorController.SetDuration(90);
+        motorController.RunForDuration(90);
       } else {
-        motorController.SetDuration(30);
+        motorController.RunForDuration(30);
       }
     }
   }

src/displayapp/screens/Metronome.cpp

@@ -50,60 +50,55 @@ inline void lv_img_set_src_arr(lv_obj_t* img, const lv_img_dsc_t* src_img) {
 Music::Music(Pinetime::Applications::DisplayApp* app, Pinetime::Controllers::MusicService& music) : Screen(app), musicService(music) {
   lv_obj_t* label;
 
+  lv_style_init(&btn_style);
+  lv_style_set_radius(&btn_style, LV_STATE_DEFAULT, 20);
+  lv_style_set_bg_color(&btn_style, LV_STATE_DEFAULT, LV_COLOR_AQUA);
+  lv_style_set_bg_opa(&btn_style, LV_STATE_DEFAULT, LV_OPA_20);
+
   btnVolDown = lv_btn_create(lv_scr_act(), nullptr);
   btnVolDown->user_data = this;
   lv_obj_set_event_cb(btnVolDown, event_handler);
-  lv_obj_set_size(btnVolDown, 65, 75);
-  lv_obj_align(btnVolDown, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 15, -10);
-  lv_obj_set_style_local_radius(btnVolDown, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
-  lv_obj_set_style_local_bg_color(btnVolDown, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA);
-  lv_obj_set_style_local_bg_opa(btnVolDown, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20);
+  lv_obj_set_size(btnVolDown, 76, 76);
+  lv_obj_align(btnVolDown, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
+  lv_obj_add_style(btnVolDown, LV_STATE_DEFAULT, &btn_style);
   label = lv_label_create(btnVolDown, nullptr);
   lv_label_set_text(label, Symbols::volumDown);
-  lv_obj_set_hidden(btnVolDown, !displayVolumeButtons);
+  lv_obj_set_hidden(btnVolDown, true);
 
   btnVolUp = lv_btn_create(lv_scr_act(), nullptr);
   btnVolUp->user_data = this;
   lv_obj_set_event_cb(btnVolUp, event_handler);
-  lv_obj_set_size(btnVolUp, 65, 75);
-  lv_obj_align(btnVolUp, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, -15, -10);
-  lv_obj_set_style_local_radius(btnVolUp, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
-  lv_obj_set_style_local_bg_color(btnVolUp, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA);
-  lv_obj_set_style_local_bg_opa(btnVolUp, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20);
+  lv_obj_set_size(btnVolUp, 76, 76);
+  lv_obj_align(btnVolUp, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
+  lv_obj_add_style(btnVolUp, LV_STATE_DEFAULT, &btn_style);
   label = lv_label_create(btnVolUp, nullptr);
   lv_label_set_text(label, Symbols::volumUp);
-  lv_obj_set_hidden(btnVolUp, !displayVolumeButtons);
+  lv_obj_set_hidden(btnVolUp, true);
 
   btnPrev = lv_btn_create(lv_scr_act(), nullptr);
   btnPrev->user_data = this;
   lv_obj_set_event_cb(btnPrev, event_handler);
-  lv_obj_set_size(btnPrev, 65, 75);
-  lv_obj_align(btnPrev, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 15, -10);
-  lv_obj_set_style_local_radius(btnPrev, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
-  lv_obj_set_style_local_bg_color(btnPrev, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA);
-  lv_obj_set_style_local_bg_opa(btnPrev, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20);
+  lv_obj_set_size(btnPrev, 76, 76);
+  lv_obj_align(btnPrev, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
+  lv_obj_add_style(btnPrev, LV_STATE_DEFAULT, &btn_style);
   label = lv_label_create(btnPrev, nullptr);
   lv_label_set_text(label, Symbols::stepBackward);
 
   btnNext = lv_btn_create(lv_scr_act(), nullptr);
   btnNext->user_data = this;
   lv_obj_set_event_cb(btnNext, event_handler);
-  lv_obj_set_size(btnNext, 65, 75);
-  lv_obj_align(btnNext, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, -15, -10);
-  lv_obj_set_style_local_radius(btnNext, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
-  lv_obj_set_style_local_bg_color(btnNext, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA);
-  lv_obj_set_style_local_bg_opa(btnNext, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20);
+  lv_obj_set_size(btnNext, 76, 76);
+  lv_obj_align(btnNext, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0);
+  lv_obj_add_style(btnNext, LV_STATE_DEFAULT, &btn_style);
   label = lv_label_create(btnNext, nullptr);
   lv_label_set_text(label, Symbols::stepForward);
 
   btnPlayPause = lv_btn_create(lv_scr_act(), nullptr);
   btnPlayPause->user_data = this;
   lv_obj_set_event_cb(btnPlayPause, event_handler);
-  lv_obj_set_size(btnPlayPause, 65, 75);
-  lv_obj_align(btnPlayPause, nullptr, LV_ALIGN_IN_BOTTOM_MID, 0, -10);
-  lv_obj_set_style_local_radius(btnPlayPause, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, 20);
-  lv_obj_set_style_local_bg_color(btnPlayPause, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_AQUA);
-  lv_obj_set_style_local_bg_opa(btnPlayPause, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_OPA_20);
+  lv_obj_set_size(btnPlayPause, 76, 76);
+  lv_obj_align(btnPlayPause, nullptr, LV_ALIGN_IN_BOTTOM_MID, 0, 0);
+  lv_obj_add_style(btnPlayPause, LV_STATE_DEFAULT, &btn_style);
   txtPlayPause = lv_label_create(btnPlayPause, nullptr);
   lv_label_set_text(txtPlayPause, Symbols::play);
 
@@ -150,6 +145,7 @@ Music::Music(Pinetime::Applications::DisplayApp* app, Pinetime::Controllers::Mus
 
 Music::~Music() {
   lv_task_del(taskRefresh);
+  lv_style_reset(&btn_style);
   lv_obj_clean(lv_scr_act());
 }
 
@@ -273,21 +269,19 @@ void Music::OnObjectEvent(lv_obj_t* obj, lv_event_t event) {
 bool Music::OnTouchEvent(Pinetime::Applications::TouchEvents event) {
   switch (event) {
     case TouchEvents::SwipeUp: {
-      displayVolumeButtons = true;
-      lv_obj_set_hidden(btnVolDown, !displayVolumeButtons);
-      lv_obj_set_hidden(btnVolUp, !displayVolumeButtons);
+      lv_obj_set_hidden(btnVolDown, false);
+      lv_obj_set_hidden(btnVolUp, false);
 
-      lv_obj_set_hidden(btnNext, displayVolumeButtons);
-      lv_obj_set_hidden(btnPrev, displayVolumeButtons);
+      lv_obj_set_hidden(btnNext, true);
+      lv_obj_set_hidden(btnPrev, true);
       return true;
     }
     case TouchEvents::SwipeDown: {
-      displayVolumeButtons = false;
-      lv_obj_set_hidden(btnNext, displayVolumeButtons);
-      lv_obj_set_hidden(btnPrev, displayVolumeButtons);
+      lv_obj_set_hidden(btnNext, false);
+      lv_obj_set_hidden(btnPrev, false);
 
-      lv_obj_set_hidden(btnVolDown, !displayVolumeButtons);
-      lv_obj_set_hidden(btnVolUp, !displayVolumeButtons);
+      lv_obj_set_hidden(btnVolDown, true);
+      lv_obj_set_hidden(btnVolUp, true);
       return true;
     }
     case TouchEvents::SwipeLeft: {