28

I am good with Unix commands and scripting, but I 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 Raspberry Pi, that has a real-time updating graphical representation of this data.

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

  • 2
    Your question is a bit too broad. Do you want some quick and dirty solution, or do you want to code a minimal program which fits on even small Linux embedded systems? – Basile Starynkevitch Dec 28 '17 at 11:55
  • I initially was looking for something quick and dirty, but the availability of very nice tools mentioned below now has me more interested. – jake9115 Dec 29 '17 at 0:55
  • FYI there's also a Raspberry Pi Stack: raspberrypi.stackexchange.com – Todd Wilcox Dec 29 '17 at 17:23
  • github.com/firehol/netdata is very easy to set up. Haven't tested it on a Pi though – Der Hochstapler Jan 2 '18 at 19:11
31

I use Grafana with InfluxDB for this on my Raspberry Pi 3. They are both relatively easy to setup and connect to each other. They even work well in Docker containers on the Raspberry Pi.

I stream all my updates into InfluxDB as they are generated. Then Grafana does all the graphical work of displaying them in a nice visual format. I designed a simple dashboard just for my old iPad with its smaller screen.

It does sound like a lot of installing and overhead, but it sure does look pretty.

Enter image description here

  • Very cool. Do you happen to have any screenshots of your Grafana monitors? Just curious. – jake9115 Dec 27 '17 at 23:50
  • Yup. Might not make much sense, this one is a mish-mash of things. Snapped on my computer, so not sized as it looks on the iPad. – 0xACE Dec 27 '17 at 23:54
  • Looks awesome, can't wait to set mine up! I have a 16 node orange pi server that this will be perfect for. Thanks again. – jake9115 Dec 28 '17 at 0:04
  • (off topic) I saw your other question about joining the Pi's together into something that looked like a single board with multiple cores. Was about to send a note that the HPC guy at the college I work at had set up a system but then remembered he was using "son of grid engine" which does not do what you were looking for. – 0xACE Dec 28 '17 at 0:06
  • 1
    @0xACE Considering its on a pi its a pretty bad idea to be spamming the apache server with requests as well. Also the 10s refers to the askers current setup whereas they want something faster. – jdwolf Dec 28 '17 at 0:50
10

For having a lightweight and very easy web monitoring dashboard to setup (and extend) monitoring page on your Raspberry you have got RPi Monitor.

It comes with some defaults and the configuration is mostly editing a couple of simple text files. I configured it easily to add humidity graphs from a DTH21.

img_link img_link2

  • 2
    I appreciate the contribution; this seems really lightweight and maybe a nice graphing choice while I learn to setup some of the more involved solutions here. Thanks! – jake9115 Dec 28 '17 at 13:47
  • You are welcome. I have used it for nearly 3 years at home. see related question electronics.stackexchange.com/questions/236530/… – Rui F Ribeiro Dec 28 '17 at 13:53
7

For realtime applications on the web the best tool is WebSocket. Usually these are implemented in the application server, not the web server, but Apache provides a way to proxy websockets. This could easily provide per second or subsecond updates.

Which library you use on the application server depends on what web platform you want to use, but for example a popular one for Node.js is Socket.IO.

On the client side you can set up a connection like this:

socket = new WebSocket("ws://website.net:8282");

socket.addEventListener('message', function (event) {
    var message = event.data;
    // Code to update site
});

On the server side with Node.js using the basic WebSocket library:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8282 });
wss.on('connection', function connection(ws) {
  dataOnUpdateEvent(function(event) {
    var data = event.getdata();
    var message = parseData(data);
    ws.send(message);
  });
});
  • 1
    Thanks for the idea. This is very useful, but looks like a lot of groundwork, which is understandable. – jake9115 Dec 27 '17 at 23:50
  • 2
    @jake9115 Heh well your question seemed to suggest you were interested in making this application yourself. – jdwolf Dec 27 '17 at 23:58
  • 2
    In all honestly I really was aiming to code it myself, but that grafana is so slick looking that I wouldn't want to reinvent the wheel on this one. Thanks though! – jake9115 Dec 28 '17 at 0:05
5

You could also look at Node-RED https://nodered.org It comes stock on Raspbian

Here's a dashboard I built enter image description here

  • I'll look into it, thanks for the contribution. – jake9115 Dec 28 '17 at 13:47
  • 1
    I use Node-Red with my setup, but the historical data is only valid as long as your instance is running. That is, if you redeploy (or lose power) none of the historical measurements are kept, your charts all start over from nothing. That feature is what prompted me to start actually logging into InfluxDB. – 0xACE Dec 28 '17 at 17:53
  • Ah, nice to know. Historical data is important to me. I really like how your graphs even incorporate other web-based info, like bitcoin prices. That was beyond my initial scope, but not anymore. – jake9115 Dec 29 '17 at 0:54
  • Yes, that example I even include data from an app I have on the iOS App Store (for Boy Scouts doing good turns) that stores it’s data into google fire base. That’s the map at the bottom. I use node red to pull the data from fire base and push it into influx,so it’s not all influx and grafana. – 0xACE Dec 29 '17 at 15:44
2

I use phpSysInfo to monitor all my Linux servers/computers, and I really like how simple it is. The settings are also very easy to understand, and you can set your own refresh rate.

2

If you want to code in C or C++, you might use some HTTP server library like libonion or Wt to code your specialized HTTP server (perhaps using sqlite for database). You then should understand well the HTTP protocol (including HTTP cookies and HTTP headers) and HTML5.

You may want to use Ajax and WebSocket techniques (WebSockets are supported by libonion & Wt, Ajax gives ordinary HTTP requests initiated by JavaScript code running in the client browser). You could use HTML5 canvas and/or SVG for graphics. You may find some HTML5 web frameworks useful; most of them are using Javascript, DOM, HTML5, ....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.