Wiki

Reso-nance numérique | Arts et cultures libres

Outils du site


projets:serveurwebsurbatterie:accueil

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
projets:serveurwebsurbatterie:accueil [2019/12/28 21:38]
laurent [Code Arduino]
projets:serveurwebsurbatterie:accueil [2019/12/28 21:52] (Version actuelle)
laurent [Code Arduino]
Ligne 12: Ligne 12:
 Cadeau original et intriguant pour développeurs en herbe ou mordus d'objets connectés, ce circuit simple, fun et réutilisable leur permet de s'amuser avant de le transformer en un tout autre projet. Un ESP8266 alimenté sur batterie crée un réseau WIFI et héberge un quizz personnalisable sur un serveur web utilisant bootstrap et jquery. Une fois le quizz complété, une page web affiche le nombre de bonnes réponses. Quand toutes les réponses sont validées, un piezo joue la mélodie de "//we wish you a merry christmas//" et allume la led bleue intégrée. Cadeau original et intriguant pour développeurs en herbe ou mordus d'objets connectés, ce circuit simple, fun et réutilisable leur permet de s'amuser avant de le transformer en un tout autre projet. Un ESP8266 alimenté sur batterie crée un réseau WIFI et héberge un quizz personnalisable sur un serveur web utilisant bootstrap et jquery. Une fois le quizz complété, une page web affiche le nombre de bonnes réponses. Quand toutes les réponses sont validées, un piezo joue la mélodie de "//we wish you a merry christmas//" et allume la led bleue intégrée.
  
-Les questions du quizz peuvent être facilement personnalisées et l'heureux destinataire peut réutiliser le circuit en y flashant son propre code pour réaliser toutes sorte d'applications web ou d'objet connecté.+Les questions du quizz peuvent être facilement personnalisées et le destinataire peut réutiliser le circuit en y flashant son propre code pour réaliser toutes sorte d'applications web ou d'objet connecté.
 {{ :projets:serveurwebsurbatterie:carte.jpg?direct&400 |}} {{ :projets:serveurwebsurbatterie:carte.jpg?direct&400 |}}
  
Ligne 29: Ligne 29:
   *  le code arduino qui gère le wifi, le serveur web, valide les réponses et joue la mélodie en PWM sur le piezo   *  le code arduino qui gère le wifi, le serveur web, valide les réponses et joue la mélodie en PWM sur le piezo
   *  le code HTML/JS assure l'affichage graphique et l'interface utilisateur (UI)   *  le code HTML/JS assure l'affichage graphique et l'interface utilisateur (UI)
-  *  les librairies externes ([[https://getbootstrap.com | bootstrap]], popper et [[https://jquery.com/ | jQuery]]) qui permettent d'obtenir facilement une interface web //responsive// sont stockées sous forme de zip sur le **SPIFFS**+  *  les librairies externes ([[https://getbootstrap.com | bootstrap]] et [[https://jquery.com/ | jQuery]]) qui permettent d'obtenir facilement une interface web //responsive// sont stockées sous forme de zip sur le **SPIFFS**
  
 ==== Le SPIFFS ==== ==== Le SPIFFS ====
 Les ESP8266 comportent le plus souvent 4Mo de mémoire flash qui peut être répartie en une section réservée au code et une réservée au SPIFFS. Le SPIFFS ou //SPI FileSystem// est une des manières de gérer une partie de la mémoire flash comme s'il s'agissait d'un disque dur rudimentaire contenant plusieurs fichiers. Ces fichiers peuvent alors être téléversés sur l'ESP 8266 à l'aide d'un [[https://github.com/esp8266/arduino-esp8266fs-plugin | plugin pour l'IDE d'arduino]]  Les ESP8266 comportent le plus souvent 4Mo de mémoire flash qui peut être répartie en une section réservée au code et une réservée au SPIFFS. Le SPIFFS ou //SPI FileSystem// est une des manières de gérer une partie de la mémoire flash comme s'il s'agissait d'un disque dur rudimentaire contenant plusieurs fichiers. Ces fichiers peuvent alors être téléversés sur l'ESP 8266 à l'aide d'un [[https://github.com/esp8266/arduino-esp8266fs-plugin | plugin pour l'IDE d'arduino]] 
-Lors du téléversement du code depuis l'IDE d'arduino, il est nécessaire de lui indiquer la taille allouée au SPIFFS (ici 1Mo ou plus) : une fois la carte **LOLIN/WEMOS D1** sélectionnée, le sous-menu **outil->flash size** permettra d'allouer de la mémoire au SPIFFS {{ :projets:serveurwebsurbatterie:spiffs.png?direct&400 |}}+ 
 +Lors du téléversement du code depuis l'IDE d'arduino, il est nécessaire de lui indiquer la taille allouée au SPIFFS (ici 1Mo ou plus) : une fois la carte **LOLIN/WEMOS D1** sélectionnée, le sous-menu **outils->flash size** permettra d'allouer de la mémoire au SPIFFS {{ :projets:serveurwebsurbatterie:spiffs.png?direct&400 |}} 
 + 
 +Une fois le plugin installé et la taille du SPIFFS alloué, il est possible de téléverser les fichiers contenus dans le répertoire **data** à l'intérieur du projet via le menu **outils->sketch data upload**  
 +<WRAP center round tip 60%> 
 +Le téléversement peut échouer si le moniteur série est lancé, pensez à le fermer avant de téléverser. 
 +</WRAP> 
 + 
 +{{ :projets:serveurwebsurbatterie:spiffupload.png?direct&400 |}}
  
 ==== Code Arduino==== ==== Code Arduino====
-Pour téléverser le code depuis Arduino, la librairie ESP8266 ainsi que le plugin SPIFFS doivent être préalablement installés. Le code initialise le SPIFFS, indique les routes vers les librairies statiques stockées dans le SPIFFS, stocke et vérifie les bonnes réponses et joue la mélodie sur le piezo via la librairie "notes.h" qui converti chaque note en fréquence en Hz. Il est commenté ligne par ligne (en anglais) +Pour téléverser le code depuis Arduino, la librairie ESP8266 ainsi que le plugin SPIFFS doivent être préalablement installés. Le code initialise le SPIFFS, indique les routes vers les librairies statiques stockées dans le SPIFFS, crée un réseau WIFI sans mot de passe, stocke et vérifie les bonnes réponses et joue la mélodie sur le piezo via la librairie "notes.h" qui converti chaque note en fréquence en Hz. Il est commenté ligne par ligne (en anglais) 
-++++ Code ESP8266.ino|+++++ Code ESP8266|
 <code cpp> <code cpp>
 /*Copyright 2019 Reso-nance Numérique <laurent@reso-nance.org> /*Copyright 2019 Reso-nance Numérique <laurent@reso-nance.org>
Ligne 261: Ligne 269:
 } }
 </code> </code>
 +++++
 ==== HTML/JS ==== ==== HTML/JS ====
 Pour plus de flexibilité, le quizz est stocké dans un tableau javascript sous la forme d'un objet par question : <code javascript>[{question:"texte de la première question", answer:["réponse une", "réponse deux"]}, Pour plus de flexibilité, le quizz est stocké dans un tableau javascript sous la forme d'un objet par question : <code javascript>[{question:"texte de la première question", answer:["réponse une", "réponse deux"]},
Ligne 266: Ligne 275:
   ...]</code>   ...]</code>
 Le code HTML est généré dynamiquement pour créer une div de la classe **well** dans un [[https://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp | jumbotron]] dans laquelle chaque réponse est représentée par un bouton radio. Un tableau est mis à jour avec chaque bouton radio coché pour chaque question dès que l'utilisateur choisit une réponse. Ce tableau est envoyé sous forme de requête POST contenant toutes les réponses (///verify?1=0&2=1&3=0...//) au serveur qui répond en **JSON** le nombre de réponses correctes et le nombre de questions totales. L'interface web affiche alors un message indiquant ces statistiques. Si toutes les réponses sont validées, un message de félicitations est lu et le piezo joue alors la mélodie deux fois. Les codes HTML et JS étant très courts, ils sont rassemblés dans un seul et même fichier (commenté en anglais) : Le code HTML est généré dynamiquement pour créer une div de la classe **well** dans un [[https://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp | jumbotron]] dans laquelle chaque réponse est représentée par un bouton radio. Un tableau est mis à jour avec chaque bouton radio coché pour chaque question dès que l'utilisateur choisit une réponse. Ce tableau est envoyé sous forme de requête POST contenant toutes les réponses (///verify?1=0&2=1&3=0...//) au serveur qui répond en **JSON** le nombre de réponses correctes et le nombre de questions totales. L'interface web affiche alors un message indiquant ces statistiques. Si toutes les réponses sont validées, un message de félicitations est lu et le piezo joue alors la mélodie deux fois. Les codes HTML et JS étant très courts, ils sont rassemblés dans un seul et même fichier (commenté en anglais) :
-html/JS +++++ Code HTML et JS| 
-<code javascript | html/JS>+<code javascript>
   <!-- Copyright 2019 Reso-nance Numérique <laurent@reso-nance.org>   <!-- Copyright 2019 Reso-nance Numérique <laurent@reso-nance.org>
  
Ligne 422: Ligne 431:
 </html> </html>
 </code> </code>
 +++++
/home/resonancg/www/wiki/data/attic/projets/serveurwebsurbatterie/accueil.1577565492.txt.gz · Dernière modification: 2019/12/28 21:38 de laurent