acid-drop

- Hacking the planet from a LilyGo T-Deck using custom firmware
git clone git://git.acid.vegas/acid-drop.git
Log | Files | Refs | Archive | README | LICENSE

lv_demo_widgets.c (70787B)

      1 /**
      2  * @file lv_demo_widgets.c
      3  *
      4  */
      5 
      6 /*********************
      7  *      INCLUDES
      8  *********************/
      9 #include "lv_demo_widgets.h"
     10 
     11 #if LV_USE_DEMO_WIDGETS
     12 
     13 #if LV_MEM_CUSTOM == 0 && LV_MEM_SIZE < (38ul * 1024ul)
     14     #error Insufficient memory for lv_demo_widgets. Please set LV_MEM_SIZE to at least 38KB (38ul * 1024ul).  48KB is recommended.
     15 #endif
     16 
     17 /*********************
     18  *      DEFINES
     19  *********************/
     20 
     21 /**********************
     22  *      TYPEDEFS
     23  **********************/
     24 typedef enum {
     25     DISP_SMALL,
     26     DISP_MEDIUM,
     27     DISP_LARGE,
     28 } disp_size_t;
     29 
     30 /**********************
     31  *  STATIC PROTOTYPES
     32  **********************/
     33 static void profile_create(lv_obj_t * parent);
     34 static void analytics_create(lv_obj_t * parent);
     35 static void shop_create(lv_obj_t * parent);
     36 static void color_changer_create(lv_obj_t * parent);
     37 
     38 static lv_obj_t * create_meter_box(lv_obj_t * parent, const char * title, const char * text1, const char * text2,
     39                                    const char * text3);
     40 static lv_obj_t * create_shop_item(lv_obj_t * parent, const void * img_src, const char * name, const char * category,
     41                                    const char * price);
     42 
     43 static void color_changer_event_cb(lv_event_t * e);
     44 static void color_event_cb(lv_event_t * e);
     45 static void ta_event_cb(lv_event_t * e);
     46 static void birthday_event_cb(lv_event_t * e);
     47 static void calendar_event_cb(lv_event_t * e);
     48 static void slider_event_cb(lv_event_t * e);
     49 static void chart_event_cb(lv_event_t * e);
     50 static void shop_chart_event_cb(lv_event_t * e);
     51 static void meter1_indic1_anim_cb(void * var, int32_t v);
     52 static void meter1_indic2_anim_cb(void * var, int32_t v);
     53 static void meter1_indic3_anim_cb(void * var, int32_t v);
     54 static void meter2_timer_cb(lv_timer_t * timer);
     55 static void meter3_anim_cb(void * var, int32_t v);
     56 
     57 /**********************
     58  *  STATIC VARIABLES
     59  **********************/
     60 static disp_size_t disp_size;
     61 
     62 static lv_obj_t * tv;
     63 static lv_obj_t * calendar;
     64 static lv_style_t style_text_muted;
     65 static lv_style_t style_title;
     66 static lv_style_t style_icon;
     67 static lv_style_t style_bullet;
     68 
     69 static lv_obj_t * meter1;
     70 static lv_obj_t * meter2;
     71 static lv_obj_t * meter3;
     72 
     73 static lv_obj_t * chart1;
     74 static lv_obj_t * chart2;
     75 static lv_obj_t * chart3;
     76 
     77 static lv_chart_series_t * ser1;
     78 static lv_chart_series_t * ser2;
     79 static lv_chart_series_t * ser3;
     80 static lv_chart_series_t * ser4;
     81 
     82 static const lv_font_t * font_large;
     83 static const lv_font_t * font_normal;
     84 
     85 static uint32_t session_desktop = 1000;
     86 static uint32_t session_tablet = 1000;
     87 static uint32_t session_mobile = 1000;
     88 
     89 /**********************
     90  *      MACROS
     91  **********************/
     92 
     93 /**********************
     94  *   GLOBAL FUNCTIONS
     95  **********************/
     96 
     97 void lv_demo_widgets(void)
     98 {
     99     if(LV_HOR_RES <= 320) disp_size = DISP_SMALL;
    100     else if(LV_HOR_RES < 720) disp_size = DISP_MEDIUM;
    101     else disp_size = DISP_LARGE;
    102 
    103     font_large = LV_FONT_DEFAULT;
    104     font_normal = LV_FONT_DEFAULT;
    105 
    106     lv_coord_t tab_h;
    107     if(disp_size == DISP_LARGE) {
    108         tab_h = 70;
    109 #if LV_FONT_MONTSERRAT_24
    110         font_large     = &lv_font_montserrat_24;
    111 #else
    112         LV_LOG_WARN("LV_FONT_MONTSERRAT_24 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    113 #endif
    114 #if LV_FONT_MONTSERRAT_16
    115         font_normal    = &lv_font_montserrat_16;
    116 #else
    117         LV_LOG_WARN("LV_FONT_MONTSERRAT_16 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    118 #endif
    119     }
    120     else if(disp_size == DISP_MEDIUM) {
    121         tab_h = 45;
    122 #if LV_FONT_MONTSERRAT_20
    123         font_large     = &lv_font_montserrat_20;
    124 #else
    125         LV_LOG_WARN("LV_FONT_MONTSERRAT_20 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    126 #endif
    127 #if LV_FONT_MONTSERRAT_14
    128         font_normal    = &lv_font_montserrat_14;
    129 #else
    130         LV_LOG_WARN("LV_FONT_MONTSERRAT_14 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    131 #endif
    132     }
    133     else {   /* disp_size == DISP_SMALL */
    134         tab_h = 45;
    135 #if LV_FONT_MONTSERRAT_18
    136         font_large     = &lv_font_montserrat_18;
    137 #else
    138         LV_LOG_WARN("LV_FONT_MONTSERRAT_18 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    139 #endif
    140 #if LV_FONT_MONTSERRAT_12
    141         font_normal    = &lv_font_montserrat_12;
    142 #else
    143         LV_LOG_WARN("LV_FONT_MONTSERRAT_12 is not enabled for the widgets demo. Using LV_FONT_DEFAULT instead.");
    144 #endif
    145     }
    146 
    147 #if LV_USE_THEME_DEFAULT
    148     lv_theme_default_init(NULL, lv_palette_main(LV_PALETTE_BLUE), lv_palette_main(LV_PALETTE_RED), LV_THEME_DEFAULT_DARK,
    149                           font_normal);
    150 #endif
    151 
    152     lv_style_init(&style_text_muted);
    153     lv_style_set_text_opa(&style_text_muted, LV_OPA_50);
    154 
    155     lv_style_init(&style_title);
    156     lv_style_set_text_font(&style_title, font_large);
    157 
    158     lv_style_init(&style_icon);
    159     lv_style_set_text_color(&style_icon, lv_theme_get_color_primary(NULL));
    160     lv_style_set_text_font(&style_icon, font_large);
    161 
    162     lv_style_init(&style_bullet);
    163     lv_style_set_border_width(&style_bullet, 0);
    164     lv_style_set_radius(&style_bullet, LV_RADIUS_CIRCLE);
    165 
    166     tv = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, tab_h);
    167 
    168     lv_obj_set_style_text_font(lv_scr_act(), font_normal, 0);
    169 
    170     if(disp_size == DISP_LARGE) {
    171         lv_obj_t * tab_btns = lv_tabview_get_tab_btns(tv);
    172         lv_obj_set_style_pad_left(tab_btns, LV_HOR_RES / 2, 0);
    173         lv_obj_t * logo = lv_img_create(tab_btns);
    174         LV_IMG_DECLARE(img_lvgl_logo);
    175         lv_img_set_src(logo, &img_lvgl_logo);
    176         lv_obj_align(logo, LV_ALIGN_LEFT_MID, -LV_HOR_RES / 2 + 25, 0);
    177 
    178         lv_obj_t * label = lv_label_create(tab_btns);
    179         lv_obj_add_style(label, &style_title, 0);
    180         lv_label_set_text(label, "LVGL v8");
    181         lv_obj_align_to(label, logo, LV_ALIGN_OUT_RIGHT_TOP, 10, 0);
    182 
    183         label = lv_label_create(tab_btns);
    184         lv_label_set_text(label, "Widgets demo");
    185         lv_obj_add_style(label, &style_text_muted, 0);
    186         lv_obj_align_to(label, logo, LV_ALIGN_OUT_RIGHT_BOTTOM, 10, 0);
    187     }
    188 
    189     lv_obj_t * t1 = lv_tabview_add_tab(tv, "Profile");
    190     lv_obj_t * t2 = lv_tabview_add_tab(tv, "Analytics");
    191     lv_obj_t * t3 = lv_tabview_add_tab(tv, "Shop");
    192     profile_create(t1);
    193     analytics_create(t2);
    194     shop_create(t3);
    195 
    196     color_changer_create(tv);
    197 }
    198 
    199 /**********************
    200  *   STATIC FUNCTIONS
    201  **********************/
    202 
    203 static void profile_create(lv_obj_t * parent)
    204 {
    205     lv_obj_t * panel1 = lv_obj_create(parent);
    206     lv_obj_set_height(panel1, LV_SIZE_CONTENT);
    207 
    208     LV_IMG_DECLARE(img_demo_widgets_avatar);
    209     lv_obj_t * avatar = lv_img_create(panel1);
    210     lv_img_set_src(avatar, &img_demo_widgets_avatar);
    211 
    212     lv_obj_t * name = lv_label_create(panel1);
    213     lv_label_set_text(name, "Elena Smith");
    214     lv_obj_add_style(name, &style_title, 0);
    215 
    216     lv_obj_t * dsc = lv_label_create(panel1);
    217     lv_obj_add_style(dsc, &style_text_muted, 0);
    218     lv_label_set_text(dsc, "This is a short description of me. Take a look at my profile!");
    219     lv_label_set_long_mode(dsc, LV_LABEL_LONG_WRAP);
    220 
    221     lv_obj_t * email_icn = lv_label_create(panel1);
    222     lv_obj_add_style(email_icn, &style_icon, 0);
    223     lv_label_set_text(email_icn, LV_SYMBOL_ENVELOPE);
    224 
    225     lv_obj_t * email_label = lv_label_create(panel1);
    226     lv_label_set_text(email_label, "elena@smith.com");
    227 
    228     lv_obj_t * call_icn = lv_label_create(panel1);
    229     lv_obj_add_style(call_icn, &style_icon, 0);
    230     lv_label_set_text(call_icn, LV_SYMBOL_CALL);
    231 
    232     lv_obj_t * call_label = lv_label_create(panel1);
    233     lv_label_set_text(call_label, "+79 246 123 4567");
    234 
    235     lv_obj_t * log_out_btn = lv_btn_create(panel1);
    236     lv_obj_set_height(log_out_btn, LV_SIZE_CONTENT);
    237 
    238     lv_obj_t * label = lv_label_create(log_out_btn);
    239     lv_label_set_text(label, "Log out");
    240     lv_obj_center(label);
    241 
    242     lv_obj_t * invite_btn = lv_btn_create(panel1);
    243     lv_obj_add_state(invite_btn, LV_STATE_DISABLED);
    244     lv_obj_set_height(invite_btn, LV_SIZE_CONTENT);
    245 
    246     label = lv_label_create(invite_btn);
    247     lv_label_set_text(label, "Invite");
    248     lv_obj_center(label);
    249 
    250     /*Create a keyboard*/
    251     lv_obj_t * kb = lv_keyboard_create(lv_scr_act());
    252     lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
    253 
    254     /*Create the second panel*/
    255     lv_obj_t * panel2 = lv_obj_create(parent);
    256     lv_obj_set_height(panel2, LV_SIZE_CONTENT);
    257 
    258     lv_obj_t * panel2_title = lv_label_create(panel2);
    259     lv_label_set_text(panel2_title, "Your profile");
    260     lv_obj_add_style(panel2_title, &style_title, 0);
    261 
    262     lv_obj_t * user_name_label = lv_label_create(panel2);
    263     lv_label_set_text(user_name_label, "User name");
    264     lv_obj_add_style(user_name_label, &style_text_muted, 0);
    265 
    266     lv_obj_t * user_name = lv_textarea_create(panel2);
    267     lv_textarea_set_one_line(user_name, true);
    268     lv_textarea_set_placeholder_text(user_name, "Your name");
    269     lv_obj_add_event_cb(user_name, ta_event_cb, LV_EVENT_ALL, kb);
    270 
    271     lv_obj_t * password_label = lv_label_create(panel2);
    272     lv_label_set_text(password_label, "Password");
    273     lv_obj_add_style(password_label, &style_text_muted, 0);
    274 
    275     lv_obj_t * password = lv_textarea_create(panel2);
    276     lv_textarea_set_one_line(password, true);
    277     lv_textarea_set_password_mode(password, true);
    278     lv_textarea_set_placeholder_text(password, "Min. 8 chars.");
    279     lv_obj_add_event_cb(password, ta_event_cb, LV_EVENT_ALL, kb);
    280 
    281     lv_obj_t * gender_label = lv_label_create(panel2);
    282     lv_label_set_text(gender_label, "Gender");
    283     lv_obj_add_style(gender_label, &style_text_muted, 0);
    284 
    285     lv_obj_t * gender = lv_dropdown_create(panel2);
    286     lv_dropdown_set_options_static(gender, "Male\nFemale\nOther");
    287 
    288     lv_obj_t * birthday_label = lv_label_create(panel2);
    289     lv_label_set_text(birthday_label, "Birthday");
    290     lv_obj_add_style(birthday_label, &style_text_muted, 0);
    291 
    292     lv_obj_t * birthdate = lv_textarea_create(panel2);
    293     lv_textarea_set_one_line(birthdate, true);
    294     lv_obj_add_event_cb(birthdate, birthday_event_cb, LV_EVENT_ALL, NULL);
    295 
    296     /*Create the third panel*/
    297     lv_obj_t * panel3 = lv_obj_create(parent);
    298     lv_obj_t * panel3_title = lv_label_create(panel3);
    299     lv_label_set_text(panel3_title, "Your skills");
    300     lv_obj_add_style(panel3_title, &style_title, 0);
    301 
    302     lv_obj_t * experience_label = lv_label_create(panel3);
    303     lv_label_set_text(experience_label, "Experience");
    304     lv_obj_add_style(experience_label, &style_text_muted, 0);
    305 
    306     lv_obj_t * slider1 = lv_slider_create(panel3);
    307     lv_obj_set_width(slider1, LV_PCT(95));
    308     lv_obj_add_event_cb(slider1, slider_event_cb, LV_EVENT_ALL, NULL);
    309     lv_obj_refresh_ext_draw_size(slider1);
    310 
    311     lv_obj_t * team_player_label = lv_label_create(panel3);
    312     lv_label_set_text(team_player_label, "Team player");
    313     lv_obj_add_style(team_player_label, &style_text_muted, 0);
    314 
    315     lv_obj_t * sw1 = lv_switch_create(panel3);
    316 
    317     lv_obj_t * hard_working_label = lv_label_create(panel3);
    318     lv_label_set_text(hard_working_label, "Hard-working");
    319     lv_obj_add_style(hard_working_label, &style_text_muted, 0);
    320 
    321     lv_obj_t * sw2 = lv_switch_create(panel3);
    322 
    323     if(disp_size == DISP_LARGE) {
    324         static lv_coord_t grid_main_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    325         static lv_coord_t grid_main_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
    326 
    327         /*Create the top panel*/
    328         static lv_coord_t grid_1_col_dsc[] = {LV_GRID_CONTENT, 5, LV_GRID_CONTENT, LV_GRID_FR(2), LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    329         static lv_coord_t grid_1_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, 10, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
    330 
    331         static lv_coord_t grid_2_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    332         static lv_coord_t grid_2_row_dsc[] = {
    333             LV_GRID_CONTENT,  /*Title*/
    334             5,                /*Separator*/
    335             LV_GRID_CONTENT,  /*Box title*/
    336             30,               /*Boxes*/
    337             5,                /*Separator*/
    338             LV_GRID_CONTENT,  /*Box title*/
    339             30,               /*Boxes*/
    340             LV_GRID_TEMPLATE_LAST
    341         };
    342 
    343 
    344         lv_obj_set_grid_dsc_array(parent, grid_main_col_dsc, grid_main_row_dsc);
    345 
    346         lv_obj_set_grid_cell(panel1, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    347 
    348         lv_obj_set_grid_dsc_array(panel1, grid_1_col_dsc, grid_1_row_dsc);
    349         lv_obj_set_grid_cell(avatar, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 0, 5);
    350         lv_obj_set_grid_cell(name, LV_GRID_ALIGN_START, 2, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    351         lv_obj_set_grid_cell(dsc, LV_GRID_ALIGN_STRETCH, 2, 4, LV_GRID_ALIGN_START, 1, 1);
    352         lv_obj_set_grid_cell(email_icn, LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 3, 1);
    353         lv_obj_set_grid_cell(email_label, LV_GRID_ALIGN_START, 3, 1, LV_GRID_ALIGN_CENTER, 3, 1);
    354         lv_obj_set_grid_cell(call_icn, LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 4, 1);
    355         lv_obj_set_grid_cell(call_label, LV_GRID_ALIGN_START, 3, 1, LV_GRID_ALIGN_CENTER, 4, 1);
    356         lv_obj_set_grid_cell(log_out_btn, LV_GRID_ALIGN_STRETCH, 4, 1, LV_GRID_ALIGN_CENTER, 3, 2);
    357         lv_obj_set_grid_cell(invite_btn, LV_GRID_ALIGN_STRETCH, 5, 1, LV_GRID_ALIGN_CENTER, 3, 2);
    358 
    359         lv_obj_set_grid_cell(panel2, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_START, 1, 1);
    360         lv_obj_set_grid_dsc_array(panel2, grid_2_col_dsc, grid_2_row_dsc);
    361         lv_obj_set_grid_cell(panel2_title, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    362         lv_obj_set_grid_cell(user_name, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_CENTER, 3, 1);
    363         lv_obj_set_grid_cell(user_name_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1);
    364         lv_obj_set_grid_cell(password, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_CENTER, 3, 1);
    365         lv_obj_set_grid_cell(password_label, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_START, 2, 1);
    366         lv_obj_set_grid_cell(birthdate, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_CENTER, 6, 1);
    367         lv_obj_set_grid_cell(birthday_label, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_START, 5, 1);
    368         lv_obj_set_grid_cell(gender, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_CENTER, 6, 1);
    369         lv_obj_set_grid_cell(gender_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 5, 1);
    370 
    371 
    372         lv_obj_set_grid_cell(panel3, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_STRETCH, 1, 1);
    373         lv_obj_set_grid_dsc_array(panel3, grid_2_col_dsc, grid_2_row_dsc);
    374         lv_obj_set_grid_cell(panel3_title, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    375         lv_obj_set_grid_cell(slider1, LV_GRID_ALIGN_CENTER, 0, 2, LV_GRID_ALIGN_CENTER, 3, 1);
    376         lv_obj_set_grid_cell(experience_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1);
    377         lv_obj_set_grid_cell(sw2, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_CENTER, 6, 1);
    378         lv_obj_set_grid_cell(hard_working_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 5, 1);
    379         lv_obj_set_grid_cell(sw1, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_CENTER, 6, 1);
    380         lv_obj_set_grid_cell(team_player_label, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_START, 5, 1);
    381     }
    382     else if(disp_size == DISP_MEDIUM) {
    383         static lv_coord_t grid_main_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    384         static lv_coord_t grid_main_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
    385 
    386 
    387         /*Create the top panel*/
    388         static lv_coord_t grid_1_col_dsc[] = {LV_GRID_CONTENT, 1, LV_GRID_CONTENT, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    389         static lv_coord_t grid_1_row_dsc[] = {
    390             LV_GRID_CONTENT, /*Name*/
    391             LV_GRID_CONTENT, /*Description*/
    392             LV_GRID_CONTENT, /*Email*/
    393             -20,
    394             LV_GRID_CONTENT, /*Phone*/
    395             LV_GRID_CONTENT, /*Buttons*/
    396             LV_GRID_TEMPLATE_LAST
    397         };
    398 
    399         static lv_coord_t grid_2_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    400         static lv_coord_t grid_2_row_dsc[] = {
    401             LV_GRID_CONTENT,  /*Title*/
    402             5,                /*Separator*/
    403             LV_GRID_CONTENT,  /*Box title*/
    404             40,               /*Box*/
    405             LV_GRID_CONTENT,  /*Box title*/
    406             40,               /*Box*/
    407             LV_GRID_CONTENT,  /*Box title*/
    408             40,               /*Box*/
    409             LV_GRID_CONTENT,  /*Box title*/
    410             40,               /*Box*/
    411             LV_GRID_TEMPLATE_LAST
    412         };
    413 
    414 
    415         lv_obj_set_grid_dsc_array(parent, grid_main_col_dsc, grid_main_row_dsc);
    416         lv_obj_set_grid_cell(panel1, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    417 
    418         lv_obj_set_width(log_out_btn, 120);
    419         lv_obj_set_width(invite_btn, 120);
    420 
    421         lv_obj_set_grid_dsc_array(panel1, grid_1_col_dsc, grid_1_row_dsc);
    422         lv_obj_set_grid_cell(avatar, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_START, 0, 4);
    423         lv_obj_set_grid_cell(name, LV_GRID_ALIGN_START, 2, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    424         lv_obj_set_grid_cell(dsc, LV_GRID_ALIGN_STRETCH, 2, 2, LV_GRID_ALIGN_START, 1, 1);
    425         lv_obj_set_grid_cell(email_label, LV_GRID_ALIGN_START, 3, 1, LV_GRID_ALIGN_CENTER, 2, 1);
    426         lv_obj_set_grid_cell(email_icn, LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 2, 1);
    427         lv_obj_set_grid_cell(call_icn, LV_GRID_ALIGN_CENTER, 2, 1, LV_GRID_ALIGN_CENTER, 4, 1);
    428         lv_obj_set_grid_cell(call_label, LV_GRID_ALIGN_START, 3, 1, LV_GRID_ALIGN_CENTER, 4, 1);
    429         lv_obj_set_grid_cell(log_out_btn, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_CENTER, 5, 1);
    430         lv_obj_set_grid_cell(invite_btn, LV_GRID_ALIGN_END, 3, 1, LV_GRID_ALIGN_CENTER, 5, 1);
    431 
    432         lv_obj_set_grid_cell(panel2, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_START, 1, 1);
    433         lv_obj_set_grid_dsc_array(panel2, grid_2_col_dsc, grid_2_row_dsc);
    434         lv_obj_set_grid_cell(panel2_title, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    435         lv_obj_set_grid_cell(user_name_label, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 2, 1);
    436         lv_obj_set_grid_cell(user_name, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_START, 3, 1);
    437         lv_obj_set_grid_cell(password_label, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 4, 1);
    438         lv_obj_set_grid_cell(password, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_START, 5, 1);
    439         lv_obj_set_grid_cell(birthday_label, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 6, 1);
    440         lv_obj_set_grid_cell(birthdate, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_START, 7, 1);
    441         lv_obj_set_grid_cell(gender_label, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 8, 1);
    442         lv_obj_set_grid_cell(gender, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_START, 9, 1);
    443 
    444         lv_obj_set_grid_cell(panel3, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_STRETCH, 1, 1);
    445         lv_obj_set_grid_dsc_array(panel3, grid_2_col_dsc, grid_2_row_dsc);
    446         lv_obj_set_grid_cell(panel3_title, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    447         lv_obj_set_grid_cell(slider1, LV_GRID_ALIGN_CENTER, 0, 2, LV_GRID_ALIGN_CENTER, 3, 1);
    448         lv_obj_set_grid_cell(experience_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1);
    449         lv_obj_set_grid_cell(hard_working_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 4, 1);
    450         lv_obj_set_grid_cell(sw2, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 5, 1);
    451         lv_obj_set_grid_cell(team_player_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 6, 1);
    452         lv_obj_set_grid_cell(sw1, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 7, 1);
    453     }
    454     else if(disp_size == DISP_SMALL) {
    455         static lv_coord_t grid_main_col_dsc[] = {LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    456         static lv_coord_t grid_main_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
    457         lv_obj_set_grid_dsc_array(parent, grid_main_col_dsc, grid_main_row_dsc);
    458 
    459 
    460         /*Create the top panel*/
    461         static lv_coord_t grid_1_col_dsc[] = {LV_GRID_CONTENT, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    462         static lv_coord_t grid_1_row_dsc[] = {LV_GRID_CONTENT, /*Avatar*/
    463                                               LV_GRID_CONTENT, /*Name*/
    464                                               LV_GRID_CONTENT, /*Description*/
    465                                               LV_GRID_CONTENT, /*Email*/
    466                                               LV_GRID_CONTENT, /*Phone number*/
    467                                               LV_GRID_CONTENT, /*Button1*/
    468                                               LV_GRID_CONTENT, /*Button2*/
    469                                               LV_GRID_TEMPLATE_LAST
    470                                              };
    471 
    472         lv_obj_set_grid_dsc_array(panel1, grid_1_col_dsc, grid_1_row_dsc);
    473 
    474 
    475         static lv_coord_t grid_2_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    476         static lv_coord_t grid_2_row_dsc[] = {
    477             LV_GRID_CONTENT,  /*Title*/
    478             5,                /*Separator*/
    479             LV_GRID_CONTENT,  /*Box title*/
    480             40,               /*Box*/
    481             LV_GRID_CONTENT,  /*Box title*/
    482             40,               /*Box*/
    483             LV_GRID_CONTENT,  /*Box title*/
    484             40,               /*Box*/
    485             LV_GRID_CONTENT,  /*Box title*/
    486             40, LV_GRID_TEMPLATE_LAST               /*Box*/
    487         };
    488 
    489         lv_obj_set_grid_dsc_array(panel2, grid_2_col_dsc, grid_2_row_dsc);
    490         lv_obj_set_grid_dsc_array(panel3, grid_2_col_dsc, grid_2_row_dsc);
    491 
    492         lv_obj_set_grid_cell(panel1, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1);
    493 
    494         lv_obj_set_style_text_align(dsc, LV_TEXT_ALIGN_CENTER, 0);
    495 
    496         lv_obj_set_grid_cell(avatar, LV_GRID_ALIGN_CENTER, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    497         lv_obj_set_grid_cell(name, LV_GRID_ALIGN_CENTER, 0, 2, LV_GRID_ALIGN_CENTER, 1, 1);
    498         lv_obj_set_grid_cell(dsc, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_START, 2, 1);
    499         lv_obj_set_grid_cell(email_icn, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 3, 1);
    500         lv_obj_set_grid_cell(email_label, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_CENTER, 3, 1);
    501         lv_obj_set_grid_cell(call_icn, LV_GRID_ALIGN_CENTER, 0, 1, LV_GRID_ALIGN_CENTER, 4, 1);
    502         lv_obj_set_grid_cell(call_label, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_CENTER, 4, 1);
    503         lv_obj_set_grid_cell(log_out_btn, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_CENTER, 5, 1);
    504         lv_obj_set_grid_cell(invite_btn, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_CENTER, 6, 1);
    505 
    506         lv_obj_set_grid_cell(panel2, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_START, 1, 1);
    507         lv_obj_set_grid_cell(panel2_title, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    508         lv_obj_set_grid_cell(user_name_label, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 2, 1);
    509         lv_obj_set_grid_cell(user_name, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_START, 3, 1);
    510         lv_obj_set_grid_cell(password_label, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 4, 1);
    511         lv_obj_set_grid_cell(password, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_START, 5, 1);
    512         lv_obj_set_grid_cell(birthday_label, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 6, 1);
    513         lv_obj_set_grid_cell(birthdate, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_START, 7, 1);
    514         lv_obj_set_grid_cell(gender_label, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 8, 1);
    515         lv_obj_set_grid_cell(gender, LV_GRID_ALIGN_STRETCH, 0, 2, LV_GRID_ALIGN_START, 9, 1);
    516 
    517         lv_obj_set_height(panel3, LV_SIZE_CONTENT);
    518         lv_obj_set_grid_cell(panel3, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_START, 2, 1);
    519         lv_obj_set_grid_cell(panel3_title, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
    520         lv_obj_set_grid_cell(experience_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1);
    521         lv_obj_set_grid_cell(slider1, LV_GRID_ALIGN_CENTER, 0, 2, LV_GRID_ALIGN_CENTER, 3, 1);
    522         lv_obj_set_grid_cell(hard_working_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 4, 1);
    523         lv_obj_set_grid_cell(sw1, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 5, 1);
    524         lv_obj_set_grid_cell(team_player_label, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_START, 4, 1);
    525         lv_obj_set_grid_cell(sw2, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_START, 5, 1);
    526     }
    527 }
    528 
    529 
    530 static void analytics_create(lv_obj_t * parent)
    531 {
    532     lv_obj_set_flex_flow(parent, LV_FLEX_FLOW_ROW_WRAP);
    533 
    534     static lv_coord_t grid_chart_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_FR(1), 10, LV_GRID_TEMPLATE_LAST};
    535     static lv_coord_t grid_chart_col_dsc[] = {20, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    536 
    537     lv_obj_t * chart1_cont = lv_obj_create(parent);
    538     lv_obj_set_flex_grow(chart1_cont, 1);
    539     lv_obj_set_grid_dsc_array(chart1_cont, grid_chart_col_dsc, grid_chart_row_dsc);
    540 
    541     lv_obj_set_height(chart1_cont, LV_PCT(100));
    542     lv_obj_set_style_max_height(chart1_cont, 300, 0);
    543 
    544     lv_obj_t * title = lv_label_create(chart1_cont);
    545     lv_label_set_text(title, "Unique visitors");
    546     lv_obj_add_style(title, &style_title, 0);
    547     lv_obj_set_grid_cell(title, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 0, 1);
    548 
    549     chart1 = lv_chart_create(chart1_cont);
    550     lv_group_add_obj(lv_group_get_default(), chart1);
    551     lv_obj_add_flag(chart1, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
    552     lv_obj_set_grid_cell(chart1, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_STRETCH, 1, 1);
    553     lv_chart_set_axis_tick(chart1, LV_CHART_AXIS_PRIMARY_Y, 0, 0, 5, 1, true, 80);
    554     lv_chart_set_axis_tick(chart1, LV_CHART_AXIS_PRIMARY_X, 0, 0, 12, 1, true, 50);
    555     lv_chart_set_div_line_count(chart1, 0, 12);
    556     lv_chart_set_point_count(chart1, 12);
    557     lv_obj_add_event_cb(chart1, chart_event_cb, LV_EVENT_ALL, NULL);
    558     if(disp_size == DISP_SMALL) lv_chart_set_zoom_x(chart1, 256 * 3);
    559     else if(disp_size == DISP_MEDIUM) lv_chart_set_zoom_x(chart1, 256 * 2);
    560 
    561     lv_obj_set_style_border_side(chart1, LV_BORDER_SIDE_LEFT | LV_BORDER_SIDE_BOTTOM, 0);
    562     lv_obj_set_style_radius(chart1, 0, 0);
    563 
    564     ser1 = lv_chart_add_series(chart1, lv_theme_get_color_primary(chart1), LV_CHART_AXIS_PRIMARY_Y);
    565     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    566     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    567     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    568     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    569     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    570     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    571     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    572     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    573     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    574     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    575     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    576     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    577     lv_chart_set_next_value(chart1, ser1, lv_rand(10, 80));
    578 
    579     lv_obj_t * chart2_cont = lv_obj_create(parent);
    580     lv_obj_add_flag(chart2_cont, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    581     lv_obj_set_flex_grow(chart2_cont, 1);
    582 
    583     lv_obj_set_height(chart2_cont, LV_PCT(100));
    584     lv_obj_set_style_max_height(chart2_cont, 300, 0);
    585 
    586     lv_obj_set_grid_dsc_array(chart2_cont, grid_chart_col_dsc, grid_chart_row_dsc);
    587 
    588     title = lv_label_create(chart2_cont);
    589     lv_label_set_text(title, "Monthly revenue");
    590     lv_obj_add_style(title, &style_title, 0);
    591     lv_obj_set_grid_cell(title, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 0, 1);
    592 
    593     chart2 = lv_chart_create(chart2_cont);
    594     lv_group_add_obj(lv_group_get_default(), chart2);
    595     lv_obj_add_flag(chart2, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
    596 
    597     lv_obj_set_grid_cell(chart2, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_STRETCH, 1, 1);
    598     lv_chart_set_axis_tick(chart2, LV_CHART_AXIS_PRIMARY_Y, 0, 0, 5, 1, true, 80);
    599     lv_chart_set_axis_tick(chart2, LV_CHART_AXIS_PRIMARY_X, 0, 0, 12, 1, true, 50);
    600     lv_obj_set_size(chart2, LV_PCT(100), LV_PCT(100));
    601     lv_chart_set_type(chart2, LV_CHART_TYPE_BAR);
    602     lv_chart_set_div_line_count(chart2, 6, 0);
    603     lv_chart_set_point_count(chart2, 12);
    604     lv_obj_add_event_cb(chart2, chart_event_cb, LV_EVENT_ALL, NULL);
    605     lv_chart_set_zoom_x(chart2, 256 * 2);
    606     lv_obj_set_style_border_side(chart2, LV_BORDER_SIDE_LEFT | LV_BORDER_SIDE_BOTTOM, 0);
    607     lv_obj_set_style_radius(chart2, 0, 0);
    608 
    609     if(disp_size == DISP_SMALL) {
    610         lv_obj_set_style_pad_gap(chart2, 0, LV_PART_ITEMS);
    611         lv_obj_set_style_pad_gap(chart2, 2, LV_PART_MAIN);
    612     }
    613     else if(disp_size == DISP_LARGE) {
    614         lv_obj_set_style_pad_gap(chart2, 16, 0);
    615     }
    616 
    617     ser2 = lv_chart_add_series(chart2, lv_palette_lighten(LV_PALETTE_GREY, 1), LV_CHART_AXIS_PRIMARY_Y);
    618     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    619     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    620     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    621     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    622     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    623     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    624     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    625     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    626     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    627     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    628     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    629     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    630     lv_chart_set_next_value(chart2, ser2, lv_rand(10, 80));
    631 
    632     ser3 = lv_chart_add_series(chart2, lv_theme_get_color_primary(chart1), LV_CHART_AXIS_PRIMARY_Y);
    633     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    634     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    635     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    636     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    637     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    638     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    639     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    640     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    641     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    642     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    643     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    644     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    645     lv_chart_set_next_value(chart2, ser3, lv_rand(10, 80));
    646 
    647     lv_meter_scale_t * scale;
    648     lv_meter_indicator_t * indic;
    649     meter1 = create_meter_box(parent, "Monthly Target", "Revenue: 63%", "Sales: 44%", "Costs: 58%");
    650     lv_obj_add_flag(lv_obj_get_parent(meter1), LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    651     scale = lv_meter_add_scale(meter1);
    652     lv_meter_set_scale_range(meter1, scale, 0, 100, 270, 90);
    653     lv_meter_set_scale_ticks(meter1, scale, 0, 0, 0, lv_color_black());
    654 
    655     lv_anim_t a;
    656     lv_anim_init(&a);
    657     lv_anim_set_values(&a, 20, 100);
    658     lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    659 
    660     indic = lv_meter_add_arc(meter1, scale, 15, lv_palette_main(LV_PALETTE_BLUE), 0);
    661     lv_anim_set_exec_cb(&a, meter1_indic1_anim_cb);
    662     lv_anim_set_var(&a, indic);
    663     lv_anim_set_time(&a, 4100);
    664     lv_anim_set_playback_time(&a, 2700);
    665     lv_anim_start(&a);
    666 
    667     indic = lv_meter_add_arc(meter1, scale, 15, lv_palette_main(LV_PALETTE_RED), -20);
    668     lv_anim_set_exec_cb(&a, meter1_indic2_anim_cb);
    669     lv_anim_set_var(&a, indic);
    670     lv_anim_set_time(&a, 2600);
    671     lv_anim_set_playback_time(&a, 3200);
    672     a.user_data = indic;
    673     lv_anim_start(&a);
    674 
    675     indic = lv_meter_add_arc(meter1, scale, 15, lv_palette_main(LV_PALETTE_GREEN), -40);
    676     lv_anim_set_exec_cb(&a, meter1_indic3_anim_cb);
    677     lv_anim_set_var(&a, indic);
    678     lv_anim_set_time(&a, 2800);
    679     lv_anim_set_playback_time(&a, 1800);
    680     lv_anim_start(&a);
    681 
    682     meter2 = create_meter_box(parent, "Sessions", "Desktop: ", "Tablet: ", "Mobile: ");
    683     if(disp_size < DISP_LARGE) lv_obj_add_flag(lv_obj_get_parent(meter2), LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    684     scale = lv_meter_add_scale(meter2);
    685     lv_meter_set_scale_range(meter2, scale, 0, 100, 360, 90);
    686     lv_meter_set_scale_ticks(meter2, scale, 0, 0, 0, lv_color_black());
    687 
    688     static lv_meter_indicator_t * meter2_indic[3];
    689     meter2_indic[0] = lv_meter_add_arc(meter2, scale, 20, lv_palette_main(LV_PALETTE_RED), -10);
    690     lv_meter_set_indicator_start_value(meter2, meter2_indic[0], 0);
    691     lv_meter_set_indicator_end_value(meter2, meter2_indic[0], 39);
    692 
    693     meter2_indic[1] = lv_meter_add_arc(meter2, scale, 30, lv_palette_main(LV_PALETTE_BLUE), 0);
    694     lv_meter_set_indicator_start_value(meter2, meter2_indic[1], 40);
    695     lv_meter_set_indicator_end_value(meter2, meter2_indic[1], 69);
    696 
    697     meter2_indic[2] = lv_meter_add_arc(meter2, scale, 10, lv_palette_main(LV_PALETTE_GREEN), -20);
    698     lv_meter_set_indicator_start_value(meter2, meter2_indic[2], 70);
    699     lv_meter_set_indicator_end_value(meter2, meter2_indic[2], 99);
    700 
    701     lv_timer_create(meter2_timer_cb, 100, meter2_indic);
    702 
    703     meter3 = create_meter_box(parent, "Network Speed", "Low speed", "Normal Speed", "High Speed");
    704     if(disp_size < DISP_LARGE) lv_obj_add_flag(lv_obj_get_parent(meter3), LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    705 
    706     /*Add a special circle to the needle's pivot*/
    707     lv_obj_set_style_pad_hor(meter3, 10, 0);
    708     lv_obj_set_style_size(meter3, 10, LV_PART_INDICATOR);
    709     lv_obj_set_style_radius(meter3, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);
    710     lv_obj_set_style_bg_opa(meter3, LV_OPA_COVER, LV_PART_INDICATOR);
    711     lv_obj_set_style_bg_color(meter3, lv_palette_darken(LV_PALETTE_GREY, 4), LV_PART_INDICATOR);
    712     lv_obj_set_style_outline_color(meter3, lv_color_white(), LV_PART_INDICATOR);
    713     lv_obj_set_style_outline_width(meter3, 3, LV_PART_INDICATOR);
    714     lv_obj_set_style_text_color(meter3, lv_palette_darken(LV_PALETTE_GREY, 1), LV_PART_TICKS);
    715 
    716     scale = lv_meter_add_scale(meter3);
    717     lv_meter_set_scale_range(meter3, scale, 10, 60, 220, 360 - 220);
    718     lv_meter_set_scale_ticks(meter3, scale, 21, 3, 17, lv_color_white());
    719     lv_meter_set_scale_major_ticks(meter3, scale, 4, 4, 22, lv_color_white(), 15);
    720 
    721     indic = lv_meter_add_arc(meter3, scale, 10, lv_palette_main(LV_PALETTE_RED), 0);
    722     lv_meter_set_indicator_start_value(meter3, indic, 0);
    723     lv_meter_set_indicator_end_value(meter3, indic, 20);
    724 
    725     indic = lv_meter_add_scale_lines(meter3, scale, lv_palette_darken(LV_PALETTE_RED, 3), lv_palette_darken(LV_PALETTE_RED,
    726                                                                                                             3), true, 0);
    727     lv_meter_set_indicator_start_value(meter3, indic, 0);
    728     lv_meter_set_indicator_end_value(meter3, indic, 20);
    729 
    730     indic = lv_meter_add_arc(meter3, scale, 12, lv_palette_main(LV_PALETTE_BLUE), 0);
    731     lv_meter_set_indicator_start_value(meter3, indic, 20);
    732     lv_meter_set_indicator_end_value(meter3, indic, 40);
    733 
    734     indic = lv_meter_add_scale_lines(meter3, scale, lv_palette_darken(LV_PALETTE_BLUE, 3),
    735                                      lv_palette_darken(LV_PALETTE_BLUE, 3), true, 0);
    736     lv_meter_set_indicator_start_value(meter3, indic, 20);
    737     lv_meter_set_indicator_end_value(meter3, indic, 40);
    738 
    739     indic = lv_meter_add_arc(meter3, scale, 10, lv_palette_main(LV_PALETTE_GREEN), 0);
    740     lv_meter_set_indicator_start_value(meter3, indic, 40);
    741     lv_meter_set_indicator_end_value(meter3, indic, 60);
    742 
    743     indic = lv_meter_add_scale_lines(meter3, scale, lv_palette_darken(LV_PALETTE_GREEN, 3),
    744                                      lv_palette_darken(LV_PALETTE_GREEN, 3), true, 0);
    745     lv_meter_set_indicator_start_value(meter3, indic, 40);
    746     lv_meter_set_indicator_end_value(meter3, indic, 60);
    747 
    748     indic = lv_meter_add_needle_line(meter3, scale, 4, lv_palette_darken(LV_PALETTE_GREY, 4), -25);
    749 
    750     lv_obj_t * mbps_label = lv_label_create(meter3);
    751     lv_label_set_text(mbps_label, "-");
    752     lv_obj_add_style(mbps_label, &style_title, 0);
    753 
    754     lv_obj_t * mbps_unit_label = lv_label_create(meter3);
    755     lv_label_set_text(mbps_unit_label, "Mbps");
    756 
    757     lv_anim_init(&a);
    758     lv_anim_set_values(&a, 10, 60);
    759     lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    760     lv_anim_set_exec_cb(&a, meter3_anim_cb);
    761     lv_anim_set_var(&a, indic);
    762     lv_anim_set_time(&a, 4100);
    763     lv_anim_set_playback_time(&a, 800);
    764     lv_anim_start(&a);
    765 
    766     lv_obj_update_layout(parent);
    767     if(disp_size == DISP_MEDIUM) {
    768         lv_obj_set_size(meter1, 200, 200);
    769         lv_obj_set_size(meter2, 200, 200);
    770         lv_obj_set_size(meter3, 200, 200);
    771     }
    772     else {
    773         lv_coord_t meter_w = lv_obj_get_width(meter1);
    774         lv_obj_set_height(meter1, meter_w);
    775         lv_obj_set_height(meter2, meter_w);
    776         lv_obj_set_height(meter3, meter_w);
    777     }
    778 
    779     lv_obj_align(mbps_label, LV_ALIGN_TOP_MID, 10, lv_pct(55));
    780     lv_obj_align_to(mbps_unit_label, mbps_label, LV_ALIGN_OUT_RIGHT_BOTTOM, 10, 0);
    781 }
    782 
    783 void shop_create(lv_obj_t * parent)
    784 {
    785     lv_obj_set_flex_flow(parent, LV_FLEX_FLOW_ROW_WRAP);
    786 
    787     lv_obj_t * panel1 = lv_obj_create(parent);
    788     lv_obj_set_size(panel1, lv_pct(100), LV_SIZE_CONTENT);
    789     lv_obj_set_style_pad_bottom(panel1, 30, 0);
    790 
    791     lv_obj_t * title = lv_label_create(panel1);
    792     lv_label_set_text(title, "Monthly Summary");
    793     lv_obj_add_style(title, &style_title, 0);
    794 
    795     lv_obj_t * date = lv_label_create(panel1);
    796     lv_label_set_text(date, "8-15 July, 2021");
    797     lv_obj_add_style(date, &style_text_muted, 0);
    798 
    799     lv_obj_t * amount = lv_label_create(panel1);
    800     lv_label_set_text(amount, "$27,123.25");
    801     lv_obj_add_style(amount, &style_title, 0);
    802 
    803     lv_obj_t * hint = lv_label_create(panel1);
    804     lv_label_set_text(hint, LV_SYMBOL_UP" 17% growth this week");
    805     lv_obj_set_style_text_color(hint, lv_palette_main(LV_PALETTE_GREEN), 0);
    806 
    807     chart3 = lv_chart_create(panel1);
    808     lv_chart_set_axis_tick(chart3, LV_CHART_AXIS_PRIMARY_Y, 0, 0, 6, 1, true, 80);
    809     lv_chart_set_axis_tick(chart3, LV_CHART_AXIS_PRIMARY_X, 0, 0, 7, 1, true, 50);
    810     lv_chart_set_type(chart3, LV_CHART_TYPE_BAR);
    811     lv_chart_set_div_line_count(chart3, 6, 0);
    812     lv_chart_set_point_count(chart3, 7);
    813     lv_obj_add_event_cb(chart3, shop_chart_event_cb, LV_EVENT_ALL, NULL);
    814 
    815     ser4 = lv_chart_add_series(chart3, lv_theme_get_color_primary(chart3), LV_CHART_AXIS_PRIMARY_Y);
    816     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    817     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    818     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    819     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    820     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    821     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    822     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    823     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    824     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    825     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    826     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    827     lv_chart_set_next_value(chart3, ser4, lv_rand(60, 90));
    828 
    829     if(disp_size == DISP_LARGE) {
    830         static lv_coord_t grid1_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    831         static lv_coord_t grid1_row_dsc[] = {
    832             LV_GRID_CONTENT,  /*Title*/
    833             LV_GRID_CONTENT,  /*Sub title*/
    834             20,               /*Spacer*/
    835             LV_GRID_CONTENT,  /*Amount*/
    836             LV_GRID_CONTENT,  /*Hint*/
    837             LV_GRID_TEMPLATE_LAST
    838         };
    839 
    840         lv_obj_set_size(chart3, lv_pct(100), lv_pct(100));
    841         lv_obj_set_style_pad_column(chart3, LV_DPX(30), 0);
    842 
    843 
    844         lv_obj_set_grid_dsc_array(panel1, grid1_col_dsc, grid1_row_dsc);
    845         lv_obj_set_grid_cell(title, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 0, 1);
    846         lv_obj_set_grid_cell(date, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 1, 1);
    847         lv_obj_set_grid_cell(amount, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 3, 1);
    848         lv_obj_set_grid_cell(hint, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 4, 1);
    849         lv_obj_set_grid_cell(chart3, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_STRETCH, 0, 5);
    850     }
    851     else if(disp_size == DISP_MEDIUM) {
    852         static lv_coord_t grid1_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    853         static lv_coord_t grid1_row_dsc[] = {
    854             LV_GRID_CONTENT,  /*Title + Date*/
    855             LV_GRID_CONTENT,  /*Amount + Hint*/
    856             200,              /*Chart*/
    857             LV_GRID_TEMPLATE_LAST
    858         };
    859 
    860         lv_obj_update_layout(panel1);
    861         lv_obj_set_width(chart3, lv_obj_get_content_width(panel1) - 20);
    862         lv_obj_set_style_pad_column(chart3, LV_DPX(30), 0);
    863 
    864         lv_obj_set_grid_dsc_array(panel1, grid1_col_dsc, grid1_row_dsc);
    865         lv_obj_set_grid_cell(title, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_CENTER, 0, 1);
    866         lv_obj_set_grid_cell(date, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_CENTER, 0, 1);
    867         lv_obj_set_grid_cell(amount, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_CENTER, 1, 1);
    868         lv_obj_set_grid_cell(hint, LV_GRID_ALIGN_START, 1, 1, LV_GRID_ALIGN_CENTER, 1, 1);
    869         lv_obj_set_grid_cell(chart3, LV_GRID_ALIGN_END, 0, 2, LV_GRID_ALIGN_STRETCH, 2, 1);
    870     }
    871     else if(disp_size == DISP_SMALL) {
    872         static lv_coord_t grid1_col_dsc[] = {LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
    873         static lv_coord_t grid1_row_dsc[] = {
    874             LV_GRID_CONTENT,  /*Title*/
    875             LV_GRID_CONTENT,  /*Date*/
    876             LV_GRID_CONTENT,  /*Amount*/
    877             LV_GRID_CONTENT,  /*Hint*/
    878             LV_GRID_CONTENT,  /*Chart*/
    879             LV_GRID_TEMPLATE_LAST
    880         };
    881 
    882         lv_obj_set_width(chart3, LV_PCT(95));
    883         lv_obj_set_height(chart3, LV_VER_RES - 70);
    884         lv_obj_set_style_max_height(chart3, 300, 0);
    885         lv_chart_set_zoom_x(chart3, 512);
    886 
    887         lv_obj_set_grid_dsc_array(panel1, grid1_col_dsc, grid1_row_dsc);
    888         lv_obj_set_grid_cell(title, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 0, 1);
    889         lv_obj_set_grid_cell(date, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 1, 1);
    890         lv_obj_set_grid_cell(amount, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1);
    891         lv_obj_set_grid_cell(hint, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 3, 1);
    892         lv_obj_set_grid_cell(chart3, LV_GRID_ALIGN_END, 0, 1, LV_GRID_ALIGN_START, 4, 1);
    893     }
    894 
    895     lv_obj_t * list = lv_obj_create(parent);
    896     if(disp_size == DISP_SMALL) {
    897         lv_obj_add_flag(list, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    898         lv_obj_set_height(list, LV_PCT(100));
    899     }
    900     else {
    901         lv_obj_set_height(list, LV_PCT(100));
    902         lv_obj_set_style_max_height(list, 300, 0);
    903     }
    904 
    905     lv_obj_set_flex_flow(list, LV_FLEX_FLOW_COLUMN);
    906     lv_obj_set_flex_grow(list, 1);
    907     lv_obj_add_flag(list, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    908 
    909     title = lv_label_create(list);
    910     lv_label_set_text(title, "Top products");
    911     lv_obj_add_style(title, &style_title, 0);
    912 
    913     LV_IMG_DECLARE(img_clothes);
    914     create_shop_item(list, &img_clothes, "Blue jeans", "Clothes", "$722");
    915     create_shop_item(list, &img_clothes, "Blue jeans", "Clothes", "$411");
    916     create_shop_item(list, &img_clothes, "Blue jeans", "Clothes", "$917");
    917     create_shop_item(list, &img_clothes, "Blue jeans", "Clothes", "$64");
    918     create_shop_item(list, &img_clothes, "Blue jeans", "Clothes", "$805");
    919 
    920     lv_obj_t * notifications = lv_obj_create(parent);
    921     if(disp_size == DISP_SMALL) {
    922         lv_obj_add_flag(notifications, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    923         lv_obj_set_height(notifications, LV_PCT(100));
    924     }
    925     else  {
    926         lv_obj_set_height(notifications, LV_PCT(100));
    927         lv_obj_set_style_max_height(notifications, 300, 0);
    928     }
    929 
    930     lv_obj_set_flex_flow(notifications, LV_FLEX_FLOW_COLUMN);
    931     lv_obj_set_flex_grow(notifications, 1);
    932 
    933     title = lv_label_create(notifications);
    934     lv_label_set_text(title, "Notification");
    935     lv_obj_add_style(title, &style_title, 0);
    936 
    937     lv_obj_t * cb;
    938     cb = lv_checkbox_create(notifications);
    939     lv_checkbox_set_text(cb, "Item purchased");
    940 
    941     cb = lv_checkbox_create(notifications);
    942     lv_checkbox_set_text(cb, "New connection");
    943 
    944     cb = lv_checkbox_create(notifications);
    945     lv_checkbox_set_text(cb, "New subscriber");
    946     lv_obj_add_state(cb, LV_STATE_CHECKED);
    947 
    948     cb = lv_checkbox_create(notifications);
    949     lv_checkbox_set_text(cb, "New message");
    950     lv_obj_add_state(cb, LV_STATE_DISABLED);
    951 
    952     cb = lv_checkbox_create(notifications);
    953     lv_checkbox_set_text(cb, "Milestone reached");
    954     lv_obj_add_state(cb, LV_STATE_CHECKED | LV_STATE_DISABLED);
    955 
    956     cb = lv_checkbox_create(notifications);
    957     lv_checkbox_set_text(cb, "Out of stock");
    958 
    959 
    960 }
    961 
    962 static void color_changer_create(lv_obj_t * parent)
    963 {
    964     static lv_palette_t palette[] = {
    965         LV_PALETTE_BLUE, LV_PALETTE_GREEN, LV_PALETTE_BLUE_GREY,  LV_PALETTE_ORANGE,
    966         LV_PALETTE_RED, LV_PALETTE_PURPLE, LV_PALETTE_TEAL, _LV_PALETTE_LAST
    967     };
    968 
    969     lv_obj_t * color_cont = lv_obj_create(parent);
    970     lv_obj_remove_style_all(color_cont);
    971     lv_obj_set_flex_flow(color_cont, LV_FLEX_FLOW_ROW);
    972     lv_obj_set_flex_align(color_cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
    973     lv_obj_add_flag(color_cont, LV_OBJ_FLAG_FLOATING);
    974 
    975     lv_obj_set_style_bg_color(color_cont, lv_color_white(), 0);
    976     lv_obj_set_style_pad_right(color_cont, disp_size == DISP_SMALL ? LV_DPX(47) : LV_DPX(55), 0);
    977     lv_obj_set_style_bg_opa(color_cont, LV_OPA_COVER, 0);
    978     lv_obj_set_style_radius(color_cont, LV_RADIUS_CIRCLE, 0);
    979 
    980     if(disp_size == DISP_SMALL) lv_obj_set_size(color_cont, LV_DPX(52), LV_DPX(52));
    981     else lv_obj_set_size(color_cont, LV_DPX(60), LV_DPX(60));
    982 
    983     lv_obj_align(color_cont, LV_ALIGN_BOTTOM_RIGHT, - LV_DPX(10),  - LV_DPX(10));
    984 
    985     uint32_t i;
    986     for(i = 0; palette[i] != _LV_PALETTE_LAST; i++) {
    987         lv_obj_t * c = lv_btn_create(color_cont);
    988         lv_obj_set_style_bg_color(c, lv_palette_main(palette[i]), 0);
    989         lv_obj_set_style_radius(c, LV_RADIUS_CIRCLE, 0);
    990         lv_obj_set_style_opa(c, LV_OPA_TRANSP, 0);
    991         lv_obj_set_size(c, 20, 20);
    992         lv_obj_add_event_cb(c, color_event_cb, LV_EVENT_ALL, &palette[i]);
    993         lv_obj_clear_flag(c, LV_OBJ_FLAG_SCROLL_ON_FOCUS);
    994     }
    995 
    996     lv_obj_t * btn = lv_btn_create(parent);
    997     lv_obj_add_flag(btn, LV_OBJ_FLAG_FLOATING | LV_OBJ_FLAG_CLICKABLE);
    998     lv_obj_set_style_bg_color(btn, lv_color_white(), LV_STATE_CHECKED);
    999     lv_obj_set_style_pad_all(btn, 10, 0);
   1000     lv_obj_set_style_radius(btn, LV_RADIUS_CIRCLE, 0);
   1001     lv_obj_add_event_cb(btn, color_changer_event_cb, LV_EVENT_ALL, color_cont);
   1002     lv_obj_set_style_shadow_width(btn, 0, 0);
   1003     lv_obj_set_style_bg_img_src(btn, LV_SYMBOL_TINT, 0);
   1004 
   1005     if(disp_size == DISP_SMALL) {
   1006         lv_obj_set_size(btn, LV_DPX(42), LV_DPX(42));
   1007         lv_obj_align(btn, LV_ALIGN_BOTTOM_RIGHT, -LV_DPX(15), -LV_DPX(15));
   1008     }
   1009     else {
   1010         lv_obj_set_size(btn, LV_DPX(50), LV_DPX(50));
   1011         lv_obj_align(btn, LV_ALIGN_BOTTOM_RIGHT, -LV_DPX(15), -LV_DPX(15));
   1012     }
   1013 }
   1014 
   1015 static void color_changer_anim_cb(void * var, int32_t v)
   1016 {
   1017     lv_obj_t * obj = var;
   1018     lv_coord_t max_w = lv_obj_get_width(lv_obj_get_parent(obj)) - LV_DPX(20);
   1019     lv_coord_t w;
   1020 
   1021     if(disp_size == DISP_SMALL) {
   1022         w = lv_map(v, 0, 256, LV_DPX(52), max_w);
   1023         lv_obj_set_width(obj, w);
   1024         lv_obj_align(obj, LV_ALIGN_BOTTOM_RIGHT, - LV_DPX(10),  - LV_DPX(10));
   1025     }
   1026     else {
   1027         w = lv_map(v, 0, 256, LV_DPX(60), max_w);
   1028         lv_obj_set_width(obj, w);
   1029         lv_obj_align(obj, LV_ALIGN_BOTTOM_RIGHT, - LV_DPX(10),  - LV_DPX(10));
   1030     }
   1031 
   1032     if(v > LV_OPA_COVER) v = LV_OPA_COVER;
   1033 
   1034     uint32_t i;
   1035     for(i = 0; i < lv_obj_get_child_cnt(obj); i++) {
   1036         lv_obj_set_style_opa(lv_obj_get_child(obj, i), v, 0);
   1037     }
   1038 
   1039 }
   1040 
   1041 static void color_changer_event_cb(lv_event_t * e)
   1042 {
   1043     if(lv_event_get_code(e) == LV_EVENT_CLICKED) {
   1044         lv_obj_t * color_cont = lv_event_get_user_data(e);
   1045         if(lv_obj_get_width(color_cont) < LV_HOR_RES / 2) {
   1046             lv_anim_t a;
   1047             lv_anim_init(&a);
   1048             lv_anim_set_var(&a, color_cont);
   1049             lv_anim_set_exec_cb(&a, color_changer_anim_cb);
   1050             lv_anim_set_values(&a, 0, 256);
   1051             lv_anim_set_time(&a, 200);
   1052             lv_anim_start(&a);
   1053         }
   1054         else {
   1055             lv_anim_t a;
   1056             lv_anim_init(&a);
   1057             lv_anim_set_var(&a, color_cont);
   1058             lv_anim_set_exec_cb(&a, color_changer_anim_cb);
   1059             lv_anim_set_values(&a, 256, 0);
   1060             lv_anim_set_time(&a, 200);
   1061             lv_anim_start(&a);
   1062         }
   1063     }
   1064 }
   1065 static void color_event_cb(lv_event_t * e)
   1066 {
   1067     lv_event_code_t code = lv_event_get_code(e);
   1068     lv_obj_t * obj = lv_event_get_target(e);
   1069 
   1070     if(code == LV_EVENT_FOCUSED) {
   1071         lv_obj_t * color_cont = lv_obj_get_parent(obj);
   1072         if(lv_obj_get_width(color_cont) < LV_HOR_RES / 2) {
   1073             lv_anim_t a;
   1074             lv_anim_init(&a);
   1075             lv_anim_set_var(&a, color_cont);
   1076             lv_anim_set_exec_cb(&a, color_changer_anim_cb);
   1077             lv_anim_set_values(&a, 0, 256);
   1078             lv_anim_set_time(&a, 200);
   1079             lv_anim_start(&a);
   1080         }
   1081     }
   1082     else if(code == LV_EVENT_CLICKED) {
   1083         lv_palette_t * palette_primary = lv_event_get_user_data(e);
   1084         lv_palette_t palette_secondary = (*palette_primary) + 3; /*Use another palette as secondary*/
   1085         if(palette_secondary >= _LV_PALETTE_LAST) palette_secondary = 0;
   1086 
   1087         lv_theme_default_init(NULL, lv_palette_main(*palette_primary), lv_palette_main(palette_secondary),
   1088                               LV_THEME_DEFAULT_DARK, font_normal);
   1089 
   1090         lv_color_t color = lv_palette_main(*palette_primary);
   1091         lv_style_set_text_color(&style_icon, color);
   1092         lv_chart_set_series_color(chart1, ser1, color);
   1093         lv_chart_set_series_color(chart2, ser3, color);
   1094     }
   1095 }
   1096 
   1097 static lv_obj_t * create_meter_box(lv_obj_t * parent, const char * title, const char * text1, const char * text2,
   1098                                    const char * text3)
   1099 {
   1100     lv_obj_t * cont = lv_obj_create(parent);
   1101     lv_obj_set_height(cont, LV_SIZE_CONTENT);
   1102     lv_obj_set_flex_grow(cont, 1);
   1103 
   1104     lv_obj_t * title_label = lv_label_create(cont);
   1105     lv_label_set_text(title_label, title);
   1106     lv_obj_add_style(title_label, &style_title, 0);
   1107 
   1108     lv_obj_t * meter = lv_meter_create(cont);
   1109     lv_obj_remove_style(meter, NULL, LV_PART_MAIN);
   1110     lv_obj_remove_style(meter, NULL, LV_PART_INDICATOR);
   1111     lv_obj_set_width(meter, LV_PCT(100));
   1112 
   1113     lv_obj_t * bullet1 = lv_obj_create(cont);
   1114     lv_obj_set_size(bullet1, 13, 13);
   1115     lv_obj_remove_style(bullet1, NULL, LV_PART_SCROLLBAR);
   1116     lv_obj_add_style(bullet1, &style_bullet, 0);
   1117     lv_obj_set_style_bg_color(bullet1, lv_palette_main(LV_PALETTE_RED), 0);
   1118     lv_obj_t * label1 = lv_label_create(cont);
   1119     lv_label_set_text(label1, text1);
   1120 
   1121     lv_obj_t * bullet2 = lv_obj_create(cont);
   1122     lv_obj_set_size(bullet2, 13, 13);
   1123     lv_obj_remove_style(bullet2, NULL, LV_PART_SCROLLBAR);
   1124     lv_obj_add_style(bullet2, &style_bullet, 0);
   1125     lv_obj_set_style_bg_color(bullet2, lv_palette_main(LV_PALETTE_BLUE), 0);
   1126     lv_obj_t * label2 = lv_label_create(cont);
   1127     lv_label_set_text(label2, text2);
   1128 
   1129     lv_obj_t * bullet3 = lv_obj_create(cont);
   1130     lv_obj_set_size(bullet3, 13, 13);
   1131     lv_obj_remove_style(bullet3,  NULL, LV_PART_SCROLLBAR);
   1132     lv_obj_add_style(bullet3, &style_bullet, 0);
   1133     lv_obj_set_style_bg_color(bullet3, lv_palette_main(LV_PALETTE_GREEN), 0);
   1134     lv_obj_t * label3 = lv_label_create(cont);
   1135     lv_label_set_text(label3, text3);
   1136 
   1137     if(disp_size == DISP_MEDIUM) {
   1138         static lv_coord_t grid_col_dsc[] = {LV_GRID_CONTENT, LV_GRID_FR(1), LV_GRID_CONTENT, LV_GRID_FR(8), LV_GRID_TEMPLATE_LAST};
   1139         static lv_coord_t grid_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_FR(1), LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
   1140 
   1141         lv_obj_set_grid_dsc_array(cont, grid_col_dsc, grid_row_dsc);
   1142         lv_obj_set_grid_cell(title_label, LV_GRID_ALIGN_START, 0, 4, LV_GRID_ALIGN_START, 0, 1);
   1143         lv_obj_set_grid_cell(meter, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 1, 3);
   1144         lv_obj_set_grid_cell(bullet1, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_CENTER, 2, 1);
   1145         lv_obj_set_grid_cell(bullet2, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_CENTER, 3, 1);
   1146         lv_obj_set_grid_cell(bullet3, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_CENTER, 4, 1);
   1147         lv_obj_set_grid_cell(label1, LV_GRID_ALIGN_STRETCH, 3, 1, LV_GRID_ALIGN_CENTER, 2, 1);
   1148         lv_obj_set_grid_cell(label2, LV_GRID_ALIGN_STRETCH, 3, 1, LV_GRID_ALIGN_CENTER, 3, 1);
   1149         lv_obj_set_grid_cell(label3, LV_GRID_ALIGN_STRETCH, 3, 1, LV_GRID_ALIGN_CENTER, 4, 1);
   1150     }
   1151     else {
   1152         static lv_coord_t grid_col_dsc[] = {LV_GRID_CONTENT, LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
   1153         static lv_coord_t grid_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};
   1154         lv_obj_set_grid_dsc_array(cont, grid_col_dsc, grid_row_dsc);
   1155         lv_obj_set_grid_cell(title_label, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 0, 1);
   1156         lv_obj_set_grid_cell(meter, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_START, 1, 1);
   1157         lv_obj_set_grid_cell(bullet1, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1);
   1158         lv_obj_set_grid_cell(bullet2, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 3, 1);
   1159         lv_obj_set_grid_cell(bullet3, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 4, 1);
   1160         lv_obj_set_grid_cell(label1, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 2, 1);
   1161         lv_obj_set_grid_cell(label2, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 3, 1);
   1162         lv_obj_set_grid_cell(label3, LV_GRID_ALIGN_STRETCH, 1, 1, LV_GRID_ALIGN_START, 4, 1);
   1163     }
   1164 
   1165 
   1166     return meter;
   1167 
   1168 }
   1169 
   1170 static lv_obj_t * create_shop_item(lv_obj_t * parent, const void * img_src, const char * name, const char * category,
   1171                                    const char * price)
   1172 {
   1173     static lv_coord_t grid_col_dsc[] = {LV_GRID_CONTENT, 5, LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
   1174     static lv_coord_t grid_row_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
   1175 
   1176     lv_obj_t * cont = lv_obj_create(parent);
   1177     lv_obj_remove_style_all(cont);
   1178     lv_obj_set_size(cont, LV_PCT(100), LV_SIZE_CONTENT);
   1179     lv_obj_set_grid_dsc_array(cont, grid_col_dsc, grid_row_dsc);
   1180 
   1181     lv_obj_t * img = lv_img_create(cont);
   1182     lv_img_set_src(img, img_src);
   1183     lv_obj_set_grid_cell(img, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 0, 2);
   1184 
   1185     lv_obj_t * label;
   1186     label = lv_label_create(cont);
   1187     lv_label_set_text(label, name);
   1188     lv_obj_set_grid_cell(label, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_END, 0, 1);
   1189 
   1190     label = lv_label_create(cont);
   1191     lv_label_set_text(label, category);
   1192     lv_obj_add_style(label, &style_text_muted, 0);
   1193     lv_obj_set_grid_cell(label, LV_GRID_ALIGN_START, 2, 1, LV_GRID_ALIGN_START, 1, 1);
   1194 
   1195     label = lv_label_create(cont);
   1196     lv_label_set_text(label, price);
   1197     lv_obj_set_grid_cell(label, LV_GRID_ALIGN_END, 3, 1, LV_GRID_ALIGN_END, 0, 1);
   1198 
   1199     return cont;
   1200 }
   1201 
   1202 static void ta_event_cb(lv_event_t * e)
   1203 {
   1204     lv_event_code_t code = lv_event_get_code(e);
   1205     lv_obj_t * ta = lv_event_get_target(e);
   1206     lv_obj_t * kb = lv_event_get_user_data(e);
   1207     if(code == LV_EVENT_FOCUSED) {
   1208         if(lv_indev_get_type(lv_indev_get_act()) != LV_INDEV_TYPE_KEYPAD) {
   1209             lv_keyboard_set_textarea(kb, ta);
   1210             lv_obj_set_style_max_height(kb, LV_HOR_RES * 2 / 3, 0);
   1211             lv_obj_update_layout(tv);   /*Be sure the sizes are recalculated*/
   1212             lv_obj_set_height(tv, LV_VER_RES - lv_obj_get_height(kb));
   1213             lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);
   1214             lv_obj_scroll_to_view_recursive(ta, LV_ANIM_OFF);
   1215         }
   1216     }
   1217     else if(code == LV_EVENT_DEFOCUSED) {
   1218         lv_keyboard_set_textarea(kb, NULL);
   1219         lv_obj_set_height(tv, LV_VER_RES);
   1220         lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
   1221         lv_indev_reset(NULL, ta);
   1222 
   1223     }
   1224     else if(code == LV_EVENT_READY || code == LV_EVENT_CANCEL) {
   1225         lv_obj_set_height(tv, LV_VER_RES);
   1226         lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
   1227         lv_obj_clear_state(ta, LV_STATE_FOCUSED);
   1228         lv_indev_reset(NULL, ta);   /*To forget the last clicked object to make it focusable again*/
   1229     }
   1230 }
   1231 
   1232 static void birthday_event_cb(lv_event_t * e)
   1233 {
   1234     lv_event_code_t code = lv_event_get_code(e);
   1235     lv_obj_t * ta = lv_event_get_target(e);
   1236 
   1237     if(code == LV_EVENT_FOCUSED) {
   1238         if(lv_indev_get_type(lv_indev_get_act()) == LV_INDEV_TYPE_POINTER) {
   1239             if(calendar == NULL) {
   1240                 lv_obj_add_flag(lv_layer_top(), LV_OBJ_FLAG_CLICKABLE);
   1241                 calendar = lv_calendar_create(lv_layer_top());
   1242                 lv_obj_set_style_bg_opa(lv_layer_top(), LV_OPA_50, 0);
   1243                 lv_obj_set_style_bg_color(lv_layer_top(), lv_palette_main(LV_PALETTE_GREY), 0);
   1244                 if(disp_size == DISP_SMALL) lv_obj_set_size(calendar, 180, 200);
   1245                 else if(disp_size == DISP_MEDIUM) lv_obj_set_size(calendar, 200, 220);
   1246                 else  lv_obj_set_size(calendar, 300, 330);
   1247                 lv_calendar_set_showed_date(calendar, 1990, 01);
   1248                 lv_obj_align(calendar, LV_ALIGN_CENTER, 0, 30);
   1249                 lv_obj_add_event_cb(calendar, calendar_event_cb, LV_EVENT_ALL, ta);
   1250 
   1251                 lv_calendar_header_dropdown_create(calendar);
   1252             }
   1253         }
   1254     }
   1255 }
   1256 
   1257 static void calendar_event_cb(lv_event_t * e)
   1258 {
   1259     lv_event_code_t code = lv_event_get_code(e);
   1260     lv_obj_t * ta = lv_event_get_user_data(e);
   1261     lv_obj_t * obj = lv_event_get_current_target(e);
   1262     if(code == LV_EVENT_VALUE_CHANGED) {
   1263         lv_calendar_date_t d;
   1264         lv_calendar_get_pressed_date(obj, &d);
   1265         char buf[32];
   1266         lv_snprintf(buf, sizeof(buf), "%02d.%02d.%d", d.day, d.month, d.year);
   1267         lv_textarea_set_text(ta, buf);
   1268 
   1269         lv_obj_del(calendar);
   1270         calendar = NULL;
   1271         lv_obj_clear_flag(lv_layer_top(), LV_OBJ_FLAG_CLICKABLE);
   1272         lv_obj_set_style_bg_opa(lv_layer_top(), LV_OPA_TRANSP, 0);
   1273     }
   1274 }
   1275 
   1276 static void slider_event_cb(lv_event_t * e)
   1277 {
   1278     lv_event_code_t code = lv_event_get_code(e);
   1279     lv_obj_t * obj = lv_event_get_target(e);
   1280 
   1281     if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
   1282         lv_coord_t * s = lv_event_get_param(e);
   1283         *s = LV_MAX(*s, 60);
   1284     }
   1285     else if(code == LV_EVENT_DRAW_PART_END) {
   1286         lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);
   1287         if(dsc->part == LV_PART_KNOB && lv_obj_has_state(obj, LV_STATE_PRESSED)) {
   1288             char buf[8];
   1289             lv_snprintf(buf, sizeof(buf), "%"LV_PRId32, lv_slider_get_value(obj));
   1290 
   1291             lv_point_t text_size;
   1292             lv_txt_get_size(&text_size, buf, font_normal, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE);
   1293 
   1294             lv_area_t txt_area;
   1295             txt_area.x1 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2 - text_size.x / 2;
   1296             txt_area.x2 = txt_area.x1 + text_size.x;
   1297             txt_area.y2 = dsc->draw_area->y1 - 10;
   1298             txt_area.y1 = txt_area.y2 - text_size.y;
   1299 
   1300             lv_area_t bg_area;
   1301             bg_area.x1 = txt_area.x1 - LV_DPX(8);
   1302             bg_area.x2 = txt_area.x2 + LV_DPX(8);
   1303             bg_area.y1 = txt_area.y1 - LV_DPX(8);
   1304             bg_area.y2 = txt_area.y2 + LV_DPX(8);
   1305 
   1306             lv_draw_rect_dsc_t rect_dsc;
   1307             lv_draw_rect_dsc_init(&rect_dsc);
   1308             rect_dsc.bg_color = lv_palette_darken(LV_PALETTE_GREY, 3);
   1309             rect_dsc.radius = LV_DPX(5);
   1310             lv_draw_rect(dsc->draw_ctx, &rect_dsc, &bg_area);
   1311 
   1312             lv_draw_label_dsc_t label_dsc;
   1313             lv_draw_label_dsc_init(&label_dsc);
   1314             label_dsc.color = lv_color_white();
   1315             label_dsc.font = font_normal;
   1316             lv_draw_label(dsc->draw_ctx, &label_dsc, &txt_area, buf, NULL);
   1317         }
   1318     }
   1319 }
   1320 
   1321 static void chart_event_cb(lv_event_t * e)
   1322 {
   1323     lv_event_code_t code = lv_event_get_code(e);
   1324     lv_obj_t * obj = lv_event_get_target(e);
   1325 
   1326     if(code == LV_EVENT_PRESSED || code == LV_EVENT_RELEASED) {
   1327         lv_obj_invalidate(obj); /*To make the value boxes visible*/
   1328     }
   1329     else if(code == LV_EVENT_DRAW_PART_BEGIN) {
   1330         lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);
   1331         /*Set the markers' text*/
   1332         if(dsc->part == LV_PART_TICKS && dsc->id == LV_CHART_AXIS_PRIMARY_X) {
   1333             if(lv_chart_get_type(obj) == LV_CHART_TYPE_BAR) {
   1334                 const char * month[] = {"I", "II", "III", "IV", "V", "VI", "VII", "VIII", "IX", "X", "XI", "XII"};
   1335                 lv_snprintf(dsc->text, dsc->text_length, "%s", month[dsc->value]);
   1336             }
   1337             else {
   1338                 const char * month[] = {"Jan", "Febr", "March", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"};
   1339                 lv_snprintf(dsc->text, dsc->text_length, "%s", month[dsc->value]);
   1340             }
   1341         }
   1342 
   1343         /*Add the faded area before the lines are drawn */
   1344         else if(dsc->part == LV_PART_ITEMS) {
   1345 #if LV_DRAW_COMPLEX
   1346             /*Add  a line mask that keeps the area below the line*/
   1347             if(dsc->p1 && dsc->p2) {
   1348                 lv_draw_mask_line_param_t line_mask_param;
   1349                 lv_draw_mask_line_points_init(&line_mask_param, dsc->p1->x, dsc->p1->y, dsc->p2->x, dsc->p2->y,
   1350                                               LV_DRAW_MASK_LINE_SIDE_BOTTOM);
   1351                 int16_t line_mask_id = lv_draw_mask_add(&line_mask_param, NULL);
   1352 
   1353                 /*Add a fade effect: transparent bottom covering top*/
   1354                 lv_coord_t h = lv_obj_get_height(obj);
   1355                 lv_draw_mask_fade_param_t fade_mask_param;
   1356                 lv_draw_mask_fade_init(&fade_mask_param, &obj->coords, LV_OPA_COVER, obj->coords.y1 + h / 8, LV_OPA_TRANSP,
   1357                                        obj->coords.y2);
   1358                 int16_t fade_mask_id = lv_draw_mask_add(&fade_mask_param, NULL);
   1359 
   1360                 /*Draw a rectangle that will be affected by the mask*/
   1361                 lv_draw_rect_dsc_t draw_rect_dsc;
   1362                 lv_draw_rect_dsc_init(&draw_rect_dsc);
   1363                 draw_rect_dsc.bg_opa = LV_OPA_50;
   1364                 draw_rect_dsc.bg_color = dsc->line_dsc->color;
   1365 
   1366                 lv_area_t obj_clip_area;
   1367                 _lv_area_intersect(&obj_clip_area, dsc->draw_ctx->clip_area, &obj->coords);
   1368                 const lv_area_t * clip_area_ori = dsc->draw_ctx->clip_area;
   1369                 dsc->draw_ctx->clip_area = &obj_clip_area;
   1370                 lv_area_t a;
   1371                 a.x1 = dsc->p1->x;
   1372                 a.x2 = dsc->p2->x - 1;
   1373                 a.y1 = LV_MIN(dsc->p1->y, dsc->p2->y);
   1374                 a.y2 = obj->coords.y2;
   1375                 lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);
   1376                 dsc->draw_ctx->clip_area = clip_area_ori;
   1377                 /*Remove the masks*/
   1378                 lv_draw_mask_remove_id(line_mask_id);
   1379                 lv_draw_mask_remove_id(fade_mask_id);
   1380             }
   1381 #endif
   1382 
   1383 
   1384             const lv_chart_series_t * ser = dsc->sub_part_ptr;
   1385 
   1386             if(lv_chart_get_pressed_point(obj) == dsc->id) {
   1387                 if(lv_chart_get_type(obj) == LV_CHART_TYPE_LINE) {
   1388                     dsc->rect_dsc->outline_color = lv_color_white();
   1389                     dsc->rect_dsc->outline_width = 2;
   1390                 }
   1391                 else {
   1392                     dsc->rect_dsc->shadow_color = ser->color;
   1393                     dsc->rect_dsc->shadow_width = 15;
   1394                     dsc->rect_dsc->shadow_spread = 0;
   1395                 }
   1396 
   1397                 char buf[8];
   1398                 lv_snprintf(buf, sizeof(buf), "%"LV_PRIu32, dsc->value);
   1399 
   1400                 lv_point_t text_size;
   1401                 lv_txt_get_size(&text_size, buf, font_normal, 0, 0, LV_COORD_MAX, LV_TEXT_FLAG_NONE);
   1402 
   1403                 lv_area_t txt_area;
   1404                 if(lv_chart_get_type(obj) == LV_CHART_TYPE_BAR) {
   1405                     txt_area.y2 = dsc->draw_area->y1 - LV_DPX(15);
   1406                     txt_area.y1 = txt_area.y2 - text_size.y;
   1407                     if(ser == lv_chart_get_series_next(obj, NULL)) {
   1408                         txt_area.x1 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2;
   1409                         txt_area.x2 = txt_area.x1 + text_size.x;
   1410                     }
   1411                     else {
   1412                         txt_area.x2 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2;
   1413                         txt_area.x1 = txt_area.x2 - text_size.x;
   1414                     }
   1415                 }
   1416                 else {
   1417                     txt_area.x1 = dsc->draw_area->x1 + lv_area_get_width(dsc->draw_area) / 2 - text_size.x / 2;
   1418                     txt_area.x2 = txt_area.x1 + text_size.x;
   1419                     txt_area.y2 = dsc->draw_area->y1 - LV_DPX(15);
   1420                     txt_area.y1 = txt_area.y2 - text_size.y;
   1421                 }
   1422 
   1423                 lv_area_t bg_area;
   1424                 bg_area.x1 = txt_area.x1 - LV_DPX(8);
   1425                 bg_area.x2 = txt_area.x2 + LV_DPX(8);
   1426                 bg_area.y1 = txt_area.y1 - LV_DPX(8);
   1427                 bg_area.y2 = txt_area.y2 + LV_DPX(8);
   1428 
   1429                 lv_draw_rect_dsc_t rect_dsc;
   1430                 lv_draw_rect_dsc_init(&rect_dsc);
   1431                 rect_dsc.bg_color = ser->color;
   1432                 rect_dsc.radius = LV_DPX(5);
   1433                 lv_draw_rect(dsc->draw_ctx, &rect_dsc, &bg_area);
   1434 
   1435                 lv_draw_label_dsc_t label_dsc;
   1436                 lv_draw_label_dsc_init(&label_dsc);
   1437                 label_dsc.color = lv_color_white();
   1438                 label_dsc.font = font_normal;
   1439                 lv_draw_label(dsc->draw_ctx, &label_dsc, &txt_area,  buf, NULL);
   1440             }
   1441             else {
   1442                 dsc->rect_dsc->outline_width = 0;
   1443                 dsc->rect_dsc->shadow_width = 0;
   1444             }
   1445         }
   1446     }
   1447 }
   1448 
   1449 
   1450 static void shop_chart_event_cb(lv_event_t * e)
   1451 {
   1452     lv_event_code_t code = lv_event_get_code(e);
   1453     if(code == LV_EVENT_DRAW_PART_BEGIN) {
   1454         lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);
   1455         /*Set the markers' text*/
   1456         if(dsc->part == LV_PART_TICKS && dsc->id == LV_CHART_AXIS_PRIMARY_X) {
   1457             const char * month[] = {"Jan", "Febr", "March", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"};
   1458             lv_snprintf(dsc->text, dsc->text_length, "%s", month[dsc->value]);
   1459         }
   1460         if(dsc->part == LV_PART_ITEMS) {
   1461             dsc->rect_dsc->bg_opa = LV_OPA_TRANSP; /*We will draw it later*/
   1462         }
   1463     }
   1464     if(code == LV_EVENT_DRAW_PART_END) {
   1465         lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);
   1466         /*Add the faded area before the lines are drawn */
   1467         if(dsc->part == LV_PART_ITEMS) {
   1468             static const uint32_t devices[10] = {32, 43, 21, 56, 29, 36, 19, 25, 62, 35};
   1469             static const uint32_t clothes[10] = {12, 19, 23, 31, 27, 32, 32, 11, 21, 32};
   1470             static const uint32_t services[10] = {56, 38, 56, 13, 44, 32, 49, 64, 17, 33};
   1471 
   1472             lv_draw_rect_dsc_t draw_rect_dsc;
   1473             lv_draw_rect_dsc_init(&draw_rect_dsc);
   1474 
   1475             lv_coord_t h = lv_area_get_height(dsc->draw_area);
   1476 
   1477             lv_area_t a;
   1478             a.x1 = dsc->draw_area->x1;
   1479             a.x2 = dsc->draw_area->x2;
   1480 
   1481             a.y1 = dsc->draw_area->y1;
   1482             a.y2 = a.y1 + 4 + (devices[dsc->id] * h) / 100; /*+4 to overlap the radius*/
   1483             draw_rect_dsc.bg_color = lv_palette_main(LV_PALETTE_RED);
   1484             draw_rect_dsc.radius = 4;
   1485             lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);
   1486 
   1487             a.y1 = a.y2 - 4;                                    /*-4 to overlap the radius*/
   1488             a.y2 = a.y1 + (clothes[dsc->id] * h) / 100;
   1489             draw_rect_dsc.bg_color = lv_palette_main(LV_PALETTE_BLUE);
   1490             draw_rect_dsc.radius = 0;
   1491             lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);
   1492 
   1493             a.y1 = a.y2;
   1494             a.y2 = a.y1 + (services[dsc->id] * h) / 100;
   1495             draw_rect_dsc.bg_color = lv_palette_main(LV_PALETTE_GREEN);
   1496             lv_draw_rect(dsc->draw_ctx, &draw_rect_dsc, &a);
   1497         }
   1498     }
   1499 }
   1500 
   1501 
   1502 static void meter1_indic1_anim_cb(void * var, int32_t v)
   1503 {
   1504     lv_meter_set_indicator_end_value(meter1, var, v);
   1505 
   1506     lv_obj_t * card = lv_obj_get_parent(meter1);
   1507     lv_obj_t * label = lv_obj_get_child(card, -5);
   1508     lv_label_set_text_fmt(label, "Revenue: %"LV_PRId32" %%", v);
   1509 }
   1510 
   1511 static void meter1_indic2_anim_cb(void * var, int32_t v)
   1512 {
   1513     lv_meter_set_indicator_end_value(meter1, var, v);
   1514 
   1515     lv_obj_t * card = lv_obj_get_parent(meter1);
   1516     lv_obj_t * label = lv_obj_get_child(card, -3);
   1517     lv_label_set_text_fmt(label, "Sales: %"LV_PRId32" %%", v);
   1518 
   1519 }
   1520 
   1521 static void meter1_indic3_anim_cb(void * var, int32_t v)
   1522 {
   1523     lv_meter_set_indicator_end_value(meter1, var, v);
   1524 
   1525     lv_obj_t * card = lv_obj_get_parent(meter1);
   1526     lv_obj_t * label = lv_obj_get_child(card, -1);
   1527     lv_label_set_text_fmt(label, "Costs: %"LV_PRId32" %%", v);
   1528 }
   1529 
   1530 static void meter2_timer_cb(lv_timer_t * timer)
   1531 {
   1532     lv_meter_indicator_t ** indics = timer->user_data;
   1533 
   1534     static bool down1 = false;
   1535     static bool down2 = false;
   1536     static bool down3 = false;
   1537 
   1538 
   1539     if(down1) {
   1540         session_desktop -= 137;
   1541         if(session_desktop < 1400) down1 = false;
   1542     }
   1543     else {
   1544         session_desktop += 116;
   1545         if(session_desktop > 4500) down1 = true;
   1546     }
   1547 
   1548     if(down2) {
   1549         session_tablet -= 3;
   1550         if(session_tablet < 1400) down2 = false;
   1551     }
   1552     else {
   1553         session_tablet += 9;
   1554         if(session_tablet > 4500) down2 = true;
   1555     }
   1556 
   1557     if(down3) {
   1558         session_mobile -= 57;
   1559         if(session_mobile < 1400) down3 = false;
   1560     }
   1561     else {
   1562         session_mobile += 76;
   1563         if(session_mobile > 4500) down3 = true;
   1564     }
   1565 
   1566     uint32_t all = session_desktop + session_tablet + session_mobile;
   1567     uint32_t pct1 = (session_desktop * 97) / all;
   1568     uint32_t pct2 = (session_tablet * 97) / all;
   1569 
   1570     lv_meter_set_indicator_start_value(meter2, indics[0], 0);
   1571     lv_meter_set_indicator_end_value(meter2, indics[0], pct1);
   1572 
   1573     lv_meter_set_indicator_start_value(meter2, indics[1], pct1 + 1);
   1574     lv_meter_set_indicator_end_value(meter2, indics[1], pct1 + 1 + pct2);
   1575 
   1576     lv_meter_set_indicator_start_value(meter2, indics[2], pct1 + 1 + pct2 + 1);
   1577     lv_meter_set_indicator_end_value(meter2, indics[2], 99);
   1578 
   1579     lv_obj_t * card = lv_obj_get_parent(meter2);
   1580     lv_obj_t * label;
   1581 
   1582     label = lv_obj_get_child(card, -5);
   1583     lv_label_set_text_fmt(label, "Desktop: %"LV_PRIu32, session_desktop);
   1584 
   1585     label = lv_obj_get_child(card, -3);
   1586     lv_label_set_text_fmt(label, "Tablet: %"LV_PRIu32, session_tablet);
   1587 
   1588     label = lv_obj_get_child(card, -1);
   1589     lv_label_set_text_fmt(label, "Mobile: %"LV_PRIu32, session_mobile);
   1590 }
   1591 
   1592 static void meter3_anim_cb(void * var, int32_t v)
   1593 {
   1594     lv_meter_set_indicator_value(meter3, var, v);
   1595 
   1596     lv_obj_t * label = lv_obj_get_child(meter3, 0);
   1597     lv_label_set_text_fmt(label, "%"LV_PRId32, v);
   1598 }
   1599 
   1600 #endif