[GD32F450方案分享] 基于GD32F450开发板的图标化界面设计

jinglixixi

拥有一块TFT彩色液晶屏作为交互界面，如果不为它添加一个图标式的界面总感到它有些屈才了，所以决定为它配上一个图标化的操作界面，但稍有遗憾的是该TFT屏没配触摸功能，否则就更完美了。

完成后的界面布局如图1所示，配合3个按键的使用可以反显的方式指示出当前的功能选择，选择效果分别如图2~图4所示。

图1  功能结构图

图2 图标界面布局

图3 设置功能选择

图4 PWM调节功能选择

在图标界面的设计中，主要涉及图标的制备、功能提示字的转置处理、当前功能的反显、按键的控制处理及相应功能的调用执行等。

1.图标的制备

关于图标的制备，可以使用图像处理软件自行绘制，也可以寻找合适的图标加以修改。然后将图标进行标准化的处理，如尺寸规格的大体相近，风格的基本统一等。随后再使用相应的辅助工具将小图标转化为相应的 *.h文件，以便对应的函数进行读取和再现。

2.字体的转置显示

要实现字体的转置显示，其关键的处理就是将原来在横向的显示改为纵向显示，其它方面视相应的字体显示函数修改即可。

3. 字体反显

多数字体的显示都是采用前景色进行显示，它具有处理速度快的特点，但在相同位置进行内容更新时却会产生显示重叠。而采用前景色和背景色的显示方式，则可以弥补这方面的不足。此外，也为反显提供了方便。在反显时，只需互换前景色和背景色即可。

4.按键管理

为了便于功能的选择，可将板载的3个键一同用上，并指定相应的用途，如设一个前移键、一个后移键及一个确认键。然后为按键的触发赋予相应的处理即可。

5.功能调用

为了便于功能的调用，可进行模块化的设计，然后以图标功能的选择以相应的功能号来调用相应的功能模块。在执行相应功能后，可按返回键以回到功能菜单。

噗噗熊

看来短信收到了，666

wolfgang2015

噗噗熊 发表于 2017-6-6 11:12
看来短信收到了，666

别这么说，熟悉、开发、联调是由一个过程的。

Cinderella6

可以参考下这个界面
http://open.iot.10086.cn/bbs/thread-1414-1-1.html

jinglixixi

Cinderella6 发表于 2017-6-14 08:56
可以参考下这个界面
http://open.iot.10086.cn/bbs/thread-1414-1-1.html

有参考价值，值得学习！！！