diff --git a/data/index.html b/data/index.html index 28d8088..5ece2ec 100644 --- a/data/index.html +++ b/data/index.html @@ -9,38 +9,61 @@

/* therminator */

last sensor update:

-

chart update interval (ms):

-

data update interval (ms):

+
+

current data update interval (ms):

+

+ set data update interval (ms): + +

+
+
+

current chart update interval (ms):

+

+ set chart update interval (ms): + +

+
+
- - - - - -
-

Channel A:

- -
- -
-

Channel B:

- -
- -
+ + + + + +
+

Channel A:

+ +
+ +
+

Channel B:

+ +
+ +
diff --git a/data/script.js b/data/script.js index c7a8513..ab0c64b 100644 --- a/data/script.js +++ b/data/script.js @@ -1,3 +1,4 @@ + const canvasA = document.getElementById("chartA"); const canvasB = document.getElementById("chartB"); const chartUpdateInt = document.getElementById("chartUpd").value; @@ -82,6 +83,14 @@ const options = { }, }; +fetch("/int") + .then((res) => res.text()) + .then((textResponse) => { + document.getElementById("updInt").innerText = textResponse; + }); + +document.getElementById("cupdInt").innerText = chartUpdateInt; + const chartA = new Chart(canvasA, { type: "line", data: { @@ -253,7 +262,7 @@ function startRecording() { filename = "therminator-" + filedate + ".csv"; labelA = document.getElementById("labelA").value; labelB = document.getElementById("labelB").value; - csvData = ["time,\"" + labelA + "\",\"" + labelB + "\""] + csvData = ['time,"' + labelA + '","' + labelB + '"']; record = 1; document.getElementById("startRec").disabled = true; document.getElementById("stopRec").disabled = false; diff --git a/data/style.css b/data/style.css index 9c52401..997c146 100644 --- a/data/style.css +++ b/data/style.css @@ -5,9 +5,10 @@ body { font-family: "IBM Plex Mono", monospace; padding: 1rem 2rem; } -#mv, -#ui { +#du, +#cu { display: inline-block; + padding-right: 3rem; } #error-tempA, @@ -21,19 +22,3 @@ body { 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; - } -}