自动刷新 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) });
  });
}