ZK-VIEW快速接入MQTT教程，實(shí)現(xiàn)繼電器遠(yuǎn)程開(kāi)關(guān)與DHT11溫濕度采集與傳輸
通過(guò)MQTT使用ESP8266實(shí)現(xiàn)繼電器遠(yuǎn)程開(kāi)關(guān)與DHT11溫濕度采集與傳輸，通過(guò)Arduino燒錄，通過(guò)ZK-VIEW低代碼Web組態(tài)平臺(tái)快速接入，實(shí)現(xiàn)大屏可視化。
所有的示例所用到的程序和代碼下載鏈接
鏈接： ?提取碼：agc9
ZK-VIEW在線工業(yè)組態(tài)低代碼平臺(tái)地址：
壓縮包內(nèi)容如下
注意：程序不要放在中文目錄下運(yùn)行，避免出現(xiàn)不必要的異常
話不多說(shuō)，正式開(kāi)始
1. 安裝 Arduino IDE 開(kāi)發(fā)環(huán)境
雙擊運(yùn)行： arduino-ide_2.0.4_Windows_64bit.exe
安裝好后，打開(kāi)軟件，如圖所示
設(shè)置中文 ?
File>Preferences>Language
彈出菜單選擇中文(簡(jiǎn)體)，點(diǎn)擊OK
第一次安裝會(huì)多次彈出安裝軟件驅(qū)動(dòng)，一律點(diǎn)擊安裝
配置Esp8266管理器地址
文件>首選項(xiàng)>其他開(kāi)發(fā)板管理地址> 填入：
http://arduino.esp8266.com/stable/package_esp8266com_index.json
點(diǎn)擊確定
安裝Esp8266平臺(tái)
等待下載安裝完成，安裝完成后會(huì)彈出安裝成功小窗，如果有Error，請(qǐng)檢查網(wǎng)絡(luò)環(huán)境，重新安裝
選擇對(duì)應(yīng)開(kāi)發(fā)板，依次點(diǎn)擊
工具>開(kāi)發(fā)板>esp8266>NodeMCU 1.0(ESP-12E Module)
安裝庫(kù)文件，依次點(diǎn)擊
工具>管理庫(kù)
在彈出窗口的左側(cè)依次輸入以下庫(kù)的名稱進(jìn)行安裝
SimpleDHT、PubSubClient、OneWire、EspMQTTClient、Chrono
全部安裝完成后，通過(guò)USB連接ESP8266開(kāi)發(fā)板，將以下程序復(fù)制到程序框中（壓縮包中ESP8266芯片程序）
注意修改 wifi名稱、密碼、mqtt服務(wù)器地址
接線原理圖
僅控制4路開(kāi)關(guān) ESP8266源程序
#include <ESP8266WiFi.h>
#include <PubSubClient.h>
#include <Wire.h>
#include <Chrono.h>
const char* deviceID = "esp1"; ?// ESP8266板子編號(hào)，不同的板子更換編號(hào)，即可增加板子測(cè)點(diǎn)
const char* ssid = "lazykee";
const char* password = "123456789";
const char* mqtt_server = "192.168.2.2";
const int SWITCH_PINS[] = { 16, 5, 4, 2 };
const int SWITCH_COUNT = sizeof(SWITCH_PINS) / sizeof(SWITCH_PINS[0]);
WiFiClient espClient;
PubSubClient client(espClient);
Chrono switchStatusChrono;
// 更改開(kāi)關(guān)狀態(tài)并通過(guò) MQTT 發(fā)送狀態(tài)更新
void changeSwitch(int pin, char receivedChar) {
?digitalWrite(pin, receivedChar == '0' ? HIGH : LOW);
?int pinIndex = -1;
?for (int i = 0; i < SWITCH_COUNT; ++i) {
? ?if (SWITCH_PINS[i] == pin) {
? ? ?pinIndex = i;
? ? ?break;
? ?}
?}
?String data = "switch_" + String(pinIndex + 1) + "," + receivedChar + ";";
?client.publish((String("zkup/") + deviceID).c_str(), data.c_str());
}
// MQTT 消息回調(diào)函數(shù)
void callback(char* topic, byte* payload, unsigned int length) {
?char receivedChar = (char)payload[0];
?String tp = topic;
?Serial.println(tp);
?for (int i = 0; i < SWITCH_COUNT; ++i) {
? ?if (tp == (String("zkDown/") + deviceID + "/switch_" + String(i + 1))) {
? ? ?changeSwitch(SWITCH_PINS[i], receivedChar);
? ? ?break;
? ?}
?}
}
// 用于重新連接到 MQTT 服務(wù)器的函數(shù)
void reconnect() {
?while (!client.connected()) {
? ?// 使用 deviceID 作為客戶端ID
? ?if (client.connect(deviceID)) {
? ? ?String subscriptionTopic = String("zkDown/") + deviceID + "/#";
? ? ?client.subscribe(subscriptionTopic.c_str());
? ?} else {
? ? ?Serial.print("failed, rc=");
? ? ?Serial.print(client.state());
? ? ?Serial.println(" try again in 5 seconds");
? ? ?delay(5000);
? ?}
?}
}
// 發(fā)送所有開(kāi)關(guān)的狀態(tài)數(shù)據(jù)到 MQTT
void sendSwitchStatus() {
?String switchData = "";
?for (int i = 0; i < SWITCH_COUNT; ++i) {
? ?switchData += "switch_" + String(i + 1) + "," + (digitalRead(SWITCH_PINS[i]) == LOW ? "1" : "0") + ";";
?}
?client.publish((String("zkup/") + deviceID).c_str(), switchData.c_str());
}
// 設(shè)置函數(shù)，用于初始化
void setup() {
?Serial.begin(9600);
?for (int i = 0; i < SWITCH_COUNT; ++i) {
? ?pinMode(SWITCH_PINS[i], OUTPUT);
? ?digitalWrite(SWITCH_PINS[i], HIGH);
?}
?WiFi.begin(ssid, password);
?client.setServer(mqtt_server, 1883);
?client.setCallback(callback);
}
// 主循環(huán)函數(shù)
void loop() {
?if (!client.connected()) {
? ?reconnect();
?}
?client.loop();
?// 每5秒向 MQTT 發(fā)送一次所有開(kāi)關(guān)的狀態(tài)數(shù)據(jù)
?if (switchStatusChrono.hasPassed(5000)) {
? ?switchStatusChrono.restart();
? ?sendSwitchStatus();
?}
}
DHT11溫濕度傳感器 + 控制4路開(kāi)關(guān) ESP8266源程序（根據(jù)設(shè)備自選）
#include <ESP8266WiFi.h>
#include <PubSubClient.h>
#include <Wire.h>
#include <SimpleDHT.h>
#include <Chrono.h>
const char* deviceID = "esp1"; ?// ESP8266板子編號(hào)，不同的板子更換編號(hào)，即可增加板子測(cè)點(diǎn)
const char* ssid = "lazykee";
const char* password = "123456789";
const char* mqtt_server = "192.168.2.2";
const int DHT_PIN = 14;
const int SWITCH_PINS[] = { 16, 5, 4, 2 };
const int SWITCH_COUNT = sizeof(SWITCH_PINS) / sizeof(SWITCH_PINS[0]);
WiFiClient espClient;
PubSubClient client(espClient);
SimpleDHT11 dht11(DHT_PIN);
Chrono dht11Chrono;
Chrono switchStatusChrono;
// 更改開(kāi)關(guān)狀態(tài)并通過(guò) MQTT 發(fā)送狀態(tài)更新
void changeSwitch(int pin, char receivedChar) {
?digitalWrite(pin, receivedChar == '0' ? HIGH : LOW);
?int pinIndex = -1;
?for (int i = 0; i < SWITCH_COUNT; ++i) {
? ?if (SWITCH_PINS[i] == pin) {
? ? ?pinIndex = i;
? ? ?break;
? ?}
?}
?String data = "switch_" + String(pinIndex + 1) + "," + receivedChar + ";";
?client.publish((String("zkup/") + deviceID).c_str(), data.c_str());
}
// MQTT 消息回調(diào)函數(shù)
void callback(char* topic, byte* payload, unsigned int length) {
?char receivedChar = (char)payload[0];
?String tp = topic;
?Serial.println(tp);
?for (int i = 0; i < SWITCH_COUNT; ++i) {
? ?if (tp == (String("zkDown/") + deviceID + "/switch_" + String(i + 1))) {
? ? ?changeSwitch(SWITCH_PINS[i], receivedChar);
? ? ?break;
? ?}
?}
}
// 用于重新連接到 MQTT 服務(wù)器的函數(shù)
void reconnect() {
?while (!client.connected()) {
? ?// 使用 deviceID 作為客戶端ID
? ?if (client.connect(deviceID)) {
? ? ?String subscriptionTopic = String("zkDown/") + deviceID + "/#";
? ? ?client.subscribe(subscriptionTopic.c_str());
? ?} else {
? ? ?Serial.print("failed, rc=");
? ? ?Serial.print(client.state());
? ? ?Serial.println(" try again in 5 seconds");
? ? ?delay(5000);
? ?}
?}
}
// 發(fā)送 DHT11 傳感器數(shù)據(jù)到 MQTT
void sendDHT11Data() {
?byte temperature = 0;
?byte humidity = 0;
?if (dht11.read(&temperature, &humidity, nullptr) != SimpleDHTErrSuccess) {
? ?return;
?}
?String data = "temp1," + String(temperature) + ";"
? ? ? ? ? ? ? ?+ "temp1," + String(temperature) + ",100;"
? ? ? ? ? ? ? ?+ "hum1," + String(humidity) + ";"
? ? ? ? ? ? ? ?+ "hum1," + String(humidity) + ",200";
?client.publish((String("zkup/") + deviceID).c_str(), data.c_str());
}
// 發(fā)送所有開(kāi)關(guān)的狀態(tài)數(shù)據(jù)到 MQTT
void sendSwitchStatus() {
?String switchData = "";
?for (int i = 0; i < SWITCH_COUNT; ++i) {
? ?switchData += "switch_" + String(i + 1) + "," + (digitalRead(SWITCH_PINS[i]) == LOW ? "1" : "0") + ";";
?}
?client.publish((String("zkup/") + deviceID).c_str(), switchData.c_str());
}
// 設(shè)置函數(shù)，用于初始化
void setup() {
?Serial.begin(9600);
?for (int i = 0; i < SWITCH_COUNT; ++i) {
? ?pinMode(SWITCH_PINS[i], OUTPUT);
? ?digitalWrite(SWITCH_PINS[i], HIGH);
?}
?WiFi.begin(ssid, password);
?client.setServer(mqtt_server, 1883);
?client.setCallback(callback);
}
// 主循環(huán)函數(shù)
void loop() {
?if (!client.connected()) {
? ?reconnect();
?}
?client.loop();
?// 每1秒讀取一次 DHT11 傳感器數(shù)據(jù)并發(fā)送到 MQTT
?if (dht11Chrono.hasPassed(1000)) {
? ?dht11Chrono.restart();
? ?sendDHT11Data();
?}
?// 每5秒向 MQTT 發(fā)送一次所有開(kāi)關(guān)的狀態(tài)數(shù)據(jù)
?if (switchStatusChrono.hasPassed(5000)) {
? ?switchStatusChrono.restart();
? ?sendSwitchStatus();
?}
}
點(diǎn)擊 →，完成程序上傳
如果輸出窗口沒(méi)有紅色報(bào)錯(cuò)，則上傳成功。
2. 啟動(dòng)MQTT服務(wù)器（本例程適用emqx）
進(jìn)入 emqx-5.0.21-windows-amd64\bin 目錄 ?
不要在中文網(wǎng)目錄下運(yùn)行該程序
第一次啟動(dòng)，建議適用cmd命令行終端啟動(dòng):
emqx start
emqx start
如果啟動(dòng)報(bào)下列錯(cuò)誤
根據(jù)自己的版本下載并安裝：
ARM64 最新受支持 ARM64 版本的永久鏈接 X86 最新受支持 x86 版本的永久鏈接 X64 最新受支持 x64 版本的永久鏈接。 X64 可再發(fā)行程序包包含 ARM64 和 X64 二進(jìn)制文件。 當(dāng) X64 可再發(fā)行程序包安裝在 ARM64 設(shè)備上時(shí)，可以通過(guò)此包輕松安裝所需的 Visual C++ ARM64 二進(jìn)制文件。
再次運(yùn)行
emqx start，出現(xiàn)如下所示，則服務(wù)器啟動(dòng)成功
3. 啟動(dòng)ZK-VIEW數(shù)據(jù)源
運(yùn)行 zk-view數(shù)據(jù)源_MQTT_exe執(zhí)行程序\ZK-VIEW_MQTT.exe
出現(xiàn)如上圖所示內(nèi)容，無(wú)報(bào)錯(cuò)信息，則連接成功（同時(shí)提供了 MQTT Java 源程序，可自行參考）
4. zk-view添加數(shù)據(jù)源
打開(kāi)zk-view官方網(wǎng)站 ? 點(diǎn)擊開(kāi)始使用，進(jìn)入到登錄頁(yè)面
使用手機(jī)號(hào)，或微信掃碼登錄
右側(cè)切換到數(shù)據(jù)源面板，點(diǎn)擊內(nèi)部數(shù)據(jù)源按鈕
點(diǎn)擊添加項(xiàng)目，在彈出框中輸入信息，點(diǎn)擊添加
按照下圖順序，依次點(diǎn)擊按鈕，在彈出窗口中輸入對(duì)應(yīng)的連接信息，默認(rèn)連接地址：ws://localhost:8111/zkSource
點(diǎn)擊左側(cè)新添加的數(shù)據(jù)源，點(diǎn)擊原始點(diǎn)管理
在彈出框中，項(xiàng)目選擇框中選擇默認(rèn)主題 zkup/#，
主題可在第三步config下的application.properties中進(jìn)行添加，然后點(diǎn)擊全選，保存更改。
點(diǎn)擊開(kāi)始連接，如果右側(cè)出現(xiàn)綠色連接成功，并且測(cè)點(diǎn) value有值，則說(shuō)明數(shù)據(jù)源連接成功，此時(shí)可以關(guān)閉該網(wǎng)頁(yè)。
5. 添加數(shù)據(jù)源，單點(diǎn)數(shù)據(jù)綁定
點(diǎn)擊導(dǎo)入我的數(shù)據(jù)源，
如果找不到數(shù)據(jù)源面板，則點(diǎn)擊圖紙空白處則會(huì)出現(xiàn)，按照順序，將數(shù)據(jù)源進(jìn)行圖紙導(dǎo)入
點(diǎn)擊實(shí)時(shí)數(shù)據(jù)查看，檢查數(shù)據(jù)狀態(tài)，并點(diǎn)擊保存參考值。
如果不保存參考值，測(cè)點(diǎn)綁定時(shí)不方便
單點(diǎn)溫度、濕度數(shù)據(jù)綁定，拖拽開(kāi)始欄 TEXT 文本元素到圖紙上，選中文本元素，右側(cè)面板切換到數(shù)據(jù)面板，點(diǎn)擊添加數(shù)據(jù)綁定
點(diǎn)擊測(cè)點(diǎn)選擇框，選中真實(shí)源，找到單點(diǎn)溫度點(diǎn)位
zkup/esp1.temp1，單擊選擇圓形按鈕，彈窗小時(shí)候，點(diǎn)擊添加按鈕 此時(shí)點(diǎn)擊實(shí)時(shí)預(yù)覽，觀察數(shù)據(jù)是否綁定成功
如果由
Text變?yōu)閿?shù)字，則說(shuō)明數(shù)據(jù)更新成功，此時(shí)可以用手捂住傳感器，觀察數(shù)據(jù)變化
6. 使用Echarts圖表，實(shí)現(xiàn)趨勢(shì)曲線綁定顯示
頂部功能欄切換到圖表，拖拽折線圖到畫(huà)布上并選中折線圖。
按照順序，點(diǎn)擊配置，測(cè)點(diǎn)選擇點(diǎn)擊添加，彈出面板勾選
zkup/esp1.temp1_100100個(gè)緩存值的序列數(shù)據(jù)，最后點(diǎn)擊完成
點(diǎn)擊
option配置，彈出代碼編輯框
如下圖所示，左側(cè)是靜態(tài)圖表數(shù)據(jù)，右側(cè)是會(huì)更新數(shù)據(jù)的腳本。
點(diǎn)擊右側(cè)
復(fù)制綁定數(shù)據(jù)測(cè)點(diǎn)代碼，將光標(biāo)移動(dòng)到數(shù)據(jù)更新腳本編輯器中，粘貼代碼
將左側(cè)
初始化參數(shù)腳本代碼貼入右側(cè)數(shù)據(jù)更新腳本，并稍作改造，代碼如下
// ? ? ? ? bindData["mq.zkup/esp1.temp1_100"].value bindData["mq.zkup/esp1.temp1_100"].time
var data = bindData["mq.zkup/esp1.temp1_100"].value;
option = {
?xAxis: {
? ?type: 'time'
?},
?yAxis: {
? ?type: 'value'
?},
?series: [
? ?{
? ? ?type: 'line',
? ? ?data: data
? ?}
?]
};
此時(shí)點(diǎn)擊報(bào)錯(cuò)配置，關(guān)閉腳本編輯器，點(diǎn)擊實(shí)時(shí)預(yù)覽，觀察曲線變化
7. 實(shí)現(xiàn)簡(jiǎn)單的開(kāi)關(guān)控制
拖拽如圖所示的兩個(gè)圖形作為開(kāi)關(guān)按鈕，選中開(kāi)啟按鈕方框元素，右側(cè)切換到動(dòng)畫(huà)，添加動(dòng)畫(huà)，添加事件動(dòng)畫(huà)
按照如圖所示進(jìn)行選擇，到目標(biāo)數(shù)據(jù)源停下，進(jìn)行發(fā)送數(shù)據(jù)腳本編寫
發(fā)送數(shù)據(jù)腳本編輯器內(nèi)容填寫如下，保存更改后，點(diǎn)擊添加完成 第一個(gè)按鈕的開(kāi)啟控制
return {
?name: 'MQTT',
?data: {
? ?topic: 'zkDown/esp1/switch_1',
? ?value: 1
?}
}
關(guān)閉按鈕的操作和開(kāi)啟按鈕內(nèi)容一致，僅在發(fā)送數(shù)據(jù)腳本中，將1改為0，代碼如下
return {
?name: 'MQTT',
?data: {
? ?topic: 'zkDown/esp1/switch_1',
? ?value: 0
?}
}
此時(shí)，就完成了按鈕的分開(kāi)控制，可以在實(shí)時(shí)預(yù)覽中進(jìn)行按鈕點(diǎn)擊測(cè)試
8. 實(shí)現(xiàn)帶有狀態(tài)同步的單按鈕切換開(kāi)關(guān)控制
共享資源搜索按鈕，找到兩個(gè)相同類型，不同顏色的按鈕，拖拽紅色關(guān)閉按鈕到畫(huà)布上
1. 添加狀態(tài)監(jiān)聽(tīng)的動(dòng)畫(huà)，實(shí)現(xiàn)自動(dòng)按鈕切換，多用戶同時(shí)響應(yīng)變化
選中紅色按鈕，添加
補(bǔ)間動(dòng)畫(huà)啟動(dòng)和停止條件都設(shè)置為
數(shù)據(jù)閾值啟動(dòng)、數(shù)據(jù)閾值停止，測(cè)點(diǎn)選擇都選擇
zkup/esp1.switch_11號(hào)開(kāi)關(guān)的狀態(tài)匯報(bào)測(cè)點(diǎn)啟動(dòng)條件（圖片由紅色按鈕切換成綠色按鈕的條件）寫入
x === 1啟動(dòng)條件（圖片由綠色按鈕切換成紅色按鈕的條件）寫入
x === 0執(zhí)行動(dòng)作選擇圖片切換
圖片標(biāo)識(shí)，右鍵共享資源中的綠色按鈕，點(diǎn)擊
復(fù)制圖片標(biāo)識(shí)，粘貼入輸入框中點(diǎn)擊添加，完成狀態(tài)變化動(dòng)畫(huà)添加，
點(diǎn)擊預(yù)覽，測(cè)試上一步添加的開(kāi)啟關(guān)閉方框按鈕，查看紅色按鈕的同步變化
2. 添加點(diǎn)擊事件，實(shí)現(xiàn)單按鈕點(diǎn)擊切換動(dòng)畫(huà)
繼續(xù)點(diǎn)擊
添加動(dòng)畫(huà)選擇
事件動(dòng)畫(huà)啟動(dòng)條件和停止條件都設(shè)置為
動(dòng)作條件啟動(dòng)/停止動(dòng)作設(shè)置，都設(shè)置為
鼠標(biāo)單擊執(zhí)行動(dòng)作選擇
自定義事件啟動(dòng)腳本和停止腳本都寫入如下代碼
const data = {
?name: 'MQTT',
?data: {
? ?topic: 'zkDown/esp1/switch_1',
? ?// 全局函數(shù)獲取該開(kāi)關(guān)的當(dāng)前狀態(tài)，如果是開(kāi)的狀態(tài)，則點(diǎn)擊時(shí)，發(fā)送關(guān)閉的信息
? ?value: window.global.source.getData('mq', 'zkup/esp1.switch_1').value === 0 ? 1: 0
?}
}
window.global.socket.sendData('mq', data)
window.global.socket.sendData('qy1', data)
點(diǎn)擊添加，在預(yù)覽窗口進(jìn)行測(cè)試
保存圖紙，進(jìn)行云部署后，在多個(gè)網(wǎng)頁(yè)中進(jìn)行查看同步變化
左鍵單擊保存的圖紙，彈出框中開(kāi)啟云部署，保存更新
再次單擊保存的圖紙，彈出框中出現(xiàn)訪問(wèn)地址，點(diǎn)擊，即可遠(yuǎn)程訪問(wèn)
打開(kāi)多個(gè)頁(yè)面，觀察同步相應(yīng)
9. 拔掉ESP8266電源，觀察設(shè)備離線狀態(tài)標(biāo)志
至此全部完成，如果在ZK-VIEW使用過(guò)程中有問(wèn)題，歡迎。
ZK-VIEW網(wǎng)站地址：
教程地址：
更多大屏案例：
綜合能耗監(jiān)控分析系統(tǒng)
智慧水務(wù)綜合管控平臺(tái)
數(shù)字智慧園區(qū)監(jiān)控平臺(tái)
地鐵大數(shù)據(jù)管理可視化中心
綜合能源監(jiān)控中心
電廠關(guān)鍵區(qū)域智能機(jī)器人巡檢系統(tǒng)
電廠循環(huán)水監(jiān)視系統(tǒng)
