[TUTO] Application web dynamique

Proposer ou rechercher un tutoriel concernant le Raspberry Pi

Modérateur : Francois

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » sam. 13 juin 2020 19:32

Non, je n’ai pas fait de tuto sur les esp ici du fait que je ne les utilise qu’avec des méthodes de programmation un peu trop radicale pour le niveau de ce forum et ça n’intéresserait personnes (free rtos et principalement du c++). Pour les débutants il y a des trucs beaucoup plus abordables comme nodemcu lua ou python et dans la majorité des cas, c’est bien suffisant. Pour ce qui est de la connexion entre un esp (8266,12,32 …) et un pi, il faut absolument faire une abstraction totale des matériels et des os (ou des systèmes) et n’utiliser les méthodes modernes qui servent à ça, à savoir tout passer par des api rest sur de l’http (comme l’exemple de la sonde dht). Dans l’exemple cité, c’est l’esp (client) qui envoyait périodiquement les infos de la sonde au PI (serveur), mais ça aurrait aussi put etre l’inverse, à savoir le PI qui envoie une demande des valeurs à l’esp (ou des demandes d’état de relais branchés sur les sorties de l’esp et des ordres de commutation).

Pour l’instant, j’ai bien trop de taf pour prendre le temps d’écrire des ‘leçons’ (actuellement je code entre 60 et 70h/semaine pour mes boulots, donc j’ai ma dose …), mais je garde sous le coude l’idée du pilotage à distance des IO d’un esp depuis un client web NodeJs hébergé sur un PI …
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

William59
Messages : 4
Enregistré le : jeu. 11 juin 2020 12:40

Re: [TUTO] Application web dynamique

Message par William59 » sam. 13 juin 2020 23:57

merci pour le retour, je comprend que ton taf prend beaucoup de temps et merci encore pour le partage.
bien à toi.
William :D

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » jeu. 30 juil. 2020 21:23

Je viens de voir que rpio était passé en version 2.2.0 depuis une semaine. Alors je ne sais pas quelles nouveautés il y a (pas encore regardé), mais comme la lib bcm2835 continue d'évoluer, j'imagine que c'est au moins une mise à jour du wrapp de celle ci. A noter aussi que la dernière version de NodeJS pour les ARMv6 est la 10.22.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » mer. 2 sept. 2020 14:13

Histoire de tester le PI4, installation de NodeJs sur un Raspberry Pi Os Lite
la dernière LTS (Long Term Support) de NodeJs est à aujourd'hui la 12.18.3 donc :

$ wget https://nodejs.org/dist/v12.18.3/node-v ... v7l.tar.gz
$ tar -xvf node-v12.18.3-linux-armv7l.tar.gz
$ cd node-v12.18.3-linux-armv7l
$ sudo cp -R * /usr/local/
$ cd ..
$ rm -r node-v12.18.3-linux-armv7l
$ rm node-v12.18.3-linux-armv7l.tar.gz

$ node -v
la version est bien la 12.18.3
$ npm -v
et ca a bien installé la version de npm qui va avec (6.14.6)

Petit test gpio avec un blink sur la pin 12 (gpio18)
$ mkdir blink
$ cd blink
$ npm init (... paramètre par défaut)
$ npm install rpio (... qui renvois les warm habituels)
$ nano index.js

Code classique :

Code : Tout sélectionner

const led = 12;
var rpio = require('rpio');

rpio.open(led, rpio.OUTPUT, rpio.LOW);

setInterval(() => {
    rpio.write(led, !rpio.read(led) ? rpio.HIGH : rpio.LOW)
}, 1000)

process.on('SIGINT', function () {
	rpio.write(led, rpio.LOW);
	process.exit();
});
ctrl x pour sauvegarder le ficher

$ node index.js

Et ca clignote du premier coup (bravo Bud \o/ , nous avons encore gagné :mrgreen: )
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » dim. 1 nov. 2020 12:42

Comme le petit servo que j’avais utilisé pour l’exemple .Net Core était toujours sur la plaque d’essais je me suis dit que c’était l’occasion de tester ça avec nodeJS. J’ai fait d’une pierre 2 coups parce que cela faisait un moment que je voulais tester le daemon pi-blaser. Pour ceux qui ne connaissent pas, pi-blaster est un service qui permet de faire du pwm dma ce qui est parfait pour piloter une multitude de servomoteur notamment pour des projets de robot. L’Install du daemon se fait comme ça :

sudo apt-get install autoconf
git clone https://github.com/sarfata/pi-blaster.git
cd pi-blaster
./autogen.sh
./configure
Make
sudo make install


Il faut ensuite rebooter pour demarrer le deamon. La désactivation du daemon se fait avec la commande sudo make uninstall. On peut aussi le lancer ponctuellement manuellement avec la commande sudo ./pi-blaster .
Ici j’ai laissé tous les paramètres de pi-blaster par défaut, mais l’idéal c’est quand meme de modifier les sources avant de le compiler pour l’adapter au modèle de servos utilisés.

Coté Nodejs, il y a plusieurs npm qui permettent le setting des canaux. Ici n'ai utilisé pi-blaster.js et pour les entrées en console, le npm readline .

Ecriture du petit programme de test :

mkdir nodeservo
cd nodeservo
npm init
npm install readline
npm install pi-blaster.js
nano index.js

le code ou j’ais tâtonner un peu pour trouver les bonne valeurs min et max et mis une petite opération pour faire la conversion depuis la saisie d’un angle en ° :

Code : Tout sélectionner

const readline = require('readline').createInterface({
    input: process.stdin,
    output: process.stdout
});

const min = 0.05;
const max = 0.24;
const pas = (max - min)/180;
const piblaster = require('pi-blaster.js');

piblaster.setPwm(18, min);

function input() {
    readline.question("Angle (0 à 180) : ", a => {
        if (a >= 0 && a <= 180) {
            a = (parseFloat(a.replace(/, /, '.')) * pas) + min; 
            piblaster.setPwm(18, a);
        }
        else {
            console.log("Valeur non conforme");
        }
        input();
    });    
}

input();
ctrl+x pour enregistrer le fichier
node index.js pour démarrer le programme
nodeservo.png
nodeservo.png (5.79 Kio) Vu 1147 fois
Facile non ? :D

- Raspberry Pi4 4Go, Raspbian GNU/Linux 10 (buster), nodeJs 12.18.3, npm 6.14.18
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » ven. 6 nov. 2020 19:30

Allez, chiche on se fait le petit servo-moteur piloté en temps réel par du web :D . Bon, je sais on trouve déja des exemples sur le web sauf que la, c'est du 'five minutes coding' et c'est 1000 fois plus simple et efficace que toutes ces pythoneires pythoyables ;-) . Soyons clair, on va faire du rapide et bigrement efficace avec très peu de code et pour cause, NodeJs est fait pour ca.

Déjà le code serveur. Ca repose comme précédemment sur pi-blaster et je ne refais pas le tuto sur la partie webserver qui est déjà très largement expliquée (et qui finalement ne sont que des déclarations). Pour le reste, c’est juste une simple liaison bilatérale sur un socket.io. Un client modifie l’angle, le servo se positionne et tous les autres on la visu en temps reel et tout ça, sans aucun probleme de concurrence possible.
servoweb-server.png
servoweb-server.png (61.3 Kio) Vu 1079 fois
Modifié en dernier par Bud Spencer le ven. 6 nov. 2020 20:28, modifié 5 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 : 979
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » ven. 6 nov. 2020 19:35

Pour la page web, je fais minimaliste (le design ca me gonfle et ca reste trop personnel pour partager, mais avec un peu de peps et d'imagination dans un Canvas html5 ...).
J'ai juste mis un curseur 0 à 180° et un label qui affiche en temps réel la position du servo. il suffit de déplacer le curseur depuis une page et regarder le moteur tourner et tous les clients voient le meme résultat :
servoweb-page.png
servoweb-page.png (38.65 Kio) Vu 1079 fois
Modifié en dernier par Bud Spencer le ven. 6 nov. 2020 20:08, 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 : 979
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » ven. 6 nov. 2020 19:41

Voila. Vous pouvez vous connecter avec n'importe quel navigateur ( pc, smartphone, tablette, console intergalactique de fusée martienne ect ...) et piloter un (ou plusieurs) servo(s) sans aucune difficulté.
servo_result.png
servo_result.png (22.99 Kio) Vu 1068 fois
ps: comme je trouvais ca rigolo, j'ai acheté 10 servos identiques au mien sur lbc (2€ avec livraison main a main gratos ...), donc pitètre que j'en câblerais un ou deux de plus pour ajouter quelques lignes de code ;-)
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » sam. 7 nov. 2020 12:14

Bon, bha mon vendeur de servos qui devait passer ce matin me les déposer en partant au boulot n’est pas venu. Il a eu la correction de me laisser un sms pour me dire qu’il était trop à la bourre pour s’arrêter et ma promit de passer cet aprèm en rentrant. Pas grave, j’ai fait le code quand meme en attendant et l’osillo est formel ça marche (je le confirmerais une fois les servos livrés).

Comme une des leçons les plus populaire était la n°6 et qu’elle est devenue naze suite à l’abondons de wiringPi, je m’en suis inspiré pour ce coup-ci. La subtilité de cette leçon c’était surtout la construction de la page à partir de la structure des composants passé en paramètres par le serveur a la connexion du socket. Ici j’ai fait la meme chose, j’ai défini les servos dans une structure json et quand un client se connecte ou se reconnecte, il reçoit cette structure et construit la table de la page avec. Ainsi, on peut ajouter ou supprimer des servos sans avoir à retoucher le code de la page. Chaque changement d’un angle par un client positionne le servo visé et mets à jours tous les autres clients.

Le code serveur :
multiservo_s.png
multiservo_s.png (70.65 Kio) Vu 1050 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 : 979
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » sam. 7 nov. 2020 12:17

La page reste très simple aussi. Tout se fait par itération des objets contenus dans la structure ‘servos’ avec toujours cette meme liaison bilatérale sur le socket.
multiservo_p.png
multiservo_p.png (100.9 Kio) Vu 1050 fois
Modifié en dernier par Bud Spencer le sam. 7 nov. 2020 12:40, modifié 1 fois.
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 »