【Mind+】用SIOT通过MQTT在网页端控制掌控板

最新推荐文章于 2024-04-26 09:23:47 发布
最新推荐文章于 2024-04-26 09:23:47 发布
阅读量936 收藏 2
点赞数
分类专栏： Arduino 图形化编程 文章标签： html mqtt 物联网
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/silver_lf/article/details/116211658
版权

文章目录

【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文件等完整下载：

效果展示

在这里插入图片描述
在这里插入图片描述

总结

通过网页端控制，可以使得控制端看起来更美观，把网页上传到云服务器中，我们还能远程控制，通过手机访问即可，如下便是将该网页上传到了我的云服务器中。

在这里插入图片描述

聆雪轻柔
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
实现sIoT上mqtt消息的通讯以及通过AppInventor结合sIoT实现手机app控制掌控板的灯和显示内容。
qq_44794601的博客
10-29 1221
一、实验目的及要求 【实验一】实现sIoT配置并实现sIoT上mqtt消息的通讯。 【实验二】通过AppInventor结合sIoT实现手机app控制掌控板的灯和显示内容。 二、实验原理与内容 sIoT可以在局域网上实现mqtt消息的通讯。借助sIoT可以通过手机app实现局域网内的设备操控。 三、实验软硬件环境 硬件：掌控板 软件：Mind+ 四、实验过程 【实验一】 1、先下载SIoT1.2，打开运行，如下图所示。 2、打开命令行提示符，得知本电脑的ip地址，打开浏览器，输入(本机ip地址+：8888
Mind+第三方自定义用户库实现——标准MQTT协议库
weixin_43913566的博客
05-12 1387
前言 在创客的课程中，经常会需要将数据上传到云端，从而将整一个作品完整化，实现真正意义上的物联网。这一个部分通常使用使用MQTT协议来实现，但是Mind+自带的MQTT库只支持阿里云、OneNet、SIoT、EasyIot四个平台，有很大的局限性，无法使用自己搭建的MQTT服务器或者其他平台 ...
在Mind+下使用sIoT及安卓app实现mqtt实验
weixin_43548310的博客
10-11 1136
一、实验目的及要求 【实验一】实现sIoT配置并实现sIoT上mqtt消息的通讯。 【实验二】通过AppInventor结合sIoT实现手机app控制掌控板的灯和显示内容。 二、实验原理与内容 sIoT可以在局域网上实现mqtt消息的通讯。借助sIoT可以通过手机app实现局域网内的设备操控。 三、实验软硬件环境 硬件：掌控板 软件：Mind+ 四、SIoT平台的启动与使用 （1）下载和解压包 点击 https://mindplus.dfrobot.com.cn/siot 或 https://siot.re
阿里云物联网平台mqtt网页websocket
最新发布
cj2272357704的博客
04-26 1632
阿里云物联网连接html和客户端，实现订阅发布消息。
Mind+实例2——SIoT使用教程
漠宸离若的博客
05-24 5360
一、SIoT简介 SIoT是一个为中小学STEM教育定制的跨平台的开源MQTT服务器程序，S指科学（Science）、简单（Simple）的意思。SIoT重点关注物联网数据的收集和导出，是采集科学数据的最好选择之一。 那什么是物联网？什么又是MQTT呢？ 1.1 物联网 物联网（Internet of Things，缩写IoT）是互联网的一个延伸，互联网的终端是计算机（PC、服务器），而物联网的终端是硬件设备，无论是家电、工业设备、汽车、监测仪器，所有这些终端都可以互联，可以总结为万物互联。
sIoT实现mqtt消息通讯及手机app控制掌控板的灯和显示内容
weixin_44606930的博客
11-04 537
sIoT及安卓app实现mqtt实验 一、实验目的及要求 【实验一】实现sIoT配置并实现sIoT上mqtt消息的通讯。 【实验二】通过AppInventor结合sIoT实现手机app控制掌控板的灯和显示内容。 二、实验原理与内容 sIoT可以在局域网上实现mqtt消息的通讯。借助sIoT可以通过手机app实现局域网内的设备操控。 三、实验软硬件环境 硬件：掌控板 软件：Mind+ 四、实验过程（实验步骤、记录、数据、分析） 1、源码仓库 【实验一】源码 /*! * MindPlus * mpython
基于Mind+制作siot物联网
lubingxian147的博客
01-18 811
我们需要一个能联网的设备（如掌控板等），一台windows电脑下载完成后解压，得到这样一个文件打开它，会发现有这几个文件其中，config.json是登录信息，需要修改密码或用户名，看下面的操作（默认用户名是siot,密码是dfrobot）用记事本打开大概你看到的是这样的我圈出的地方是用户名和密码，修改这两个就可以了修改后保存准备工作就完成了。
sIoT实现mqtt实验
weixin_44704208的博客
04-28 568
sIoT实现mqtt实验（该博客主要记录本人物联网课程的实验报告） 一、实验目的及要求 【实验一】实现sIoT配置并实现sIoT上mqtt消息的通讯。 【实验二】通过AppInventor结合sIoT实现手机app控制掌控板的灯和显示内容。 二、实验原理与内容 sIoT可以在局域网上实现mqtt消息的通讯。借助sIoT可以通过手机app实现局域网内的设备操控。 注意，以上实验设备必须在同一个局域网里 三、实验软硬件环境 硬件：掌控板 软件：Mind+ 四、实验过程（实验步骤、记录、数据、分析） 4.1 sI
网页端SIoT控制掌控版+网页端EMQ控制Esp32
zh15627569408的博客
04-28 770
前言 一次小作业，既然大家都发博客了，我也发一下吧~ 一、网页端通过SIOT控制灯的亮灭 （1）部署SIOT 要实现上述效果首先要打开SIOT，我这里选用了SIOT1.3，打开SIOT后会出现以下界面： 这几个地址是共享数据的，任选一个地址加8080端口用浏览器访问，输入账号密码后查看topic，初始账号密码为siot、dfrobot。 PS：siot的topic是 项目ID/设备名 （2）制作网页文件 然后搞网页端，直接上代码： 这个网页引用了jQuery和bootstrap包，按钮对应的js按照格
响应式Web对接物联网MQTT应用（SIoT+掌控板+Web）
weixin_43757283的博客
04-27 991
文章目录前言一、实验准备二、使用步骤1.引入库2.读入数据总结 前言 注：本文系湛江市第十七中学星火创客团队及岭南师范学院物联网俱乐部原创部分参赛项目，转载请保留声明。 本实验的内容是使用掌控板和SIoT平台结合，实现一个响应式Web对接物联网MQTT的应用。 提示：以下是本篇文章正文内容，下面案例可供参考 一、实验准备 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np impo.
【Mind+】用SIOT通过MQTT在网页端控制掌控板.zip
04-28
综上所述，这个项目展示了如何结合Mind+和SIOT，通过MQTT协议在网页端实现对掌控板的远程控制，提供了一种直观且易于理解的物联网应用示例。对于初学者来说，这是一个很好的实践项目，有助于理解和掌握物联网的基本...
网页端SIoT控制掌控版/网页端EMQ控制Esp32
04-28
在本案例中，网页端的控制就是通过SIoT来实现的，用户可以通过浏览器界面发送指令，这些指令经过网络传输，到达掌控板，进而控制硬件的亮灭状态。 2. **掌控板**： 掌控板是一种小型的开发板，通常配备有MCU（微...
《基于掌控板及SIoT平台的Web物联网控制系统》博客的代码
04-29
【标题】中的“基于掌控板及SIoT平台的Web物联网控制系统”揭示了这个项目的核心内容，它是一个结合了硬件设备（掌控板）与软件平台（SIoT）的物联网应用，通过Web界面实现对物联网设备的远程控制。在物联网领域，...
在SIoT官方案例下实现的基于掌控板和SIOT的响应式web物联网设备管理插件界面
04-26
标题中的“在SIoT官方案例下实现的基于掌控板和SIoT的响应式web物联网设备管理插件界面”表明我们正在讨论一个利用SIoT（Smart IoT，可能是某种物联网框架或平台）和掌控板（可能是微型控制器或者开发板，如Arduino...
2019-08-01-【案例】用SIoT与掌控板做热辐射实验1
08-08
1. **物联网技术**：SIoT是一个开源的物联网平台，它允许用户通过各种设备（如掌控板、Arduino等）收集和传输数据，实现远程监控和自动化控制。在这个实验中，SIoT作为数据记录和处理的核心。 2. **掌控板与传感器*...
Arduino 实现红绿灯效果
热门推荐
silver_lf的博客
08-17 1万+
Arduino 实现交通信号灯效果 材料：红，黄，绿色led灯各一个；小电阻三个，导线四条 int redled =10; //定义数字10 接口 int yellowled =7; //定义数字7 接口 int greenled =4; //定义数字4 接口 void setup() { pinMode(redled, OUTPUT);//定义红色小灯接口为输出接口 pinMode(yello...
【Arduino】坐姿检测器
silver_lf的博客
07-30 4933
文章目录前言一、所需材料1、硬件2、软件3、接线二、Arduino部分1、库函数引入2、选择开发板3、代码4、演示视频三、使用说明1、项目方案2、页面切换页面设计 前言 这也是帮人做的毕设之一，功能完善，资料也完备，相对以往代码写的规范，代码相对以往变得更加简洁好看，视频也有录制。 项目下载链接 一、所需材料 1、硬件 HC-SR04超声波测距模块 带IIC转换板LCD1602 JQ8400FL10P语音模块 UNO R3开发板 三色LED灯 LCD1602 IIC 积
Arduino实现流水灯效果
silver_lf的博客
08-12 4722
Arduino实现流水灯效果 int NUM = 6; //LED 灯的总数 void setup() { for (int i = BASE; i < BASE + NUM; i ++) { pinMode(i, OUTPUT); //设定数字i引脚为输出 } } void loop() { for (int i = BASE; i < BASE + NUM; i ++) {...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值