Веб-сайт Raspberry Pi Python с обновлениями графиков

В настоящее время я работаю над проектом из дома, где у меня есть сеть отправки данных Arduino (температурная влажность и т. д.) на малиновый пи. Я хочу, чтобы рашпиль брал данные и, используя график, строил различные графики, а затем вставлял указанные графики на веб-сайт, который автоматически обновляется через заданный интервал. У меня уже есть сеть и она работает. Я просто зациклился на том, как вывести графики на HTML-страницу и обновить ее. Я подумывал просто запустить скрипт Python, который создает веб-страницу и каждый раз переписывает ее с новыми графиками. Это кажется очень неэффективным, поэтому мне было интересно, есть ли лучший способ сделать это?


python web html plotly raspberry-pi3
person Hannes    schedule 06.10.2016    source источник
comment
рассмотрите возможность использования amcharts.com   -  person Aziz    schedule 06.10.2016

Ответы (1)


arrow_upward
0
arrow_downward

Некоторое время назад у меня была очень похожая проблема. Очень простое решение состояло в том, чтобы использовать Python3 http.server для возврата JSON с отметкой времени и температурой.

# !/usr/bin/env python3
from http.server import HTTPServer, BaseHTTPRequestHandler
import random
import json
import time

def send_header(BaseHTTPRequestHandler):
    BaseHTTPRequestHandler.send_response(200)
    BaseHTTPRequestHandler.send_header('Access-Control-Allow-Origin', '*')
    BaseHTTPRequestHandler.send_header('Content-type:', 'application/json')
    BaseHTTPRequestHandler.end_headers()


class MyRequestHandler(BaseHTTPRequestHandler):
    def do_GET(self):
        # returns the temperature
        if self.path == '/temperature':
            send_header(self)
            self.wfile.write(bytes(json.dumps({'time': time.strftime('%H:%M:%S', time.gmtime()), 'temperature': random.randint(0, 100)}), 'utf-8'))

if __name__ == '__main__':
    # start server
    server = HTTPServer(('', 8099), MyRequestHandler)
    server.serve_forever()

Затем данные принимаются через простой ванильный JavaScript и помещаются в plotly. Каждые 1000 мс на сервер отправляется запрос, и график соответственно обновляется.

<html>
    <head>
        <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
        <script>
            var temperatures;
            var temperatures_x = [];
            var temperatures_y = [];
            var server_url = "";

            //basic request handler
            function createRequest() {
                var result = null;
                if (window.XMLHttpRequest) {
                    // FireFox, Safari, etc.
                    result = new XMLHttpRequest();
                    if (typeof result.overrideMimeType != "undefined") {
                        result.overrideMimeType("text/xml"); // Or anything else
                    }
                } else if (window.ActiveXObject) {
                    // MSIE
                    result = new ActiveXObject("Microsoft.XMLHTTP");
                }
                return result;
            }
            //gets the temperature from the Python3 server
            function update_temperatures() {
                var req = createRequest();
                req.onreadystatechange = function () {
                    if (req.readyState !== 4) {
                        return;
                    }
                    temperatures = JSON.parse(req.responseText);
                    return;
                };
                req.open("GET", server_url + "/temperature", true);
                req.send();
                return;
            }

            //updates the graph
            function update_graph() {
                update_temperatures();
                temperatures_x.push(temperatures.time)
                temperatures_y.push(temperatures.temperature)
                Plotly.newPlot('graph_t', [{x: temperatures_x, y: temperatures_y}]);
            }

            //initializes everything
            window.onload = function () {
                document.getElementById("url").onchange = function () {
                    server_url = document.getElementById("url").value;
                };
                server_url = document.getElementById("url").value;
                //timer for updating the functions
                var t_cpu = setInterval(update_graph, 1000);
            };

        </script>
    </head>

    <body>
        <li>
            URL and port<input type="text" id="url" value="http://localhost:8099">
        </li>
        <div class="plotly_graph" id="graph_t"></div>
    </body>
</html>
person Maximilian Peters    schedule 07.10.2016