自动刷新 PHP 脚本中的一些 PHP 代码
Automatically refreshing some PHP Code inside a Java Script
我正在我的 Pi 上构建一个小型监控网页来跟踪功率计的一些功率读数。
目前我正在为设置添加一些仪表,所以它看起来很漂亮,我正在使用 canvas-仪表 (https://canvas-gauges.com/) 来执行此操作。
我在后台有一个 python 脚本从仪表中提取数据,然后每分钟将其保存到一个文件中,然后我通过 PHP 访问该文件以在网页端。我将数据显示为文本,自动更新就好了,但是仪表会在启动时收集变量,然后永远不会改变,请参见下面的代码:
...Some code...
<?php
$dataFile = "data/Data.txt";
if (file_exists($dataFile)) {
chmod($dataFile, 0777);
} else {
echo "The file $dataFile does not exist";
}
$dataLines = file($dataFile);
$volts = $dataLines[3];
?>
...Some code...
<div id="voltsR" class="voltsR">
<?php echo "The Voltage is $volts V";
?>
</div>
<canvas id="voltG">
</canvas>
...Some Code...
<script type="text/javascript">
setInterval("reload();",10000); <!-- time in milliseconds -->
function reload() {
$("#voltsR").load(location.href+" #voltsR");
voltGr.update({value: <?php echo $volts ?>});
}
</script>
<script>
var voltGr = new RadialGauge ({
renderTo:"voltG",
width:"150",
height:"150",
units:"V",
title:"Volts",
minValue:"0",
maxValue:"300",
majorTicks:"0,20,40,60,80,100,120,140,160,180,200,220,240,260,280,300",
minorTicks:"2",
strokeTicks:"false",
highlights:[
{ "from": 0, "to": 210, "color": "rgba(166, 28, 28, .25)" },
{ "from": 210, "to": 245, "color": "rgba(28, 166, 28, .25)" },
{ "from": 245, "to": 300, "color": "rgba(166, 28, 28, .25)" }
],
colorPlate:"#222",
colorMajorTicks:"#f5f5f5",
colorMinorTicks:"#ddd",
colorTitle:"#fff",
colorUnits:"#ccc",
colorNumbers:"#eee",
colorNeedleStart:"rgba(240, 128, 128, 1)",
colorNeedleEnd:"rgba(255, 160, 122, .9)",
valueBox:"true",
animationRule:"bounce",
animationDuration:"500",
fontValue:"Led",
animatedValue:"true"});
voltGr.draw();
voltGr.value = <?php echo $volts ?>;
</script>
发生了什么:
目前发生的是,代码的文本部分将每 10 秒更新一次,一分钟后,它将显示从文本文件中新提取的 $volts 数据,即,第一次读取将读取为 "The Voltage is 241.567 V" 和一分钟后,它将显示为:"The Voltage is 240.345 V"
仪表将第一个读数读取为 241.567 并正确显示,但一分钟后该值不会更改为新值。
如果我右键单击 -> 检查网页,我可以看到 $volts 变量在底部的 Java 脚本部分没有更新,但在 div VoltsR.
我如何让这两个值相应地更新?
谢谢,
Chris G 帮助我到达了我想去的地方:
我创建了一个单独的 php 文件,从文件 (/data/getData.php
) 中提取数据,然后使用 $.get()
命令每隔一段时间提取此数据并更新图表:
setInterval(reload, 10000); // time in milliseconds
function reload() {
$("#voltsR").load(location.href + " #voltsR");
$.get("/data/getData.php", function (valString) {
voltGr.update({ value: parseFloat(valString, 10) });
});
}
我正在我的 Pi 上构建一个小型监控网页来跟踪功率计的一些功率读数。
目前我正在为设置添加一些仪表,所以它看起来很漂亮,我正在使用 canvas-仪表 (https://canvas-gauges.com/) 来执行此操作。
我在后台有一个 python 脚本从仪表中提取数据,然后每分钟将其保存到一个文件中,然后我通过 PHP 访问该文件以在网页端。我将数据显示为文本,自动更新就好了,但是仪表会在启动时收集变量,然后永远不会改变,请参见下面的代码:
...Some code...
<?php
$dataFile = "data/Data.txt";
if (file_exists($dataFile)) {
chmod($dataFile, 0777);
} else {
echo "The file $dataFile does not exist";
}
$dataLines = file($dataFile);
$volts = $dataLines[3];
?>
...Some code...
<div id="voltsR" class="voltsR">
<?php echo "The Voltage is $volts V";
?>
</div>
<canvas id="voltG">
</canvas>
...Some Code...
<script type="text/javascript">
setInterval("reload();",10000); <!-- time in milliseconds -->
function reload() {
$("#voltsR").load(location.href+" #voltsR");
voltGr.update({value: <?php echo $volts ?>});
}
</script>
<script>
var voltGr = new RadialGauge ({
renderTo:"voltG",
width:"150",
height:"150",
units:"V",
title:"Volts",
minValue:"0",
maxValue:"300",
majorTicks:"0,20,40,60,80,100,120,140,160,180,200,220,240,260,280,300",
minorTicks:"2",
strokeTicks:"false",
highlights:[
{ "from": 0, "to": 210, "color": "rgba(166, 28, 28, .25)" },
{ "from": 210, "to": 245, "color": "rgba(28, 166, 28, .25)" },
{ "from": 245, "to": 300, "color": "rgba(166, 28, 28, .25)" }
],
colorPlate:"#222",
colorMajorTicks:"#f5f5f5",
colorMinorTicks:"#ddd",
colorTitle:"#fff",
colorUnits:"#ccc",
colorNumbers:"#eee",
colorNeedleStart:"rgba(240, 128, 128, 1)",
colorNeedleEnd:"rgba(255, 160, 122, .9)",
valueBox:"true",
animationRule:"bounce",
animationDuration:"500",
fontValue:"Led",
animatedValue:"true"});
voltGr.draw();
voltGr.value = <?php echo $volts ?>;
</script>
发生了什么: 目前发生的是,代码的文本部分将每 10 秒更新一次,一分钟后,它将显示从文本文件中新提取的 $volts 数据,即,第一次读取将读取为 "The Voltage is 241.567 V" 和一分钟后,它将显示为:"The Voltage is 240.345 V"
仪表将第一个读数读取为 241.567 并正确显示,但一分钟后该值不会更改为新值。
如果我右键单击 -> 检查网页,我可以看到 $volts 变量在底部的 Java 脚本部分没有更新,但在 div VoltsR.
我如何让这两个值相应地更新?
谢谢,
Chris G 帮助我到达了我想去的地方:
我创建了一个单独的 php 文件,从文件 (/data/getData.php
) 中提取数据,然后使用 $.get()
命令每隔一段时间提取此数据并更新图表:
setInterval(reload, 10000); // time in milliseconds
function reload() {
$("#voltsR").load(location.href + " #voltsR");
$.get("/data/getData.php", function (valString) {
voltGr.update({ value: parseFloat(valString, 10) });
});
}