[TUTO] Application web dynamique

Proposer ou rechercher un tutoriel concernant le Raspberry Pi

Modérateur : Francois

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 5 sept. 2021 11:21

smog a écrit :
lun. 21 juin 2021 08:05
Bravo à toi surtout ! Et merci !
Bravo et merci a vous de me supporter :lol: ;)


Aller, une nouvelle leçon pour ce merveilleux tuto (…).

Pour l’exemple, j’ai pris ça. Pour son escape game, NubiaNeko a décidé d’utilisé un PI (bonne idée) pour lancer des vidéos en utilisant un lecteur et des tags rfid. Forcément, comme il débute sur le PI, il y a tout un tas de chose à apprendre et il a à peine un mois pour y arriver. Voyons donc comment on peut lui faire gagner un peut de temps en balayant d'un revers de mains ce défi insurmontable avec seulement quelques ligne de code. Pour ca, j'ai donc un PI4 (4go) et un lecteur rfid mrfc522 (attention au câblage, suivant les modèles, les pins ne sont pas toujours à la meme place ...)

Commençons par un petit rappel d’installation de NodeJS pour avoir la dernière version :
Ici pas de sorcellerie, je démarre avec une sd fraichement dotée d’un Raspberry PI OS(32-bits) release 2021-05-07 (installée avec Raspberry Pi Imager v1.2). Apres finalisation de la config (reseau, activation des interfaces dans rapsi-config (on va notamment avoir besoin de la spi), perso, j’installe samba pour programmer directement depuis mon pc windows avec visual studio et je mets le pi en démarrage en ligne de commande, mais ça, c’est chacun pour soi. Comme on veut lire des videos, on va utiliser omxplayer. Pourquoi celui-là ? tout simplement parce qu’il fonctionne très bien, qu’il est développé spécialement pour le PI et qu’il est installé par défaut et on s’en assure par une commande :
omxplayer -v

Ensuite installation de la dernière version de NodeJS (procédure déjà expliqué ici)
On tape successivement ces commandes :

Téléchargement du package :

Code : Tout sélectionner

wget https://nodejs.org/dist/v14.17.6/node-v14.17.6-linux-armv7l.tar.gz
décompression :

Code : Tout sélectionner

tar -xvf node-v14.17.6-linux-armv7l.tar.gz
on entre dans le répertoire créé

Code : Tout sélectionner

cd node-v14.17.6-linux-armv7l
On copie tout ça dans /usr/local

Code : Tout sélectionner

sudo cp -R * /usr/local/
on sort du répertoire

Code : Tout sélectionner

cd ..
on supprimer le répertoire et le fichier de package

Code : Tout sélectionner

rm -r node-v14.17.6-linux-armv7l

Code : Tout sélectionner

rm node-v14.17.6-linux-armv7l.tar.gz
on contrôle les versions
node –v
npm –v
Ce qui donne pour nodejs 14.17.6 et 6.14.15 pour npm

je vais prendre un café et je revient :P
Modifié en dernier par Bud Spencer le dim. 5 sept. 2021 12:22, 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 : 1025
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 5 sept. 2021 11:37

On peut passer à notre application.
Création du projet (déjà expliqué mille fois sur le tuto).

Création d’un répertoire pour l’appli

Code : Tout sélectionner

mkdir videorfid

Code : Tout sélectionner

cd videorfid
Initialisation de l’application

Code : Tout sélectionner

npm init
Pour les packages rfid et omxplayer, il y en a foule, mais forcement, on est dans le monde merveilleux du grand boxon de l’open source anarchique donc entre les trucs abandonnés ou obsolètes ou les forks de forks foireux, il faut tâtonner un peu pour faire les bons choix, mais on fini toujours par trouver pis de toute façon, sur ce coup la, vous vous en foutez, c'est moi qui ai cherché :lol: . Je cherchais surtout des packages qui fonctionnent et qui s’installent facilement sans avoir à mettre les mains dans le cambouis. Du coup j’ai choisi mfrc522-rpi et node-omxplayer et je les installe (pour rappel toutes les commandes d’installation de package side by side se font depuis le répertoire racine du projet).

Code : Tout sélectionner

npm install mfrc522-rpi

Code : Tout sélectionner

npm install node-omxplayer
Il y a quelques warn à l’install mrfc522-pi, mais ça passe. A noter que cette lib repose sur rpio (déjà très utilisé dans le tuto) qui n’est rien d’autre qu’un wrap de l’excellent librairie bcm2835 de Mike McCauley. Cela dit, pour le tuto, j’aurais préféré quelques choses de plus conviviale qui repose sur libgpiod comme avec .NET, mais bon …. On ne va pas faire le difficile.
Dans le dossier de l’application, je commence par créer fichier index.js et un sous dossier que j’appelle videos et je mets quelques mp4 dedans.
Voilà on a tout ce qu’il nous faut, il ni a plus qu’à écrire le programme dans le fichier index.js
Modifié en dernier par Bud Spencer le dim. 5 sept. 2021 12:24, 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 : 1025
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 5 sept. 2021 12:06

Le code, le voilà avec l'arborescence de l'appli à droite (Le dossier node_modules est masqué)
videorfid.png
videorfid.png (71.41 Kio) Vu 445 fois
C’est tout ? bha oui et ça suffit.


On commence par les définitions
Import des références, ensuite création de 2 objets. SoftSPI est construit avec les paramètres de pinoches de la spi et on le passe en paramètre pour construire l’objet mrc522 en précisant la pin qui servira pour le reset. Ensuite on définit une variable pour le player et une liste d’objet json qui contient les uid de tag et les fichiers vidéo qui correspondent.

On a ensuite une fonction setInterval qui va regarder toutes les secondes si le player est déjà en lancé et si ce n’est pas le cas, cela zieute si il y a un tag présent et s’il y en a un qui se trouve dans la liste, ça appel une procédure qui lance le player en lui passant le nom du fichier de la vidéo en paramètre.
Voilà, tout tient dans une trentaine de ligne. Des que je passe un badge sur mon lecteur, la vidéo qui correspond se lance. Pour démarrer l’appli, on fait bien sur un node index.js
L’appli peut etre démarrée depuis n’importe quel console et ça, que ce soit en mode desktop, en ligne de commande ou en meme ssh. Elle peut aussi etre démarré en tant que service avec systemctl.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 5 sept. 2021 12:43

Pour les fainéants, installation facile (enfin .. pas trop dure).
Cela suppose que vous avez un pi (3 ou 4) avec un raspi-os desktop, omxplayer et nodejs d'installé et que vous avez bien activé la spi dans raspi-config
Cablez votre lecteur rc522 (sinon ca ne lira pas les tag :P :lol: )

Décompactez le zip et copiez le répertoire videorfid à la racine de /home/pi.
Entrez dans le répertoire et exécutez une commande npm install (ca va installer automatiquement les packages mfrc522-rpi et node-omxplayer)
Mettez vos fichiers videos dans le sous répertoires videos
Modifiez la variable vidéo dans index.js en mettant les uid de vos tags et le nom de vos fichiers video correspondant.
Démarrer l’application node index.js

écétou ;)
videorfid.zip
(1.26 Kio) Téléchargé 16 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 : 1025
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 5 sept. 2021 13:04

En relisant, j'ai trouvé un petit bug (ouais, je sais, c'etait pas prévu :lol: )
En fait c'est tout con, mais si on passe un badge qui n'est pas dans la liste, la variable fl plantera parce qu'elle ne peut pas faire référence au 'file' d'un 'tag' qui n'existe pas.
Pour corriger, il suffit de juste d'enlever '.file' a la fin de la declaration de la var fl et de l'ajouter dans l'appel de la fonction readmovies

avant :

Code : Tout sélectionner

	let fl = video.find(x => x.tag === tg).file;
    	if (fl) { readmovies(fl); }
Après

Code : Tout sélectionner

	let fl = video.find(x => x.tag === tg);
    	if (fl) { readmovies(fl.file); }
et pour me faire pardonner (oupas), une petite photo du projet en plein boulot
videorfid2.jpg
videorfid2.jpg (49.77 Kio) Vu 422 fois
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

dyox
Raspinaute
Messages : 890
Enregistré le : dim. 28 déc. 2014 15:28
Localisation : Le long de la côte, au dessus du pays des bigoudennes, aïe

Re: [TUTO] Application web dynamique

Message par dyox » dim. 5 sept. 2021 13:50

Wahouuu !! C'est ça que l'on appelle la réalité virtuelle ? On badge sur le pi et cela ouvre les portes en bois du jeu ? Même plus la peine de jouer un voleur... :mrgreen:

Avatar du membre
NubiaNeko
Messages : 10
Enregistré le : ven. 6 nov. 2020 14:41

Re: [TUTO] Application web dynamique

Message par NubiaNeko » lun. 6 sept. 2021 12:28

Incroyable tuto! :D Ma vie est sauvée grâce à toi!
Ca n'a pas l'air, mais une salle d'escape, à faire, c'est énormément de boulot. Entre la décoration (qui inclut évidemment tout ce qu'il y a de peinture, menuiserie, placage), la partie purement "game design", et celle de la réalisation non seulement des mécanismes et du code; c'est rapidement quelques mois de travail.
Je n'aurais jamais trouvé tout ça tout seul aussi vite, alors merci beaucoup pour ton aide :D Aucune raison de ne pas y parvenir, désormais!
Novice total plein de bonne volonté! (mais un peu long à la détente)

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mer. 8 sept. 2021 11:56

dyox a écrit :
dim. 5 sept. 2021 13:50
Wahouuu !! C'est ça que l'on appelle la réalité virtuelle ? On badge sur le pi et cela ouvre les portes en bois du jeu ? Même plus la peine de jouer un voleur... :mrgreen:
Et même que si tu as le bon tag, le jeux fait tout tout seul sans que tu touches la manettes :lol:
C'est le progrès mon pauvre Dyox. Des voitures sans conducteur, des magasins sans caissière, des jeux sans joueur ... Ne serions nous pas en train de nous diriger vers une humanité sans homme ? :? ;)

NubiaNeko a écrit :
lun. 6 sept. 2021 12:28
Incroyable tuto! :D Ma vie est sauvée grâce à toi!
Tu sais, si on enlève, la partie ‘rappel pour installer NodeJs, créer un projet et installer des package npm, c’est juste un petit exemple de plus qui démontre ce qu’il est possible de faire très facilement et efficacement avec NodeJs. Tu auras sans doute d’autres idées ou contraintes qui t’obligeront à faire évoluer cet exemple mais le principe de base est là.

Je ne suis pas expert en escape game mais je suis persuadé qu’avec un peu d’imagination et très peu de code, le PI peut être une vrai bénédiction pour agrémenter les prisons.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » ven. 10 sept. 2021 16:00

Petite info pour ceux qui veulent installer NodeJS sur des ARM V6 (ancien PI, PI Zero ect ...) , La dernière version supportée pour ces soc est la 11.9.0 en précisant armv6 au lieu de armv7. Donc dans la procédure d'install écrite au dessus, il faut remplacer tous les :

v14.17.6/node-v14.17.6-linux-armv7l
par
v11.9.0/node-v11.9.0-linux-armv6l

(testé hier pour un Zero W)
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

Avatar du membre
NubiaNeko
Messages : 10
Enregistré le : ven. 6 nov. 2020 14:41

Re: [TUTO] Application web dynamique

Message par NubiaNeko » dim. 12 sept. 2021 09:21

Et bien, tout fonctionne à merveille, c'est incroyable! Merci, j'ai gagné un temps formidable grâce à toi et tes conseils :)

Il y a tellement de choses auxquelles je dois m'intéresser que je ne sais plus où donner de la tête ahah, mais en effet, avec NodeJs et un peu d'apprentissage, j'ai l'impression que je pourrai bientôt conquérir le monde! Ou à minima, faire de chouettes salles d'escape :) Merci beaucoup! C'est vraiment super chouette de tomber sur une communauté aussi bienveillante; en tous cas. Merci beaucoup!
Novice total plein de bonne volonté! (mais un peu long à la détente)

Répondre

Retourner vers « Tutoriels »