나는 유닉스 명령어와 스크립팅에 능숙하지만 웹 경험이 거의 없다. CPU로드 나 시스템 temp와 같은 관심있는 통계를 수집하고 매 10 초마다 파일을 업데이트하는 스크립트가 있습니다. 필자는이 데이터의 그래픽 표현을 실시간으로 업데이트하고있는 내 pi가 호스트하는 로컬 웹 사이트를 가리키고 싶습니다.라즈베리 파이 파이가 CPU temp, CPU로드 등을 나타내는 다이얼이있는 웹 페이지를 실시간으로 호스팅하려면 무엇을해야합니까?
간단한 Apache 웹 서버를 설정하기 전에 작업했으며 HTML과 JavaScript를 작성할 수 있습니다. 그 외에도, 나는 길을 잃었고 나를 올바른 방향으로 인도 할 누군가가 필요합니다. 감사!
명령 줄과 bash가 편하기 때문에 Apache/nginx/웹 서버를 설치하면 json의 json 명령 줄 인코더/파서와 함께 json에서 data.json 파일을 포맷합니다.
파일에서 제목과 강의 시간과 같은 메타 데이터가있는 json 구조로 센서 판독 값을 저장합니다. 코드 뒤의 예 :
최소한의 HTML 페이지 구조, 자바 스크립트로 검색된 데이터의 형식을 지정하는 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>{
"title": "raspberry my",
"timestamp": "20171227T23:45:00Z01",
"sensors": [
{ "name":"cpu temperature",
"reading":"57.6C"},
{"name":"motherboard temp.",
"reading":"34.02C"}
/*, other sensors objects */
]
}
aja 라이브러리는 페이지가로드되면 dinamically 데이터를 검색 할 상품은 다음과 같습니다
data.json 파일의 형식이 하나 (사용하기 전에 주석 라인을 제거)과 같다. 누락 된 x은 의도적입니다.
C3.js 라이브러리는 데이터 형식을 지정하는 데 더 많은 작업이 필요하지만 더 멋진 출력을 얻을 수 있습니다.
더 많은 지침이 필요하고 아무도 더 정교한 솔루션을 제공하지 못한다면 다음 번에 더 많은 아이디어를 개발할 수 있습니다. – Eineki
이것은 프로그래밍 능력과 관련이 있으며 아이디어를 좋아합니다 ... 추가 입력 사항은 많이 부탁드립니다. – jake9115
개념을 확장하려면 컴퓨터와 다소 충전 된 배터리가 필요합니다. – Eineki