Ergänzt das jQueryMobile Beispiel um die Fehlenden Aktoren wie LED 3 und Servo 2.
Fork of RPCHTTPServerVariable by
Web-APP/index.html@13:596ff8317448, 2015-03-24 (annotated)
- Committer:
- marcel1691
- Date:
- Tue Mar 24 14:34:00 2015 +0000
- Revision:
- 13:596ff8317448
Dazugehoerende Web-APP
Who changed what in which revision?
User | Revision | Line number | New contents of line |
---|---|---|---|
marcel1691 | 13:596ff8317448 | 1 | <!DOCTYPE html> |
marcel1691 | 13:596ff8317448 | 2 | <html> |
marcel1691 | 13:596ff8317448 | 3 | <head> |
marcel1691 | 13:596ff8317448 | 4 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
marcel1691 | 13:596ff8317448 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
marcel1691 | 13:596ff8317448 | 6 | <meta name="author" content="Marcel Bernet, Zuerich"> |
marcel1691 | 13:596ff8317448 | 7 | <title>mbed Web-App</title> |
marcel1691 | 13:596ff8317448 | 8 | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> |
marcel1691 | 13:596ff8317448 | 9 | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> |
marcel1691 | 13:596ff8317448 | 10 | <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script> |
marcel1691 | 13:596ff8317448 | 11 | </head> |
marcel1691 | 13:596ff8317448 | 12 | <body> |
marcel1691 | 13:596ff8317448 | 13 | <form> |
marcel1691 | 13:596ff8317448 | 14 | <div data-role="page" id="page-index" data-title="mbed App"> |
marcel1691 | 13:596ff8317448 | 15 | |
marcel1691 | 13:596ff8317448 | 16 | <div data-role="header" class="ui-header ui-bar-c"> |
marcel1691 | 13:596ff8317448 | 17 | <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a> |
marcel1691 | 13:596ff8317448 | 18 | <h1>mbed Web-App</h1> |
marcel1691 | 13:596ff8317448 | 19 | <img src="./img/logo.png" width="30" class="ui-btn-right" /> |
marcel1691 | 13:596ff8317448 | 20 | </div> |
marcel1691 | 13:596ff8317448 | 21 | |
marcel1691 | 13:596ff8317448 | 22 | <div data-role="content"> |
marcel1691 | 13:596ff8317448 | 23 | |
marcel1691 | 13:596ff8317448 | 24 | <div class="ui-field-contain"> |
marcel1691 | 13:596ff8317448 | 25 | <label for="led-1">LED 1</label> |
marcel1691 | 13:596ff8317448 | 26 | <select name="led1" id="led1" data-role="slider"> |
marcel1691 | 13:596ff8317448 | 27 | <option value="Off">Off</option> |
marcel1691 | 13:596ff8317448 | 28 | <option value="On">On</option> |
marcel1691 | 13:596ff8317448 | 29 | </select> |
marcel1691 | 13:596ff8317448 | 30 | </div> |
marcel1691 | 13:596ff8317448 | 31 | <div class="ui-field-contain"> |
marcel1691 | 13:596ff8317448 | 32 | <label for="led-2">LED 2</label> <select name="led2" id="led2" data-role="slider"> |
marcel1691 | 13:596ff8317448 | 33 | <option value="Off">Off</option> |
marcel1691 | 13:596ff8317448 | 34 | <option value="On">On</option> |
marcel1691 | 13:596ff8317448 | 35 | </select> |
marcel1691 | 13:596ff8317448 | 36 | </div> |
marcel1691 | 13:596ff8317448 | 37 | <div class="ui-field-contain" id="led3f"> |
marcel1691 | 13:596ff8317448 | 38 | <label for="led-3">led3:</label> |
marcel1691 | 13:596ff8317448 | 39 | <input name="led3" id="led3" type="range" min="0" max="100" value="50"> |
marcel1691 | 13:596ff8317448 | 40 | </div> |
marcel1691 | 13:596ff8317448 | 41 | <div class="ui-field-contain" id="servo1f"> |
marcel1691 | 13:596ff8317448 | 42 | <label for="servo-1">Servo 1:</label> |
marcel1691 | 13:596ff8317448 | 43 | <input name="servo1" id="servo1" type="range" min="0" max="100" value="50"> |
marcel1691 | 13:596ff8317448 | 44 | </div> |
marcel1691 | 13:596ff8317448 | 45 | <div class="ui-field-contain" id="servo2f"> |
marcel1691 | 13:596ff8317448 | 46 | <label for="servo-2">Servo 2:</label> |
marcel1691 | 13:596ff8317448 | 47 | <input name="servo2" id="servo2" type="range" min="0" max="100" value="50"> |
marcel1691 | 13:596ff8317448 | 48 | </div> |
marcel1691 | 13:596ff8317448 | 49 | </div> |
marcel1691 | 13:596ff8317448 | 50 | </div> |
marcel1691 | 13:596ff8317448 | 51 | <script type="text/javascript"> |
marcel1691 | 13:596ff8317448 | 52 | var server="http://10.10.32.27/rpc/"; |
marcel1691 | 13:596ff8317448 | 53 | |
marcel1691 | 13:596ff8317448 | 54 | $('select#led1').change(function() |
marcel1691 | 13:596ff8317448 | 55 | { |
marcel1691 | 13:596ff8317448 | 56 | var myswitch = $(this); |
marcel1691 | 13:596ff8317448 | 57 | var name = myswitch[0].name; |
marcel1691 | 13:596ff8317448 | 58 | var url = myswitch[0].selectedIndex == 1 ? server + name + '/write 1' : server + name + '/write 0'; |
marcel1691 | 13:596ff8317448 | 59 | $.get( url ); |
marcel1691 | 13:596ff8317448 | 60 | }); |
marcel1691 | 13:596ff8317448 | 61 | $('select#led2').change(function() |
marcel1691 | 13:596ff8317448 | 62 | { |
marcel1691 | 13:596ff8317448 | 63 | var myswitch = $(this); |
marcel1691 | 13:596ff8317448 | 64 | var name = myswitch[0].name; |
marcel1691 | 13:596ff8317448 | 65 | var url = myswitch[0].selectedIndex == 1 ? server + name + '/write 1' : server + name + '/write 0'; |
marcel1691 | 13:596ff8317448 | 66 | $.get( url ); |
marcel1691 | 13:596ff8317448 | 67 | }); |
marcel1691 | 13:596ff8317448 | 68 | $("#led3f").on("slidestop", "#led3", function(event) |
marcel1691 | 13:596ff8317448 | 69 | { |
marcel1691 | 13:596ff8317448 | 70 | var val = $(this).val() / 100.0; |
marcel1691 | 13:596ff8317448 | 71 | $.get( server + 'led3/write ' + val ); |
marcel1691 | 13:596ff8317448 | 72 | console.log( server + 'led3/write ' + val ); |
marcel1691 | 13:596ff8317448 | 73 | }); |
marcel1691 | 13:596ff8317448 | 74 | $("#servo1f").on("slidestop", "#servo1", function(event) |
marcel1691 | 13:596ff8317448 | 75 | { |
marcel1691 | 13:596ff8317448 | 76 | var val = $(this).val() / 100.0; |
marcel1691 | 13:596ff8317448 | 77 | $.get( server + 'servo1/write ' + val ); |
marcel1691 | 13:596ff8317448 | 78 | console.log( server + 'servo1/write ' + val ); |
marcel1691 | 13:596ff8317448 | 79 | }); |
marcel1691 | 13:596ff8317448 | 80 | $("#servo2f").on("slidestop", "#servo2", function(event) |
marcel1691 | 13:596ff8317448 | 81 | { |
marcel1691 | 13:596ff8317448 | 82 | var val = $(this).val() / 100.0; |
marcel1691 | 13:596ff8317448 | 83 | $.get( server + 'servo2/write ' + val ); |
marcel1691 | 13:596ff8317448 | 84 | console.log( server + 'servo2/write ' + val ); |
marcel1691 | 13:596ff8317448 | 85 | }); |
marcel1691 | 13:596ff8317448 | 86 | </script> |
marcel1691 | 13:596ff8317448 | 87 | </form> |
marcel1691 | 13:596ff8317448 | 88 | </body> |
marcel1691 | 13:596ff8317448 | 89 | </html> |