27

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.

Peter Mortensen
  • 12,326
jake9115
  • 1,249

6 Answers6

30

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

Peter Mortensen
  • 12,326
stephenhouser
  • 560
9

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

Rui F Ribeiro
  • 632
6

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);
  });
});
Peter Mortensen
  • 12,326
jdwolf
  • 2,370
4

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

jwygralak67
  • 141
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.

Peter Mortensen
  • 12,326
McMuffinDK
  • 121
1

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

Basile Starynkevitch
  • 1,176