物联网智慧教室项目（五）：人机交互功能开发（模拟器）

已于 2024-09-28 16:05:16 修改
阅读量1.1k 收藏 11
点赞数 17
文章标签： 物联网 人机交互
于 2024-09-28 16:02:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49763156/article/details/142616002
版权

一、界面构思

（一）原型分析

1、主界面

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

在这里插入图片描述

2、子界面

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

在这里插入图片描述

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

在这里插入图片描述

（二）界面构思

1、主界面

在这里插入图片描述

2、传感器数据展示界面

在这里插入图片描述

3、控制设备界面

在这里插入图片描述

（三）素材设计

1、主界面素材

在这里插入图片描述

2、子界面素材

在这里插入图片描述

注意事项

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

二、交互设计

（一）窗口初始化

业务流程

Created with Raphaël 2.3.0 设置窗口背景色 设置按钮位图

窗口初始化函数接口

句柄的概念

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

在这里插入图片描述

WINDOW_SetBkColor

在这里插入图片描述

WM_GetDialogItem

在这里插入图片描述

BUTTON_SetBitmap

在这里插入图片描述

（二）按键处理

Created with Raphaël 2.3.0 子窗口消息通知 获取子窗口ID 获取子窗口消息 子窗口消息处理

按键处理接口

WM_NOTIFY_PARENT

在这里插入图片描述

按钮通知代码

在这里插入图片描述

（三）界面切换

Created with Raphaël 2.3.0 结束当前对话框 创建需要切换的对话框
界面切换接口
GUI_EndDialog

在这里插入图片描述

GUI_CreateDialogBox

在这里插入图片描述

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

在这里插入图片描述

创建报警控制界面

在这里插入图片描述

四、BmpCvtST生成图片流

将主界面、子界面图片通过“位图转换工具”转换成c语言文件，然后复制到SeggerEval_WIN32_MSVC_MinGW_GUI_V544文件下的Application文件夹中。

位图转换工具及界面用到的图片素材：
链接：https://pan.baidu.com/s/1KnK-yzwmuKXJQRIgQmIMDQ?pwd=8hyn
提取码：8hyn
在这里插入图片描述
在这里插入图片描述

（一）主界面添加图片流

// USER START (Optionally insert additional static data)
extern GUI_CONST_STORAGE GUI_BITMAP bmMainAlarm;
extern GUI_CONST_STORAGE GUI_BITMAP bmMainFan;
extern GUI_CONST_STORAGE GUI_BITMAP bmMainHum;
extern GUI_CONST_STORAGE GUI_BITMAP bmMainLed;
extern GUI_CONST_STORAGE GUI_BITMAP bmMainLight;
extern GUI_CONST_STORAGE GUI_BITMAP bmMainTemp;
// USER END

    // USER START (Optionally insert additional code for further widget initialization)
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
    BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED,&bmMainAlarm);
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1);
    BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED,&bmMainFan);
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_2);
    BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED,&bmMainHum);
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_3);
    BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED,&bmMainLed);
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_4);
    BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED,&bmMainLight);
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_5);
    BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED,&bmMainTemp);
    // USER END

（二）子界面添加图片流

以HumDLG（湿度子界面）为例，其余五个子界面操作除了命名得修改一下，其余一致，如下：

// USER START (Optionally insert additional static data)
extern GUI_CONST_STORAGE GUI_BITMAP bmSubHome;
extern GUI_CONST_STORAGE GUI_BITMAP bmSubHum;
// USER END

    // USER START (Optionally insert additional code for further widget initialization)
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
    BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED,&bmSubHome);
    // USER END

五、界面切换功能实现

功能优化

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

（一）界面切换功能实现

1、主界面切换到子界面

MainDLG.c(以按键0 Alarm为例，其余五个按键操作一致)：

case ID_BUTTON_0: // 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);
        AlarmCreate();
        // USER END
        break;
      // USER START (Optionally insert additional code for further notification handling)
      // USER END
      }
      break;

2、子界面
a.控制设备（Alarm、Fan、Led，即需要控制开关的），以Alarm为例：
PS:注意是在按键1写入代码，不是按键0

case ID_BUTTON_1: // 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
      }
      break;

b.传感器（Hum、Light、Temp），以Hum为例

    case ID_BUTTON_0: // 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
      }

（二）控制操作图标切换

也就是实现Alarm、Fan、Led点击图片按钮可以实现开关图片的切换，以Alarm为例：
// USER START (Optionally insert additional static data)
extern GUI_CONST_STORAGE GUI_BITMAP bmSubAlarmClose;
extern GUI_CONST_STORAGE GUI_BITMAP bmSubAlarmOpen;
extern GUI_CONST_STORAGE GUI_BITMAP bmSubHome;
static int status = 0;
// USER END

    // USER START (Optionally insert additional code for further widget initialization)
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
    if(status){
        BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED, &bmSubAlarmOpen);
    }else{
        BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED, &bmSubAlarmClose);
    }
    hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1);
    BUTTON_SetBitmap(hItem, BUTTON_BI_UNPRESSED,&bmSubHome);
    // USER END

PS：在按键0中添加代码

    case ID_BUTTON_0: // 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, &bmSubAlarmOpen);

        }else{
            BUTTON_SetBitmap(pMsg->hWinSrc, BUTTON_BI_UNPRESSED, &bmSubAlarmClose);
        }
        // USER END
        break;
      // USER START (Optionally insert additional code for further notification handling)
      // USER END
      }
      break;
下面我就简单说两句
关注
NB-IoT物联网开发技巧和应用：专栏总述
不脱发的程序猿
03-03 4427
本专栏系统地介绍NB-IoT关键技术、网络体系与应用架构、应用系统组件以及终端硬件设计的基础上，给出了一个NB-IoT系统设计从终端到平台的每个部分完整的实践与操作步骤，结合NB-IoT智慧路灯项目进行剖析，使学习者迅速掌握物联网应用项目的开发技巧。
人机界面开发
06-05
罗克韦尔自动化的HMI开发软件支持直接将Logix控制器内的标签读取回来，直接关联到画面里的图形元素。这样客户无需在HMI开发软件中创建变量标签，再和控制器标签做映射。这样大大提升了开发效率，降低了错误故障机率！而且，罗克韦尔自动化的触摸屏提供了很多强大的拓展功能，满足客户未来各种需求。
Day5-人机交互功能开发（模拟器）
weixin_72238916的博客
03-03 504
基于ST官方组件模拟UI布局以及界面构思
STM32应用开发实践教程：具备交互功能的人机界面应用开发
Lee达森的博客
07-15 2185
GPIO_PinAFConfig(GPIOB,GPIO_PinSource15,GPIO_AF_SPI2);GPIO_PinAFConfig(GPIOB,GPIO_PinSource14,GPIO_AF_SPI2);GPIO_PinAFConfig(GPIOB,GPIO_PinSource10,GPIO_AF_SPI2);由表4-4-2可知，在6个SPI外设中，SPI1、SPI4、SPI5和SPI6挂载于APB2总线上，从图4-4-6中标号③处对应的阴影部分可知，......
单片机工程师轻松实现触摸屏人机界面的界面编程
热门推荐
sqcg999的专栏
07-27 1万+
很多时候，工业控制或者产品设计方面受到PLC这种功能确定，扩展麻烦，成本昂贵等方面的制约因素，需要独立开发一种特殊功能，但是又需要连接触摸屏通讯，工程师在这个方面往往需要花费很大功夫，现在我要帮大家解决的问题就是 单片机与人机界面触摸屏通讯的最简单，最有效的 2种方法，其实就是分为2种通讯协议，即工业标准的 Modbus RTU协议和工程师自己定义的 自由协议。 本实例采用其中一款人机界
C# 电梯人机交互界面设计
12-03
C# 电梯人机交互界面模拟设计 C# 电梯人机交互界面模拟设计
开源智慧农业物联网平台(Version:3.0.1)
06-04
开源智慧农业物联网平台(Version:3.0.1)，从（设备端-APP端-平台端-管理端）全业务场景包含设备采集系统、监控控制系统、溯源系统、专家系统、仓库系统，大屏系统，开源版本毫无保留给个人及企业免费使用。...
智慧教室物联网平台功能需求设计.docx
03-20
可基于爱投斯（IOTOS）物联网系统集成平台开发： 基础组件 教室管理 年级管理 班级管理 教学楼管理 设备管理 设备类型管理 报警管理 首页概况 数据统计 设备联动 登录 首页 首页概况 设备管理 数据统计 设备联动 ...
v1.3三盟AIoT智慧教室物联网统一开放平台解决方案(修改版)12.11
06-09
v1.3三盟AIoT智慧教室物联网统一开放平台解决方案 知识点1：智慧教室物联网统一开放平台解决方案 该解决方案是基于物联网（IoT）技术的智慧教室统一开放平台，旨在为教育机构提供一体化的智能化解决方案。该平台...
人机交互界面设计
04-03
人机交互界面设计，比较有用，可以用于开发界面，使用的是c语言
Day8-网页Web服务器功能开发（stm32）
最新发布
weixin_72238916的博客
03-03 1657
网页Web服务器功能开发（stm32）
人机交互的软件工程方法
m0_62870705的博客
01-18 1753
总之，用户可控性可以提高用户的主动性和参与度，降低用户的学习成本，增强用户的个性化需求，从而提高用户的使用效率和满意度。
html人机交互代码,人机交互实践004—网页字体设置(示例代码)
weixin_33128371的博客
06-22 569
testfadfasdfafdfas fasffad fa sdfas dfasfdfasfadsffadfasdfasdfasf dfasfa dsffadfa sdfas dfasfdfasfadsffadfasdfasdfasfdfasf adsfadfasdfasdfasfdfa sfadsffadfasdf asdfasfdfasfadsfadfasdfasdfasfdfasf adsf...
从用户需求到产品设计：如何实现有效的人机交互
AI天才研究院
12-26 927
1.背景介绍 人机交互(Human-Computer Interaction, HCI)是一门研究人与计算机系统之间交互的学科。它涉及到人的心理、行为和设计，以及计算机科学、软件工程和电子工程等多个领域。人机交互的目标是为人类提供便捷、高效、满意的使用体验。 在过去的几十年里，人机交互得到了很大的发展。从早期的命令行界面到现代的图形用户界面(GUI)，再到智能助手和虚拟现实，人机交互技术不断发...
【基于C++和C#编程语言在人机交互界面工业领域应用的优缺点分析与研究】 2020-11-02
千帆少年靓
11-02 2002
【基于C++和C#编程语言在人机交互界面工业领域应用的优缺点分析与研究】 语言 优点 缺点 应用领域 C++ 1.容易调用底层代码，运行效率高。 2.可直接调用C语言代码，在编写界面程序时，能够直接调用系统API，比较适合跟系统底层打交道多的程序。如杀毒程序等。 3.界面编程可使用MFC，WTL等...
CMake入门指南
weixin_34302561的博客
05-22 5600
CMake是一个比make更高级的编译配置工具，它可以根据不同平台、不同的编译器，生成相应的Makefile或者vcproj项目。通过编写CMakeLists.txt，可以控制生成的Makefile，从而控制编译过程。CMake自动生成的Makefile不仅可以通过make命令构建项目生成目标文件，还支持安装（make install）、测试安装的程序是否能正确执行（make test，或者cte...
ROS人机交互软件
lovely_yoshino的博客
04-14 5290
前言 在使用ROS的过程中，我们常常需要使用复杂的编译源代码和相关的解析操作，才能单独对某一个任务进行启动。在修改时，也需要单独打开某个文件、编辑、保存，这个过程比较繁琐。这些数据信息均需要在终端中以字符的方式显示出来，键入命令同样需要在终端中输入字符命令，如果是用于较大的ROS工程，总不能所有调试工作，每改动一下参数都键入字符命令吧。为此人机交互界面氤氲而生，使用按钮，输入框等控件简化这一过程，并且使调试过程更加清晰明确，下方是一个人机交互界面的结构图： 整个软件被分为6个界面，主要部分为.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值