dirk
/
mg_sonoff
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
mg_sonoff/fs/index.html

154 lines
8.2 KiB
HTML
Raw Blame History

<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="s_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">SONOFF / Mongoose</a>
</div>
</nav>
<div class="container">
<div class="hero">
<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,
<a href="http://zeptojs.com/">zepto</a>, is used as a drop-in replacement
for jQuery, for making AJAX calls to the device.
</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="saveWifi">Save WiFi settings &amp; reboot</button></div>
</div>
<div class="col c8">
<!-- <h3>Result:</h3> -->
<div id="result"></div>
</div>
</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 &amp; reboot</button></div>
</div>
<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>
</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);
$('#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);
},
});
$('#saveWifi').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})});
},
})
});
$('#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})});
},
})
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink