远程开关控制小应用

www.webdriver.top | 网页组态

webdriver.top是一个网页组态平台，提供c/c++/c#/js的sdk开发包，直接与网页界面实现交互控制。

创建一个网页页面，实现开关控制圆颜色变化

说明：
开关打开时，向后台服务发送“开”指令，后台控制圆的背景变为红色
开关关闭时，向后台服务发送“关”指令，后台控制圆的背景变为绿色

界面效果如下:

开发运行过程:

• 创建应用，编辑页面
• 创建后台项目，用C、C++、C#、JS均可，下载导入驱动库，按下面示例调用库接口函数
• 手机扫描页面二维码，显示页面，操作开关（或在浏览器上打开页面url）

基于C语言的SDK驱动

#include <windows.h>
#include <stdlib.h>
#include <stdio.h>
#include <string.h>
#include "webdriver.h"

#define Demo       "5b60145a28f32105d87da435"
#define Accesskey  "5b60145a28f32105d87da436"
#define Secretkey  "5b60145a28f32105d87da437"
#define HomePage   "5b60145a28f32105d87da438"
#define Button     "WDMAKARSNR"
#define Circle     "WDU9349VP6"

//接收到平台页面组件事件通知
void __stdcall fNoticeCallback(
	const char* appid, 
	const char* pageid, 
	const char* wid, 
	const char* name, 
	const char* sid, 
	const char* value, 
	void* user)
{
    if( strcmp(appid, Demo)      == 0 &&
        strcmp(pageid, HomePage) == 0 &&
        strcmp(wid, Button)      == 0 &&
        strcmp(name,"out")       == 0)
    {
        //接收到开关的输出通知
        if(atoi(value) == 1){
          //接收到开关的“开”指令，此处的处理是：让圆的背景变为红色
          wd_write(Demo, HomePage, Circle, "bg", "0", "red");
        }else{
          //接收到开关的“关”指令，此处的处理是：让圆的背景变为绿色
          wd_write(Demo, HomePage, Circle, "bg", "0", "green");
        }
    }
}

//SDK与平台中应用的连接状态通知
void __stdcall fConnectStateCallback(const char* appid, bool state){
    //state = true，表示连接成功；state = false，表示连接失败
    //TODO 此处添加处理
}

//主函数
int main()
{
    //连接应用
    wd_config(""); //为空表示连接云平台
    wd_connect(Demo, Accesskey, Secretkey, fNoticeCallback, fConnectStateCallback);	
    while(1){
    }
    return 0;
}

基于C++语言的SDK驱动

#include "stdafx.h"
#include "windows.h"
#include <string>
#include "webdriver_cpp.h"

std::string Demo       = "5b60145a28f32105d87da435"
std::string Accesskey  = "5b60145a28f32105d87da436"
std::string Secretkey  = "5b60145a28f32105d87da437"
std::string HomePage   = "5b60145a28f32105d87da438"
std::string Button     = "WDMAKARSNR"
std::string Circle     = "WDU9349VP6"

//接收到平台页面组件事件通知
void fNoticeCallback(
	const std::string& appid, 
	const std::string& pageid, 
	const std::string& wid, 
	const std::string& name, 
	const std::string& sid, 
	const std::string& value, 
	void* user)
{
    if( appid.compare(Demo)      == 0 &&
        pageid.compar(HomePage)  == 0 &&
        wid.compar(Button)       == 0 &&
        name.compar("out")       == 0)
    {
        //接收到开关的输出通知
        if(atoi(value) == 1){
          //接收到开关的“开”指令，此处的处理是：让圆的背景变为红色
          WEBDRIVER::CWebdriver::write(Demo, HomePage, Circle, "bg", "0", "red");
        }else{
          //接收到开关的“关”指令，此处的处理是：让圆的背景变为绿色
          WEBDRIVER::CWebdriver::write(Demo, HomePage, Circle, "bg", "0", "green");
        }
    }
}

//SDK与平台中应用的连接状态通知
void fConnectStateCallback(const std::string& appid, bool state){
    //state = true，表示连接成功；state = false，表示连接失败
    //TODO 此处添加处理
}

//主函数
int _tmain(int argc, _TCHAR* argv[])
{
    //连接应用
    WEBDRIVER::CWebdriver::config("");//为空表示连接云平台
    WEBDRIVER::CWebdriver::connect(Demo, Accesskey, Secretkey, fNoticeCallback, fConnectStateCallback);	
    while(1){
    }
    return 0;
}

基于C#语言的SDK驱动

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using wd;

static string Demo       = "5b60145a28f32105d87da435"
static string Accesskey  = "5b60145a28f32105d87da436"
static string Secretkey  = "5b60145a28f32105d87da437"
static string HomePage   = "5b60145a28f32105d87da438"
static string Button     = "WDMAKARSNR"
static string Circle     = "WDU9349VP6"

//接收到平台页面组件事件通知
static void fNoticeCallback(
	string appid, 
	string pageid, 
	string wid, 
	string name, 
	string sid, 
	string value, 
	IntPtr user)
{
    if( appid.CompareTo(Demo)       == 0 &&
        pageid.CompareTo(HomePage)  == 0 &&
        wid.CompareTo(Button)       == 0 &&
        name.CompareTo("out")       == 0)
    {
        //接收到开关的输出通知
        if(value == "1"){
          //接收到开关的“开”指令，此处的处理是：让圆的背景变为红色
          webdriver.write(Demo, HomePage, Circle, "bg", "0", "red");
        }else{
          //接收到开关的“关”指令，此处的处理是：让圆的背景变为绿色
          webdriver.write(Demo, HomePage, Circle, "bg", "0", "green");
        }
    }
}

//SDK与平台中应用的连接状态通知
void fConnectStateCallback(string appid, bool state){
    //state = true，表示连接成功；state = false，表示连接失败
    //TODO 此处添加处理
}

//主函数
static void Main(string[] args)
{
    //连接应用
    webdriver.config("");//为空表示连接云平台
    webdriver.connect(Demo, Accesskey, Secretkey, fNoticeCallback, fConnectStateCallback);	
    while(1){
    }
    return 0;
}

基于JS语言的SDK驱动

    var api = require('./api')

    var Demo      = "5b60145a28f32105d87da435"
    var Accesskey = "5b60145a28f32105d87da436"
    var Secretkey = "5b60145a28f32105d87da437"
    var HomePage  = "5b60145a28f32105d87da438"
    var Button    = "WDMAKARSNR"
    var Circle    = "WDU9349VP6"

    //接收到开关的输出通知
    var noticeCallback = function(appid, pageid, wid, name, sid, value){
        if(appid == Demo && pageid == HomePage && wid == Button && name == "out"){
            if(value == '1'){
                //接收到开关的“开”指令，此处的处理是：让圆的背景变为红色
                api.write(Demo, HomePage, Circle, "bg", "0", "red");
            }else{
                //接收到开关的“关”指令，此处的处理是：让圆的背景变为绿色
                api.write(Demo, HomePage, Circle, "bg", "0", "green");
            }
        }
    }

    //连接平台状态回调
    var connectStateCallback = function(appid, state){
        //state = 1，表示连接成功；state = 0，表示连接失败
        //TODO 此处添加处理
    }

    //连接平台
    var options = {
        serverip: '', //为空表示连接云平台
        appid: Demo,
        accesskey: Accesskey,
        secretkey: Secretkey,
        noticeCallback: noticeCallback,
        connectStateCallback: connectStateCallback
    }
    api.connect(options)  

步骤

创建应用

登录平台，在应用管理区域点击“创建应用”，输入“示例Demo”后点击“确定”

点击“编辑应用”，进入组态编辑器

从左侧“图形形状”组件箱中拖出“圆”组件，从“交互操作”组件箱中拖出“切换开关”组件，如图中放置

查看“圆”的ID和背景色变量

首先鼠标左键选中“圆”，然后点击右侧的“变量”属性按钮，显示变量属性框，如下图所示

将圆的ID号拷贝到驱动程序中使用，圆的背景颜色变量是“bg”，在驱动程序中来调用操作

查看“切换开关”的ID和输出变量

首先鼠标左键选中“切换开关”，然后点击右侧的“变量”属性按钮，显示变量属性框，如下图所示

将切换开关的ID号拷贝到驱动程序中使用，切换开关的输出变量是“out”，在驱动程序中来调用操作

查看“页面”的ID

驱动程序中，需要指明操作的应用、页面、组件和变量
点击编辑器左上角的“首页”，会下拉出页面列表，如下图所示，点击“编辑”按钮可查看页面ID号

查看“应用”的ID

在应用管理操作页面，鼠标移至刚刚创建的“示例Demo”应用上，会显示出“设置”按钮

点击弹出设置对话框，其中包含该应用的ID号

在线运行

在应用管理操作页面，鼠标移至刚刚创建的“示例Demo”应用上，会显示出“打开首页”按钮，点击运行即可在浏览器中打开刚刚创建的应用页面

SDK驱动

下载SDK开发包，用自己最熟悉的开发工具创建驱动，程序示例如前面所示。

必须确保运行驱动的电脑或设备能够联网