github.com/UtilitechAS.amsreader-firmware
1
0
Fork 0
mirror of https://github.com/UtilitechAS/amsreader-firmware.git synced 2026-01-25 11:56:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Made MQTT optional

Browse Source
This commit is contained in:
Gunnar Skjold
2020-02-01 09:52:37 +01:00
parent 57d8603790
commit 8f85b43fc3
11 changed files with 251 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/application.css
View File

@@ -1,44 +0,0 @@
.bg-purple {
background-color: var(--purple);
}
.GaugeMeter {
position: Relative;
text-align: Center;
overflow: Hidden;
cursor: Default;
display: inline-block;
}
.GaugeMeter SPAN, .GaugeMeter B {
width: 54%;
position: Absolute;
text-align: Center;
display: Inline-Block;
color: RGBa(0,0,0,.8);
font-weight: 100;
font-family: "Open Sans", Arial;
overflow: Hidden;
white-space: NoWrap;
text-overflow: Ellipsis;
margin: 0 23%;
}
.GaugeMeter[data-style="Semi"] B {
width: 80%;
margin: 0 10%;
}
.GaugeMeter S, .GaugeMeter U {
text-decoration: None;
font-size: .60em;
font-weight: 200;
opacity: .6;
}
.GaugeMeter B {
color: #000;
font-weight: 200;
opacity: .8;
}

4
web/boot.css
View File

@@ -236,6 +236,10 @@ a {
border-radius: .25rem;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-control:disabled, .form-control[readonly] {
background-color: #e9ecef;
opacity: 1;
}
input:not([type="image" i]) {
box-sizing: border-box;
}

47
web/configuration.html
View File

@@ -6,7 +6,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="boot.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
.bg-purple {
background-color: var(--purple);
}
</style>
</head>
<body class="bg-light">
<main role="main" class="container">
@@ -75,40 +80,46 @@
<div class="col-md-6 col-lg-4">
<div class="my-2 p-3 bg-white rounded shadow">
<h6 class="border-bottom border-gray pb-2 mb-4">MQTT</h6>
<div class="row form-group">
<label class="col-4">Enable</label>
<div class="col-8">
<input id="mqttEnable" type="checkbox" name="mqtt" value="true" ${config.mqtt}/>
</div>
</div>
<div class="row form-group">
<label class="col-4">Hostname</label>
<div class="col-8">
<input type="text" class="form-control" name="mqtt" value="${config.mqtt}"/>
<input type="text" class="form-control mqtt-config" name="mqttHost" value="${config.mqttHost}"/>
</div>
</div>
<div class="row form-group">
<label class="col-4">Port</label>
<div class="col-8">
<input type="text" class="form-control" name="mqttPort" value="${config.mqttPort}"/>
<input type="text" class="form-control mqtt-config" name="mqttPort" value="${config.mqttPort}"/>
</div>
</div>
<div class="row form-group">
<label class="col-4">Client ID</label>
<div class="col-8">
<input type="text" class="form-control" name="mqttClientID" value="${config.mqttClientID}"/>
<input type="text" class="form-control mqtt-config" name="mqttClientID" value="${config.mqttClientID}"/>
</div>
</div>
<div class="row form-group">
<label class="col-4">Topic</label>
<div class="col-8">
<input type="text" class="form-control" name="mqttPublishTopic" value="${config.mqttPublishTopic}"/>
<input type="text" class="form-control mqtt-config" name="mqttPublishTopic" value="${config.mqttPublishTopic}"/>
</div>
</div>
<div class="row form-group">
<label class="col-4">Username</label>
<div class="col-8">
<input type="text" class="form-control" name="mqttUser" value="${config.mqttUser}"/>
<input type="text" class="form-control mqtt-config" name="mqttUser" value="${config.mqttUser}"/>
</div>
</div>
<div class="row form-group">
<label class="col-4">Password</label>
<div class="col-8">
<input type="password" class="form-control" name="mqttPass" value="${config.mqttPass}"/>
<input type="password" class="form-control mqtt-config" name="mqttPass" value="${config.mqttPass}"/>
</div>
</div>
</div>
@@ -119,7 +130,7 @@
<div class="row form-group">
<label class="col-4">Security</label>
<div class="col-8">
<select class="form-control" name="authSecurity">
<select id="authSecurity" class="form-control" name="authSecurity">
<option value="0" ${config.authSecurity0}>None</option>
<option value="1" ${config.authSecurity1}>Only configuration</option>
<option value="2" ${config.authSecurity2}>Everything</option>
@@ -129,13 +140,13 @@
<div class="row form-group">
<label class="col-4">Username</label>
<div class="col-8">
<input type="text" class="form-control" name="authUser" value="${config.authUser}"/>
<input type="text" class="form-control auth-config" name="authUser" value="${config.authUser}"/>
</div>
</div>
<div class="row form-group">
<label class="col-4">Password</label>
<div class="col-8">
<input type="password" class="form-control" name="authPass" value="${config.authPass}"/>
<input type="password" class="form-control auth-config" name="authPass" value="${config.authPass}"/>
</div>
</div>
</div>
@@ -152,5 +163,21 @@
</div>
</form>
</main>
<script>
$('#mqttEnable').on('change', function() {
var inputs = $('.mqtt-config');
inputs.prop('disabled', !$(this).is(':checked'));
});
$('#authSecurity').on('change', function() {
var inputs = $('.auth-config');
inputs.prop('disabled', $(this).val() == 0);
});
$(function() {
$('#mqttEnable').trigger('change');
$('#authSecurity').trigger('change');
});
</script>
</body>
</html>

126
web/index.html
View File

@@ -6,9 +6,53 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="boot.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="gaugemeter.js"></script>
<style>
.bg-purple {
background-color: var(--purple);
}
.GaugeMeter {
position: Relative;
text-align: Center;
overflow: Hidden;
cursor: Default;
display: inline-block;
}
.GaugeMeter SPAN, .GaugeMeter B {
width: 54%;
position: Absolute;
text-align: Center;
display: Inline-Block;
color: RGBa(0,0,0,.8);
font-weight: 100;
font-family: "Open Sans", Arial;
overflow: Hidden;
white-space: NoWrap;
text-overflow: Ellipsis;
margin: 0 23%;
}
.GaugeMeter[data-style="Semi"] B {
width: 80%;
margin: 0 10%;
}
.GaugeMeter S, .GaugeMeter U {
text-decoration: None;
font-size: .60em;
font-weight: 200;
opacity: .6;
}
.GaugeMeter B {
color: #000;
font-weight: 200;
opacity: .8;
}
</style>
</head>
<body class="bg-light">
<main role="main" class="container">
@@ -72,6 +116,84 @@
</div>
</div>
</main>
<script src="index.js"></script>
<script>
$(".GaugeMeter").gaugeMeter();
var wait = 500;
var nextrefresh = wait;
var fetch = function() {
$.ajax({
url: '/data.json',
dataType: 'json',
}).done(function(json) {
$(".SimpleMeter").hide();
var el = $(".GaugeMeter");
el.show();
var rate = 2500;
if(json.data) {
el.data('percent', json.pct);
if(json.data.P) {
var num = parseFloat(json.data.P);
if(num > 1000) {
num = num / 1000;
el.data('text', num.toFixed(1));
el.data('append','kW');
} else {
el.data('text', num);
el.data('append','W');
}
}
el.gaugeMeter();
for(var id in json.data) {
var str = json.data[id];
if(isNaN(str)) {
$('#'+id).html(str);
} else {
var num = parseFloat(str);
$('#'+id).html(num.toFixed(1));
}
}
if(json.data.U1 > 0) {
$('#P1').show();
}
if(json.data.U2 > 0) {
$('#P2').show();
}
if(json.data.U3 > 0) {
$('#P3').show();
}
if(json.meterType == 3) {
rate = 10000;
}
if(json.currentMillis && json.up) {
nextrefresh = rate - ((json.currentMillis - json.up) % rate) + wait;
} else {
nextrefresh = 2500;
}
} else {
el.data('percent', 0);
el.data('text', '-');
el.gaugeMeter();
nextrefresh = 2500;
}
if(!nextrefresh || nextrefresh < 500) {
nextrefresh = 2500;
}
setTimeout(fetch, nextrefresh);
}).fail(function() {
el.data('percent', 0);
el.data('text', '-');
el.gaugeMeter();
nextrefresh = 10000;
setTimeout(fetch, nextrefresh);
});
}
setTimeout(fetch, nextrefresh);
</script>
</body>
</html>

77
web/index.js
View File

@@ -1,77 +0,0 @@
$(".GaugeMeter").gaugeMeter();
var wait = 500;
var nextrefresh = wait;
var fetch = function() {
$.ajax({
url: '/data.json',
dataType: 'json',
}).done(function(json) {
$(".SimpleMeter").hide();
var el = $(".GaugeMeter");
el.show();
var rate = 2500;
if(json.data) {
el.data('percent', json.pct);
if(json.data.P) {
var num = parseFloat(json.data.P);
if(num > 1000) {
num = num / 1000;
el.data('text', num.toFixed(1));
el.data('append','kW');
} else {
el.data('text', num);
el.data('append','W');
}
}
el.gaugeMeter();
for(var id in json.data) {
var str = json.data[id];
if(isNaN(str)) {
$('#'+id).html(str);
} else {
var num = parseFloat(str);
$('#'+id).html(num.toFixed(1));
}
}
if(json.data.U1 > 0) {
$('#P1').show();
}
if(json.data.U2 > 0) {
$('#P2').show();
}
if(json.data.U3 > 0) {
$('#P3').show();
}
if(json.meterType == 3) {
rate = 10000;
}
if(json.currentMillis && json.up) {
nextrefresh = rate - ((json.currentMillis - json.up) % rate) + wait;
} else {
nextrefresh = 2500;
}
} else {
el.data('percent', 0);
el.data('text', '-');
el.gaugeMeter();
nextrefresh = 2500;
}
if(!nextrefresh || nextrefresh < 500) {
nextrefresh = 2500;
}
setTimeout(fetch, nextrefresh);
}).fail(function() {
el.data('percent', 0);
el.data('text', '-');
el.gaugeMeter();
nextrefresh = 10000;
setTimeout(fetch, nextrefresh);
});
}
setTimeout(fetch, nextrefresh);