~vladh/met.vladh.net

dff0b845869a0f06285fcef2c61a2e54cc844714 — Vlad-Stefan Harbuz a month ago 77d78a1
update with dew-a and dew-b
2 files changed, 114 insertions(+), 29 deletions(-)

M index.html
M js/main.js
M index.html => index.html +82 -17
@@ 1,6 1,7 @@
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Temperature and Humidity in Vlad's Flat</title>
<style>
* {


@@ 9,6 10,7 @@
html {
    font-size: 20px;
    font-family: sans-serif;
    background: #f6f7fa;
}
body {
    margin: 0;


@@ 26,14 28,13 @@ h1 {
}
h2 {
    margin: 0;
    margin-bottom: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}
dl {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    margin-bottom: 1.5rem;
}
dl div {
    flex: 1;


@@ 49,6 50,37 @@ dt {
}
.plot {
    margin-bottom: 1.5rem;
    background: white;
}
.dummy_plot {
    min-height: 300px;
    padding: 1rem;
    background: white;
}
.room {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: white;
}
.room .room__title {
    margin-top: -2rem;
}
.room .room__title h2 {
    display: inline-block;
    padding: 0.5rem;
    background: #0055ee;
    color: white;
}
.main-loader {
    position: fixed;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -20%);
    padding: 3rem;
    background: #0055ee;
    color: white;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.25);
}
</style>
    </head>


@@ 58,29 90,62 @@ dt {

            <noscript>Javascript is required, sorry!</noscript>

            <dl>
                <div>
                    <dd>temperature</dd>
                    <dt><span id="curr_temp">...</span>°C</dt>
                </div>
                <div>
                    <dd>humidity</dd>
                    <dt><span id="curr_hum">...</span>%</dt>
            <div class="main-loader loader">
                Loading!
                This takes a few seconds, sorry.
            </div>

            <div class="room">
                <div class="room__title">
                    <h2>Living room</h2>
                </div>
                <div>
                    <dd>atmospheric pressure</dd>
                    <dt><span id="curr_pres">...</span>mmHg</dt>
                <dl>
                    <div>
                        <dd>temperature</dd>
                        <dt><span id="curr_temp_a">...</span>°C</dt>
                    </div>
                    <div>
                        <dd>humidity</dd>
                        <dt><span id="curr_hum_a">...</span>%</dt>
                    </div>
                    <div>
                        <dd>atmospheric pressure</dd>
                        <dt><span id="curr_pres_a">...</span>mmHg</dt>
                    </div>
                </dl>
            </div>

            <div class="room">
                <div class="room__title">
                    <h2>Study</h2>
                </div>
            </dl>
                <dl>
                    <div>
                        <dd>temperature</dd>
                        <dt><span id="curr_temp_b">...</span>°C</dt>
                    </div>
                    <div>
                        <dd>humidity</dd>
                        <dt><span id="curr_hum_b">...</span>%</dt>
                    </div>
                    <div>
                        <dd>atmospheric pressure</dd>
                        <dt><span id="curr_pres_b">...</span>mmHg</dt>
                    </div>
                </dl>
            </div>

            <h2>Temperature history</h2>
            <div class="plot" id="plot_temp">(loading)</div>
            <div class="plot" id="plot_temp"></div>
            <div class="dummy_plot loader"></div>

            <h2>Humidity history</h2>
            <div class="plot" id="plot_hum">(loading)</div>
            <div class="plot" id="plot_hum"></div>
            <div class="dummy_plot loader"></div>

            <h2>Atmospheric pressure history</h2>
            <div class="plot" id="plot_pres">(loading)</div>
            <div class="plot" id="plot_pres"></div>
            <div class="dummy_plot loader"></div>
        </div>

        <script src="js/plotly-basic.min.js"></script>

M js/main.js => js/main.js +32 -12
@@ 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;
    });
}