wemos D1 arduino项目实战3-Tlink平台web表盘监听数据

前言

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

一、设计云端可视化页面

1. 编辑设备信息

在设计可视化页面之前，需要修改下开关为开关类型，用户可操作，也就是说用户可以平台点击开关，下发命令。

编辑设备：

将开关设置为可操作性的开类型

可以看到此时开关显示为一个switch按钮，可以通过按钮下发命令

通过设置连接进入如下页面，然后设置开关传感器下发开和关的指令分别为{“switch”:1}、{“switch”:0}

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 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秒发送一次本地数据。

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

云端显示如下：

点击开关按钮：

点击开关后，设备收到云端下发数据。

四、结语

如您在使用过程中有任何问题，请加QQ群进一步交流。

QQ交流群：906015840 (备注：物联网项目交流)

公众号：物联网客栈，扫码关注，回复wemos即可。

一叶孤沙出品：一沙一世界，一叶一菩提