Ergänzt das jQueryMobile Beispiel um die Fehlenden Aktoren wie LED 3 und Servo 2.
Fork of RPCHTTPServerVariable by
Web-APP/index.html
- Committer:
- stefan1691
- Date:
- 2015-05-27
- Revision:
- 15:c86c3997f833
- Parent:
- 13:596ff8317448
File content as of revision 15:c86c3997f833:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="author" content="Marcel Bernet, Zuerich"> <title>mbed Web-App</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> </head> <body> <form> <div data-role="page" id="page-index" data-title="mbed App"> <div data-role="header" class="ui-header ui-bar-c"> <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a> <h1>mbed Web-App</h1> <img src="./img/logo.png" width="30" class="ui-btn-right" /> </div> <div data-role="content"> <div class="ui-field-contain"> <label for="led-1">LED 1</label> <select name="led1" id="led1" data-role="slider"> <option value="Off">Off</option> <option value="On">On</option> </select> </div> <div class="ui-field-contain"> <label for="led-2">LED 2</label> <select name="led2" id="led2" data-role="slider"> <option value="Off">Off</option> <option value="On">On</option> </select> </div> <div class="ui-field-contain" id="led3f"> <label for="led-3">led3:</label> <input name="led3" id="led3" type="range" min="0" max="100" value="50"> </div> <div class="ui-field-contain" id="servo1f"> <label for="servo-1">Servo 1:</label> <input name="servo1" id="servo1" type="range" min="0" max="100" value="50"> </div> <div class="ui-field-contain" id="servo2f"> <label for="servo-2">Servo 2:</label> <input name="servo2" id="servo2" type="range" min="0" max="100" value="50"> </div> </div> </div> <script type="text/javascript"> var server="http://10.10.32.27/rpc/"; $('select#led1').change(function() { var myswitch = $(this); var name = myswitch[0].name; var url = myswitch[0].selectedIndex == 1 ? server + name + '/write 1' : server + name + '/write 0'; $.get( url ); }); $('select#led2').change(function() { var myswitch = $(this); var name = myswitch[0].name; var url = myswitch[0].selectedIndex == 1 ? server + name + '/write 1' : server + name + '/write 0'; $.get( url ); }); $("#led3f").on("slidestop", "#led3", function(event) { var val = $(this).val() / 100.0; $.get( server + 'led3/write ' + val ); console.log( server + 'led3/write ' + val ); }); $("#servo1f").on("slidestop", "#servo1", function(event) { var val = $(this).val() / 100.0; $.get( server + 'servo1/write ' + val ); console.log( server + 'servo1/write ' + val ); }); $("#servo2f").on("slidestop", "#servo2", function(event) { var val = $(this).val() / 100.0; $.get( server + 'servo2/write ' + val ); console.log( server + 'servo2/write ' + val ); }); </script> </form> </body> </html>