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

Committer:
marcel1691
Date:
2015-03-24
Revision:
13:596ff8317448

File content as of revision 13:596ff8317448:

<!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>