Question

我熟悉Unix命令和脚本，但几乎没有网络经验。我有一个脚本可以获取我感兴趣的指标，比如CPU负载或系统温度，并且每10秒更新一次文件。我想将我的iPad指向由我的pi托管的本地网站，该网站具有该数据的实时更新图形表示。

我在设置一个简单的Apache Web服务器之前已经工作过，并且可以编写HTML和JavaScript。除此之外，我迷失了，需要有人指出我正确的方向。谢谢！

Answer 1

我假设你的脚本是用python编写的？因为如果是这样，您可能需要查看Flask。它使您只需几行python即可使您的Web服务可用，我发现它非常容易使用。

Answer 2

由于您可以轻松使用命令行和bash，我会安装apache / nginx /任何Web服务器，我会使用jq（json命令行编码器/解析器）格式化json中的data.json文件。

在文件中，我会将传感器读数保存在json结构中，并带有一些元数据，如标题和讲座时间。代码之后的一个例子：

最小的html页面结构，用于格式化javascript检索的数据的css。

添加c3.js或类似的库，以便快速简便地获取数据的量程或其他图形呈现。我自己太懒了。

＆＃13;

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 */
);

＆＃13;

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;
}

＆＃13;

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

＆＃13;

然后我会创建一个简单的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库需要更多的工作来格式化数据，但允许获得更高级的输出。

我需要做些什么来让我的覆盆子pi主持一个带有拨号的网页，实时显示CPU温度，CPU负载等？

2 个答案: