Ergänzt das jQueryMobile Beispiel um die Fehlenden Aktoren wie LED 3 und Servo 2.
Fork of RPCHTTPServerVariable by
Diff: Web-APP/index.html
- Revision:
- 13:596ff8317448
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/Web-APP/index.html Tue Mar 24 14:34:00 2015 +0000 @@ -0,0 +1,89 @@ +<!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> \ No newline at end of file