【花雕学编程】Arduino LVGL 之电池电量和图标结合

最新推荐文章于 2025-04-15 09:43:13 发布

驴友花雕

最新推荐文章于 2025-04-15 09:43:13 发布

阅读量867

点赞数 22

分类专栏：开源硬件文章标签： android 嵌入式硬件单片机 c++ 电池电量和图标结合 Arduino LVGL

本文链接：https://blog.csdn.net/weixin_41659040/article/details/144312340

版权

开源硬件专栏收录该内容

1673 篇文章

订阅专栏

在这里插入图片描述

Arduino是一个开放源码的电子原型平台，它可以让你用简单的硬件和软件来创建各种互动的项目。Arduino的核心是一个微控制器板，它可以通过一系列的引脚来连接各种传感器、执行器、显示器等外部设备。Arduino的编程是基于C/C++语言的，你可以使用Arduino IDE（集成开发环境）来编写、编译和上传代码到Arduino板上。Arduino还有一个丰富的库和社区，你可以利用它们来扩展Arduino的功能和学习Arduino的知识。

Arduino的特点是：
1、开放源码：Arduino的硬件和软件都是开放源码的，你可以自由地修改、复制和分享它们。
2、易用：Arduino的硬件和软件都是为初学者和非专业人士设计的，你可以轻松地上手和使用它们。
3、便宜：Arduino的硬件和软件都是非常经济的，你可以用很低的成本来实现你的想法。
4、多样：Arduino有多种型号和版本，你可以根据你的需要和喜好来选择合适的Arduino板。
5、创新：Arduino可以让你用电子的方式来表达你的创意和想象，你可以用Arduino来制作各种有趣和有用的项目，如机器人、智能家居、艺术装置等。

在这里插入图片描述
Arduino LVGL（Light and Versatile Graphics Library）是一个功能强大、轻量级的图形库，专为嵌入式系统设计，尤其适用于Arduino等微控制器平台。以下是对其主要特点、应用场景以及需要注意的事项的详细解释。

1、主要特点
1）轻量级：
LVGL是一个轻量级的图形库，适合资源有限的嵌入式系统。它在内存使用和处理速度上进行了优化，使其能够在低功耗设备上流畅运行。
2）丰富的组件：
LVGL提供了多种用户界面组件，比如按钮、滑块、图表、列表、图像等，开发者可以利用这些组件快速构建复杂的用户界面。
3）高效的渲染能力：
LVGL支持多种显示驱动程序，能够高效地渲染图形，支持抗锯齿、alpha混合等图形效果，从而提升界面的视觉质量。
4）灵活的主题和样式：
LVGL支持主题和样式的自定义，使得开发者可以根据需求轻松调整界面的外观，增加了界面的美观性和用户体验。
5）多种输入设备支持：
支持触摸屏、鼠标、键盘等多种输入设备，能够实现丰富的用户交互。
6）多平台支持：
LVGL不仅可以在Arduino上运行，还可以在多个嵌入式平台和操作系统上使用，包括ESP32、STM32、Linux等，具有良好的跨平台性。

2、应用场景
1）嵌入式设备的用户界面：
适用于需要图形用户界面的嵌入式设备，如智能家居控制面板、工业控制系统、医疗设备等。
2）物联网（IoT）设备：
在物联网应用中，LVGL可以用来构建设备的控制界面，例如智能传感器、网关设备的设置界面。
3）便携式设备：
适合用于便携式电子设备，如手持设备、智能手表等，因其轻量特性和高效性能能够满足电池供电的需求。
4）教育和原型开发：
适用于教育和原型开发环境，开发者可以快速实现用户界面，帮助学生和初学者理解图形界面的设计与实现。
5）高级应用：
可用于需要复杂图形和动画的应用，如游戏开发或多媒体应用，利用其渲染能力实现丰富的用户体验。

3、需要注意的事项
1）内存管理：
尽管LVGL是轻量级的，但在内存使用方面仍需谨慎。开发者需要合理管理内存，避免内存泄漏或溢出，特别是在资源受限的环境中。
2）性能优化：
在实现复杂界面时，需要对性能进行优化。例如，减少不必要的重绘，使用图像缓存等方法，提高界面的响应速度和流畅度。
3）输入设备的兼容性：
在选择输入设备时，要确保与LVGL的兼容性。例如，不同的触摸屏可能需要不同的驱动程序，开发者需要确保所用的硬件能够正常工作。
4）学习曲线：
LVGL虽然功能强大，但其使用和配置可能有一定的学习曲线。开发者需要花时间熟悉LVGL的API和工作流程，才能有效利用其功能。
5）文档与社区支持：
LVGL有较好的文档和社区支持，但在遇到问题时，开发者应积极查阅官方文档，参与社区讨论，以获得帮助和解决方案。

总结
Arduino LVGL是一个强大的图形库，适合在资源有限的嵌入式系统上构建高效的用户界面。通过其丰富的组件和灵活的特性，开发者可以实现多种应用场景中的图形界面。然而，在使用过程中，合理管理内存和优化性能是成功的关键。通过充分利用LVGL的特性，开发者能够创建出美观且功能强大的用户界面。

在这里插入图片描述
在 Arduino LVGL（轻量级图形库）中，电池电量和图标结合是一种常见的用户界面设计，旨在以直观的方式向用户展示设备的电池状态。通过图标和数值的结合，用户能够快速了解设备的剩余电量。以下是对电池电量与图标结合的详细解释，包括其主要特点、应用场景以及需要注意的事项。

主要特点
直观性：
电池图标提供了直观的视觉表示，用户可以一目了然地判断电池的剩余电量，通常通过不同的填充状态或颜色变化来表示电量水平。
实时更新：
电池电量信息可以实时更新，确保用户始终获得最新的电池状态，尤其在充电或使用过程中，电量变化迅速。
多样化样式：
开发者可以根据应用需求和设计风格自定义电池图标的外观，包括形状、颜色和样式，以适应不同的用户界面。
信息丰富：
除了图标外，结合数值显示（如百分比或剩余时间），可以为用户提供更加全面的电池状态信息。

应用场景
移动设备：
在智能手机、平板电脑和其他便携式设备中，电池电量和图标结合是标准的用户界面元素，帮助用户监控设备的电池使用情况。
物联网设备：
在物联网应用中，电池电量图标可以用于实时监控设备的电源状态，确保用户能及时了解设备的续航能力。
穿戴设备：
在智能手表或健身追踪器中，通过电池图标和电量显示可以帮助用户管理设备的使用时间，避免意外关机。
家用电器：
在一些无线家用电器（如无线吸尘器）中，电池电量和图标结合可以直观显示设备的电源状态，提升用户体验。

注意事项
性能考虑：
实时更新电池电量信息可能会增加系统负担，尤其在资源受限的嵌入式设备上，应优化更新频率和数据处理方式。
准确性：
确保从电源管理模块获取的电池电量数据准确，以避免因错误的电量显示导致用户误解设备状态。
视觉设计：
在设计电池图标时，应考虑颜色的对比度和可读性，确保用户在不同光照条件下都能清晰看到电量状态。
低电量警告：
设计低电量警告机制，当电池电量低于某个阈值时，通过图标变化或其他视觉提示及时提醒用户，防止设备意外关机。
适应性设计：
设计电池图标时，应考虑适应不同尺寸和分辨率的屏幕，确保在各种设备上均能良好显示。

总结
在 Arduino LVGL 中，电池电量与图标结合是一种有效的用户界面设计，能够直观地展示设备的电池状态。通过实时更新和丰富的信息展示，开发者能够为用户提供清晰的设备电源监控。在实际应用中，需要关注性能、准确性和视觉设计等因素，以确保系统的稳定性和用户的满意度。合理的设计与实现将使电池电量和图标结合成为用户界面中的一个重要组成部分，增强应用的功能性和易用性。

在这里插入图片描述
1、基本电池图标和电量文本显示

#include <Arduino.h>
#include <lvgl.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();
lv_obj_t *battery_icon;
lv_obj_t *label;

void setup() {
    Serial.begin(9600);
    tft.begin();
    lv_init();

    lv_disp_buf_t disp_buf;
    static lv_color_t buf1[LV_HOR_RES_MAX * 10];
    lv_disp_buf_init(&disp_buf, buf1, NULL, LV_HOR_RES_MAX * 10);

    lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.buffer = &disp_buf;
    disp_drv.flush_cb = my_flush;
    lv_disp_drv_register(&disp_drv);

    lv_obj_t *scr = lv_obj_create(NULL);
    lv_scr_load(scr);

    // 创建电池图标
    battery_icon = lv_img_create(scr);
    lv_img_set_src(battery_icon, "S:/battery.png"); // 替换为实际电池图标路径
    lv_obj_align(battery_icon, LV_ALIGN_CENTER, -30, 0);

    // 创建电量标签
    label = lv_label_create(scr);
    lv_label_set_text(label, "Battery: 100%");
    lv_obj_align(label, LV_ALIGN_CENTER, 30, 0);
}

void loop() {
    lv_task_handler();
    delay(500);
}

void my_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
    tft.setAddrWindow(area->x1, area->y1, area->x2, area->y2);
    tft.pushColors((uint16_t *)color_p, lv_area_get_size(area));
    lv_disp_flush_ready(disp);
}

3、动态更新电池电量

#include <Arduino.h>
#include <lvgl.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();
lv_obj_t *battery_icon;
lv_obj_t *label;
int battery_level = 100;

void update_battery() {
    if (battery_level > 0) {
        battery_level -= 10; // 每次调用减少10%
    }
    String text = "Battery: " + String(battery_level) + "%";
    lv_label_set_text(label, text.c_str());
}

void setup() {
    Serial.begin(9600);
    tft.begin();
    lv_init();

    lv_disp_buf_t disp_buf;
    static lv_color_t buf1[LV_HOR_RES_MAX * 10];
    lv_disp_buf_init(&disp_buf, buf1, NULL, LV_HOR_RES_MAX * 10);

    lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.buffer = &disp_buf;
    disp_drv.flush_cb = my_flush;
    lv_disp_drv_register(&disp_drv);

    lv_obj_t *scr = lv_obj_create(NULL);
    lv_scr_load(scr);

    // 创建电池图标
    battery_icon = lv_img_create(scr);
    lv_img_set_src(battery_icon, "S:/battery.png");
    lv_obj_align(battery_icon, LV_ALIGN_CENTER, -30, 0);

    // 创建电量标签
    label = lv_label_create(scr);
    lv_label_set_text(label, "Battery: 100%");
    lv_obj_align(label, LV_ALIGN_CENTER, 30, 0);
}

void loop() {
    lv_task_handler();
    delay(1000); // 每秒更新一次电池电量
    update_battery();
}

void my_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
    tft.setAddrWindow(area->x1, area->y1, area->x2, area->y2);
    tft.pushColors((uint16_t *)color_p, lv_area_get_size(area));
    lv_disp_flush_ready(disp);
}

3、电池电量和图标的完整显示

#include <Arduino.h>
#include <lvgl.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();
lv_obj_t *battery_icon;
lv_obj_t *label;
int battery_level = 100;

void update_battery() {
    if (battery_level > 0) {
        battery_level -= 10; // 每次调用减少10%
    }
    String text = "Battery: " + String(battery_level) + "%";
    lv_label_set_text(label, text.c_str());

    if (battery_level < 20) {
        lv_obj_set_style_bg_color(battery_icon, LV_COLOR_RED, 0); // 低电量时改变颜色
    } else {
        lv_obj_set_style_bg_color(battery_icon, LV_COLOR_GREEN, 0); // 正常电量
    }
}

void setup() {
    Serial.begin(9600);
    tft.begin();
    lv_init();

    lv_disp_buf_t disp_buf;
    static lv_color_t buf1[LV_HOR_RES_MAX * 10];
    lv_disp_buf_init(&disp_buf, buf1, NULL, LV_HOR_RES_MAX * 10);

    lv_disp_drv_t disp_drv;
    lv_disp_drv_init(&disp_drv);
    disp_drv.buffer = &disp_buf;
    disp_drv.flush_cb = my_flush;
    lv_disp_drv_register(&disp_drv);

    lv_obj_t *scr = lv_obj_create(NULL);
    lv_scr_load(scr);

    // 创建电池图标
    battery_icon = lv_img_create(scr);
    lv_img_set_src(battery_icon, "S:/battery.png");
    lv_obj_align(battery_icon, LV_ALIGN_CENTER, -30, 0);

    // 创建电量标签
    label = lv_label_create(scr);
    lv_label_set_text(label, "Battery: 100%");
    lv_obj_align(label, LV_ALIGN_CENTER, 30, 0);
}

void loop() {
    lv_task_handler();
    delay(1000); // 每秒更新一次电池电量
    update_battery();
}

void my_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
    tft.setAddrWindow(area->x1, area->y1, area->x2, area->y2);
    tft.pushColors((uint16_t *)color_p, lv_area_get_size(area));
    lv_disp_flush_ready(disp);
}

要点解读
电池图标的基本实现：
第一个案例展示了如何使用 LVGL 创建一个电池图标，并在旁边显示电量百分比。电池图标通过 lv_img_create() 创建，适合用于显示电池的状态。
动态电量更新：
第二个案例展示了如何动态更新电池电量。每秒减少 10% 的电量，并更新标签显示当前电量。通过 lv_label_set_text() 方法实现文本更新，展示了如何实时反映电池状态。
电量状态的视觉反馈：
第三个案例扩展了电池电量的显示逻辑，当电量低于 20% 时，改变电池图标的背景颜色为红色，以提供视觉警示。使用 lv_obj_set_style_bg_color() 方法可以动态改变控件样式，提高用户对电池状态的关注。
灵活的布局与设计：
在所有案例中，使用 lv_obj_align() 来控制电池图标和电量文本的位置，使得界面整洁且易于阅读。合理的布局设计有助于提升用户体验。
任务处理与界面流畅性：
在主循环中使用 lv_task_handler() 来处理 LVGL 的任务，确保界面能够流畅地更新。适当的延迟（如 delay(1000)) 用于控制更新频率，避免界面卡顿。

在这里插入图片描述
4、基本的电池电量显示和图标

#include <lvgl.h>
#include <TFT_eSPI.h>

// 初始化TFT屏幕
TFT_eSPI tft = TFT_eSPI();

// 电池电量变量（模拟）
int battery_level = 75;

// 显示屏幕刷新函数
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
  tft.startWrite();
  tft.setAddrWindow(area->x1, area->y1, area->x2 - area->x1 + 1, area->y2 - area->y1 + 1);
  for (int y = area->y1; y <= area->y2; y++) {
    for (int x = area->x1; x <= area->x2; x++) {
      tft.pushColor(color_p->full);
      color_p++;
    }
  }
  tft.endWrite();
  lv_disp_flush_ready(disp);
}

void setup() {
  Serial.begin(115200);

  // 初始化TFT屏幕
  tft.begin();
  tft.setRotation(1);

  // 初始化LVGL库
  lv_init();

  // 设置显示缓冲区
  static lv_color_t buf[LV_HOR_RES_MAX * 10];
  static lv_disp_buf_t disp_buf;
  lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * 10);

  // 初始化显示驱动
  lv_disp_drv_t disp_drv;
  lv_disp_drv_init(&disp_drv);
  disp_drv.hor_res = TFT_WIDTH;
  disp_drv.ver_res = TFT_HEIGHT;
  disp_drv.flush_cb = my_disp_flush;
  disp_drv.buffer = &disp_buf;
  lv_disp_drv_register(&disp_drv);

  // 创建图标和电池电量显示
  lv_obj_t *icon = lv_label_create(lv_scr_act());
  lv_label_set_text(icon, LV_SYMBOL_BATTERY_FULL);
  lv_obj_align(icon, LV_ALIGN_CENTER, 0, -20);

  lv_obj_t *label = lv_label_create(lv_scr_act());
  lv_label_set_text_fmt(label, "电池电量: %d%%", battery_level);
  lv_obj_align(label, LV_ALIGN_CENTER, 0, 20);
}

void loop() {
  lv_timer_handler(); // 处理LVGL任务
  delay(5); // 小延时
}

要点解读：
图标创建：使用lv_label_create函数创建一个标签对象，并设置为电池图标。

文本设置：使用lv_label_set_text_fmt函数为标签设置电池电量文本内容。

对齐设置：使用lv_obj_align函数将图标和电池电量标签对齐到屏幕的适当位置。

显示刷新：通过定期调用lv_timer_handler函数，刷新显示内容，确保电池电量显示和图标在屏幕上。

模块化设计：通过封装图标和电池电量显示的创建函数，实现模块化代码设计，便于维护和扩展。

5、动态更新电池电量和图标

#include <lvgl.h>
#include <TFT_eSPI.h>

// 初始化TFT屏幕
TFT_eSPI tft = TFT_eSPI();

// 电池电量变量（模拟）
int battery_level = 50;

// 显示屏幕刷新函数
void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p) {
  tft.startWrite();
  tft.setAddrWindow(area->x1, area->y1, area->x2 - area->x1 + 1, area->y2 - area->y1 + 1);
  for (int y = area->y1; y <= area->y2; y++) {
    for (int x = area->x1; x <= area->x2; x++) {
      tft.pushColor(color_p->full);
      color_p++;
    }
  }
  tft.endWrite();
  lv_disp_flush_ready(disp);
}

void setup() {
  Serial.begin(115200);

  // 初始化TFT屏幕
  tft.begin();
  tft.setRotation(1);

  // 初始化LVGL库
  lv_init();

  // 设置显示缓冲区
  static lv_color_t buf[LV_HOR_RES_MAX * 10];
  static lv_disp_buf_t disp_buf;
  lv_disp_buf_init(&disp_buf, buf, NULL, LV_HOR_RES_MAX * 10);

  // 初始化显示驱动
  lv_disp_drv_t disp_drv;
  lv_disp_drv_init(&disp_drv);
  disp_drv.hor_res = TFT_WIDTH;
  disp_drv.ver_res = TFT_HEIGHT;
  disp_drv.flush_cb = my_disp_flush;
  disp_drv.buffer = &disp_buf;
  lv_disp_drv_register(&disp_drv);

  // 创建图标和电池电量显示
  lv_obj_t *icon = lv_label_create(lv_scr_act());
  lv_label_set_text(icon, LV_SYMBOL_BATTERY_FULL);
  lv_obj_align(icon, LV_ALIGN_CENTER, 0, -20);

  lv_obj_t *label = lv_label_create(lv_scr_act());
  lv_label_set_text_fmt(label, "电池电量: %d%%", battery_level);
  lv_obj_align(label, LV_ALIGN_CENTER, 0, 20);

  // 定时器任务
  lv_timer_create([](lv_timer_t* timer) {
    static int battery_level = 50;
    lv_obj_t* label = static_cast<lv_obj_t*>(timer->user_data);

    battery_level = (battery_level + 1) % 101;
    lv_label_set_text_fmt(label, "电池电量: %d%%", battery_level);
    lv_label_set_text(icon, battery_level > 50 ? LV_SYMBOL_BATTERY_FULL : LV_SYMBOL_BATTERY_2);
  }, 1000, label);
}

void loop() {
  lv_timer_handler(); // 处理LVGL任务
  delay(5); // 小延时
}

要点解读：
动态更新：使用LVGL定时器任务，每秒更新一次电池电量显示和图标。

图标和文本结合：根据电池电量动态切换图标，展示不同的电池状态。

标签对齐：使用lv_obj_align函数将图标和电池电量标签对齐到屏幕的适当位置。

定时任务：通过LVGL定时器任务实现电池电量和图标的动态更新。

显示刷新：通过定期调用lv_timer_handler函数，刷新显示内容，确保电池电量显示和图标在屏幕上。

注意，以上案例只是为了拓展思路，仅供参考。它们可能有错误、不适用或者无法编译。您的硬件平台、使用场景和Arduino版本可能影响使用方法的选择。实际编程时，您要根据自己的硬件配置、使用场景和具体需求进行调整，并多次实际测试。您还要正确连接硬件，了解所用传感器和设备的规范和特性。涉及硬件操作的代码，您要在使用前确认引脚和电平等参数的正确性和安全性。

在这里插入图片描述