Alarm: Change checkable button for a switch

doc/ui_guidelines.md

@@ -9,5 +9,6 @@
 - Top bar takes at least 20px + padding
 	- Top bar right icons move 8px to the left when using a page indicator
 - A black background helps to hide the screen border, allowing the UI to look less cramped when utilizing the entire display area.
+- A switch should be twice as wide as it is tall.
 
 ![example layouts](./ui/example.png)

src/displayapp/lv_pinetime_theme.c

@@ -199,17 +199,16 @@ static void basic_init(void) {
 
   style_init_reset(&style_sw_bg);
   lv_style_set_bg_opa(&style_sw_bg, LV_STATE_DEFAULT, LV_OPA_COVER);
-  lv_style_set_bg_color(&style_sw_bg, LV_STATE_DEFAULT, LV_PINETIME_LIGHT_GRAY);
+  lv_style_set_bg_color(&style_sw_bg, LV_STATE_DEFAULT, LV_PINETIME_BLUE);
   lv_style_set_radius(&style_sw_bg, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE);
-  lv_style_set_value_color(&style_sw_bg, LV_STATE_DEFAULT, LV_PINETIME_BLUE);
 
   style_init_reset(&style_sw_indic);
   lv_style_set_bg_opa(&style_sw_indic, LV_STATE_DEFAULT, LV_OPA_COVER);
-  lv_style_set_bg_color(&style_sw_indic, LV_STATE_DEFAULT, LV_PINETIME_GREEN);
+  lv_style_set_bg_color(&style_sw_indic, LV_STATE_DEFAULT, LV_COLOR_GREEN);
 
   style_init_reset(&style_sw_knob);
   lv_style_set_bg_opa(&style_sw_knob, LV_STATE_DEFAULT, LV_OPA_COVER);
-  lv_style_set_bg_color(&style_sw_knob, LV_STATE_DEFAULT, LV_PINETIME_WHITE);
+  lv_style_set_bg_color(&style_sw_knob, LV_STATE_DEFAULT, LV_COLOR_WHITE);
   lv_style_set_radius(&style_sw_knob, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE);
   lv_style_set_pad_top(&style_sw_knob, LV_STATE_DEFAULT, -4);
   lv_style_set_pad_bottom(&style_sw_knob, LV_STATE_DEFAULT, -4);

src/displayapp/lv_pinetime_theme.h

@@ -23,7 +23,7 @@ extern "C" {
 #define LV_PINETIME_LIGHT      lv_color_hex(0xf3f8fe)
 #define LV_PINETIME_GRAY       lv_color_hex(0x8a8a8a)
 #define LV_PINETIME_LIGHT_GRAY lv_color_hex(0xc4c4c4)
-#define LV_PINETIME_BLUE       lv_color_hex(0x2f3243) // 006fb6
+#define LV_PINETIME_BLUE       lv_color_hex(0x2f3540)
 #define LV_PINETIME_GREEN      lv_color_hex(0x4cb242)
 #define LV_PINETIME_RED        lv_color_hex(0xd51732)
 

src/displayapp/screens/Alarm.cpp

@@ -28,7 +28,7 @@ static void btnEventHandler(lv_obj_t* obj, lv_event_t event) {
 }
 
 Alarm::Alarm(DisplayApp* app, Controllers::AlarmController& alarmController, Pinetime::Controllers::Settings& settingsController)
-  : Screen(app), running {true}, alarmController {alarmController}, settingsController {settingsController} {
+  : Screen(app), alarmController {alarmController}, settingsController {settingsController} {
 
   time = lv_label_create(lv_scr_act(), nullptr);
   lv_obj_set_style_local_text_font(time, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &jetbrains_mono_76);
@@ -79,13 +79,15 @@ Alarm::Alarm(DisplayApp* app, Controllers::AlarmController& alarmController, Pin
   txtMinDown = lv_label_create(btnMinutesDown, nullptr);
   lv_label_set_text_static(txtMinDown, "-");
 
-  btnEnable = lv_btn_create(lv_scr_act(), nullptr);
+  btnStop = lv_btn_create(lv_scr_act(), nullptr);
-  btnEnable->user_data = this;
+  btnStop->user_data = this;
-  lv_obj_set_event_cb(btnEnable, btnEventHandler);
+  lv_obj_set_event_cb(btnStop, btnEventHandler);
-  lv_obj_set_size(btnEnable, 115, 50);
+  lv_obj_set_size(btnStop, 120, 50);
-  lv_obj_align(btnEnable, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 0, 0);
+  lv_obj_align(btnStop, lv_scr_act(), LV_ALIGN_IN_BOTTOM_MID, 0, 0);
-  txtEnable = lv_label_create(btnEnable, nullptr);
+  lv_obj_set_style_local_bg_color(btnStop, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED);
-  SetEnableButtonState();
+  txtStop = lv_label_create(btnStop, nullptr);
+  lv_label_set_text_static(txtStop, Symbols::stop);
+  lv_obj_set_hidden(btnStop, true);
 
   btnRecur = lv_btn_create(lv_scr_act(), nullptr);
   btnRecur->user_data = this;
@@ -103,6 +105,13 @@ Alarm::Alarm(DisplayApp* app, Controllers::AlarmController& alarmController, Pin
   txtInfo = lv_label_create(btnInfo, nullptr);
   lv_label_set_text_static(txtInfo, "i");
 
+  enableSwitch = lv_switch_create(lv_scr_act(), nullptr);
+  enableSwitch->user_data = this;
+  lv_obj_set_event_cb(enableSwitch, btnEventHandler);
+  lv_obj_set_size(enableSwitch, 100, 50);
+  // Align to the center of 115px from edge
+  lv_obj_align(enableSwitch, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 7, 0);
+
   UpdateAlarmTime();
 }
 
@@ -113,15 +122,12 @@ Alarm::~Alarm() {
 void Alarm::OnButtonEvent(lv_obj_t* obj, lv_event_t event) {
   using Pinetime::Controllers::AlarmController;
   if (event == LV_EVENT_CLICKED) {
-    if (obj == btnEnable) {
+    if (obj == btnStop) {
       if (alarmController.State() == AlarmController::AlarmState::Alerting) {
         alarmController.StopAlerting();
-      } else if (alarmController.State() == AlarmController::AlarmState::Set) {
-        alarmController.DisableAlarm();
-      } else {
-        alarmController.ScheduleAlarm();
       }
-      SetEnableButtonState();
+      SetSwitchState(LV_ANIM_OFF);
+      StopAlerting();
       return;
     }
     if (obj == btnInfo) {
@@ -132,11 +138,19 @@ void Alarm::OnButtonEvent(lv_obj_t* obj, lv_event_t event) {
       HideInfo();
       return;
     }
+    if (obj == enableSwitch) {
+      if (lv_switch_get_state(enableSwitch)) {
+        alarmController.ScheduleAlarm();
+      } else {
+        alarmController.DisableAlarm();
+      }
+      return;
+    }
     // If any other button was pressed, disable the alarm
     // this is to make it clear that the alarm won't be set until it is turned back on
     if (alarmController.State() == AlarmController::AlarmState::Set) {
       alarmController.DisableAlarm();
-      SetEnableButtonState();
+      lv_switch_off(enableSwitch, LV_ANIM_ON);
     }
     if (obj == btnMinutesUp) {
       if (alarmMinutes >= 59) {
@@ -215,22 +229,27 @@ void Alarm::UpdateAlarmTime() {
 }
 
 void Alarm::SetAlerting() {
-  SetEnableButtonState();
+  lv_obj_set_hidden(enableSwitch, true);
+  lv_obj_set_hidden(btnRecur, true);
+  lv_obj_set_hidden(btnStop, false);
 }
 
-void Alarm::SetEnableButtonState() {
+void Alarm::StopAlerting() {
+  lv_obj_set_hidden(enableSwitch, false);
+  lv_obj_set_hidden(btnRecur, false);
+  lv_obj_set_hidden(btnStop, true);
+}
+
+void Alarm::SetSwitchState(lv_anim_enable_t anim) {
   switch (alarmController.State()) {
     case AlarmController::AlarmState::Set:
-      lv_label_set_text(txtEnable, "ON");
+      lv_switch_on(enableSwitch, anim);
-      lv_obj_set_style_local_bg_color(btnEnable, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GREEN);
       break;
     case AlarmController::AlarmState::Not_Set:
-      lv_label_set_text(txtEnable, "OFF");
+      lv_switch_off(enableSwitch, anim);
-      lv_obj_set_style_local_bg_color(btnEnable, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GRAY);
+      break;
+    default:
       break;
-    case AlarmController::AlarmState::Alerting:
-      lv_label_set_text(txtEnable, Symbols::stop);
-      lv_obj_set_style_local_bg_color(btnEnable, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED);
   }
 }
 

src/displayapp/screens/Alarm.h

@@ -34,21 +34,21 @@ namespace Pinetime {
         bool OnButtonPushed() override;
 
       private:
-        bool running;
         uint8_t alarmHours;
         uint8_t alarmMinutes;
         Controllers::AlarmController& alarmController;
         Controllers::Settings& settingsController;
 
-        lv_obj_t *time, *lblampm, *btnEnable, *txtEnable, *btnMinutesUp, *btnMinutesDown, *btnHoursUp, *btnHoursDown, *txtMinUp,
+        lv_obj_t *time, *lblampm, *btnStop, *txtStop, *btnMinutesUp, *btnMinutesDown, *btnHoursUp, *btnHoursDown, *txtMinUp,
-          *txtMinDown, *txtHrUp, *txtHrDown, *btnRecur, *txtRecur, *btnInfo, *txtInfo;
+          *txtMinDown, *txtHrUp, *txtHrDown, *btnRecur, *txtRecur, *btnInfo, *txtInfo, *enableSwitch;
         lv_obj_t* txtMessage = nullptr;
         lv_obj_t* btnMessage = nullptr;
 
         enum class EnableButtonState { On, Off, Alerting };
-        void SetEnableButtonState();
         void SetRecurButtonState();
+        void SetSwitchState(lv_anim_enable_t anim);
         void SetAlarm();
+        void StopAlerting();
         void ShowInfo();
         void HideInfo();
         void ToggleRecurrence();