我很擅长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服务可用，我发现它非常容易使用。