ESP32+LVGL笔记(1):vs2022仿真lv_example_get_started_1

13 篇文章 6 订阅


刚接触lvgl,看了一些教程,感觉还是无法下手。我还是先跑跑example。这两篇介绍如何使用visual studio 2019仿真lvgl的文章不错:
1.作者:Mculover666,《 LVGL v8学习笔记 | 01 - LVGL PC模拟器初体验》。
2.作者:Wireless_Link,《 LittleVGL Visual Studio 模拟器的使用》。
Mculover666介绍得比较全面,不过他实际使用的模拟器是linux下面的,Wireless_Link详细的介绍了如何在windows10下面使用vs2019仿真lvgl。
下面我把自己的实操步骤记录一下:

1.下载 lv_port_win_visual_studio

进入lvgl的官方仓库:https://github.com/lvgl,下载 lv_port_win_visual_studio
在这里插入图片描述
进去页面,点击下载:
在这里插入图片描述
下载完毕,解压,发现有3个子文件夹是空的,要独立下载:
在这里插入图片描述
下载完毕,解压放到《LVGL.Simulator》下面,内容如下:
在这里插入图片描述

2.编译工程

2.1打开配置工程

打开工程:
在这里插入图片描述
进入工程配置:
在这里插入图片描述
按照下面的配置:
在这里插入图片描述
在这里插入图片描述

2.2编译工程:

在这里插入图片描述
到此为止,我一行代码都没有改动,原来默认的demo是:
在这里插入图片描述

2.3运行工程:

在这里插入图片描述
测试结束。

3.进入主题lv_example_get_started_1

把上面的 lv_demo_widgets 注释,换成 lv_example_get_started_1
在这里插入图片描述
编译运行:
在这里插入图片描述
点击按键3次:
在这里插入图片描述

4.为何选这个例子入门

这张图可以回答这个问题:
在这里插入图片描述
到目前为止,我几乎没有怎么学习过lvgl,现在开始看源码:
《lv_example_get_started_1.c》:

#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_BTN

static void btn_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * btn = lv_event_get_target(e);
    if(code == LV_EVENT_CLICKED) {
        static uint8_t cnt = 0;
        cnt++;

        /*Get the first child of the button which is the label and change its text*/
        lv_obj_t * label = lv_obj_get_child(btn, 0);
        lv_label_set_text_fmt(label, "Button: %d", cnt);
    }
}

/**
 * Create a button with a label and react on click event.
 */
void lv_example_get_started_1(void)
{
    lv_obj_t * btn = lv_btn_create(lv_scr_act());     /*Add a button the current screen*/
    lv_obj_set_pos(btn, 10, 10);                            /*Set its position*/
    lv_obj_set_size(btn, 120, 50);                          /*Set its size*/
    lv_obj_add_event_cb(btn, btn_event_cb, LV_EVENT_ALL, NULL);           /*Assign a callback to the button*/

    lv_obj_t * label = lv_label_create(btn);          /*Add a label to the button*/
    lv_label_set_text(label, "Button");                     /*Set the labels text*/
    lv_obj_center(label);
}

#endif

这样阅读源码,是不是容易理解多了?!

5.esp32 跑lv_example_get_started_1(附源码)

我们使用上一篇文章的例子《vscode+ESP-IDF:编译网友移植好的LVGL工程(ESP32+ili9341+xpt2046笔记)》来修改。
lv_port_win_visual_studio的工程把所有的example下面的c文件全部添加进来,esp32的工程是按需添加的,所以我们要把《lv_example_get_started_1.c》文件添加到工程,修改 main文件夹下面的CMakeLists.txt:

idf_component_register(SRCS "lvgl_init.c" "blink.c" "../components/lvgl/examples/get_started/lv_example_get_started_1.c"
                    INCLUDE_DIRS ".")

在《lvgl_init.c》增加头文件:

#include "lvgl/examples/lv_examples.h"

把函数guiTask1主要的代码注释:

//Show_State();

替换为:

lv_example_get_started_1();

如图:
在这里插入图片描述
编译,下载,运行:
在这里插入图片描述

在这里插入图片描述
其实没多大的改动,还是附上源码:
https://gitee.com/huangweide001/esp32_test/tree/master/lvgl_test

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很高兴回答你的问题,以下是使用Arduino、lvglesp32和tft_espi的示例代码实现网络天气时钟的方法: ``` #include <Arduino.h> #include <TFT_eSPI.h> #include <lvgl.h> #include <WiFi.h> #include <ArduinoJson.h> #include <time.h> #define WIFI_SSID "your_wifi_ssid" #define WIFI_PASS "your_wifi_password" #define OPENWEATHERMAP_APIKEY "your_openweathermap_api_key" TFT_eSPI tft = TFT_eSPI(135, 240); // 设置 TFT 屏幕的大小 lv_obj_t * label_temperature, * label_temperature_symbol, * label_weather_description, * label_city_name, * label_clock; void get_weather_data(String & temperature, String & weather_description, String & city_name) { WiFiClient client; if (!client.connect("api.openweathermap.org", 80)) { Serial.println("connection failed!"); return; } String url = "/data/2.5/weather?q=Shenzhen,CN&appid=" OPENWEATHERMAP_APIKEY "&units=metric"; client.print(String("GET ") + url + " HTTP/1.1\r\n" + "Host: api.openweathermap.org\r\n" + "Connection: close\r\n\r\n"); String response = ""; while (client.connected()) { String line = client.readStringUntil('\n'); if (line == "\r") { break; } } while (client.available()) { response += (char)client.read(); } const int capacity = JSON_OBJECT_SIZE(4) + 100; DynamicJsonDocument doc(capacity); deserializeJson(doc, response); JsonObject main = doc["main"]; temperature = main["temp"].as<String>(); JsonArray weather = doc["weather"]; weather_description = weather[0]["description"].as<String>(); city_name = doc["name"].as<String>(); } void get_time_string(String & time_string) { time_t now; struct tm timeinfo; time(&now); localtime_r(&now, &timeinfo); char strftime_buf[64]; strftime(strftime_buf, sizeof(strftime_buf), "%H:%M", &timeinfo); time_string = strftime_buf; } void setup() { Serial.begin(115200); lv_init(); tft.init(); tft.setRotation(3); tft.fillScreen(TFT_BLACK); lvgl_driver_init(&tft); lv_disp_drv_t disp_drv; lv_disp_drv_init(&disp_drv); disp_drv.buffer = &lvgl_buffer; disp_drv.flush_cb = lvgl_flush; lv_disp_drv_register(&disp_drv); lv_theme_t * theme = lv_theme_material_init(210, NULL); lv_theme_set_current(theme); label_temperature = lv_label_create(lv_scr_act(), NULL); lv_label_set_text(label_temperature, "temperature"); lv_obj_align(label_temperature, NULL, LV_ALIGN_CENTER, 0, -40); label_temperature_symbol = lv_label_create(lv_scr_act(), NULL); lv_label_set_text(label_temperature_symbol, "°C"); lv_obj_set_pos(label_temperature_symbol, lv_obj_get_x(label_temperature) + lv_obj_get_width(label_temperature), lv_obj_get_y(label_temperature)); label_weather_description = lv_label_create(lv_scr_act(), NULL); lv_label_set_text(label_weather_description, "weather_description"); lv_obj_align(label_weather_description, NULL, LV_ALIGN_CENTER, 0, 0); label_city_name = lv_label_create(lv_scr_act(), NULL); lv_label_set_text(label_city_name, "city_name"); lv_obj_align(label_city_name, NULL, LV_ALIGN_CENTER, 0, 40); label_clock = lv_label_create(lv_scr_act(), NULL); lv_label_set_text(label_clock, "clock"); lv_obj_align(label_clock, NULL, LV_ALIGN_CENTER, 0, 80); lv_task_create([](lv_task_t * task) { String temperature; String weather_description; String city_name; get_weather_data(temperature, weather_description, city_name); lv_label_set_text(label_temperature, temperature.c_str()); lv_label_set_text(label_weather_description, weather_description.c_str()); lv_label_set_text(label_city_name, city_name.c_str()); }, 5000, LV_TASK_PRIO_LOW, NULL); lv_task_create([](lv_task_t * task) { String time_string; get_time_string(time_string); lv_label_set_text(label_clock, time_string.c_str()); }, 1000, LV_TASK_PRIO_MID, NULL); WiFi.begin(WIFI_SSID, WIFI_PASS); while (WiFi.status() != WL_CONNECTED) { delay(1000); } Serial.println("setup complete!"); } void loop() { lv_task_handler(); delay(1); } ``` 该代码使用了 OpenWeatherMap API 获取深圳的当前天气数据,在屏幕上输出温度、天气描述和城市名称,通过 `lv_task_create` 函数设置定时任务每 5 秒钟更新一次天气信息和每秒钟更新一次当前时间,是一个简单而实用的网络天气时钟的实现方式。 注:这里使用的API Key只是做演示,请勿用于商业用途,如有需要请自行注册。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值