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

发表于 2016-8-4 17:31

本帖最后由香水城于 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实战经验汇总贴】

发表于 2016-8-4 18:58

谢谢分享；

发表于 2016-8-4 20:08

thank you for your share!!!好东西！好资料。

发表于 2016-8-4 22:03

城主出手，好厉害，这等技术太稀缺了。

发表于 2016-8-5 13:45

感谢分享，很好奇ST的文档风格是怎么做到这么统一的

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

相关帖子

浏览过的版块

荣誉元老奖章

坚毅之洋流

十世金身

技术领袖奖章

常驻人口

技术高手奖章

技术新星奖章

偶尔光临