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