当前位置 : 主页 > 手机开发 > cordova >

Cordova IOT Lesson003

来源:互联网 收集:自由互联 发布时间:2021-06-10
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.mobil

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       &copy; 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           &copy; 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           &copy; 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();
网友评论