CODEWITHSUNDEEP
apacheuser-interfaceunixraspberry-pi
jake9115
jake9115

Reputation: 4084

What do I need to do to have my raspberry pi host a webpage with dials indicating CPU temp, CPU load, etc., in real time?

I am good with Unix commands and scripting, but have nearly no web experience. I have a script that grabs metrics I’m interested in, like CPU load or system temp and updates a file every 10 seconds. I would like to point my iPad to a local website hosted by my pi that has a real-time updating graphical representation of this data.

I’ve worked before setting up a simple Apache web server, and can write HTML and JavaScript. Besides that, I am lost and need someone to point me in the right direction. Thanks!

Upvotes: 0

Views: 74

Answers (2)

Eineki
Eineki

Reputation: 14959

Since you are at ease with command line and bash, I would install apache/nginx/whatever web server and I would format the data.json file in json with jq, a json command line encoder/parser.

In the file I would save the sensor readings in a json structure with a bit of metadata like a title and the time of the lectures. An example after the code:

A minimal html page structure, a bit of css for formatting the data retrieved by javascript.

Add c3.js or a similar library for a quick and easy way to obtain gauges or other graphical rendering of the data. I'm too lazy to do it by myself.

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>

Then I would create a simple snapshot.html page that load the data.json file and create the dashboard you need.

The format of the data.json file is like this one (remove the comments line before use): 

{
"title": "raspberry my", 
"timestamp": "20171227T23:45:00Z01",
"sensors": [
     { "name":"cpu temperature",
       "reading":"57.6C"}, 
     {"name":"motherboard temp.",
      "reading":"34.02C"} 
      /*, other sensors objects */
    ]
}

The aja library is a commodity to retrieve data dinamically once the page is loaded. The missing x is intentional.

The C3.js library needs more work to format the data but permits to obtain a fancier output.

Upvotes: 1

Jotha
Jotha

Reputation: 428

I'm assuming your script is written in python? Because if so, you might want to check out Flask. It enables you to make your web service available using only a few lines of python, and I found it incredibly easy to use.

Upvotes: 2

Related Questions