我很擅长Unix命令和脚本,但几乎没有网络经验。我有一个脚本可以获取我感兴趣的指标,比如CPU负载或系统温度,并且每10秒更新一次文件。我想将我的iPad指向由我的pi托管的本地网站,该网站具有该数据的实时更新图形表示。
我在设置一个简单的Apache Web服务器之前就已经工作过,并且可以编写HTML和JavaScript。除此之外,我迷失了,需要有人指出我正确的方向。谢谢!
既然您可以轻松使用命令行和bash,我会安装apache / nginx /任何Web服务器,我会使用jq(json命令行编码器/解析器)在json中格式化data.json
文件。
在文件中,我将传感器读数保存在json结构中,其中包含一些元数据,如标题和讲座时间。代码后的一个例子:
一个最小的html页面结构,用于格式化javascript检索的数据的一些css。
添加c3.js或类似的库,以便快速简便地获取数据的量程或其他图形呈现。我懒得自己做。
function popolate_dashboard(data) {
document.getElementById("title").innerHTML = data.title;
document.getElementById("timestamp").innerHTML = data.timestamp;
var target = document.getElementById("content");
data.sensors.forEach(function(sensor){
target.innerHTML = target.innerHTML +
"<div class='sensor'>" +
"<span>" + sensor.name + "</span>" +
"<span>" + sensor.reading + "</span>" +
"</div>";
});
}
/* Read the data via ajax every minute*/
setInterval(
function(){
aja().url('data.json')
.on('success', popolate_dashboard)
.go();
}
, 60000 /* 60 seconds * 1000 */
);
div.sensor {
border: 2px solid #a6a6a6;
border-radius: 0.25em;
display: inline-block;
margin-left: 1em;
max-width: 8em;
width: 8em;
}
div.sensor span {
display:inline-block;
padding-bottom:1em;
padding-top:1em;
text-align: center;
width: 100%;
}
div.sensor span:nth-child(2) {
background: #a6a6a6;
}
<html>
<head><title>Sensor Readings</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aja/0.4.1/aja.min.js"></script>
<link rel="stylesheet" type="text/css" href="readings.css"/>
</head>
<body>
<h1 id="title">loading...</h1>
<h2 id="timestamp"></h2>
<div id="content"></div>
</body>
</html>
然后我将创建一个简单的snapshot.html页面,它加载data.json文件并创建您需要的仪表板。
data.json文件的格式与此类似(在使用前删除注释行):
{
"title": "raspberry my",
"timestamp": "20171227T23:45:00Z01",
"sensors": [
{ "name":"cpu temperature",
"reading":"57.6C"},
{"name":"motherboard temp.",
"reading":"34.02C"}
/*, other sensors objects */
]
}
aja库是一种在页面加载后以动态方式检索数据的商品。失踪的x
是故意的。
C3.js库需要更多的工作来格式化数据,但允许获得更高的输出。
我假设你的脚本是用python编写的?因为如果是这样,你可能想看看Flask。它使您只需使用几行python即可使您的Web服务可用,我发现它非常容易使用。