文章目录
【Mind+】用SIOT通过MQTT在网页端控制掌控板
前言
除了使用阿里云,腾讯云,华为云等服务器之外,我们还可以通过搭建自己SIOT服务器实现MQTT信息收发,这里使用了网页的方法来通过MQTT信息控制掌控板
注:本文系湛江市第十七中学星火创客团队及岭南师范学院物联网俱乐部原创部分参赛项目,转载请保留声明
一、所需材料
Mind+ |
---|
掌控板 |
局域网 |
SIOT环境 |
一条type C数据线 |
二、SIOT部分
1.配置SIOT的json文件
打开json文件,然后更改登陆用户名和密码,网页端口可以改变,mqtt端口不可更改
2、获得本机IP地址
运行SIOT应用,然后从程序框中可以看到本机的局域网IP地址,这将是SIOT的服务器地址
登陆SIOT
定义topic,发送一条信息可以产生topic了
3、网页发布api
api测试
发布消息的格式:
Http://[SIoT的IP]:8080/publish?topic=xzr/001&msg=on&iname=siot&ipwd=dfrobot
说明:向topicid(主题)“xzr/001”发送内容为“on”的消息,其中“xzr”是项目id,“001”是设备id。
返回数据:{“code”:1,”msg”:”数据已发送”}
示例:
可以看到mqtt信息发布成功,返回数据告诉我们数据已发送,这里已经实现了网页控制的一部分了
4.网页书写
引入css和js样式
我们采用的是Bootstrap的框架来写网页,因而必须要引入他们的样式文件
Bootstrap官网
网页代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="../static/js/bootstrap/css/bootstrap.min.css">
<script src="../static/js/jquery-2.1.4.min.js"></script>
<script src="../static/js/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="../static/css/style.css" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../static/js/bootstrap/js/bootstrap.min.js"></script>
<script src="../static/js/vue.js"></script>
<!-- <script src="js/app.js"></script> -->
<title></title>
<meta name="description" />
</head>
<body>
<div class="container text-center"><img width="300px" src="1.png" alt=""></div>
<div class="container text-center">
<button type="button" id="ledRedOn" class="btn btn-success btn-lg">红灯开</button>
<button type="button" id="ledRedOff" class="btn btn-info btn-lg">红灯关</button>
</div>
<br>
<div class="container text-center">
<button type="button" id="ledYellowOn" class="btn btn-success btn-lg">黄灯开</button>
<button type="button" id="ledYellowOff" class="btn btn-info btn-lg">黄灯关</button>
</div>
<br>
<div class="container text-center">
<button type="button" id="ledBlueOn" class="btn btn-success btn-lg">蓝灯开</button>
<button type="button" id="ledBlueOff" class="btn btn-info btn-lg">蓝灯关</button>
</div>
<br>
<div class="container text-center">
<button type="button" id="fanOn" class="btn btn-success btn-lg">流水灯</button>
<button type="button" id="time" class="btn btn-info btn-lg">获时间</button>
</div>
<script>
$(function(){
$('#ledRedOn').click(function(){
$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LEDR_ON&iname=602&ipwd=iot");
});
$('#ledRedOff').click(function(){
$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LED_OFF&iname=602&ipwd=iot");
});
$('#ledYellowOn').click(function(){
$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LEDY_ON&iname=602&ipwd=iot");
});
$('#ledYellowOff').click(function(){
$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LED_OFF&iname=602&ipwd=iot");
});
$('#ledBlueOn').click(function(){
$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LEDB_ON&iname=602&ipwd=iot");
});
$('#ledBlueOff').click(function(){
$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LED_OFF&iname=602&ipwd=iot");
});
$('#fanOn').click(function(){
$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=LED_RUNON&iname=602&ipwd=iot");
});
$('#time').click(function(){
$.get("http://192.168.31.115:8080/publish?topic=2018A14116/LF&msg=Time_get&iname=602&ipwd=iot");
});
});
</script>
</body>
</html>
三、掌控板部分
1、引入库文件
选择主控板为掌控板
选择网络服务为MQTT、WiFi和NTP
2、实现代码
需要设置WiFi信息、MQTT信息
SIOT文件等完整下载:
效果展示
总结
通过网页端控制,可以使得控制端看起来更美观,把网页上传到云服务器中,我们还能远程控制,通过手机访问即可,如下便是将该网页上传到了我的云服务器中。