Que dois-je faire pour que mon Raspberry Pi héberge une page Web avec des cadrans indiquant la température du processeur, la charge du processeur, etc., en temps réel?

27

Je suis bon avec les commandes et les scripts Unix, mais je n'ai pratiquement aucune expérience Web. J'ai un script qui saisit les mesures qui m'intéressent, comme la charge du processeur ou la température du système et met à jour un fichier toutes les 10 secondes. Je voudrais pointer mon iPad vers un site Web local hébergé par mon Raspberry Pi, qui a une représentation graphique de mise à jour en temps réel de ces données.

J'ai travaillé avant de configurer un simple serveur Web Apache et je peux écrire du HTML et du JavaScript. En plus de cela, je suis perdu et j'ai besoin de quelqu'un pour me diriger dans la bonne direction.

jake9115
la source
2
Votre question est un peu trop large. Voulez-vous une solution rapide et sale, ou voulez-vous coder un programme minimal qui convient même aux petits systèmes embarqués Linux?
Basile Starynkevitch
Au départ, je cherchais quelque chose de rapide et de sale, mais la disponibilité des très bons outils mentionnés ci-dessous m'intéresse plus.
jake9115
Pour info, il y a aussi une pile Raspberry Pi: raspberrypi.stackexchange.com
Todd Wilcox
github.com/firehol/netdata est très facile à configurer. Je ne l'ai pas testé sur un Pi cependant
Der Hochstapler

Réponses:

30

J'utilise Grafana avec InfluxDB pour cela sur mon Raspberry Pi 3. Ils sont tous les deux relativement faciles à configurer et à connecter les uns aux autres. Ils fonctionnent même bien dans les conteneurs Docker sur le Raspberry Pi.

Je diffuse toutes mes mises à jour dans InfluxDB au fur et à mesure qu'elles sont générées. Grafana fait alors tout le travail graphique de les afficher dans un joli format visuel. J'ai conçu un tableau de bord simple pour mon ancien iPad avec son écran plus petit.

Cela ressemble à beaucoup d'installation et de surcharge, mais cela a l'air joli.

Entrez la description de l'image ici

0xACE
la source
Très sympa. Avez-vous des captures d'écran de vos moniteurs Grafana? Juste curieux.
jake9115
Ouaip. Cela n'a peut-être pas beaucoup de sens, celui-ci est un méli-mélo de choses. Capturé sur mon ordinateur, il n'est donc pas dimensionné comme sur l'iPad.
0xACE
Ça a l'air génial, j'ai hâte de configurer le mien! J'ai un serveur pi orange à 16 nœuds pour lequel ce sera parfait. Merci encore.
jake9115
(hors sujet) J'ai vu votre autre question sur la jonction des Pi en quelque chose qui ressemblait à une seule carte avec plusieurs cœurs. Était sur le point d'envoyer une note selon laquelle le gars du HPC du collège dans lequel je travaille avait mis en place un système, mais il s'est ensuite rappelé qu'il utilisait "fils de moteur de grille" qui ne fait pas ce que vous cherchiez.
0xACE
1
@ 0xACE Considérant que c'est sur un pi, c'est une très mauvaise idée de spammer le serveur apache avec des requêtes également. Les 10 se réfèrent également à la configuration actuelle des demandeurs alors qu'ils veulent quelque chose de plus rapide.
jdwolf
9

Pour avoir un tableau de bord de surveillance Web léger et très facile à configurer (et étendre) la page de surveillance sur votre Raspberry, vous disposez de RPi Monitor .

Il est livré avec quelques paramètres par défaut et la configuration modifie principalement quelques fichiers texte simples. Je l'ai configuré facilement pour ajouter des graphiques d'humidité à partir d'un DTH21.

img_link img_link2

Rui F Ribeiro
la source
2
J'apprécie la contribution; cela semble vraiment léger et peut-être un bon choix graphique pendant que j'apprends à configurer certaines des solutions les plus impliquées ici. Merci!
jake9115
Je vous en prie. Je l'utilise depuis près de 3 ans à la maison. voir la question connexe electronics.stackexchange.com/questions/236530/…
Rui F Ribeiro
6

Pour les applications en temps réel sur le Web, le meilleur outil est WebSocket . Habituellement, ceux-ci sont implémentés dans le serveur d'applications, pas le serveur Web, mais Apache fournit un moyen de proxy Websockets. Cela pourrait facilement fournir des mises à jour par seconde ou sous-seconde.

La bibliothèque que vous utilisez sur le serveur d'applications dépend de la plate-forme Web que vous souhaitez utiliser, mais par exemple une populaire pour Node.js est Socket.IO.

Côté client, vous pouvez configurer une connexion comme celle-ci:

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

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

Côté serveur avec Node.js à l'aide de la bibliothèque WebSocket de base:

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);
  });
});
jdwolf
la source
1
Merci pour l'idée. Ceci est très utile, mais ressemble à beaucoup de travaux préparatoires, ce qui est compréhensible.
jake9115
2
@ jake9115 Hé bien votre question semblait suggérer que vous étiez intéressé à faire cette application vous-même.
jdwolf
2
En toute honnêteté, je visais vraiment à le coder moi-même, mais ce grafana est si lisse que je ne voudrais pas réinventer la roue sur celui-ci. Merci quand même!
jake9115
4

Vous pouvez également consulter Node-RED https://nodered.org Il est disponible sur Raspbian

Voici un tableau de bord que j'ai construit entrez la description de l'image ici

jwygralak67
la source
Je vais l'examiner, merci pour la contribution.
jake9115
1
J'utilise Node-Red avec ma configuration, mais les données historiques ne sont valables que tant que votre instance est en cours d'exécution. Autrement dit, si vous redéployez (ou perdez de l'énergie) aucune des mesures historiques n'est conservée, vos graphiques recommencent tous à partir de rien. C'est cette fonctionnalité qui m'a incité à commencer à me connecter à InfluxDB.
0xACE
Ah, c'est bon à savoir. Les données historiques sont importantes pour moi. J'aime vraiment la façon dont vos graphiques intègrent même d'autres informations Web, comme les prix du bitcoin. Cela dépassait ma portée initiale, mais pas plus.
jake9115
Oui, cet exemple, j'inclus même des données d'une application que j'ai sur l'App Store iOS (pour les Boy Scouts qui font de bons tours) qui stocke leurs données dans google fire base. C'est la carte en bas. J'utilise le nœud rouge pour extraire les données de la base de feu et les pousser dans l'afflux, donc ce n'est pas tout l'afflux et le grafana.
0xACE
2

J'utilise phpSysInfo pour surveiller tous mes serveurs / ordinateurs Linux, et j'aime vraiment sa simplicité. Les paramètres sont également très faciles à comprendre et vous pouvez définir votre propre taux de rafraîchissement.

McMuffin
la source
1

Si vous souhaitez coder en C ou C ++, vous pouvez utiliser une bibliothèque de serveur HTTP comme libonion ou Wt pour coder votre serveur HTTP spécialisé (peut-être en utilisant sqlite pour la base de données). Vous devez alors bien comprendre le protocole HTTP (y compris les cookies HTTP et les en-têtes HTTP ) et HTML5 .

Vous voudrez peut-être utiliser Ajax et les techniques WebSocket (WebSockets sont pris en charge par libonion & Wt, Ajax donne des requêtes HTTP ordinaires initiées par du code JavaScript exécuté dans le navigateur client). Vous pouvez utiliser le canevas HTML5 et / ou SVG pour les graphiques. Vous pouvez trouver certains frameworks Web HTML5 utiles; la plupart utilisent Javascript, DOM, HTML5, ....

Basile Starynkevitch
la source