首页 > 其他分享 >嵌入式系统应用-LVGL的应用-音乐播放器

嵌入式系统应用-LVGL的应用-音乐播放器

时间：2024-11-16 13:43:26浏览次数：3  
标签：播放器 LV style set obj lv 应用 LVGL event

嵌入式系统应用-LVGL的应用-音乐播放器

1 播放器介绍

这里采用的是有源蜂鸣器播放的音乐，采用的RTT-BeepPlayer-pkg提供音乐模板。 里面提供了四首音乐的模板。

读者可以从这篇文章获得如何移植和加载音乐播放器的——rt-thread 的软件报包-RTT-BeepPlayer-pkg

2 LVGL 绘制

添加链接描述

2.1 背景绘制

获取当前的界面，绘制界面的背景色为：绿色。

 if (main_screen == NULL)
    {
        // 创建窗口
        main_screen = lv_scr_act();       
        // 背景色是蓝色
         lv_obj_set_style_bg_color(main_screen,lv_palette_main(LV_PALETTE_GREEN), LV_PART_MAIN);
         lv_scr_load(main_screen);
    }

2.2 按键绘制

按键的创建时：lv_btn_create
添加对应的按键的动作：lv_obj_add_event_cb
可以为按键创建风格：style

2.2.1 图标下载

可以从阿里的开源图标下载你需要的图标：阿里图标

在这里插入图片描述

2.2.2 由于图片尺寸默认200200，利用图片工具转化成为5050

在这里插入图片描述

2.2.3 利用lvgl 在线转化工具，进行转化c文件

在线转化工具

如图进行配置
在这里插入图片描述
在这里插入图片描述

2.2.4 代码显示

 //  播放按键
    lv_obj_t* btn_play = lv_btn_create(main_screen);
    lv_obj_add_event_cb(btn_play, event_play_handler, LV_EVENT_ALL, user_data);
    lv_obj_align(btn_play, LV_ALIGN_LEFT_MID, 0, 0);
    lv_obj_set_size(btn_play, 50, 50);
 
   // 下一首按键
    lv_obj_t* btn_next= lv_btn_create(main_screen);
    lv_obj_add_event_cb(btn_next, event_next_handler, LV_EVENT_ALL, user_data);
    lv_obj_align(btn_next, LV_ALIGN_CENTER, -80, 0);
    lv_obj_set_size(btn_next, 50, 50);
  // 上一首按键
    lv_obj_t* btn_prev = lv_btn_create(main_screen);
    lv_obj_add_event_cb(btn_prev, event_prev_handler, LV_EVENT_ALL, user_data);
    lv_obj_align(btn_prev, LV_ALIGN_CENTER, 80, 0);
    lv_obj_set_size(btn_prev, 50, 50);
   // 退出按键
    lv_obj_t* btn_exit = lv_btn_create(main_screen);
    lv_obj_add_event_cb(btn_exit, event_exit_handler, LV_EVENT_ALL, user_data);
    lv_obj_align(btn_exit, LV_ALIGN_RIGHT_MID, 0, 0);
    lv_obj_set_size(btn_exit, 50, 50);
    // 风格设计
    static lv_style_t style_pr;
    lv_style_init(&style_pr);
    /*Add a large outline when pressed*/
    lv_style_set_outline_width(&style_pr, 30);
    lv_style_set_outline_opa(&style_pr, LV_OPA_TRANSP);
    lv_style_set_translate_y(&style_pr, 5);
    lv_style_set_shadow_ofs_y(&style_pr, 3);
    lv_style_set_bg_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 2));
    lv_style_set_bg_grad_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 4));
    lv_style_set_radius(&style_pr, LV_RADIUS_CIRCLE);
    // 添加风格，按下去风格
    lv_obj_add_style(btn_play, &style_pr, LV_STATE_PRESSED);
    lv_obj_add_style(btn_next, &style_pr, LV_STATE_PRESSED);
    lv_obj_add_style(btn_prev, &style_pr, LV_STATE_PRESSED);
    lv_obj_add_style(btn_exit, &style_pr, LV_STATE_PRESSED);

    static lv_style_t style_unpr;
    lv_style_init(&style_unpr);
    /*Add a large outline when pressed*/
    lv_style_set_bg_color(&style_unpr, lv_color_white());
    lv_style_set_radius(&style_unpr, LV_RADIUS_CIRCLE);
    // 添加风格，默认风格
    lv_obj_add_style(btn_play, &style_unpr, LV_STATE_DEFAULT); 
    lv_obj_add_style(btn_next, &style_unpr, LV_STATE_DEFAULT);
    lv_obj_add_style(btn_prev, &style_unpr, LV_STATE_DEFAULT);
    lv_obj_add_style(btn_exit, &style_unpr, LV_STATE_DEFAULT);

    // 添加图标
    lv_obj_t* img_play= lv_img_create(btn_play);
    lv_img_set_src(img_play, &m_play);
    lv_obj_align(img_play, LV_ALIGN_CENTER, 0, 0);


    img_play = lv_img_create(btn_next);
    lv_img_set_src(img_play, &m_next);
    lv_obj_align(img_play, LV_ALIGN_CENTER, 0, 0);

    img_play = lv_img_create(btn_prev);
    lv_img_set_src(img_play, &m_prev);
    lv_obj_align(img_play, LV_ALIGN_CENTER, 0, 0);

    img_play = lv_img_create(btn_exit);
    lv_img_set_src(img_play, &m_exit);
    lv_obj_align(img_play, LV_ALIGN_CENTER, 0, 0);

2.3 滑动条绘制

用滑动条来控制音量：
为了滑动条不一样，为滑动条添加了风格。

//  添加滑动条，调节音乐

    lv_obj_t* slider = lv_slider_create(main_screen);
    lv_slider_set_value(slider, 30,LV_ANIM_ON);
    lv_slider_set_range(slider, 0,80);
    lv_obj_set_size(slider, 300, 30);
    lv_obj_align(slider, LV_ALIGN_BOTTOM_MID, -50,-50);

    static lv_style_t style_slider_vol, style_indicator, style_knob;
    lv_style_init(&style_slider_vol);
    lv_style_set_bg_opa(&style_slider_vol, LV_OPA_COVER);
    lv_style_set_bg_color(&style_slider_vol, lv_color_hex3(0xbbb));
    lv_style_set_radius(&style_slider_vol, LV_RADIUS_CIRCLE);
    lv_style_set_pad_ver(&style_slider_vol, -2); /*Makes the indicator larger*/
    lv_obj_add_style(slider, &style_slider_vol, LV_PART_MAIN);

    lv_style_init(&style_indicator);
    lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
    lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);

    lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);

    lv_style_init(&style_knob);
    lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
    lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
    lv_style_set_border_width(&style_knob, 2);
    lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
    lv_style_set_pad_all(&style_knob, 6); /*Makes the knob larger*/

    lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);
    lv_obj_add_event_cb(slider, slider_event_handler, LV_EVENT_ALL, user_data);

2.4 文本绘制

文本1： 显示当前应用的名字
文本2： 显示当前的作者
文本3： 显示播放音乐的内容

//   添加label   显示内容

    lv_obj_t*  label_title= lv_label_create(main_screen);

    lv_obj_set_style_text_font(label_title, &lv_font_montserrat_22, 0);
    lv_label_set_text(label_title, "Music Player");
    lv_obj_align(label_title,LV_ALIGN_TOP_MID,0,0);



    lv_obj_t* label_author = lv_label_create(main_screen);

    lv_obj_set_style_text_font(label_author, &lv_font_montserrat_22, 0);
    lv_label_set_text(label_author, "Design by Abner");
    lv_obj_align(label_author, LV_ALIGN_BOTTOM_MID, 0, 0);

2.5 绘制效果

在这里插入图片描述

3 STM32 移植

3.1 前期LVGL的库移植

如果读者还没有完全掌握LVGL的移植，可以通过这篇文章来完成。

嵌入式系统应用-第十章 LVGL的移植到基于STM32的工程

3.2 按键功能加载

为播放按键，上一首按键，下一首按键添加按键动作，实现音乐的播放、下一首和上一首。

static void event_play_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
	  struct player *player=lv_event_get_user_data(e);
	  enum PLAYER_STATUS player_status;
    if (code == LV_EVENT_CLICKED) {
//        rt_kprintf("button play is pressed\r\n");
			
			  player_control(player, PLAYER_CMD_GET_STATUS, &player_status);
			  if(player_status==PLAYER_STOP)
				{
			       player_control(player, PLAYER_CMD_PLAY, RT_NULL);
					   music_show(player);
				}
				else
				{	
						player_control(player, PLAYER_CMD_STOP, RT_NULL);
					  					   music_show(player);
				}
			      
    }
 
}

static void event_next_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
	  struct player *player=lv_event_get_user_data(e);
    if (code == LV_EVENT_CLICKED) {
//        rt_kprintf("button next is pressed\r\n");
        player_control(player, PLAYER_CMD_NEXT, RT_NULL);
								   music_show(player);
    }
  
}

static void event_prev_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
		struct player *player=lv_event_get_user_data(e);
    if (code == LV_EVENT_CLICKED) {
//        rt_kprintf("button prev is pressed\r\n");
			        player_control(player, PLAYER_CMD_LAST, RT_NULL);
								   music_show(player);
    }
  
}

static void event_exit_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if (code == LV_EVENT_CLICKED) {
        rt_kprintf("button exit is pressed\r\n");
    }
  
}

3.3 滑动条功能加载

这里用滑动条调节音量，使用命令：PLAYER_CMD_SET_VOL

static void slider_event_handler(lv_event_t* e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t* obj = lv_event_get_target(e);
	  struct player *player=lv_event_get_user_data(e);
    if (code == LV_EVENT_VALUE_CHANGED) {

			   uint8_t vol=lv_slider_get_value(obj);
			   player_control(player, PLAYER_CMD_SET_VOL, &vol);
								   music_show(player);
    }
}

3.4 效果展示

<iframe allowfullscreen="true" data-mediaembed="csdn" frameborder="0" id="A5DZUwGk-1731302814279" src="https://live.csdn.net/v/embed/433518"></iframe>

1623277386

标签：播放器,LV,style,set,obj,lv,应用,LVGL,event
From： https://blog.csdn.net/huanghongqi11/article/details/143671427

相关文章

  • MAUI Windows 未打包应用
    前言Windows最近的更新导致19045.5011和19045.5131的包管理出现了一些问题，调试MAUI程序时，会提示Failedtounregisterapplication导致就没办法调试或部署了不过现在MAUI在Windows上支持未打包模式，按照此处的文档https://learn.microsoft.com/zh-cn/dotnet/maui/windows/se......
  • Python 接口自动化Jsonpath 应用及断言
    jsonpath的应用：首先我们要知道，使用jsonpath之前我们要有一个对应的数据去进行对应的操作，比如我们工作中会得到的响应数据，基于我们的响应数据我们要对应的提取比如tokenmsg.....所以我们就会用到它jsonpath。那在Python中我们需要先按转第三方包安装命令pipinsta......
  • golang: 在线上用nginx部署应用
    一，启动应用:1,编译程序$gobuild2,用nohup启动应用的二进制程序$nohup/data/goapp/industry/industry>>/data/logs/gologs/back.log2>&1&[1]48963,检查应用是否启动:$ss-lntp|grep3000LISTEN040960.0.0.0:30000.0.0.0:*users:(("......
  • 安卓 32 位和 64 位应用的技术区别 的详细表格化分析：
    安卓32位和64位应用的技术区别的详细表格化分析：对比项32位应用64位应用内存寻址能力最大支持4GB内存（通常约为2–3GB）理论上支持最大16TB内存，实际使用受到设备限制性能计算能力较弱，适用于内存和计算需求较低的应用更强的计算性能，适合内存密集型和......
  • 大模型微调实战营-精通+指令微调+开源大模型微调+对齐+垂直领域应用
    ‌大模型微调实战营是一个专注于大模型微调技术的训练营，涵盖指令微调、开源大模型微调、对齐以及垂直领域应用等多个方面。‌‌指令微调‌：通过添加特定的指令或模板，对大模型进行微调，使其能够生成更符合期望的回答。‌开源大模型微调‌：利用开源的大模型资源，进行微调训练，以适应特......
  • 接口自动化requests 库应用（三）
    今天来讲保持session会话大家都知道在有的项目接口中需要鉴权，需要判断用户对用户的基本信息，所以要保存session会话。就是在整个过程我们要对用户有一个特定的会话，失效了我们就不能继续进行了。比如：我们登录了一个网站，所以我们在做接口请求时，要一个对象从头干到尾，不然就判......
  • 生产环境中AI调用的优化：AI网关高价值应用实践
    随着越来越多的组织将生成式AI引入生产环境，他们面临的挑战已经超出了初步实施的范畴。如果管理不当，扩展性限制、安全漏洞和性能瓶颈可能会阻碍AI应用的推广。实际问题如用户数据的安全性、固定容量限制、成本管理和延迟优化等，需要创新的解决方案。本文我们深入探讨了一些独特的应......
  • 带你0到1之QT编程：二十六、实战应用之翻转动画的实现
    此为QT编程的第二十六谈！关注我，带你快速学习QT编程的学习路线！每一篇的技术点都是很很重要！很重要！很重要！但不冗余！我们通常采取总-分-总和生活化的讲解方式来阐述一个知识点！码农不易，各位学者学到东西请点赞支持支持！开始部分：总：在开发过程中，难以避免有些高级动画的实现，例如翻......
  • 【AI声音克隆整合包及教程】第二代GPT-SoVITS V2：技术、应用与伦理思考
    一、引言在当今科技迅速发展的时代，声音克隆技术成为人工智能领域的一个备受瞩目的分支。GPT-SoVITSV2作为一种声音克隆工具，正逐渐进入人们的视野，它在多个领域展现出巨大的潜力，同时也引发了一系列值得深入探讨的问题。本文旨在介绍GPT-SoVITSV2的技术原理、应用领域及其带来......
  • 【深度学习目标检测|YOLO算法5-2-3】YOLO家族进化史：从YOLOv1到YOLOv11的架构创新、性
    【深度学习目标检测|YOLO算法5-2-3】YOLO家族进化史：从YOLOv1到YOLOv11的架构创新、性能优化与行业应用全解析…【深度学习目标检测|YOLO算法5-2-3】YOLO家族进化史：从YOLOv1到YOLOv11的架构创新、性能优化与行业应用全解析…文章目录【深度学习目标检测|YOLO算法5-2-3......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99