~vladh/met.vladh.net

96bed04d7b7000883e1f1556b8a6e697e083c992 — Vlad-Stefan Harbuz 1 year, 10 months ago 7d17611
improve loading
3 files changed, 22 insertions(+), 38 deletions(-)

M Makefile
M index.html
M js/main.js
M Makefile => Makefile +1 -1
@@ 1,4 1,4 @@
.PHONY: publish

publish:
	rsync -Lrh --progress --delete --stats . yavin:/srv/www/net.vladh.met
	rsync --exclude '.git' -Lrh --progress --delete --stats . yavin:/srv/www/net.vladh.met

M index.html => index.html +20 -33
@@ 50,12 50,6 @@ dt {
.plot {
    margin-bottom: 1.5rem;
}
.loader {
    display: none;
}
.charts {
    display: none;
}
</style>
    </head>
    <body>


@@ 64,38 58,31 @@ dt {

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

            <p class="loader" id="loader">... loading data ...</p>

            <div class="charts" id="charts">
                <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>
                    <div>
                        <dd>atmospheric pressure</dd>
                        <dt><span id="curr_pres"></span>mmHg</dt>
                    </div>
                </dl>
            <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>
                <div>
                    <dd>atmospheric pressure</dd>
                    <dt><span id="curr_pres">...</span>mmHg</dt>
                </div>
            </dl>

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

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

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

        <script>
            document.getElementById('loader').style.display = 'block';
        </script>
        <script src="js/plotly-basic.min.js"></script>
        <script src="js/main.js"></script>
    </body>

M js/main.js => js/main.js +1 -4
@@ 26,8 26,6 @@ async function main() {
        .then((response) => response.text())
        .then((text) => parse_data(text));

    document.getElementById('charts').style.display = 'block';

    ['temp', 'pres', 'hum'].forEach((field) => {
        const plot_params = [{
            x: data.date,


@@ 43,13 41,12 @@ async function main() {
            },
            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('loader').style.display = 'none';
}