121 lines
5.8 KiB
HTML
121 lines
5.8 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>
|
|
|
|
</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.</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 ajax = function(opts) {
|
|
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState != 4) return;
|
|
if (xhr.status == 200) {
|
|
(opts.success || function() {})(xhr.responseText, xhr);
|
|
} else {
|
|
(opts.error || function() {})(xhr.responseText, xhr);
|
|
}
|
|
};
|
|
xhr.open(opts.method || 'GET', opts.url, true);
|
|
xhr.send(opts.data ? JSON.stringify(opts.data) : '');
|
|
};
|
|
|
|
var e = function(id) {
|
|
return document.getElementById(id);
|
|
};
|
|
|
|
var log = function(msg) {
|
|
var el = document.createElement('span');
|
|
el.innerHTML = msg + '\n';
|
|
e('result').appendChild(el);
|
|
};
|
|
|
|
e('save').onclick = function() {
|
|
log('Calling /rpc/Config.Set ...');
|
|
ajax({
|
|
url: '/rpc/Config.Set',
|
|
method: 'POST',
|
|
error: function(data, xhr) {
|
|
console.log(xhr);
|
|
log('Error: ' + xhr.responseError);
|
|
},
|
|
data: {config: {wifi: {sta: {enable: true, ssid: e('ssid').value, pass: e('pass').value}}}},
|
|
success: function(data, xhr) {
|
|
log('Success. Saving and rebooting ...');
|
|
ajax({
|
|
url: '/rpc/Config.Save',
|
|
method: 'POST',
|
|
data: {reboot: true},
|
|
});
|
|
},
|
|
})
|
|
};
|
|
|
|
log('Calling /rpc/Config.Get ...');
|
|
ajax({
|
|
url: '/rpc/Config.Get',
|
|
success: function(data, xhr) {
|
|
log('Result: ' + data);
|
|
try {
|
|
var o = JSON.parse(data);
|
|
e('ssid').value = o.wifi.sta.ssid;
|
|
e('pass').value = o.wifi.sta.pass;
|
|
} catch (e) {}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|