smd.iotkit2.ch / 2-09-01-Uebung

Ergänzt das jQueryMobile Beispiel um die Fehlenden Aktoren wie LED 3 und Servo 2.

Fork of RPCHTTPServerVariable by smd.iotkit2.ch

Web-APP/index.html@15:c86c3997f833, 2015-05-27 (annotated)

Committer:
stefan1691
Date:
Wed May 27 12:41:20 2015 +0000
Revision:
15:c86c3997f833
Parent:
13:596ff8317448 
9.1 Erg?nzt das jQueryMobile Beispiel um die Fehlenden Aktoren wie LED 3 und Servo 2.

Who changed what in which revision?

UserRevisionLine numberNew 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>