私はUnixのコマンドとスクリプトにはうってつけですが、Webの経験はほとんどありません。私はCPU負荷やシステムの温度などの興味深いメトリックを取得し、10秒ごとにファイルを更新するスクリプトを用意しています。私は、このデータのグラフィック表示をリアルタイムで更新している私のpiによってホストされているローカルウェブサイトにiPadを向けたいと思っています。ラズベリーパイホストに、CPUの温度、CPU負荷などを示すダイヤルをリアルタイムで表示するには、何が必要ですか？
私は単純なApache Webサーバーを設定する前に仕事をしており、HTMLとJavaScriptを書くことができます。それ以外に、私は失われており、正しい方向で私を指差す人が必要です。ありがとう！
あなたはコマンドラインとbashに慣れているので、私はapache/nginx/Webサーバーをインストールし、data.jsonファイルをjson、jsonコマンドラインエンコーダ/パーサーで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>それから私はdata.jsonファイルを読み込む簡単なsnapshot.htmlページを作成し、必要なダッシュボードを作成します。 ajaライブラリーは、ページがロードされるとdinamicallyデータを取得するための商品です
{
"title": "raspberry my",
"timestamp": "20171227T23:45:00Z01",
"sensors": [
{ "name":"cpu temperature",
"reading":"57.6C"},
{"name":"motherboard temp.",
"reading":"34.02C"}
/*, other sensors objects */
]
}
：
data.jsonファイルの形式は、この1（使用前にコメント行を削除する）のようなものです。紛失したxは意図的です。
ライブラリC3.jsライブラリは、データをフォーマットするためにはもっと多くの作業が必要ですが、より良い出力を得ることができます。
もっと指示を必要としていてもっと精巧な解決策がない人は、次の時間にアイデアをさらに発展させることができます – Eineki
これは私のプログラミング能力に見合ったもので、アイデアが好きです... – jake9115
私はコンセプトを広げるために、コンピュータと幾分充電されたバッテリーが必要です。 – Eineki