2017-06-05 19:34:53 +00:00
|
|
|
<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>
|
2018-01-26 10:22:47 +00:00
|
|
|
<script src="s_zepto.min.js"></script>
|
2017-06-05 19:34:53 +00:00
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
|
|
|
|
<div class="container">
|
2018-01-26 10:22:47 +00:00
|
|
|
<a class="pagename current" href="https://mongoose-os.com">SONOFF / Mongoose</a>
|
2017-06-05 19:34:53 +00:00
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="hero">
|
2018-01-26 10:22:47 +00:00
|
|
|
<h1>WiFi setup</h1>
|
|
|
|
|
<p>Configure your SONOFF device to communicate with your home automation without having this device
|
|
|
|
|
connect to some unknown servers on the internet. We want you to keep you under control of your
|
|
|
|
|
home!
|
|
|
|
|
</p>
|
|
|
|
|
<p>This product is based on the Sonoff devices sold by <a href="https://itead.cc">iTead</a>.
|
|
|
|
|
The firmware has been replaced by a software based on <a href="https://mongoose-os.com">Mongoose OS</a>.
|
|
|
|
|
This setup is developed by <a href="mailto:dirk.jahnke@mailbox.org">Dirk Jahnke</a> and can be found
|
|
|
|
|
in a private gitea repository at <a href="https://gitea.pmpark.de/dirk/mg_sonoff.git">https://gitea.pmpark.de/dirk/mg_sonoff.git</a>.
|
|
|
|
|
A small JavaScript library,
|
2017-09-08 21:59:30 +00:00
|
|
|
<a href="http://zeptojs.com/">zepto</a>, is used as a drop-in replacement
|
|
|
|
|
for jQuery, for making AJAX calls to the device.
|
|
|
|
|
</p>
|
2017-06-05 19:34:53 +00:00
|
|
|
</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>
|
2018-01-26 10:22:47 +00:00
|
|
|
<div class="form-control"><button href="#" class="btn btn-sm btn-c" id="saveWifi">Save WiFi settings & reboot</button></div>
|
2017-06-05 19:34:53 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col c8">
|
|
|
|
|
<!-- <h3>Result:</h3> -->
|
|
|
|
|
<div id="result"></div>
|
|
|
|
|
</div>
|
2018-01-26 10:22:47 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="row form">
|
|
|
|
|
<div class="col c4">
|
|
|
|
|
<div class="form-control">
|
|
|
|
|
<label for="mqttHost">MQTT Host:</label>
|
|
|
|
|
<input type="text" class="smooth" id="mqttHost" name="mqttHost" placeholder="Host name or IP with port ...">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-control">
|
|
|
|
|
<label for="mqttPass">MQTT Password:</label>
|
|
|
|
|
<input type="text" class="smooth" id="mqttPass" name="mqttPass" placeholder="Type password ...">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-control">
|
|
|
|
|
<label for="mqttClientId">MQTT Client ID:</label>
|
|
|
|
|
<input type="text" class="smooth" id="mqttClientId" name="mqttClientId" placeholder="Id of this device as a client at MQTT server ...">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-control">
|
|
|
|
|
<label for="pubTopic">Publication Topic:</label>
|
|
|
|
|
<input type="text" class="smooth" id="mqttPubTopic" name="mqttPubTopic" placeholder="Topic name to publish status changes ...">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-control">
|
|
|
|
|
<label for="subTopic">Subscription Topic:</label>
|
|
|
|
|
<input type="text" class="smooth" id="mqttSubTopic" name="mqttSubTopic" placeholder="Topic name to receive commands ...">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="form-control"><button href="#" class="btn btn-sm btn-c" id="saveSonoff">Save device settings & reboot</button></div>
|
|
|
|
|
</div>
|
2017-06-05 19:34:53 +00:00
|
|
|
|
2018-01-26 10:22:47 +00:00
|
|
|
<div class="col c4">
|
|
|
|
|
<div id="more"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="col c4">
|
|
|
|
|
<h3>Device Info</h3>
|
|
|
|
|
<div class="form-control">
|
|
|
|
|
<label for="deviceID">Device ID:</label>
|
|
|
|
|
<input type="text" class="smooth" id="mqttPubTopic" name="mqttPubTopic" readonly="readonly">
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2017-06-05 19:34:53 +00:00
|
|
|
</div>
|
2018-01-26 10:22:47 +00:00
|
|
|
|
2017-06-05 19:34:53 +00:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
var log = function(msg) {
|
2017-09-08 21:59:30 +00:00
|
|
|
$('<span/>').html(msg + '\n').appendTo('#result')
|
2017-06-05 19:34:53 +00:00
|
|
|
};
|
|
|
|
|
|
2017-09-08 21:59:30 +00:00
|
|
|
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);
|
2018-01-26 10:22:47 +00:00
|
|
|
$('#deviceID').val(data.device.id);
|
|
|
|
|
$('#mqttHost').val(data.mqtt.server);
|
|
|
|
|
$('#mqttPass').val(data.mqtt.pass);
|
|
|
|
|
$('#mqttClientId').val(data.mqtt.client_id);
|
|
|
|
|
$('#pubTopic').val(data.sonoff.switch_status_pub_topic);
|
|
|
|
|
$('#subTopic').val(data.sonoff.command_sub_topic);
|
2017-09-08 21:59:30 +00:00
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
2018-01-26 10:22:47 +00:00
|
|
|
$('#saveWifi').on('click', function() {
|
2017-06-05 19:34:53 +00:00
|
|
|
log('Calling /rpc/Config.Set ...');
|
2017-09-08 21:59:30 +00:00
|
|
|
$.ajax({
|
2017-06-05 19:34:53 +00:00
|
|
|
url: '/rpc/Config.Set',
|
2017-09-08 21:59:30 +00:00
|
|
|
data: JSON.stringify({config: {wifi: {sta: {enable: true, ssid: $('#ssid').val(), pass: $('#pass').val()}}}}),
|
|
|
|
|
type: 'POST',
|
|
|
|
|
// contentType: 'application/json',
|
|
|
|
|
success: function(data) {
|
2017-06-05 19:34:53 +00:00
|
|
|
log('Success. Saving and rebooting ...');
|
2017-09-08 21:59:30 +00:00
|
|
|
$.ajax({url: '/rpc/Config.Save', type: 'POST', data: JSON.stringify({"reboot": true})});
|
2017-06-05 19:34:53 +00:00
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
2018-01-26 10:22:47 +00:00
|
|
|
$('#saveSonoff').on('click', function() {
|
|
|
|
|
log('Calling /rpc/Config.Set ...');
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: '/rpc/Config.Set',
|
|
|
|
|
data: JSON.stringify({config: {mqtt: {enable: true, server: $('#mqttHost').val(), client_id: $('#mqttClientId').val()}, pass: $('#mqttPass').val()},sonoff: {switch_status_pub_topic: $('#pubTopic').val(), command_sub_topic: $('#subTopic').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})});
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
});
|
2017-06-05 19:34:53 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
