dirk/mg_sonoff
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Dirk Jahnke
2018-01-26 11:22:47 +01:00
parent a178ff5987
commit 649b9e0729
9 changed files with 324 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
fs/index.html
View File

@@ -15,51 +15,32 @@
min-height: 7em; white-space: pre; padding: 0.5em; overflow: auto;
}
</style>
<script src="zepto.min.js"></script>
<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">Mongoose OS app</a>
<a class="pagename current" href="https://mongoose-os.com">SONOFF / Mongoose</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,
<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>
<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>
@@ -69,15 +50,53 @@
<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 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>
@@ -92,10 +111,16 @@
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);
},
});
$('#save').on('click', function() {
$('#saveWifi').on('click', function() {
log('Calling /rpc/Config.Set ...');
$.ajax({
url: '/rpc/Config.Set',
@@ -109,6 +134,19 @@
})
});
$('#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>