1.用 apache 呈現網頁前端,網頁去訪問 python3.x 提供的 溫濕度接口,
2.獲取數據后, 前端用vue.js 綁定數據,用echarts.js 進行繪圖.
python3.x 獲取 溫濕度的接口
Server.py
from http.server import HTTPServer, BaseHTTPRequestHandler
import json
import urllib
import datetime
import Adafruit_DHT
from http.server import BaseHTTPRequestHandler, HTTPServer
from json import dumps
sensor = Adafruit_DHT.DHT22
pin = 24
""" my function"""
def getData():
humidity, temperature = Adafruit_DHT.read_retry(sensor, pin)
temperature = round(temperature,1)
humidity = round(humidity,1)
result = {"state":"success","value":str(temperature) +","+str(humidity),"time":datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")}
print(result)
return result
""" The HTTP request handler """
class RequestHandler(BaseHTTPRequestHandler):
def _send_cors_headers(self):
""" Sets headers required for CORS """
self.send_header("Access-Control-Allow-Origin", "*")
self.send_header("Access-Control-Allow-Methods", "GET,POST,OPTIONS")
self.send_header("Access-Control-Allow-Headers", "x-api-key,Content-Type")
def send_dict_response(self, d):
""" Sends a dictionary (JSON) back to the client """
self.wfile.write(bytes(dumps(d), "utf8"))
def do_OPTIONS(self):
self.send_response(200)
self._send_cors_headers()
self.end_headers()
def do_GET(self):
try:
self.send_response(200)
self._send_cors_headers()
self.end_headers()
# response = {}
# response["status"] = "OK"
result = getData()
self.send_dict_response(result)
except:
print("error")
# def do_POST(self):
# self.send_response(200)
# self._send_cors_headers()
# self.send_header("Content-Type", "application/json")
# self.end_headers()
# dataLength = int(self.headers["Content-Length"])
# data = self.rfile.read(dataLength)
# print(data)
# response = {}
# response["status"] = "OK"
# self.send_dict_response(response)
if __name__ == '__main__':
print("Starting server")
httpd = HTTPServer(("", 8787), RequestHandler)
print("Hosting server on port 8787")
httpd.serve_forever()
index.html (顯示數據的 靜態網頁)
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>v-charts</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css"></script>
</head>
<body>
<div id="app">
<ve-line :data="chartData" :extend="extend"></ve-line>
</div>
</body>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script type="text/javascript">
var mainData =new Vue({
el: '#app',
data () {
this.extend = {
//x軸文本設置
// 'xAxis.0.axisLabel.rotate': 45,//x軸文本傾斜
// 'xAxis.0.axisLine.lineStyle.color': "red",//x軸文本改變顏色
// 'xAxis.0.axisLabel.color': 'red',//x軸文本顏色
// 'xAxis.0.axisLabel.fontSize': 16,//x軸文本字體大小
// 'xAxis.0.axisLabel.fontFamily': 'Arial',//x軸文本字體系列
// 'xAxis.0.axisLabel.fontWeight': 'bold',//x軸文本字體粗細
// 'xAxis.0.axisLabel.align': 'center',//x軸文本字體位置
'yAxis.0.axisLabel.color': "green",
yAxis:[{
type: 'value',
min: 0,
max: 100,
}],
series: {
label: {
normal: {
show: true
}
}
}
}
return {
chartData: {
label: {show:true},
columns: ['時間','溫度', '濕度'],
rows: [
]
}
}
},
// components: { VeLine }
})
</script>
<script type="text/javascript">
function getDate(res) {
res = JSON.parse(res);
if (res.state=="success") {
var timeSplit = res.time.split(" ")[1].split(":");
var ws = res.value.split(",");
var dataRos =mainData.$data.chartData.rows
if (dataRos.length>=10) {
dataRos.shift();
}
dataRos.push({ '時間':timeSplit[0]+"."+timeSplit[1]+"."+timeSplit[2], '溫度': ws[0], '濕度': ws[1] });
mainData.$data.chartData.rows=dataRos;
}
};
setInterval(function() {
$.ajax({
type: 'get',
url: 'http://192.168.12.1:8787',
headers: {
'Content-type': "application/json"
},
success: function (res) {
getDate(res);
},
error(err) {
console.error(err)
}
});
}, 5000)
</script>
</html>
靜態網頁 放入 apache 目錄. 為了做成離線的,可以把 js ,css 下載到本地.
啟動 apache 服務,
啟動,python3.x 獲取 溫濕度的接口
我們進行網頁 訪問
