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（测量后通过raspi上的java生成）：

{"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>

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

Raspberry Pi应用程序的信息网页

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-01 16:24:52

Raspberry Pi应用程序的信息网页

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-01 16:24:52

解决方案1
0 已采纳 2015-03-01 16:24:52