From d5b68583a49dd44caffdc13382ac63441835c6be Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Sun, 13 Jun 2021 12:47:12 +0300 Subject: [PATCH 1/5] Ui update --- doc/ui_guidelines.md | 14 ++++ src/displayapp/screens/FirmwareValidation.cpp | 4 +- src/displayapp/screens/List.cpp | 34 ++++----- src/displayapp/screens/Music.cpp | 70 +++++++++---------- src/displayapp/screens/Music.h | 3 +- src/displayapp/screens/Tile.cpp | 30 ++++---- src/displayapp/screens/WatchFaceAnalog.cpp | 6 +- src/displayapp/screens/WatchFaceDigital.cpp | 14 ++-- .../screens/settings/QuickSettings.cpp | 47 ++++++------- .../screens/settings/QuickSettings.h | 2 + 10 files changed, 115 insertions(+), 109 deletions(-) create mode 100644 doc/ui_guidelines.md diff --git a/doc/ui_guidelines.md b/doc/ui_guidelines.md new file mode 100644 index 0000000000..9b05ce64db --- /dev/null +++ b/doc/ui_guidelines.md @@ -0,0 +1,14 @@ +# 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 diff --git a/src/displayapp/screens/FirmwareValidation.cpp b/src/displayapp/screens/FirmwareValidation.cpp index ad37a3df4b..2217fc3839 100644 --- a/src/displayapp/screens/FirmwareValidation.cpp +++ b/src/displayapp/screens/FirmwareValidation.cpp @@ -50,8 +50,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_height(buttonValidate, 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)); @@ -60,6 +61,7 @@ FirmwareValidation::FirmwareValidation(Pinetime::Applications::DisplayApp* app, buttonReset = lv_btn_create(lv_scr_act(), nullptr); buttonReset->user_data = this; + lv_obj_set_height(buttonReset, 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); diff --git a/src/displayapp/screens/List.cpp b/src/displayapp/screens/List.cpp index b4f4d2cfff..eb53820b3d 100644 --- a/src/displayapp/screens/List.cpp +++ b/src/displayapp/screens/List.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; diff --git a/src/displayapp/screens/Music.cpp b/src/displayapp/screens/Music.cpp index 9f10f508a0..ba6c7308f3 100644 --- a/src/displayapp/screens/Music.cpp +++ b/src/displayapp/screens/Music.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); @@ -149,6 +144,7 @@ Music::Music(Pinetime::Applications::DisplayApp* app, Pinetime::Controllers::Mus } Music::~Music() { + lv_style_reset(&btn_style); lv_obj_clean(lv_scr_act()); } @@ -274,21 +270,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: { @@ -303,4 +297,4 @@ bool Music::OnTouchEvent(Pinetime::Applications::TouchEvents event) { return true; } } -} \ No newline at end of file +} diff --git a/src/displayapp/screens/Music.h b/src/displayapp/screens/Music.h index ef8f1fec7f..00d3ad9275 100644 --- a/src/displayapp/screens/Music.h +++ b/src/displayapp/screens/Music.h @@ -57,10 +57,11 @@ namespace Pinetime { lv_obj_t* imgDiscAnim; lv_obj_t* txtTrackDuration; + lv_style_t btn_style; + /** For the spinning disc animation */ bool frameB; - bool displayVolumeButtons = false; Pinetime::Controllers::MusicService& musicService; std::string artist; diff --git a/src/displayapp/screens/Tile.cpp b/src/displayapp/screens/Tile.cpp index ec36af3862..8e0f831ad4 100644 --- a/src/displayapp/screens/Tile.cpp +++ b/src/displayapp/screens/Tile.cpp @@ -33,37 +33,35 @@ Tile::Tile(uint8_t screenID, 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, nullptr, LV_ALIGN_IN_TOP_LEFT, 15, 6); + lv_obj_align(label_time, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 0); // Battery 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, 6); + lv_obj_align(batteryIcon, nullptr, LV_ALIGN_IN_TOP_RIGHT, -8, 0); 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(), nullptr); 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(), nullptr); 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); } @@ -83,7 +81,7 @@ Tile::Tile(uint8_t screenID, btnm1 = lv_btnmatrix_create(lv_scr_act(), nullptr); lv_btnmatrix_set_map(btnm1, btnmMap); - lv_obj_set_size(btnm1, LV_HOR_RES - 10, LV_VER_RES - 60); + lv_obj_set_size(btnm1, LV_HOR_RES - 16, LV_VER_RES - 60); lv_obj_align(btnm1, NULL, LV_ALIGN_CENTER, 0, 10); lv_obj_set_style_local_radius(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, 20); @@ -91,6 +89,8 @@ Tile::Tile(uint8_t screenID, lv_obj_set_style_local_bg_color(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, LV_COLOR_AQUA); lv_obj_set_style_local_bg_opa(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DISABLED, LV_OPA_20); lv_obj_set_style_local_bg_color(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DISABLED, lv_color_hex(0x111111)); + lv_obj_set_style_local_pad_all(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 0); + lv_obj_set_style_local_pad_inner(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 6); for (uint8_t i = 0; i < 6; i++) { if (applications[i].application == Apps::None) { diff --git a/src/displayapp/screens/WatchFaceAnalog.cpp b/src/displayapp/screens/WatchFaceAnalog.cpp index 02f1fc2acf..dfe49b14bf 100644 --- a/src/displayapp/screens/WatchFaceAnalog.cpp +++ b/src/displayapp/screens/WatchFaceAnalog.cpp @@ -51,12 +51,12 @@ WatchFaceAnalog::WatchFaceAnalog(Pinetime::Applications::DisplayApp* app, batteryIcon = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text(batteryIcon, Symbols::batteryHalf); - lv_obj_align(batteryIcon, NULL, LV_ALIGN_IN_BOTTOM_RIGHT, -8, -4); + lv_obj_align(batteryIcon, NULL, LV_ALIGN_IN_TOP_RIGHT, 0, 0); notificationIcon = lv_label_create(lv_scr_act(), NULL); lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x00FF00)); lv_label_set_text(notificationIcon, NotificationIcon::GetIcon(false)); - lv_obj_align(notificationIcon, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 8, -4); + lv_obj_align(notificationIcon, NULL, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); // Date - Day / Week day @@ -202,4 +202,4 @@ bool WatchFaceAnalog::Refresh() { } return true; -} \ No newline at end of file +} diff --git a/src/displayapp/screens/WatchFaceDigital.cpp b/src/displayapp/screens/WatchFaceDigital.cpp index f1285eaf35..cecf25acaa 100644 --- a/src/displayapp/screens/WatchFaceDigital.cpp +++ b/src/displayapp/screens/WatchFaceDigital.cpp @@ -44,7 +44,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app, batteryIcon = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text(batteryIcon, Symbols::batteryFull); - lv_obj_align(batteryIcon, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, -5, 2); + lv_obj_align(batteryIcon, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, 0, 0); batteryPlug = lv_label_create(lv_scr_act(), nullptr); lv_obj_set_style_local_text_color(batteryPlug, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0xFF0000)); @@ -59,7 +59,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app, notificationIcon = lv_label_create(lv_scr_act(), NULL); lv_obj_set_style_local_text_color(notificationIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x00FF00)); lv_label_set_text(notificationIcon, NotificationIcon::GetIcon(false)); - lv_obj_align(notificationIcon, nullptr, LV_ALIGN_IN_TOP_LEFT, 10, 0); + lv_obj_align(notificationIcon, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 0); label_date = lv_label_create(lv_scr_act(), nullptr); lv_obj_align(label_date, lv_scr_act(), LV_ALIGN_CENTER, 0, 60); @@ -84,7 +84,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app, heartbeatIcon = lv_label_create(lv_scr_act(), nullptr); lv_label_set_text(heartbeatIcon, Symbols::heartBeat); lv_obj_set_style_local_text_color(heartbeatIcon, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0xCE1B1B)); - lv_obj_align(heartbeatIcon, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 5, -2); + lv_obj_align(heartbeatIcon, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); heartbeatValue = lv_label_create(lv_scr_act(), nullptr); lv_obj_set_style_local_text_color(heartbeatValue, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0xCE1B1B)); @@ -94,7 +94,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app, 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(0x00FFE7)); lv_label_set_text(stepValue, "0"); - lv_obj_align(stepValue, lv_scr_act(), LV_ALIGN_IN_BOTTOM_RIGHT, -5, -2); + lv_obj_align(stepValue, lv_scr_act(), LV_ALIGN_IN_BOTTOM_RIGHT, 0, 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(0x00FFE7)); @@ -123,7 +123,7 @@ bool WatchFaceDigital::Refresh() { lv_label_set_text(bleIcon, BleIcon::GetIcon(false)); } } - lv_obj_align(batteryIcon, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, -5, 5); + lv_obj_align(batteryIcon, lv_scr_act(), LV_ALIGN_IN_TOP_RIGHT, 0, 0); lv_obj_align(batteryPlug, batteryIcon, LV_ALIGN_OUT_LEFT_MID, -5, 0); lv_obj_align(bleIcon, batteryPlug, LV_ALIGN_OUT_LEFT_MID, -5, 0); @@ -229,7 +229,7 @@ bool WatchFaceDigital::Refresh() { lv_label_set_text_static(heartbeatValue, ""); } - lv_obj_align(heartbeatIcon, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 5, -2); + lv_obj_align(heartbeatIcon, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); lv_obj_align(heartbeatValue, heartbeatIcon, LV_ALIGN_OUT_RIGHT_MID, 5, 0); } @@ -237,7 +237,7 @@ bool WatchFaceDigital::Refresh() { 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_RIGHT, -5, -2); + lv_obj_align(stepValue, lv_scr_act(), LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0); lv_obj_align(stepIcon, stepValue, LV_ALIGN_OUT_LEFT_MID, -5, 0); } diff --git a/src/displayapp/screens/settings/QuickSettings.cpp b/src/displayapp/screens/settings/QuickSettings.cpp index 5db7468c0f..b7720cc1d6 100644 --- a/src/displayapp/screens/settings/QuickSettings.cpp +++ b/src/displayapp/screens/settings/QuickSettings.cpp @@ -30,27 +30,29 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, motorController{motorController}, settingsController {settingsController} { + // This is the distance (padding) between all objects on this screen. + const int innerDistance = 10; + // 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); + lv_obj_align(label_time, lv_scr_act(), LV_ALIGN_IN_TOP_LEFT, 0, 0); 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_align(batteryIcon, nullptr, LV_ALIGN_IN_TOP_RIGHT, 0, 0); - lv_obj_t* lbl_btn; + lv_style_init(&btn_style); + lv_style_set_radius(&btn_style, LV_STATE_DEFAULT, (LV_VER_RES - 20 - 2 * innerDistance) / 8); + lv_style_set_bg_color(&btn_style, LV_STATE_DEFAULT, lv_color_hex(0x111111)); 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); + lv_obj_add_style(btn1, LV_BTN_PART_MAIN, &btn_style); + lv_obj_set_size(btn1, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); + lv_obj_align(btn1, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 20 + innerDistance); 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); @@ -59,12 +61,11 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, 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); + lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &btn_style); + lv_obj_set_size(btn2, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); + lv_obj_align(btn2, nullptr, LV_ALIGN_IN_TOP_RIGHT, 0, 20 + innerDistance); + lv_obj_t* lbl_btn; 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); @@ -72,14 +73,11 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, 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_add_style(btn3, LV_BTN_PART_MAIN, &btn_style); 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); + lv_obj_set_size(btn3, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); + lv_obj_align(btn3, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); 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); @@ -94,11 +92,9 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, 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); + lv_obj_add_style(btn4, LV_BTN_PART_MAIN, &btn_style); + lv_obj_set_size(btn4, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); + lv_obj_align(btn4, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0); 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); @@ -114,6 +110,7 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, } QuickSettings::~QuickSettings() { + lv_style_reset(&btn_style); lv_task_del(taskUpdate); lv_obj_clean(lv_scr_act()); settingsController.SaveSettings(); diff --git a/src/displayapp/screens/settings/QuickSettings.h b/src/displayapp/screens/settings/QuickSettings.h index a14f46bf32..d4f621f313 100644 --- a/src/displayapp/screens/settings/QuickSettings.h +++ b/src/displayapp/screens/settings/QuickSettings.h @@ -45,6 +45,8 @@ namespace Pinetime { lv_obj_t* batteryIcon; lv_obj_t* label_time; + lv_style_t btn_style; + lv_obj_t* btn1; lv_obj_t* btn1_lvl; lv_obj_t* btn2; From 82ff315f98874d51fd38dcfac74883642a61603f Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Sun, 13 Jun 2021 17:21:03 +0300 Subject: [PATCH 2/5] Add image with example layouts --- doc/ui/example.png | Bin 0 -> 10642 bytes doc/ui_guidelines.md | 2 ++ 2 files changed, 2 insertions(+) create mode 100644 doc/ui/example.png diff --git a/doc/ui/example.png b/doc/ui/example.png new file mode 100644 index 0000000000000000000000000000000000000000..2f6cb789212631bdf4378085a401272b40ab6ca3 GIT binary patch literal 10642 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 Date: Sat, 24 Jul 2021 21:46:55 +0300 Subject: [PATCH 3/5] Adjust previously missed scrollbar and firmware validation buttons --- src/displayapp/screens/FirmwareValidation.cpp | 4 ++-- src/displayapp/screens/Label.cpp | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/displayapp/screens/FirmwareValidation.cpp b/src/displayapp/screens/FirmwareValidation.cpp index da9d04f2aa..233ebd5b5f 100644 --- a/src/displayapp/screens/FirmwareValidation.cpp +++ b/src/displayapp/screens/FirmwareValidation.cpp @@ -39,7 +39,7 @@ FirmwareValidation::FirmwareValidation(Pinetime::Applications::DisplayApp* app, buttonValidate = lv_btn_create(lv_scr_act(), nullptr); buttonValidate->user_data = this; - lv_obj_set_height(buttonValidate, 50); + 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)); @@ -49,7 +49,7 @@ FirmwareValidation::FirmwareValidation(Pinetime::Applications::DisplayApp* app, buttonReset = lv_btn_create(lv_scr_act(), nullptr); buttonReset->user_data = this; - lv_obj_set_height(buttonReset, 50); + 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); diff --git a/src/displayapp/screens/Label.cpp b/src/displayapp/screens/Label.cpp index 0132dbd223..f724fd48f8 100644 --- a/src/displayapp/screens/Label.cpp +++ b/src/displayapp/screens/Label.cpp @@ -6,10 +6,10 @@ 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); @@ -17,13 +17,13 @@ Label::Label(uint8_t screenID, uint8_t numScreens, Pinetime::Applications::Displ 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); From bef52dac2e1f84529b008b0592215a0b94786d36 Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Thu, 29 Jul 2021 21:25:03 +0300 Subject: [PATCH 4/5] Clean up using variables --- .../screens/settings/QuickSettings.cpp | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/src/displayapp/screens/settings/QuickSettings.cpp b/src/displayapp/screens/settings/QuickSettings.cpp index 88c97a9c2f..73e33d5b97 100644 --- a/src/displayapp/screens/settings/QuickSettings.cpp +++ b/src/displayapp/screens/settings/QuickSettings.cpp @@ -31,7 +31,7 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, settingsController {settingsController} { // This is the distance (padding) between all objects on this screen. - const int innerDistance = 10; + static constexpr uint8_t innerDistance = 10; // Time label_time = lv_label_create(lv_scr_act(), nullptr); @@ -43,16 +43,22 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, lv_label_set_text(batteryIcon, BatteryIcon::GetBatteryIcon(batteryController.PercentRemaining())); lv_obj_align(batteryIcon, nullptr, LV_ALIGN_IN_TOP_RIGHT, 0, 0); + static constexpr uint8_t barHeight = 20 + innerDistance; + static constexpr uint8_t buttonHeight = (LV_VER_RES_MAX - barHeight - innerDistance) / 2; + static constexpr uint8_t buttonWidth = (LV_HOR_RES_MAX - innerDistance) / 2; // wide buttons + //static constexpr uint8_t buttonWidth = buttonHeight; // square buttons + static constexpr uint8_t buttonXOffset = (LV_HOR_RES_MAX - buttonWidth * 2 - innerDistance) / 2; + lv_style_init(&btn_style); - lv_style_set_radius(&btn_style, LV_STATE_DEFAULT, (LV_VER_RES - 20 - 2 * innerDistance) / 8); + lv_style_set_radius(&btn_style, LV_STATE_DEFAULT, buttonHeight / 4); lv_style_set_bg_color(&btn_style, LV_STATE_DEFAULT, lv_color_hex(0x111111)); btn1 = lv_btn_create(lv_scr_act(), nullptr); btn1->user_data = this; lv_obj_set_event_cb(btn1, ButtonEventHandler); lv_obj_add_style(btn1, LV_BTN_PART_MAIN, &btn_style); - lv_obj_set_size(btn1, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); - lv_obj_align(btn1, nullptr, LV_ALIGN_IN_TOP_LEFT, 0, 20 + innerDistance); + lv_obj_set_size(btn1, buttonWidth, buttonHeight); + lv_obj_align(btn1, nullptr, LV_ALIGN_IN_TOP_LEFT, buttonXOffset, barHeight); 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); @@ -62,8 +68,8 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, btn2->user_data = this; lv_obj_set_event_cb(btn2, ButtonEventHandler); lv_obj_add_style(btn2, LV_BTN_PART_MAIN, &btn_style); - lv_obj_set_size(btn2, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); - lv_obj_align(btn2, nullptr, LV_ALIGN_IN_TOP_RIGHT, 0, 20 + innerDistance); + lv_obj_set_size(btn2, buttonWidth, buttonHeight); + lv_obj_align(btn2, nullptr, LV_ALIGN_IN_TOP_RIGHT, - buttonXOffset, barHeight); lv_obj_t* lbl_btn; lbl_btn = lv_label_create(btn2, nullptr); @@ -76,8 +82,8 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, lv_btn_set_checkable(btn3, true); lv_obj_add_style(btn3, LV_BTN_PART_MAIN, &btn_style); lv_obj_set_style_local_bg_color(btn3, LV_BTN_PART_MAIN, LV_STATE_CHECKED, LV_COLOR_GREEN); - lv_obj_set_size(btn3, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); - lv_obj_align(btn3, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); + lv_obj_set_size(btn3, buttonWidth, buttonHeight); + lv_obj_align(btn3, nullptr, LV_ALIGN_IN_BOTTOM_LEFT, buttonXOffset, 0); 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); @@ -93,8 +99,8 @@ QuickSettings::QuickSettings(Pinetime::Applications::DisplayApp* app, btn4->user_data = this; lv_obj_set_event_cb(btn4, ButtonEventHandler); lv_obj_add_style(btn4, LV_BTN_PART_MAIN, &btn_style); - lv_obj_set_size(btn4, (LV_HOR_RES - innerDistance) / 2, (LV_VER_RES - 20 - 2 * innerDistance) / 2); - lv_obj_align(btn4, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, 0, 0); + lv_obj_set_size(btn4, buttonWidth, buttonHeight); + lv_obj_align(btn4, nullptr, LV_ALIGN_IN_BOTTOM_RIGHT, - buttonXOffset, 0); 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); From 9b15560cd1446d2025b226a59a32551d8f69148c Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Thu, 29 Jul 2021 21:49:06 +0300 Subject: [PATCH 5/5] Adjust inner padding in applist --- src/displayapp/screens/Tile.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/displayapp/screens/Tile.cpp b/src/displayapp/screens/Tile.cpp index 0970b9a112..8d9b612f1e 100644 --- a/src/displayapp/screens/Tile.cpp +++ b/src/displayapp/screens/Tile.cpp @@ -90,7 +90,7 @@ Tile::Tile(uint8_t screenID, lv_obj_set_style_local_bg_opa(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DISABLED, LV_OPA_20); lv_obj_set_style_local_bg_color(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DISABLED, lv_color_hex(0x111111)); lv_obj_set_style_local_pad_all(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 0); - lv_obj_set_style_local_pad_inner(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 6); + lv_obj_set_style_local_pad_inner(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, 10); for (uint8_t i = 0; i < 6; i++) { if (applications[i].application == Apps::None) {