简介

该项目是Funpack第二季第五期任务三： 使用板卡的屏幕和联网功能，实现一个在线电子书浏览器，从网络上获取文本并显示在屏幕上，通过按键翻页。

硬件介绍

ESP32-S3-BOX-LITE是ESP32-S3的BOX系列AIoT应用开发板，搭载了WiFi和Bluetooth功能，配有2.4寸LCD显示屏和3个独立按键。

项目设计

通过WiFi功能连入互联网，基于HTTP协议访问网页，借助ESP HTTP Client组件读取网页中的文本内容。

利用LVGL搭建图形界面，采用WIN窗体和BTN按键控件，讲读取的文本内容展示在屏幕中。注册按键回调，在回调中，调整窗体滚动条位置，实现按键翻页。

软件流程图

主要代码片段2

初始化

void app_main(void)
{
    /* Initialize I2C (for touch and audio) */
    bsp_i2c_init();

    /* Initialize display and LVGL */
    bsp_display_start();

    /* Set display brightness to 100% */
    bsp_display_backlight_on();

    /* Mount SPIFFS */
    bsp_spiffs_mount();


    esp_err_t ret = nvs_flash_init();
    if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {
      ESP_ERROR_CHECK(nvs_flash_erase());
      ret = nvs_flash_init();
    }
    ESP_ERROR_CHECK(ret);

    ESP_ERROR_CHECK(esp_netif_init());
    ESP_ERROR_CHECK(esp_event_loop_create_default());

    /* This helper function configures Wi-Fi or Ethernet, as selected in menuconfig.
     * Read "Establishing Wi-Fi or Ethernet Connection" section in
     * examples/protocols/README.md for more information about this function.
     */
    ESP_ERROR_CHECK(example_connect());
    ESP_LOGI(TAG, "Connected to AP, begin http example");

#if CONFIG_IDF_TARGET_LINUX
    http_test_task(NULL);
#else
    xTaskCreate(&http_test_task, "http_test_task", 8192, NULL, 5, NULL);
#endif


    
}

上述代码主要初始化了用于触摸的I2C，屏幕显示，网络接口事件循环。建立了wifi访问，并创建任务，启动http client访问网页内容。

http client读取网页内容

const char *text_url = "https://www.gnu.org/software/cpio/manual/cpio.txt";
char local_response_buffer[MAX_HTTP_OUTPUT_BUFFER] = {0};
static void http_rest_with_url(void)
{

    /**
     * NOTE: All the configuration parameters for http_client must be spefied either in URL or as host and path parameters.
     * If host and path parameters are not set, query parameter will be ignored. In such cases,
     * query parameter should be specified in URL.
     *
     * If URL as well as host and path parameters are specified, values of host and path will be considered.
     */
    esp_http_client_config_t config = {
        .url = text_url,
        // .host = "httpbin.org",
        // .path = "/get",
        .query = "esp",
        .event_handler = _http_event_handler,
        .crt_bundle_attach = esp_crt_bundle_attach,
        .user_data = local_response_buffer,        // Pass address of local buffer to get response
        .disable_auto_redirect = true,
    };
    esp_http_client_handle_t client = esp_http_client_init(&config);

    // GET
    esp_err_t err = esp_http_client_perform(client);
    if (err == ESP_OK) {
        ESP_LOGI(TAG, "HTTP GET Status = %d, content_length = %"PRIu64,
                esp_http_client_get_status_code(client),
                esp_http_client_get_content_length(client));
    } else {
        ESP_LOGE(TAG, "HTTP GET request failed: %s", esp_err_to_name(err));
    }
    ESP_LOGI(TAG, "%s\n",local_response_buffer);

    esp_http_client_cleanup(client);
}

通过http client访问特定网页文本内容，读取文本内容，存入local_response_buffer。

gui相关

lv_obj_t * cont;
static void event_handler(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);
    ESP_LOGI(TAG,"Button %d clicked", (int)lv_obj_get_index(obj));
    bool up = lv_obj_get_index(obj) == 0;
    lv_obj_scroll_by_bounded(cont,0,up?100:-100,LV_ANIM_OFF);
}
extern const char *text_url;
extern char local_response_buffer[];
void lv_example_win_1(void)
{
    lv_indev_t *indev = lv_indev_get_next(NULL);

    if ((lv_indev_get_type(indev) == LV_INDEV_TYPE_KEYPAD) || \
            lv_indev_get_type(indev) == LV_INDEV_TYPE_ENCODER) {
        ESP_LOGI(TAG, "Input device type is keypad");
        g_btn_op_group = lv_group_create();
        lv_indev_set_group(indev, g_btn_op_group);
    }

    lv_obj_t * win = lv_win_create(lv_scr_act(), 40);
    lv_obj_t * btn;
    btn = lv_win_add_btn(win, LV_SYMBOL_LEFT, 40);
    lv_group_add_obj(g_btn_op_group, btn);
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);

    lv_win_add_title(win, text_url);

    btn = lv_win_add_btn(win, LV_SYMBOL_RIGHT, 40);
    lv_group_add_obj(g_btn_op_group, btn);
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);

    btn = lv_win_add_btn(win, LV_SYMBOL_CLOSE, 60);
    lv_group_add_obj(g_btn_op_group, btn);
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);

    cont = lv_win_get_content(win);  /*Content can be added here*/
    lv_obj_t * label = lv_label_create(cont);

    lv_label_set_text_static(label,local_response_buffer);

}

创建lvgl窗体，添加按键和按键回调，将窗体内容显示为local_response_buffer中的内容，按键回调用来移动滚动条。

效果展示

心得体会

参加本次活动，是想要了解一下ESP32当前最强的WIFI MCU。通过完成该任务，也达成了最初的目的，感受到ESP强大的开发生态，丰富的文档。但发现自己在HTTP通讯和图形界面开发方面还熟悉，有待提高。

最后希望Funpack继续办好！