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 © 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();