标签：function app IOT Lesson003 var mac msg Cordova showMsg
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。