在上一节中，我们使用Wemos D1连接Tlink云服务器。本节我们开始使用Tlink平台来创建一个可视化监控页面。

1.设计云端可视化页面

1.编辑设备信息

在设计可视化页面之前，需要将开关修改为用户可操作的开关类型，即用户可以在平台上点击开关并发出命令。

编辑设备：

将开关设置为可操作类型

可以看到此时开关显示为开关按钮，可以通过按钮发出命令。

通过建立连接进入如下页面：

然后设置开关传感器发出开关指令，如{“switch”:1}，{“switch”:0}

2.设计云配置

创建新的云配置：

添加一个开关：

添加表盘：

设置开关参数：

设置拨号参数：

保存后预览

预览效果：

2.修改设备代码

代码：

#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 端口=8647;const char * 主机='tcp.tlink.io'; //ip 或dnsWiFiClient 客户端； //创建tcp客户端连接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;}//复位或上电后运行一次on :void setup() { //此处添加初始化相关代码，仅运行一次： Serial.begin (115200); WiFi.模式(WIFI_STA); WiFi.开始（ssid，密码）； Serial.println('正在连接路由器.'); //等待wifi连接成功while (WiFi.status() !=WL_CONNECTED ) { Serial.print('.');延迟（500）； } Serial.println(''); Serial.print('WiFi已连接，本地IP地址：'); Serial.println(WiFi.localIP());延迟（500）； Serial.print('连接到'); Serial.println(主机); if (!client.connect(host, port)) { Serial.println('连接失败'); Serial.println('等待5 秒.');延迟（5000）；返回； }else { Serial.println('连接tcp服务器成功。'); Serial.println('将此数据发送到tcp服务器');客户端.print(DEVICE_ID);延迟（500）；客户端.print(DEVICE_DATA); //每30 秒调用一次time_coming_cicyle_cb tk.attach(5, time_coming_cicyle_cb); }} void 循环() { if (1==heartbeart_flag) { if (temp_value=30) { temp_value=20; } else { 临时值=临时值+ 1; } switch_value=!switch_value; sprintf(send_data, '#%d,%d#', temp_value, switch_value);客户端.print(send_data); Serial.print('发送数据：'); Serial.println(send_data); heartbeart_flag=0； } 字符串recv_data=client.readString(); //client.readStringUntil('\r'); if (recv_data !=NULL) { Serial .print('接收数据： '); Serial.println(recv_data); }delay(20);} 与上一篇文章相比，主要增加了以下代码：

if (1==heartbeart_flag) { if (temp_value=30) { temp_value=20; } else { 临时值=临时值+ 1; } switch_value=!switch_value; sprintf(send_data, '#%d,%d#', temp_value, switch_value );客户端.print(send_data); Serial.print('发送数据：'); Serial.println(send_data); heartbeart_flag=0；将上一篇文章从每5秒发送一次心跳改为发送一次数据，并且温度值在20-30之间变化，并且每次切换值都取反。这样可以解决云设备状态显示异常的问题。

3. 操作

将设备端代码下载到wemos D1中，设备开始联网并每5秒发送一次本地数据。

可以看到，每发送一次数据，温度就加1，开关值就取反。

云显示如下：

点击切换按钮：

点击开关后，设备从云端接收数据。