+
Channel A:
-
+
Channel B:
-
+
+
+
+
+
+ Channel A:
+
+
+ |
+
+ Channel B:
+
+
+ |
+
+
+
+
diff --git a/data/script.js b/data/script.js
index 1bcc49e..31bc09a 100644
--- a/data/script.js
+++ b/data/script.js
@@ -1,8 +1,41 @@
const canvasA = document.getElementById("chartA");
const canvasB = document.getElementById("chartB");
+const mobCanvasA = document.getElementById("chartA-mobile");
+const mobCanvasB = document.getElementById("chartB-mobile");
+
const maxValsSelect = document.getElementById("maxVals");
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 = {
+ responsive: true,
plugins: {
legend: {
labels: {
@@ -12,14 +45,26 @@ const options = {
},
scales: {
y: {
+ title: {
+ display: true,
+ text: "Temperature (°C)",
+ color: "rgb(250, 250, 250)",
+ },
grid: {
color: "rgba(250, 250, 250, 0.5)",
},
ticks: {
color: "rgba(250, 250, 250, 0.5)",
},
+ suggestedMin: 0,
+ suggestedMax: 50,
},
x: {
+ title: {
+ display: true,
+ text: "Time (s)",
+ color: "rgb(250, 250, 250)",
+ },
grid: {
color: "rgba(250, 250, 250, 0.5)",
},
@@ -29,6 +74,7 @@ const options = {
},
},
};
+
const chartA = new Chart(canvasA, {
type: "line",
data: {
@@ -44,6 +90,7 @@ const chartA = new Chart(canvasA, {
},
options: options,
});
+
const chartB = new Chart(canvasB, {
type: "line",
data: {
@@ -59,9 +106,43 @@ const chartB = new Chart(canvasB, {
},
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 websocket;
// Init web socket when the page loads
+
window.addEventListener("load", onload);
function onload(event) {
@@ -144,4 +225,6 @@ function onMessage(event) {
}
addData(chartA, data["time"] / 1000, data["tempA"]);
addData(chartB, data["time"] / 1000, data["tempB"]);
+ addData(mobChartA, data["time"] / 1000, data["tempA"]);
+ addData(mobChartB, data["time"] / 1000, data["tempB"]);
}
diff --git a/data/style.css b/data/style.css
index 089cb3c..9c52401 100644
--- a/data/style.css
+++ b/data/style.css
@@ -3,18 +3,37 @@ body {
background-color: rgb(50, 50, 50);
color: white;
font-family: "IBM Plex Mono", monospace;
- white-space: nowrap;
padding: 1rem 2rem;
}
-#mv, #ui, #chartA, #chartB {
- display: inline-block;
+#mv,
+#ui {
+ display: inline-block;
}
-#error-tempA, #error-tempB {
- color: red !important;
+#error-tempA,
+#error-tempB {
+ color: red !important;
}
+
.chart-container {
position: relative;
- height: 40vh;
- width: 80vw;
+ height: 20vh;
+ 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;
+ }
}