请选择 进入手机版 | 继续访问电脑版
搜索
查看: 3317|回复: 4

[原创] STM32F769I-DISCO开发板GUI学习内容(四)_课后动手实验

[复制链接]

该用户从未签到

74

主题

1442

帖子

194

蝴蝶豆

版主

最后登录
2023-10-26
发表于 2018-7-21 12:00:11 | 显示全部楼层 |阅读模式
本帖最后由 wolfgang2015 于 2018-7-21 12:06 编辑

在之前的LTDC、DSIHOST、FMC、图形中间件搭建环境好并验证成功之后,要实现图形化还需要很便捷的图形界面实现工具,加速图形应用的开发,下面这个动画,不断切换蝴蝶颜色的案例,怎么做呢?
Viedo1_0_20180721093657.gif
                              
培训视频中的方法:
  就是将图片调入内存中,不断切换图片局部的图形内容来实现;
工具呢?还用emWin一行一行代码写并作下载调试?有没有所见即所得的方法?一次下载就能完成?
答案是有,ST官方已经集成在CubeMX中,并以Lib文件形式免费使用

1)  图形的框架搭建
CubeMX进入配置(configuration)标签栏,选择“Middlewares”中的“Graphics”—〉进入弹出窗口的“Graphics”---->使能External Tool中的 Use GuiBuilder Tool。
60.jpg
然后在STemWin中选择图形应用模式为Window,点击Execute
61.jpg
即可进入STemWin的图形编辑界面:
62.jpg
添加两个Image图层background和butterflay
分别如下图设置name、xpos、ypos、xSize、ySize
63.jpg
64.jpg
然后就保存,默认的保存位置在CubeMX工程项目中的
STemWin\app\WindowDLG.c
65.jpg
通过CubeMX生成代码的按钮,即可生成工程关联代码:
66.jpg
之前的HelloWorld生成的代码主要区别在
  1. void GRAPHICS_MainTask(void) {
  2.   ......
  3.   CreateWindow();
  4.   ......
  5. }
复制代码
CreateWindow调用实体在新保存WindowDLG.c文件中,emWin GUIBuilder已经将电脑中编辑的图形界面,生成可由编译工具编译的C代码。这里图形环境的框架就在Cubemx和emWin GUIBuilder的帮助下搭建好了。要实现上边视频的内容,就要对框架中的内容进行素材填充和逻辑代码调整。


2)素材的转换
   在实验视频中,官方提供了动手实验的素材:01-assets.7z,其中包括
background.png、butterfly_blue.bmp、butterfly_green.bmp、butterfly_pink.bmp、butterfly_yellow.bmp 等文件
视频中给出的方法是将png、bmp文件转换为数组存放在.c文件中供框架调用以便液晶屏根据代码界面显示内容。
{Cubemx生成项目}\Middlewares\ST\STemWin\Software目录中已经提供了将图形文件转换为.c文件的工具,如下图:
67.jpg

分别用BmpCvtST工具打开PNG、BMP文件
68.jpg
另存为C文件
69.jpg
Background.png转换的格式为:“True Color With alpha, r/b swapped, alpha inverted ”
70.jpg
其余的butterfly*.bmp转换格式为:“High color whit Alpha[565], read and blue swapped”
71.jpg

这是素材转换就准备好了,为什么格式不一样可以同时使用?这里的答案已经在直播视频中,请诸位在直播中去寻找。


3)控制逻辑修改
用IDE打开工程,把对应的C代码引入工程中
72.jpg
修改STemWin/APP如下文件的内容:
73.jpg

修改后的内容分别如下:
GUI_APP.c文件中
  1. void GRAPHICS_MainTask(void) {
  2.   ……
  3.   WM_HWIN hWin = CreateWindow();
  4.   while(1) {        
  5.     WM_InvalidateWindow(hWin);
  6.     GUI_Delay(1000);
  7.   }
  8.   ……
  9. }
复制代码
WindowDLG.c文件中
  1. //引入图片文件
  2. // USER START (Optionally insert additional defines)
  3. extern GUI_CONST_STORAGE GUI_BITMAP bmbackground;
  4. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_blue;
  5. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_green;
  6. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_pink;
  7. extern GUI_CONST_STORAGE GUI_BITMAP bmbutterfly_yellow;
  8. // USER END
  9. …….
  10. //定义图片状态
  11. // USER START (Optionally insert additional static code)
  12.    static int butterflay_status=0;
  13. // USER END
  14. ……
  15. //修改显示控制
  16. static void _cbDialog(WM_MESSAGE * pMsg) {
  17. ……
  18. switch (pMsg->MsgId) {
  19.   case WM_INIT_DIALOG:
  20.     hItem = WM_GetDialogItem(pMsg->hWin, ID_IMAGE_0);
  21.     IMAGE_SetBitmap(hItem, &bmbackground);

  22.     hItem = WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
  23.     IMAGE_SetBitmap(hItem, &bmbutterfly_blue);
  24.         
  25.     break;
  26.   default:
  27.           if (butterflay_status==0){
  28.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
  29.                   IMAGE_SetBitmap(hItem, &bmbutterfly_green);
  30.                   butterflay_status=1;
  31.           }else if (butterflay_status==1){
  32.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
  33.                   IMAGE_SetBitmap(hItem, &bmbutterfly_pink);
  34.                   butterflay_status=2;
  35.           }else if (butterflay_status==2){
  36.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
  37.                   IMAGE_SetBitmap(hItem, &bmbutterfly_yellow);
  38.                   butterflay_status=3;
  39.           }else {
  40.                   hItem=WM_GetDialogItem(pMsg->hWin, ID_IMAGE_1);
  41.                   IMAGE_SetBitmap(hItem, &bmbutterfly_blue);
  42.                   butterflay_status=0;
  43.         }
  44.     WM_DefaultProc(pMsg);
  45.     break;
  46.   }
  47. }
  48. …….
复制代码

编译工程并下载到开发板中,即可实现上面GIF文件所展示的GUI图形显示功能。

在Cubemx、GUIBuilder、BmpCvtST等工具的辅助下,加快了GUI应用的实现。虽然是一个Demo已经完整地展示了图形框架的搭建、素材转换、以及控制逻辑修改等方法流程;对于学习GUI工程实现有很大的帮助;



真正的工程应用会使用其他方法解决Demo中几个问题:
1、占用内部Flash太大;
2、图片的更换需要更新工程代码;
3、可以将STM32F769I的设备引用进来,充分利用硬件的特性;
比如:JPG硬件加速、SD卡设备读取外部文件等等,
GUI这个技术含量颇高的功能已经掌握后,STM32F769IDisco的其他应用拓展正等着诸位前去逐一熟悉。

STM32F769I-DISCO开发板GUI学习内容(一)_课前知识预习
STM32F769I-DISCO开发板GUI学习内容(二)_课前硬件基础
STM32F769I-DISCO开发板GUI学习内容(三)_课前预习之CubeMX篇(上)
STM32F769I-DISCO开发板GUI学习内容(三)_课前预习之CubeMX篇(下)
回复

使用道具 举报

该用户从未签到

63

主题

1887

帖子

17

蝴蝶豆

论坛元老

最后登录
2023-2-2
发表于 2018-7-22 09:27:47 | 显示全部楼层
点赞!
回复

使用道具 举报

该用户从未签到

0

主题

15

帖子

0

蝴蝶豆

初级会员

最后登录
2019-3-7
发表于 2018-12-27 17:45:34 | 显示全部楼层
学习中
回复

使用道具 举报

该用户从未签到

6

主题

1029

帖子

133

蝴蝶豆

金牌会员

最后登录
2021-4-24
发表于 2018-12-29 11:02:09 | 显示全部楼层
学习中
回复

使用道具 举报

该用户从未签到

0

主题

12

帖子

0

蝴蝶豆

新手上路

最后登录
2019-1-16
发表于 2019-1-14 13:10:05 | 显示全部楼层
学习中
回复

使用道具 举报

您需要登录后才可以回帖 注册/登录

本版积分规则

关闭

站长推荐上一条 /3 下一条

Archiver|手机版|小黑屋|论坛-意法半导体STM32/STM8技术社区

GMT+8, 2024-3-29 04:45 , Processed in 1.184333 second(s), 41 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表