lvgl/demos/ebike/lv_demo_ebike_stats.c

/**
 * @file lv_demo_ebike_stats.c
 *
 */

/*********************
 *      INCLUDES
 *********************/
#include "lv_demo_ebike.h"
#if LV_USE_DEMO_EBIKE

#include "../../lvgl_private.h"
#include "translations/lv_i18n.h"
#include "lv_demo_ebike_stats.h"
#include "lv_demo_ebike_private.h"

/*********************
 *      DEFINES
 *********************/

/**********************
 *      TYPEDEFS
 **********************/
typedef enum {
    MODE_AVG_SPEED,
    MODE_DISTANCE,
    MODE_TOP_SPEED,
} stat_mode_t;

/**********************
 *  STATIC PROTOTYPES
 **********************/
static lv_obj_t * left_cont_create(lv_obj_t * parent);
static lv_obj_t * right_cont_create(lv_obj_t * parent);

/**********************
 *  STATIC VARIABLES
 **********************/
/*Subjects used only by the statistics page to it easier to sync widgets*/
static lv_subject_t subject_week;
static lv_subject_t subject_day;
static lv_subject_t subject_avg_speed;
static lv_subject_t subject_distance;
static lv_subject_t subject_top_speed;
static lv_subject_t subject_mode;
static lv_obj_t * left_arrow;
static lv_obj_t * right_arrow;

static int32_t top_speed_values[] = {46, 28, 42, 39, 41, 25, 49, 37, 35, 40, 33, 40, 31, 27, 45, 38, 41, 40, 27, 25, 30, 45, 31, 43, 41, 34, 47, 32, 30, 33};
static int32_t avg_speed_values[] = {21, 24, 27, 29, 23, 28, 28, 22, 29, 28, 24, 26, 24, 30, 25, 25, 20, 28, 24, 27, 25, 27, 20, 29, 25, 24, 23, 26, 27, 27};
static int32_t distance_values[] =  {87, 63, 29, 84, 27, 84, 33, 76, 77, 49, 46, 29, 67, 21, 87, 75, 40, 19, 12, 67, 66, 11, 59, 33, 51, 75, 44, 61, 53, 63};

/**********************
 *      MACROS
 **********************/

/**********************
 *   GLOBAL FUNCTIONS
 **********************/

void lv_demo_ebike_stats_init(void)
{
    lv_subject_init_int(&subject_mode, MODE_DISTANCE);
    lv_subject_init_int(&subject_week, 0);
    lv_subject_init_int(&subject_day, 0);
    lv_subject_init_int(&subject_top_speed, 0);
    lv_subject_init_int(&subject_avg_speed, 0);
    lv_subject_init_int(&subject_distance, 0);
}

void lv_demo_ebike_stats_deinit(void)
{
    lv_subject_deinit(&subject_mode);
    lv_subject_deinit(&subject_week);
    lv_subject_deinit(&subject_day);
    lv_subject_deinit(&subject_top_speed);
    lv_subject_deinit(&subject_avg_speed);
    lv_subject_deinit(&subject_distance);
}

void lv_demo_ebike_stats_create(lv_obj_t * parent)
{
    lv_obj_t * main_cont = lv_obj_create(parent);
    lv_obj_set_style_bg_opa(main_cont, 0, 0);
    lv_obj_set_size(main_cont, lv_pct(100), lv_pct(100));
    lv_obj_set_flex_flow(main_cont, LV_DEMO_EBIKE_PORTRAIT ? LV_FLEX_FLOW_COLUMN : LV_FLEX_FLOW_ROW);

    lv_obj_t * left_cont = left_cont_create(main_cont);
#if LV_DEMO_EBIKE_PORTRAIT
    lv_obj_set_size(left_cont, lv_pct(100), 120);
#else
    lv_obj_set_size(left_cont, 164, lv_pct(100));
#endif

    lv_obj_t * right_cont = right_cont_create(main_cont);
    lv_obj_set_size(right_cont, lv_pct(100), lv_pct(100));
    lv_obj_set_flex_grow(right_cont, 1);
}

/**********************
 *   STATIC FUNCTIONS
 **********************/

static lv_obj_t * left_cont_create(lv_obj_t * parent)
{
    lv_obj_t * left_cont = lv_obj_create(parent);
    lv_obj_set_style_bg_opa(left_cont, 0, 0);
    lv_obj_remove_flag(left_cont, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t * label = lv_label_create(left_cont);
    lv_obj_align(label, LV_ALIGN_TOP_LEFT, 24, 16);
    lv_label_set_text(label, _("STATS"));
    lv_obj_set_style_text_font(label, EBIKE_FONT_MEDIUM, 0);


    lv_obj_t * stats_img;
#if LV_USE_LOTTIE
    extern const uint8_t lottie_ebike_stats[];
    extern const size_t lottie_ebike_stats_size;
    stats_img = lv_lottie_create(left_cont);
    lv_lottie_set_src_data(stats_img, lottie_ebike_stats, lottie_ebike_stats_size);
    lv_lottie_set_draw_buf(stats_img, lv_demo_ebike_get_lottie_draw_buf());
#else
    stats_img = lv_image_create(left_cont);
    LV_IMAGE_DECLARE(img_ebike_stats_large);
    lv_image_set_src(stats_img, &img_ebike_stats_large);
#endif

#if LV_DEMO_EBIKE_PORTRAIT
    lv_obj_align(stats_img, LV_ALIGN_BOTTOM_RIGHT, 0, 0);
#else
    lv_obj_align(stats_img, LV_ALIGN_BOTTOM_MID, 0, 0);
#endif
    return left_cont;
}
static void tabs_click_event_cb(lv_event_t * e)
{
    lv_obj_t * btnm = lv_event_get_target(e);
    lv_subject_set_int(&subject_mode, lv_buttonmatrix_get_selected_button(btnm));
}

static lv_obj_t * tabs_create(lv_obj_t * parent)
{
    lv_obj_t * btnm = lv_buttonmatrix_create(parent);
#if LV_DEMO_EBIKE_PORTRAIT
    lv_obj_set_size(btnm, lv_pct(100), 40);
#else
    lv_obj_set_size(btnm, lv_pct(100), 24);
#endif
    lv_obj_set_style_bg_opa(btnm, 0, 0);
    lv_obj_set_style_bg_opa(btnm, 0, LV_PART_ITEMS);
    lv_obj_set_style_border_width(btnm, 1, LV_PART_ITEMS);
    lv_obj_set_style_border_width(btnm, 2, LV_PART_ITEMS | LV_STATE_FOCUSED);
    lv_obj_set_style_border_side(btnm, LV_BORDER_SIDE_BOTTOM, LV_PART_ITEMS);
    lv_obj_set_style_border_color(btnm, EBIKE_COLOR_TURQUOISE, LV_PART_ITEMS);
    lv_obj_set_style_border_opa(btnm, LV_OPA_20, LV_PART_ITEMS);
    lv_obj_set_style_border_opa(btnm, LV_OPA_COVER, LV_PART_ITEMS | LV_STATE_FOCUSED);
    lv_obj_set_style_text_font(btnm, EBIKE_FONT_SMALL, LV_PART_ITEMS);
    lv_obj_set_style_text_color(btnm, lv_color_white(), LV_PART_ITEMS);
    lv_obj_set_style_text_color(btnm, EBIKE_COLOR_TURQUOISE, LV_PART_ITEMS | LV_STATE_FOCUSED);
    static const char * texts[4];
    texts[0] = _("Avg. speed");
    texts[1] = _("Distance");
    texts[2] = _("Top speed");

    lv_buttonmatrix_set_map(btnm, texts);

    lv_obj_add_event_cb(btnm, tabs_click_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    lv_buttonmatrix_set_selected_button(btnm, lv_subject_get_int(&subject_mode));

    return btnm;
}

static void left_click_event_cb(lv_event_t * e)
{
    LV_UNUSED(e);
    int32_t week = lv_subject_get_int(&subject_week);
    if(week > 0) {
        week--;
        lv_subject_set_int(&subject_week, week);
    }
}

static void right_click_event_cb(lv_event_t * e)
{
    LV_UNUSED(e);
    int32_t week = lv_subject_get_int(&subject_week);
    if(week < 3) {
        week++;
        lv_subject_set_int(&subject_week, week);
    }

}

static void current_week_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
    LV_UNUSED(subject);
    lv_obj_t * label = lv_observer_get_target_obj(observer);
    int32_t week = lv_subject_get_int(&subject_week);
    lv_label_set_text_fmt(label, _("March %d - March %d"), week * 7 + 1, week * 7 + 7);


    if(week == 0) lv_obj_set_style_image_opa(left_arrow, LV_OPA_50, 0);
    else lv_obj_set_style_image_opa(left_arrow, LV_OPA_100, 0);

    if(week == 3) lv_obj_set_style_image_opa(right_arrow, LV_OPA_50, 0);
    else lv_obj_set_style_image_opa(right_arrow, LV_OPA_100, 0);
}

static void current_data_objserver_cb(lv_observer_t * observer, lv_subject_t * subject)
{
    LV_UNUSED(subject);
    lv_obj_t * label = lv_observer_get_target_obj(observer);
    stat_mode_t mode = lv_subject_get_int(&subject_mode);
    int32_t day = lv_subject_get_int(&subject_day);
    switch(mode) {
        case MODE_AVG_SPEED:
            lv_label_set_text_fmt(label, "%dkm/h", avg_speed_values[day]);
            break;
        case MODE_TOP_SPEED:
            lv_label_set_text_fmt(label, "%dkm/h", top_speed_values[day]);
            break;
        case MODE_DISTANCE:
            lv_label_set_text_fmt(label, "%dkm", distance_values[day]);
            break;
    }
}

static lv_obj_t * data_cont_create(lv_obj_t * parent)
{
    lv_obj_t * cont = lv_obj_create(parent);
    lv_obj_set_style_bg_opa(cont, 0, 0);
    lv_obj_set_size(cont, lv_pct(100), LV_SIZE_CONTENT);
    lv_obj_set_style_text_color(cont, lv_color_white(), 0);
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_style_flex_main_place(cont, LV_FLEX_ALIGN_CENTER, 0);
    lv_obj_set_style_flex_cross_place(cont, LV_FLEX_ALIGN_CENTER, 0);
    lv_obj_set_style_flex_track_place(cont, LV_FLEX_ALIGN_SPACE_BETWEEN, 0);

    LV_IMAGE_DECLARE(img_ebike_arrow_left_2);
    LV_IMAGE_DECLARE(img_ebike_arrow_right_2);

    left_arrow = lv_image_create(cont);
    lv_image_set_src(left_arrow, &img_ebike_arrow_left_2);
    lv_obj_set_ext_click_area(left_arrow, 32);
    lv_obj_set_size(left_arrow, 40, 40);
    lv_obj_add_flag(left_arrow, LV_OBJ_FLAG_CLICKABLE);
    lv_obj_add_event_cb(left_arrow, left_click_event_cb, LV_EVENT_CLICKED, NULL);

    lv_obj_t * label = lv_label_create(cont);
    lv_label_set_text(label, "138km");
    lv_obj_set_style_text_font(label, EBIKE_FONT_LARGE, 0);
    lv_obj_add_flag(label, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    lv_subject_add_observer_obj(&subject_mode, current_data_objserver_cb, label, NULL);
    lv_subject_add_observer_obj(&subject_day, current_data_objserver_cb, label, NULL);

    label = lv_label_create(cont);
    lv_label_set_text(label, "March 18 - March 25");
    lv_obj_set_style_text_font(label, EBIKE_FONT_SMALL, 0);

    right_arrow = lv_image_create(cont);
    lv_image_set_src(right_arrow, &img_ebike_arrow_right_2);
    lv_obj_set_ext_click_area(right_arrow, 32);
    lv_obj_set_size(right_arrow, 40, 40);
    lv_obj_add_flag(right_arrow, LV_OBJ_FLAG_FLEX_IN_NEW_TRACK);
    lv_obj_add_flag(right_arrow, LV_OBJ_FLAG_CLICKABLE);
    lv_obj_add_event_cb(right_arrow, right_click_event_cb, LV_EVENT_CLICKED, NULL);

    lv_subject_add_observer_obj(&subject_week, current_week_observer_cb, label, NULL);

    return cont;
}

static uint32_t day_pressed;
static void chart_value_changed_event_cb(lv_event_t * e)
{
    lv_obj_t * chart = lv_event_get_target(e);
    day_pressed = lv_chart_get_pressed_point(chart);
    if(day_pressed == 0) return;


}
static void chart_released_event_cb(lv_event_t * e)
{
    LV_UNUSED(e);
    lv_subject_set_int(&subject_day, day_pressed);
}


static void chart_draw_event_cb(lv_event_t * e)
{
    lv_obj_t * chart = lv_event_get_target(e);
    lv_obj_t * cont = lv_obj_get_parent(chart);
    lv_draw_rect_dsc_t rect_dsc;
    lv_draw_rect_dsc_init(&rect_dsc);
    rect_dsc.bg_grad.dir = LV_GRAD_DIR_VER;
    rect_dsc.bg_grad.stops_count = 2;
    rect_dsc.bg_grad.stops[0].color = lv_color_hex(0x00C3BC);
    rect_dsc.bg_grad.stops[0].opa = LV_OPA_0;
    rect_dsc.bg_grad.stops[0].frac = 50;
    rect_dsc.bg_grad.stops[1].color = lv_color_hex(0x8968B6);
    rect_dsc.bg_grad.stops[1].opa = LV_OPA_100;
    rect_dsc.bg_grad.stops[1].frac = 200;

    uint32_t day = lv_subject_get_int(&subject_day);

    lv_point_t p;
    lv_chart_get_point_pos_by_id(chart, lv_chart_get_series_next(chart, NULL), day, &p);
    lv_coord_t w = lv_obj_get_width(cont) / 7;
    lv_area_t a;
    a.x1 = chart->coords.x1 + p.x - w / 2;
    a.x2 = chart->coords.x1 + p.x + w / 2;
    a.y1 = chart->coords.y1;
    a.y2 = chart->coords.y2;
    lv_draw_rect(lv_event_get_layer(e), &rect_dsc, &a);

    char buf[32];
    lv_snprintf(buf, sizeof(buf), _("March %d"), lv_subject_get_int(&subject_day));
    lv_draw_label_dsc_t label_dsc;
    lv_draw_label_dsc_init(&label_dsc);
    label_dsc.font = EBIKE_FONT_SMALL;
    label_dsc.color = lv_color_white();
    label_dsc.text = buf;
    label_dsc.text_local = 1;
    label_dsc.align = LV_TEXT_ALIGN_CENTER;

    a.x1 = chart->coords.x1 + p.x - 100;
    a.x2 = chart->coords.x1 + p.x + 100;
    a.y1 = chart->coords.y2 + 5;
    a.y2 = chart->coords.y2 + 20;
    lv_draw_label(lv_event_get_layer(e), &label_dsc, &a);
}

static void chart_refr_ext_draw(lv_event_t * e)
{
#if LV_DEMO_EBIKE_PORTRAIT
    lv_event_set_ext_draw_size(e, 48);
#else
    lv_event_set_ext_draw_size(e, 32);
#endif
}

static void chart_draw_task_event_cb(lv_event_t * e)
{
    lv_draw_task_t * draw_task = lv_event_get_draw_task(e);
    lv_draw_dsc_base_t * base_dsc = draw_task->draw_dsc;

    if(base_dsc->part != LV_PART_ITEMS || draw_task->type != LV_DRAW_TASK_TYPE_LINE) return;

    lv_obj_t * obj = lv_event_get_target(e);

    /*Draw a triangle below the line witch some opacity gradient*/
    lv_draw_line_dsc_t * draw_line_dsc = draw_task->draw_dsc;
    lv_draw_triangle_dsc_t tri_dsc;

    lv_draw_triangle_dsc_init(&tri_dsc);
    tri_dsc.p[0].x = draw_line_dsc->p1.x;
    tri_dsc.p[0].y = draw_line_dsc->p1.y;
    tri_dsc.p[1].x = draw_line_dsc->p2.x;
    tri_dsc.p[1].y = draw_line_dsc->p2.y;
    tri_dsc.p[2].x = draw_line_dsc->p1.y < draw_line_dsc->p2.y ? draw_line_dsc->p1.x : draw_line_dsc->p2.x;
    tri_dsc.p[2].y = LV_MAX(draw_line_dsc->p1.y, draw_line_dsc->p2.y);
    tri_dsc.bg_grad.dir = LV_GRAD_DIR_VER;

    int32_t full_h = lv_obj_get_height(obj);
    int32_t fract_upper = (int32_t)(LV_MIN(draw_line_dsc->p1.y, draw_line_dsc->p2.y) - obj->coords.y1) * 255 / full_h;
    int32_t fract_lower = (int32_t)(LV_MAX(draw_line_dsc->p1.y, draw_line_dsc->p2.y) - obj->coords.y1) * 255 / full_h;
    tri_dsc.bg_grad.stops[0].color = lv_color_hex(0x3987CF);
    tri_dsc.bg_grad.stops[0].opa = 200 * (255 - fract_upper) / 256;
    tri_dsc.bg_grad.stops[0].frac = 0;
    tri_dsc.bg_grad.stops[1].color = lv_color_hex(0x3987CF);
    tri_dsc.bg_grad.stops[1].opa = 200 * (255 - fract_lower) / 256;
    tri_dsc.bg_grad.stops[1].frac = 255;

    lv_draw_triangle(base_dsc->layer, &tri_dsc);

    /*Draw rectangle below the triangle*/
    lv_draw_rect_dsc_t rect_dsc;
    lv_draw_rect_dsc_init(&rect_dsc);
    rect_dsc.bg_grad.dir = LV_GRAD_DIR_VER;
    rect_dsc.bg_grad.stops[0].color = lv_color_hex(0x3987CF);
    rect_dsc.bg_grad.stops[0].frac = 0;
    rect_dsc.bg_grad.stops[0].opa = 200 * (255 - fract_lower) / 256;
    rect_dsc.bg_grad.stops[1].color = lv_color_hex(0x3987CF);
    rect_dsc.bg_grad.stops[1].frac = 255;
    rect_dsc.bg_grad.stops[1].opa = 0;

    lv_area_t rect_area;
    rect_area.x1 = (int32_t)draw_line_dsc->p1.x;
    rect_area.x2 = (int32_t)draw_line_dsc->p2.x - 1;
    rect_area.y1 = (int32_t)LV_MAX(draw_line_dsc->p1.y, draw_line_dsc->p2.y);
    rect_area.y2 = (int32_t)obj->coords.y2;
    lv_draw_rect(base_dsc->layer, &rect_dsc, &rect_area);
}

static void chart_gesture_event_cb(lv_event_t * e)
{
    LV_UNUSED(e);
    lv_dir_t d = lv_indev_get_gesture_dir(lv_indev_active());

    int32_t week = lv_subject_get_int(&subject_week);
    if(d == LV_DIR_RIGHT) {
        if(week > 0) week--;
    }
    else if(d == LV_DIR_LEFT) {
        if(week < 3) week++;
    }
    else {
        return;
    }

    lv_indev_wait_release(lv_indev_active());
    lv_subject_set_int(&subject_week, week);
}

static void chart_week_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
    LV_UNUSED(subject);
    int32_t week = lv_subject_get_int(&subject_week);
    lv_subject_set_int(&subject_day, week * 7 + 1);

    lv_obj_t * chart = lv_observer_get_target_obj(observer);
    lv_obj_t * cont = lv_obj_get_parent(chart);

    lv_point_t p;
    lv_chart_get_point_pos_by_id(chart, lv_chart_get_series_next(chart, NULL), week * 7, &p);
    lv_obj_scroll_to_x(cont,  p.x, LV_ANIM_ON);
}

static void chart_mode_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
    LV_UNUSED(subject);
    lv_obj_t * chart = lv_observer_get_target_obj(observer);
    lv_chart_series_t * ser = lv_chart_get_series_next(chart, NULL);

    switch(lv_subject_get_int(&subject_mode)) {
        case MODE_AVG_SPEED:
            lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 30);
            lv_chart_set_ext_y_array(chart, ser, avg_speed_values);
            break;
        case MODE_TOP_SPEED:
            lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 50);
            lv_chart_set_ext_y_array(chart, ser, top_speed_values);
            break;
        case MODE_DISTANCE:
            lv_chart_set_range(chart, LV_CHART_AXIS_PRIMARY_Y, 0, 90);
            lv_chart_set_ext_y_array(chart, ser, distance_values);
            break;
        default:
            break;
    }
}

static void chart_day_observer_cb(lv_observer_t * observer, lv_subject_t * subject)
{
    LV_UNUSED(subject);
    lv_obj_t * chart = lv_observer_get_target_obj(observer);

    int32_t day = lv_subject_get_int(&subject_day);

    lv_subject_set_int(&subject_avg_speed, avg_speed_values[day]);
    lv_subject_set_int(&subject_distance, distance_values[day]);
    lv_subject_set_int(&subject_top_speed, top_speed_values[day]);

    lv_obj_invalidate(chart);
}

static lv_obj_t * chart_create(lv_obj_t * parent)
{
    lv_obj_t * cont = lv_obj_create(parent);
    lv_obj_set_width(cont, lv_pct(100));
    lv_obj_set_flex_grow(cont, 1);
    lv_obj_set_style_bg_opa(cont, 0, 0);
    lv_obj_remove_flag(cont, LV_OBJ_FLAG_SCROLLABLE);

    lv_obj_t * chart = lv_chart_create(cont);
    lv_obj_set_flex_grow(chart, 1);
    lv_obj_set_size(chart, lv_pct(370), lv_pct(100));
    lv_chart_set_update_mode(chart, LV_CHART_UPDATE_MODE_CIRCULAR);
    lv_chart_set_point_count(chart, 30);
    lv_chart_set_div_line_count(chart, 0, 0);
    lv_obj_remove_flag(chart, LV_OBJ_FLAG_GESTURE_BUBBLE);
    lv_obj_set_style_line_width(chart, 3, LV_PART_ITEMS);
    lv_obj_set_style_size(chart, 10, 10, LV_PART_INDICATOR);
    lv_obj_set_style_bg_opa(chart, LV_OPA_COVER, LV_PART_INDICATOR);
    lv_obj_set_style_bg_color(chart, lv_color_black(), LV_PART_INDICATOR);
    lv_obj_set_style_radius(chart, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);
    lv_obj_set_style_border_color(chart, lv_color_black(), LV_PART_INDICATOR);
    lv_obj_set_style_border_width(chart, 2, LV_PART_INDICATOR);
    lv_obj_set_style_border_width(chart, 1, 0);
    lv_obj_set_style_border_side(chart, LV_BORDER_SIDE_BOTTOM, 0);
    lv_obj_set_style_bg_opa(chart, 0, 0);
    lv_obj_set_style_margin_bottom(chart, 24, 0);
    lv_obj_set_style_max_height(chart, 260, 0);

    lv_obj_add_event_cb(chart, chart_value_changed_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_add_event_cb(chart, chart_released_event_cb, LV_EVENT_RELEASED, NULL);
    lv_obj_add_event_cb(chart, chart_draw_event_cb, LV_EVENT_DRAW_MAIN_BEGIN, NULL);
    lv_obj_add_event_cb(chart, chart_refr_ext_draw, LV_EVENT_REFR_EXT_DRAW_SIZE, NULL);
    lv_obj_add_event_cb(chart, chart_draw_task_event_cb, LV_EVENT_DRAW_TASK_ADDED, NULL);
    lv_obj_add_event_cb(chart, chart_gesture_event_cb, LV_EVENT_GESTURE, NULL);
    lv_obj_add_flag(chart, LV_OBJ_FLAG_SEND_DRAW_TASK_EVENTS);

    lv_chart_series_t * ser = lv_chart_add_series(chart, lv_color_white(), 0);
    lv_chart_set_next_value(chart, ser, 30);
    lv_chart_set_next_value(chart, ser, 60);
    lv_chart_set_next_value(chart, ser, 22);
    lv_chart_set_next_value(chart, ser, 40);
    lv_chart_set_next_value(chart, ser, 48);
    lv_chart_set_next_value(chart, ser, 30);
    lv_chart_set_next_value(chart, ser, 69);
    lv_chart_set_next_value(chart, ser, 21);
    lv_chart_set_next_value(chart, ser, 60);

    lv_subject_add_observer_obj(&subject_week, chart_week_observer_cb, chart, NULL);
    lv_subject_add_observer_obj(&subject_mode, chart_mode_observer_cb, chart, NULL);
    lv_subject_add_observer_obj(&subject_day, chart_day_observer_cb, chart, NULL);

    return chart;
}

static lv_obj_t * stat_card_create(lv_obj_t * parent, const char * name, lv_subject_t * subject, const char * fmt)
{
    lv_obj_t * cont = lv_obj_create(parent);
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_style_flex_track_place(cont, LV_FLEX_ALIGN_CENTER, 0);
    lv_obj_set_flex_grow(cont, 1);
    lv_obj_set_height(cont, LV_SIZE_CONTENT);
    lv_obj_set_style_bg_opa(cont, 0, 0);

    lv_obj_t * label = lv_label_create(cont);
    lv_label_set_text(label, name);
    lv_obj_set_style_text_font(label, EBIKE_FONT_SMALL, 0);

    label = lv_label_create(cont);
    lv_obj_set_style_text_font(label, EBIKE_FONT_MEDIUM, 0);
    lv_label_bind_text(label, subject, fmt);

    return cont;
}

static lv_obj_t * stat_cont_create(lv_obj_t * parent)
{
    lv_obj_t * cont = lv_obj_create(parent);
    lv_obj_set_style_bg_opa(cont, 0, 0);
    lv_obj_set_size(cont, lv_pct(100), LV_SIZE_CONTENT);
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);

    stat_card_create(cont, _("Avg. speed"), &subject_avg_speed, "%dkm/h");
    stat_card_create(cont, _("Distance"), &subject_distance, "%dkm");
    stat_card_create(cont, _("Top speed"), &subject_top_speed, "%dkm/h");

    return cont;
}

static lv_obj_t * right_cont_create(lv_obj_t * parent)
{
    lv_obj_t * right_cont = lv_obj_create(parent);
    lv_obj_set_style_bg_opa(right_cont, 0, 0);
    lv_obj_set_flex_flow(right_cont, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_style_flex_main_place(right_cont, LV_FLEX_ALIGN_SPACE_BETWEEN, 0);
    lv_obj_set_style_pad_ver(right_cont, 12, 0);
    lv_obj_set_style_pad_right(right_cont, 8, 0);
    lv_obj_set_style_pad_row(right_cont, 8, 0);
    lv_obj_set_height(right_cont, lv_pct(100));

    tabs_create(right_cont);
    data_cont_create(right_cont);
    chart_create(right_cont);
    stat_cont_create(right_cont);

    return right_cont;
}

#endif /*LV_USE_DEMO_EBIKE*/