2024-02-15 22:27:24 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="de">
|
|
|
|
|
<head>
|
|
|
|
|
<script type="text/javascript" src="/static/plotly-2.29.1.min.js" charset="utf-8"></script>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<link rel="stylesheet" href="static/style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="plot" id="plotly_pout"></div>
|
|
|
|
|
<div class="plot" id="plotly_energy"></div>
|
|
|
|
|
<div class="plot" id="plotly_pwm"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="plot" id="plotly_vin"></div>
|
|
|
|
|
<div class="plot" id="plotly_vout"></div>
|
|
|
|
|
<div class="plot" id="plotly_iout"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
/*********************************
|
|
|
|
|
* Plot setup *
|
|
|
|
|
*********************************/
|
|
|
|
|
|
|
|
|
|
var plot_w = 400;
|
|
|
|
|
var plot_h = 300;
|
|
|
|
|
|
|
|
|
|
// vin plot
|
|
|
|
|
var plot_data = [
|
|
|
|
|
{
|
|
|
|
|
domain: { x: [0, 1], y: [0, 1] },
|
|
|
|
|
value: 6.2,
|
|
|
|
|
number: {"suffix": "V"},
|
|
|
|
|
title: { text: "Eingangsspannung" },
|
|
|
|
|
type: "indicator",
|
|
|
|
|
mode: "gauge+number",
|
|
|
|
|
gauge: {
|
|
|
|
|
axis: { range: [0, 10] },
|
|
|
|
|
bar: { color: "blue" }
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
|
|
|
|
|
Plotly.newPlot('plotly_vin', plot_data, layout);
|
|
|
|
|
|
|
|
|
|
var plot_data = [
|
|
|
|
|
{
|
|
|
|
|
domain: { x: [0, 1], y: [0, 1] },
|
|
|
|
|
value: 10,
|
|
|
|
|
number: {"suffix": "V"},
|
|
|
|
|
title: { text: "Ausgangsspannung" },
|
|
|
|
|
type: "indicator",
|
|
|
|
|
mode: "gauge+number",
|
|
|
|
|
gauge: {
|
|
|
|
|
axis: { range: [0, 20] },
|
|
|
|
|
bar: { color: "yellow" },
|
|
|
|
|
threshold: {
|
|
|
|
|
line: { color: "green", width: 4 },
|
|
|
|
|
thickness: 0.75,
|
|
|
|
|
value: 12.0
|
|
|
|
|
},
|
|
|
|
|
steps: [
|
|
|
|
|
{ range: [0, 16], color: "white" },
|
|
|
|
|
{ range: [16, 20], color: "#ff8080" }
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
|
|
|
|
|
Plotly.newPlot('plotly_vout', plot_data, layout);
|
|
|
|
|
|
|
|
|
|
var plot_data = [
|
|
|
|
|
{
|
|
|
|
|
domain: { x: [0, 1], y: [0, 1] },
|
|
|
|
|
value: 5,
|
|
|
|
|
number: {"suffix": "W"},
|
|
|
|
|
title: { text: "Leistung" },
|
|
|
|
|
type: "indicator",
|
|
|
|
|
mode: "gauge+number",
|
|
|
|
|
gauge: {
|
|
|
|
|
axis: { range: [0, 30] },
|
|
|
|
|
bar: { color: "orange" },
|
|
|
|
|
steps: [
|
|
|
|
|
{ range: [0, 20], color: "white" },
|
|
|
|
|
{ range: [20, 30], color: "#ff8080" }
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
|
|
|
|
|
Plotly.newPlot('plotly_pout', plot_data, layout);
|
|
|
|
|
|
|
|
|
|
var plot_data = [
|
|
|
|
|
{
|
|
|
|
|
domain: { x: [0, 1], y: [0, 1] },
|
|
|
|
|
value: 0.7,
|
|
|
|
|
number: {"suffix": "A"},
|
|
|
|
|
title: { text: "Ausgangsstrom" },
|
|
|
|
|
type: "indicator",
|
|
|
|
|
mode: "gauge+number",
|
|
|
|
|
gauge: {
|
|
|
|
|
axis: { range: [0, 2] },
|
|
|
|
|
bar: { color: "blue" }
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
|
|
|
|
|
Plotly.newPlot('plotly_iout', plot_data, layout);
|
|
|
|
|
|
|
|
|
|
var plot_data = [
|
|
|
|
|
{
|
|
|
|
|
domain: { x: [0, 1], y: [0, 1] },
|
|
|
|
|
value: 0.7,
|
|
|
|
|
number: {"suffix": "J"},
|
|
|
|
|
title: { text: "Energie" },
|
|
|
|
|
type: "indicator",
|
|
|
|
|
mode: "number"
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
|
|
|
|
|
Plotly.newPlot('plotly_energy', plot_data, layout);
|
|
|
|
|
|
|
|
|
|
var plot_data = [
|
|
|
|
|
{
|
|
|
|
|
domain: { x: [0, 1], y: [0, 1] },
|
|
|
|
|
value: 321,
|
|
|
|
|
title: { text: "PWM" },
|
|
|
|
|
type: "indicator",
|
|
|
|
|
mode: "gauge+number",
|
|
|
|
|
gauge: {
|
|
|
|
|
axis: { range: [0, 486] },
|
|
|
|
|
bar: { color: "black" }
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
var layout = { width: plot_w, height: plot_h, margin: { t: 0, b: 0 } };
|
|
|
|
|
Plotly.newPlot('plotly_pwm', plot_data, layout);
|
|
|
|
|
|
|
|
|
|
/*********************************
|
|
|
|
|
* Websocket handling *
|
|
|
|
|
*********************************/
|
|
|
|
|
|
2024-02-15 22:44:45 +01:00
|
|
|
var ws = new WebSocket("ws://" + window.location.host + "/websocket");
|
2024-02-15 22:27:24 +01:00
|
|
|
ws.onopen = function() {
|
|
|
|
|
console.log("Websocket connected.");
|
|
|
|
|
};
|
|
|
|
|
ws.onmessage = function (evt) {
|
|
|
|
|
data = JSON.parse(evt.data);
|
|
|
|
|
|
|
|
|
|
if(data) {
|
|
|
|
|
console.log("Data received:");
|
|
|
|
|
console.log(data);
|
|
|
|
|
|
|
|
|
|
Plotly.restyle('plotly_vin', 'value', [data.vin / 1e3]); // millivolt
|
|
|
|
|
Plotly.restyle('plotly_vout', 'value', [data.vout / 1e3]); // millivolt
|
|
|
|
|
Plotly.restyle('plotly_pout', 'value', [data.pout / 1e6]); // microwatt
|
|
|
|
|
Plotly.restyle('plotly_iout', 'value', [data.iout / 1000.0]); // milliampere
|
|
|
|
|
Plotly.restyle('plotly_energy', 'value', [data.energy]); // Joule
|
|
|
|
|
Plotly.restyle('plotly_pwm', 'value', [data.pwm]); // counter
|
|
|
|
|
} else {
|
|
|
|
|
console.log("Received data, but no valid JSON:");
|
|
|
|
|
console.log(evt.data);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
