首页 / 树莓派 / 树莓派4B_温湿度_传感器_WEB折线图

树莓派4B_温湿度_传感器_WEB折线图

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了树莓派4B_温湿度_传感器_WEB折线图，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4118字，纯文字阅读大概需要6分钟。

内容图文

 

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 下载到本地.

 树莓派4B_温湿度_传感器_WEB折线图 - 文章图片

 

启动 apache 服务,

 树莓派4B_温湿度_传感器_WEB折线图 - 文章图片

 

启动,python3.x  获取 温湿度的接口

 树莓派4B_温湿度_传感器_WEB折线图 - 文章图片

 

我们进行网页 访问

 树莓派4B_温湿度_传感器_WEB折线图 - 文章图片

 

内容总结

以上是互联网集市为您收集整理的树莓派4B_温湿度_传感器_WEB折线图全部内容，希望文章能够帮你解决树莓派4B_温湿度_传感器_WEB折线图所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1039964.html

来源：【匿名】