Raspberry Pi 申请的信息网页

Question

我在 rPi2 上有一个应用程序运行。它读取传感器值并在文件上记录时间标记（写在 java 中）。我需要设置一个网页来显示这些日志。由于 Pi 将是无头的，我决定采用网页方式。我选择 charts.js 作为图表绘图库。它接受这样的图表数据：

var lineChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                label: "My First dataset",
                fillColor : "rgba(220,220,220,0.2)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [1.1,2.2,3.3,4.4,5.5,6,7,8,9]
            }
        ]

    }

我需要以编程方式更改 JSON 上的数据和标签值。并将此页面提供给本地网络。我试图用这种 JSON 格式生成我的日志，但事实证明，如果用户不从对话框中选择文件，JS 就无法加载本地文件。那么对此有什么想法吗？

Answer 1

这是一个很棒的项目。我做了以下事情：

tmp_data.txt（测量后通过 java 在 raspi 上生成）：

{"labels" : ["January","February","March","April","May","June","July"],
    "datasets" : [
        {
            "label": "My First dataset",
            "fillColor" : "rgba(220,220,220,0.2)",
            "strokeColor" : "rgba(220,220,220,1)",
            "pointColor" : "rgba(220,220,220,1)",
            "pointStrokeColor" : "#fff",
            "pointHighlightFill" : "#fff",
            "pointHighlightStroke" : "rgba(220,220,220,1)",
            "data" : [1.1,2.2,3.3,4.4,5.5,6,5]
        }
    ]
}

tmp_data.html:

<html>
  <head>
    <script src="../Chart.js"></script>
    <script>
        function loadXMLDoc() {
            var xmlhttp=new XMLHttpRequest();
            xmlhttp.onreadystatechange=function() {
              if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var lineChartData = JSON.parse(xmlhttp.responseText);
                var ctx = document.getElementById("canvas").getContext("2d");
                new Chart(ctx).Line(lineChartData, {responsive: true});
              }
            }
            xmlhttp.open("GET","tmp_data.txt",true);
            xmlhttp.send();
        }
    </script>

</head>
    <body onload="loadXMLDoc()">
        <div style="width:30%">
            <div>
                <canvas id="canvas" height="450" width="600"></canvas>
            </div>
        </div>
    </body>
</html>

数据文件中的'fields'必须用引号括起来。加载站点时调用 onload 函数。 txt 文件将通过 httprequest 读取，并且必须与 html 页面位于同一目录中。我建议 raspi 上的某些网络服务器将提供 html.
据我所知，如果没有用户交互，js 无法在客户端加载本地文件，因为这可能是一个严重的安全问题。

Raspberry Pi 申请的信息网页

Info Web Page For Raspberry Pi Application

javascript

java

raspberry-pi