116 lines
6.2 KiB
HTML
116 lines
6.2 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
/* Copyright 2014 Owen Versteeg; MIT licensed */body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}label>*{display:inline}form>*{display:block;margin-bottom:10px}.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 14px 11px}.row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}h1{font-size:3em}.btn,h2{font-size:2em}.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:14px}textarea,input,select{padding:8px;border:1px solid #ccc}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em}.addon{padding:8px 12px;box-shadow:0 0 0 1px #ccc}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(min-width:1310px){.container{margin:auto;width:1270px}}@media(max-width:870px){.row .col{width:100%}}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{padding:.5em 0;display:block;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}.msg{padding:1.5em;background:#def;border-left:5px solid #59d}
|
|
.hero { background: #eee; padding: 20px; border-radius: 10px; margin-top: 1em; }
|
|
.hero h1 { margin-top: 0; margin-bottom: 0.3em; }
|
|
.c4 { padding: 10px; box-sizing: border-box; }
|
|
.c4 h3 { margin-top: 0; }
|
|
.c4 a { margin-top: 10px; display: inline-block; }
|
|
.form-control { margin: 0.5em 0; }
|
|
.form label { min-width: 8em; display: inline-block; }
|
|
#result {
|
|
background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px;
|
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
min-height: 7em; white-space: pre; padding: 0.5em; overflow: auto;
|
|
}
|
|
</style>
|
|
<script src="zepto.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
|
<div class="container">
|
|
<a class="pagename current" href="https://mongoose-os.com">Mongoose OS app</a>
|
|
</div>
|
|
</nav>
|
|
<div class="container">
|
|
<div class="hero">
|
|
<h1>WiFi setup via Web UI</h1>
|
|
<p>This <a href="https://mongoose-os.com">Mongoose OS</a> app shows
|
|
how to start a device in Access Point mode (AP) and configure Station mode
|
|
via simple Web UI.</p>
|
|
<p>This page communicates with the device via
|
|
<a href="https://mongoose-os.com/docs/#/rpc/">Mongoose OS RPC mechanism</a>
|
|
using HTTP/RESTful as a transport protocol. A small JavaScript library,
|
|
<a href="http://zeptojs.com/">zepto</a>, is used as a drop-in replacement
|
|
for jQuery, for making AJAX calls to the device.
|
|
</p>
|
|
|
|
<p>Open <code>fs/index.html</code>, or right-click on this page and
|
|
choose "view source".</p>
|
|
|
|
<p>
|
|
First, this web page makes a call to the
|
|
<code>http://DEVICE_IP/rpc/Config.Get</code> RESTful endpoint, which
|
|
triggers <code>Config.Get</code> RPC service and returns a large JSON
|
|
object (click <a target="_blank" href="/rpc/Config.Get">here</a> to see) with full device configuration. From that object, we take
|
|
WiFi SSID and password, and stick them into the text inputs.
|
|
</p>
|
|
|
|
<p>Second, we install a button click handler, which grabs values from the
|
|
text inputs, creates a JSON string with the device configuration subtree
|
|
that <code>Config.Set</code> RPC call expects,
|
|
and calls a <code>/rpc/Config.Set</code> endpoint.
|
|
</p>
|
|
|
|
<p>Similarly, you can call any other RPC service that device has. Call
|
|
<code>RPC.List</code> to get a list of all RPC services available.
|
|
</p>
|
|
</div>
|
|
<div class="row form">
|
|
|
|
<div class="col c4">
|
|
<div class="form-control">
|
|
<label for="ssid">WiFi Network:</label>
|
|
<input type="text" class="smooth" id="ssid" name="ssid" placeholder="Type WiFi network...">
|
|
</div>
|
|
<div class="form-control">
|
|
<label for="pass">WiFi Password:</label>
|
|
<input type="text" class="smooth" id="pass" name="pass" placeholder="Type WiFi password...">
|
|
</div>
|
|
<div class="form-control"><button href="#" class="btn btn-sm btn-c" id="save">Save WiFi settings</button></div>
|
|
</div>
|
|
|
|
<div class="col c8">
|
|
<!-- <h3>Result:</h3> -->
|
|
<div id="result"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var log = function(msg) {
|
|
$('<span/>').html(msg + '\n').appendTo('#result')
|
|
};
|
|
|
|
log('Calling /rpc/Config.Get ...');
|
|
$.ajax({
|
|
url: '/rpc/Config.Get',
|
|
success: function(data) {
|
|
log('Result: ' + JSON.stringify(data));
|
|
$('#ssid').val(data.wifi.sta.ssid);
|
|
$('#pass').val(data.wifi.sta.pass);
|
|
},
|
|
});
|
|
|
|
$('#save').on('click', function() {
|
|
log('Calling /rpc/Config.Set ...');
|
|
$.ajax({
|
|
url: '/rpc/Config.Set',
|
|
data: JSON.stringify({config: {wifi: {sta: {enable: true, ssid: $('#ssid').val(), pass: $('#pass').val()}}}}),
|
|
type: 'POST',
|
|
// contentType: 'application/json',
|
|
success: function(data) {
|
|
log('Success. Saving and rebooting ...');
|
|
$.ajax({url: '/rpc/Config.Save', type: 'POST', data: JSON.stringify({"reboot": true})});
|
|
},
|
|
})
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|