nathan/invertergui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic UI working state. Still needs clean and Assetfs to keep all dependencies in the application

Browse Source
This commit is contained in:
Nicholas Thompson
2019-02-26 23:25:37 +02:00
committed by ncthompson
parent f189ff0442
commit 8267e71f18
11 changed files with 773 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
frontend/index.html Normal file
View File

@@ -0,0 +1,280 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link
rel="stylesheet"
href="https://bootswatch.com/4/darkly/bootstrap.min.css"
crossorigin="anonymous"
/>
<title>Victron Multiplus Monitor</title>
<style>
.dot-off {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
.dot-green {
height: 25px;
width: 25px;
background-color: #2aed4e;
border-radius: 50%;
display: inline-block;
}
.dot-red {
height: 25px;
width: 25px;
background-color: #ed3d34;
border-radius: 50%;
display: inline-block;
}
.blink-red {
height: 25px;
width: 25px;
background-color: #ed3d34;
border-radius: 50%;
display: inline-block;
animation: blinkingRedDot 1s infinite;
}
@keyframes blinkingRedDot {
0% {
background-color: #ed3d34;
}
49% {
background-color: transparent;
}
50% {
background-color: transparent;
}
99% {
background-color: #ed3d34;
}
100% {
background-color: #ed3d34;
}
}
.blink-green {
height: 25px;
width: 25px;
background-color: #2aed4e;
border-radius: 50%;
display: inline-block;
animation: blinkingGreenDot 1s infinite;
}
@keyframes blinkingGreenDot {
0% {
background-color: #2aed4e;
}
49% {
background-color: transparent;
}
50% {
background-color: transparent;
}
99% {
background-color: #2aed4e;
}
100% {
background-color: #2aed4e;
}
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/controller.js"></script>
<script type="text/javascript">
window.onload = function() {
loadContent();
};
</script>
<h1 class="display-4 text-center">Inverter GUI</h1>
<div class="container" id="app">
<div class="row">
<div class="col">
<hr />
</div>
</div>
<div class="row">
<div class="col-sm p-auto">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Output Current</h5>
<blockquote class="blockquote">{{ output_current }} A</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Output Voltage</h5>
<blockquote class="blockquote">{{ output_voltage }} V</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Output Frequency</h5>
<blockquote class="blockquote">
{{ output_frequency }} Hz
</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Output Power</h5>
<blockquote class="blockquote">{{ output_power }} W</blockquote>
</div>
</div>
</div>
<div class="col-sm p-auto">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Input Current</h5>
<blockquote class="blockquote">{{ input_current }} A</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Input Voltage</h5>
<blockquote class="blockquote">{{ input_voltage }} V</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Input Frequency</h5>
<blockquote class="blockquote">
{{ input_frequency }} Hz
</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Input Power</h5>
<blockquote class="blockquote">{{ input_power }} W</blockquote>
</div>
</div>
</div>
<div class="col-sm p-auto">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Battery Current</h5>
<blockquote class="blockquote">
{{ battery_current }} A
</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Battery Voltage</h5>
<blockquote class="blockquote">
{{ battery_voltage }} V
</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Battery Charge</h5>
<blockquote class="blockquote">{{ battery_charge }} %</blockquote>
</div>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Battery Power</h5>
<blockquote class="blockquote">{{ battery_power }} W</blockquote>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<hr />
</div>
</div>
<div class="row">
<div class="col-sm p-3">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Mains</h5>
<span v-bind:class="[led_mains]"></span>
</div>
</div>
</div>
<div class="col-sm p-3">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Absorption</h5>
<span v-bind:class="[led_absorb]"></span>
</div>
</div>
</div>
<div class="col-sm p-3">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Bulk</h5>
<span v-bind:class="[led_bulk]"></span>
</div>
</div>
</div>
<div class="col-sm p-3">
<div class="card text-center ">
<div class="card-body">
<h5 class="card-title">Float</h5>
<span v-bind:class="[led_float]"></span>
</div>
</div>
</div>
<div class="col-sm p-3">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Inverter</h5>
<span v-bind:class="[led_inverter]"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm p-3">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Overload</h5>
<span v-bind:class="[led_overload]"></span>
</div>
</div>
</div>
<div class="col-sm p-3">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Low Battery</h5>
<span v-bind:class="[led_bat_low]"></span>
</div>
</div>
</div>
<div class="col-sm p-3">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Temperature</h5>
<span v-bind:class="[led_over_temp]"></span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

69
frontend/js/controller.js Normal file
View File

@@ -0,0 +1,69 @@
function loadContent() {
var conn;
var app = new Vue({
el: "#app",
data: {
output_current: null,
output_voltage: 0,
output_frequency: 0,
output_power: 0,
input_current: 0,
input_voltage: 0,
input_frequency: 0,
input_power: 0,
battery_current: 0,
battery_voltage: 0,
battery_charge: 0,
battery_power: 0,
led_mains: "dot-off",
led_absorb: "dot-off",
led_bulk: "dot-off",
led_float: "dot-off",
led_inverter: "dot-off",
led_overload: "dot-off",
led_bat_low: "dot-off",
led_over_temp: "dot-off"
}
});
if (window["WebSocket"]) {
conn = new WebSocket("ws://" + document.location.host + "/ws");
conn.onclose = function(evt) {
var item = document.createElement("a");
item.innerHTML = "<b>Connection closed.</b>";
};
conn.onmessage = function(evt) {
var update = JSON.parse(evt.data);
console.log(update);
app.output_current = update.output_current;
app.output_voltage = update.output_voltage;
app.output_frequency = update.output_frequency;
app.output_power = update.output_power;
app.input_current = update.input_current;
app.input_voltage = update.input_voltage;
app.input_frequency = update.input_frequency;
app.input_power = update.input_power;
app.battery_charge = update.battery_charge;
app.battery_voltage = update.battery_voltage;
app.battery_power = update.battery_power;
app.battery_current = update.battery_current;
leds = update.led_map;
app.led_mains = leds.led_mains;
app.led_absorb = leds.led_absorb;
app.led_bulk = leds.led_bulk;
app.led_float = leds.led_float;
app.led_inverter = leds.led_inverter;
app.led_overload = leds.led_overload;
app.led_bat_low = leds.led_bat_low;
app.led_over_temp = leds.led_over_temp;
};
} else {
var item = document.createElement("a");
item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
}
}