打印
[信息]

【实战经验】STemWin自定义皮肤的实现与讲解

[复制链接]
3525|4
手机看帖
扫描二维码
随时随地手机跟帖
跳转到指定楼层
楼主
本帖最后由 香水城 于 2017-8-14 14:08 编辑

STemWin自定义皮肤的实现与讲解

前言

STemWin中,窗口对象的系统皮肤相对比较固定,针对这种情况,介绍一种自定义皮肤的方案,用于设计更加美观的界面。在本文中,首先简单介绍自定义皮肤方案的实现原理。然后,以按键为例,介绍如何实现自定义按键皮肤,实现按键外观的定制化。

一 皮肤自定义方案原理

StemWin中皮肤可以简单的理解为一个回调函数。在这个回调函数中,可以重绘对应窗口控件的细节。
STemWin自定义皮肤方案主要思路如下图所示,在创建窗口控件后,指定其对应的自定义皮肤回调函数。在自定义皮肤回调函数中,根据对应的换肤程序命令,开发者自定义对应的显示内容。在控件应用过程中,回调函数根据接收到的换肤程序命令,执行之前自定义的显示内容,从而达到自定义皮肤效果。




需要注意并不是所有的窗口控件都支持自定义皮肤的功能。出于不同StemWin版本所支持自定义皮肤的窗口控件不同,请根据采用的STemWin版本,参考User & Reference Guide (UM03001)中Skinning章节了解详情。

二 自定义按键皮肤

2.1 实现环境
开发板:STM32F429I-DISCO
开发库:STM32CubeF4 v1.11.0
集成开发环境:IAR v7.70.1.11486
优化级别 : High (IAR)

2.2 实现步骤
首先,准备PNG图片用作按键皮肤。不采用STemWin支持的BMP和GIF图片的原因是由于,这种类型的图片文件不支持透明度,不能达到预期的无边框按键效果。即使是PNG图片,也并非一定具有透明度通道,需要确定采用的PNG图片具有透明通道,简单判断图片是否满足要求的情况在后面会有讲述。如果所采用图片不具有透明通道,而只是背景为白色(例如利用Windows系统自带绘图软件生成的PNG图片,不具有透明通道),可以采用GIMP软件,将背景色删除,然后导出时,选择不保存背景色的PNG格式,从而生成满足需求的PNG图片。




利用STM32CubeF7中提供的BmpCvt.exe打开PNG图片。图中colors为ARGB,包含透明通道。




点击File\Save as,出于演示方便考虑,type选择为 C bitmap file。其他文件格式同样被支持,前提是具有文件系统,能够加载外部文件。




出现下述界面,选择True color with alpha channel.




选择True color with alpha channel的依据是,保存格式与硬件采用格式完全相同位图加载时可以快速渲染,无需色彩装换。相对地,其ROM占用量相对高(演示例中,驱动显示深度配置为GUICC_M8888I,相关代码如下)。
注:其它格式同样被支持,对应的优缺点请参考UM03001\Bitmap Converter章节





在STM32Cube_FW_F4_V1.11.0\Projects\STM32F429I-Discovery\Applications\STemWin\ STemWin_SampleDemo例程中,按照如下步骤在IAR工程文件中,进行文件配置。
1. 在Demo文件夹上右击选择Option, 选择“Exclude from build”;
2. 添加上述步骤生成的按键皮肤文件;
3. 添加自定义按键皮肤的演示程序。



点击”Make”生成烧录文件,利用USB线连接STM32F429I-DISCO板。在IAR上运行,烧录。重启后,即可看到演示效果。
其中自定义按键皮肤程序(Skinning_Button.c)如下所示(注:只是实现的初略呈现,实际实现程序有较大区别,请查看对应的.c文件)




2.3 实现效果
实现效果是固定图形对应按键,在图形上点击,意味着按下按键。



三 小结


本文主要讲解了如何利用自定义皮肤的方式,实现多样化的按键样式。在STemWin中,皮肤方案的提供,为开发者提供了更加灵活的方式,实现窗口控件外观的自定义设计。与此同时,STemWin也提供了一些自带的皮肤和皮肤配置API,能够满足快速开发的需求。
相关文档
UM03001 Graphic Library with Graphical User Interface
相关工具&链接
STM32CubeF4 http://www.stmcu.com.cn/Index/search?search_keywords=stm32cubef4
GIMP [url=mailto:http://www.gimp.org/]mailto:http://www.gimp.org/[/url]
BmpCvt 软件路径:STM32Cube_FW_F4_V1.11.0\Middlewares\ST\STemWin\Software (位于STM32CubeF4中)



对应代码Skinning_BUTTON_Solution
更多实战经验请看: 【ST MCU实战经验汇总贴】

沙发
mmuuss586| | 2016-8-4 18:58 | 只看该作者
谢谢分享;

使用特权

评论回复
板凳
colin2135| | 2016-8-4 20:08 | 只看该作者
thank you for your share!!!好东西!好资料。

使用特权

评论回复
地板
玛尼玛尼哄| | 2016-8-4 22:03 | 只看该作者
城主出手,好厉害,这等技术太稀缺了。

使用特权

评论回复
5
15113484470| | 2016-8-5 13:45 | 只看该作者
感谢分享,很好奇ST的文档风格是怎么做到这么统一的

使用特权

评论回复
发新帖 我要提问
您需要登录后才可以回帖 登录 | 注册

本版积分规则

认证:意法半导体(中国)投资有限公司
简介:STM32技术专家

596

主题

17108

帖子

288

粉丝