[TUTO] Application web dynamique

Proposer ou rechercher un tutoriel concernant le Raspberry Pi

Modérateur : Francois

Bud Spencer
Raspinaute
Messages : 1089
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

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mer. 6 mars 2019 22:31

Pour m’amuser un peu et donner une réponse à ca : https://forums.framboise314.fr/viewtopic.php?f=4&t=5153

C'est ni plus ni moins qu'un timer. On défini des actions 'jour de la semaine,heure,minute, srcript python à exécuter' dans un fichier json et ca fait le boulot. J'ajouterais pitère la page web pour gérer les actions. Le seul npm requis est date-and-time. Il permet ici de franciser les nom de jours.
timer.png
timer.png (72.13 Kio) Vu 6645 fois
exemple code python 'reveil.py'

Code : Tout sélectionner

data = "Script Reveil"
print(data)
fichier de config json 'actions.json'

Code : Tout sélectionner

{
    "Actions" :
    [
        {"jour":"lundi","heure":6,"minute":0,"script":"reveil.py"}
        ,
        { "jour": "mardi", "heure": 7, "minute": 0, "script": "reveil.py" }
        ,
        { "jour": "mercredi", "heure": 21, "minute": 34, "script": "reveil.py" }
        ,
        { "jour": "jeudi", "heure": 6, "minute": 30, "script": "reveil.py" }
        ,
        { "jour": "vendredi", "heure": 7, "minute": 0, "script": "reveil.py" }
        ,
        { "jour": "samedi", "heure": 8, "minute": 0, "script": "reveil.py" }
        ,
        { "jour": "dimanche", "heure": 11, "minute": 0, "script": "reveil.py" }
    ]
}
fichier programme 'index.js'

Code : Tout sélectionner

var spawn = require('child_process').spawn; 
var date = require('date-and-time');
var actions = require('./actions.json').Actions;
var ptr = null;
date.locale('fr');

function timer() {
    var now = new Date();
    var ptrnow = date.format(now, 'ddddHHmm');
    for (var i = 0; i < actions.length; i++) {
        if (actions[i].jour == date.format(now, 'dddd') &&
            actions[i].heure == parseInt(date.format(now, 'HH')) &&
            actions[i].minute == parseInt(date.format(now, 'mm')) &&
            ptr != ptrnow)
        {
            var process = spawn('python', [actions[i].script]);
            process.stdout.on('data', function (data) {
                console.log(data.toString());
            });
        }       
    }
    ptr = ptrnow;
}
setInterval(timer, 10000);
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 17 mars 2019 13:49

Aller hop, petit cadeau pour fêter les 30000 vues du tuto.
logo.png
logo.png (46.99 Kio) Vu 6546 fois

Contexte : J’avais écrit vite fait le script précédent pour un utilisateur qui souhaitait pouvoir programmer des exécutions de scripts python depuis son smartphone. Pour le timer, pas de problème, il y a cron … par contre, la ligne de commande pour editer les taches depuis un smartphone dans une session ssh, faut bien admettre que ce n’est pas terrible. J’ai donc ‘webisé’ le timer du script précèdent et je lui ai apporté quelques subtilités en plus.
Principe : On place des scripts dans un répertoire dédié de l’application (../timer/cronweb/scripts/) et depuis la page web, on peut programmer leurs exécutions en définissant le jour et l’heure. Des tâches peuvent etre ajoutées et supprimer à souhait et Il y a aussi la possibilité d’exécuter les scripts volontairement à tout moment. Comme il fallait bien donner un nom au truc, je l’ai appelé ‘CronWEB

Voilà à quoi cela ressemble :
cronweb.png
cronweb.png (146.17 Kio) Vu 6553 fois
Le thème est volontairement simple et acidulé pour permettre un repérage facile dans le fichier de style css et ainsi de pouvoir le modifier suivant ses gouts et ses couleurs. Il ni a bien sur aucune saisie à faire sur la page web. Les jour,heure,minute et scripts sont dans des combos sélectionnables. En terme de dimensionnement de la page, c’est parfaitement exploitable en desktop et sur mon mobile S8 mais au besoin c’est modifiable dans le fichier de style (../server/web/style.css)

Liste des possibilités depuis la page web :
Arret/Démarrage du timer
Ajout/suppression de taches.
Execution de script

Le truc ne se limite pas au scripts python et peut en exécuter d’autres. En fait, il suffit de définir une extension et le programme ou processus qui doit l’exécuter dans le fichier de config du cronweb ../timer/cronweb/config.json. (py,sh et js par défaut) C’est aussi dans ce fichier que l’on peut changer la valeur d’interval du timer (10 seconde par défaut). Le serveur web a lui aussi son fichier de config ../server/web/config.json ou sont défini le port du serveur et les user/password (port 8080 user : bud, password spencer par defaut.

A l’exception des scripts led_xxx.py (on/off gpio 18) les scripts livrés ne font rien à par renvoyer un hello confirmant leur exécution.

Pour ceux qui s’intéressent plus au code qu’au résultat, vous noterez la particularité du choix fait pour l’arborescence du projet. C’est fait en vue de rendre l’application modulaire et lui permettre de recevoir d’autre module. Ici, on peut considérer timer.cronweb comme un module indépendant qui utilise les propriétés exposées de serveur.web. Quelques subtilités ont été ajoutées au timer comme l’impossibilité de créer des doublons (meme script, meme jour et meme heure), le trie chronologique jour.heure.minute.script dans l’affichage et l’enregistrement en temps réel des taches ajoutées/supprimées (fichier ../timer/cronweb/taches.json)

Installation :
Comme d’hab placer le contenu du zip dans un répertoire de projet puis exécuter la commande npm install depuis cette racine et pour finir, naviguer à http://adressedupi:8080

A titre d’info :
Scripts testés :
Serveur sous Linux : bash (.sh), python (.py), javascript (.js)
Serveur Windows : bash (.sh), python (.py), javascript (.js), batch (.bat), powershell (.ps1), VBScript (.vbs)
Version :
Raspbian Stretch 9.4 ; NodeJS 10.14.2 ; Npm 6.5.0
Windows 10 1803 ; Node 10.14.1 ; Npm 6.4.1
Modifié en dernier par Bud Spencer le dim. 17 mars 2019 14:02, modifié 3 fois.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 17 mars 2019 13:55

Le zip du projet :
myweb.zip
(61.21 Kio) Téléchargé 231 fois
son arborescence une fois dézippé :
cronweb_absc.png
cronweb_absc.png (19.57 Kio) Vu 6552 fois
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » jeu. 21 mars 2019 20:59

Pour m'amuser avec des trucs rigolos et tester le coté 'modulaire', voici quelques idées qui reprennent des exemples du tuto dans le meme style que le précédents

Le DF-H (lecon 5 page 2)
diskfree.png
diskfree.png (97.29 Kio) Vu 6487 fois
Modifié en dernier par Bud Spencer le jeu. 21 mars 2019 21:07, modifié 1 fois.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » jeu. 21 mars 2019 20:59

Le DynIP (page 7)
dynip.png
dynip.png (90.65 Kio) Vu 6489 fois
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » jeu. 21 mars 2019 21:01

Et bien sur une page d'index :D
index.png
index.png (146.11 Kio) Vu 6489 fois
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » ven. 26 avr. 2019 22:07

MultiBlink ASYNCHRONE :

Aller, comme je me marrais à relire ca et ca, je me suis une fois de plus dit que les guignoleries théoriques et les granimportnawak ne remplaceront jamais de vrais exemples concrets et accessibles pour tous. Je vous propose donc ce petit chenillard tout bête qui tourne led à led dès que la gpio du bouton est mise à la masse et ça, quoi que votre programme fasse d’autre. Le bon côté de la chose, c’est que ça ramène le tuto à un niveau plus conviviale pour les débutants.

Hardware :
chenillard.png
chenillard.png (9.4 Kio) Vu 6190 fois
SoftWare :
chenillard_code.png
chenillard_code.png (18.87 Kio) Vu 6190 fois
:idea: Idée : si vous montez les leds de façon circulaire (autour d’un axe), cela vous donnera un bel effet gyrophare

Bien sûr, ce type de montage qui utilise à lui seul 8 gpio ne s’adresse qu’à des débutants ou à titre uniquement expérimental sachant que moyennant un peu plus d’électronique, on pourrait faire la meme chose avec une seule gpio. Notez que le code n’allume jamais plus d’une led à la fois, ce qui permet d’utiliser une seule résistance (à calculer suivant le modèle de led utilisé).
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Répondre

Retourner vers « Tutoriels »