1方案介绍设计思路
拥有一块TFT彩色液晶屏作为交互界面,如果不为它添加一个图标式的界面总感到它有些屈才了,所以决定为它配上一个图标化的操作界面,但稍有遗憾的是该TFT屏没配触摸功能,否则就更完美了。
使用GD32 Colibri-F450VE小红板,板载的芯片具体型号是GD32F450VET6,引出了全部I/O,方便的设计验证,并连接了TFT液晶屏。完成后的界面布局如图1所示,配合3个按键的使用就可以反显的方式指示出当前的功能选择,选择效果分别如图2~图4所示。
图1 功能结构图
图2 图标界面布局
图3 设置功能选择
图4 PWM调节功能选择
2设计应用描述及心得总结
本案例在图标界面的设计中,主要涉及图标的制备、功能提示字的转置处理、当前功能的反显、按键的控制处理及相应功能的调用执行等。
1. 图标的制备
关于图标的制备,可以使用图像处理软件自行绘制,也可以寻找合适的图标加以修改。然后将图标进行标准化的处理,如尺寸规格的大体相近,风格的基本统一等。随后再使用相应的辅助工具将小图标转化为相应的 *.h文件,以便对应的函数进行读取和再现。
2.字体的转置显示
要实现字体的转置显示,其关键的处理就是将原来在横向的显示改为纵向显示,其它方面视相应的字体显示函数修改即可。
3. 字体反显
多数字体的显示都是采用前景色进行显示,它具有处理速度快的特点,但在相同位置进行内容更新时却会产生显示重叠。而采用前景色和背景色的显示方式,则可以弥补这方面的不足。此外,也为反显提供了方便。在反显时,只需互换前景色和背景色即可。
4.按键管理
为了便于功能的选择,可将板载的3个键一同用上,并指定相应的用途,如设一个前移键、一个后移键及一个确认键。然后为按键的触发赋予相应的处理即可。
5.功能调用
为了便于功能的调用,可进行模块化的设计,然后以图标功能的选择以相应的功能号来调用相应的功能模块。在执行相应功能后,可按返回键以回到功能菜单。
-
芯片
+关注
关注
457文章
51363浏览量
428352 -
液晶屏
+关注
关注
18文章
720浏览量
43079 -
模块化
+关注
关注
0文章
334浏览量
21476
发布评论请先 登录
相关推荐
小米汽车智能屏界面设计著作权获登记
AN030 GD32F47x&F42x与GD32F45x&F40x系列间的差异
![AN030 <b class='flag-5'>GD32F</b>47x&<b class='flag-5'>F</b>42x与<b class='flag-5'>GD32F</b>45x&<b class='flag-5'>F</b>40x系列间的差异](https://file.elecfans.com/web1/M00/D9/4E/pIYBAF_1ac2Ac0EEAABDkS1IP1s689.png)
【GD32 MCU 移植教程】9、从 STM32F10x 系列移植到 GD32F30x 系列
![【<b class='flag-5'>GD</b>32 MCU 移植教程】9、从 STM32<b class='flag-5'>F</b>10x 系列移植到 <b class='flag-5'>GD32F</b>30x 系列](https://file1.elecfans.com/web2/M00/04/DF/wKgZombVHYWASdt6AAA4EF8E1O4442.png)
【GD32 MCU 移植教程】8、从 STM32F4xx 系列移植到 GD32F4xx 系
![【<b class='flag-5'>GD</b>32 MCU 移植教程】8、从 STM32<b class='flag-5'>F</b>4xx 系列移植到 <b class='flag-5'>GD32F</b>4xx 系](https://file1.elecfans.com/web2/M00/06/61/wKgaombaXZ6AB4PtAABI6uZ03C4508.png)
【GD32 MCU 移植教程】7、从 GD32F10x 移植到 GD32E103
![【<b class='flag-5'>GD</b>32 MCU 移植教程】7、从 <b class='flag-5'>GD32F</b>10x 移植到 <b class='flag-5'>GD</b>32E103](https://file1.elecfans.com/web2/M00/06/3A/wKgaombZC9iADDHsAAAzqJTGQus009.png)
【GD32 MCU 移植教程】6、从GD32F1x0和GD32F3x0移植到GD32E230
![【<b class='flag-5'>GD</b>32 MCU 移植教程】6、从<b class='flag-5'>GD32F</b>1x0和<b class='flag-5'>GD32F</b>3x0移植到<b class='flag-5'>GD</b>32E230](https://file1.elecfans.com/web2/M00/05/2B/wKgZombXuiGAMp0PAAAraaER_q4744.png)
【GD32 MCU 移植教程】5、GD32E230 系列移植到 GD32F330 系列
![【<b class='flag-5'>GD</b>32 MCU 移植教程】5、<b class='flag-5'>GD</b>32E230 系列移植到 <b class='flag-5'>GD32F</b>330 系列](https://file1.elecfans.com/web2/M00/05/02/wKgZombWbr-ADGCPAAA9iVnbaUU566.png)
【GD32 MCU 移植教程】2、从 GD32F303 移植到 GD32F503
![【<b class='flag-5'>GD</b>32 MCU 移植教程】2、从 <b class='flag-5'>GD32F</b>303 移植到 <b class='flag-5'>GD32F</b>503](https://file1.elecfans.com/web2/M00/05/B4/wKgaombSc4eAC86hAAB_e6oIxhc582.png)
评论