From a3aa831bdc998f60788e902f1f16eb7aebbbea99 Mon Sep 17 00:00:00 2001 From: Riku Isokoski Date: Sun, 30 Jan 2022 14:38:51 +0200 Subject: [PATCH] Style fixes --- src/displayapp/fonts/README.md | 2 +- src/displayapp/fonts/jetbrains_mono_bold_20.c | 75 ++++---- src/displayapp/lv_pinetime_theme.c | 166 ++++++------------ src/displayapp/lv_pinetime_theme.h | 12 +- src/displayapp/screens/Metronome.cpp | 3 +- src/displayapp/screens/Steps.cpp | 2 +- src/displayapp/screens/StopWatch.cpp | 2 - src/displayapp/screens/Tile.cpp | 6 +- 8 files changed, 108 insertions(+), 160 deletions(-) diff --git a/src/displayapp/fonts/README.md b/src/displayapp/fonts/README.md index 8a26084613..40da1206e5 100644 --- a/src/displayapp/fonts/README.md +++ b/src/displayapp/fonts/README.md @@ -13,7 +13,7 @@ * Do not enable font compression and horizontal subpixel hinting * Load the file `JetBrainsMono-Bold.tff` (use the file in this repo to ensure the version matches) and specify the following range : `0x20-0x7f, 0x410-0x44f` * Add a 2nd font, load the file `FontAwesome5-Solid+Brands+Regular.woff` and specify the following - range : `0xf293, 0xf294, 0xf244, 0xf240, 0xf242, 0xf243, 0xf241, 0xf54b, 0xf21e, 0xf1e6, 0xf54b, 0xf017, 0xf129, 0xf03a, 0xf185, 0xf560, 0xf001, 0xf3fd, 0xf069, 0xf1fc, 0xf45d, 0xf59f, 0xf5a0, 0xf029, 0xf027, 0xf028, 0xf6a9, 0xf04b, 0xf04c, 0xf048, 0xf051, 0xf095, 0xf3dd, 0xf04d, 0xf2f2, 0xf024, 0xf252, 0xf569, 0xf201, 0xf06e, 0xf015` + range : `0xf293, 0xf294, 0xf244, 0xf240, 0xf242, 0xf243, 0xf241, 0xf54b, 0xf21e, 0xf1e6, 0xf54b, 0xf017, 0xf129, 0xf03a, 0xf185, 0xf560, 0xf001, 0xf3fd, 0xf069, 0xf1fc, 0xf45d, 0xf59f, 0xf5a0, 0xf029, 0xf027, 0xf028, 0xf6a9, 0xf04b, 0xf04c, 0xf048, 0xf051, 0xf095, 0xf3dd, 0xf04d, 0xf2f2, 0xf024, 0xf252, 0xf569, 0xf201, 0xf06e, 0xf015, 0xf077, 0xf078` * Click on Convert, and download the file `jetbrains_mono_bold_20.c` and copy it in `src/DisplayApp/Fonts` * Add the font .c file path to src/CMakeLists.txt * Add an LV_FONT_DECLARE line in src/libs/lv_conf.h diff --git a/src/displayapp/fonts/jetbrains_mono_bold_20.c b/src/displayapp/fonts/jetbrains_mono_bold_20.c index d8705528ce..4abd249dd5 100644 --- a/src/displayapp/fonts/jetbrains_mono_bold_20.c +++ b/src/displayapp/fonts/jetbrains_mono_bold_20.c @@ -840,6 +840,16 @@ static LV_ATTRIBUTE_LARGE_CONST const uint8_t glyph_bitmap[] = { 0xf8, 0xf, 0x80, 0xf8, 0x3e, 0x0, 0xff, 0xf0, 0x0, 0x3f, 0x80, 0x0, + /* U+F077 "" */ + 0x0, 0x80, 0x0, 0xe0, 0x0, 0xf8, 0x0, 0xfe, + 0x0, 0xf7, 0x80, 0xf1, 0xe0, 0xf0, 0x78, 0xf0, + 0x1e, 0xf0, 0x7, 0xf0, 0x1, 0xd0, 0x0, 0x40, + + /* U+F078 "" */ + 0x40, 0x1, 0x70, 0x1, 0xfc, 0x1, 0xef, 0x1, + 0xe3, 0xc1, 0xe0, 0xf1, 0xe0, 0x3d, 0xe0, 0xf, + 0xe0, 0x3, 0xe0, 0x0, 0xe0, 0x0, 0x20, 0x0, + /* U+F095 "" */ 0x0, 0x0, 0x0, 0x0, 0x3e, 0x0, 0x7, 0xf0, 0x0, 0x7f, 0x0, 0x7, 0xf0, 0x0, 0xff, 0x0, @@ -1220,31 +1230,33 @@ static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = { {.bitmap_index = 3028, .adv_w = 280, .box_w = 13, .box_h = 17, .ofs_x = 2, .ofs_y = -1}, {.bitmap_index = 3056, .adv_w = 320, .box_w = 19, .box_h = 20, .ofs_x = 0, .ofs_y = -3}, {.bitmap_index = 3104, .adv_w = 360, .box_w = 23, .box_h = 15, .ofs_x = 0, .ofs_y = 0}, - {.bitmap_index = 3148, .adv_w = 320, .box_w = 20, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, - {.bitmap_index = 3201, .adv_w = 120, .box_w = 8, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, - {.bitmap_index = 3220, .adv_w = 320, .box_w = 20, .box_h = 20, .ofs_x = 0, .ofs_y = -3}, - {.bitmap_index = 3270, .adv_w = 240, .box_w = 15, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, - {.bitmap_index = 3306, .adv_w = 320, .box_w = 20, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, - {.bitmap_index = 3354, .adv_w = 320, .box_w = 21, .box_h = 15, .ofs_x = 0, .ofs_y = 0}, - {.bitmap_index = 3394, .adv_w = 320, .box_w = 20, .box_h = 17, .ofs_x = 0, .ofs_y = -1}, - {.bitmap_index = 3437, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, - {.bitmap_index = 3475, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, - {.bitmap_index = 3513, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, - {.bitmap_index = 3551, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, - {.bitmap_index = 3589, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, - {.bitmap_index = 3627, .adv_w = 240, .box_w = 15, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, - {.bitmap_index = 3663, .adv_w = 280, .box_w = 15, .box_h = 20, .ofs_x = 1, .ofs_y = -3}, - {.bitmap_index = 3701, .adv_w = 200, .box_w = 11, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, - {.bitmap_index = 3730, .adv_w = 280, .box_w = 16, .box_h = 19, .ofs_x = 1, .ofs_y = -2}, - {.bitmap_index = 3768, .adv_w = 400, .box_w = 25, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, - {.bitmap_index = 3834, .adv_w = 360, .box_w = 23, .box_h = 17, .ofs_x = 0, .ofs_y = -1}, - {.bitmap_index = 3883, .adv_w = 320, .box_w = 20, .box_h = 20, .ofs_x = 0, .ofs_y = -2}, - {.bitmap_index = 3933, .adv_w = 400, .box_w = 25, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, - {.bitmap_index = 3993, .adv_w = 320, .box_w = 20, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, - {.bitmap_index = 4046, .adv_w = 360, .box_w = 23, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, - {.bitmap_index = 4107, .adv_w = 360, .box_w = 22, .box_h = 20, .ofs_x = 0, .ofs_y = -2}, - {.bitmap_index = 4162, .adv_w = 360, .box_w = 22, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, - {.bitmap_index = 4215, .adv_w = 320, .box_w = 20, .box_h = 15, .ofs_x = 0, .ofs_y = 0} + {.bitmap_index = 3148, .adv_w = 280, .box_w = 17, .box_h = 11, .ofs_x = 0, .ofs_y = 2}, + {.bitmap_index = 3172, .adv_w = 280, .box_w = 17, .box_h = 11, .ofs_x = 0, .ofs_y = 2}, + {.bitmap_index = 3196, .adv_w = 320, .box_w = 20, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, + {.bitmap_index = 3249, .adv_w = 120, .box_w = 8, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, + {.bitmap_index = 3268, .adv_w = 320, .box_w = 20, .box_h = 20, .ofs_x = 0, .ofs_y = -3}, + {.bitmap_index = 3318, .adv_w = 240, .box_w = 15, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, + {.bitmap_index = 3354, .adv_w = 320, .box_w = 20, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, + {.bitmap_index = 3402, .adv_w = 320, .box_w = 21, .box_h = 15, .ofs_x = 0, .ofs_y = 0}, + {.bitmap_index = 3442, .adv_w = 320, .box_w = 20, .box_h = 17, .ofs_x = 0, .ofs_y = -1}, + {.bitmap_index = 3485, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, + {.bitmap_index = 3523, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, + {.bitmap_index = 3561, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, + {.bitmap_index = 3599, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, + {.bitmap_index = 3637, .adv_w = 400, .box_w = 25, .box_h = 12, .ofs_x = 0, .ofs_y = 1}, + {.bitmap_index = 3675, .adv_w = 240, .box_w = 15, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, + {.bitmap_index = 3711, .adv_w = 280, .box_w = 15, .box_h = 20, .ofs_x = 1, .ofs_y = -3}, + {.bitmap_index = 3749, .adv_w = 200, .box_w = 11, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, + {.bitmap_index = 3778, .adv_w = 280, .box_w = 16, .box_h = 19, .ofs_x = 1, .ofs_y = -2}, + {.bitmap_index = 3816, .adv_w = 400, .box_w = 25, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, + {.bitmap_index = 3882, .adv_w = 360, .box_w = 23, .box_h = 17, .ofs_x = 0, .ofs_y = -1}, + {.bitmap_index = 3931, .adv_w = 320, .box_w = 20, .box_h = 20, .ofs_x = 0, .ofs_y = -2}, + {.bitmap_index = 3981, .adv_w = 400, .box_w = 25, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, + {.bitmap_index = 4041, .adv_w = 320, .box_w = 20, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, + {.bitmap_index = 4094, .adv_w = 360, .box_w = 23, .box_h = 21, .ofs_x = 0, .ofs_y = -3}, + {.bitmap_index = 4155, .adv_w = 360, .box_w = 22, .box_h = 20, .ofs_x = 0, .ofs_y = -2}, + {.bitmap_index = 4210, .adv_w = 360, .box_w = 22, .box_h = 19, .ofs_x = 0, .ofs_y = -2}, + {.bitmap_index = 4263, .adv_w = 320, .box_w = 20, .box_h = 15, .ofs_x = 0, .ofs_y = 0} }; /*--------------------- @@ -1253,10 +1265,11 @@ static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = { static const uint16_t unicode_list_2[] = { 0x0, 0x14, 0x16, 0x23, 0x26, 0x27, 0x28, 0x39, - 0x47, 0x4a, 0x4b, 0x4c, 0x50, 0x68, 0x6d, 0x94, - 0x128, 0x184, 0x1e5, 0x1fb, 0x200, 0x21d, 0x23f, 0x240, - 0x241, 0x242, 0x243, 0x251, 0x292, 0x293, 0x2f1, 0x3dc, - 0x3fc, 0x45c, 0x54a, 0x55f, 0x568, 0x59e, 0x59f, 0x6a8 + 0x47, 0x4a, 0x4b, 0x4c, 0x50, 0x68, 0x6d, 0x76, + 0x77, 0x94, 0x128, 0x184, 0x1e5, 0x1fb, 0x200, 0x21d, + 0x23f, 0x240, 0x241, 0x242, 0x243, 0x251, 0x292, 0x293, + 0x2f1, 0x3dc, 0x3fc, 0x45c, 0x54a, 0x55f, 0x568, 0x59e, + 0x59f, 0x6a8 }; /*Collect the unicode lists and glyph_id offsets*/ @@ -1272,7 +1285,7 @@ static const lv_font_fmt_txt_cmap_t cmaps[] = }, { .range_start = 61441, .range_length = 1705, .glyph_id_start = 160, - .unicode_list = unicode_list_2, .glyph_id_ofs_list = NULL, .list_length = 40, .type = LV_FONT_FMT_TXT_CMAP_SPARSE_TINY + .unicode_list = unicode_list_2, .glyph_id_ofs_list = NULL, .list_length = 42, .type = LV_FONT_FMT_TXT_CMAP_SPARSE_TINY } }; @@ -1321,7 +1334,7 @@ lv_font_t jetbrains_mono_bold_20 = { #if !(LVGL_VERSION_MAJOR == 6 && LVGL_VERSION_MINOR == 0) .subpx = LV_FONT_SUBPX_NONE, #endif -#if LV_VERSION_CHECK(7, 4, 0) +#if LV_VERSION_CHECK(7, 4, 0) || LVGL_VERSION_MAJOR >= 8 .underline_position = -3, .underline_thickness = 1, #endif diff --git a/src/displayapp/lv_pinetime_theme.c b/src/displayapp/lv_pinetime_theme.c index b74b2fd7ef..31368701ca 100644 --- a/src/displayapp/lv_pinetime_theme.c +++ b/src/displayapp/lv_pinetime_theme.c @@ -26,23 +26,17 @@ static void theme_apply(lv_obj_t* obj, lv_theme_style_t name); **********************/ static lv_theme_t theme; -static lv_style_t style_pad; -static lv_style_t style_circle; - +static lv_style_t style_scr; static lv_style_t style_bg; -static lv_style_t style_box; -static lv_style_t style_box_border; static lv_style_t style_btn; -static lv_style_t style_btn_border; -static lv_style_t style_title; static lv_style_t style_label_white; -static lv_style_t style_back; static lv_style_t style_icon; +static lv_style_t style_bar; static lv_style_t style_bar_indic; static lv_style_t style_slider_knob; static lv_style_t style_scrollbar; static lv_style_t style_list_btn; -static lv_style_t style_ddlist_list; +static lv_style_t style_ddlist; static lv_style_t style_ddlist_selected; static lv_style_t style_sw_bg; static lv_style_t style_sw_indic; @@ -52,7 +46,6 @@ static lv_style_t style_arc_knob; static lv_style_t style_arc_indic; static lv_style_t style_table_cell; static lv_style_t style_pad_small; -static lv_style_t style_bg_grad; static lv_style_t style_lmeter; static lv_style_t style_chart_serie; static lv_style_t style_cb_bg; @@ -77,63 +70,37 @@ static void style_init_reset(lv_style_t* style) { static void basic_init(void) { - style_init_reset(&style_pad); - lv_style_set_pad_top(&style_pad, LV_STATE_DEFAULT, LV_VER_RES / 30); - lv_style_set_pad_bottom(&style_pad, LV_STATE_DEFAULT, LV_VER_RES / 30); - lv_style_set_pad_left(&style_pad, LV_STATE_DEFAULT, LV_VER_RES / 40); - lv_style_set_pad_right(&style_pad, LV_STATE_DEFAULT, LV_VER_RES / 40); - - style_init_reset(&style_circle); - lv_style_set_radius(&style_circle, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); + style_init_reset(&style_scr); + lv_style_set_bg_opa(&style_scr, LV_STATE_DEFAULT, LV_OPA_COVER); + lv_style_set_bg_color(&style_scr, LV_STATE_DEFAULT, LV_COLOR_BLACK); style_init_reset(&style_bg); lv_style_set_bg_opa(&style_bg, LV_STATE_DEFAULT, LV_OPA_COVER); - lv_style_set_bg_color(&style_bg, LV_STATE_DEFAULT, LV_COLOR_BLACK); - lv_style_set_text_font(&style_bg, LV_STATE_DEFAULT, theme.font_normal); - - style_init_reset(&style_box); - lv_style_set_bg_opa(&style_box, LV_STATE_DEFAULT, LV_OPA_COVER); - lv_style_set_radius(&style_box, LV_STATE_DEFAULT, 10); - lv_style_set_value_color(&style_box, LV_STATE_DEFAULT, LV_PINETIME_BLUE); - lv_style_set_value_font(&style_box, LV_STATE_DEFAULT, theme.font_normal); - - style_init_reset(&style_box_border); - lv_style_set_bg_opa(&style_box_border, LV_STATE_DEFAULT, LV_OPA_TRANSP); - lv_style_set_border_width(&style_box_border, LV_STATE_DEFAULT, 2); - lv_style_set_border_color(&style_box_border, LV_STATE_DEFAULT, LV_PINETIME_GRAY); - lv_style_set_text_color(&style_box, LV_STATE_DEFAULT, LV_PINETIME_BLUE); - - style_init_reset(&style_title); - lv_style_set_text_color(&style_title, LV_STATE_DEFAULT, LV_PINETIME_WHITE); - lv_style_set_text_font(&style_title, LV_STATE_DEFAULT, theme.font_subtitle); + lv_style_set_bg_color(&style_bg, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x10, 0x10, 0x10)); + lv_style_set_radius(&style_bg, LV_STATE_DEFAULT, 10); style_init_reset(&style_label_white); - lv_style_set_text_color(&style_label_white, LV_STATE_DEFAULT, LV_PINETIME_WHITE); + lv_style_set_text_color(&style_label_white, LV_STATE_DEFAULT, LV_COLOR_WHITE); + lv_style_set_text_color(&style_label_white, LV_STATE_DISABLED, LV_COLOR_GRAY); style_init_reset(&style_btn); lv_style_set_radius(&style_btn, LV_STATE_DEFAULT, 10); lv_style_set_bg_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_COVER); - lv_style_set_bg_color(&style_btn, LV_STATE_DEFAULT, lv_color_hex(0x2F3540)); + lv_style_set_bg_color(&style_btn, LV_STATE_DEFAULT, LV_PINETIME_BLUE); lv_style_set_bg_color(&style_btn, LV_STATE_CHECKED, LV_COLOR_GREEN); - lv_style_set_bg_color(&style_btn, LV_STATE_DISABLED, lv_color_hex(0x2F3540)); - lv_style_set_bg_color(&style_btn, LV_STATE_DISABLED | LV_STATE_CHECKED, lv_color_hex3(0x888)); - lv_style_set_border_color(&style_btn, LV_STATE_DEFAULT, theme.color_primary); + lv_style_set_bg_color(&style_btn, LV_STATE_DISABLED, LV_COLOR_MAKE(0x08, 0x08, 0x08)); + lv_style_set_bg_color(&style_btn, LV_STATE_DISABLED | LV_STATE_CHECKED, LV_COLOR_GRAY); lv_style_set_border_width(&style_btn, LV_STATE_DEFAULT, 0); - lv_style_set_text_color(&style_btn, LV_STATE_DEFAULT, lv_color_hex(0xffffff)); - lv_style_set_text_color(&style_btn, LV_STATE_CHECKED, lv_color_hex(0xffffff)); - lv_style_set_text_color(&style_btn, LV_STATE_CHECKED, lv_color_hex(0xffffff)); - lv_style_set_text_color(&style_btn, LV_STATE_DISABLED, lv_color_hex(0x888888)); + lv_style_set_text_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE); + lv_style_set_text_color(&style_btn, LV_STATE_CHECKED, LV_COLOR_WHITE); + lv_style_set_text_color(&style_btn, LV_STATE_DISABLED, LV_COLOR_GRAY); - lv_style_set_value_color(&style_btn, LV_STATE_DEFAULT, lv_color_hex(0xffffff)); - lv_style_set_value_color(&style_btn, LV_STATE_CHECKED, lv_color_hex(0xffffff)); - lv_style_set_value_color(&style_btn, LV_STATE_CHECKED, lv_color_hex(0xffffff)); - lv_style_set_value_color(&style_btn, LV_STATE_DISABLED, lv_color_hex(0x888888)); + lv_style_set_value_color(&style_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE); + lv_style_set_value_color(&style_btn, LV_STATE_CHECKED, LV_COLOR_WHITE); + lv_style_set_value_color(&style_btn, LV_STATE_DISABLED, LV_COLOR_GRAY); - lv_style_set_pad_left(&style_btn, LV_STATE_DEFAULT, LV_DPX(20)); - lv_style_set_pad_right(&style_btn, LV_STATE_DEFAULT, LV_DPX(20)); - lv_style_set_pad_top(&style_btn, LV_STATE_DEFAULT, LV_DPX(20)); - lv_style_set_pad_bottom(&style_btn, LV_STATE_DEFAULT, LV_DPX(20)); + lv_style_set_pad_all(&style_btn, LV_STATE_DEFAULT, LV_DPX(20)); lv_style_set_pad_inner(&style_btn, LV_STATE_DEFAULT, LV_DPX(15)); lv_style_set_outline_width(&style_btn, LV_STATE_DEFAULT, LV_DPX(2)); lv_style_set_outline_opa(&style_btn, LV_STATE_DEFAULT, LV_OPA_0); @@ -141,23 +108,13 @@ static void basic_init(void) { lv_style_set_transition_time(&style_btn, LV_STATE_DEFAULT, 0); lv_style_set_transition_delay(&style_btn, LV_STATE_DEFAULT, 0); - style_init_reset(&style_btn_border); - lv_style_set_radius(&style_btn_border, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); - lv_style_set_border_color(&style_btn_border, LV_STATE_DEFAULT, LV_PINETIME_WHITE); - lv_style_set_border_width(&style_btn_border, LV_STATE_DEFAULT, 2); - lv_style_set_bg_opa(&style_btn_border, LV_STATE_DEFAULT, LV_OPA_TRANSP); - lv_style_set_bg_color(&style_btn_border, LV_STATE_DEFAULT, LV_PINETIME_WHITE); - lv_style_set_text_color(&style_btn_border, LV_STATE_DEFAULT, LV_PINETIME_WHITE); - lv_style_set_value_color(&style_btn_border, LV_STATE_DEFAULT, LV_PINETIME_WHITE); - lv_style_set_transition_prop_3(&style_btn_border, LV_STATE_DEFAULT, LV_STYLE_BG_OPA); - style_init_reset(&style_icon); - lv_style_set_text_color(&style_icon, LV_STATE_DEFAULT, LV_PINETIME_WHITE); + lv_style_set_text_color(&style_icon, LV_STATE_DEFAULT, LV_COLOR_WHITE); - style_init_reset(&style_back); - lv_style_set_value_color(&style_back, LV_STATE_DEFAULT, LV_PINETIME_GRAY); - lv_style_set_value_str(&style_back, LV_STATE_DEFAULT, LV_SYMBOL_LEFT); - lv_style_set_value_font(&style_back, LV_STATE_DEFAULT, theme.font_subtitle); + style_init_reset(&style_bar); + lv_style_set_bg_opa(&style_bar, LV_STATE_DEFAULT, LV_OPA_COVER); + lv_style_set_radius(&style_bar, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); + lv_style_set_bg_color(&style_bar, LV_STATE_DEFAULT, LV_COLOR_MAKE(0x20, 0x20, 0x20)); style_init_reset(&style_bar_indic); lv_style_set_bg_opa(&style_bar_indic, LV_STATE_DEFAULT, LV_OPA_COVER); @@ -168,30 +125,30 @@ static void basic_init(void) { lv_style_set_radius(&style_scrollbar, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); lv_style_set_bg_color(&style_scrollbar, LV_STATE_DEFAULT, LV_PINETIME_LIGHT_GRAY); lv_style_set_size(&style_scrollbar, LV_STATE_DEFAULT, LV_HOR_RES / 80); - lv_style_set_pad_right(&style_scrollbar, LV_STATE_DEFAULT, LV_HOR_RES / 60); + lv_style_set_pad_right(&style_scrollbar, LV_STATE_DEFAULT, LV_HOR_RES / 80); + lv_style_set_pad_bottom(&style_scrollbar, LV_STATE_DEFAULT, LV_HOR_RES / 80); style_init_reset(&style_list_btn); lv_style_set_bg_opa(&style_list_btn, LV_STATE_DEFAULT, LV_OPA_COVER); - lv_style_set_bg_color(&style_list_btn, LV_STATE_DEFAULT, LV_PINETIME_WHITE); + lv_style_set_bg_color(&style_list_btn, LV_STATE_DEFAULT, LV_COLOR_WHITE); lv_style_set_bg_color(&style_list_btn, LV_STATE_CHECKED, LV_PINETIME_GRAY); lv_style_set_bg_color(&style_list_btn, LV_STATE_CHECKED | LV_STATE_PRESSED, lv_color_darken(LV_PINETIME_GRAY, LV_OPA_20)); lv_style_set_text_color(&style_list_btn, LV_STATE_DEFAULT, LV_PINETIME_BLUE); - lv_style_set_text_color(&style_list_btn, LV_STATE_CHECKED, LV_PINETIME_WHITE); - lv_style_set_text_color(&style_list_btn, LV_STATE_CHECKED | LV_STATE_PRESSED, LV_PINETIME_WHITE); + lv_style_set_text_color(&style_list_btn, LV_STATE_CHECKED, LV_COLOR_WHITE); + lv_style_set_text_color(&style_list_btn, LV_STATE_CHECKED | LV_STATE_PRESSED, LV_COLOR_WHITE); lv_style_set_image_recolor(&style_list_btn, LV_STATE_DEFAULT, LV_PINETIME_BLUE); - lv_style_set_image_recolor(&style_list_btn, LV_STATE_CHECKED, LV_PINETIME_WHITE); - lv_style_set_image_recolor(&style_list_btn, LV_STATE_CHECKED | LV_STATE_PRESSED, LV_PINETIME_WHITE); + lv_style_set_image_recolor(&style_list_btn, LV_STATE_CHECKED, LV_COLOR_WHITE); + lv_style_set_image_recolor(&style_list_btn, LV_STATE_CHECKED | LV_STATE_PRESSED, LV_COLOR_WHITE); lv_style_set_pad_left(&style_list_btn, LV_STATE_DEFAULT, LV_HOR_RES / 25); lv_style_set_pad_right(&style_list_btn, LV_STATE_DEFAULT, LV_HOR_RES / 25); lv_style_set_pad_top(&style_list_btn, LV_STATE_DEFAULT, LV_HOR_RES / 100); lv_style_set_pad_bottom(&style_list_btn, LV_STATE_DEFAULT, LV_HOR_RES / 100); lv_style_set_pad_inner(&style_list_btn, LV_STATE_DEFAULT, LV_HOR_RES / 50); - style_init_reset(&style_ddlist_list); - lv_style_set_text_line_space(&style_ddlist_list, LV_STATE_DEFAULT, LV_VER_RES / 25); - lv_style_set_shadow_width(&style_ddlist_list, LV_STATE_DEFAULT, LV_VER_RES / 20); - lv_style_set_shadow_color(&style_ddlist_list, LV_STATE_DEFAULT, LV_PINETIME_GRAY); - lv_style_set_bg_color(&style_ddlist_list, LV_STATE_DEFAULT, LV_PINETIME_GRAY); + style_init_reset(&style_ddlist); + lv_style_set_text_line_space(&style_ddlist, LV_STATE_DEFAULT, 10); + lv_style_set_pad_all(&style_ddlist, LV_STATE_DEFAULT, 10); + lv_style_set_bg_color(&style_ddlist, LV_STATE_DEFAULT, LV_PINETIME_GRAY); style_init_reset(&style_ddlist_selected); lv_style_set_bg_opa(&style_ddlist_selected, LV_STATE_DEFAULT, LV_OPA_COVER); @@ -209,7 +166,7 @@ static void basic_init(void) { 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); @@ -222,22 +179,16 @@ static void basic_init(void) { lv_style_set_border_color(&style_slider_knob, LV_STATE_DEFAULT, LV_COLOR_WHITE); lv_style_set_border_width(&style_slider_knob, LV_STATE_DEFAULT, 6); lv_style_set_radius(&style_slider_knob, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); - lv_style_set_pad_top(&style_slider_knob, LV_STATE_DEFAULT, 10); - lv_style_set_pad_bottom(&style_slider_knob, LV_STATE_DEFAULT, 10); - lv_style_set_pad_left(&style_slider_knob, LV_STATE_DEFAULT, 10); - lv_style_set_pad_right(&style_slider_knob, LV_STATE_DEFAULT, 10); - lv_style_set_pad_top(&style_slider_knob, LV_STATE_PRESSED, 14); - lv_style_set_pad_bottom(&style_slider_knob, LV_STATE_PRESSED, 14); - lv_style_set_pad_left(&style_slider_knob, LV_STATE_PRESSED, 14); - lv_style_set_pad_right(&style_slider_knob, LV_STATE_PRESSED, 14); + lv_style_set_pad_all(&style_slider_knob, LV_STATE_DEFAULT, 10); + lv_style_set_pad_all(&style_slider_knob, LV_STATE_PRESSED, 14); style_init_reset(&style_arc_indic); - lv_style_set_line_color(&style_arc_indic, LV_STATE_DEFAULT, LV_PINETIME_BLUE); + lv_style_set_line_color(&style_arc_indic, LV_STATE_DEFAULT, LV_PINETIME_GRAY); lv_style_set_line_width(&style_arc_indic, LV_STATE_DEFAULT, LV_DPX(25)); lv_style_set_line_rounded(&style_arc_indic, LV_STATE_DEFAULT, true); style_init_reset(&style_arc_bg); - lv_style_set_line_color(&style_arc_bg, LV_STATE_DEFAULT, LV_PINETIME_GRAY); + lv_style_set_line_color(&style_arc_bg, LV_STATE_DEFAULT, LV_PINETIME_BLUE); lv_style_set_line_width(&style_arc_bg, LV_STATE_DEFAULT, LV_DPX(25)); lv_style_set_line_rounded(&style_arc_bg, LV_STATE_DEFAULT, true); lv_style_set_pad_all(&style_arc_bg, LV_STATE_DEFAULT, LV_DPX(5)); @@ -259,17 +210,9 @@ static void basic_init(void) { style_init_reset(&style_pad_small); lv_style_int_t pad_small_value = 10; - lv_style_set_pad_left(&style_pad_small, LV_STATE_DEFAULT, pad_small_value); - lv_style_set_pad_right(&style_pad_small, LV_STATE_DEFAULT, pad_small_value); - lv_style_set_pad_top(&style_pad_small, LV_STATE_DEFAULT, pad_small_value); - lv_style_set_pad_bottom(&style_pad_small, LV_STATE_DEFAULT, pad_small_value); + lv_style_set_pad_all(&style_pad_small, LV_STATE_DEFAULT, pad_small_value); lv_style_set_pad_inner(&style_pad_small, LV_STATE_DEFAULT, pad_small_value); - style_init_reset(&style_bg_grad); - lv_style_set_bg_color(&style_bg_grad, LV_STATE_DEFAULT, lv_color_hsv_to_rgb(10, 10, 40)); - lv_style_set_bg_grad_color(&style_bg_grad, LV_STATE_DEFAULT, lv_color_hsv_to_rgb(10, 10, 20)); - lv_style_set_bg_grad_dir(&style_bg_grad, LV_STATE_DEFAULT, LV_GRAD_DIR_VER); - style_init_reset(&style_lmeter); lv_style_set_radius(&style_lmeter, LV_STATE_DEFAULT, LV_RADIUS_CIRCLE); lv_style_set_pad_left(&style_lmeter, LV_STATE_DEFAULT, LV_DPX(20)); @@ -285,7 +228,7 @@ static void basic_init(void) { lv_style_set_scale_end_line_width(&style_lmeter, LV_STATE_DEFAULT, LV_DPX(7)); style_init_reset(&style_chart_serie); - lv_style_set_line_color(&style_chart_serie, LV_STATE_DEFAULT, LV_PINETIME_WHITE); + lv_style_set_line_color(&style_chart_serie, LV_STATE_DEFAULT, LV_COLOR_WHITE); lv_style_set_line_width(&style_chart_serie, LV_STATE_DEFAULT, 4); lv_style_set_size(&style_chart_serie, LV_STATE_DEFAULT, 4); lv_style_set_bg_opa(&style_chart_serie, LV_STATE_DEFAULT, 0); @@ -303,10 +246,7 @@ static void basic_init(void) { lv_style_set_outline_opa(&style_cb_bullet, LV_STATE_FOCUSED, LV_OPA_TRANSP); lv_style_set_radius(&style_cb_bullet, LV_STATE_DEFAULT, LV_DPX(4)); lv_style_set_pattern_recolor(&style_cb_bullet, LV_STATE_CHECKED, LV_COLOR_WHITE); - lv_style_set_pad_left(&style_cb_bullet, LV_STATE_DEFAULT, LV_DPX(8)); - lv_style_set_pad_right(&style_cb_bullet, LV_STATE_DEFAULT, LV_DPX(8)); - lv_style_set_pad_top(&style_cb_bullet, LV_STATE_DEFAULT, LV_DPX(8)); - lv_style_set_pad_bottom(&style_cb_bullet, LV_STATE_DEFAULT, LV_DPX(8)); + lv_style_set_pad_all(&style_cb_bullet, LV_STATE_DEFAULT, LV_DPX(8)); } /********************** @@ -360,27 +300,26 @@ static void theme_apply(lv_obj_t* obj, lv_theme_style_t name) { case LV_THEME_SCR: lv_obj_clean_style_list(obj, LV_OBJ_PART_MAIN); list = lv_obj_get_style_list(obj, LV_OBJ_PART_MAIN); - _lv_style_list_add_style(list, &style_bg); + _lv_style_list_add_style(list, &style_scr); _lv_style_list_add_style(list, &style_label_white); break; case LV_THEME_OBJ: lv_obj_clean_style_list(obj, LV_OBJ_PART_MAIN); list = lv_obj_get_style_list(obj, LV_OBJ_PART_MAIN); - _lv_style_list_add_style(list, &style_box); + _lv_style_list_add_style(list, &style_bg); break; case LV_THEME_CONT: lv_obj_clean_style_list(obj, LV_OBJ_PART_MAIN); list = lv_obj_get_style_list(obj, LV_CONT_PART_MAIN); - _lv_style_list_add_style(list, &style_box); + _lv_style_list_add_style(list, &style_bg); break; case LV_THEME_BTN: lv_obj_clean_style_list(obj, LV_BTN_PART_MAIN); list = lv_obj_get_style_list(obj, LV_BTN_PART_MAIN); _lv_style_list_add_style(list, &style_btn); - //_lv_style_list_add_style(list, &style_bg_grad); break; case LV_THEME_BTNMATRIX: @@ -390,13 +329,12 @@ static void theme_apply(lv_obj_t* obj, lv_theme_style_t name) { list = lv_obj_get_style_list(obj, LV_BTNMATRIX_PART_BTN); _lv_style_list_add_style(list, &style_btn); - //_lv_style_list_add_style(list, &style_bg_grad); - //_lv_style_list_add_style(list, &style_bg_click); break; case LV_THEME_BAR: lv_obj_clean_style_list(obj, LV_BAR_PART_BG); list = lv_obj_get_style_list(obj, LV_BAR_PART_BG); + _lv_style_list_add_style(list, &style_bar); lv_obj_clean_style_list(obj, LV_BAR_PART_INDIC); list = lv_obj_get_style_list(obj, LV_BAR_PART_INDIC); @@ -431,7 +369,7 @@ static void theme_apply(lv_obj_t* obj, lv_theme_style_t name) { case LV_THEME_LIST: lv_obj_clean_style_list(obj, LV_LIST_PART_BG); list = lv_obj_get_style_list(obj, LV_LIST_PART_BG); - _lv_style_list_add_style(list, &style_box); + _lv_style_list_add_style(list, &style_bg); lv_obj_clean_style_list(obj, LV_LIST_PART_SCROLLABLE); list = lv_obj_get_style_list(obj, LV_LIST_PART_SCROLLABLE); @@ -479,13 +417,11 @@ static void theme_apply(lv_obj_t* obj, lv_theme_style_t name) { lv_obj_clean_style_list(obj, LV_DROPDOWN_PART_MAIN); list = lv_obj_get_style_list(obj, LV_DROPDOWN_PART_MAIN); _lv_style_list_add_style(list, &style_btn); - _lv_style_list_add_style(list, &style_pad); lv_obj_clean_style_list(obj, LV_DROPDOWN_PART_LIST); list = lv_obj_get_style_list(obj, LV_DROPDOWN_PART_LIST); - _lv_style_list_add_style(list, &style_box); - _lv_style_list_add_style(list, &style_ddlist_list); - _lv_style_list_add_style(list, &style_pad); + _lv_style_list_add_style(list, &style_bg); + _lv_style_list_add_style(list, &style_ddlist); lv_obj_clean_style_list(obj, LV_DROPDOWN_PART_SELECTED); list = lv_obj_get_style_list(obj, LV_DROPDOWN_PART_SELECTED); diff --git a/src/displayapp/lv_pinetime_theme.h b/src/displayapp/lv_pinetime_theme.h index f914516d3d..b8b61b0976 100644 --- a/src/displayapp/lv_pinetime_theme.h +++ b/src/displayapp/lv_pinetime_theme.h @@ -19,13 +19,11 @@ extern "C" { * DEFINES *********************/ /*Colors*/ -#define LV_PINETIME_WHITE lv_color_hex(0xffffff) -#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_GREEN lv_color_hex(0x4cb242) -#define LV_PINETIME_RED lv_color_hex(0xd51732) +#define LV_PINETIME_LIGHT LV_COLOR_MAKE(0xf3, 0xf8, 0xfe) +#define LV_PINETIME_GRAY LV_COLOR_MAKE(0x8a, 0x8a, 0x8a) +#define LV_PINETIME_LIGHT_GRAY LV_COLOR_MAKE(0xc4, 0xc4, 0xc4) +#define LV_PINETIME_BLUE LV_COLOR_MAKE(0x2f, 0x35, 0x40) +#define LV_PINETIME_GREEN LV_COLOR_MAKE(0x4c, 0xb2, 0x42) /********************** * TYPEDEFS diff --git a/src/displayapp/screens/Metronome.cpp b/src/displayapp/screens/Metronome.cpp index f6f269dce2..591f163079 100644 --- a/src/displayapp/screens/Metronome.cpp +++ b/src/displayapp/screens/Metronome.cpp @@ -55,10 +55,11 @@ Metronome::Metronome(DisplayApp* app, Controllers::MotorController& motorControl lv_dropdown_set_selected(bpbDropdown, bpb - 1); lv_dropdown_set_show_selected(bpbDropdown, false); lv_dropdown_set_text(bpbDropdown, ""); + lv_dropdown_set_symbol(bpbDropdown, LV_SYMBOL_UP); currentBpbText = lv_label_create(bpbDropdown, nullptr); lv_label_set_text_fmt(currentBpbText, "%d bpb", bpb); - lv_obj_align(currentBpbText, bpbDropdown, LV_ALIGN_CENTER, 0, 0); + lv_obj_align(currentBpbText, bpbDropdown, LV_ALIGN_IN_LEFT_MID, 12, 0); playPause = lv_btn_create(lv_scr_act(), nullptr); playPause->user_data = this; diff --git a/src/displayapp/screens/Steps.cpp b/src/displayapp/screens/Steps.cpp index 3e7f8201e0..41315cba94 100644 --- a/src/displayapp/screens/Steps.cpp +++ b/src/displayapp/screens/Steps.cpp @@ -38,7 +38,7 @@ Steps::Steps(Pinetime::Applications::DisplayApp* app, lv_obj_align(lSteps, nullptr, LV_ALIGN_CENTER, 0, -40); lv_obj_t* lstepsL = lv_label_create(lv_scr_act(), nullptr); - lv_obj_set_style_local_text_color(lstepsL, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x111111)); + lv_obj_set_style_local_text_color(lstepsL, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, lv_color_hex(0x222222)); lv_label_set_text_static(lstepsL, "Steps"); lv_obj_align(lstepsL, lSteps, LV_ALIGN_OUT_BOTTOM_MID, 0, 5); diff --git a/src/displayapp/screens/StopWatch.cpp b/src/displayapp/screens/StopWatch.cpp index 8749839f7d..962228070a 100644 --- a/src/displayapp/screens/StopWatch.cpp +++ b/src/displayapp/screens/StopWatch.cpp @@ -79,9 +79,7 @@ StopWatch::StopWatch(DisplayApp* app, System::SystemTask& systemTask) lv_obj_set_height(btnStopLap, 50); lv_obj_set_width(btnStopLap, 115); lv_obj_align(btnStopLap, lv_scr_act(), LV_ALIGN_IN_BOTTOM_LEFT, 0, 0); - lv_obj_set_style_local_bg_color(btnStopLap, LV_BTN_PART_MAIN, LV_STATE_DISABLED, lv_color_hex(0x080808)); txtStopLap = lv_label_create(btnStopLap, nullptr); - lv_obj_set_style_local_text_color(txtStopLap, LV_BTN_PART_MAIN, LV_STATE_DISABLED, lv_color_hex(0x888888)); lv_label_set_text(txtStopLap, Symbols::stop); lv_obj_set_state(btnStopLap, LV_STATE_DISABLED); lv_obj_set_state(txtStopLap, LV_STATE_DISABLED); diff --git a/src/displayapp/screens/Tile.cpp b/src/displayapp/screens/Tile.cpp index ba764a2e25..8605da57fe 100644 --- a/src/displayapp/screens/Tile.cpp +++ b/src/displayapp/screens/Tile.cpp @@ -86,13 +86,15 @@ Tile::Tile(uint8_t screenID, 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_bg_opa(btnm1, LV_BTNMATRIX_PART_BG, LV_STATE_DEFAULT, LV_OPA_TRANSP); + 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); + 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++) { lv_btnmatrix_set_btn_ctrl(btnm1, i, LV_BTNMATRIX_CTRL_CLICK_TRIG);