Cordova IOT Lesson003
作者：互联网
bot
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Arduino蓝牙机械昆虫控制器</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> 8 </head> 9 <body> 10 11 <div data-role="page" id="controller" data-theme="b"> 12 13 <div data-role="header"> 14 <h1>机械昆虫控制器</h1> 15 </div><!-- /header --> 16 17 <div data-role="content" class="ui-content"> 18 <div id="btPanel"> 19 <ul data-role="listview" id="btList"> 20 <li data-role="list-divider">蓝牙设备</li> 21 </ul> 22 <div style="margin: 10px"> 23 <a href="#" id="refreshBtn" data-role="button" data-inline="true" data-icon="refresh">刷新</a> 24 </div> 25 </div> 26 <div id="botPanel"> 27 <a href="#" id="forwardBtn" class="ui-btn ui-corner-all ui-icon-arrow-u ui-btn-icon-top ui-shadow-icon">前进</a> 28 <div class="ui-grid-b"> 29 <div class="ui-block-b"><a href="#" id="leftBtn" class="ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-top ui-shadow-icon">左转</a></div> 30 <div class="ui-block-b"><a href="#" id="stopBtn" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-top ui-shadow-icon">停止</a></div> 31 <div class="ui-block-b"><a href="#" id="rightBtn" class="ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-top ui-shadow-icon">右转</a></div> 32 </div> 33 <a href="#" id="backBtn" class="ui-btn ui-corner-all ui-icon-arrow-d ui-btn-icon-top ui-shadow-icon">后退</a> 34 35 <p> 36 <a href="#" id="disconnectBtn" data-role="button" data-inline="true" data-icon="delete">中断蓝牙连接</a> 37 </p> 38 </div> 39 40 <div id="msg"></div> 41 </div><!-- /content --> 42 43 <div data-role="footer" data-position="fixed"> 44 © 2015 swf.com.tw 45 </div> 46 </div> 47 <script src="js/jquery-2.1.3.min.js"></script> 48 <script src="js/jquery.mobile-1.4.5.min.js"></script> 49 <script src="cordova.js"></script> 50 <script src="js/index.js"></script> 51 <script type="text/javascript"> 52 app.init(); 53 </script> 54 </body> 55 </html>
index.js
1 var app = {
2 init: function() {
3 $(document).on('deviceready', app.onDeviceReady);
4 $('#botPanel').hide();
5 },
6 onDeviceReady: function() {
7 app.listBT();
8
9 $(document).on('tap', '.BTitem', function () {
10 var bt = $(this).attr('data-mac');
11 // 设置在msgDiv显示4秒钟文本
12 app.showMsg("与设备连接中…");
13 bluetoothSerial.connect(bt, app.onConnect, app.onDisconnect);
14 });
15
16 $('#refreshBtn').on('tap', function(e) {
17 e.preventDefault();
18
19 app.listBT();
20 });
21
22 $('#disconnectBtn').on('tap', function(e) {
23 e.preventDefault();
24
25 // // 设置在msgDiv显示4秒钟文本
26 app.showMsg("中断连接中…");
27 bluetoothSerial.disconnect(app.onDisconnect);
28 });
29
30 $('#forwardBtn').on('tap', function () {
31 bluetoothSerial.write('w');
32 app.showMsg("送出数据： w");
33 });
34
35 $('#leftBtn').on('tap', function () {
36 bluetoothSerial.write('a');
37 app.showMsg("送出数据： a");
38 });
39
40 $('#rightBtn').on('tap', function () {
41 bluetoothSerial.write('d');
42 app.showMsg("送出数据： d");
43 });
44
45 $('#stopBtn').on('tap', function () {
46 bluetoothSerial.write('s');
47 app.showMsg("送出数据： s");
48 });
49
50 $('#backBtn').on('tap', function () {
51 bluetoothSerial.write('x');
52 app.showMsg("送出数据： x");
53 });
54
55 },
56 onConnect: function() {
57 $('#btPanel').hide(200);
58 $('#botPanel').show(200);
59 app.showMsg("已连接");
60 },
61 onDisconnect: function() {
62 $('#btPanel').show(200);
63 $('#botPanel').hide(200);
64 app.showMsg("已断线");
65 },
66 timeoutId: 0,
67 showMsg: function(msg) {
68 if (app.timeoutId) {
69 clearTimeout(app.timeoutId);
70 }
71 $('#msg').text(msg);
72 app.timeoutId = setTimeout(function() { $('#msg').text(""); }, 4000);
73 },
74
75 listBT: function() {
76 // 设置在msgDiv显示4秒钟文本
77 app.showMsg("探寻蓝牙设备…");
78
79 bluetoothSerial.list(app.onListBT, function() {
80 app.showMsg("探寻蓝牙设备时出现问题…");
81 });
82 },
83
84 onListBT: function(devices) {
85 var listItem, mac;
86
87 $('#btList').html('<li data-role="list-divider">蓝牙设备</li>');
88 app.showMsg("");
89
90 devices.forEach(function(bt) {
91 if (bt.hasOwnProperty("address")) {
92 mac = bt.address;
93 } else {
94 mac = "出错了：" + JSON.stringify(bt);
95 }
96 // 标准设置标签属性的语法
97 listItem = $('<li class="BTitem"></li>')
98 .attr({ 'data-mac' : mac })
99 .html('<a href="#"><img src="img/bluetooth.png" class="ui-li-icon">'
100 + bt.name + "<br/><i>" + mac + "</i></a>");
101 $('#btList').append(listItem);
102 $("#btList").listview("refresh");
103 });
104
105 if (devices.length === 0) {
106 app.showMsg("请先配对好蓝牙设备。");
107 } else {
108 app.showMsg("找到 " + devices.length + " 个蓝牙设备。");
109 }
110 }
111 };
LED
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=UTF-8" /> 5 <meta name = "format-detection" content = "telephone=no"/> 6 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> 7 <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"> 8 <title>LED开关</title> 9 </head> 10 <body> 11 <div data-role="page"> 12 <div data-role="header"> 13 <h1>LED开关</h1> 14 </div> 15 16 <div data-role="content"> 17 <div id="btPanel"> 18 <ul data-role="listview" id="btList"> 19 <li data-role="list-divider">蓝牙设备</li> 20 </ul> 21 <div style="margin: 10px"> 22 <a href="#" id="refreshBtn" data-role="button" data-inline="true" data-icon="refresh">刷新</a> 23 </div> 24 </div> 25 26 <div id="ledPanel"> 27 <div class="ui-field-contain"> 28 <label for="ledSW">LED开关：</label> 29 <select name="ledSW" id="ledSW" data-role="slider"> 30 <option value="0">OFF</option> 31 <option value="1">ON</option> 32 </select> 33 </div> 34 35 <p> 36 <a href="#" id="disconnectBtn" data-role="button" data-inline="true" data-icon="delete">中断蓝牙连接</a> 37 </p> 38 </div> 39 40 <div id="msg"> 41 </div> 42 </div> 43 </div> 44 <script src="js/jquery-1.11.3.min.js"></script> 45 <script src="js/jquery.mobile-1.4.5.min.js"></script> 46 <script src="cordova.js"></script> 47 <script src="js/index.js"></script> 48 <script type="text/javascript"> 49 app.init(); 50 </script> 51 </body> 52 </html>
index.js
1 var app = {
2 init: function() {
3 $(document).on('deviceready', app.onDeviceReady);
4 $('#ledPanel').hide();
5 },
6 onDeviceReady: function() {
7 app.listBT();
8
9 $(document).on('tap', '.BTitem', function () {
10 var bt = $(this).attr('data-mac');
11 // 设置在msgDiv显示4秒钟文本
12 app.showMsg("与设备连接中…");
13 bluetoothSerial.connect(bt, app.onConnect, app.onDisconnect);
14 });
15
16 // 创建所有按钮的事件处理程序：
17 // 连接蓝牙设备
18 // 「刷新」钮
19 // 「中断蓝牙连接」钮
20 // 「LED开关」
21 $('#refreshBtn').on('tap', function(e) {
22 e.preventDefault();
23
24 app.listBT();
25 });
26
27 $('#disconnectBtn').on('tap', function(e) {
28 e.preventDefault();
29
30 // // 设置在msgDiv显示4秒钟文本
31 app.showMsg("中断连接中…");
32 bluetoothSerial.disconnect(app.onDisconnect);
33 });
34
35 $('#ledSW').on('change', function () {
36 var data = $(this).val();
37 bluetoothSerial.write(data);
38 app.showMsg("送出数据： " + data);
39 });
40
41 },
42 onConnect: function() {
43 $('#btPanel').hide(200);
44 $('#ledPanel').show(200);
45 app.showMsg("已连接");
46 },
47 onDisconnect: function() {
48 $('#btPanel').show(200);
49 $('#ledPanel').hide(200);
50 app.showMsg("已断线");
51 },
52 timeoutId: 0,
53 showMsg: function(msg) {
54 if (app.timeoutId) {
55 clearTimeout(app.timeoutId);
56 }
57 $('#msg').text(msg);
58 app.timeoutId = setTimeout(function() { $('#msg').text(""); }, 4000);
59 },
60
61 listBT: function() {
62 // 设置在msgDiv显示4秒钟文本
63 app.showMsg("探寻蓝牙设备…");
64
65 bluetoothSerial.list(app.onListBT, function() {
66 app.showMsg("探寻蓝牙设备时出现问题…");
67 });
68 },
69
70 onListBT: function(devices) {
71 var listItem, mac;
72
73 $('#btList').html('<li data-role="list-divider">蓝牙设备</li>');
74 app.showMsg("");
75
76 devices.forEach(function(bt) {
77 if (bt.hasOwnProperty("address")) {
78 mac = bt.address;
79 } else {
80 mac = "出错了：" + JSON.stringify(bt);
81 }
82 // 标准设置标签属性的语法
83 listItem = $('<li class="BTitem"></li>')
84 .attr({ 'data-mac' : mac })
85 .html('<a href="#"><img src="img/bluetooth.png" class="ui-li-icon">'
86 + bt.name + "<br/><i>" + mac + "</i></a>");
87 $('#btList').append(listItem);
88 });
89 $("#btList").listview("refresh");
90
91 if (devices.length === 0) {
92 app.showMsg("请先配对好蓝牙设备。");
93 } else {
94 app.showMsg("找到 " + devices.length + " 个蓝牙设备。");
95 }
96 }
97 };
motion
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <meta name = "format-detection" content = "telephone=no"/> 6 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> 7 <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"> 8 <title>加速度传感器</title> 9 </head> 10 <body> 11 <div data-role="page"> 12 <div data-role="header"> 13 <h1>加速度传感器</h1> 14 </div> 15 16 <div data-role="content"> 17 <div id="btPanel"> 18 <ul data-role="listview" id="btList"> 19 <li data-role="list-divider">蓝牙设备</li> 20 </ul> 21 <div style="margin: 10px"> 22 <a href="#" id="refreshBtn" data-role="button" data-inline="true" data-icon="refresh">刷新</a> 23 </div> 24 </div> 25 26 <div id="motionPanel"> 27 <div class="ui-field-contain"> 28 <label for="accSW">侦测加速度：</label> 29 <select name="accSW" id="accSW" data-role="slider"> 30 <option value="0">OFF</option> 31 <option value="1">ON</option> 32 </select> 33 </div> 34 <div id="accData"></div> 35 </div> 36 37 <div id="msg"> 38 </div> 39 </div> 40 </div> 41 <script src="cordova.js"></script> 42 <script src="js/jquery-1.11.3.min.js"></script> 43 <script src="js/jquery.mobile-1.4.5.min.js"></script> 44 <script src="js/index.js"></script> 45 </body> 46 </html>
index.js
1 var app = {
2 watchID:0,
3 timeoutId: 0,
4
5 init: function() {
6 $(document).on('deviceready', app.onDeviceReady);
7 $('#motionPanel').hide();
8 },
9 onDeviceReady: function() {
10 app.listBT();
11
12 $(document).on('tap', '.BTitem', function () {
13 var bt = $(this).attr('data-mac');
14 app.showMsg("与设备连接中…");
15 bluetoothSerial.connect(bt, app.onConnect, app.onDisconnect);
16 });
17
18 $('#refreshBtn').on('tap', function(e) {
19 e.preventDefault();
20
21 app.listBT();
22 });
23
24 $('#disconnectBtn').on('tap', function(e) {
25 e.preventDefault();
26
27 app.showMsg("中断连接中…");
28 bluetoothSerial.disconnect(app.onDisconnect);
29 });
30
31 $('#accSW').on('change', function () {
32 var data = $(this).val();
33 var motionOpt = {frequency:100};
34
35 if (data == '1') {
36 app.watchID = navigator.accelerometer.watchAcceleration(app.onMotionSuccess,
37 app.onMotionError,
38 motionOpt);
39 } else {
40 navigator.accelerometer.clearWatch(app.watchID);
41 }
42 });
43
44 },
45
46 onMotionSuccess: function(acc) {
47 var servo = {
48 x:Math.floor((acc.x + 10) * 9),
49 y:Math.floor((acc.y + 10) * 9)
50 };
51
52 var str = 'X: ' + acc.x + '<br>' +
53 'Y: ' + acc.y + '<br>' +
54 'Z: ' + acc.z + '<br>' +
55 '时间: ' + acc.timestamp + '<br><br>' +
56 '转换值：<br>' +
57 'Servo X: ' + servo.x + '<br>' +
58 'Servo Y: ' + servo.y;
59
60 $('#accData').html(str);
61 bluetoothSerial.write(servo.x + ',' + servo.y + '\n');
62 },
63
64 onMotionError: function() {
65 app.showMsg("无法读取加速度值…");
66 },
67
68 onConnect: function() {
69 $('#btPanel').hide(200);
70 $('#motionPanel').show(200);
71 app.showMsg("已连接");
72 },
73 onDisconnect: function() {
74 $('#btPanel').show(200);
75 $('#motionPanel').hide(200);
76 app.showMsg("已断线");
77 },
78
79 showMsg: function(msg) {
80 if (app.timeoutId) {
81 clearTimeout(app.timeoutId);
82 }
83 $('#msg').text(msg);
84 app.timeoutId = setTimeout(function() { $('#msg').text(""); }, 4000);
85 },
86
87 listBT: function() {
88 // 设置在msgDiv显示4秒钟文本
89 app.showMsg("探寻蓝牙设备…");
90
91 bluetoothSerial.list(app.onListBT, function() {
92 app.showMsg("探寻蓝牙设备时出现问题…");
93 });
94 },
95
96 onListBT: function(devices) {
97 var listItem, mac;
98
99 $('#btList').html('<li data-role="list-divider">蓝牙设备</li>');
100 app.showMsg("");
101
102 devices.forEach(function(bt) {
103 if (bt.hasOwnProperty("address")) {
104 mac = bt.address;
105 } else {
106 mac = "出错了：" + JSON.stringify(bt);
107 }
108 // 标准设置标签属性的语法
109 listItem = $('<li class="BTitem"></li>')
110 .attr({ 'data-mac' : mac })
111 .html('<a href="#"><img src="img/bluetooth.png" class="ui-li-icon">'
112 + bt.name + "<br/><i>" + mac + "</i></a>");
113 $('#btList').append(listItem);
114 });
115 $("#btList").listview("refresh");
116
117 if (devices.length === 0) {
118 app.showMsg("请先配对好蓝牙设备。");
119 } else {
120 app.showMsg("找到 " + devices.length + " 个蓝牙设备。");
121 }
122 }
123 };
124
125 app.init();
USBSerial
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <meta name = "format-detection" content = "telephone=no"/> 6 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> 7 <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css"> 8 <title>串口LED开关</title> 9 </head> 10 <body> 11 <div data-role="page"> 12 <div data-role="header"> 13 <h1>串口LED开关</h1> 14 </div> 15 16 <div data-role="content"> 17 <div id="serialPanel"> 18 <a href="#" id="openBtn" data-role="button" data-inline="true" data-icon="check">开启串口</a> 19 </div> 20 21 <div id="ledPanel"> 22 <div class="ui-field-contain"> 23 <label for="ledSW">LED开关：</label> 24 <select name="ledSW" id="ledSW" data-role="slider"> 25 <option value="0">OFF</option> 26 <option value="1">ON</option> 27 </select> 28 </div> 29 <p>模拟值：<span id="A0"></span></p> 30 <p> 31 <a href="#" id="closeBtn" data-role="button" data-inline="true" data-icon="delete">关闭串口</a> 32 </p> 33 </div> 34 35 <div id="msg"> 36 </div> 37 </div> 38 </div> 39 <script src="js/jquery-1.11.3.min.js"></script> 40 <script src="js/jquery.mobile-1.4.5.min.js"></script> 41 <script src="cordova.js"></script> 42 <script src="js/index.js"></script> 43 <script type="text/javascript"> 44 app.init(); 45 </script> 46 </body> 47 </html>
index.js
1 var app = {
2 init: function() {
3 $(document).on('deviceready', app.onDeviceReady);
4 $('#ledPanel').hide();
5 },
6 onDeviceReady: function() {
7 $('#openBtn').on('tap', function(e) {
8 e.preventDefault();
9 // 开启串口
10 serial.requestPermission(
11 function(msg) {
12 serial.open(
13 {baudRate: 9600},
14 // 开启串口成功
15 app.onOpen,
16 // 无法开启串口
17 app.showMsg("无法开启串行端口：" + msg)
18 );
19 },
20 app.showMsg("无法开启串行端口：" + msg)
21 );
22 });
23
24 $('#closeBtn').on('tap', function(e) {
25 e.preventDefault();
26
27 serial.close(app.onClose, app.showMsg("无法关闭串口：" + msg));
28 });
29
30 // throttle changes
31 $('#ledSW').on('change', function () {
32 var data = $(this).val();
33
34 serial.write(
35 data,
36 function(msg) {
37 app.showMsg(msg);
38 },
39 app.showMsg("数据传输错误： " + msg)
40 );
41 });
42
43 },
44 onOpen: function(msg) {
45 $('#serialPanel').hide(200);
46 $('#ledPanel').show(200);
47
48 var str = '';
49 serial.registerReadCallback(
50 function (data){
51 // 处理输入数据
52 var raw = new Uint8Array(data);
53 var total = raw.length; // 保存数组长度
54 for(var i=0; i < total; i++) {
55 if(raw[i] != 10) { // 若非 '\n' 字符编码……
56 var temp_str = String.fromCharCode(raw[i]);
57 str += temp_str;
58 } else {
59 $('#A0').text(str);
60 str = '';
61 }
62 }
63 },
64 app.showMsg(msg)
65 );
66 },
67 onClose: function(msg) {
68 $('#serialPanel').show(200);
69 $('#ledPanel').hide(200);
70 app.showMsg(msg);
71 },
72 timeoutId: 0,
73 showMsg: function(msg) {
74 if (app.timeoutId) {
75 clearTimeout(app.timeoutId);
76 }
77 $('#msg').text(msg);
78 app.timeoutId = setTimeout(function() { $('#msg').text(""); }, 4000);
79 }
80 };
wifiBot
index.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>灯光控制器</title>
6 <meta name="format-detection" content="telephone=no">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
9 <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
10 <script src="cordova.js"></script>
11 <script src="js/jquery-2.1.3.min.js"></script>
12 <script>
13 $(document).on('mobileinit', function() {
14 $.mobile.pushStateEnabled = false;
15 });
16 </script>
17 <script src="js/jquery.mobile-1.4.5.min.js"></script>
18 <script src="js/index.js"></script>
19 <style type="text/css">
20 #splashPage {
21 background-color:#fac800;
22 text-align: center;
23 }
24 #splashPage div h1 {
25 border-radius: 10px;
26 padding:10px 30px;
27 display:inline-block;
28 background-color:#fff;
29 margin-bottom:30px;
30 }
31 </style>
32 </head>
33 <body>
34 <!-- 起始画面 -->
35 <div data-role="page" id="splashPage">
36 <div role="main" class="ui-content">
37 <h1>网络灯光控制器</h1>
38 <img src="images/app_logo.svg" width="300" height="300">
39 </div>
40 </div>
41
42 <!-- 主控画面 --->
43 <div data-role="page" id="ctrlPage" data-theme="a">
44 <div data-role="header">
45 <h1>灯光控制器</h1>
46 <a href="#netPage" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear">网络设置</a>
47 </div>
48
49 <div role="main" class="ui-content">
50 <div class="ui-field-contain">
51 <label for="ledSw">壁灯</label>
52 <select name="ledSw" id="ledSw" data-role="slider" data-mini="true">
53 <option value="0">关</option>
54 <option value="1">开</option>
55 </select>
56 </div>
57 <div class="ui-field-contain">
58 <label for="pwmSlider">台灯</label>
59 <input type="range" name="pwmSlider" id="pwmSlider" value="25" min="0" max="100" data-highlight="true">
60 </div>
61 <div id="msg"></div>
62 </div>
63
64 <div data-role="footer" data-position="fixed">
65 © 2016 swf.com.tw
66 </div>
67 </div>
68
69 <!-- "WiFi设置画面" -->
70 <div data-role="page" id="netPage" data-theme="a">
71 <div data-role="header">
72 <h1>网络链接设置</h1>
73 </div>
74
75 <div role="main" class="ui-content">
76 <form>
77 <label for="deviceIP">设备IP地址或网域名称</label>
78 <input type="text" name="deviceIP" id="deviceIP" value="" placeholder="jarvis.local" data-clear-btn="true">
79 <label for="devicePort">设备端口号</label>
80 <input type="number" name="devicePort" id="devicePort" value="80" data-clear-btn="true">
81 </form>
82 <p><a href="#" id="saveBtn" class="ui-btn ui-corner-all ui-btn-b ui-btn-icon-left ui-icon-refresh ui-shadow-icon">保存设置</a></p>
83 <p><a href="#ctrlPage" class="ui-btn ui-shadow ui-corner-all ui-btn-b">回主控画面</a></p>
84
85 </div>
86 <div data-role="footer" data-position="fixed">
87 © 2016 swf.com.tw
88 </div>
89 </div>
90 </body>
91 </html>
index.js
1 var app = {
2 nextPage:"",
3 host:"",
4 port:80,
5 splashTime:3000,
6 init: function() {
7 $(document).on('deviceready', app.onDeviceReady);
8 },
9 onDeviceReady: function() {
10 $("#ledSw").on("change", function(e){
11 var val = $(this).val();
12 var swData = {"pin":13, "sw":val};
13 // 向第13脚送出开关信号
14 $.ajax({
15 url: "http://" + app.host + ":" + app.port + "/sw",
16 data: swData,
17 success: function( d ) {
18 app.showMsg("收到服务器回应：" + d );
19 }
20 });
21 });
22
23 $('#saveBtn').on('tap', function(){
24 app.host = $("#deviceIP").val();
25 app.port = $("#devicePort").val();
26 localStorage.setItem('deviceIP', app.host);
27 localStorage.setItem('devicePort', app.port);
28 location.hash = 'ctrlPage';
29 });
30 },
31 timeoutId: 0,
32 showMsg: function(msg) {
33 if (app.timeoutId) {
34 clearTimeout(app.timeoutId);
35 }
36 $('#msg').text(msg);
37 app.timeoutId = setTimeout(function() { $('#msg').text(""); }, 4000);
38 },
39 splashTimer : function(){
40 setTimeout(function() {
41 // 进入下一页
42 location.hash = app.nextPage;
43 }, app.splashTime);
44 }
45 };
46
47 $(document).on("pageshow", "#ctrlPage", pageEvt);
48 function pageEvt (e) {
49 $( "#pwmSlider" ).on( "slidestop", function( e ) {
50 var pwm = Math.ceil($(this).val() * 2.55);
51 var pwmData = {"pin":9, "pwm":pwm};
52 // 向第9脚送出PWM信号
53 $.ajax({
54 url: "http://" + app.host + ":" + app.port + "/pwm",
55 data: pwmData,
56 success: function( d ) {
57 app.showMsg("收到服务器回应：" + d );
58 }
59 });
60 });
61
62 $(document).off("pageshow", "#ctrlPage", pageEvt);
63 }
64
65 $(document).on("pageshow", "#splashPage", function( e ) {
66 var host = localStorage.getItem('deviceIP');
67 if (host === null) {
68 app.nextPage = "netPage";
69 } else {
70 app.host = host;
71 app.port = localStorage.getItem('devicePort');
72 $("#deviceIP").val(app.host);
73 $("#devicePort").val(app.port);
74 app.nextPage = "ctrlPage";
75 }
76 // 启动计时器
77 app.splashTimer();
78 });
79
80 $(document).on('backbutton', function (e) {
81 var page = $('body').pagecontainer('getActivePage')[0].id;
82 if (page == 'ctrlPage'){
83 e.preventDefault();
84 navigator.notification.confirm( '啥?你要离开了?',
85 function (btn) {
86 if (btn == 1){
87 return false;
88 } else{
89 navigator.app.exitApp();
90 }
91 },
92 '关闭App', '取消,离开'
93 );
94 } else {
95 navigator.app.backHistory();
96 }
97 });
98
99 $(document).ajaxError(function(){
100 app.showMsg("连接出错了！");
101 navigator.notification.vibrate(1000);
102 });
103
104 app.init();
标签：function,app,IOT,Lesson003,var,mac,msg,Cordova,showMsg 来源： https://www.cnblogs.com/kingboy100/p/10403033.html