Tuto pas à pas Python : le joystick

Dans ce tuto nous verrons comment utiliser simplement le joystick fourni dans le pack d’accessoires avec CircuitPython.

Avant tout : Installation des outils

Ce tuto est réalisé sur l’IDE Mu pour Circuit Python.
Si vous n’avez pas encore installé l’un et l’autre veuillez vous référer au guide d’installation Mu et CircuitPython disponible sur le site.

Les branchements :

Joystick Backpack Couleur Description
GND GND BRUN Masse
5V VBAT ROUGE Alimentation
VRX A1 VERT Axe X
VRY A2 BLEU Axe Y
SW 7 JAUNE Interrupteur

Etape 1 : La base du programme

Commencez par ouvrir Mu et créer un nouveau fichier.

Copiez-y le code suivant :

from gamebuino_meta import begin, waitForUpdate, display, buttons, color
import board
from analogio import AnalogIn

while True:
    waitForUpdate()
    display.clear()

Cela va importer les libraires Gamebuino nécessaires au fonctionnement de notre programme, ainsi qu’une libraire “board” et une libraire “AnalogIn” dont on aura besoin pour travailler avec notre capteur.

La partie commencant par “while True:” constitue la boucle principale de notre programme, sans elle il ne se passerait rien.

Etape 2 : Configurer le joystick

Pour pouvoir utiliser le joystick on va avoir besoin de lire les valeurs envoyée par les deux pins correspondant aux axes X et Y. S’agissant de deux pins analogiques on va ajouter la lib “analogio” à notre programme ainsi que la lib “board” :

from gamebuino_meta import begin, waitForUpdate, display, buttons, color
import board
import analogio

Ces deux librairies vont nous permettre d’aller lire les données envoyées par nos axes X et Y facilement.

Pour cela on définit les pins d’attache de nos deux axes de la manière suivante :

x_pin = analogio.AnalogIn(board.A1)
y_pin = analogio.AnalogIn(board.A2)

On assigne de la sorte le pin A1 à notre axe X et le pin A2 à notre axe Y.

Etape 3 : Lecture et afffichage

On peut maintenant passer à la lecture proprement dite.

Pour cela on crée une petite fonction “read_input()” telle que :

def read_input(pin):
    return pin.value

Il nous suffira ensuite d’appeler cette fonction en lui précisant quel pin on souhaite “lire” pour obtenir une valeur entre 0 et 65536 (16bits)

On va d’ailleurs afficher ces valeurs pour vérifier que tout fonctionne bien.
Pour cela rien de compliqué, on ajoute juste quelques appels à la fonction print dans notre boucle principale :

while True:
    waitForUpdate()
    display.clear()
    
    display.print("X = ")
    display.print(read_input(x_pin))
    display.print("\n")
    display.print("Y = ")
    display.print(read_input(y_pin))

Un peu verbeux mais faute de pouvoir utiliser printf (qui permet plus de mise en forme) on doit bricoler un petit peu.

Ensuite on va créer une fonction spécifique qui nous permettra de transformer ces valeurs en une représentation visuelle de notre joystick.
Cette fonction s’appelle draw_interface et est déclarée ainsi :

def draw_interface():

Pour le moment rien ne se passe mais on peut déjà ajouter l’appel à cette fonction dans notre boucle principale :

while True:
    waitForUpdate()
    display.clear()
    
    display.print("X = ")
    display.print(read_input(x_pin))
    display.print("\n")
    display.print("Y = ")
    display.print(read_input(y_pin))

    draw_interface()

On va représenter le mouvement de notre joystick comme celui d’un point se déplaçant dans un cercle. On va donc afficher ces deux éléments tels que :

def draw_interface():
    display.drawCircle(display.width()//2, display.height()//2, 20)
    
    dot_x = (read_input(x_pin) - 32768) * 20 // 65536
    dot_y = (read_input(y_pin) - 32768) * 20 // 65536
    
    display.setColor(color.RED)
    display.fillCircle(dot_x + display.width()//2, dot_y + display.height()//2, 5)

On commence ici par afficher un cercle avec la fonction drawCircle, cercle qu’on positionne au contre de l’écran avec un rayon de 20 unités.

Ensuite on calcule les coordonnées du point à afficher en rapportant les valeurs lues depuis nos deux axes X et Y sur ce rayon de 20 unités.

Enfin on change la couleur d’affichage en rouge avant d’utiliser fillCircle pour afficher un cercle rouge de 5 unités de rayon qui se déplace en fonction du mouvement de nos deux axes.

Et voilà, vous avez survécu à un tuto de plus. A vous de jouer à présent.

2 Likes