smd.iotkit2.ch / Mbed 2 deprecated RPCHTTPServerVariable

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.

Dependencies:   EthernetInterface HttpServer Servo mbed-rtos mbed

Fork of RPCHTTPServerVariable by th.iotkit2.ch

Web-APP/index.html

Committer:
stefan1691
Date:
2016-03-20
Revision:
17:752e17b9aab4
Parent:
16:0eadcfedd078

File content as of revision 17:752e17b9aab4:

<!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="https://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://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="addr">IP-Adresse</label> 
                    <input type="text" name="addr" id="addr" value="http://192.168.178.35/rpc/"></input>
                </div>
 
                <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="servo1f">
                    <label for="servo-1">Servo 1:</label> 
                    <input name="servo1" id="servo1" type="range" min="0" max="100" value="50">
                </div>
            </div>
        </div>
        <script type="text/javascript">
$('select#led1').change(function() 
{
    var server = document.getElementById("addr").value;
    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 server = document.getElementById("addr").value;
    var myswitch = $(this);
    var name     = myswitch[0].name;
    var url      = myswitch[0].selectedIndex == 1 ? server + name + '/write 1' : server + name + '/write 0';
    $.get( url );   
}); 
$("#servo1f").on("slidestop", "#servo1", function(event) 
{
    var server = document.getElementById("addr").value;
    var val = $(this).val() / 100.0;
    $.get( server + 'servo1/write ' + val );
    console.log( server + 'servo1/write ' + val );
});
        </script>
    </form>
</body>
</html>