-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
286 lines (265 loc) · 11.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-sdk-test</title>
<script src="/static/jquery.min.js"></script>
<script src="/static/jquery.cookie.min.js"></script>
<script src="/src/gizwits_ws_0.2.0.min.js"></script>
<script type="text/javascript">
var gizwitsws;
$(document).ready(setDefault);
function setDefault()
{
$('#apiHost').val($.cookie('apiHost'));
$('#commType').val($.cookie('commType'));
$('#wechatOpenId').val($.cookie('wechatOpenId'));
$('#gizwitsAppId').val($.cookie('gizwitsAppId'));
}
function newObj()
{
if (gizwitsws != null)
{
alert("对象已被初始化，如需改变参数，请刷新页面.");
return;
}
var apiHost = $('#apiHost').val();
var commType = $('#commType').val();
var wechatOpenId = $('#wechatOpenId').val();
var gizwitsAppId = $('#gizwitsAppId').val();
gizwitsws = new GizwitsWS(apiHost, wechatOpenId, gizwitsAppId, commType);
gizwitsws.onInit = onInit;
gizwitsws.onConnected = onConnected;
gizwitsws.onOnlineStatusChanged = onOnlineStatusChanged;
gizwitsws.onReceivedRaw = onReceivedRaw;
gizwitsws.onReceivedAttrs = onReceivedAttrs;
gizwitsws.onError = onError;
$.cookie('apiHost', apiHost);
$.cookie('commType', commType);
$.cookie('wechatOpenId', wechatOpenId);
$.cookie('gizwitsAppId', gizwitsAppId);
showScreen("初始化对象成功!");
}
function init()
{
gizwitsws.init();
conndids = [];
showScreen("已发送init指令!");
}
function connect()
{
var did = $('#did').val();
gizwitsws.connect(did);
showScreen("已发送connect指令!");
}
function read()
{
var did = $('#readDid').val();
gizwitsws.read(did);
showScreen("已发送read指令!");
}
function writeCommand()
{
var did = $('#writeDid').val();
if ($('#commType').val() == "attrs_v4")
{
var attrs = $('#command').val();
try
{
gizwitsws.write(did, JSON.parse(attrs));
showScreen("已对设备" + did + "发送write指令: " + attrs);
}
catch(e)
{
showError("数据格式错误：" + e);
}
}
else
{
var raw = $('#command').val();
try
{
gizwitsws.send(did, JSON.parse(raw));
showScreen("已对设备" + did + "发送raw指令: " + raw);
}
catch(e)
{
showError("数据格式错误：" + e);
}
}
}
function clearLog()
{
$('#log').html("");
}
//=========================================================
// callback functions
//=========================================================
function onInit(devices)
{
if (devices.length == 0)
{
showScreen("没有绑定的设备");
}
else
{
for (var i = 0; i < devices.length; i++)
{
showScreen("==================================================");
showScreen("已绑定设备，did=" + devices[i].did);
showScreen("已绑定设备，mac=" + devices[i].mac);
showScreen("已绑定设备，product_key=" + devices[i].product_key);
showScreen("已绑定设备，is_online=" + devices[i].is_online);
showScreen("已绑定设备, dev_alias=" + devices[i].dev_alias);
showScreen("已绑定设备，remark=" + devices[i].remark);
addSelectOption('#did', devices[i].did, devices[i].did);
}
}
}
function onConnected(did)
{
addSelectOption('#readDid', did, did);
addSelectOption('#writeDid', did, did);
showScreen("与设备:" + did + "连接成功!");
}
function onOnlineStatusChanged(value)
{
showScreen("设备上下线通知，did=" + value.did);
showScreen("设备上下线通知，is_online=" + value.is_online);
}
function onReceivedRaw(value)
{
var str = "收到设备" + value.did + "的Raw: [";
for (var i = 0; i < value.raw.length; i++)
{
str = str + value.raw[i] + ",";
}
str = str.substr(0, str.length-1) + "]";
showScreen(str);
}
function onReceivedAttrs(value)
{
var str = "收到设备" + value.did + "的Attrs: ";
for (var key in value.attrs)
{
str = str + key + ":" + value.attrs[key] + "; ";
}
showScreen(str);
}
function onError(value)
{
showError(value.toString());
}
//=========================================================
// inner functions
//=========================================================
function showScreen(txt)
{
$('#log').prepend('<p style="color: blue">' + txt + '</p>');
}
function showError(txt)
{
$('#log').prepend('<p style="color: red">' + txt + '</p>');
}
function addSelectOption(selectId, value, text)
{
if ($(selectId + ' option[value =' + value + ']').length == 0)
{
$(selectId).append("<option value=" + value + ">" + text + "</option>");
}
}
</script>
</head>
<body>
<h3>Gizwits-Javascript-SDK Example</h3>
<p>（请使用Chrome、Firefox等支持Websocket功能的浏览器，低版本IE或Firefox存在不兼容的情况）</p>
<hr/>
<table border="0" cellpadding="0", cellspacing="0">
<tr>
<td align="left" valign="top" style="border-right: #d0d0d0 1px solid; padding: 0 10px 0 0;">
<h4>1. 首先，请初始化GizwitsWS对象</h4>
<table border="0" cellpadding="0", cellspacing="2">
<tr>
<td align="left" valign="top">
<label>apiHost:</label>
</td>
<td align="left" valign="top">
<input type="text" id="apiHost" value="" size="30" placeholder="input like: api.gizwits.com" />
</td>
<td align="left" valign="top">
<label style="font-size: small">机智云OpenApi域名</label>
</td>
</tr>
<tr>
<td align="left" valign="top">
<label>commType:</label>
</td>
<td align="left" valign="top">
<select id="commType" about="">
<option value="custom">custom</option>
<option value="attrs_v4" selected="selected">attrs_v4</option>
</select>
</td>
<td align="left" valign="top">
<label style="font-size: small">协议格式，custom：自定义协议；attrs_v4：标准数据点协议</label>
</td>
</tr>
<tr>
<td align="left" valign="top">
<label>wechatOpenId:</label>
</td>
<td align="left" valign="top">
<input type="text" id="wechatOpenId" value="" size="30" placeholder="wx001" />
</td>
<td align="left" valign="top">
<label style="font-size: small">微信用户OpenId</label>
</td>
</tr>
<tr>
<td align="left" valign="top">
<label>gizwitsAppId:</label>
</td>
<td align="left" valign="top">
<input type="text" id="gizwitsAppId" value="" size="30" placeholder="60d9d45a420b4f539434adb127fe5e5e" />
</td>
<td align="left" valign="top">
<label style="font-size: small">机智云平台应用标识</label>
</td>
</tr>
</table>
<br/>
<button id="newObj" onclick="newObj()">Do it!</button>
<br/>
<p>（初始化对象的过程中，已经自动完成了callback函数的创建。）</p>
<h4>2. 然后，使用GizwitsWS.init()获取绑定列表</h4>
<button id="init" onclick="init()">Do it!</button>
<br/>
<p>（绑定列表会在onInit这个callback函数返回。）</p>
<h4>3. 接着，选择一个设备，创建websocket连接</h4>
<label style="display:inline-block;width: 90px">did:</label><select id="did" about="" style="width: 300px;"></select>
<button id="connect" onclick="connect()">Do it!</button>
<br/>
<p>（websocket创建成功，会回调函数onConnected。）</p>
<h4>4. 选择已连接设备，读取状态</h4>
<label style="display:inline-block;width: 90px">did:</label><select id="readDid" about="" style="width: 300px;"></select>
<button id="read" onclick="read()">Do it!</button>
<br/>
<p>（发送指令成功后，稍后会收到设备状态信息。）</p>
<h4>5. 选择已连接设备，控制一下</h4>
<label style="display:inline-block;width: 90px">did:</label><select id="writeDid" about="" style="width: 300px;"></select>
<br/>
<label>command:</label><br/>
<textarea rows="10" cols="90" id="command" placeholder='如果commType=custom，请输入p0，例如[<byte>,<byte>,<byte>...]；如果commType=attrs_v4，请输入datapoints，例如{"power":true}'></textarea>
<br/>
<button id="write" onclick="writeCommand()">Do it!</button>
<br/>
<p>（发送指令成功后，稍后会收到设备状态信息。）</p>
</td>
<td align="left" valign="top" style="padding: 0 0 0 10px;">
<button id="clear" onclick="clearLog();" >clear</button><br/>
<span id="log"></span>
</td>
</tr>
</table>
</body>
</html>