我在终端中使用此命令来显示传感器cat /sys/bus/w1/devices/28-000005330085/w1_slave | grep "t=" | awk -F "t=" '{print $2/1000}'
检测到的温度事实上,我的html文件返回了一个图形,它的y轴表示随机数。我想用传感器传递的数据来替换这些数字,但我不知道怎么做!这是我的html文件,带有随机数
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random() * 40 ;
series.addPoint([x, y], true, true);
}, 3000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
}())
}]
});
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
一旦你的客户端读取了你的HTML文件,它就离开了你的服务器,并加载了加载时存在的所有信息(例如,你的数据点可以由服务器(PHP?)读取传感器编写的文件来填充,但它不会在浏览器上动态更新——除非您编写一个函数(JavaScript)来不时地从服务器获取信息。例如,在中
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random() * 40 ;
series.addPoint([x, y], true, true);
}, 3000);
您可以编写一个ajax函数来从服务器获取最新点。您的传感器可以将临时数据写入服务器频繁读取的文件,该文件是ajax调用的结果。您还可以使用websocket为每次传感器更新更新本地页面数据。