現在、私はArduinoがラズベリーパイにデータ（温度湿度など）を送信するネットワークを持つ家庭のプロジェクトに取り組んでいます。私は荒れ果てにデータを取り込み、プロットしてさまざまなグラフを作成し、設定された間隔で自動的に更新するウェブサイトにグラフを埋め込むようにします。私は既にネットワークを稼働させています。グラフをHTMLページに取得して更新する方法はちょっと残っています。私はWebページを作成し、毎回新しいグラフで書き直すPythonスクリプトを実行することを検討していました。これは非常に非効率的なので、私はそれを行うより良い方法があるかと思いましたか？グラフの更新を反映したRaspberry Pi pythonのウェブ
私は非常に似た問題を抱えていました。非常に単純な解決策は、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に入れています。要求がサーバに送信され、それに応じてグラフが更新されます。
<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>
http://www.amcharts.com/ – Aziz