[TUTO] Application web dynamique

Proposer ou rechercher un tutoriel concernant le Raspberry Pi

Modérateur : Francois

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

[TUTO] Application web dynamique

Message par Bud Spencer » sam. 8 oct. 2016 15:15

EDIT du 05 Nov. 2019

Quand j’ai commencé ce ‘petit’ tuto, je pensais juste faire quelques bricoles pour présenter nodejs et je ne pensais pas qu’il resterait aussi populaire 3 ans après. Alors bien sur les versions de nodejs et de npm ayant beaucoup évoluées depuis, certaines choses sont devenues obsolète voir ne fonctionnent plus simplement. J’ai donc décidé de passer en revu tous les codes à télécharger (leconXX.zip) et de les remettre d’actualité en utilisant les versions nodejs et npm d’aujourd’hui (nodejs 12.13.0 et npm 6.12.1) et de remplacer les package obsolètes par d'autres. Je vous recommande donc de commencez par mettre NodeJs et Npm à jour si vous voulez essayer ces exemples (La procédure de mise à jour est expliquée en page 6). Chaque zip mis à jour contient désormais l’arborescence et les fichiers nécessaires à chaque leçon ainsi qu’un fichier pakage.json facilitant l’installation des packages requis par une simple commande npm install (voir fichier info.txt dans les zip).




Préambule

Ce tuto s’adresse à ceux qui veulent pouvoir développer facilement des applications avec interfaces graphiques, à ceux qui veulent pourvoir superviser leur GPIOs localement ou à distance ou tout simplement à ceux qui souhaitent transformer le PI en serveur web. En fait, il suffit de parcourir le forum pour se rendre compte que ça s’adresse à beaucoup de monde. Suivre en temps reel la vitesse de son robot sur une tablette et pouvoir lui donner des ordres, arriver au boulot et pouvoir s'assurer que l'on a bien fermé le portail de chez soit en partant et si ce n'est pas le cas, pouvoir le faire d'un click, recevoir un email ou un sms vous indiquant que votre maison est en train de bruler mais que votre application a bien déclenchée le système anti-incendie, qu'elle maitrise la situation et qu'elle vous tiendra au courant des suites :lol: . A vrai dire, la limite des possibilités s'arrête là ou commence notre manque d'inspiration. Ne vous attendez toutefois pas à un cours de programmation. Les codes resteront simples pour être compréhensible mais sans pour autant chercher à être optimisés au maximum. Chacun sera libre de se documenter sur les différents modules utilisés et d'améliorer si besoin.

Pas besoin d’avoir un niveau de gourou en programmation ni d’être un ayatollah du kernel pour suivre ce tuto. Si vous êtes capable d’éditer un fichier et de l’enregistrer au bon endroit, cela suffira et pour ceux qui ont déjà eu l’occasion de bricoler de la page web et un peu de javascript, ça va être du gâteau. Etant plus codeur qu’écrivain, je vais tenter de faire au mieux pour limiter les fautes d’orthographe et de grammaire mais si vous en apercevez, faites-moi le savoir, et je corrigerais.

La première chose à faire, c’est donc d’installer un serveur web. Il existe des outils très performants pour ça. Apache, Nginx, Lighttp et on peut même ajouter IIS pour ceux qui tournent sous Windows vu qu'il est aussi possible de développer en asp.net sur le PI. Ces serveurs sont très puissants et sur de grosses machines ils peuvent faire le rendering de centaines de milliers de pages par jours. Est-ce le besoin ? Je ne pense pas. En général le PiNoob, ce qu’il veut, c’est plutôt quelques dizaines de pages vraiment interactives et accessibles par quelques clients simultanés tout en laissant suffisamment de ressources au système pour pouvoir framboiser sur d'autres trucs. Donc non, nous n’installerons pas de méga web server inutile, nous allons le programmer. Rassurez-vous, c’est très simple à faire avec les outils choisis. Coté performance, la simplicité ne sera pas un handicap. Nos quelques lignes de programmation vont même nous permettre, avec moins de code et moins de ressources, de surpasser sans aucun problème la même chose qui aurait été faite avec un vrai serveur php-cgi type Apache ou autre.

Pour ça, nous allons utiliser NodeJS. Pour ceux qui ne connaissent pas, ne vous y trompez pas, NodeJS n'est pas un serveur web. C’est tout simplement une plateforme qui permet de développer des applications asynchrones très performantes et orientées réseaux en utilisant du code en javascrit coté serveur. La notion de serveur web n'est donc qu'une des possibilités offerte par NodeJS et on ira bien au-delà de ce rôle dans ce tuto. Comme c'est du javascript, on pourra donc utiliser le même langage pour la partie serveur que pour la partie dynamique des clients web. Je ne vous en dis pas plus sur l’outil, de nombreux articles le décrivent déjà très bien sur le net et il vous appartiendra de vous documenter par vous-même. Pour le fun, quand le tuto aura bien avancé, je reprendrais quelques demandes sur le forum qui sont restées sans réponse vraiment concrète et il sera bien amusant de voir avec quelle simplicité on peut les résoudre avec ces méthodes.

Installation de NodeJS

La première chose à faire, c’est déjà de voir s’il n’est pas déjà installé parce que depuis plusieurs versions raspbian, c’est le cas. Exécutez la commande $ node –v. nodejs. Sur ma jessie ‘pixel’ la version installé est la v0.10.29. Si vous ne l’avez pas ou qu’elle est plus ancienne:

$ sudo apt-get update
$ sudo apt-get install nodejs

Ensuite pour se simplifier l’installation des ‘add-on’, il faut installer son gestionnaire de paquet qui s’appelle npm qui lui n’est pas installé par défaut

$ sudo apt-get install npm

Après l’installation, la commande $ npm –v vous retourne la version (chez moi 1.4.21).

Création du projet

Commençons par créer notre arborescence et installer quelques paquets utiles. Voici la liste des commandes dans l’ordre (pour le répertoire racine, vous faites ce que vous voulez, le mien s'appelle '~/myweb/'):

$ mkdir myweb (création du répertoire racine du projet)
$ cd myweb (on se place dedans)
$ mkdir public (création du sous répertoire qui recevra les statiques (images, scripts …)
$ mkdir templates (création du sous répertoires qui recevra les templates de pages web)
$ npm install express ejs jquery (installation des paquets qui vont nous servir)

En image, ça donne ca :
myweb01.png
myweb01.png (124.63 Kio) Vu 23187 fois
Si maintenant vous regardez votre arborescence, vous verrez qu’avec cette méthode, npm a créé automatiquement un sous répertoire node_modules et dedans, les sous répertoires contenant les ‘add-on’.
myweb02.png
myweb02.png (12.39 Kio) Vu 23187 fois
On pourrait aussi installer les paquets de façon globale mais il peut y avoir un grand intérêt à le faire localement comme nous l’avons fait, mais nous verrons ca plus tard.

Prochaine étape, développer le serveur web et notre première page dynamique
Modifié en dernier par Bud Spencer le mar. 5 nov. 2019 16:30, modifié 4 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. 8 oct. 2016 15:42

Programmation du serveur web et de la première page dynamique

Commençons à programmer notre serveur web. Créez un fichier ‘myweb.js’ dans le répertoire racine du projet et écrivez y le code suivant (les fainéants se contenteront de télécharger les fichiers en fin de post).

Le serveur
lecon1_1.png
lecon1_1.png (20.6 Kio) Vu 23186 fois
Les premières lignes chargent les différents modules dont nous aurons besoin. Express est un mini Framework qui permet d’apporter des fonctions dédiées à la création de site web et Ejs va s’occuper du rendering des pages. Notre serveur web tient dans une variable objet qui ici s’appelle ‘app’. Les lignes suivantes initialisent notre serveur web notamment en définissant des chemins statiques ce qui rendra la programmation plus simple. La variable crédit est un objet javascprit en notation json qui nous servira pour l’exemple.
La fonction apt.get(‘/’ … sera appelée par tout client qui fera une requête http sans préciser de page. En retour, il recevra la page ‘index.html’ qui aura été ‘renderisée’ par ejs. Notez que j’ai passé en paramètre l’objet ‘crédit’.
La dernière ligne démarre le serveur et le met à l’écoute sur le port 8080 (vous pouvez aussi utiliser le port http 80 si vous voulez, mais il faudra être sur que rien d’autre ne tourne déjà dessus et sous linux il faudra démarrer votre application avec une commande sudo).

La page pour client

Créons maintenant une page ‘index.html’ que l’on va placer dans le répertoire prévu à cet effet, à savoir ~/myweb/templates/.
La page html utilise une image ‘logo.gif’. Il faut donc la placer dans le répertoire des statiques à savoir ~/myweb/public/
Nous utilisons aussi jquery. Pour ceux qui ne connaissent pas, c’est un Framework extrêmement populaire et quasi incontournable qui permet de simplifier énormément le code javascript. Ici nous l'avons installé avec npm donc nous pourrons l’utiliser aussi bien coté serveur que client. Notez l’intérêt d’avoir défini un chemin statique dans la partie serveur (app.use(‘/jquery ….). Cela nous permet dans la page html d’écrire juste :
src= "/jquery/…. au lieu de src= "/node_module/jquery/dist/…’
lecon1_2.png
lecon1_2.png (33.26 Kio) Vu 23186 fois
Vous pouvez maintenant démarrer le serveur avec la commande $ node myweb.js et depuis n’importe navigateur sur votre réseau ou directement sur le PI vous pouvez appeler la page http://adresseipdupi:8080. Si vous n'avez pas fais d'erreur et moi non plus, vous devez avoir ca (avec votre image a vous).
lecon1_3.png
lecon1_3.png (38.93 Kio) Vu 23186 fois
Passons aux subtilités du code de la page. Si vous regardez bien, vous verrez que tout le code qui se trouve entre les balises <% %> a été exécuté coté serveur (ejs). L’objet ‘credit’ que j’ai passé en paramètre est bien présent et j’ai même écrit du code qui s’exécute pendant le rendering pour avoir l’heure et la date coté serveur. Un peu comme en php quand on place du code entre les balises < ?php> Par compte, le rendering n’a pas touché au code qui se trouve entre les balises <script>. Ce code-là, c’est le client qui l’exécute localement et quand vous cliquez sur le bouton, c’est le client met à jour l’heure locale.

Nous avons donc bien un vrai serveur web capable de charger des templates, d’y inclure des objets et d’exécuter du code pour formater la page avant de la renvoyer aux clients. Rien qu’un Apache ou Nginx ne saurait faire me direz-vous et pourtant si, on a fait bien plus. Si vous avez un pc chez vous (linux, windows et sans doute mac mais je n’ai pas essayé) ou un autre pi, installez lui nodejs et faite lui exécuter votre application que vous aurez préalablement copié sur une clé usb. Votre serveur va tourner tout pareil et il sera en mesure de distribuer vos pages. Souvenez vous de l’installation locale des paquets. Elle prend ici tout son sens. En copiant l’arborescence sur une autre machine, on emmène aussi les ‘add-on’. Pour la petite histoire, je développe et test ce tuto sur un énorme pc qui tourne sous windows pro et ensuite je copie les fichiers sur le pi, mais j'aurais tout aussi aussi pu faire l'inverse.

En fait, bien plus qu’un serveur web, avec seulement quelques lignes de code, nous avons développé une application complétement portable, capable d'être parfaitement cloisonnée entre la partie GUI et la partie 'métier' et capable d’être utilisée par de multiple clients sans aucune installation.

Dans la prochaine étape on verra comment avoir un dialogue client<>serveur en temps réel sans avoir a recharger la page.
Modifié en dernier par Bud Spencer le sam. 8 oct. 2016 21:03, 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 : 1089
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » sam. 8 oct. 2016 15:48

Fichiers de la leçon n° 1
pour les fainéants et ceux qui n'ont pas de doigts pour tapoter du code :lol:

Update du 05 Nov 2019, Testé avec NodeJs 12.13.0 et npm 6.12.1
Installation :
Dezipper dans un répertoire préalablement créé
excuter npm install depuis la racine du projet pour installer les packages
executer node myweb.js depuis la racine du projet pour demarrer l'application
http://adressedupi:8080 pour s'y connecter depuis un navigateur

lecon1.zip
(29.05 Kio) Téléchargé 501 fois
La précédente version avait été téléchargée 406 fois
Modifié en dernier par Bud Spencer le mar. 5 nov. 2019 16:48, modifié 2 fois.
Le premier ennemi de la connaissance n’est pas l’ignorance, c’est l’illusion de la connaissance (S. Hawking).

domi
Administrateur
Messages : 3230
Enregistré le : mer. 17 sept. 2014 18:12
Localisation : Seine et Marne

Re: [TUTO] Application web dynamique

Message par domi » sam. 8 oct. 2016 17:42

Merci pour ce tuto fort intéressant.
Passionné de Raspberry, Arduino, ESP8266, ESP32, et objets connectés :
Spécial débutant, concevez vous-même votre domotique DIY : https://www.youtube.com/c/DomoticDIY
Conception d'une station météo DIY, et envoi des infos à votre Domotique.

guillaume9344
Raspinaute
Messages : 629
Enregistré le : mar. 6 janv. 2015 19:44
Localisation : finistere

Re: [TUTO] Application web dynamique

Message par guillaume9344 » sam. 8 oct. 2016 19:11

+1
instructif.
rpi b+ ,osmc, motioneyes
rpi 2 raspbian , server minecraft 24h/24 , utilisation gpio
orange pi pc debian ,utilisation gpio, motion cam

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

Re: [TUTO] Application web dynamique

Message par Bud Spencer » sam. 8 oct. 2016 20:53

domi a écrit :Merci pour ce tuto fort intéressant.

Pas de quoi domi. Je le fait 'passionnément' et parce que je suis convaincu qu'il y a une vraie demande pour ce genre de chose. Je n'ais aucune de prétention particulière en écrivant tout ca, mais j'ai parcouru ce forum de long en large et je suis persuadé que la simple présentation de ces méthodes peut changer la façon de voir les choses de beaucoup de débutants et même de gens plus confirmés à la recherche d'une solution qui conviendrait à leur besoins.

guillaume9344 a écrit :+1
instructif.

C'est bien la le but mon cher Guillaume.


Dialogue client<>serveur en temps réel.

Dans la leçon n° 1 il ne nous a fallu que quelques lignes pour développer un serveur web dynamique qui dans la grande majorité des cas peut rempacer Apache (ou nginx ou autres)+ php. Coté client, nous utilisions un bouton pour mettre à jour l’heure locale de la page. Nous aurions aussi pu le faire en automatique dans le fichier index.html en remplaçant la ligne
updatelocale(); par setInterval(updatelocale, 1000);

Le but c’était surtout de présenter sommairement NodeJS, de démontrer le rendering coté web server et aussi rappeler qu’une page web peut se comporter comme une vraie application GUI avec des boutons et tout un tas d’autres choses.
Dans cette leçon nous allons voir que cette application peut aussi dialoguer en temps réel avec le serveur qui l’a distribué sans pour ca être rafraichie et même qu’elle peut recevoir des données et les traiter sans rien avoir à faire. Plus tard nous verrons qu'elle peut aussi dialoguer avec d'autres serveurs et beaucoup d'autres choses.

Pour mettre à jour l’heure ‘serveur’, on pourrait rafraichir la page en automatique toutes les secondes ou utiliser un composant Ajax qui demanderait l’heure au serveur toutes les secondes. Mouais ce sont des méthodes qui fonctionnaient, mais ça, c’était avant. Nous, chez framboise314, on est des vrais geeks modernes, donc on va faire bien mieux que ça ;) .

Pour ça on va utiliser un outil ‘magic’ qui s’appelle socket.io. Cela va nous permettre de créer un canal de transport permanent entre le serveur et ses clients, soit de façon individuelle ou en broadcast ( à tous les clients connectés).

Commençons par ajouter le paquet ‘magic’ avec npm. On se place dans le répertoire racine du projet et on tape la commande pour installer le paquet : $ npm install socket.io . Une fois fini, le répertoire node_modules contient logiquement un nouveau dossier ‘socket.io’. Editons le fichier de notre application serveur ‘myweb.js’ et modifions le pour arriver à ca :
lecon2_1.png
lecon2_1.png (51.87 Kio) Vu 23172 fois
Les principales modifications portent sur l'ajout du paquet socket.io ainsi que sont chemin statique et sur une fonction qui va être a l'écoute de ce socket pour répondre.

Puis on modifie le fichier index.html qui trouve dans ../templates :
lecon2_2.png
lecon2_2.png (62.63 Kio) Vu 23172 fois
Même chose que coté serveur. Ajout du composant socket.io et d'une fonction de réception plus une fonction d'envois pour demander l'heure quand on click sur le bouton.

! Attention ! l’adresse 192.168.1.4 est l’adresse fixe de mon PI utilisée pour ce tuto. Modifiez l’adresse suivant votre cas et pensez-y si vous copiez l’appli sur une autre machine. On verra plus tard comment formater ce paramètre automatiquement


On redémarre le serveur $ node monweb.js et on rafraichi la page. Génial, l’heure coté client est mis à jour automatiquement (mouais, bof, on en a vu d’autre …) et quand on click sur le bouton ça met à jour l’heure serveur sans recharger la page.

La ligne var socket = io… dans le client instancie une connexion directe avec le serveur, et le click sur le bouton envoie au serveur la requête ‘heureserveur’ . Coté serveur, quand il reçoit cette demande dans socket.on() il retourne l’objet ‘es’ au client demandeur. Le client reçoit ‘es’ exactement de la même façon et il n’a qu’à afficher les propriétés qui l’intéresse.

On pourrait être tenté d’ajouter un autre setInterval coté client pour appeler la fonction updateserver toute les secondes et cela marcherais mais si je me suis permis d’écrire qu’une requête Ajax ça faisait un peu has been ce n’est pas pour arriver au même résultat. En fait j’ai fait comme ça juste pour démontrer qu’un client peut demander quand il le veut quelque chose au serveur (et même lui transmettre des objets, mais on verra ca plus tard) et qu’il peut traiter la réponse sans rafraichissement. Ce setInterval, on va le placer sur le serveur et c’est lui qui toute les secondes fera un broadcast sur tous ces clients connectés et eux seront mis à jour automatiquement sans rien demander. Pour ça j’ajoute juste une fonction (sendel) et un setInterval dans le fichier myweb.js et je redémarre le serveur.
lecon2_3.png
lecon2_3.png (16.67 Kio) Vu 23172 fois
Connectez vous avec votre navigateur à la page. Désormais, tous les client reçoivent automatiquement l’heure du serveur et se mettent a jour sans rien demander.

Vous commencez à percevoir un peu le potentiel du truc ? Pas encore ?, ne vous en faites pas ça viendra :lol: . Essayez de faire la même chose avec un serveur php-cgi et vous allez vite comprendre l'intérêt d'un outils comme NodeJs. Bien sur que c'est possible avec un cgi, je l'ais fait, bien avant l'existence de NodeJs et sockeit.io, mais à quel prix et avec quel rapport performance/charge ? ;)

Dans la leçon suivante, je vous parlerais des possibilités graphiques coté client mais aussi du rôle que peut jouer le serveur pour interagir avec lui
Modifié en dernier par Bud Spencer le dim. 9 oct. 2016 08:30, 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 » sam. 8 oct. 2016 20:55

Vos doigts n'ont pas repoussés ou la flemme est toujours en vous ? pas de problème :mrgreen:
Les fonctions du boutons de requête de mise à jour de l'heure serveur sont rendues obsolètes par le dernier serveur qui fait tout le boulot tout seul mais je les ais laissé des 2 cotés pour rappeler que le client peut aussi être demandeur de quelque chose à titre individuel. Si vous faite une demande de rafraichissement depuis votre client, seul ce dernier reçoit l'information alors qu'en plaçant un appel sockets.emit à l'extérieur de la fonction socket.on du serveur, ce sont tous les clients connectés et à l'écoute de la fonction qui sont soumis au résulat. Rigolo non ? ;)

Update du 05 Nov 2019, Testé avec NodeJs 12.13.0 et npm 6.12.1
Installation :
Dezipper dans un répertoire préalablement créé
excuter npm install depuis la racine du projet pour installer les packages
executer node myweb.js depuis la racine du projet pour demarrer l'application
http://adressedupi:8080 pour s'y connecter depuis un navigateur

lecon2.zip
(32.13 Kio) Téléchargé 410 fois
La précédente version avait été téléchargée 344 fois
Modifié en dernier par Bud Spencer le mar. 5 nov. 2019 16:48, 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 : 1089
Enregistré le : lun. 15 août 2016 21:38

Re: [TUTO] Application web dynamique

Message par Bud Spencer » lun. 10 oct. 2016 22:11

Interaction graphique client/serveur

Dans la leçon précédente, nous avons vus qu’avec socket.io il était très simple d’établir un dialogue client<>serveur<>clients et que de chaque côté il était possible de s‘abonner à des évènements. Le rafraîchissement de l’heure du serveur dans la page du client était assez démonstratif mais nous allons cette fois ci aller plus loin. Nous allons définir coté serveur une valeur spécifique issues d’un calcul en temps réel et transmettre le résultat, toujours temps réel, aux clients. De leurs coté, les clients afficheront à leur rythme le résultat sous forme graphique. Il aura aussi la possibilité de modifier les paramètres de l'affichage ainsi que de modifier le paramètre de calcul du serveur.
Pour cadrer avec les intérêts des bidouilloux en électronique qui s’intéressent au PI, j’ai choisi une idée originale qui rendra la démo explicite. Nous allons transformer le serveur en générateur de fonction virtuel et le client en oscilloscope. Pour la petite histoire, l’idée m’était venue au besoin de générer un signal pwm de fréquence faible sur une GPIO en sortie pour faire des tests avec une électrovanne. Bien sur ce générateur et cet oscilloscope sont sans grande prétention, le but étant juste de donner un aperçu des possibilités graphiques et d’interactions entre les clients et le serveur.

Le générateur de fonction (serveur) :
Coté serveur, écrivons une fonction qui va générer dynamiquement une courbe rigolote. Ici, les 10ms n’ont pas valeur d’horloge. Ils définissent juste la fréquence ou le serveur va faire le calcul d’une nouvelle valeur et la transmettre aux clients. Ajoutons aussi 2 évènements socket.io qui permettront aux clients de modifier le paramètre de calcul de la courbe en + ou -
lecon3_1.png
lecon3_1.png (17.99 Kio) Vu 23113 fois
L’oscilloscope (client) :
Le rôle du client c’est d’afficher la courbe en fonction des valeurs qu’il reçoit du serveur. Pour dessiner nous allons utiliser un <canvas> . Ici il faut voir le canvas comme une simple zone de dessin dans laquelle nous allons tracer des lignes point à point. Ce n’est pas ce qu’il y a de plus efficace, mais c’est très simple à mettre œuvre et cela suffira bien pour l’exemple. Une fois les éléments canvas et les boutons ajoutés dans la partie html, ajoutons le code javascript pour dessiner à proprement parler un oscilloscope de 400 points de large sur 200 point de haut et avec une grille de 20 points². la fonction scalex est appelée toutes les 20 ms et représente la base de temps sur l’axe horizontale. L’évènement socket.on (‘scaley’ … va recevoir les données du générateur. Pour simuler un niveau de 1 volt/carreau, cette valeur est divisée par 50 (50 x 20 points de haut = 1000 millivolts). Pour finir ajoutons les fonctions des boutons Y+ et Y- qui permettront de déplacer l’axe Y vers le haut ou vers le bas puis les fonctions qui permettront de modifier la variable de calcul du générateur.
lecon3_2.png
lecon3_2.png (53.27 Kio) Vu 23113 fois
Voilà, vous pouvez démarrer le serveur … ho pardon, je voulais dire votre générateur de fonction :mrgreen: , et vous pouvez y connecter votre oscilloscope.
lecon3_8.png
lecon3_8.png (78.86 Kio) Vu 23113 fois

Les boutons Y+ et Y- déplacent la trace vers le haut ou vers le bas et les boutons fx.up et fx.down modifient la tension et la forme du signal. Le moins que l’on puisse dire, c’est que le générateur est capable de signaux vraiment bizarroïdes :lol:

Si vous vous connectez avec plusieurs clients, vous verrez que quand l’un d’eux change la tension et la forme du signal, tous les clients connectés sont concernés, alors que si vous déplacez la courbe vers le haut ou le bas avec Y+ ou Y-, le changement se fait localement. On peut donc facilement imaginer des applications avec identification qui ne donneraient des droits de modification de paramètres serveur qu'aux utilisateurs autorisés.

Si vous faites le test du client directement avec le navigateur du PI, vous verrez qu’il consomme pas mal. Chez moi, sur un PI3, ça passe sans problème, mais le nouveau navigateur de la version 'pixel' est particulièrement gourmand en ressources. Toutefois, n’oublions pas qu’en plus de maintenir le navigateur connecté et de lui faire traiter des données reçues d’un socket toutes les 20ms, nous lui demandons en plus de mettre à jour une image tout aussi fréquemment ce qui est particulièrement gourmand sur un appareil aux performances graphiques plutôt limitées. SI vous réduisez la vitesse de la base de temps locale, la charge va logiquement baisser. N’en déduisez pas trop vite que cela n’est pas viable. La finalité de ce tuto, c’est de s’interfacer graphiquement et facilement et les cas où l’on a besoin d’avoir des données rafraichies toutes les 10 ou 20 ms sont plutôt rares. De plus les codes sont ici écrits de façon extrêmement sommaire pour être démonstratif et ils n’ont pas pour vocation d’être performant. Sachez toutefois que l’on aurait pu faire beaucoup mieux. Notamment avoir un slide de la courbe plutôt qu’un restart à Y0 et traiter des signaux beaucoup plus rapides avec une interface bien plus fluide tout en gardant une charge plus raisonnable. Les plus curieux trouveront facilement sur le net des ‘composants graphique’ très beaux et très performants écrit en JavaScript. J’en ferais peut être l’exemple dans une autre leçon.

La prochaine fois nous verrons peut être comment remplacer cette fonction de générateur virtuel par de vrais évènements sur les GPIO
Modifié en dernier par Bud Spencer le lun. 10 oct. 2016 22:28, 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 » lun. 10 oct. 2016 22:20

Fichiers update leçon n° 3

Noter que j'ai remplacé l'adresse du serveur par 'location.host' pour la connexion au socket dans la page html. J'en avais parlé et surtout j'en avais marre de changer à chaque fois entre la machine de dev et le pi testeur :lol:

Update du 05 Nov 2019, Testé avec NodeJs 12.13.0 et npm 6.12.1
Installation :
Dezipper dans un répertoire préalablement créé
excuter npm install depuis la racine du projet pour installer les packages
executer node myweb.js depuis la racine du projet pour demarrer l'application
http://adressedupi:8080 pour s'y connecter depuis un navigateur

lecon3.zip
(32.58 Kio) Téléchargé 400 fois
La précédente version avait été téléchargée 346 fois
Modifié en dernier par Bud Spencer le mar. 5 nov. 2019 16:50, 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 » jeu. 13 oct. 2016 20:52

Jauges

Avant d’attaquer ‘intelligemment’ la gestion des GPIOs, voici un autre petit exemple de rendu avec toujours un code aussi simple. Pour cette leçon, l’oscilloscope a laissé place une jauge trouvé parmi les millions de ressources graphique en JavaScript qui peuplent le net. A l’exception des différentes propriétés pour personnaliser le cadran, il ni a pas vraiment pas beaucoup à écrire coté client. Coté serveur, j’ai juste modifié un peu la fonction qui génère le signal pour simuler une belle sinusoïdale qui balaye de 0 à 5 volts. Cette fois ci plus besoin d’horloge coté client, c’est le serveur qui envois la valeur de la courbe toutes les 50 ms sur le socket.io et le client se met à jour à réception. L’affichage est parfaitement fluide dans le navigateur du PI. Ici c'est un composant javascript 'isolé', mais de très nombreux composants graphique sont distribué directement avec npm.
lecon4_1.png
lecon4_1.png (80.07 Kio) Vu 23090 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 »