Edit online

面包机 (bread_machine)

这个实例模板由四个页面组成，分别是主页面，时间设置页面、蓝牙页面和总设置页面，主要演示了一下几个功能：

滑动特效
多语言切换
自定义 custom 代码的实现

_images/bread_machine_main.png — 图 1. 点单主界面

使用逻辑

左右滑动面包即可选择不同的面包进行操作
点击解冻和加热分别对应两种不同的温度
点击时间即可设置运行的时间，随后点击启动即可
点击蓝牙按钮即可打开蓝牙界面二维码
打开设置，可以切换语言，查看使用方法、介绍和版本

滑动特效

在主页面上左右滑动面包选择

图 2. 主页面左右滑动特效
在时间页面上下滑动选择时间

图 3. 时间页面上下滑动特效

多语言切换

可在设置界面里面选择不同的语言

自定义 custom 代码的实现

在 custom 目录中通过自定义代码实现定制功能

static lv_obj_t *bread_roller = NULL;

const char *bread_image[] =
{
    LVGL_IMAGE_PATH(bread/bread1.png),
    LVGL_IMAGE_PATH(bread/bread2.png),
    LVGL_IMAGE_PATH(bread/bread3.png),
    LVGL_IMAGE_PATH(bread/bread4.png),
    LVGL_IMAGE_PATH(bread/bread5.png),
    LVGL_IMAGE_PATH(bread/bread6.png)
};

void bread_main_menu_custom_created(void)
{
    bread_main_menu_t *scr = bread_main_menu_get(&ui_manager);

    bread_roller = lv_obj_drag_create(scr->bread_container);

    lv_obj_drag_add_img_item(bread_roller, bread_image, 6, 200, 200);
    lv_obj_drag_set_dir(bread_roller, LV_DRAG_DIR_HOR);
    lv_obj_drag_set_infinite(bread_roller, true);

    lv_obj_drag_enable_opa_change(bread_roller, true, true);
    lv_obj_drag_set_opa_ratio(bread_roller, 255, 100, 400);

    lv_obj_drag_enable_zoom_change(bread_roller, true, true);
    lv_obj_drag_set_zoom_ratio(bread_roller, 256, 100, 400);
    lv_obj_drag_set_zoom_change_mode(bread_roller, LV_DRAG_GRADIENT, LV_DRAG_ZOOM_CENTER);

    lv_obj_drag_set_main_x_offset(bread_roller, 50);

    lv_obj_drag_set_active(bread_roller, 0, LV_ANIM_OFF);
}

void bread_time_menu_custom_created(void)
{
    bread_time_menu_t *scr = bread_time_menu_get(&ui_manager);

    hour_roller = lv_obj_drag_create(scr->hour_container);
    minute_roller = lv_obj_drag_create(scr->minute_container);
    for (int i = 0; i < 24; i++) {
        lv_obj_t *child = lv_label_create(hour_roller);

        lv_label_set_text(child, hour_time[i]);
        lv_label_set_long_mode(child, LV_LABEL_LONG_WRAP);
        lv_obj_set_size(child, 94, 56);

        lv_obj_set_style_text_font(child, aic_get_multi_lang_font(30), LV_PART_MAIN | LV_STATE_DEFAULT);
        lv_obj_set_style_text_align(child, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
        lv_obj_set_style_pad_top(child, 11, LV_PART_MAIN | LV_STATE_DEFAULT);
        lv_obj_align_to(child, hour_roller, LV_ALIGN_TOP_LEFT, 10, 0);
    }

    lv_obj_drag_set_infinite(hour_roller, true);

    lv_obj_drag_enable_opa_change(hour_roller, true, false);
    lv_obj_drag_set_opa_ratio(hour_roller, 255, 100, 112);

    lv_obj_drag_enable_zoom_change(hour_roller, true, false);
    lv_obj_drag_set_zoom_ratio(hour_roller, 256, 120, 112);

    lv_obj_drag_set_active(hour_roller, 0, LV_ANIM_OFF);

    minute_roller = lv_obj_drag_create(scr->minute_container);
    for (int i = 0; i < 60; i++) {
        lv_obj_t *child = lv_label_create(minute_roller);

        lv_label_set_text(child, minute_time[i]);
        lv_label_set_long_mode(child, LV_LABEL_LONG_WRAP);
        lv_obj_set_size(child, 94, 56);

        lv_obj_set_style_text_font(child, aic_get_multi_lang_font(30), LV_PART_MAIN | LV_STATE_DEFAULT);
        lv_obj_set_style_text_align(child, 2, LV_PART_MAIN | LV_STATE_DEFAULT);
        lv_obj_set_style_pad_top(child, 11, LV_PART_MAIN | LV_STATE_DEFAULT);
        lv_obj_align_to(child, minute_roller, LV_ALIGN_TOP_LEFT, 10, 0);
    }

    lv_obj_drag_set_infinite(minute_roller, true);

    lv_obj_drag_enable_opa_change(minute_roller, true, false);
    lv_obj_drag_set_opa_ratio(minute_roller, 255, 100, 112);

    lv_obj_drag_enable_zoom_change(minute_roller, true, false);
    lv_obj_drag_set_zoom_ratio(minute_roller, 256, 120, 112);

    lv_obj_drag_set_active(minute_roller, 0, LV_ANIM_OFF);
}

void bread_setting_menu_custom_created(void)
{
    bread_setting_menu_t *scr = bread_setting_menu_get(&ui_manager);
    switch(current_lang)
    {
        case 0:
    {
        lv_dropdown_set_selected(scr->lan_switch, 0);
        break;
    }
        case 1:
    {
        lv_dropdown_set_selected(scr->lan_switch, 2);
        break;
    }
        case 2:
    {
        lv_dropdown_set_selected(scr->lan_switch, 1);
        break;
    }
        default:
        break;
    }
}

void bread_setting_menu_eng_switch_custom_value_changed(void)
{
    bread_setting_menu_update_language(AIC_LANG_EN);
    current_lang = AIC_LANG_EN;

    bread_setting_menu_t *scr = bread_setting_menu_get(&ui_manager);
    lv_dropdown_set_selected(scr->lan_switch, 0);
}

void bread_setting_menu_chn_switch_custom_value_changed(void)
{
    bread_setting_menu_update_language(AIC_LANG_ZH);
    current_lang = AIC_LANG_ZH;

    bread_setting_menu_t *scr = bread_setting_menu_get(&ui_manager);
    lv_dropdown_set_selected(scr->lan_switch, 1);
}

void bread_setting_menu_jpn_switch_custom_value_changed(void)
{
    bread_setting_menu_update_language(AIC_LANG_JP);
    current_lang = AIC_LANG_JP;

    bread_setting_menu_t *scr = bread_setting_menu_get(&ui_manager);
    lv_dropdown_set_selected(scr->lan_switch, 2);
}

_images/bread_language_en.png — 图 8. 切换语言的界面 2

_images/bread_language_jp.png — 图 9. 切换语言的界面 3