Ui update
This commit is contained in:
parent
df8d396472
commit
e0d01411d7
14
doc/ui_guidelines.md
Normal file
14
doc/ui_guidelines.md
Normal file
|
@ -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
|
|
@ -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_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));
|
||||
|
||||
|
@ -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_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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
@ -147,6 +142,7 @@ Music::Music(Pinetime::Applications::DisplayApp* app, Pinetime::Controllers::Mus
|
|||
}
|
||||
|
||||
Music::~Music() {
|
||||
lv_style_reset(&btn_style);
|
||||
lv_obj_clean(lv_scr_act());
|
||||
}
|
||||
|
||||
|
@ -272,21 +268,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: {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -35,37 +35,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);
|
||||
}
|
||||
|
||||
|
@ -85,7 +83,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);
|
||||
|
@ -93,6 +91,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) {
|
||||
|
|
|
@ -67,12 +67,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
|
||||
|
||||
|
|
|
@ -35,7 +35,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));
|
||||
|
@ -50,7 +50,7 @@ WatchFaceDigital::WatchFaceDigital(DisplayApp* app,
|
|||
notificationIcon = lv_label_create(lv_scr_act(), nullptr);
|
||||
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);
|
||||
|
@ -75,7 +75,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));
|
||||
|
@ -85,7 +85,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));
|
||||
|
@ -110,7 +110,7 @@ bool WatchFaceDigital::Refresh() {
|
|||
if (bleState.IsUpdated()) {
|
||||
lv_label_set_text(bleIcon, BleIcon::GetIcon(bleState.Get()));
|
||||
}
|
||||
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);
|
||||
|
||||
|
@ -208,7 +208,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);
|
||||
}
|
||||
|
||||
|
@ -216,7 +216,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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -44,6 +44,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;
|
||||
|
|
Loading…
Reference in a new issue