[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 » sam. 7 nov. 2020 12:21

Et le résultat dans chrome, edge et sur le smartphone
multiservo_r.png
multiservo_r.png (47.42 Kio) Vu 5147 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 » sam. 7 nov. 2020 18:47

Hop, petit servos livrés (vendeur sympa, 10 balles au lieu des 12 prévus pour s'excuser du retard). Comme prévus, tout fonctionne et pour le fun, j'en ai meme rajouté un de plus sans le code serveur sur la gpio 4. Me voila donc en possession de 11 servos qui finiront par dormir avec tout le reste mon boxon :lol:
servoweb-3.png
servoweb-3.png (516.79 Kio) Vu 5134 fois
Quoi qu'il en soit, pi-blaster semble etre une bonne solution pour disposer de pwm sur quasi toute les gpio du pi. Contrairement au pwm soft, le pwm dma ne consomme quasiment pas de ressource cpu. L'inconvénient, c'est que la fréquence est la meme pour tous les canaux et on ne fait varier que le rapport cyclique.
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. 8 nov. 2020 10:18

Les p’tites lignes de code du matin le temps de digérer la tartine :P

Piloter les servos en temps reel depuis une pages web, c’est bien, mais si avec le meme serveur on peut aussi les piloter avec des requêtes http c’est encore mieu. J'ai donc ajouté une api rest. Pour ça, j’ai ajouté la référence body-parser et 2 fonctions qui ont pour route ‘/api’. Une GET qui retourne la structure 'servos' dans son état courrant et une POST qui permet de positionner les servos. J’ai chiadé un peu le truc pour avoir des status-codes diffèrent en fonction des types d’erreur. Le client rest peut etre n’importe quel type de programme ou script ou meme de simples lignes de commande.
multiservo_api.png
multiservo_api.png (78.42 Kio) Vu 5122 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. 8 nov. 2020 10:36

Petit exemple avec curl :
multiservo_curl.png
multiservo_curl.png (25.83 Kio) Vu 5122 fois
Requete GET :
curl http://192.168.1.19:5000/api -H "Accept: application/json"

Requete POST pour modifier l’ange du servo 2 :
curl -i -H "Content-Type: application/json" -X POST -d '{"iden":2, "angle":100}' http://192.168.1.19:5000/api

Bien entendu comme j'utilise de toutes façons la meme fonction setServo() que pour les évènements reçus sur le socket, tous les clients web sont mis a jours en temps réel a chaque changement effectué par une requête POST.

ps: j’ai oublié de préciser que dans le code du serveur j’ais ajouté un champs iden à la structure des servos (plus simple pour les identifier)

Code : Tout sélectionner

var servos = {
    "servos": [
        { "iden": 1, "gpio": 18, "name": "servo #1", "min": 0, "max": 180 , "angle" : 120},
        { "iden": 2, "gpio": 17, "name": "servo #2", "min": 45, "max": 135, "angle": 90 },
        { "iden": 3, "gpio": 4, "name": "servo #3", "min": 0, "max": 180, "angle": 0 }
    ]
}
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. 15 nov. 2020 19:12

Aller, on en remet une petite couche :D

Il y avait une autre singularité dans cette leçon 6. En plus de construire la vue elle permettait de piloter des sorties depuis la pages web mais aussi depuis des boutons poussoirs. L’appuie sur un bouton changeait l’état de la sortie qui lui était rattachée et mettait à jour-là page web et on pouvait aussi changer l’état depuis la page. Ici, ce que je vous propose, c’est en plus de pouvoir piloter les servos depuis la page web, c'est d' avoir la possibilité de le faire aussi depuis des potentiomètre raccordés au PI avec bien évidement toujours le curseur et la valeur de l’angle à jours dans la page.

Alors j’utilise ici un potentiomètre, mais cela pourrait etre une sonde de température, un détecteur de niveau d’eau, un capteur de luminosité ou n’importe quoi d’autre qui puisse etre lu et qui retournerait des valeurs. Le choix du potentiomètre, c’est juste parce que c’est le plus simple à mettre en œuvre et que je n’ai pas à redessiner de schéma puisque je l'ai déjà fait. Pour ça j’ai utilisé un convertisseur analogique digitale MCP3208 que j’ai déjà largement traité dans ce tuto. Le schéma de montage peut etre celui-là en 3.3v ou celui-là en 5v (recommandé).

Comment ça fonctionne : J’ai déjà ajouté au programme le npm rpio pour pouvoir accéder à la spi et au mcp3208. Ensuite, j’ai défini un tableau (Analog[]) pour stocker la valeur de l’angle au dernier changement du potentiomètre, puis j’ai ajouté une valeur (facultative) à chaque servo pour le rattacher à un canal du convertisseur (‘analog’ dans la structure json) . Finalement j’ai écrit une petite procédure (readAnalog()) qui va lire les entrées analogique rattachées à chacun des servos. Cette fonction compare la valeur du dernier angle définie par le potentiomètre avec la valeur convertie en angle de la lecture de l’ADC. Si il y a un changement sur au moins un servo, elle appelle la procédure setServo() en fin de boucle. Un timer SetInterval appel la procédure readAnalog toute les secondes.

Tout ça avec finalement très peu d’ajout code. Ce qui est encadré en vert et qui est sans doute le moins bouffable concerne la spi avec rpio et le mcp3208 et ça a déjà été expliqué notamment pour le datalogger (page 8 et 9 du tuto).
srvwbptr.png
srvwbptr.png (103.27 Kio) Vu 4791 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. 29 nov. 2020 16:44

On ajoute un p’tit coup d’esp8266 pour piloter les servos ? aller, c’est parti …

Pour l’occasion, j’ai testé l’add-on plateformIO avec Visual Studio Code et ça fonctionne très bien. L’esp est NodeMCU V3 Lolin. Electroniquement parlant, j’ai juste mis un potentiomètre de 20K (le premier que j’ai pioché dans la boite à clous) entre le 3v (pin 3v) et la gnd (pin g) et mis le curseur sur An0 (pin A0).

L’idée c’est de lire la tension sur An0 de l’esp. toutes les secondes, la convertir en angle avec les paramètres définis et si le résultat a changé depuis la dernière lecture, envoyer une requête POST au serveur avec le nouvel angle, ce qui a bien évidement pour effet de positionner le servo et mettre tous les clients web a jour. Il y a un peu d’offset sur l’entrée analogique du Lolin (d’où le paramètre avec 10 pour minanalog) et la conversion se fait sur 10 bit (0 à 1024). 0n pourrait aller plus loin en faisant d’abord une requête GET pour récupérer les paramètres du servo visé et initialiser les valeurs minangle et maxangle avec. On pourrait aussi utiliser quelques I/O de l’esp en entrée pour choisir sur quel servo agir, bref, les idées ne manquent pas.

Le code est plutot simpliste et se passe de commentaire. Import, declaration des variables, initialisation dans la void Setup(). La void loop() contrôle que le wifi est connecté (si ce n’est pas le cas, elle appelle la void connect) et fait son petit boulot de lecture de l’entrée analogique et d’appel de l’api si besoin.
servoesp.png
servoesp.png (74.25 Kio) Vu 4688 fois
Pour éviter les erreur 404 quand l'esp envoi un angle à 0, il suffi de modifier la ligne suivante dans l'app.post du serveur :

Code : Tout sélectionner

 if (s & a) ...
 par 
 if (s & a >= 0 )...
Modifié en dernier par Bud Spencer le dim. 29 nov. 2020 20:15, 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 » dim. 29 nov. 2020 18:31

Et la petite photo du montage complet du bastring sur le truc :
servoesp.jpg
servoesp.jpg (88.78 Kio) Vu 4678 fois
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

prochefeuille
Messages : 9
Enregistré le : sam. 5 déc. 2020 21:29

Re: [TUTO] Application web dynamique

Message par prochefeuille » dim. 6 déc. 2020 09:56

Bonjour
wiring-pi et nodejs ne fonctionnent plus ensemble (sauf à revenir à d'anciennes versions), puisque wiring-pi n'est plus maintenu
existe-t'il un autre module qui ferait la même chose que wiring-pi ??? (commander les GPIO?)
pour faire fonctionner le tuto Application web dynamique leçon 6 ??
merci de donner un coup de main je suis bloqué à ce stade

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » lun. 7 déc. 2020 09:47

C’est un peu ce que je viens de faire avec l’exemple des servos. J’ai été un peu plus loin dans le sens où j’ai fait appel a un composant externe (convertiseur mcp3208) en entré et a piblaster en sortie pour gérer des pwm dma. Pour reprendre point pour point le fonctionnement de la leçon 6 sans utiliser winringPi, on peut le faire avec très facilement rpio (un wrap la librairie bcm2835). Si je trouve un peu de temps pour ça dans la semaine, je vais faire la réécriture de cette leçon 6. En fait ça va juste être du copié collé de différentes parties d’exemple qu’il y a déjà sur le tuto avec en plus la gestion des interruptions sur les entrées que je n’ai de mémoire pas encore abordé avec rpio.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

drean
Messages : 20
Enregistré le : lun. 1 févr. 2016 19:17

Re: [TUTO] Application web dynamique

Message par drean » jeu. 10 déc. 2020 18:28

bonjour

j'ai utilisé la leçon 6 pour réaliser la domotique des volets de la maison ( 9 volets ) et comme il n'y a pas assez de gpio j'ai utilisé un mcp23s17 avec une liaison spi.
mon installation fonctionne très bien sans plantage.
il me reste à connecter les boutons poussoirs de commande, je pense utiliser les interruptions avec events mais je patauge un peu.
je mets en fichier joint ma config actuelle.
quand ce sera fini je mettrai les fichiers et un schéma de mon installation.
encore merci Bud
André
Fichiers joints
mywebDomoOpe.zip
(6.67 Kio) Téléchargé 167 fois

Répondre

Retourner vers « Tutoriels »