Ligne 5 : | Ligne 5 : | ||
|Disciplines scientifiques=Arduino, Computing | |Disciplines scientifiques=Arduino, Computing | ||
|Difficulty=Technical | |Difficulty=Technical | ||
− | |Duration= | + | |Duration=2 |
|Duration-type=hour(s) | |Duration-type=hour(s) | ||
|Tags=D1 mini, web, html/css | |Tags=D1 mini, web, html/css | ||
Ligne 82 : | Ligne 82 : | ||
|Step_Picture_00=Commander_un_D1_mini_avec_une_interface_web_Mobile-WiFi.png | |Step_Picture_00=Commander_un_D1_mini_avec_une_interface_web_Mobile-WiFi.png | ||
|Step_Picture_01=Commander_un_D1_mini_avec_une_interface_web_Interface_web.png | |Step_Picture_01=Commander_un_D1_mini_avec_une_interface_web_Interface_web.png | ||
+ | }} | ||
+ | {{Tuto Step | ||
+ | |Step_Title=Pour aller plus loin ... | ||
+ | |Step_Content=Le code Arduino est commenté, et devrait permettre de comprendre le fonctionnement des différents éléments, et de procéder à des modifications. | ||
+ | |||
+ | Pour simplifier la lecture (et il est d'ailleurs recommandé de faire de même pour vos propres programmes), on utilise plusieurs onglets pour séparer les différentes fonctionnalités : | ||
+ | |||
+ | <br /> | ||
+ | |||
+ | # '''A_D1_WiFi''' contient les variables globales (susceptibles d'être également utilisées dans les autres onglets), ainsi que les deux fonctions 'de base' du D1 Mini, similaires à celles utilisées dans les Arduino : | ||
+ | #* '''setup''' : c'est la première fonction appelée au démarrage du D1 Mini, après téléversement ou ré-allumage. C'est ici qu'on va initialiser le WiFi, démarrer le serveur web, définir l'état initial des leds, etc ... | ||
+ | #* '''loop''' : cette fonction est appelée régulièrement, c'est à partir de là qu'on réalise les activités souhaitées, telles que consultation ou modification des différents pins, calculs divers, etc ... | ||
+ | # '''B_Serveur_Web''' : gère toute la partie web, à savoir la génération de la page web, et également le traitement à effectuer lorsque cette page est demandée par un client (navigateur sur un PC ou un téléphone). C'est le module le plus complexe, il nécessite de connaître HTML, CSS, et Javascript pour l'appréhender. | ||
+ | # '''C_Cmd_Leds''' gère les commandes dites 'évoluées' des leds (par exemple clignotement ou défilement) | ||
+ | # '''D_Servomoteur''' gère le servomoteur | ||
+ | # '''E_Potentiomètre''' gère l'entrée analogique du D1 Mini (qui va lire la valeur fournie par le potentiomètre) | ||
+ | # '''F_Schéma_Montage''' décrit le montage matériel autour du D1 mini. | ||
}} | }} | ||
{{Notes}} | {{Notes}} |
Auteur Philippe Blusseau | Dernière modification 22/11/2022 par Philby
D1 mini, web, html/css Commander_un_D1_mini_avec_une_interface_web_D1mini-image-01.png
Quelques précisions sur les pré-réquis à ce tutoriel :
Le schéma de montage, également indiqué dans le code Arduino, est défini dans la première image. Nous recommandons d'utiliser une "breadboard", pour fixer le D1 mini et gérer l'ensemble des connexions. Nous avons utilisé ici celle livrée dans le kit d'initiation Arduino (Starter kit Arduino®). Les leds, les résistances, et le potentiomètre, proviennent d'ailleurs du même kit.
Le montage des 5 leds (sur les pins D0 à D4) ne pose pas de problème particulier, attention cependant à respecter la polarité +/-, et ne pas oublier de mettre les résistances afin de limiter le courant électrique.
Concernant le servo moteur, il faut l'alimenter via le pin GND, bien sûr, et la sortie 5V du D1 mini (celui-ci a également une sortie 3,3v, insuffisante pour le servomoteur). La commande du servomoteur sera connectée quant à elle, sur le pin D7 du D1 mini.
Et enfin,le potentiomètre aura ses deux connexions externes connectées d'une part sur GND, d'autre part sur le pin 3,3V (important, car c'est la tension maximale qui sera alors disponible sur la connexion centrale du potentiomètre, et qui sera acceptée par le pin A0 du D1 mini ; au-delà le D1 mini risque de souffrir).
On suppose ici que le logiciel Arduino est déjà installé, ainsi que la bibliothèque de gestion du D1 mini (voir pré-requis).
Le navigateur (ou "browser") peut être celui d'un téléphone mobile, d'une tablette, ou d'un ordinateur. Les images donnent ici l'exemple d'un téléphone mobile, sous android.
Le code Arduino est commenté, et devrait permettre de comprendre le fonctionnement des différents éléments, et de procéder à des modifications.
Pour simplifier la lecture (et il est d'ailleurs recommandé de faire de même pour vos propres programmes), on utilise plusieurs onglets pour séparer les différentes fonctionnalités :
Dernière modification 22/11/2022 par user:Philby.
Draft
Vous avez entré un nom de page invalide, avec un ou plusieurs caractères suivants :
< > @ ~ : * € £ ` + = / \ | [ ] { } ; ? #