1 /**
2 * @file lv_demo_ebike_home.c
3 *
4 */
5
6 /*********************
7 * INCLUDES
8 *********************/
9 #include "lv_demo_ebike.h"
10 #if LV_USE_DEMO_EBIKE
11
12 #include "lv_demo_ebike_private.h"
13 #include "lv_demo_ebike_home.h"
14 #include "translations/lv_i18n.h"
15 #include "../../lvgl_private.h"
16
17 /*********************
18 * DEFINES
19 *********************/
20
21 /**********************
22 * TYPEDEFS
23 **********************/
24
25 /**********************
26 * STATIC PROTOTYPES
27 **********************/
28 static lv_obj_t * left_cont_create(lv_obj_t * parent);
29 static lv_obj_t * right_cont_create(lv_obj_t * parent);
30 static lv_obj_t * roller_create(lv_obj_t * parent, const char * opts, lv_roller_mode_t mode);
31 static lv_obj_t * card_labels_create(lv_obj_t * parent, const char * value, const char * unit, const char * title);
32 static void roller_anim_timer_cb(lv_timer_t * t);
33
34 /**********************
35 * STATIC VARIABLES
36 **********************/
37 /*Subjects used only by the home page to it easier to sync widgets*/
38 static lv_subject_t ebike_subject_speed_arc;
39 static lv_subject_t ebike_subject_speed_roller;
40
41 static lv_timer_t * roller_anim_timer;
42
43 /**********************
44 * MACROS
45 **********************/
46
47 /**********************
48 * GLOBAL FUNCTIONS
49 **********************/
50
lv_demo_ebike_home_init(void)51 void lv_demo_ebike_home_init(void)
52 {
53 lv_subject_init_int(&ebike_subject_speed_arc, 0);
54 lv_subject_init_int(&ebike_subject_speed_roller, 0);
55 roller_anim_timer = lv_timer_create(roller_anim_timer_cb, 2000, NULL);
56 }
57
lv_demo_ebike_home_deinit(void)58 void lv_demo_ebike_home_deinit(void)
59 {
60 lv_subject_deinit(&ebike_subject_speed_arc);
61 lv_subject_deinit(&ebike_subject_speed_roller);
62 lv_timer_delete(roller_anim_timer);
63 }
64
lv_demo_ebike_home_create(lv_obj_t * parent)65 void lv_demo_ebike_home_create(lv_obj_t * parent)
66 {
67 lv_obj_t * main_cont = lv_obj_create(parent);
68 lv_obj_set_style_bg_opa(main_cont, 0, 0);
69 lv_obj_set_size(main_cont, lv_pct(100), lv_pct(100));
70 lv_obj_set_flex_flow(main_cont, LV_DEMO_EBIKE_PORTRAIT ? LV_FLEX_FLOW_COLUMN : LV_FLEX_FLOW_ROW);
71 lv_obj_set_style_flex_main_place(main_cont, LV_FLEX_ALIGN_SPACE_EVENLY, 0);
72
73 lv_obj_t * left_cont = left_cont_create(main_cont);
74 lv_obj_t * right_cont = right_cont_create(main_cont);
75
76 #if LV_DEMO_EBIKE_PORTRAIT
77 lv_obj_set_style_flex_cross_place(main_cont, LV_FLEX_ALIGN_CENTER, 0);
78 lv_obj_set_width(left_cont, lv_pct(100));
79 lv_obj_set_style_max_width(left_cont, 450, 0);
80 lv_obj_set_flex_grow(left_cont, 2);
81 lv_obj_set_width(right_cont, lv_pct(100));
82 lv_obj_set_flex_grow(right_cont, 1);
83 #else
84 lv_obj_set_size(left_cont, lv_pct(40), lv_pct(100));
85 lv_obj_set_style_min_width(left_cont, 220, 0);
86 lv_obj_set_size(right_cont, lv_pct(40), lv_pct(100));
87 lv_obj_set_style_min_width(right_cont, 150, 0);
88 #endif
89 }
90
91 /**********************
92 * STATIC FUNCTIONS
93 **********************/
94
95
set_subject_exec_cb(void * var,int32_t v)96 static void set_subject_exec_cb(void * var, int32_t v)
97 {
98 lv_subject_set_int(var, v);
99 }
100
roller_anim_timer_cb(lv_timer_t * t)101 static void roller_anim_timer_cb(lv_timer_t * t)
102 {
103 LV_UNUSED(t);
104 int32_t v = lv_rand(0, 90);
105
106 lv_anim_t a;
107 lv_anim_init(&a);
108 lv_anim_set_var(&a, &ebike_subject_speed_arc);
109 lv_anim_set_values(&a, lv_subject_get_int(&ebike_subject_speed_arc), v);
110 lv_anim_set_duration(&a, 1000);
111 lv_anim_set_exec_cb(&a, set_subject_exec_cb);
112 lv_anim_start(&a);
113
114 lv_subject_set_int(&ebike_subject_speed_roller, v);
115 }
116
speed_label_observer_cb(lv_observer_t * observer,lv_subject_t * subject)117 static void speed_label_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
118 {
119 lv_obj_t * label = lv_observer_get_target_obj(observer);
120 int32_t label_v = (int32_t)((lv_uintptr_t)observer->user_data);
121 int32_t speed = lv_subject_get_int(subject);
122
123 label_v = LV_ABS(label_v - speed);
124 uint32_t zoom = lv_map(label_v, 0, 20, 512, 256);
125 lv_obj_set_style_transform_scale(label, zoom, 0);
126 }
127
speed_roller_10_observer_cb(lv_observer_t * observer,lv_subject_t * subject)128 static void speed_roller_10_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
129 {
130 lv_obj_t * roller = lv_observer_get_target_obj(observer);
131 int32_t speed = lv_subject_get_int(subject);
132 lv_roller_set_selected(roller, speed / 10, LV_ANIM_ON);
133 }
134
speed_roller_1_observer_cb(lv_observer_t * observer,lv_subject_t * subject)135 static void speed_roller_1_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
136 {
137 lv_obj_t * roller = lv_observer_get_target_obj(observer);
138 int32_t speed = lv_subject_get_int(subject);
139
140 lv_roller_set_selected(roller, speed, LV_ANIM_ON);
141 }
142
info_box_create(lv_obj_t * parent,const void * icon,const char * big_text,const char * small_text)143 static lv_obj_t * info_box_create(lv_obj_t * parent, const void * icon, const char * big_text, const char * small_text)
144 {
145 lv_obj_t * main_cont = lv_obj_create(parent);
146 lv_obj_set_height(main_cont, lv_pct(100));
147 lv_obj_set_flex_grow(main_cont, 1);
148 lv_obj_set_style_bg_opa(main_cont, 0, 0);
149 lv_obj_set_flex_flow(main_cont, LV_FLEX_FLOW_ROW);
150 lv_obj_set_style_flex_main_place(main_cont, LV_FLEX_ALIGN_CENTER, 0);
151 lv_obj_set_style_flex_cross_place(main_cont, LV_FLEX_ALIGN_CENTER, 0);
152 lv_obj_set_size(main_cont, lv_pct(100), LV_SIZE_CONTENT);
153
154 lv_obj_t * img;
155 img = lv_image_create(main_cont);
156 lv_image_set_src(img, icon);
157
158 lv_obj_center(main_cont);
159 lv_obj_t * label;
160 label = lv_label_create(main_cont);
161 lv_label_set_text(label, big_text);
162 lv_obj_set_style_text_font(label, EBIKE_FONT_MEDIUM, 0);
163
164 label = lv_label_create(main_cont);
165 lv_label_set_text(label, small_text);
166 lv_obj_set_style_text_font(label, EBIKE_FONT_SMALL, 0);
167 lv_obj_set_style_margin_left(label, 32, 0);
168 lv_obj_add_flag(label, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
169
170 return main_cont;
171 }
172
left_cont_create(lv_obj_t * parent)173 static lv_obj_t * left_cont_create(lv_obj_t * parent)
174 {
175 lv_obj_t * left_cont = lv_obj_create(parent);
176 lv_obj_set_style_bg_opa(left_cont, 0, 0);
177 lv_obj_remove_flag(left_cont, LV_OBJ_FLAG_SCROLLABLE);
178
179 lv_obj_t * scale = lv_image_create(left_cont);
180 #if LV_DEMO_EBIKE_PORTRAIT
181 LV_IMAGE_DECLARE(img_ebike_scale_large);
182 lv_image_set_src(scale, &img_ebike_scale_large);
183 lv_obj_align(scale, LV_ALIGN_LEFT_MID, 0, 0);
184 #else
185 LV_IMAGE_DECLARE(img_ebike_scale);
186 lv_image_set_src(scale, &img_ebike_scale);
187 lv_obj_align(scale, LV_ALIGN_LEFT_MID, 0, 0);
188 #endif
189
190 lv_obj_t * arc = lv_arc_create(left_cont);
191
192 #if LV_DEMO_EBIKE_PORTRAIT
193 lv_obj_set_size(arc, 660, 660);
194 lv_obj_align(arc, LV_ALIGN_LEFT_MID, 82, 0);
195 #else
196 lv_obj_set_size(arc, 440, 440);
197 lv_obj_align(arc, LV_ALIGN_LEFT_MID, 52, 0);
198 #endif
199 lv_obj_set_style_arc_width(arc, 20, 0);
200 lv_obj_set_style_arc_width(arc, 20, LV_PART_INDICATOR);
201 lv_obj_set_style_bg_opa(arc, LV_OPA_0, LV_PART_KNOB);
202 lv_obj_set_style_arc_opa(arc, LV_OPA_0, 0);
203 lv_obj_set_style_arc_color(arc, EBIKE_COLOR_TURQUOISE, LV_PART_INDICATOR);
204 lv_arc_set_bg_angles(arc, 0, 90);
205 lv_arc_set_rotation(arc, 130);
206 lv_arc_set_range(arc, -20, 110);
207 lv_arc_bind_value(arc, &ebike_subject_speed_arc);
208 lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE);
209
210 uint32_t i;
211 for(i = 0; i < 5; i++) {
212 lv_obj_t * obj = lv_obj_create(left_cont);
213 lv_obj_set_style_bg_opa(obj, LV_OPA_0, 0);
214
215 #if LV_DEMO_EBIKE_PORTRAIT
216 lv_obj_set_size(obj, 60, 80);
217 lv_obj_align(obj, LV_ALIGN_LEFT_MID, -10, 0);
218 lv_obj_set_style_transform_pivot_x(obj, 390, 0);
219 lv_obj_set_style_transform_pivot_y(obj, lv_pct(50), 0);
220 lv_obj_set_style_transform_rotation(obj, -240 + i * 135, 0);
221 #else
222 lv_obj_set_size(obj, 40, 50);
223 lv_obj_align(obj, LV_ALIGN_LEFT_MID, -10, 0);
224 lv_obj_set_style_transform_pivot_x(obj, 260, 0);
225 lv_obj_set_style_transform_pivot_y(obj, lv_pct(50), 0);
226 lv_obj_set_style_transform_rotation(obj, -260 + i * 150, 0);
227 #endif
228
229 lv_obj_t * label = lv_label_create(obj);
230 lv_obj_align(label, LV_ALIGN_RIGHT_MID, 0, 0);
231 lv_label_set_text_fmt(label, "%d", (i + 1) * 20);
232 lv_obj_set_style_text_font(label, EBIKE_FONT_MEDIUM, 0);
233 lv_obj_set_style_transform_pivot_x(label, lv_pct(100), 0);
234 lv_obj_set_style_transform_pivot_y(label, lv_pct(50), 0);
235 lv_subject_add_observer_obj(&ebike_subject_speed_arc, speed_label_observer_cb, label,
236 (void *)((lv_uintptr_t)((i + 1) * 20)));
237 }
238
239 lv_obj_t * dashboard_center_cont = lv_obj_create(left_cont);
240 lv_obj_set_style_bg_opa(dashboard_center_cont, 0, 0);
241 #if LV_DEMO_EBIKE_PORTRAIT
242 lv_obj_align(dashboard_center_cont, LV_ALIGN_LEFT_MID, 32, 0);
243 lv_obj_set_size(dashboard_center_cont, lv_pct(80), 240);
244 #else
245 lv_obj_align(dashboard_center_cont, LV_ALIGN_LEFT_MID, 0, 0);
246 lv_obj_set_size(dashboard_center_cont, lv_pct(100), 240);
247 #endif
248 lv_obj_set_style_pad_left(dashboard_center_cont, 110, 0);
249 lv_obj_remove_flag(dashboard_center_cont, LV_OBJ_FLAG_CLICKABLE);
250
251 lv_obj_t * top_cont = lv_obj_create(dashboard_center_cont);
252 lv_obj_set_style_bg_opa(top_cont, 0, 0);
253 lv_obj_set_size(top_cont, lv_pct(100), LV_SIZE_CONTENT);
254 lv_obj_set_flex_flow(top_cont, LV_FLEX_FLOW_ROW);
255 lv_obj_set_flex_align(top_cont, LV_FLEX_ALIGN_SPACE_BETWEEN, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
256
257 LV_IMAGE_DECLARE(img_ebike_arrow_left);
258 lv_obj_t * icon1 = lv_image_create(top_cont);
259 lv_image_set_src(icon1, &img_ebike_arrow_left);
260
261 LV_IMAGE_DECLARE(img_ebike_lamp);
262 lv_obj_t * icon2 = lv_image_create(top_cont);
263 lv_image_set_src(icon2, &img_ebike_lamp);
264
265 LV_IMAGE_DECLARE(img_ebike_arrow_right);
266 lv_obj_t * icon3 = lv_image_create(top_cont);
267 lv_image_set_src(icon3, &img_ebike_arrow_right);
268
269
270 lv_obj_t * roller_cont = lv_obj_create(dashboard_center_cont);
271 lv_obj_set_size(roller_cont, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
272 lv_obj_set_style_bg_opa(roller_cont, 0, 0);
273 lv_obj_align(roller_cont, LV_ALIGN_CENTER, 0, 0);
274
275 const char * opts1 = "0\n1\n2\n3\n4\n5\n6\n7\n8\n9";
276 lv_obj_t * roller_1 = roller_create(roller_cont, opts1, LV_ROLLER_MODE_NORMAL);
277 lv_obj_align(roller_1, LV_ALIGN_LEFT_MID, 0, 0);
278 lv_subject_add_observer_obj(&ebike_subject_speed_roller, speed_roller_10_observer_cb, roller_1, NULL);
279
280 const char * opts2 =
281 "0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0\n1\n2\n3\n4\n5\n6\n7\n8\n9";
282 lv_obj_t * roller_10 = roller_create(roller_cont, opts2, LV_ROLLER_MODE_NORMAL);
283 lv_obj_align(roller_10, LV_ALIGN_LEFT_MID, 50, 0);
284 lv_subject_add_observer_obj(&ebike_subject_speed_roller, speed_roller_1_observer_cb, roller_10, NULL);
285
286 lv_obj_t * bottom_cont = lv_obj_create(left_cont);
287 lv_obj_set_style_bg_opa(bottom_cont, 0, 0);
288 lv_obj_set_size(bottom_cont, lv_pct(100), LV_SIZE_CONTENT);
289 lv_obj_set_flex_flow(bottom_cont, LV_FLEX_FLOW_ROW);
290 lv_obj_set_style_pad_left(bottom_cont, 110, 0);
291 lv_obj_align(bottom_cont, LV_ALIGN_LEFT_MID, 0, 105);
292
293 LV_IMAGE_DECLARE(img_ebike_clock);
294 info_box_create(bottom_cont, &img_ebike_clock, " 03:58 PM", _("March 29"));
295
296 return left_cont;
297 }
298
roller_create(lv_obj_t * parent,const char * opts,lv_roller_mode_t mode)299 static lv_obj_t * roller_create(lv_obj_t * parent, const char * opts, lv_roller_mode_t mode)
300 {
301 LV_FONT_DECLARE(font_ebike_130);
302 lv_obj_t * roller = lv_roller_create(parent);
303 lv_obj_set_style_text_font(roller, &font_ebike_130, 0);
304 lv_obj_set_style_text_align(roller, LV_TEXT_ALIGN_CENTER, 0);
305 lv_roller_set_options(roller, opts, mode);
306 lv_roller_set_visible_row_count(roller, 1);
307 lv_obj_set_width(roller, 50);
308 lv_obj_set_style_anim_duration(roller, 1000, 0);
309 lv_obj_set_style_bg_opa(roller, 0, LV_PART_MAIN);
310 lv_obj_set_style_bg_opa(roller, 0, LV_PART_SELECTED);
311
312 return roller;
313 }
314
315
card_labels_create(lv_obj_t * parent,const char * value,const char * unit,const char * title)316 static lv_obj_t * card_labels_create(lv_obj_t * parent, const char * value, const char * unit, const char * title)
317 {
318 lv_obj_t * main_cont = lv_obj_create(parent);
319 lv_obj_set_size(main_cont, lv_pct(100), lv_pct(100));
320 lv_obj_set_style_bg_opa(main_cont, 0, 0);
321
322 lv_obj_t * center_cont = lv_obj_create(main_cont);
323 lv_obj_set_flex_flow(center_cont, LV_FLEX_FLOW_ROW);
324 lv_obj_set_style_flex_main_place(center_cont, LV_FLEX_ALIGN_CENTER, 0);
325 lv_obj_set_style_flex_cross_place(center_cont, LV_FLEX_ALIGN_START, 0);
326 lv_obj_set_size(center_cont, lv_pct(100), LV_SIZE_CONTENT);
327 lv_obj_set_style_bg_opa(center_cont, 0, 0);
328
329 lv_obj_center(center_cont);
330 lv_obj_t * label;
331 label = lv_label_create(center_cont);
332 lv_label_set_text(label, value);
333 lv_obj_set_style_text_font(label, EBIKE_FONT_LARGE, 0);
334
335 label = lv_label_create(center_cont);
336 lv_label_set_text(label, unit);
337 lv_obj_set_style_text_font(label, EBIKE_FONT_SMALL, 0);
338
339 label = lv_label_create(main_cont);
340 lv_label_set_text(label, title);
341 lv_obj_set_style_text_font(label, EBIKE_FONT_SMALL, 0);
342 lv_obj_align(label, LV_ALIGN_BOTTOM_MID, 0, -4);
343
344 return main_cont;
345 }
346
bullet_scroll_event_cb(lv_event_t * e)347 static void bullet_scroll_event_cb(lv_event_t * e)
348 {
349 lv_obj_t * main_cont = lv_event_get_target(e);
350 lv_obj_t * bullet_cont = lv_event_get_user_data(e);
351 int32_t scroll_x = lv_obj_get_scroll_x(main_cont);
352 int32_t w = lv_obj_get_content_width(main_cont);
353 int32_t idx = scroll_x / w;
354
355 uint32_t i;
356 uint32_t cnt = lv_obj_get_child_count(bullet_cont);
357 for(i = 0; i < cnt; i++) {
358 lv_obj_remove_state(lv_obj_get_child(bullet_cont, i), LV_STATE_CHECKED);
359 }
360 lv_obj_add_state(lv_obj_get_child(bullet_cont, idx), LV_STATE_CHECKED);
361 }
362
bullets_create(lv_obj_t * parent)363 static lv_obj_t * bullets_create(lv_obj_t * parent)
364 {
365 static bool inited = false;
366 static const lv_style_prop_t props[] = {LV_STYLE_BG_OPA, LV_STYLE_TRANSFORM_HEIGHT, LV_STYLE_TRANSFORM_WIDTH, LV_STYLE_PROP_INV};
367 static lv_style_transition_dsc_t dsc;
368
369 if(!inited) {
370 lv_style_transition_dsc_init(&dsc, props, lv_anim_path_linear, 200, 0, NULL);
371 inited = true;
372 }
373
374 uint32_t cnt = lv_obj_get_child_count(parent);
375
376 lv_obj_t * cont = lv_obj_create(parent);
377 lv_obj_set_style_bg_opa(cont, 0, 0);
378 lv_obj_add_flag(cont, LV_OBJ_FLAG_IGNORE_LAYOUT);
379 lv_obj_add_flag(cont, LV_OBJ_FLAG_FLOATING);
380 lv_obj_set_size(cont, LV_SIZE_CONTENT, LV_SIZE_CONTENT);
381 lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 0);
382 lv_obj_set_style_pad_all(cont, 4, 0);
383
384 lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);
385 lv_obj_set_style_pad_gap(cont, 8, 0);
386
387 uint32_t i;
388 for(i = 0; i < cnt; i++) {
389 lv_obj_t * bullet = lv_obj_create(cont);
390 lv_obj_set_size(bullet, 5, 5);
391 lv_obj_set_style_transition(bullet, &dsc, 0);
392 lv_obj_set_style_radius(bullet, LV_RADIUS_CIRCLE, 0);
393 lv_obj_set_style_bg_color(bullet, lv_color_hex(0x000000), 0);
394 lv_obj_set_style_bg_opa(bullet, LV_OPA_50, 0);
395 lv_obj_set_style_bg_opa(bullet, LV_OPA_COVER, LV_STATE_CHECKED);
396 lv_obj_set_style_transform_width(bullet, 2, LV_STATE_CHECKED);
397 lv_obj_set_style_transform_height(bullet, 2, LV_STATE_CHECKED);
398 }
399
400 lv_obj_add_state(lv_obj_get_child(cont, 0), LV_STATE_CHECKED);
401 lv_obj_add_event_cb(parent, bullet_scroll_event_cb, LV_EVENT_SCROLL_END, cont);
402 return cont;
403 }
404
405
right_cont_create(lv_obj_t * parent)406 static lv_obj_t * right_cont_create(lv_obj_t * parent)
407 {
408 lv_obj_t * right_cont = lv_obj_create(parent);
409 lv_obj_set_style_bg_opa(right_cont, 0, 0);
410
411 lv_obj_set_flex_flow(right_cont, LV_DEMO_EBIKE_PORTRAIT ? LV_FLEX_FLOW_ROW : LV_FLEX_FLOW_COLUMN);
412 lv_obj_set_style_pad_ver(right_cont, 12, 0);
413 lv_obj_set_style_pad_hor(right_cont, 8, 0);
414 lv_obj_set_style_pad_gap(right_cont, 8, 0);
415
416 lv_obj_t * battery = lv_bar_create(right_cont);
417 lv_obj_set_size(battery, lv_pct(100), lv_pct(100));
418 lv_obj_set_flex_grow(battery, 1);
419 lv_obj_set_flex_flow(battery, LV_FLEX_FLOW_ROW);
420 lv_obj_set_scroll_snap_x(battery, LV_SCROLL_SNAP_CENTER);
421 lv_obj_add_flag(battery, LV_OBJ_FLAG_SCROLLABLE);
422 lv_obj_set_style_border_color(battery, EBIKE_COLOR_LIME, 0);
423 lv_obj_set_style_border_width(battery, 4, 0);
424 lv_obj_set_style_bg_opa(battery, 0, 0);
425 lv_obj_set_style_pad_all(battery, 10, 0);
426 lv_obj_set_style_bg_opa(battery, 0, 0);
427 lv_obj_set_style_radius(battery, 12, 0);
428 lv_obj_set_style_bg_color(battery, EBIKE_COLOR_LIME, LV_PART_INDICATOR);
429 lv_obj_set_style_pad_column(battery, 16, 0);
430 lv_obj_set_style_text_color(battery, lv_color_black(), 0);
431 lv_obj_set_style_radius(battery, 6, LV_PART_INDICATOR);
432 lv_bar_set_value(battery, 82, LV_ANIM_ON);
433 lv_obj_set_scrollbar_mode(battery, LV_SCROLLBAR_MODE_OFF);
434
435 card_labels_create(battery, "82", "%", _("Battery"));
436 card_labels_create(battery, "29:31", "", _("Battery"));
437
438 bullets_create(battery);
439
440 lv_obj_t * dist = lv_obj_create(right_cont);
441 lv_obj_set_size(dist, lv_pct(100), lv_pct(100));
442 lv_obj_set_style_pad_ver(dist, 14, 0);
443 lv_obj_set_style_pad_hor(dist, 4, 0);
444 lv_obj_set_flex_grow(dist, 1);
445 lv_obj_set_style_radius(dist, 12, 0);
446 lv_obj_set_style_bg_color(dist, EBIKE_COLOR_TURQUOISE, 0);
447 lv_obj_set_style_text_color(dist, lv_color_black(), 0);
448 lv_obj_set_style_pad_column(dist, 16, 0);
449 lv_obj_set_flex_flow(dist, LV_FLEX_FLOW_ROW);
450 lv_obj_set_scroll_snap_x(dist, LV_SCROLL_SNAP_CENTER);
451 lv_obj_set_scrollbar_mode(dist, LV_SCROLLBAR_MODE_OFF);
452
453 card_labels_create(dist, "16.4", "km", _("Distance today"));
454 card_labels_create(dist, "20.1", "km/h", _("Speed today"));
455 card_labels_create(dist, "43:12", "", _("Time today"));
456
457 bullets_create(dist);
458
459 return right_cont;
460 }
461
462 #endif /*LV_USE_DEMO_EBIKE*/
463
