Question

我正在尝试为Raspberry Pi制作一个简单的Web GUI。它应该使用php和JavaScript在图像上绘制温度值。

我将在PHP和我正在编写的C ++应用程序之间使用一些IPC。但是现在我只想从文件中读取一个值并将其绘制在图像上。（该文件是使用OWFS的1wire总线的温度值）

我的问题

JavaScript函数ReadTemps（）每5秒调用一次，但PHP值仅在页面刷新时更新。
我没有JavaScript经验。

代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Still life web application</title>
    <canvas id="myCanvas" width="768" height="576" style="border:0px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>

    <?php
            function get_temp()
            {
                    echo round( floatval( file_get_contents( '/mnt/1wire/uncached/vessel/temperature' ) ), 2 );
            }
    ?>

    <script>
            var bgImg = new Image();
            bgImg.src = 'image.jpg';

            function ReadTemps()
            {
                    var vessel_temp = '<?php get_vessel_temp();  ?>';

                    var c = document.getElementById( "myCanvas" );
                    var ctx = c.getContext( "2d" );

                    ctx.drawImage( bgImg, 0, 0 );

                    ctx.font="20px Georgia";
                    ctx.fillText( vessel_temp + '\u00B0', 330, 430 );

                    setTimeout( ReadTemps, 5000 );
            }
            window.onload = ReadTemps;
    </script>
</head>
<body>
    <a href="javascript:ReadTemps();">Update</a>
</body>
</html>

如果我在ReadTemps中添加一个警告（“你好”），它会每5秒弹出一次。

解决方案

<script>
    var bgImg = new Image();
    stillImg.src = 'image.jpg';

    function ReadTemps()
    {
        var vessel_temp = loadXMLDoc( 'get_vessel.php' );

        var c = document.getElementById( "myCanvas" );
        var ctx = c.getContext( "2d" );

        ctx.drawImage( bgImg, 0, 0 );

        ctx.font="20px Georgia";
        ctx.fillText( vessel_temp + '\u00B0', 330, 430 );

        setTimeout( ReadTemps, 5000 );
    }

    function loadXMLDoc( file )
    {
        var xmlhttp;
        if( window.XMLHttpRequest )
            xmlhttp = new XMLHttpRequest();
        else
            xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );

        xmlhttp.open( "GET", file, false );
        xmlhttp.send( null );

        if( xmlhttp.readyState == 4 && xmlhttp.status == 200 )
            return xmlhttp.responseText;
        else
            return "error";
    }
    window.onload = ReadTemps;
</script>

Answer 1

答案很简单，你必须使用AJAX而不是在Javascript中包含PHP代码，你必须创建一个php文件（get_temp.php）并通过AJAX调用获取它的内容。

首先，创建get_temp.php文件：

<?php // get_temp.php
print round( floatval( file_get_contents( '/mnt/1wire/uncached/vessel/temperature' ) ), 2 );
die;
?>

其次，调整您的Javascript代码以执行AJAX调用：

<script>
var bgImg = new Image();
bgImg.src = 'image.jpg';

function ReadTemps() {
    loadXMLDoc('get_temp.php'); 
    setInterval(loadXMLDoc, 5000, 'get_temp.php');
}

function ShowTemp(temp){
    var c = document.getElementById( "myCanvas" );
    var ctx = c.getContext( "2d" );

    ctx.drawImage( bgImg, 0, 0 );

    ctx.font="20px Georgia";
    ctx.fillText( temp + '\u00B0', 330, 430 );
}

function loadXMLDoc(file) {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                ShowTemp(xmlhttp.responseText);
        }
    }
    xmlhttp.open("GET",file,true);
    xmlhttp.send();
}

        window.onload = ReadTemps;
</script>

如您所见，我在您的代码中添加了一个loadXMLDoc，此函数对您服务器中的任何文件执行AJAX调用。

当然，你可以使用jQuery来做同样的事情，但它增加了客户端加载的时间，如果你只需要做一个AJAX调用是完全没必要的。

希望它有所帮助！

Answer 2

使用AJAX可以实现您的目标。使用AJAX，您可以调用PHP脚本，该脚本将被执行并将值返回到已加载的站点。然后可以使用javascript处理此值。因此，您可以每5秒调用一次PHP脚本并处理该值。

要明白如何做到这一点，请看看@ MDN

Answer 3

您要做的是每五秒执行一次PHP函数get_vessel_temp()。

您的问题是PHP代码只在服务器端执行一次。它不能直接在客户端执行。

你有两个解决方案：你的功能是不是真的很复杂（没有数据库调用，否则？），然后你可以用Javascript重写它。或者你必须执行AJAX调用。

AJAX允许您执行从客户端浏览器到服务器的请求（在您的情况下为PHP文件）。您可以在此处找到信息：https://api.jquery.com/jQuery.ajax/

PHP函数从javascript调用

3 个答案: