Mes premiers programmes avec l'IDE ARDUINO

Bonjour,

Bon c’est plus simple pour moi en français alors je l’écris en français. Après avoir testé le magnifique ESPlge, j’ai bien sûr voulu tester la programmation directe en utilisant l’IDE Arduino.

Permettez moi de partager avec vous cette expérience.

1/ La structure minimum du programme.
Pour le moment, nous voulons juste pouvoir faire tourner un programme, nous allons utiliser une seule librairie: ESPboyInit

    // Test program: Minimal code

    #include "ESPboyInit.h"


    ESPboyInit myESPboy;       // Invoke custom library

    void setup()   {
      myESPboy.begin("WriteOnScreen");
    }

    void loop() {

      //Display a simple splash screen
      myESPboy.tft.fillScreen(TFT_BLACK);
      myESPboy.tft.setTextSize(2);
      myESPboy.tft.setTextColor(TFT_WHITE);
      myESPboy.tft.setCursor(40, 5);
      myESPboy.tft.println(F("Test program"));

    }

Voyons ensemble les éléments:

    // Test program: Minimal code

C’est une ligne de commentaire: On l’écrit en anglais si on peut et elle commence forcément par // (Il y a aussi la possibilité de mettre des blocs de commentaires mais on le verra plus tard, par exemple en ajoutant le type de licence en fin de code)

    #include "ESPboyInit.h"

La commande #include permet d’utiliser le code de la librairie locale “ESPboyInit.h”. Attention quand on ajoute une librairie, penser à regarder si elle en utilise d’autre. Pour celle-ci, il faut le code du programme “ESPboyInit.cpp” et le librairies standards.
ESPboyInit.h et ESPboyInit.cpp sont disponible sur le Github de Roman, mais vous pouvez aussi prendre celles qui se trouvent dans le répertoire de cette exemple qui ne requiert pas le logo de l’ESPboy et ne l’affiche pas au lancement. C’est un choix, utilisez celles-ci ou celles fournit avec le programme de test de l’ESPboy selon vos envies:
Celles de ce programme sont accessibles ici: https://github.com/Jicehel/ESPBoy/tree/main/WriteOnScreen
Celles du programme de test de l’ESPboy sont accessibles ici: https://github.com/ESPboy-edu/ESPboy_FirstTest

Enfin, si vous n’avez pas encore recopié les librairies de l’ESPboy, vous les retrouverez ici: https://github.com/ESPboy-edu/ESPboy_ArduinoIDE_Libraries

Cette librairie permet d’initialiser l’ESPboy par l’appel de la fonction begin de la classe ESPboyInit que nous ferons dans le setup

    ESPboyInit myESPboy;  

Permet de déclarer l’objet myESPboy de classe ESPboyInit
C’est cet objet que vous manipulerez. Vous allez utiliser souvent cet objet, si vous êtes fainéant comme moi, vous pouvez le remplacer par myE par exemple, ça ira plus vite à taper. Dans ce cas, penser à bien utiliser votre nom d’objet dans le code à la place de celui que j’ai mis.

    void setup()   {
      myESPboy.begin("WriteOnScreen");
    }

setup est une fonction appelée une fois au lancement du programme. Cette fonction permet de réaliser tout ce que l’on doit faire pour initialiser le programme.
Dans notre exemple, on a juste à appeler la fonction begin de notre objet myESPboy.
Le paramètre “WriteOnScreen” est le nom de l’application. Il s’affichera en jaune au bas de l’écran au lancement du programme
Pas la peine de rentrer plus dans ce que fait cette librairie, elle remet juste notre ESPboy dans son état initial pour que la console fonctionne normalement.

    void loop()   {
       [...]
    }

loop est la boucle principale appelée à infiniment après que la fonction setup ait été appelée une fois.
C’est ici que nous placerons les instructions qui seront exécutées par notre programme.

      //Display a simple splash screen
      myESPboy.tft.fillScreen(TFT_BLACK);
      myESPboy.tft.setTextSize(2);
      myESPboy.tft.setTextColor(TFT_WHITE);
      myESPboy.tft.setCursor(40, 5);
      myESPboy.tft.println(F("Test program"));

C’est notre
bloc de programme.

  myESPboy.tft.fillScreen(TFT_BLACK); permet de remplir l'écran en noir

Rappel des couleurs:
TFT__BLACK, TFT_BLUE, TFT__RED, TFT_GREEN, TFT_CYAN, TFT_MAGENTA, TFT_YELLOW, TFT_WHITE

  myESPboy.tft.setTextSize(2);

Permet de changer la taille du texte affiché. Vous pouvez utiliser les valeur 0, 1 ou 2 => 0 petit, 1 à peine plus grand et 2 encore plus grand

     myESPboy.tft.setTextColor(TFT_WHITE);

On indique que l’on va écrire en blanc, si vous voulez changer la couleur, utilisez une des couleur de la liste donnée juste avant.

      myESPboy.tft.setCursor(40, 5);

On positionne le curseur sur sa position de départ, avec une abscisse de 40 pixels (donc un texte qui commencera à 40 pixels du bord gauche) et une ordonnée de 5, donc un texte dont le haut des lettres seront à 5 pixels du bord haut de l’écran.
N’hésitez pas à jouer avec ses valeurs

    myESPboy.tft.println(F("Test program"));

C’est la commande qui permet d’afficher une chaine à l’écran à partir de la position courante du curseur. L’instruction println indique au programme de passer à la ligne suivante après avoir écrit ce que l’on lui a demandé. Dans notre cas, on pourrait tout aussi bien utiliser print simplement. A la différence de println, print affiche juste le texte demandé. la commande print suivante viendra mettre le texte à sa suite sauf si entre temps on déplace le curseur.

Voilà, on a vu toutes les instructions. Manipulez un peu le programme.
Vous remarquez que le texte saute, ce n’est pas très agréable. C’est une console de merde… et bien non, c’est de votre faute. Cherchez et essayer de trouver pourquoi avant de continuer…

Relisez bien et essayez de faire ce que le processeur fait …

Trouvé ? Corriger le programme pour que le phénomène disparaisse et continuez à lire la suite sinon arrêtez vous là dans votre lecture et cherchez. Si vous ne trouvez pas, vous pouvez également continuer.

En fait la fonction setup est exécutée un e fois mais loop est exécutée plusieurs fois par seconde. Dans cette boucle, nous effaçons l’écran en le remplissant de noir, puis nous affichons notre texte et ce plusieurs fois par secondes => l’écran clignote.

Pour notre programme, nous aurions plusieurs solutions. La plus simple c’est de faire l’effacement du texte dans le setup et dans notre cas, on peut même afficher le texte également dans le setup puisqu’il ne change pas.

Dans le cadre d’un jeu, si le texte doit pouvoir changer, on peut par exemple utiliser une condition qui fait que si une valeur change, on efface le texte puis on affiche la valeur voulue.

Je vous mets un code intermédiaire ici pour cette découverte. On efface l’écran dans le setup et on règle la taille de la police. Dans ce programme, le texte sera réaffiché à chaque boucle, ce qui ne sert à rien dans notre exemple puisque c’est toujours le même. Du coup, j’en profite pour afficher une valeur qui change. Si on ne fait que ça, le programme va ajouter les points qui changent à chaque boucle. On aura donc vite un rectangle de la couleur du texte avec tous les points utilisés par la police. Il faut donc effacer les endroits ou le texte va changer. Il y a plusieurs solutions. Dans notre cas, on va attendre 333 ms puis on effacera l’écran avant que le programme ne les réaffiche.

Notre programme devient donc celui-ci:

    // Test program: Minimal code

#include "ESPboyInit.h"

ESPboyInit myESPboy;       // Invoke custom library
static uint16_t count = 0;

void setup()   {
  //Set up the display
  myESPboy.begin("Minimal code");
  myESPboy.tft.setTextSize(2);
  myESPboy.tft.setTextColor(TFT_WHITE);
}

void loop() {
  
  // Display a counter
  myESPboy.tft.fillScreen(TFT_BLACK);
  char buf[10];
  count++;
  myESPboy.tft.setCursor(20, 5);
  myESPboy.tft.print(F("Test - "));
  dtostrf(count, 5, 0, buf); 
  myESPboy.tft.print(buf);
  delay(333);

}

Bon, ce premier essai vous a permis de vous familiarisez un peu avec les commandes permettant d’afficher du texte et la librairie ESPboyInit.h

Au prochain tuto pour continuer notre exploration de la programmation via l’IDE Arduino en c++

A bientôt

1 Like

Comme d’habitude, tuto de qualité et très détaillé.
Merci Jicehel

1 Like

Merci et dès que j’ai un peu de temps, j’avance un peu sur le sujet (notamment sur les images et les sprites et après j’en ferais un autre pour jouer musique / sons car ce sont des points sur lesquels je dois me mettre à l’aise avant de recoder un jeu sur l’ESPboy).

Autre programme pour tester les couleurs:

// Coulour_Test adapted by Jicehel from the TFT_eSPI examples

#include "ESPboyInit.h"

ESPboyInit myESPboy;       // Invoke custom library

void setup()   {
  //Set up the display
  myESPboy.begin("Colour_Test");
  myESPboy.tft.fillScreen(TFT_BLACK);
  // Set "cursor" at top left corner of display (0,0) and select font 1
  myESPboy.tft.setCursor(0, 0, 1);
  // myESPboy.tft.setCursor(0, 0);

  // Set the font colour to be white with a black background
  myESPboy.tft.setTextColor(TFT_WHITE, TFT_BLACK);

  // We can now plot text on screen using the "print" class
  myESPboy.tft.println("Intialised default\n");
  myESPboy.tft.println("White text");
  
  myESPboy.tft.setTextColor(TFT_RED, TFT_BLACK);
  myESPboy.tft.println("Red text");
  
  myESPboy.tft.setTextColor(TFT_GREEN, TFT_BLACK);
  myESPboy.tft.println("Green text");
  
  myESPboy.tft.setTextColor(TFT_BLUE, TFT_BLACK);
  myESPboy.tft.println("Blue text");

  delay(5000);

}

void loop() {

  myESPboy.tft.invertDisplay( false ); // Where i is true or false
  myESPboy.tft.fillScreen(TFT_BLACK);
  myESPboy.tft.setCursor(0, 0);
  myESPboy.tft.setTextColor(TFT_WHITE, TFT_BLACK);
  myESPboy.tft.println("Invert OFF\n");
  myESPboy.tft.println("White text"); 

  myESPboy.tft.setTextColor(TFT_RED, TFT_BLACK);
  myESPboy.tft.println("Red text");
  
  myESPboy.tft.setTextColor(TFT_GREEN, TFT_BLACK);
  myESPboy.tft.println("Green text");
  
  myESPboy.tft.setTextColor(TFT_BLUE, TFT_BLACK);
  myESPboy.tft.println("Blue text");

  delay(5000);


  // Binary inversion of colours
  myESPboy.tft.invertDisplay( true ); // Where i is true or false
  myESPboy.tft.fillScreen(TFT_BLACK);
  myESPboy.tft.setCursor(0, 0);
  myESPboy.tft.setTextColor(TFT_WHITE, TFT_BLACK);
  myESPboy.tft.println("Invert ON\n");
  myESPboy.tft.println("White text");
  
  myESPboy.tft.setTextColor(TFT_RED, TFT_BLACK);
  myESPboy.tft.println("Red text");
  
  myESPboy.tft.setTextColor(TFT_GREEN, TFT_BLACK);
  myESPboy.tft.println("Green text");
  
  myESPboy.tft.setTextColor(TFT_BLUE, TFT_BLACK);
  myESPboy.tft.println("Blue text");

  delay(5000);
}

Vous pouvez retrouver quelques exemples de codes pour l’ESPboy ici: https://github.com/Jicehel/ESPBoy