1.界面构思

原型分析

主界面

主界面提供了，整个系统的交互接口，也就是说，我们都有哪些需要提供给用户展示的
1、数据展示功能
    1.1、温度
    1.2、湿度
    1.3、光照
2、控制操作功能
	2.1、灯光
    2.2、风扇
    2.3、报警
    
分析：
    对用户来说，需要点击相应的图标下，就可以进入相关的界面，很简单，我使用button小工具进行实现，其实就是在主界面创建6个button小工具

子界面

控制界面

控制界面应该有什么？
1、界面的标识--- 要给用户指示这个界面有什么用
    使用text小工具就可以实现
2、控制操作
    开状态-当用户点击图标，灯泡点亮
    关状态-当用户点击图片，灯泡熄灭
3、返回主菜单
    当用户点击主菜单按钮，返回主界面
    
 控制和返回主界面都用button实现即可
    

数据界面

控制界面应该有什么？
1、界面的标识--- 要给用户指示这个界面有什么用
    使用text小工具就可以实现
2、数据图标展示
 	显示一个图片就可以，用图片小工具
3、返回主菜单
    当用户点击主菜单按钮，返回主界面，用button小工具

界面构思

主界面

传感器数据展示界面

控制设备界面

素材设计

主界面素材

子界面素材

注意事项

图片最终是用过代码，进行展示的
    我们必须针对图片命名时候，有规范，有要求
1、主界面命名
    MainAlarm
    MainLed
2、子界面
    SubAlarmOpen
    SubAlarmClose
    SubHum

2.交互设计

窗口初始化

业务流程

窗口初始化函数接口

句柄的概念

句柄：在C语言里面，它其实就是一个指针变量

WINDOW_SetBkColor

WM_GetDialogItem

BUTTON_SetBitmap

按键处理

按键处理接口

WM_NOTIFY_PARENT

按钮通知代码

界面切换

界面切换接口

GUI_EndDialog

GUI_CreateDialogBox

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布局
  /*
  { WINDOW_CreateIndirect, "", ID_WINDOW_0, 0, 0, 472, 280, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "", ID_BUTTON_0, 43, 30, 100, 100, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "", ID_BUTTON_1, 43, 150, 100, 100, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "", ID_BUTTON_2, 186, 150, 100, 100, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "", ID_BUTTON_3, 329, 150, 100, 100, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "", ID_BUTTON_4, 329, 30, 100, 100, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "", ID_BUTTON_5, 186, 30, 100, 100, 0, 0x0, 0 },
  */

添加代码到模拟器工程

修改窗口创建函数名称及文件名称

代码添加到工程

模拟器运行

创建温度展示界面

创建湿度展示界面

创建光照展示界面

创建风扇控制界面

创建LED控制界面

创建报警控制界面

4.BmpCvtST生成图片流

位图转换工具

主界面添加图片流

字界面添加图片流

5.界面切换功能实现

功能优化

设置子界面背景色为 8 20 44 16进制 2C 14 08
//TEXT_SetBkColor(hItem, GUI_MAKE_COLOR(0x002C1408));

界面切换功能实现

控制操作图标切换