[TUTO] Application web dynamique
Modérateur : Francois
-
- Raspinaute
- Messages : 1089
- Enregistré le : lun. 15 août 2016 21:38
Re: [TUTO] Application web dynamique
Et le résultat dans chrome, edge et sur le smartphone
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).
-
- Raspinaute
- Messages : 1089
- Enregistré le : lun. 15 août 2016 21:38
Re: [TUTO] Application web dynamique
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
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.
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).
-
- Raspinaute
- Messages : 1089
- Enregistré le : lun. 15 août 2016 21:38
Re: [TUTO] Application web dynamique
Les p’tites lignes de code du matin le temps de digérer la tartine
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.
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.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).
-
- Raspinaute
- Messages : 1089
- Enregistré le : lun. 15 août 2016 21:38
Re: [TUTO] Application web dynamique
Petit exemple avec curl :
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)
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).
-
- Raspinaute
- Messages : 1089
- Enregistré le : lun. 15 août 2016 21:38
Re: [TUTO] Application web dynamique
Aller, on en remet une petite couche
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).
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).
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).
-
- Raspinaute
- Messages : 1089
- Enregistré le : lun. 15 août 2016 21:38
Re: [TUTO] Application web dynamique
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.
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 :
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.
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).
-
- Raspinaute
- Messages : 1089
- Enregistré le : lun. 15 août 2016 21:38
Re: [TUTO] Application web dynamique
Et la petite photo du montage complet du bastring sur le truc :
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).
-
- Messages : 9
- Enregistré le : sam. 5 déc. 2020 21:29
Re: [TUTO] Application web dynamique
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
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
-
- Raspinaute
- Messages : 1089
- Enregistré le : lun. 15 août 2016 21:38
Re: [TUTO] Application web dynamique
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).
Re: [TUTO] Application web dynamique
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é
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é 173 fois