0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

嵌入式GUI“美容”小技巧:让小身板的MCU,也可以有个俊模样的界面设计!

NXP客栈 来源:未知 2023-05-19 10:55 次阅读

在本文中,小编用“小身板”和“俊模样”来指代一个带有图形用户界面的系统的两个方面。“小身板”是指相对有限的MCU资源,例如:相对较低的主频、相对较少的存储资源、没有专门的LCD显示控制器、较低的显示接口速度等等;而“俊模样”是指对用户友好,漂亮且富于吸引力的图形界面,就如同男生的帅、女生的美。

男生的帅和女生的美,除了与天生的基因有关,外在的修饰也同样必不可少。俗话说,人靠衣裳马靠鞍,衣裳和鞍都是外部的修饰,都是实现美好事物所需要的资源。

由此及彼,一个“俊模样”的GUI设计,同样对资源有比较高的要求。这些资源包括主频、Flash和RAM以及美工设计等等。那么,是不是“小身板”就不能有“俊模样”呢?

不是的!如同一个优秀的化妆师可以用卓越的手段实现美,嵌入式工程师也可以通过各种手段进行资源优化,力争让“小身板”的MCU也能实现“俊模样”的界面设计。

对GUI设计进行资源优化的路很漫长,涉及的方面很多,需要我们不断发现,不断思考。小编在这里通过一些示例和大家分享如何使用Slider对某一类动画进行存储资源优化。

我们在生活中经常会见到这样一类应用,如下图所示:

347420da-f5ef-11ed-90ce-dac502259ad0.png

通过观察我们发现,尽管上面的图形元素,外观各异、形状各异,但是都可以被抽象为两个部分:静态部分和动态部分。比如,咖啡液位,由静态的杯子和动态的咖啡组成;温度计由静态的玻璃容器和动态的水银组成。

我们再看看GUI设计中经常使用到的控件——Slider,其典型结构如下图所示。这是一个典型的Slider控件,由静态的背景 (main) 和动态的指示器 (Indicator) 以及调节点 (Knob) 组成。

348125c8-f5ef-11ed-90ce-dac502259ad0.png

LVGL中,设置样式的函数名都是以lv_obj开始,例如:

  • lv_obj_set_style_bg_color

  • lv_obj_set_style_bg_opa

  • lv_obj_set_style_bg_img_src

可见,样式是针对所有控件的父对象而言的。换句话说,我们既可以通过lv_obj_set_style_bg_img_src为Slider控件的背景、指示器和调节点设置图片样式,也可以通过lv_obj_set_style_bg_opa将Slider控件的背景、指示器和调节点的透明度设置为0从而达到隐藏Slider控件相应组成部分的目的。

接下来,我们看看如何使用Slider实现咖啡液位变化的动画效果。

首先,通过美工设计,将咖啡液位的图分解为两部分,杯子和咖啡,并将它们分别作为Slider的背景部分和指示器部分,同时隐藏Slider的调节点部分,如下面的简图所示。

3487f998-f5ef-11ed-90ce-dac502259ad0.png

咖啡液位的分解及与Slider的对应关系

完成上面的工作之后,后面的工作就是为Slider创建动画,并在动画的回调函数中周期性地调用lv_slider_set_value函数以改变Slider指示器的值,从而实现咖啡液位变化的效果。

看到这里,大家会问了,你讲这么多,和存储资源优化有什么关系吗?大家请想想看,通常我们如何实现这样的动画效果?大致如下图所示,将咖啡液位变化的动画分解为若干不同液位的静态图片,然后,每隔一个时间间隔播放一张图片。时间间隔越短,图片数量越多,动画的效果越流畅。但是,图片数量越多,需要的存储资源越多。

但是,使用上面的方法,实现相同的动画效果,只需要两张图片即可,节约存储资源。

3492c9cc-f5ef-11ed-90ce-dac502259ad0.png

那么,最后总结一下,有两点与大家分享:

01

前面的三个显示应用,可以抽象出共同的特性。那就是,它们都可以清晰地剥离出静态部分和动态部分。动态部分都具有有限的变化范围,也就是具有一个起始值和结束值。比如,咖啡液位总是在最低液位和最高液位之间变化;又比如,温度计显示的温度值也总是在最低温度和最高温度之间变化。那么,对于这类应用,就可以用Slider实现。

每一种显示动画的方法,都有适用范围,没有好坏之分。我们只有为自己的显示应用选择合适的方案,才能最大限度地优化存储资源。

02

一点GUI动画显示的心得体会,与大家分享,欢迎各位大神指导。


声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • NXP
    NXP
    +关注

    关注

    60

    文章

    1264

    浏览量

    182841

原文标题:嵌入式GUI“美容”小技巧:让小身板的MCU,也可以有个俊模样的界面设计!

文章出处:【微信号:NXP客栈,微信公众号:NXP客栈】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    嵌入式学习建议

    ,最好能有自己动手的空间。不花一分硬件钱想要学好嵌入式系统不实际,因为这是实践性很强的学科。好书,可以人少走弯路,不被误导。好老师可以
    发表于 10-22 11:41

    嵌入式系统的未来趋势哪些?

    嵌入式系统是指将我们的操作系统和功能软件集成于计算机硬件系统之中,形成一专用的计算机系统。那么嵌入式系统的未来趋势哪些呢? 1. 人工智能与机器学习的整合 随着现代人工智能(AI)
    发表于 09-12 15:42

    七大嵌入式GUI盘点

    嵌入式图形用户界面GUI)是一种为嵌入式系统设计的用户界面,它可以
    发表于 09-02 10:58

    嵌入式linux开发的基本步骤哪些?

    之前,首先需要选择合适的硬件平台。硬件选择需要考虑以下几个方面: 1.1 处理器 嵌入式Linux开发需要一处理器,常见的处理器ARM、MIPS、PowerPC等。选择处理器时,需要考虑处理器的性能、功耗、成本等因素。 1.
    的头像 发表于 09-02 09:11 337次阅读

    嵌入式QT常见开发方式哪些?

    功能。 3.Qt Quick/QML开发: 利用QML语言和Qt Quick框架来创建流畅且动画丰富的用户界面,QML是一种声明性语言,适合于快速原型开发和移动设备、嵌入式系统的现代界面设计。同时
    发表于 08-12 10:05

    嵌入式热门领域哪些?

    师提供了独特的事业机遇,同时为行业的技术发展和应用前景带来了无限可能。 智能医疗 嵌入式系统在智能医疗领域的应用备受瞩目。通过将嵌入式系统与医疗设备和传感器相结合,
    发表于 07-16 09:23

    适合初学者的嵌入式项目哪些?

    适合初学者的嵌入式项目哪些? 嵌入式学习是一实践性很强的领域,通过实际项目可以帮助你巩固理论知识并提升技能。以下是几个适合初学者练手的
    发表于 07-11 10:23

    嵌入式热门发展方向哪些?

    已经体现了嵌入式系统的优势;在信息家电领域,冰箱、空调等的网络化、智能化将引领人们的生活步入一崭新的空间,即使你不在家里,可以通过电话线、网络进行远程控制,在这些设备中,
    发表于 04-11 14:17

    分享几个嵌入式中常用的GUI

    一、什么是GUIGUI是图形用户界面(GraphicalUserInterface,简称GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户
    的头像 发表于 04-06 08:09 1323次阅读
    分享几个<b class='flag-5'>嵌入式</b>中常用的<b class='flag-5'>GUI</b>

    GUI Guider新版本发布,嵌入式GUI开发体验升级

    作为恩智浦着力打造的一款嵌入式人机交互应用开发工具,GUI Guider又迎来了一新版本!最新发布的GUI Guider v1.7.1增加了视频转换功能,
    发表于 03-29 09:47 1496次阅读
    <b class='flag-5'>GUI</b> Guider新版本发布,<b class='flag-5'>嵌入式</b><b class='flag-5'>GUI</b>开发体验升级

    嵌入式GUI开发特训营”开营啦!是学霸就有奖拿,快来挑战一下!

    分分钟与高手并肩! 说到嵌入式GUI,那可真是太多的东西可以聊。在此开启一系列话题,讲述NXP的嵌入
    的头像 发表于 12-07 10:55 1034次阅读
    “<b class='flag-5'>嵌入式</b><b class='flag-5'>GUI</b>开发特训营”开营啦!是学霸就有奖拿,快来挑战一下!

    谁说单片机不能图形编程,介绍MCU的TOP 5图形GUI库!

    LittlevGL(LVGL) 是一款开源的嵌入式图形用户界面GUI)库,专为嵌入式系统设计。LVGL以其轻量级、灵活性和强大的功能而备受开发者青睐,资源够的情况下可移植到所有
    的头像 发表于 12-07 10:42 7294次阅读
    谁说单片机不能图形编程,介绍<b class='flag-5'>MCU</b>的TOP 5图形<b class='flag-5'>GUI</b>库!

    嵌入式GUI特训营』开营啦!是学霸就有奖拿,快来挑战一下!

    “同是嵌入式GUI设计 为什么别人做起来 轻松、快捷,很炫酷 而我的设计却 费力、耗时,有点low…“ 不要焦虑! 加入恩智浦 “ 嵌入式GUI特训营 ”
    的头像 发表于 12-01 09:15 412次阅读
    『<b class='flag-5'>嵌入式</b><b class='flag-5'>GUI</b>特训营』开营啦!是学霸就有奖拿,快来挑战一下!

    python如何打开gui界面

    在Python中打开GUI界面可以使用多种库或框架,如Tkinter、PyQt、wxPython等。下面将详细介绍如何使用Tkinter创建一G
    的头像 发表于 11-22 14:12 919次阅读

    嵌入式智能家居终端人机界面设计与实现

    电子发烧友网站提供《嵌入式智能家居终端人机界面设计与实现.zip》资料免费下载
    发表于 11-17 10:18 1次下载
    <b class='flag-5'>嵌入式</b>智能家居终端人机<b class='flag-5'>界面设计</b>与实现