From dff0b845869a0f06285fcef2c61a2e54cc844714 Mon Sep 17 00:00:00 2001 From: Vlad-Stefan Harbuz Date: Thu, 21 Mar 2024 18:40:48 +0000 Subject: [PATCH] update with dew-a and dew-b --- index.html | 99 ++++++++++++++++++++++++++++++++++++++++++++---------- js/main.js | 44 +++++++++++++++++------- 2 files changed, 114 insertions(+), 29 deletions(-) diff --git a/index.html b/index.html index 6215112..a032789 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,7 @@ + Temperature and Humidity in Vlad's Flat @@ -58,29 +90,62 @@ dt { -
-
-
temperature
-
...°C
-
-
-
humidity
-
...%
+
+ Loading! + This takes a few seconds, sorry. +
+ +
+
+

Living room

-
-
atmospheric pressure
-
...mmHg
+
+
+
temperature
+
...°C
+
+
+
humidity
+
...%
+
+
+
atmospheric pressure
+
...mmHg
+
+
+
+ +
+
+

Study

-
+
+
+
temperature
+
...°C
+
+
+
humidity
+
...%
+
+
+
atmospheric pressure
+
...mmHg
+
+
+

Temperature history

-
(loading)
+
+

Humidity history

-
(loading)
+
+

Atmospheric pressure history

-
(loading)
+
+
diff --git a/js/main.js b/js/main.js index 9ee7365..37e7822 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,5 @@ -const DATA_URL = 'https://met.vladh.net/dewdrop-data.txt'; +const DATA_URL_A = 'https://met.vladh.net/dewdrop-data-a.txt'; +const DATA_URL_B = 'https://met.vladh.net/dewdrop-data-b.txt'; function parse_data(text) { @@ -22,30 +23,49 @@ function parse_data(text) { async function main() { - const data = await fetch(DATA_URL) + const promise_a = fetch(DATA_URL_A) .then((response) => response.text()) .then((text) => parse_data(text)); + const promise_b = fetch(DATA_URL_B) + .then((response) => response.text()) + .then((text) => parse_data(text)); + const [data_a, data_b] = await Promise.all([promise_a, promise_b]); ['temp', 'pres', 'hum'].forEach((field) => { - const plot_params = [{ - x: data.date, - y: data[field], - type: 'scatter', - }]; + const plot_params = [ + { + x: data_a.date, + y: data_a[field], + type: 'scatter', + name: 'Living room', + }, + { + x: data_b.date, + y: data_b[field], + type: 'scatter', + name: 'Study', + }, + ]; const layout = { margin: { - t: 0, - r: 0, + t: 20, + r: 20, b: 30, - l: 20, + l: 40, }, height: 300, }; document.getElementById(`plot_${field}`).innerHTML = ''; Plotly.newPlot(`plot_${field}`, plot_params, layout); - const latest_val = (+data[field].at(-1)).toFixed(2); - document.getElementById(`curr_${field}`).innerHTML = latest_val; + document.getElementById(`curr_${field}_a`).innerHTML = + (+data_a[field].at(-1)).toFixed(2) + document.getElementById(`curr_${field}_b`).innerHTML = + (+data_b[field].at(-1)).toFixed(2) + }); + + document.querySelectorAll('.loader').forEach((el) => { + el.hidden = true; }); } -- 2.45.2