smd.iotkit2.ch
Ergänzt das jQueryMobile Beispiel um die Fehlenden Aktoren wie LED 3 und Servo 2.
Fork of
RPCHTTPServerVariable
by 
smd.iotkit2.ch
Diff: Web-APP/index.html
- Revision:
- 13:596ff8317448
diff -r fc0fe305d4d3 -r 596ff8317448 Web-APP/index.html
--- /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