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