基于Hi3861WIFIIOT搭建属于自己的物联网IOT平台3-搭建可视化平台

小嵌

基于Hi3861WIFIIOT搭建属于自己的物联网IOT平台3-搭建可视化平台, 安装nodered只需要执行下面几条命令即可安装 sudo apt-get install nodejs sudo apt-get install npm sudo npm install -g node-red 安装期间可能会出现失败的情况，失败的话重新安装就行了 安装好node-red后打开并运行，sudo node-red 会打印一串log，根据log信息找到

f59140d9129848ac3bfc90026772a42.png （55.71 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传 [info] Settings file   : /root/.node-red/settings.js   这个就是node-red的设置文件，可以在这个文件内设置账号密码以及端口号 执行命令 vim /root/.node-red/settings.js

打开后就可以看到端口号1880，然后修改成你自定义的端口号 0~65535之内的数字皆可，如果是云服务器记得在安全组添加这个端口，要不然公网无法打开

d26a85ac43a67dd9b8248ca934ac7ed.png （27.67 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传 在中间位置找到 adminAuth：这一条语句，并去掉屏蔽，username改成你的用户名，密码是经过加密算法加密的，可以去 https://www.jisuan.mobi/p163u3BN66Hm6JWx.html 设置自己的密码，并生成加密后的密码放进去，如图

cb3679b694dc3a3e43392c2a501d175.png （25.07 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传 输入完 esc  然后 输入:wq保存退出 然后再重新启动node-red，然后在浏览器中输入服务器IP：端口号打开，就可以输入账号密码了

1606357605（1）.jpg （31.87 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传 由于搭建这个可视化IOT内容较多，我本身也是刚入门，所以不打算详细教大家怎么用，就不班门弄斧了，只教大家使用基本的控件，关键的步骤，直接导入我写好的脚本，就可以直接用了。如果不想看我的教程，可以直接跳到下面直通车
1.先下载插件 登录进去之后，如图

2ef32adaa12c66c2a8a89615ee00546.png （135.72 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传



2f587a45c32673f43bd13a3e4095ba7.png （69.22 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传

输入相关的插件，然后下载，如果下载失败，可能是因为网络问题，可再次下载 node-red-dashboard                //UI相关插件，必须安装 node-red-contrib-json node-red-node-rbe 下载好之后，在左边的插件栏里边就多出了安装的插件

5d7e4fe1e2ad199a6d6a9bb846a76aa.png （34.9 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传
2.开始搭建 1.先连接MQTT，并获取数据显示



039938ecf0f937be0608822f2162403.png （61.91 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传



ae8992de23d50af3f594041f24f93d5.png （28.4 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传

dffc5197ef9e4d771ebfc4983eea212.png （35.91 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传







然后点第二栏安全那栏，随意填入用户名和密码即可。 然后点更新，返回上一层后点完成 然后点右上角的部署，就会看到连接成功



4e7f149e31efc6cc594d0bd9a051a88.png （11.62 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传
2.获取数据并可视化 1.在左边功能节点栏的找到change这个节点，拖进来 2.在dashboard节点栏下找到gauge，并拖进来 3.在dashboard节点栏下找到chart，并拖进来 然后连接 如图

9b2460788a8db73852fcc0c14641f1e.png （21.33 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传

然后双击change（黄色）那个节点，修改信息

f19cb2bfd6a79008a48ad94b79fe5a2.png （43.66 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传 然后就设置显示的折线图，新建一个组的名称，这个组的名称会显示在UI页面，也就是nodered可以设置很多个页面，每个页面会有一个ID，这个ID就是组的名称

5d7c0e56b2d08ffeb690b5c6361798b.png （52.53 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传

1606358189（1）.jpg （19.88 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传

1606358203（1）.jpg （21.58 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传

61890344a6586c703eee87ef706ff8a.png （32.2 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传

1606358386（1）.png （42.58 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传





点击完成后，点右上角的部署，注意，，每修改一点地方都要部署，部署了才会更新到系统 修改圆表盘数据，双击gauge节点



674d48ec677df028293bbbe060061c1.png （47.64 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传 修改后点完成，然后再点部署
3.UI显示 完成上述步骤后，在浏览器中输入你的服务器IP地址:1880/ui,即可打开UI界面，如192.168.0.1：1880/ui，注意如果在前面修改了端口的话，这里的1880要修改成你的端口，打开后如下图

5d1b724e07adeec06821b5697a04314.png （20.24 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传 温度折线图这个可以改成温度数据显示，只需在对应的地方修改然后部署即可 然后发现折线图没有显示出来，这是因为没有收到数据，所以不会显示出来，
3.与服务器进行数据传输 打开EMQX服务器，设置发布参数，服务器IP：18083,进入控制台，修改发布的消息

817372309a17f649c395d2f8bf6057e.png （47.81 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传 发送之后就可以在UI看到数据了

6f0af6149491ad46177c70a82dd1848.png （23.65 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传 至于在nodered发布数据和网易云音乐的，直接用的插件即可，修改方法如上，修改的地方就靠大家举一反三了。
界面直通车 导入节点配置：

c6cb3bdff2fae390c9018db9cb37cef.png （24.28 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传

4682d25c278357f238e0bee494078e7.png （22.21 KB, 下载次数: 0）

下载附件  保存到相册  

1 小时前 上传



直接导入我的文件即可使用，只需修改服务器IP地址、订阅的主题，消息载体的名称，然后部署即可使用

网易云音乐链接使用方法：打开网页版网易云音乐，搜索你喜欢的歌曲，点进去后在头像下边有个生成外链播放器，点进去，然后就生成HTML代码，直接复制这段代码替换我的歌曲代码，即可。

到这一篇的时候，动手能力强的，已经可以自己搭建自己喜欢的样式了 下一篇：打通设备到IOT平台的通道，在平台获取设备的数据