1.界面构思
原型分析
主界面
主界面提供了,整个系统的交互接口,也就是说,我们都有哪些需要提供给用户展示的
1、数据展示功能
1.1、温度
1.2、湿度
1.3、光照
2、控制操作功能
2.1、灯光
2.2、风扇
2.3、报警
分析:
对用户来说,需要点击相应的图标下,就可以进入相关的界面,很简单,我使用button小工具进行实现,其实就是在主界面创建6个button小工具
![image-20200426104609355](https://i-blog.csdnimg.cn/blog_migrate/71143dbbfd86857d3fdb205aaf33402e.png)
子界面
控制界面
控制界面应该有什么?
1、界面的标识--- 要给用户指示这个界面有什么用
使用text小工具就可以实现
2、控制操作
开状态-当用户点击图标,灯泡点亮
关状态-当用户点击图片,灯泡熄灭
3、返回主菜单
当用户点击主菜单按钮,返回主界面
控制和返回主界面都用button实现即可
![image-20200426104734246](https://i-blog.csdnimg.cn/blog_migrate/2a8611070ded01066b63ac7abfa2371c.png)
数据界面
控制界面应该有什么?
1、界面的标识--- 要给用户指示这个界面有什么用
使用text小工具就可以实现
2、数据图标展示
显示一个图片就可以,用图片小工具
3、返回主菜单
当用户点击主菜单按钮,返回主界面,用button小工具
![image-20200426104814805](https://i-blog.csdnimg.cn/blog_migrate/cefd90181ae8ae23619a3092feef9ef1.png)
界面构思
主界面
![image-20200426105434247](https://i-blog.csdnimg.cn/blog_migrate/5aafd990b3886c404ad30346ae79abe3.png)
传感器数据展示界面
![image-20200426105837595](https://i-blog.csdnimg.cn/blog_migrate/3bba4f0572474bd498624610d3345178.png)
控制设备界面
![image-20200426110057780](https://i-blog.csdnimg.cn/blog_migrate/2c9350ef06631ee759bb6679aba34fe3.png)
素材设计
主界面素材
![image-20200426110200719](https://i-blog.csdnimg.cn/blog_migrate/c68bfdfd8c6195f182e7c944b83cfcf3.png)
子界面素材
![image-20200426110414627](https://i-blog.csdnimg.cn/blog_migrate/6966d4689ee2fbe0c417ee11a7fdc8b2.png)
注意事项
图片最终是用过代码,进行展示的
我们必须针对图片命名时候,有规范,有要求
1、主界面命名
MainAlarm
MainLed
2、子界面
SubAlarmOpen
SubAlarmClose
SubHum
2.交互设计
窗口初始化
业务流程
窗口初始化函数接口
句柄的概念
句柄:在C语言里面,它其实就是一个指针变量
![emWin句柄概念](https://i-blog.csdnimg.cn/blog_migrate/af3a4230189346666a4763f2bad32583.png)
WINDOW_SetBkColor
![image-20200502010325786](https://i-blog.csdnimg.cn/blog_migrate/95150c42e5f9b78a7833df2ede3d4877.png)
WM_GetDialogItem
![image-20200502010431177](https://i-blog.csdnimg.cn/blog_migrate/0c776684bf38d6d893324e33171f9732.png)
BUTTON_SetBitmap
![image-20200502010746336](https://i-blog.csdnimg.cn/blog_migrate/5b864f32580b9858e60758c5b20f9ad8.png)
按键处理
按键处理接口
WM_NOTIFY_PARENT
![image-20200502011123107](https://i-blog.csdnimg.cn/blog_migrate/818ceda11b9b457ae558ba2438babeea.png)
按钮通知代码
![image-20200502011313982](https://i-blog.csdnimg.cn/blog_migrate/3b9479c8794b53d9bb6cbf166ca38a36.png)
界面切换
界面切换接口
GUI_EndDialog
![image-20200502014202320](https://i-blog.csdnimg.cn/blog_migrate/3effa6857679d858c89568b6e428b250.png)
GUI_CreateDialogBox
![image-20200502014250645](https://i-blog.csdnimg.cn/blog_migrate/8ec427e3cf544dc2a12df1b24c8c1d99.png)
3.GUIBuilder创建代码框架
主界面生成
GUIBuilder创建主界面
1、创建window小工具
1.1、设置window x y 尺寸 472 280
1.2、设置背景色 2 33 79 RGB
2、创建6个button小工具
2.1、设置button尺寸为 100 100
2.2、button布局
![image-20200502231520003](https://i-blog.csdnimg.cn/blog_migrate/443f149a46465da24c42309013fb29d9.png)
添加代码到模拟器工程
修改窗口创建函数名称及文件名称
![image-20200502231703263](https://i-blog.csdnimg.cn/blog_migrate/f53be3d7d842501d51f300ede340b8bf.png)
代码添加到工程
![image-20200502231922803](https://i-blog.csdnimg.cn/blog_migrate/a77a3ddd55bfba553eee1583a7e94931.png)
模拟器运行
![image-20200503001014217](https://i-blog.csdnimg.cn/blog_migrate/677182df4abd8f4a8f462480f51c3402.png)
创建温度展示界面
![image-20200503000513528](https://i-blog.csdnimg.cn/blog_migrate/3ea022f49df413fd0ede40907d8d512b.png)
![image-20200503001240861](https://i-blog.csdnimg.cn/blog_migrate/f4ec05484541f9efbbfc2049e6319c48.png)
创建湿度展示界面
![image-20200503001440678](https://i-blog.csdnimg.cn/blog_migrate/89a35f6b9f6cbe77bd951cfa8e5e5693.png)
创建光照展示界面
![image-20200503001607101](https://i-blog.csdnimg.cn/blog_migrate/310284cc6f5eb1a5cb660754fa94807c.png)
创建风扇控制界面
![image-20200503135451638](https://i-blog.csdnimg.cn/blog_migrate/1412e878744091c9c937c56d032f7ecf.png)
创建LED控制界面
![image-20200503135549459](https://i-blog.csdnimg.cn/blog_migrate/4eef82e546489ec917adcaf578dfc302.png)
创建报警控制界面
![image-20200503135640823](https://i-blog.csdnimg.cn/blog_migrate/c8121e4653b2bb6eb648f8b2edfe7856.png)
4.BmpCvtST生成图片流
位图转换工具
![image-20200504170013823](https://i-blog.csdnimg.cn/blog_migrate/c1bf62c473fff51567b5881be377cbe8.png)
主界面添加图片流
字界面添加图片流
5.界面切换功能实现
功能优化
设置子界面背景色为 8 20 44 16进制 2C 14 08
界面切换功能实现
控制操作图标切换