获取传感器数据绘图

最新推荐文章于 2024-07-20 03:07:24 发布

Elwood Ying

最新推荐文章于 2024-07-20 03:07:24 发布

阅读量4.5k

点赞数 1

本文链接：https://blog.csdn.net/yalecaltech/article/details/80633849

版权

大概是这样子的：

Arduino采集传感器书籍通过串口传入树莓派，树莓派用Python读取，并使用json.dumps方法json化数据，在前端使用百度的echarts，后端为了动态渲染数据，采用php，php的功能就是执行python脚本

代码全部附上：

Arduino部分

#include <dht11.h>

dht11 DHT11;

// 设置 DHT 引脚 为 Pin 8
#define DHT11PIN 8

void setup() {
  Serial.begin(9600);

}

void loop() {
  delay(500);

  int chk = DHT11.read(DHT11PIN);

  // 测试 DHT 是否正确连接


  // 获取测量数据
if(Serial.available()>0)  
  {  
    char c=Serial.read();  
    if(c=='a')  
    {
 // Serial.print("humi: ");
  Serial.println((float)DHT11.humidity, 2);
    }
    else  if(c=='b')  
    {
 // Serial.print("temp: ");
  Serial.println((float)DHT11.temperature, 2);
    }
  }

}

1.php

<?php
system("sudo python test.py");
//system("ifconfig");
?>

1.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <script type="text/javascript">
              var  myChart = echarts.init(document.getElementById('main'));
              var arr1=[],arr2=[];
              function arrTest(){
                $.ajax({
                  type:"post",
                  async:false,
                  url:"1.php",
                  data:{},
                  dataType:"json",
                  success:function(result){
                    if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].time);
                          arr2.push(result[i].data);
                      }
                    }
                  }
                })
                return arr1,arr2;
              }
              arrTest();
              var  option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                       data:['humid']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : arr1
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"humid",
                            "type":"line",
                            "data":arr2
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            // }
    </script>
</body>

test.py

import serial
import time
import json

ser = serial.Serial('/dev/ttyACM1',9600,timeout=2)

ser.write("b")
time.sleep(1)
data0 = ser.readline()
data1 = data0.replace("\r\n","")
ntime0 = time.strftime("%Y-%m-%d%H:%M:%S", time.localtime()) 

ser.write("b")
time.sleep(1)
data2 = ser.readline()
data3 = data2.replace("\r\n","")
ntime2 = time.strftime("%Y-%m-%d%H:%M:%S", time.localtime()) 

ser.write("b")
time.sleep(1)
data4 = ser.readline()
data5 = data4.replace("\r\n","")
ntime4 = time.strftime("%Y-%m-%d%H:%M:%S", time.localtime()) 

values=[{"time":ntime0,"data":data1},{"time":ntime2,"data":data3},{"time":ntime4,"data":data5}]

jdata = json.dumps(values)

print jdata

注意，1.html中使用了jquery和echart,我把两个统一放在了js文件夹下