物联网智慧教室项目5

D5人机交互功能开发（模拟器）

5.1界面构思

原型分析

主界面

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

子界面

控制界面

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

灯光控制 

报警控制

 

 风扇控制

数据界面

温度，湿度，光照

界面构思

主界面
 

 传感器数据展示界面

 控制设备界面

素材设计 

主界面素材

 子界面素材

 注意事项

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

5.2交互设计

窗口初始化

业务流程

窗口初始化函数接口

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

  

WINDOW_SetBkColor

 WM_GetDialogItem

 BUTTON_SetBitmap

 按键处理

op=>operation:  子窗口消息通知

op1=>operation:  获取子窗口ID

op2=>operation:  获取子窗口消息

op3=>operation: 子窗口消息处理

按键处理接口

 WM_NOTIFY_PARENT‘‘

  按钮通知代码

 界面切换

界面切换接口

 GUI_EndDialog

 GUI_CreateDialogBox

5.3GUIBuilder创建代码框架

主界面创建

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控制界面

 创建报警控制界面

5.4BmpCvtST生成图片流

 位图转换工具

主界面添加图片流

子界面添加图片流

5.5界面切换功能实现

整体功能展示

主界面

界面背景优化

子界面背景色优化

设置子界面背景色为 2 33 79 16进制 4F 21 02
//TEXT_SetBkColor(hItem, GUI_MAKE_COLOR(0x004F2102));

子界面标题优化

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

界面切换功能实现

主界面跳转子界面

case ID BUTTON 0:// Notifications sent by''
switch(Ncode){
Case WM NOTIFICATION CLICKED:
// USER START (Optionally insert code for reacting on notification message)
// USER ENDT
break;
CaSe WM NOTIFICATION RELEASED:
// USER START (Optionally insert code for reacting on notification message)GUI EndDialog(pMsg->hWin,0);
AlarmCreate();
// USER END
break;
// USER START (Optionally insert additional code for further notification handling)
// USER END
}

子界面返回主界面

case ID BUTTON :// Notifications sent by ''
switch(Ncode){
case WM NOTIFICATION CLICKED:
// USER START (Optionally insert code for reacting on notification message)// USER END
break;
CaSe WM NOTIFICATION RELEASED:
//USER START (Optionally insert code for reacting on notification message,
GUI EndDialog(pMsg->hWin, 0);
MainCreate();
// USER END
break;
// USER START (Optionally insert additional code for further notification handling)
// USER END
}

控制操作图标切换

初始化

static int status =0;
hItem = WM GetDialogItem(pMsg->hWin, ID BUTTON );if(status){
BUTTON SetBitmap(hItem, BUTTON BI UNPRESSED, &bmSubLedopen);
}else{
BUTTON SetBitmap(hItem, BUTTON BI UNPRESSED, &bmSubLedclose)；
}

切换

switch(Id)
case ID BUTTON :// Notifications sent by''
switch(Ncode){
CaSe WM NOTIFICATION CLICKED:
// USER START (Optionally insert code for reacting on notification message)
// USER END
break;
Case WM NOTIFICATION RELEASED:// USER START (Optionally insert code for reacting on notification message)status =!status;
if(status){
BUTTON SetBitmap(pMsg->hWinSrC, BUTTON BI UNPRESSED, &bmSubLedopen);
}else{
BUTTON SetBitmap(pMsg->hWinSrC, BUTTON BI UNPRESSED, &bmSubLedclose),
// USER END
break;
// USER START (Optionally insert additional code for further notification handling)
// USER END
}
break;