EEPW论坛

上期我们安装好了开发环境并测试了例程。现在，我们开始安装lvgl库并使用lvgl绘制一个界面：

打开Arduino IDE，在左侧libraries界面下，下载LVGL库，我这里下载的是8.3.11版本；

搞定后，用create_ui创建一个界面：

// --- 创建一个简单的 LVGL 界面 ---
void create_ui()
{
    main_screen = lv_scr_act();
    lv_obj_t *scr = main_screen;
    lv_obj_set_style_bg_color(scr, lv_color_hex(0xF4F7FA), 0); // 浅灰色背景

    // 1. 顶部标题
    title_label = lv_label_create(scr);
    lv_label_set_text(title_label, "Smart Home Hub");
    lv_obj_set_style_text_font(title_label, &lv_font_montserrat_48, 0);
    lv_obj_align(title_label, LV_ALIGN_TOP_LEFT, 40, 40);

    // 2. 右上角时间显示
    time_label = lv_label_create(scr);
    lv_label_set_text(time_label, "00:00");
    lv_obj_set_style_text_font(time_label, &lv_font_montserrat_32, 0);
    lv_obj_align(time_label, LV_ALIGN_TOP_RIGHT, -40, 50);
    update_time_label(); // 初始显示当前时间

    // --- 第一排卡片 ---

    // 卡片 1: 客厅灯
    p1 = lv_obj_create(scr);
    lv_obj_set_size(p1, 380, 220);
    lv_obj_align(p1, LV_ALIGN_TOP_LEFT, 40, 140);
   
    l1 = lv_label_create(p1);
    lv_label_set_text(l1, "Living Room\nLight");
    lv_obj_set_style_text_font(l1, &lv_font_montserrat_28, 0);
    lv_obj_align(l1, LV_ALIGN_LEFT_MID, 10, 0);

    lv_obj_t *sw1 = lv_switch_create(p1);
    lv_obj_set_size(sw1, 80, 40);
    lv_obj_align(sw1, LV_ALIGN_RIGHT_MID, -10, 0);

    // 卡片 2: 厨房灯
    p2 = lv_obj_create(scr);
    lv_obj_set_size(p2, 380, 220);
    lv_obj_align(p2, LV_ALIGN_TOP_LEFT, 450, 140);
   
    l2 = lv_label_create(p2);
    lv_label_set_text(l2, "Kitchen\nLight");
    lv_obj_set_style_text_font(l2, &lv_font_montserrat_28, 0);
    lv_obj_align(l2, LV_ALIGN_LEFT_MID, 10, 0);

    lv_obj_t *sw2 = lv_switch_create(p2);
    lv_obj_set_size(sw2, 80, 40);
    lv_obj_align(sw2, LV_ALIGN_RIGHT_MID, -10, 0);

    // 卡片 3: 卧室灯
    p3 = lv_obj_create(scr);
    lv_obj_set_size(p3, 380, 220);
    lv_obj_align(p3, LV_ALIGN_TOP_LEFT, 860, 140);
   
    l3 = lv_label_create(p3);
    lv_label_set_text(l3, "Bedroom\nLight");
    lv_obj_set_style_text_font(l3, &lv_font_montserrat_28, 0);
    lv_obj_align(l3, LV_ALIGN_LEFT_MID, 10, 0);

    lv_obj_t *sw3 = lv_switch_create(p3);
    lv_obj_set_size(sw3, 80, 40);
    lv_obj_align(sw3, LV_ALIGN_RIGHT_MID, -10, 0);

    // --- 第二排：亮度调节与主题切换 ---

    // 亮度调节卡片
    p4 = lv_obj_create(scr);
    lv_obj_set_size(p4, 790, 180);
    lv_obj_align(p4, LV_ALIGN_TOP_LEFT, 40, 400);

    l4 = lv_label_create(p4);
    lv_label_set_text(l4, "Main Brightness");
    lv_obj_set_style_text_font(l4, &lv_font_montserrat_28, 0);
    lv_obj_align(l4, LV_ALIGN_TOP_LEFT, 10, 10);

    lv_obj_t *slider = lv_slider_create(p4);
    lv_obj_set_size(slider, 700, 30);
    lv_obj_align(slider, LV_ALIGN_BOTTOM_MID, 0, -30);
    lv_slider_set_range(slider, 0, 255); // 设置范围为 0-255
    lv_slider_set_value(slider, 200, LV_ANIM_OFF); // 初始亮度设为较高值
    lv_obj_add_event_cb(slider, brightness_slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
    display.setBrightness(200); // 同步初始亮度

    // 主题切换卡片
    p5 = lv_obj_create(scr);
    lv_obj_set_size(p5, 380, 180);
    lv_obj_align(p5, LV_ALIGN_TOP_LEFT, 860, 400);

    l_theme = lv_label_create(p5);
    lv_label_set_text(l_theme, "Dark Mode");
    lv_obj_set_style_text_font(l_theme, &lv_font_montserrat_28, 0);
    lv_obj_align(l_theme, LV_ALIGN_LEFT_MID, 10, 0);

    lv_obj_t *theme_sw = lv_switch_create(p5);
    lv_obj_set_size(theme_sw, 80, 40);
    lv_obj_align(theme_sw, LV_ALIGN_RIGHT_MID, -10, 0);
    lv_obj_add_event_cb(theme_sw, theme_switch_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

    // 底部设置按钮
    lv_obj_t *btn = lv_btn_create(scr);
    lv_obj_set_size(btn, 200, 70);
    lv_obj_align(btn, LV_ALIGN_BOTTOM_RIGHT, -40, -40);
    lv_obj_add_event_cb(btn, settings_btn_event_cb, LV_EVENT_CLICKED, NULL);
   
    lv_obj_t *btn_label = lv_label_create(btn);
    lv_label_set_text(btn_label, "Settings");
    lv_obj_set_style_text_font(btn_label, &lv_font_montserrat_28, 0);
    lv_obj_center(btn_label);
}

编译并下载到Tab5上，最终效果如下：