huskee/therminator
huskee/therminator
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Make charts responsive

Browse source
This commit is contained in:
huskee 2023-12-18 15:49:09 +02:00
parent a6622975e3
commit 4ea73aa32c
3 changed files with 131 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
data/index.html
View file

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<meta charset="UTF-8" />
<head> <head>
<title>therminator</title> <title>therminator</title>
<link rel="stylesheet" type="text/css" href="/style.css" /> <link rel="stylesheet" type="text/css" href="/style.css" />
@ -25,21 +26,38 @@
<p> <p>
update interval (ms): update interval (ms):
<select id="updateInterval" onchange="changeUpdateInterval()"> <select id="updateInterval" onchange="changeUpdateInterval()">
<option>500</option> <option selected>500</option>
<option>1000</option> <option>1000</option>
<option>3000</option> <option>3000</option>
</select> </select>
</p> </p>
</div> </div>
</div> </div>
<div class="chart-container"> <div id="chart-small">
<h2>Channel A:</h2> <h2>Channel A:</h2>
<div id="error-tempA"></div> <div id="error-tempA"></div>
<canvas id="chartA"></canvas> <canvas id="chartA-mobile"></canvas>
<h2>Channel B:</h2> <h2>Channel B:</h2>
<div id="error-tempB"></div> <div id="error-tempB"></div>
<canvas id="chartB"></canvas> <canvas id="chartB-mobile"></canvas>
</div> </div>
<div id="chart-large">
<table>
<tr>
<td class="chart-container">
<h2>Channel A:</h2>
<div id="error-tempA"></div>
<canvas id="chartA"></canvas>
</td>
<td class="chart-container">
<h2>Channel B:</h2>
<div id="error-tempB"></div>
<canvas id="chartB"></canvas>
</td>
</tr>
</table>
</div>
<script src="script.js"></script> <script src="script.js"></script>
</body> </body>
</html> </html>

83
data/script.js
View file

@ -1,8 +1,41 @@
const canvasA = document.getElementById("chartA"); const canvasA = document.getElementById("chartA");
const canvasB = document.getElementById("chartB"); const canvasB = document.getElementById("chartB");
const mobCanvasA = document.getElementById("chartA-mobile");
const mobCanvasB = document.getElementById("chartB-mobile");
const maxValsSelect = document.getElementById("maxVals"); const maxValsSelect = document.getElementById("maxVals");
let maxVals = maxValsSelect.options[maxValsSelect.selectedIndex].text; let maxVals = maxValsSelect.options[maxValsSelect.selectedIndex].text;
const chartAdata = {
data: {
labels: [],
datasets: [
{
label: "Channel A temperature",
backgroundColor: "red",
borderColor: "red",
data: [],
},
],
},
};
const chartBdata = {
data: {
labels: [],
datasets: [
{
label: "Channel B temperature",
backgroundColor: "blue",
borderColor: "blue",
data: [],
},
],
},
};
const options = { const options = {
responsive: true,
plugins: { plugins: {
legend: { legend: {
labels: { labels: {
@ -12,14 +45,26 @@ const options = {
}, },
scales: { scales: {
y: { y: {
title: {
display: true,
text: "Temperature (°C)",
color: "rgb(250, 250, 250)",
},
grid: { grid: {
color: "rgba(250, 250, 250, 0.5)", color: "rgba(250, 250, 250, 0.5)",
}, },
ticks: { ticks: {
color: "rgba(250, 250, 250, 0.5)", color: "rgba(250, 250, 250, 0.5)",
}, },
suggestedMin: 0,
suggestedMax: 50,
}, },
x: { x: {
title: {
display: true,
text: "Time (s)",
color: "rgb(250, 250, 250)",
},
grid: { grid: {
color: "rgba(250, 250, 250, 0.5)", color: "rgba(250, 250, 250, 0.5)",
}, },
@ -29,6 +74,7 @@ const options = {
}, },
}, },
}; };
const chartA = new Chart(canvasA, { const chartA = new Chart(canvasA, {
type: "line", type: "line",
data: { data: {
@ -44,6 +90,7 @@ const chartA = new Chart(canvasA, {
}, },
options: options, options: options,
}); });
const chartB = new Chart(canvasB, { const chartB = new Chart(canvasB, {
type: "line", type: "line",
data: { data: {
@ -59,9 +106,43 @@ const chartB = new Chart(canvasB, {
}, },
options: options, options: options,
}); });
const mobChartA = new Chart(mobCanvasA, {
type: "line",
data: {
labels: [],
datasets: [
{
label: "Channel A temperature",
backgroundColor: "red",
borderColor: "red",
data: [],
},
],
},
options: options,
});
const mobChartB = new Chart(mobCanvasB, {
type: "line",
data: {
labels: [],
datasets: [
{
label: "Channel B temperature",
backgroundColor: "blue",
borderColor: "blue",
data: [],
},
],
},
options: options,
});
var gateway = `ws://${window.location.hostname}/ws`; var gateway = `ws://${window.location.hostname}/ws`;
var websocket; var websocket;
// Init web socket when the page loads // Init web socket when the page loads
window.addEventListener("load", onload); window.addEventListener("load", onload);
function onload(event) { function onload(event) {
@ -144,4 +225,6 @@ function onMessage(event) {
} }
addData(chartA, data["time"] / 1000, data["tempA"]); addData(chartA, data["time"] / 1000, data["tempA"]);
addData(chartB, data["time"] / 1000, data["tempB"]); addData(chartB, data["time"] / 1000, data["tempB"]);
addData(mobChartA, data["time"] / 1000, data["tempA"]);
addData(mobChartB, data["time"] / 1000, data["tempB"]);
} }

33
data/style.css
View file

@ -3,18 +3,37 @@ body {
background-color: rgb(50, 50, 50); background-color: rgb(50, 50, 50);
color: white; color: white;
font-family: "IBM Plex Mono", monospace; font-family: "IBM Plex Mono", monospace;
white-space: nowrap;
padding: 1rem 2rem; padding: 1rem 2rem;
} }
#mv, #ui, #chartA, #chartB { #mv,
display: inline-block; #ui {
display: inline-block;
} }
#error-tempA, #error-tempB { #error-tempA,
color: red !important; #error-tempB {
color: red !important;
} }
.chart-container { .chart-container {
position: relative; position: relative;
height: 40vh; height: 20vh;
width: 80vw; width: 40vw;
padding: 1em;
}
#chart-small {
display: initial;
}
#chart-large {
display: none;
}
@media only screen and (min-width: 1480px) {
#chart-small {
display: none;
}
#chart-large {
display: initial;
}
} }