[TUTO] Application web dynamique

Proposer ou rechercher un tutoriel concernant le Raspberry Pi

Modérateur : Francois

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mar. 2 juil. 2019 21:45

Vous avez un doute sur la stabilité d’une connexion internet ? Pourquoi ne pas logger son état pour etre sur de son fonctionnement. Voilà un npm tout bête qui permet de mesurer l’état de sa connexion internet, ce qui peut s’avérer bien utile.
Ça fonctionne très bien et ça m’a permis de constater que quand il pleuvait, la connexion d’un de mes sites perdait énormément, ce qui a déclenché l’intervention d’un technicien pour le remplacement du filaire entre une maison de campagne et le poteau télécom.

Le npm bien nommé s’appelle ‘speedtest-net’. Très simple d’utilisation, il peut etre utilisé stand-alone par une simple commande ou dans un code Javascript avec enregistrement et tout le toutim. Vous trouverez le module et sa doc ici -> https://www.npmjs.com/package/speedtest-net

Voilà ce que ça donne une fois transformé en module ‘BudyNode’ :
speedweb.png
speedweb.png (84.06 Kio) Vu 588 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 : 608
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » jeu. 12 sept. 2019 21:44

Aller un petit truc rigolo pour faire suite à ça: viewtopic.php?f=57&t=5447

Contexte : On est sur un pc sous windows et on veut pouvoir mettre à jour un affichage sur des ‘télés’ qui sont connectées à des PI quand mon modifie les données d’un fichier Excel (c’est en tous cas ce que j’ai compris). Un peu farfelu comme idée, mais après tout, pourquoi pas.

Le fichier Excel d’exemple et une petite macro vba pour générer un fichier json qui contient les données à transférer. La macro créer un fichier .tmp puis balaye vers le bas à partir de la deuxième ligne jusqu’à qu’elle trouve une cellule vide dans la colonne 1. A chaque ligne elle écrit un objet json dans le tableau ‘scores’ du fichier tmp. Une fois finie elle ferme puis renomme le fichier .tmp en .json
excel.png
excel.png (7.36 Kio) Vu 331 fois
macro.png
macro.png (69.74 Kio) Vu 331 fois
Modifié en dernier par Bud Spencer le jeu. 12 sept. 2019 21:49, modifié 2 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 : 608
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » jeu. 12 sept. 2019 21:47

Ensuite, on écrit un petit serveur http avec nodejs pour servir la page d’affichage des télés et transférer les données.
Ici que du déjà vu dans le tuto. Le meme modèle de serveur http que d’habitude et un timer. Si le fichier .json existe, le serveur le charge, puis il transfert les données sur le socket et il supprime le fichier.
node.png
node.png (49.42 Kio) Vu 331 fois
Une page html pour recevoir les données sur le socket et les afficher
index.png
index.png (35.11 Kio) Vu 331 fois
et voila (je ne me suis pas trop casser le trognon pour le design, mais je veux pas tout me taper non plus :lol: ).
result.png
result.png (16.64 Kio) Vu 331 fois
A chaque fois que l’on veut rafraichir l’affichage des télés avec de nouvelles données, il suffit d’exécuter la macro du fichier Excel.

Bonne nuit ….
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

DKT
Messages : 5
Enregistré le : mar. 24 sept. 2019 13:55

Re: [TUTO] Application web dynamique

Message par DKT » mar. 1 oct. 2019 18:10

Bonjour bonjour,

J'ai un petit problème :D

Bon y a pas que ça car j'ai des questions aussi ,

J'ai suivi toutes les leçons jusqu'à 6 adapter avec l'UPDATE qui avait été proposé mais toujours impossible de lancer le serveur j'obtiens un message d'erreur comme sur ce screen

http://zupimages.net/viewer.php?id=19/40/y6u5.png

Avez-vous éventuellement une idée ?

J'ai mis à jour node et npm, vérifier l'upgrade de mon raspB, mais rien n'y fait :roll:

C'est bête, c'est la leçon qui m’intéresse le plus


Aussi j'avais une question concernant le code HTML de cette leçon
Vous serait-il grand gourou de présenter la forme de HTML sans liste afin que je comprenne au mieux le code, dans l'idée de pouvoir disposer les différents "iden" à différent emplacement de la page web, juste pour voir comment avoir "iden" par "iden" et pas toute la liste, mais à différents endroits de la page web.


Merci d'avance du temps que vous aurez à me consacrer

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mar. 1 oct. 2019 22:54

C’est normal que cela ne fonctionne plus. Le wrapper (npm wiringpi) n’est pas mis à jour depuis début 2017 et de toute façon, la librairie WiringPi est en fin de vie (l’auteur abandonne le projet). Ceci dit nodejs et npm sont plein de ressource et permettent très facilement de revenir à des versions antérieurs pour faire fonctionner des trucs dépréciés ou plus à jour.

Lecon n° 12614 (à peu près hein, ca fait longtemps que je compte plus :mrgreen: ) : Comment repasser facilement NodeJs dans une ancienne version avec npm et fixer les versions de package:
Pour l’occase, on va repasser ton nodejs en version 6.10.2. , fixer les versions des autres package npm à ceux de l’époque pour ne pas etre 'emmerdé' avec les nouvelles et remplacer le npm wiring-pi 2.2.1 par un plus récent (wiringpi-node 2.4.4)

On commence par retrograder npm et nodejs avec ces commandes
sudo npm cache clean -f
sudo npm install -g n
sudo n 6.10.2


Ensuite tu édites le fichier package.json et tu supprimes les ^ qui se trouve devant les n° versions de package dans le bloc dependencies et tu remplaces "wiring-pi" : "2.2.1" par "wiringpi-node" : "2.4.4", ce qui doit te donner ca :
lecon6old.png
lecon6old.png (31.15 Kio) Vu 111 fois
Ensuite, dans le fichier myweb.js, tu remplaces var wpi = require('wiring-pi'); par var wpi = require('wiringpi-node');

********Edit : Jai oublié : tu supprimes le répertoire node_modules avant de relancer la commande suivante ********

Ensuite tu relances une commande npm install pour récupérer les packages npm et là ca devrait fonctionner.

Pour un fichier html sans les listes, c'est plus gênant dans le sens ou j'avais écrit ca en me basant justement sur une notion de création dynamique de l'affichage. Je verrais dans la semaine si j'ai le temps de te faire un exemple plus simple avec un seul couple bouton<->led et une libraire un peu plus à jour.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

DKT
Messages : 5
Enregistré le : mar. 24 sept. 2019 13:55

Re: [TUTO] Application web dynamique

Message par DKT » mer. 2 oct. 2019 12:24

Super !
Tout marche nickel !
Merci à toi ;)

Pour la partie HTML, justement c'est aussi dans l'objectif de garder un certain dynamisme et je pense que pour cette leçon il est bien de comprendre comment gérer "objet" par "objet".
Pour ma part je souhaite juste pouvoir gérer des groupes ou une entité à la fois dans la mise en page HTML:

Exemple :

Chambre 1 :
Lumière 1
Lumière 2

Chambre 2:
Lumière 1
Lumière 2

SDB :
Lumière 1
VMC

Cheminée :
Température

Et je voudrais rajouter aux GPIO IN l’interaction binaire de leurs états
Exemple en gardant ta structure :
Si GPIO in = 1, la case du GPIO Vert
Si GPIO in = 0, la case du GPIO est rouge

Afin d'avoir ce retour d'info réel

Donc plus de dynamisme, mais il me semble que tu as traité ce sujet dans tes leçons plus loin que la 6.
Je n'ai pas eu l'occasion de tout lire encore, faute de temps, mais je vais arriver un jour au bout des 17 pages :lol:

Encore merci pour tout ton travail, ça met un peu de temps pour monter toutes ces informations au cerveau mais tes exemples sont bien construit.
Dommage que le temps passe si vite et que les versions node npm ect évolue plus vite que mon apprentissage.

Bonne journée à toi et vous autres lecteurs ;)

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » sam. 5 oct. 2019 11:38

Ta problématique n’est pas bien compliquée, elle est juste différente de ce qu’était l’objectif de cette lecon6.

Dans cette leçon, les ‘ampoules’ sont pilotées par des gpios en sortie. C’est donc l’état de ces sorties qui est renvoyé au client pour l’affichage. Les entrées ne sont que des points d’action qui lèvent des interruptions au meme titre que les boutons graphique dans la page du client. Le client (la page web) ne sait meme pas qu’il y a des gpios en entrée. Lui, il ne voit que l’état des sorties et si une sortie est à 1, c’est que l’ampoule est allumée. L’actions sur une entrée est ponctuelle et elle ne fait que qu’inverser l’état de la sortie correspondante, donc elle n’a pas lieu d’etre remontée au client.

Dans un autre mode, les ampoules pourraient etre pilotées normalement par le réseau electrique et des interrupteurs et le pi ne servirait que de tableau de bord pour savoir si une ampoule est allumée ou éteinte. Dans ce cas on utiliserait seulement des entrées qui seraient raccordées au circuit de chaque ampoule.

On peut bien sur combiner ces 2 modes dans un meme programme puisque finalement lire l’état d’une entrée ou lire l’état d’une sortie revient exactement au meme. Si par exemple tu définis que la GPIO18 correspond à la lampe 2 de la chambre 1, qu’importe que cette GPIO soit une entrée ou une sortie, si elle est à 1, c’est que la lampe est allumée dans les 2 cas. La seul différence, c’est que si c’est une sortie, tu pourras la piloter depuis du code alors que si c’est une entrée, elle ne peut etre piloté que par une action extérieure.

Cette lecon6 est juste un exercice qui finalement est assez limité dans ce qu’il peut faire et le modifier pour étendre ses possibilités reviendrait presque le réécrire, mais si tu continu la lecture de ce sujet, tu arriveras forcement sur la démonstration du Datalogger qui pour le coup n’est plus un exercice mais une vraie application beaucoup plus flexible. Il y a bien sur la partie ‘sorcellerie’ qui utilise des opérations booléennes pour faire de la comparaison d’état et ça, je comprends bien que ça peut etre indigeste pour un débutant, mais ce n’est pas ça qu’il faut chercher à comprendre dans un premier temps. Il faut surtout essayer de comprendre comment le programme est structuré parce que c’est justement ça qui peut te permettre de traiter tous les cas d’usages possible sans avoir à remettre en cause ce qui a déjà été écrit. Je reviendrais peut etre la dessus avec des exemples plus simple, parce qu’avec le recul, je me rends bien compte que j’avais peut etre été un peu vite en besogne en favorisant le coté performance plutôt que le coté didactique.

Pour ce qui est du versioning, l’écosystème nodejs est très bien fait. Tu as vu que l’on pouvait très facilement passer d’une version à l’autre et on peut aussi avoir des programmes qui tourne avec différentes versions sur un meme environnement (voir nvm).
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mar. 8 oct. 2019 21:33

Birthday :)
Le tuto à 3 ans aujourd'hui et 41000 vues.
Pas trop le temps d'écrire une nouvelle 'leçon' pour fêter ca, mais je le ferais dès que possible.
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 »