VISUAL STUDIO CODE, ENVIRONNEMENT de PROGRAMMATION
Utilisant l'IDE Arduino pour mes petites bidouilles de modéliste, après l'achat d'une imprimante 3D, Il m'a fallu aborder l'utilisation de "VISUAL STUDIO CODE" pour modifier le firmware
Pour coder l'ESP 32, Arduino peu convenir mais "VISUAL STUDIO CODE" est plus adapté. VS CODE n'est pas qu'un simple éditeur de texte, il est aussi un outil de codage en plusieurs langages pour des plateformes diverses,
Je vous propose donc une initiation à cet environnement.
Programmer Arduino avec Visual Studio Code: aranacorp.com
Ouvrons donc PlatformIO pour accéder à sa page "home".
Nous pouvons accéder au choix des "boards" (cartes) et des librairies.
Une foi PlatformIO ouvert, choisir un dossier qui contiendra notre projet.
Créons un projet en cliquant sur "+ New Project".
Entrons un nom de projet(ex: essai), une board(ex: arduino uno) et un Framework(ex: arduino).
Clic sur "finish".
Attendre le temps que PlatformIO génère la structure et ouvre un fichier: platformio.ini.
C'est le fichier de configuration de notre projet.
Ajoutons une ligne de code pour la vitesse du terminal intégré (moniteur série), exemple: « monitor_speed = 9600 » .
Plus loin dans le ".cpp" la meme vitesse devra correspondre: «serial.begin(9600);» .
En cas d'utilisation d'une librairie, il faut la rajouter ici: (ex: lib_deps = ...).
Ensuite, on va ouvrir: main.cpp (à gauche dans le répertoire de notre dossier, ouvrir, src).
On rentre nos lignes de code, ici led clignotante.
L'étape suivante consiste à compiler et téléverser ce code dans notre carte arduino uno.
On clic sur téléversement, une fenetre s'ouvre, et on voit le travail de compilation et de transfert dans la carte, jusqu'au message de fin [success]
Si une led et sa résistance sont raccordées sur le pin 13 et le gnd de notre carte, elle clignote, et dans le moniteur série (clic sur l'icone de bas de page), on voit une succession de HIGH et LOW.
Si on souhaite rajouter une librairie à notre projet, On retourne sur l'écran d'accueil platform IO (fenetre principal).
On va dans l'onglet librairies, on tape dans la barre de recherche la librairie souhaité.
Un choix de diverses librairies nous est proposé, on clic sur celle qui nous interesse.
Cette librairie s'ouvre, et on clic sur "Add to project".
Nouvelle fenetre avec demande de choix de projet, clic sur Add après avoir renseigné le nom du projet.
Le résultat apparait dans platformio.ini, une ligne de code:"lib_deps = arduinogetstarted/ezLED@^1.0.1" (dans mon cas).
Si je dévellope l'onglet "explorateur", en le parcourant, dans PIO, on remarque les différents exemples de cette librairie, en cliquant sur l'exemple ".ino", celui ci se rajoute à notre projet.
Comment Programmer Arduino avec l'extension ARDUINO dans Visual Studio Code sans platformIO, voir vidéo ci-dessous
Pour l'ESP32 avec VS CODE, c'est comme pour l'arduino UNO, à partir de platformIO,choisir un dossier, créer un nouveau projet, pour le board, on choisi "Espressif ESP32 Dev Module"
Apparemment, un premier projet prend un peu de temps à VS CODE à construire la structure.
Et, enfin on voit à gauche l'arborescence de notre projet.
Allons voir le fichier source (main.cpp).
Maintenant quelle tache simple allons nous effectuer avec notre ESP32 pour débuter.
Bon, je vais m'inspirer de la vidéo suivante (en anglais)..
Rajoutons la vitesse du moniteur série dans platformio.ini.
Renseignons aussi cette vitesse dans main.cpp, on en profite pour rajouter un petit "bonjour du setup".
Dans le Loop, un petit delai et un petit bonjour du loop.
Nous allons aussi rajouter une diode qui clignote (sur GPIO 2).
C'est le moment de télécharger notre code (on peu aussi compiler auparavant pour voir des erreurs éventuelles), memes icones de bas de page.
Voilà, notre led clignote et le message apparait bien dans le moniteur série.
Installation et premiers essais avec un ESP32: celka.fr
Ce qui suit est pour moi, une nouveauté que je découvre avec vous, mon vieux "sitakiki.fr" est bien obsolète vu ce qui suit
La grosse différence en HTML5, c'est qu'on évite les balises de style dans le HTML, on défini le style dans le fichier style.css associé
Du coup, les balise obsolètes du genre : font color= "red" seront en rouge dans VS CODE
La création d'un site internet utilise surtout le language "HTML" pour son contenu, accompagné d'une page de style "CSS" et on peu aussi rajouter du code "JAVASCRIPT", voir du PHP.
On voit que html lang="en concerne la langue anglaise, pour ma part je passe en langue française: "html lang="fr"".
A partir de là, on peu voir ce qui se passe dans notre navigateur en appuyant sur l'icone "go live" en bas à droite.
Réduisons la fenêtre du navigateur, pour avoir les deux fenêtres en parallèles.
Ajoutons un peu de code dans index.html et style.css (voir le lien : pixees.fr ci-dessus).
On se rend compte qu'en passant la souris sur l'icone couleur dans style.css (background color) une palette de couleur nous est proposé pour ajuster notre choix.
Donc, on a la fenêtre programmation et le résultat instantané en parallèle avec go live.
Un clic droit dans la fenêtre index.html nous ouvre un ecran proposant de mettre en forme le document (indenter) avec prettier.
La création d'un site internet utilise surtout le language "HTML" pour son contenu, accompagné d'une page de style "CSS" et on peu aussi rajouter du code "JAVASCRIPT".
Le style de notre page se défini dans notre style.css, par exemple pour les titres:
Remarquez les bords arrondis du cadre avec: border-radius.
Les titres vont de H1 à H6 avec des tailles qui vont en diminuant.
Guide SEO des balises de titres H1, H2, H3... H6 : webrankinfo.com
