哈喽，我是俊雁，大家好久不见呀！非常抱歉，最近才有时间创作内容，赶在年末前给大家分享一篇有趣又好玩的小项目，不论你是编程的初学者还是其他专业，看完这篇内容你都可以轻松掌握隔空操作硬件的“神操作”，又或者隔空操作世界另一边的物体，这当然可以！不要不敢想象，当你看完这篇文章之后就会发现，实现这一点难度都没有。
在我的上篇文章中，展示了很多与硬件相关的小项目，如《创造音乐与灯光的魔幻组合》是在WEB网页上对硬件的交互，还有《使用 嘿，Siri 开灯！轻松点亮你的空间》语音控制灯光，本质上是Siri发送了一个 HTTP 的请求对硬件进行交互来实现的，还有一个特别酷的《创意互动游戏-探索车》特别酷是因为它的前端页面和探索车的造型特别酷，这个也是 WEB 前端对硬件的交互。刚刚这些项目呢，它们有一个最大的共同点，就是每个项目都使用了某种网络通信协议来与硬件进行沟通的呢。
开始之前，先放一段VCR，看一下你将要实现的成果吧！
从视频中可以看出，我们可以隔空操作面前的灯带，不同的姿态会解锁不同的灯光
准备工作
隔空操纵硬件这个事情，听起来是不是感觉制作起来很难？但我相信，你一定可以的，在开始之前我们先清点一下接下来你将要使用的道具有哪些吧！
- ESP-32 开发板
- 杜邦线 公对母
- WS2812B LED 灯带
- 数据线 Micro-USB（安卓数据线）
- 计算机（Win / Mac）
- 浏览器（Chrome）
项目整体思路
我们先看一看该项目的大致思路，隔空操控硬件，首先先是使用视觉计算的识别技术调用我们电脑的摄像头，会识别我们的人体姿态，识别到特定的姿态后，会给硬件发送一个特定的信号，硬件这边收到信号之后，将会分析信号，根据信号特征决定点亮或熄灭，我们灯带上所对应的各个灯珠。
姿态识别 - 姿态大模型
视觉计算-姿态识别
看到这，你一定在想视觉计算的姿态识别是什么？怎么来识别我们人体不同的姿态呢？哈哈，我已经想到你的疑问啦！
视觉计算：视觉计算是利用计算机和算法处理图像和视频数据的领域。它涵盖了图像处理、计算机视觉、图像分析等技术，旨在使计算机能够理解、分析和处理图像数据。
姿态识别：姿态识别是视觉计算的一个重要应用，它专注于检测、识别和跟踪物体或人体在图像或视频中的姿态、动作或位置。姿态识别技术可用于识别人体姿态，例如检测人体关节的位置、姿势的变化，以及人体在图像或视频中的运动状态。
视觉计算是涵盖了多个领域的计算机视觉范畴，而姿态识别是其中的一个具体应用，利用视觉计算技术来识别和理解图像或视频中的姿态信息。
好，现在相信你对视觉计算以及姿态识别有了一定的了解，接下来我们面临了一个问题，这个姿态识别技术看起来好厉害啊，But 我还是个初学者！怎么实现这个技术呢？
当然，我知道一个姿态识别的训练平台，我们可以在这里训练我们的姿态大模型，姿态大模型是针对姿态识别而设计和训练的复杂深度学习模型。该模型通过使用大量不同姿态的样本数据进行训练，以学习和理解人体在图像或视频中的不同姿态，并具备识别这些姿态的能力。
有了这个平台，我们的任务是不是一下子就简单多啦！接下来我们就通过这个平台来识别我们的四个姿态动作（伸左手｜伸右手｜伸左右手｜不伸任何手）
首先我们先来简单设置一下，先将 Class 1 重命名一个有意义的名字，比如我这里的为 left ，因为这里我们会先录入我们伸左手的姿态样本，先点击摄像头按钮，再点击设置按钮就可以看到下图中画面，将摄像头的 FPS 帧率设置为 60 ，也就是说，每秒会捕捉 60 帧图像，这样捕捉的样本不仅会更加流畅，还会捕捉到更多的样本。延迟设置到 2 秒，就是说点击开始录制，2 秒后平台才会开始收集样本。下面的时间就是连续收集 18 秒姿态样本，理论上也就是说我们录入一次会收集 1080 张样本，实际收集的样本数量可能会因为电脑性能有所差异。
接下来我们开始录入我们的姿态样本，在录入左手的样本的时候，我们先伸起左手，在点击录制按钮，录制的时候我们的胳膊可以做一些上下轻微浮动的动作，来提高姿态模型的识别度。
录完伸左手之后，然后我们依次创建和录入（伸右手、伸左右手、不伸任何手）的姿态样本，录入完之后呢，我们点击训练模型，就可以开始训练我们的姿态大模型啦！因为我们的姿态样本比较多，所以我们训练大模型的时间会长一点，训练时长会在10～15分钟左右，当然啦，这样我们姿态大模型的训练结果也会更加的精准。
大模型训练完之后，我们来测试下，现在试试刚刚的录入的四种姿态的精准度是否在 90% 以上，如果你的每种姿态的精准度都在 90% 以上，那太棒了！
如果不在的话，那么可能需要重新录入姿态样本来改进模型的精准度。
中间件 - CodeLab 创作平台
到这里，我们已经完成了我们姿态识别的部分啦！这个其实就是我们的一个实时检测姿态的后台，这时候就需要一个中间人负责分析当前姿态并将对应的数据告诉给硬件的一个角色，中间人会这样问后台的大模型：“请告诉我现在是怎样的姿势？是举着左手还是举着右手？”
这个中间人呢在编程中也叫做中间件，在该项目中，它负责的工作是实时分析当前姿态，并将当前的姿态的数据发送给硬件。接下来我们就来测试一下我们的这个中间件朋友机不机灵吧！
我们就拿 CodeLab 创作平台来做这个中间件，点击开始创作，在左下角，新增一个扩展， 在搜索框里搜索 训练平台 ，点击它进行导入扩展。
棒！导入扩展之后，我使用图形化编程编写一段下图中这样的程序，我先翻译一段，大家应该都就懂了，当接收到 left > 0.9 时就会执行 说：“ left ”。
哎！这个 left > 0.9 是什么意思呢？这个 left 是不是有点眼熟？好像刚刚在哪里用到过是不是？其实这是刚刚我们在姿态大模型训练平台中写到的 left 姿态，是伸左手。0.9 是精准度，也就是 90% 小数形式。我猜你们应该也猜出了这段代码的意思了吧！它会一直接收大模型发来的消息，但是呢，只会在精准度大于 90% 的时候说 left 。
大家试试？哎呀，怎么回事？为什么我在姿态大模型那里试了精准度都已经 100% ，为什么这里还是不显示对应的文字呢？
嗯哈哈，忘记跟大家说了，这里还需要一个连接器，用于连接姿态训练平台与 CodeLab 创作平台之间的通讯，它叫 CodeLab Adapter ，大家可以根据下方卡片链接进行安装。
安装完成之后启动 CodeLab Adapter ， 现在再次回到我们的姿态大模型训练平台这里，我们看到在页面的顶端有一行居中的文字，已连接 Adapter ，这就说明成功了啦！
不信？你现在回到 CodeLab 创作平台的页面，然后对着摄像头做伸右手，看看是不是会说 right 了，像这样 ，棒 ！🎉
好，现在这个中间件已经知道如何分辨我们不同的姿态啦！
了解 MQTT 通信协议基本原理
接着，下一个任务就是把我们的姿态告诉硬件。你是不是也有同样的疑问？怎么告诉硬件呢？而且时延要做到很低。嗯... 这让我想起一位在通信协议上的好友 MQTT 通信协议，不止我非常喜欢它，很多做物联网的开发工程师也非常喜欢它，为什么这么招人喜欢呢？
我来举一个例子，假设我们有一个大型的活动或聚会，人们希望在这个活动中能够方便地发送和接收消息。这里的 MQTT 通信可以类比为一个群发消息的场景。
- 群组（Topic）： 想象一下，我们把这个聚会分成了几个不同的群组，比如“音乐爱好者”、“美食探索家”和“户外运动迷”。这些群组就好比MQTT中的主题（Topics），每个主题代表一个特定的消息类别或话题。
- 发送消息（Publish）： 现在，如果有人想分享一些关于音乐的信息，比如告诉大家一个音乐会的信息。他可以把这条消息发送到“音乐爱好者”这个群组中。这个动作就好比在MQTT中使用发布（Publish）功能，将消息发送到特定的主题。
- 接收消息（Subscribe）： 与此同时，对于那些对音乐感兴趣的人，他们可能在“音乐爱好者”这个群组中订阅（Subscribe）了消息。这意味着他们会收到所有在这个主题下发布的消息，比如音乐会信息。
- 多个订阅者（Subscribers）： 这个活动中可能有很多人都对音乐感兴趣，所以许多人都订阅了“音乐爱好者”主题。这就好比在MQTT中有多个订阅者同时关注同一个主题，他们都能收到发布到该主题的消息。
- 即时通信和异步性： 这种方式可以让大家实现即时通信，无需每个人都互相交流。同时，每个人可以自己决定在哪个群组中发布消息或者订阅消息，这就是异步通信的特点。
在这个比喻中，群消息的发送和接收就像MQTT中的发布和订阅。主题（Topics）类似于不同的聚会群组，而发布者（Publisher）发送消息到群组，订阅者（Subscriber）则接收并阅读群组中发布的消息。
现在想必你对 MQTT 通信协议的基本原理有一些了解了，现在我们新增一个 MQTT 扩展，刚刚我稍微修改了一下 CodeLab 创作平台的代码，嗯... 我又有点看不懂了，小编给大家再翻译一下，上面的那一大段的代码可以理解为打开微信 APP ，打开之后创建了一个群聊，名字叫做 junyan ，下面的四大块代码变动不大，只新增了一个：“广播主题（ junyan ）消息（ left ）”。它的意思也很简单，可以理解为在 junyan 这个群聊里发送了一个消息 叫做 left ，是不是很简单。
接下来，就是硬件这部分啦，硬件这部分可能很多人没有接触过，我是一位WEB全栈工程师，之前也没有接触过嵌入式硬件开发这方面，也是因为一个偶然的机会还有公司的发展才接触到的。
认识 ESP32 开发板
我们先来认识一下ESP32吧，可以把它想象成一个小而强大的电脑芯片。它有点像你手机或电脑里的大脑，但比较小巧。这个芯片可以让各种东西像玩具一样变得“聪明”。比如，它可以帮助灯泡变成可以远程控制的智能灯，让传感器收集环境数据，或者连接到互联网以与其他设备通信。
这个芯片拥有很多功能，比如能够连接无线网络（就像手机连Wi-Fi一样），还可以连接到其他设备，比如手机、传感器或者其他电子设备。它的作用有点像是电子世界的“通信员”，可以让各种东西互相“交流”。
我们先进行拼装，将 ESP32 连接到 WS2812B LED 灯带，现在需要用到一条 WS2812B LED 灯带、一个 ESP32 开发板以及三根杜邦线，接下来我们先使用杜邦线连接引脚：
- WS2812B 的 DIN（数据输入）引脚连接到 ESP32 的某一个 D引脚（通用输入输出）引脚。比如D15。
- WS2812B 的 VCC（电源正极）连接到 ESP32 的 3V3引脚（或者另外一个标有 5V 的引脚）。
- WS2812B 的 GND（电源负极）连接到 ESP32 的 GND 引脚（接地引脚）。
注意！！确保连接时极性正确，即 VCC 连接到正极、GND 连接到负极，以避免损坏灯带。
到这里我们已经将硬件组装完成，尝试点亮一下灯带吧！
首先使用我们的安卓数据线连接 ESP32 ，USB那一头插入电源适配器中。夷？ 灯带怎么没有点亮呢？那当然啦，因为我们还没有给 ESP32 写程序呢！接下来我来为大家讲解如何给 ESP 32 编写一段程序使灯带亮起来。
使用 Microblocks 对硬件编程
当然，我们全程不会使用任何 IDE 开发工具来对硬件进行编程，我们使用 Microblocks 平台的实时编程环境，点击积木，程序就会在主板上运行。是不是很神奇，现在，我们就使用 Microblocks 的实时编程环境来点亮我们的灯带！
使用 Micro-USB （安卓）数据线将 ESP32 连接到你的计算机。然后点击上层卡片链接进入 Microblocks 主页（浏览器推荐 Chrome / Edge ），然后 Run ，便到了他的实时编程环境中，第一次使用开发版我们需要先给 ESP32 刷入一个编程环境，操作如下图：
点击设置图标 -> 升级主板固件 -> ESP32 -> 连接主板 -> 选择我们的主板 -> 连接
完成之后，将数据线从计算机上拔下来在重新连接计算机，接着连接主板，当 USB 图标后有一个圆圆的绿色背景，说明我们已经连接成功啦！
正式我们我们的编程环节，接着从左侧的积木库，找到 NeoPixel 库并添加，这个库是支持对我们的 WS2812B 灯带进行控制。
我先写一段程序（如下图）
- 我的 WS2812B 灯带 有 30 个灯珠
- 我的 WS2812B 的 DIN（数据输入）引脚连接到 ESP32 的 D15 引脚
现在我想你应该知道下图中的程序是什么意思了吧！
当程序启动时，将一个 30 个 LED 灯珠的 WS2812B 灯带的数据输入引脚（DIN）连接到 ESP32 微控制器的 D15 引脚上，接着有控制所有的灯珠颜色设置为红色。
这下，灯带不仅亮了，还有颜色。如果你想做一个更炫酷的灯带，可以研究一下左边侧边栏的控制与运算，祝你调效出来一个满意的效果。
现在成功实现了点亮灯带，但是，硬件的任务还不止于此，他还要接收并分析中间件通过 MQTT 传输给它的消息，然后在点亮对应的相对应的灯珠。
程序我已经写好啦，程序看起来有些复杂，我就讲的简单易懂一点了哈，首先先让 ESP32 开发板连接上互联网，然后设置LED NeoPixel灯带的参数，连接上网络之后显示自己的 IP 地址，然后启动 GO 程序，请接着往下看。
当 Go 程序启动时，会将所有的灯珠颜色设置为绿色，是为了告诉我们它已经成功连上网络啦。下面的代码我就讲的稍微抽象一点，还记得刚刚我在讲 MQTT 与微信群聊发消息的案例吗？如果你不记得，快往上翻一翻。
这个和上面的微信群聊案例一模一样，只不过硬件这边它更像一个观察者，他的工作内容是检测其它人是否在群内发送了特殊消息，如果检测到了特殊消息，他会迅速的做出反应，比如检测到你的消息中是否包含 left ，如果是它就会广播 左 ，也就是启动 左 程序，左程序是什么呢？我们在接着往下看。
左 程序在这里，这里除了左，还有（右、所有、null），我先来讲一讲 左 程序做了什么事情吧！先是将所有的灯珠关闭，定义一个变量 left 并将其初始化为 0； 当 left 不等于 15 时，重复执行以下操作： 将 left 的值加 1，也就是说 left 会递增，每执行一次 left 的数值都不一样，直到 left 等于15 时，才会不满足重复执行条件，这段程序才会结束。那灯带的变化是将第 0-15 个灯珠点亮并将颜色设置为深蓝色。 右 程序也异曲同工之妙。
现在你需要整合一下整篇文章，我相信你应该基本了解这个隔空操作硬件是怎么秀起来的吧！我将在 Microblocks 环境编程的代码文件放到了GitHub 上，下载该文件并将该文件拖动到网页内即可直接复现上面的代码块！快去试试吧～
Microblocks AI_Light_Strip 代码文件在 GitHub 上的地址：https://github.com/wonderland-club/AI_Light_Strip
我在 GitHub 上有一个关于 React + MQTT + ESP32 实现低延迟多人操控不同 ESP32 小车的项目。该项目在前端页面利用 MQTT 通信协议控制硬件，是一个实现低延迟多人控制 ESP32 小车的原型。如果您对此项目感兴趣，欢迎访问仓库链接：https://github.com/wonderland-club/Aim-joinEsp32-mqtt，并给它点个 Star。
如果您对此文章有任何问题，欢迎通过chenswonderland123@gmail.com与我联系🤩
在新的一年来临之际，先祝大家新年快乐！希望新的一年里大家在技术的道路上获得更多成就，遇到更多有趣的挑战，也能够享受到更多的喜悦和成功。愿新的一年给大家带来健康、幸福和充满创意的时光！祝大家2024年元旦快乐！