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