diff --git a/doc/ui_guidelines.md b/doc/ui_guidelines.md index 0cbd39f5..296497af 100644 --- a/doc/ui_guidelines.md +++ b/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) diff --git a/src/displayapp/lv_pinetime_theme.c b/src/displayapp/lv_pinetime_theme.c index b74b2fd7..deb66a97 100644 --- a/src/displayapp/lv_pinetime_theme.c +++ b/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); diff --git a/src/displayapp/lv_pinetime_theme.h b/src/displayapp/lv_pinetime_theme.h index f914516d..714c4242 100644 --- a/src/displayapp/lv_pinetime_theme.h +++ b/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) diff --git a/src/displayapp/screens/Alarm.cpp b/src/displayapp/screens/Alarm.cpp index b8eaa6d5..32f68b84 100644 --- a/src/displayapp/screens/Alarm.cpp +++ b/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); - btnEnable->user_data = this; - lv_obj_set_event_cb(btnEnable, btnEventHandler); - lv_obj_set_size(btnEnable, 115, 50); - lv_obj_align(btnEnable, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); - txtEnable = lv_label_create(btnEnable, nullptr); - SetEnableButtonState(); + btnStop = lv_btn_create(lv_scr_act(), nullptr); + btnStop->user_data = this; + lv_obj_set_event_cb(btnStop, btnEventHandler); + lv_obj_set_size(btnStop, 120, 50); + lv_obj_align(btnStop, lv_scr_act(), LV_ALIGN_IN_BOTTOM_MID, 0, 0); + lv_obj_set_style_local_bg_color(btnStop, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED); + 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_obj_set_style_local_bg_color(btnEnable, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GREEN); + lv_switch_on(enableSwitch, anim); break; case AlarmController::AlarmState::Not_Set: - lv_label_set_text(txtEnable, "OFF"); - lv_obj_set_style_local_bg_color(btnEnable, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_GRAY); + lv_switch_off(enableSwitch, anim); + 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); } } diff --git a/src/displayapp/screens/Alarm.h b/src/displayapp/screens/Alarm.h index d45fb96c..a7f35232 100644 --- a/src/displayapp/screens/Alarm.h +++ b/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, - *txtMinDown, *txtHrUp, *txtHrDown, *btnRecur, *txtRecur, *btnInfo, *txtInfo; + lv_obj_t *time, *lblampm, *btnStop, *txtStop, *btnMinutesUp, *btnMinutesDown, *btnHoursUp, *btnHoursDown, *txtMinUp, + *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();