You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
392 lines
19 KiB
392 lines
19 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ESPurna</title>
|
|
<meta charset="utf-8" />
|
|
<link rel="stylesheet" href="spectre.min.css" />
|
|
<script src="jquery-1.12.3.min.js"></script>
|
|
<style>
|
|
html, body {
|
|
font-size: 12px;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
div.page {
|
|
display: none;
|
|
}
|
|
.bg-grey {
|
|
background-color: #efefef;
|
|
padding: 1rem;
|
|
border-radius: .3rem;
|
|
}
|
|
div.hint {
|
|
background-color: #efefef;
|
|
padding: 2rem;
|
|
margin: 20px 0;
|
|
border-left: 2px solid blue;
|
|
}
|
|
</style>
|
|
<script>
|
|
|
|
$(function() {
|
|
|
|
var timer = null;
|
|
|
|
$("form").submit(function(event) {
|
|
button = $(":submit", this);
|
|
button.addClass("loading");
|
|
$.ajax({
|
|
'method': 'POST',
|
|
'url': '/save',
|
|
'dataType': 'json',
|
|
'data': $(this).serializeArray()
|
|
}).done(function(data) {
|
|
button.removeClass("loading");
|
|
}).fail(function() {
|
|
button.removeClass("loading");
|
|
});
|
|
event.preventDefault();
|
|
setTimeout(update, 200);
|
|
});
|
|
|
|
function init() {
|
|
$.ajax({
|
|
'method': 'GET',
|
|
'url': '/init',
|
|
'dataType': 'json'
|
|
}).done(function(data) {
|
|
keys = Object.keys(data);
|
|
for (index in keys) {
|
|
key = "#" + keys[index];
|
|
value = data[keys[index]];
|
|
try {
|
|
if ($(key).prop('tagName') == 'INPUT') {
|
|
$(key).val(value);
|
|
} else {
|
|
$(key).html(value);
|
|
}
|
|
} catch(err) {
|
|
// nope
|
|
};
|
|
};
|
|
timer = setInterval(update, data.updateInterval);
|
|
document.title = data.hostname;
|
|
$("[name='pwMainsVoltage']").val(data.pwMainsVoltage);
|
|
$("[name='rfDevice']").val(data.rfDevice);
|
|
});
|
|
}
|
|
|
|
function update() {
|
|
$.ajax({
|
|
'method': 'GET',
|
|
'url': '/status',
|
|
'dataType': 'json'
|
|
}).done(function(data) {
|
|
$("#mqtt").val(data.mqtt ? "CONNECTED" : "NOT CONNECTED");
|
|
$("#power").val((data.power | 0) + "W");
|
|
$("#temperature").val((data.temperature | 0) + "ºC");
|
|
$("#humidity").val((data.humidity | 0) + "%");
|
|
if (data.relay) {
|
|
$("#relay").addClass('btn-primary').html("ON");
|
|
$("#status").val(1);
|
|
} else {
|
|
$("#relay").removeClass('btn-primary').html("OFF");
|
|
$("#status").val(0);
|
|
}
|
|
});
|
|
}
|
|
|
|
$("#btn-admin").click(function() {
|
|
$("#panel-status").hide();
|
|
$("#panel-admin").show();
|
|
$("#btn-admin").addClass('btn-primary');
|
|
$("#btn-status").removeClass('btn-primary');
|
|
});
|
|
|
|
$("#btn-status").click(function() {
|
|
$("#panel-admin").hide();
|
|
$("#panel-status").show();
|
|
$("#btn-admin").removeClass('btn-primary');
|
|
$("#btn-status").addClass('btn-primary');
|
|
});
|
|
|
|
$("#relay").click(function(event) {
|
|
var status = parseInt($("#status").val());
|
|
if (status == 1) {
|
|
$.ajax({'method': 'GET', 'url': '/relay/off'});
|
|
} else {
|
|
$.ajax({'method': 'GET', 'url': '/relay/on'});
|
|
}
|
|
setTimeout(update, 200);
|
|
event.preventDefault();
|
|
})
|
|
|
|
init();
|
|
update();
|
|
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<header class="navbar bg-grey">
|
|
<section class="navbar-section">
|
|
<a href="#" class="navbar-brand"><span id="appname"></span></a>
|
|
</section>
|
|
<section class="navbar-section">
|
|
<button class="btn" id="btn-admin">Administration</button>
|
|
<button class="btn btn-primary" id="btn-status">Status</button>
|
|
</section>
|
|
</header>
|
|
|
|
<div class="page" id="panel-status" style="display: block;">
|
|
|
|
<div class="columns">
|
|
<div class="column col-12">
|
|
<form class="form-horizontal">
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="manufacturer">Manufacturer</label>
|
|
</div>
|
|
<div class="col-xs-9">
|
|
<input type="text" class="form-input" id="manufacturer" value="" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="model">Model</label>
|
|
</div>
|
|
<div class="col-xs-9">
|
|
<input type="text" class="form-input" id="model" value="" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="hostname">Hostname</label>
|
|
</div>
|
|
<div class="col-xs-9">
|
|
<input type="text" class="form-input" id="hostname" value="" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="network">Network</label>
|
|
</div>
|
|
<div class="col-xs-9">
|
|
<input type="text" class="form-input" id="network" value="" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="ip">IP</label>
|
|
</div>
|
|
<div class="col-xs-9">
|
|
<input type="text" class="form-input" id="ip" value="" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="mqtt">MQTT Status</label>
|
|
</div>
|
|
<div class="col-xs-9">
|
|
<input type="text" class="form-input" id="mqtt" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="power">Power</label>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<input type="text" class="form-input" id="power" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="temperature">Temperature</label>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<input type="text" class="form-input" id="temperature" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="humidity">Humidity</label>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<input type="text" class="form-input" id="humidity" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="col-xs-3">
|
|
<label class="form-label" for="relay">Relay Status</label>
|
|
</div>
|
|
<div class="col-xs-6">
|
|
<input type="hidden" class="form-input" name="status" id="status" value="0" />
|
|
<a class="btn" data="0" id="relay">OFF</a>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page" id="panel-admin">
|
|
|
|
<form action="/" method="post">
|
|
|
|
<div class="hint">
|
|
You can configure up to 3 different WiFi networks. The device will try to connect to any of them starting with the first one.
|
|
</div>
|
|
|
|
<div class="columns">
|
|
|
|
<div class="column col-4">
|
|
<h5>Network 1</h5>
|
|
<div class="form-group">
|
|
<label class="form-label" for="ssid0">Network SSID</label>
|
|
<input name="ssid0" id="ssid0" type="text" class="form-input" size="8" tabindex="1" placeholder="Network SSID">
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="pass0">Network Password</label>
|
|
<input name="pass0" id="pass0" type="text" class="form-input" maxlength="255" tabindex="2" placeholder="Network password">
|
|
</div>
|
|
</div>
|
|
<div class="column col-4">
|
|
<h5>Network 2</h5>
|
|
<div class="form-group">
|
|
<label class="form-label" for="ssid1">Network SSID</label>
|
|
<input name="ssid1" id="ssid1" type="text" class="form-input" size="8" tabindex="3" placeholder="Network SSID">
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="pass1">Network Password</label>
|
|
<input name="pass1" id="pass1" type="text" class="form-input" maxlength="255" tabindex="4" placeholder="Network password">
|
|
</div>
|
|
</div>
|
|
<div class="column col-4">
|
|
<h5>Network 3</h5>
|
|
<div class="form-group">
|
|
<label class="form-label" for="ssid2">Network SSID</label>
|
|
<input name="ssid2" id="ssid2" type="text" class="form-input" size="8" tabindex="5" placeholder="Network SSID">
|
|
</div>
|
|
<div>
|
|
<label class="form-label" for="pass2">Network Password</label>
|
|
<input name="pass2" id="pass2" type="text" class="form-input" maxlength="255" tabindex="6" placeholder="Network password">
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div class="hint">
|
|
Configure an <strong>MQTT broker</strong> in your network and you will be able to change the switch status via an MQTT message. Just send a 0 or a 1 as a payload to the provided topic below.
|
|
The switch will also report its current open/close status to the same topic and its IP address to the topic you define plus "<code>/ip</code>". Leave the server field empty to disable MQTT.
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column col-4">
|
|
<div class="form-group">
|
|
<label class="form-label" for="mqttServer">MQTT Server</label>
|
|
<input name="mqttServer" id="mqttServer" type="text" class="form-input" size="8" tabindex="8" placeholder="MQTT Server">
|
|
</div>
|
|
</div>
|
|
<div class="column col-2">
|
|
<div class="form-group">
|
|
<label class="form-label" for="mqttPort">MQTT Port</label>
|
|
<input name="mqttPort" id="mqttPort" type="text" class="form-input" size="8" tabindex="9" placeholder="1883">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column col-4">
|
|
<div class="form-group">
|
|
<label class="form-label" for="mqttUser">MQTT User</label>
|
|
<input name="mqttUser" id="mqttUser" type="text" class="form-input" size="8" tabindex="10" placeholder="Leave blank if no user/pass">
|
|
</div>
|
|
</div>
|
|
<div class="column col-4">
|
|
<div class="form-group">
|
|
<label class="form-label" for="mqttPassword">MQTT Password</label>
|
|
<input name="mqttPassword" id="mqttPassword" type="text" class="form-input" size="8" tabindex="11" placeholder="Leave blank if no user/pass">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="columns">
|
|
<div class="column col-4">
|
|
<div class="form-group">
|
|
<label class="form-label" for="mqttTopic">MQTT Topic</label>
|
|
<input name="mqttTopic" id="mqttTopic" type="text" class="form-input" size="8" tabindex="12" maxlength="35" placeholder="MQTT Topic">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div class="hint">
|
|
If your device supports RF switching you can configure here the channel and device ID.
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column col-2">
|
|
<div class="form-group">
|
|
<label class="form-label" for="rfChannel">RF Channel</label>
|
|
<input name="rfChannel" id="rfChannel" type="number" min="0" max="31" step="1" class="form-input" tabindex="13"/>
|
|
</div>
|
|
</div>
|
|
<div class="column col-2">
|
|
<div class="form-group">
|
|
<label class="form-label" for="rfDevice">RF Device</label>
|
|
<select name="rfDevice" class="form-input" tabindex="14">
|
|
<option value="0">A</a>
|
|
<option value="1">B</a>
|
|
<option value="2">C</a>
|
|
<option value="3">D</a>
|
|
<option value="4">E</a>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div class="hint">
|
|
If your device supports power measurement, here you can configure line potential and current ratio.
|
|
</div>
|
|
|
|
<div class="columns">
|
|
<div class="column col-2">
|
|
<div class="form-group">
|
|
<label class="form-label" for="pwMainsVoltage">AC RMS Voltage</label>
|
|
<select name="pwMainsVoltage" class="form-input" tabindex="15">
|
|
<option value="125">125</a>
|
|
<option value="220">220</a>
|
|
<option value="230">230</a>
|
|
<option value="240">240</a>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="column col-2">
|
|
<div class="form-group">
|
|
<label class="form-label" for="pwCurrentRatio">Current ratio</label>
|
|
<input name="pwCurrentRatio" id="pwCurrentRatio" type="text" class="form-input" size="8" tabindex="16" placeholder="30">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div>
|
|
<button class="btn btn-primary float-right">Update</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|