![v2-00ab0175d6409e396621125e9a9217df_1440w.jpg?source=172ae18b](http://img-01.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-00ab0175d6409e396621125e9a9217df_1440w.jpg?source=172ae18b)
前言
上一节,我们使用Wemos D1连接Tlink云服务器,本节,我们开始使用Tlink平台创建可视化监控页面。
一、设计云端可视化页面
1. 编辑设备信息
在设计可视化页面之前,需要修改下开关为开关类型,用户可操作,也就是说用户可以平台点击开关,下发命令。
编辑设备:
![v2-7353212134e8d53639fe618a31c36c23_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-7353212134e8d53639fe618a31c36c23_b.jpg)
将开关设置为可操作性的开类型
![v2-205e7d4b4950bd4de09c98bfbb60a2ea_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-205e7d4b4950bd4de09c98bfbb60a2ea_b.jpg)
可以看到此时开关显示为一个switch按钮,可以通过按钮下发命令
![v2-75ab1ee7003cbbc79652a680ad4de41a_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-75ab1ee7003cbbc79652a680ad4de41a_b.jpg)
通过设置连接进入如下页面:
然后设置开关传感器下发开和关的指令分别为{“switch”:1}、{“switch”:0}
![v2-764521e92410fcd62a6eb487405549fd_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-764521e92410fcd62a6eb487405549fd_b.jpg)
2. 设计云组态
新建云组态:
![v2-712c40d86cd11b60c21d10434de4abde_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-712c40d86cd11b60c21d10434de4abde_b.jpg)
增加一个开关:
![v2-62988a57790daa3144eae306e6a3f2fb_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic4.zhimg.com/v2-62988a57790daa3144eae306e6a3f2fb_b.jpg)
增加一个表盘:
![v2-43eeee359e7bba561470c60124ab2652_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-43eeee359e7bba561470c60124ab2652_b.jpg)
设置开关参数:
![v2-bb6ba63263249ebd236703928ea42502_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-bb6ba63263249ebd236703928ea42502_b.jpg)
设置表盘参数:
![v2-b33c92c8dc9bea6040117e18419b7b8d_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-b33c92c8dc9bea6040117e18419b7b8d_b.jpg)
保存后预览
![v2-745e121efea4e23b73cf59bc61a2ba98_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic1.zhimg.com/v2-745e121efea4e23b73cf59bc61a2ba98_b.jpg)
预览效果:
![v2-c0a195fb50927a425c04af29f19183da_b.jpg](http://img-02.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-c0a195fb50927a425c04af29f19183da_b.jpg)
二、修改设备端代码
代码:
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESP8266HTTPClient.h>
#include <Ticker.h>
#define DEVICE_ID "V36625K243D8ROR1"
#define DEVICE_DATA "#25,1#"
char* ssid = "lxy2305";
char* passwd = "123456789a";
const uint16_t port = 8647;
const char * host = "tcp.tlink.io"; // ip or dns
WiFiClient client;//创建一个tcp client连接
int heartbeart_flag = 0;
char send_data[32];
Ticker tk;
int temp_value = 25;
int switch_value = 0;
void time_coming_cicyle_cb(void)
{
heartbeart_flag = 1;
}
// 复位或上电后运行一次:
void setup() {
//在这里加入初始化相关代码,只运行一次:
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, passwd);
Serial.println("connecting to router... ");
//等待wifi连接成功
while (WiFi.status() != WL_CONNECTED) {
Serial.print(".");
delay(500);
}
Serial.println("");
Serial.print("WiFi connected, local IP address:");
Serial.println(WiFi.localIP());
delay(500);
Serial.print("connecting to ");
Serial.println(host);
if (!client.connect(host, port)) {
Serial.println("connection failed");
Serial.println("wait 5 sec...");
delay(5000);
return;
}else
{
Serial.println("connect to tcp server success.");
Serial.println("Send this data to tcp server");
client.print(DEVICE_ID);
delay(500);
client.print(DEVICE_DATA);
// call time_coming_cicyle_cb every 30s
tk.attach(5, time_coming_cicyle_cb);
}
}
void loop() {
if (1 == heartbeart_flag)
{
if (temp_value >= 30)
{
temp_value = 20;
}
else
{
temp_value = temp_value + 1;
}
switch_value = !switch_value;
sprintf(send_data, "#%d,%d#", temp_value, switch_value);
client.print(send_data);
Serial.print("send data : ");
Serial.println(send_data);
heartbeart_flag = 0;
}
String recv_data = client.readString(); // client.readStringUntil('r');
if (recv_data != NULL)
{
Serial.print("Receive data : ");
Serial.println(recv_data);
}
delay(20);
}
相校上一篇,主要增加了如下代码:
if (1 == heartbeart_flag)
{
if (temp_value >= 30)
{
temp_value = 20;
}
else
{
temp_value = temp_value + 1;
}
switch_value = !switch_value;
sprintf(send_data, "#%d,%d#", temp_value, switch_value);
client.print(send_data);
Serial.print("send data : ");
Serial.println(send_data);
heartbeart_flag = 0;
}
将上一篇的每隔5秒发送一次心跳,修改为发送一次数据,并且温度值在20-30变化,开关值每次取反,这样做可以解决云端设备状态显示异常问题。
三、运行
将设备端代码下载到wemos D1中,设备开始联网,并每隔5秒发送一次本地数据。
![v2-e57abb54cfa3bd438e31487550bdecf9_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-e57abb54cfa3bd438e31487550bdecf9_b.jpg)
可以看到,每次发送数据,温度加1,开关值取反。
云端显示如下:
![v2-2c10f79b26fb8602989f77be5982507e_b.jpg](http://img-03.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic3.zhimg.com/v2-2c10f79b26fb8602989f77be5982507e_b.jpg)
![v2-1438600cbcee97edeb22eecae6cba679_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-1438600cbcee97edeb22eecae6cba679_b.jpg)
点击开关按钮:
![v2-b3cc2824d1536490ccfbc7d3bca84f01_b.jpg](http://img-01.proxy.5ce.com/view/image?&type=2&guid=60049d56-5c2f-eb11-8da9-e4434bdf6706&url=https://pic2.zhimg.com/v2-b3cc2824d1536490ccfbc7d3bca84f01_b.jpg)
点击开关后,设备收到云端下发数据。
本文由一叶孤沙原创,欢迎关注,和我们一起成长!
寄语:世界上最远的距离是鱼与飞鸟的距离,一个在天上,一个却深浅海底!