Info Web Page For Raspberry Pi Application
Question
I have an application running on rPi2. Which reads sensor values and logs them with Time marks on file(written in java). I need to setup a webpage to show these logs. Since Pi will be a headless, i decided to go with webpage way. I picked charts.js as chart drawing library. And it accepts chart data like this :
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]
}
]
}
I need to change data and labels values on JSON programatically. And serve this page to local network. I tried to generate my Log with this JSON format but turns out JS cannot load Local File without a user picking a file from dialog. So any ideas on this?
1 answers
solution1
0 ACCPTED 2015-03-01 16:24:52
This is a cool project. I did the following:
tmp_data.txt (generated via java on the raspi after measurements):
{"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>
The 'fields' in the data file has to be surrounded with quotes. The onload function is called when the site is loaded. The txt file will be read via a httprequest and has to be in the same directory as the html page. I would recommend that some webserver on the raspi will deliver the html.
As far as i know js cannot load a local file on the client without user interaction because this could be a serious security issue.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.