未来板无痛远程大型“点灯”现场

项目简介

对某些大佬已仰慕甚久（此处点名 喵家委员长~），对应用技术研究得很深入，近期在Homeassistantt智能家居控制这块有了显著成果，效果炫酷！（如果允许会请委员长友情客串一篇连载分享相关经验）

但有些朋友可能怕初次上手的智能家居项目就是困难模式，难以实现，让信心殆尽？
无须担心，本期就由CC喵带大伙儿用最平易近人的流程别样玩转智能家居~

项目将具体包含以下功能：

实现未来板与小喵MQTT服务器连接
通过手机app控制室内灯的开关

危险

本项目基于以下前提实现：

无需再另外购买HomeKit硬件，只用喵家的简单硬件。
无需改造家里的强电装置，仅涉及简易的联动结构
无需掌握高深的编程知识，统统采用图形化方式

项目清单

材料	备注
未来板	x1
Type-C 数据线	x1
网络热点（手机/路由器）
安卓手机	x1
Robotbit（含底座、电池）	x1
2KG舵机	x1
乐高积木	若干
热熔胶枪	固定用

实现步骤

分步框图

步骤概况

STEP1：搭建开关装置结构
STEP2：注册MQTT话题
STEP3：编写未来板的MQTT程序
STEP4：MQTT调试
STEP5：编写APP

STEP1：搭建开关装置结构

开关装置结构设计核心

采用舵机转轴带动乐高零件按压开关的方式

舵机选用2KG舵机
1. 输出轴与乐高结合
2. 力矩足够大
3. 未来板图形化编程积木块支持
参考结构

可以随意发挥你们的创意，这里CC喵做了一个最简单的结构供大家参考

结构固定

上热熔胶枪固定！
" 没有什么机械结构是热熔胶枪无法解决的，如果有，那就两支热熔胶枪~ "

结构全貌

STEP2：注册MQTT话题

登录喵家的IOT服务器，iot.kittenbot.cn
注册一个话题，我的话题名为homeiot（你需要注册另外一个，全服务器唯一的！）
按图操作就是这么easy~

STEP3：编写未来板的MQTT程序

理解未来板的MQTT程序程序流程图

根据流程图在Kittenblock编写图形化积木块程序

程序下载

1.硬件选择—>2.连接—>3.编程—>4.代码转译—>5.下载：

STEP4：MQTT调试

信息

喵家MQTT服务器还带调试功能，可通过网页直接发送消息（网页作为MQTT的子设备

如果一切无意外

当向对应话题（我这里是homeiot）发送1，舵机应该触发开状态！
当向对应话题发送0，舵机应该触发关状态！

危险

如果这里得不到正确结果，请检查

未来板是否正确连上wifi，正确连上wifi，屏幕会显示ip地址
Robotbit的18650电池是否电，电源开关是否打开？
话题名称，程序编写的与MQTT服务器申请的是否填写一致？

STEP5：控制端

综合兼容性以及难度考虑，控制端这边，我们可以使用html来制作
这里主要用到mqtt.js库，来实现向话题发送消息

首先新建一个文本文件
双击打开文本然后将下面的内容复制到其中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>iot开关</title>
    <style>
      button {
        width: 80%;
        height: 5rem;
        margin: 2rem;
        background-color: #4CAF50;
        color: white;
        font-size: 2rem;
        border: none;
        border-radius: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2)
      }
    </style>
  </head>
  <body>
    <div style="text-align: center">
      <h1>智能家居</h1>
      <button id="onButton">开</button>
      <button id="offButton">关</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/4.2.6/mqtt.min.js"></script>

    <script>
      const options = {
        clientId: 'zy'
      }

      const mqttClient = mqtt.connect('wss://iot.kittenbot.cn/mqtt', options)

      mqttClient.on('connect', () => {
        console.log('Connected to MQTT broker')

        // 定义开启按钮的监听事件
        document.getElementById('onButton').addEventListener('click', () => {
          mqttClient.publish('/homeiot', '1')
          console.log('Published "on" to /homeiot')
        })

        // 定义关闭按钮的监听事件
        document.getElementById('offButton').addEventListener('click', () => {
          mqttClient.publish('/homeiot', '0')
          console.log('Published "off" to /homeiot')
        })
      })

      mqttClient.on('error', (error) => {
        console.log(`Error: ${error}`);
      })
    </script>
  </body>
</html>

然后修改文件后缀名.html
然后再次双击打开这个文件，电脑就会使用浏览器运行它，我们可以先用鼠标点击按钮测试一下，连接话题，然后在点击网页上的开关按钮，就可以在话题管理界面收到消息了
用手机打开html文件
这里建议手机下载一个qq浏览器，然后用qq从电脑将文件发送到手机，之后直接选择用qq浏览器打开即可，这个办法最简单，可以确保先用起来。

效果展示

控制丝滑,延迟低~
（5/25更新，视频中的遥控apk门槛增高，已经替换为html网页。）

项目简介​

项目清单​

实现步骤​

分步框图​

步骤概况​

STEP1：搭建开关装置结构​

STEP2：注册MQTT话题​

STEP3：编写未来板的MQTT程序​

STEP4：MQTT调试​

STEP5：控制端​

效果展示​