Re: [TUTO] Application web dynamique
Posté : 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
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