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

Important changes to repositories hosted on mbed.com

Mbed hosted mercurial repositories are deprecated and are due to be permanently deleted in July 2026.

To keep a copy of this software download the repository Zip archive or clone locally using Mercurial.

It is also possible to export all your personal repositories from the account settings page.

Fork of RPCHTTPServerVariable by smd.iotkit2.ch

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?

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>