69浏览
查看: 69|回复: 6

[项目] 【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫

[复制链接]
【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫图2

ESP32-CYD(2432S028)液晶2.8寸屏开发板使用ESP32-WROOM-32模块作为主控,主控是一款双核MCU,集成了Wi-Fi和蓝牙功能,主频可达240MHz,具有520KB的SRAM、448KB的ROM,闪存容量为4MB+4MB,显示分辨率为240x320,采用电阻式触控式屏幕。该模块包括LCD显示器、背光控制电路、触控式屏幕控制电路、扬声器驱动电路、光敏电路和RGB LED控制电路。支持TF卡界面、序列界面、温湿度感测器界面(DHT11界面)和保留的IO口界面,该模块支持在Arduino IDE、ESP IDE、MicroPython和Mixly中进行开发。


【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫图1

驴友花雕  中级技神
 楼主|

发表于 7 天前

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫

准备图像文件 – image.h
要使用 LVGL 加载自定义图像,需要创建并配置一个名为 image.h 的文件,该文件必须放在 sketch 文件夹中。

这里可以使用案例映像或按照以下步骤准备自定义映像:

1. 前往 LVGL Image Converter 网站: lvgl.io/tools/imageconverter

2. 选择下图中突出显示的以下选项:

版本: LVGL v9
从计算机中选择图像
颜色格式:ARGB8888
然后,单击 转化率 按钮

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫图1

回复

使用道具 举报

驴友花雕  中级技神
 楼主|

发表于 7 天前

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫

3. 它将下载一个带有您的图片名称但扩展名为 .c 的文件。打开该文件并在方括号 { }包含许多十六进制字符。

4. 创建一个名为 image.h 的新文件。

5. 复制此存储库中的代码并将其粘贴到您刚刚创建的新 image.h 文件中。

6. 将my_image_map变量替换为您刚刚在步骤 3 中复制的内容。(请勿更改my_image_mapvariable,则仅复制和替换括号之间的内容。

  1. #ifdef __has_include
  2.     #if __has_include("lvgl.h")
  3.         #ifndef LV_LVGL_H_INCLUDE_SIMPLE
  4.             #define LV_LVGL_H_INCLUDE_SIMPLE
  5.         #endif
  6.     #endif
  7. #endif
  8. #if defined(LV_LVGL_H_INCLUDE_SIMPLE)
  9.     #include "lvgl.h"
  10. #else
  11.     #include "lvgl/lvgl.h"
  12. #endif
  13. #define LV_BIG_ENDIAN_SYSTEM
  14. #ifndef LV_ATTRIBUTE_MEM_ALIGN
  15. #define LV_ATTRIBUTE_MEM_ALIGN
  16. #endif
  17. #ifndef LV_ATTRIBUTE_IMG_MY_IMAGE
  18. #define LV_ATTRIBUTE_IMG_MY_IMAGE
  19. #endif
  20. const LV_ATTRIBUTE_MEM_ALIGN LV_ATTRIBUTE_IMG_MY_IMAGE uint8_t my_image_map[] = {REPLACE_WITH_YOUR__IMAGE_ATTRIBUTE};
  21. const lv_image_dsc_t my_image = {
  22.     .header = {
  23.         .magic = LV_IMAGE_HEADER_MAGIC,
  24.         .cf = LV_COLOR_FORMAT_ARGB8888,
  25.         .flags = 0,         
  26.         .w = 128,
  27.         .h = 128,
  28.         //.stride = 120,
  29.         .reserved_2 = 0
  30.     },
  31.     .data_size = sizeof(my_image_map),
  32.     .data = my_image_map,
  33.     .reserved = NULL
  34. };
复制代码


回复

使用道具 举报

驴友花雕  中级技神
 楼主|

发表于 7 天前

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫

7. 向下滚动该文件并根据您的图像宽度更改以下行.w和身高.h:

  1. const lv_image_dsc_t my_image = {
  2.     .header = {
  3.         .magic = LV_IMAGE_HEADER_MAGIC,
  4.         .cf = LV_COLOR_FORMAT_ARGB8888,
  5.         .flags = 0,         
  6.         .w = 128,
  7.         .h = 128,
  8.         //.stride = 120,
  9.         .reserved_2 = 0
  10.     },
  11.     .data_size = sizeof(my_image_map),
  12.     .data = my_image_map,
  13.     .reserved = NULL
  14. };
复制代码


回复

使用道具 举报

驴友花雕  中级技神
 楼主|

发表于 7 天前

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫

8. 最后,保存您的 image.h 文件。


重要提示:image.h 文件应放置在项目的 sketch 文件夹中的 .ino 文件旁边。

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫图1

回复

使用道具 举报

驴友花雕  中级技神
 楼主|

发表于 7 天前

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫

  【Arduino】168种传感器模块系列实验(资料代码+仿真编程+图形编程)
  实验二百三十八:ESP32开发板WiFi蓝牙2.8寸240*320智能液晶显示屏带触摸屏TFT模块
  项目实验之二十三:带 LVGL 的 ESP32 CYD:在屏幕上显示图像猫

实验开源代码

  1. /*
  2.   【Arduino】168种传感器模块系列实验(资料代码+仿真编程+图形编程)
  3.   实验二百三十八:ESP32开发板WiFi蓝牙2.8寸240*320智能液晶显示屏带触摸屏TFT模块
  4.   项目实验之二十三:带 LVGL 的 ESP32 CYD:在屏幕上显示图像猫
  5. */
  6. #include <lvgl.h>  // 引入LVGL库,用于创建图形用户界面(GUI)
  7. #include <TFT_eSPI.h>  // 引入TFT_eSPI库,用于控制TFT显示屏
  8. #include <image.h>  // 引入图像头文件,假设包含图像数据
  9. // 定义屏幕的宽度和高度
  10. #define SCREEN_WIDTH 240
  11. #define SCREEN_HEIGHT 320
  12. // 计算并定义绘图缓冲区的大小
  13. #define DRAW_BUF_SIZE (SCREEN_WIDTH * SCREEN_HEIGHT / 10 * (LV_COLOR_DEPTH / 8))
  14. uint32_t draw_buf[DRAW_BUF_SIZE / 4];  // 声明缓冲区数组
  15. // 如果启用日志功能,它将向用户提供有关库中发生的事情的信息
  16. void log_print(lv_log_level_t level, const char * buf) {
  17.   LV_UNUSED(level);  // 忽略未使用的参数
  18.   Serial.println(buf);  // 在串口监视器中打印日志信息
  19.   Serial.flush();  // 清空串口缓冲区
  20. }
  21. // 函数:绘制图像
  22. void draw_image(void) {
  23.   LV_IMAGE_DECLARE(my_image);  // 声明图像数据
  24.   lv_obj_t * img1 = lv_image_create(lv_screen_active());  // 创建一个图像对象
  25.   lv_image_set_src(img1, &my_image);  // 设置图像源为声明的图像数据
  26.   lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);  // 将图像对象在屏幕中心对齐
  27. }
  28. void setup() {
  29.   // 打印LVGL库的版本信息到串口监视器
  30.   String LVGL_Arduino = String("LVGL Library Version: ") + lv_version_major() + "." + lv_version_minor() + "." + lv_version_patch();
  31.   Serial.begin(115200);  // 初始化串口通信
  32.   Serial.println(LVGL_Arduino);
  33.   // 初始化LVGL库
  34.   lv_init();
  35.   // 注册日志打印函数用于调试
  36.   lv_log_register_print_cb(log_print);
  37.   // 创建显示对象
  38.   lv_display_t * disp;
  39.   // 使用TFT_eSPI库初始化TFT显示屏
  40.   disp = lv_tft_espi_create(SCREEN_WIDTH, SCREEN_HEIGHT, draw_buf, sizeof(draw_buf));
  41.   lv_display_set_rotation(disp, LV_DISPLAY_ROTATION_270);  // 设置显示屏的旋转角度
  42.    
  43.   // 调用函数绘制图像
  44.   draw_image();
  45. }
  46. void loop() {
  47.   lv_task_handler();  // 执行GUI任务
  48.   lv_tick_inc(5);  // 告诉LVGL经过的时间
  49.   delay(5);  // 等待5毫秒
  50. }
复制代码


回复

使用道具 举报

驴友花雕  中级技神
 楼主|

发表于 7 天前

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫

实验场景图

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫图1

【花雕学编程】Arduino动手做(238)---ESP32 CYD显示图像猫图2
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail