esp32实时生成传感器数据,并绘制成折线图显示出来
时间: 2023-06-24 10:04:25 浏览: 171
C#绘制折线图实时展示数据
要实现这个功能,你可以使用ESP32的ADC模块读取传感器数据,并将数据通过WiFi或者蓝牙传输到PC端。在PC端,可以使用Python的Matplotlib库绘制折线图显示数据。
以下是一个简单的示例代码:
ESP32端代码:
```C++
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
const char* ssid = "your_SSID";
const char* password = "your_PASSWORD";
WebServer server(80);
const int adcPin = 34;
void setup() {
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
server.on("/", [](){
String html = "<html><head><script src=\"https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.8.4/dist/tf.min.js\"></script><script>";
html += "var x = [];\n";
html += "var y = [];\n";
html += "var chart = null;\n";
html += "function addData(data) {\n";
html += " x.push(Date.now());\n";
html += " y.push(data);\n";
html += " if (x.length > 20) {\n";
html += " x.shift();\n";
html += " y.shift();\n";
html += " }\n";
html += " if (chart == null) {\n";
html += " var ctx = document.getElementById('chart').getContext('2d');\n";
html += " chart = new Chart(ctx, {\n";
html += " type: 'line',\n";
html += " data: {\n";
html += " labels: x,\n";
html += " datasets: [{\n";
html += " label: 'Sensor Data',\n";
html += " data: y,\n";
html += " backgroundColor: 'rgba(255, 99, 132, 0.2)',\n";
html += " borderColor: 'rgba(255, 99, 132, 1)',\n";
html += " borderWidth: 1\n";
html += " }]\n";
html += " },\n";
html += " options: {\n";
html += " scales: {\n";
html += " xAxes: [{\n";
html += " type: 'time',\n";
html += " time: {\n";
html += " unit: 'second'\n";
html += " }\n";
html += " }]\n";
html += " }\n";
html += " }\n";
html += " });\n";
html += " } else {\n";
html += " chart.data.datasets[0].data = y;\n";
html += " chart.data.labels = x;\n";
html += " chart.update();\n";
html += " }\n";
html += "}\n";
html += "var socket = new WebSocket('ws://' + location.hostname + ':81/');\n";
html += "socket.onmessage = function(event) {\n";
html += " var data = JSON.parse(event.data);\n";
html += " addData(data.value);\n";
html += "}\n";
html += "</script></head><body><canvas id=\"chart\"></canvas></body></html>";
server.send(200, "text/html", html);
});
server.begin();
Serial.println("Server started");
}
void loop() {
float value = analogRead(adcPin) * 3.3 / 4095;
String json = "{\"value\":" + String(value) + "}";
server.send(200, "application/json", json);
delay(100);
}
```
PC端代码:
```Python
import websocket
import json
import matplotlib.pyplot as plt
from matplotlib.animation import FuncAnimation
x = []
y = []
def on_message(ws, message):
global x, y
data = json.loads(message)
x.append(data['time'])
y.append(data['value'])
if len(x) > 20:
x.pop(0)
y.pop(0)
plt.cla()
plt.plot(x, y)
plt.xlabel('Time')
plt.ylabel('Value')
plt.title('Sensor Data')
def on_error(ws, error):
print(error)
def on_close(ws):
print("Connection closed")
def on_open(ws):
print("Connection opened")
if __name__ == "__main__":
ws = websocket.WebSocketApp("ws://192.168.1.100:81/",
on_message = on_message,
on_error = on_error,
on_close = on_close)
ws.on_open = on_open
ani = FuncAnimation(plt.gcf(), on_message, interval=1000)
plt.show()
ws.run_forever()
```
这个代码示例使用WebSocket实现ESP32与PC端的通信,并使用Matplotlib库绘制折线图显示传感器数据。你可以将ESP32的IP地址替换成你实际的IP地址,并根据需要调整参数。
阅读全文