Skip to content

天楚锐齿

人工智能 云计算 大数据 物联网 IT 通信 嵌入式

天楚锐齿

  • 下载
  • 物联网
  • 云计算
  • 大数据
  • 人工智能
  • Linux&Android
  • 网络
  • 通信
  • 嵌入式
  • 杂七杂八

使用LVGL画一个表盘圆弧随指针变动的仪表

2021-12-17

不做过多解释,直接上代码,主要原理就是利用LVGL的mask遮罩特性,先用canvas画出一个圆弧(该圆弧的弧度随着指针度数变化而变化),然后制作成遮罩,再然后把遮罩应用到图片上。

#include “../../../lv_examples.h”
#if LV_USE_IMG
LV_IMG_DECLARE(img_cogwheel_argb);
lv_obj_t * om; //随指针变化的底图遮罩
lv_obj_t * bg; //随指针变化的底图图片
lv_obj_t * imgBg; //表盘
lv_obj_t * img; //指针
lv_obj_t * label1; //速度文本
uint32_t speed = 0;
int dir=1;
uint32_t oldAngle = 1800-450;
void my_task(lv_task_t * task)
{
    uint32_t * user_data = task->user_data;
    speed += dir*2; //每次速度加2公里
    uint32_t newAngle = 1800 – 450 + speed * 10 * 270 / 250; //整个表盘有刻度的占270度,最大250公里/小时,表盘旋转角度以1/10度为单位。
    //用动画来过渡,比直接用lv_img_set_angle设置到新角度要流畅很多:
    lv_anim_del_all();
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, img);
    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_img_set_angle);
    lv_anim_set_values(&a, oldAngle, newAngle);
    lv_anim_set_time(&a, 100);
    //lv_anim_set_playback_time(&a, 100);
    lv_anim_start(&a);
    lv_label_set_text_fmt(label1, “#ff0000 %d#”, speed);
    lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, -15);
    lv_objmask_remove_mask(om, NULL);
    lv_obj_del(bg);
    lv_obj_del(om);
    arc_mask_test(newAngle/10);
    //下一次的值:
    oldAngle = newAngle;
    if(speed>=250){
        dir = -1;
    }
    if(speed<=0){
        dir = 1;
    }
}
#define MASK_WIDTH 440   //图片的宽高
#define MASK_HEIGHT 440
void arc_mask_test(uint32_t endRad) {
    /* Create the mask of an arc by drawing it to a canvas*/
    static lv_opa_t mask_map[MASK_WIDTH * MASK_HEIGHT];
    /*Create a “8 bit alpha” canvas and clear it*/
    lv_obj_t * canvas = lv_canvas_create(lv_scr_act(), NULL);
    lv_canvas_set_buffer(canvas, mask_map, MASK_WIDTH, MASK_HEIGHT, LV_IMG_CF_ALPHA_8BIT);
    lv_canvas_fill_bg(canvas, LV_COLOR_BLACK, LV_OPA_TRANSP);
    /*Draw an arc to the canvas. The result “image” will be used as mask*/
    lv_draw_line_dsc_t arc_dsc;
    lv_draw_line_dsc_init(&arc_dsc);
    arc_dsc.color = LV_COLOR_WHITE;
    arc_dsc.width = 50;
    lv_canvas_draw_arc(canvas, MASK_WIDTH / 2, MASK_HEIGHT / 2, MASK_WIDTH / 2, 180-45, endRad, &arc_dsc);//以正方形中心为中心,以1/2边长为半径,画圆弧
    /*The mask is reads the canvas is not required anymore*/
    lv_obj_del(canvas);
    /*Create an object mask which will use the created mask*/
    om = lv_objmask_create(lv_scr_act(), NULL);
    lv_obj_set_size(om, MASK_WIDTH, MASK_HEIGHT);
    lv_obj_align(om, NULL, LV_ALIGN_CENTER, 0, 44); //对齐到指针盘面的中心
    lv_obj_move_background(om); //把它放到底图上,避免覆盖表盘和指针
    /*Add the created mask map to the object mask*/
    lv_draw_mask_map_param_t m;
    lv_area_t a;
    a.x1 = 0;
    a.y1 = 0;
    a.x2 = MASK_WIDTH – 1;
    a.y2 = MASK_HEIGHT – 1;
    lv_draw_mask_map_init(&m, &a, mask_map); //把画好的圆弧设置到遮罩
    lv_objmask_add_mask(om, &m); //把遮罩设置到遮罩对象
    /*Create a style with gradient*/
/*    static lv_style_t style_bg;
    lv_style_init(&style_bg);
    lv_style_set_bg_opa(&style_bg, LV_STATE_DEFAULT, LV_OPA_COVER); //静态的style 只能设置各种属性一次,这里循环设置的话则会内存泄露
    lv_style_set_bg_color(&style_bg, LV_STATE_DEFAULT, LV_COLOR_RED);
    lv_style_set_bg_grad_color(&style_bg, LV_STATE_DEFAULT, LV_COLOR_BLUE);
    lv_style_set_bg_grad_dir(&style_bg, LV_STATE_DEFAULT, LV_GRAD_DIR_HOR);
*/
    /* Create and object with the gradient style on the object mask.
     * The arc will be masked from the gradient*/
//    lv_obj_t * bg = lv_obj_create(om, NULL);
    bg = lv_img_create(om, NULL);
    LV_IMG_DECLARE(pointer_bg);
    lv_img_set_src(bg, &pointer_bg);
    lv_obj_align(bg, NULL, LV_ALIGN_CENTER, 0, 0); //图片是mask的子对象,所以对齐中心即可
    lv_obj_reset_style_list(bg, LV_OBJ_PART_MAIN);
//    lv_obj_add_style(bg, LV_OBJ_PART_MAIN, &style_bg);
    lv_obj_set_size(bg, MASK_WIDTH, MASK_HEIGHT);
}
void lv_ex_img_3(void)
{
    //全黑背景
    static lv_style_t style_bg;
    lv_style_init(&style_bg);
    lv_style_set_bg_opa(&style_bg, LV_STATE_DEFAULT, LV_OPA_COVER);
    lv_style_set_bg_color(&style_bg, LV_STATE_DEFAULT, LV_COLOR_BLACK);
    lv_obj_add_style(lv_scr_act(), LV_OBJ_PART_MAIN, &style_bg);
    //随指针动作的底图
    arc_mask_test(180-45);
    //表盘图
    imgBg = lv_img_create(lv_scr_act(), NULL);
    LV_IMG_DECLARE(pointer_bg_1);
    lv_img_set_src(imgBg, &pointer_bg_1);
    lv_obj_align(imgBg, NULL, LV_ALIGN_CENTER, 0, 0);
    /*指针图*/
    img = lv_img_create(lv_scr_act(), NULL);
    //lv_img_set_src(img, &img_cogwheel_argb);
    LV_IMG_DECLARE(pointer);
    lv_img_set_src(img, &pointer);
    lv_obj_align(img, NULL, LV_ALIGN_CENTER, 60, 44); //指针长150pt,旋转中心位于15pt处,所以对齐到中心还要偏移150/2-15=60pt
    lv_img_set_pivot(img, 15, 15);    //绕着图像相对于左上角的偏移来旋转
    lv_img_set_angle(img, 1800-450);
    //文本:
    label1 = lv_label_create(lv_scr_act(), NULL);
    //设置字体
    static lv_style_t styleFont; //必须是静态的
    lv_style_init(&styleFont);
    lv_style_set_text_font(&styleFont, LV_STATE_DEFAULT, &lv_font_montserrat_30);
    lv_obj_add_style(label1, LV_GAUGE_PART_MAIN, &styleFont);
    lv_label_set_long_mode(label1, LV_LABEL_LONG_EXPAND);     /*Break the long lines*/
    lv_label_set_recolor(label1, true);                      /*Enable re-coloring by commands in the text*/
    lv_label_set_align(label1, LV_LABEL_ALIGN_CENTER);       /*Center aligned lines*/
    lv_label_set_text_fmt(label1, “#ff0000 %d#”, 0);
    lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, -15);
    static uint32_t user_data = 10;
    lv_task_create(my_task, 100, LV_TASK_PRIO_HIGH, &user_data);
    //指针动画
/*    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_var(&a, img);
    //这个后播放
    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_img_set_angle);
    lv_anim_set_values(&a, 1800+1800+450, 1800-450); //因为该指针图像朝右,有个180度的起始值,表盘底部空出90度不用,对称的原因所以要加45度
    lv_anim_set_time(&a, 5000);
    //lv_anim_set_repeat_count(&a, 1);
    lv_anim_set_playback_time(&a, 5000);
    lv_anim_start(&a);
    //这个先播放:
    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_img_set_angle);
    lv_anim_set_values(&a, 1800-450, 1800+1800+450); //因为该指针图像朝右,有个180度的起始值,表盘底部空出90度不用,对称的原因所以要加45度
    lv_anim_set_time(&a, 5000);
    lv_anim_set_playback_time(&a, 5000);
    //lv_anim_set_repeat_count(&a, LV_ANIM_REPEAT_INFINITE);
    lv_anim_start(&a);
*/
    //lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t)lv_img_set_zoom);
    //lv_anim_set_values(&a, 128, 400);
    //lv_anim_set_playback_time(&a, 1000);
    //lv_anim_start(&a);
}
#endif
1,162次阅读

Post navigation

前一篇:

LVGL嵌入式开源图形库

后一篇:

使用Netty作为TCP的粘包分包处理

发表评论 取消回复

邮箱地址不会被公开。 必填项已用*标注

个人介绍

需要么,有事情这里找联系方式:关于天楚锐齿

=== 美女同欣赏,好酒共品尝 ===

微信扫描二维码赞赏该文章:

扫描二维码分享该文章:

分类目录

  • Linux&Android (79)
  • Uncategorized (1)
  • 下载 (28)
  • 云计算 (37)
  • 人工智能 (8)
  • 大数据 (24)
  • 嵌入式 (34)
  • 杂七杂八 (34)
  • 物联网 (59)
  • 网络 (23)
  • 通信 (21)

文章归档

近期文章

  • 使用Python渲染OpenGL的.obj和.mtl文件
  • 用LVGL图形库绘制二维码
  • Android使用Messenger和SharedMemory实现跨app的海量数据传输
  • CAN信号的c语言解析代码
  • QT qml下DBus的使用例子

近期评论

  • 硕发表在《使用Android的HIDL+AIDL方式编写从HAL层到APP层的程序》
  • maxshu发表在《使用Android的HIDL+AIDL方式编写从HAL层到APP层的程序》
  • Ambition发表在《使用Android的HIDL+AIDL方式编写从HAL层到APP层的程序》
  • Ambition发表在《使用Android的HIDL+AIDL方式编写从HAL层到APP层的程序》
  • maxshu发表在《Android9下用ethernet 的Tether模式来做路由器功能》

阅读量

  • 使用Android的HIDL+AIDL方式编写从HAL层到APP层的程序 - 16,805次阅读
  • 卸载深信服Ingress、SecurityDesktop客户端 - 12,078次阅读
  • 车机技术之Android Automotive - 6,661次阅读
  • 车机技术之车规级Linux-Automotive Grade Linux(AGL) - 5,861次阅读
  • Linux策略路由及iptables mangle、ip rule、ip route关系及一种Network is unreachable错误 - 5,711次阅读
  • 在Android9下用ndk编译vSomeIP和CommonAPI以及使用例子 - 5,658次阅读
  • linux下的unbound DNS服务器设置详解 - 5,601次阅读
  • linux的tee命令导致ssh客户端下的shell卡住不动 - 4,998次阅读
  • 车机技术之360°全景影像(环视)系统 - 4,897次阅读
  • libwebp(处理webp图像)的安装和使用 - 4,749次阅读

功能

  • 文章RSS
  • 评论RSS

联系方式

地址
深圳市科技园

时间
周一至周五:  9:00~12:00,14:00~18:00
周六和周日:10:00~12:00

标签

android AT命令 centos Hadoop hdfs ip ipv6 kickstart linux mapreduce mini6410 modem OAuth openstack os python socket ssh uboot 内核 协议 安装 嵌入式 性能 报表 授权 操作系统 数据 数据库 月报 模型 汽车 测试 深信服 深度学习 源代码 神经网络 统计 编译 网络 脚本 虚拟机 调制解调器 车机 金融
© 2023 天楚锐齿