[TUTO] Application web dynamique

Proposer ou rechercher un tutoriel concernant le Raspberry Pi

Modérateur : Francois

Bud Spencer
Raspinaute
Messages : 457
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 30 déc. 2018 11:35

Pour Chart.js, j’ai déjà utilisé cette lib mais jamais avec NodeJs. Ceci dit, c’est une lib exploitée coté client. De mémoire elle est plutôt bien documentée et sa mise en œuvre est plutôt simple. Il serait effectivement rigolo de l’utiliser avec NodeJs pour faire des graphiques ‘vivants’ en poussant des données sur un socket. Je note ça pour une prochaine leçon ;)

Concernant la page qui affiche les 8 jauges :
Tu as un Cannot Get /, mais as tu bien pensé a ajouter la route ‘manometre’ dans index.js et à appeler la page par http://adressedupi:8080/manometre ?

Comme c’était tout codé en live, je ne gardais pas les codes mais ce matin j’ai refait le test en recréant le projet et en prenant les sources direct sur le forum. Je ne suis pas reparti depuis le début mais avec les codes suivant :

sensor.js, sensor.json et spi_io.js du post du 23 mars à 19h13 (page 8)
index.js et console.html du post du 24 mars à 18h58 (page 8)
Avec ça tout fonctionne avec les routes console et sensorAn et j’ai bien les résultats indiqué sur le post du 24 mars à 19h38 (page 9)

Conformément au post du post du 25 mars à 10h13, j’ai ensuite ajouté la route manomètre dans index.js, la page manometre.html dans /templates ainsi que gauge.min.js et le dir font dans /public (récupéré dans la lecon 4). Résultat, j’ai bien ma page avec les 8 jauges et tout fonctionne avec les codes qui sont sur le tuto que je n’ai fait que copier/coller sans aucune modif.

A noter qu’avec mes versions récentes de NodeJs (v10.14.2) et de NPM (v6.5.0), j’ai des Warn de dépréciation à la compilation de rpio (v1.0.11). Cela n’empêche pas le fonctionnement et cela devrait disparaitre dans la prochaine version de rpio. Il y a aussi un Warn de dépréciation au démarrage de l’appli concernant l’usage de Buffer(). On peut corriger ça dans le fichier spi_io.js aux lignes 20 et 29 en remplaçant adcResult(Buffer(… par adcResult(Buffer.from(...

Explication sur la méthode de création automatique des 8 jauges :

Quand la page est chargée sur le client, elle se connecte au socket.
manometre.html ligne 26 -> var io = io.connect(location.host);

le serveur accepte la demande de connexion et renvois la structure sensorAn en réponse au client
index.js ligne 55 -> client.emit("sensorAn", { sensorAn: sensorAn });

le client reçoit la structure sensorAn sur le socket et boucle pour appeler la fonction drawgauge() autant de fois qu'il y a d'objet dans le tableau Channel de SensorAN et en lui passant ces objets en paramètre.
Manometre.html ligne 37 à 42 ->
io.on('sensorAn', function (data) {
sensorAn = data.sensorAn;
for (var i = 0; i < sensorAn.Channel.length; i++) {
drawgauge(sensorAn.Channel);
}
});

La fonction drawgauge() utilise les paramètres de l’objet passé pour dessiner la jauge dans le bon canvas (renderTo : 'jauge' + sensor.Iden qui corresond a l’id de chaque objet canvas de la page ) et utilise les propriétés sensor.Dec, sensor.Unite , sensor.Name, sensor.Vmin et sensor.Vmax pour initialiser ses valeurs.

Voila, t'as tout plein de petits cailloux, faut juste pas les garder dans tes godasses ;)
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Fred59
Messages : 14
Enregistré le : lun. 26 nov. 2018 20:26

Re: [TUTO] Application web dynamique

Message par Fred59 » dim. 30 déc. 2018 21:16

Et bien le petit Poucet est passé par là juste avant la fin d'année... :lol:

Merci pour tes explications, je regarde cela dès demain.

Pour la petite leçon sur le chart en node, j'attends avec impatience. Ce qui est facile pour toi ne l'est pas forcément pour tous.
Promis je te fais un retour demain.

Fréd

Fred59
Messages : 14
Enregistré le : lun. 26 nov. 2018 20:26

Re: [TUTO] Application web dynamique

Message par Fred59 » sam. 5 janv. 2019 11:15

Salut Bud,

Ok pour tes explications, c'est OK pour mes gauges.

Merci et meilleurs vœux pour 2019 à toutes et tous les lecteurs.
Fréd

Répondre

Retourner vers « Tutoriels »