Skip to content

Update UI to make better use of the small screen #429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
JF002 merged 6 commits into from
Aug 15, 2021
Merged

Update UI to make better use of the small screen #429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d5b6858
Ui update
Riksu9000 Jun 13, 2021
82ff315
Add image with example layouts
Riksu9000 Jun 13, 2021
b59c5ca
Merge branch 'develop' into ui_update
Riksu9000 Jul 24, 2021
7858caa
Adjust previously missed scrollbar and firmware validation buttons
Riksu9000 Jul 24, 2021
bef52da
Clean up using variables
Riksu9000 Jul 29, 2021
9b15560
Adjust inner padding in applist
Riksu9000 Jul 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added doc/ui/example.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions doc/ui_guidelines.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
4 changes: 3 additions & 1 deletion src/displayapp/screens/FirmwareValidation.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));

Expand All @@ -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);
Expand Down
18 changes: 9 additions & 9 deletions src/displayapp/screens/Label.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
34 changes: 15 additions & 19 deletions src/displayapp/screens/List.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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;
Expand Down
70 changes: 32 additions & 38 deletions src/displayapp/screens/Music.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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());
}

Expand Down Expand Up @@ -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: {
Expand All @@ -303,4 +297,4 @@ bool Music::OnTouchEvent(Pinetime::Applications::TouchEvents event) {
return true;
}
}
}
}
3 changes: 2 additions & 1 deletion src/displayapp/screens/Music.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
30 changes: 15 additions & 15 deletions src/displayapp/screens/Tile.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -83,14 +81,16 @@ 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);
lv_obj_set_style_local_bg_opa(btnm1, LV_BTNMATRIX_PART_BTN, LV_STATE_DEFAULT, LV_OPA_20);
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, 10);

for (uint8_t i = 0; i < 6; i++) {
if (applications[i].application == Apps::None) {
Expand Down
4 changes: 2 additions & 2 deletions src/displayapp/screens/WatchFaceAnalog.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,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

Expand Down
Loading