[英]Automatically refreshing some PHP Code inside a Java Script
I'm building a small monitoring web page on my Pi to track some power readings from a power meter.我正在我的 Pi 上构建一个小型监控 web 页面,以跟踪来自功率计的一些功率读数。
Currently I'm adding some gauges to the setup so it looks all pretty, I'm using canvas-gauges ( https://canvas-gauges.com/ ) to do this.目前我正在为设置添加一些仪表,所以它看起来很漂亮,我正在使用 canvas-gauges ( https://canvas-gauges.com/ ) 来执行此操作。
I have a python script in the background pulling the data from the meter and then saving it to a file every minute, which I am then accessing via PHP to display the data on the web page side.我在后台有一个 python 脚本从仪表中提取数据,然后每分钟将其保存到一个文件中,然后我通过 PHP 访问该文件以在 web 页面上显示数据。 I have the data displaying as text, which auto updates just fine, however the gauge collects the variable on start up and then never changes, see code below:我将数据显示为文本,自动更新就好了,但是仪表在启动时收集变量然后永远不会改变,请参见下面的代码:
...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>
What happens: What currently happens is that the text section of the code will update every 10 seconds, and after a minute, it will display the newly pulled $volts data from the text file, ie, the first reading will read as "The Voltage is 241.567 V" and after a minute it will read as: "The Voltage is 240.345 V"发生了什么:目前发生的情况是代码的文本部分会每 10 秒更新一次,一分钟后,它会显示从文本文件中新拉取的 $volts 数据,即第一个读数将读取为“电压为 241.567 V”,一分钟后将显示为:“电压为 240.345 V”
The gauge will read the first reading as 241.567 and display this correctly, however after a minute the value does not change to the new value.仪表将第一个读数读取为 241.567 并正确显示,但一分钟后该值不会更改为新值。
If I right click -> inspect the web page, I can see that the $volts variable has not updated in the Java Script section at the bottom, but it has updated in the div VoltsR.如果我右键单击 -> 检查 web 页面,我可以看到 $volts 变量在底部的 Java 脚本部分中没有更新,但它在 div VoltsR 中已更新。
How would I get both values to update accordingly?我如何让这两个值相应地更新?
Thanks,谢谢,
Chris G assisted in getting me to where I wanted to be: Chris G 帮助我到达了我想去的地方:
I created a separate php file that pulled the data from a file ( /data/getData.php
), then used the $.get()
command to pull this data every so often and update the graph:我创建了一个单独的 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) });
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.