Projet IMA3 P1, 2017/2018, TD1 : Différence entre versions

De Wiki de Projets IMA
(→‎Séance 2)
(→‎Partie informatique - Communication série)
 
(78 révisions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 
= Projet IMA3-SC 2017-2018 : Puissance 4 =
 
= Projet IMA3-SC 2017-2018 : Puissance 4 =
−
[[Fichier:Puiss4.PNG||middle|upright=0.8|vignette|Puissance 4]]
 
  
 
== Description du Projet ==
 
== Description du Projet ==
 +
[[Fichier:Puiss4.PNG||middle|upright=0,5|vignette|130px|Puissance 4]]
  
−
Notre projet est un jeu de Puissance 4 à partir d'une matrice LED RGB de taille 8x8. Chaque colonne de la matrice est associée à un bouton poussoir. Les joueurs jouent à tour de rôle en appuyant sur les boutons pour placer leur pion.
+
<br>
 +
<br>
 +
Le but du jeu du puissance 4 est d'aligner une suite de 4 pions de même couleur sur une grille comptant 8 rangées et 8 colonnes.
 +
Tour à tour les deux joueurs placent un pion dans la colonne de leur choix, le pion coulisse alors jusqu'à la position la plus basse possible dans la dite colonne, à la suite de quoi c'est à l'adversaire de jouer.
 +
Le vainqueur est le joueur qui réalise le premier un alignement (horizontal, vertical ou diagonal) consécutif d'au moins quatre pions de sa couleur.
 +
Si, alors que toutes les cases de la grille de jeu sont remplies, aucun des deux joueurs n'a réalisé un tel alignement, la partie est déclarée nulle.
 +
 
 +
 
 +
 
 +
 
 +
=== Cahier des charges ===
 +
 
 +
Nous allons réaliser le puissance 4 à partir d'une matrice LED RGB de taille 8x8. Chaque colonne de la matrice est associée à un bouton poussoir. Les joueurs jouent à tour de rôle en appuyant sur les boutons pour placer leur pion.
 
Sur une page Web, les joueurs peuvent configurer leur pseudonymes et leur couleur. La page internet permettra d'annoncer les scores et de rejouer plusieurs parties.
 
Sur une page Web, les joueurs peuvent configurer leur pseudonymes et leur couleur. La page internet permettra d'annoncer les scores et de rejouer plusieurs parties.
  
−
=== Cahier des charges ===
 
  
−
TO DO
 
  
 
=== Matériel nécessaire ===
 
=== Matériel nécessaire ===
−
 
 
Pour ce projet nous utiliserons:
 
Pour ce projet nous utiliserons:
  
Ligne 26 : Ligne 35 :
  
 
* Une page Web HTML pour pouvoir modifier les paramètres du jeu.
 
* Une page Web HTML pour pouvoir modifier les paramètres du jeu.
 +
 +
<br>
  
 
== Séance 1 ==
 
== Séance 1 ==
  
−
Cette première séance nous a permis de définir notre sujet et la liste du matériel nécessaire.  
+
Cette première séance nous a permis de constituer notre groupe, de définir notre sujet ainsi que la liste du matériel nécessaire.
  
−
==== Partie informatique ====
+
==== Partie informatique - Raspberry ====
−
[[Fichier:Raspberry2018.jpg|vignette|right|upright=0.8|Raspberry]]
 
  
−
Nous avons commencé la configuration du Raspberry afin qu'il réponde à nos besoins : connexion série avec l'Arduino, création d'un serveur Websocket...
+
Nous avons découvert la Raspberry Pi. Ce nano-ordinateur nous permettra de communiquer via une liaison série avec l'Arduino. Egalement, elle sera configurée comme un point d'accès WiFi et grâce à un serveur Websocket, elle permettra à une page Web d'utiliser le port série.
 +
 
 +
Nous avons commencé la configuration de la Raspberry afin qu'elle réponde à nos besoins : connexion série avec l'Arduino, utilisation d'un serveur Websocket.
 
Pour cela, nous avons utilisé ce tutoriel : [https://peip-ima.plil.fr/mediawiki/index.php/BE_2017-2018#Configuration_du_syst.C3.A8me_embarqu.C3.A9].
 
Pour cela, nous avons utilisé ce tutoriel : [https://peip-ima.plil.fr/mediawiki/index.php/BE_2017-2018#Configuration_du_syst.C3.A8me_embarqu.C3.A9].
  
−
Ainsi, nous avons configuré la connexion série, mis à jour la distribution, et configuré la connexion via ssh qui est fonctionnelle.
+
Pour pouvoir se connecter à la Raspberry, nous allons utiliser dans un premier de temps la connexion série. Nous avons installé "Raspbian Jessie Lite" sur la Raspberry grâce à une carte sd puis mis à jour cette distribution de Linux.
 +
Ensuite, nous avons activé la communication via ssh. La communication série est en effet limitée et elle sera pour notre projet utilisée pour la communication avec l'Arduino.
  
  
 +
==== Partie électronique ====
  
 +
Nous avons commencé la partie électronique par la détermination des composants électroniques nécessaires à notre projet. La Matrice RGB est fournie avec un contrôleur qui facilite son utilisation. Nous voulons maintenant connecter l'Arduino, le controleur de la matrice ainsi que les 8 boutons poussoirs.
 +
Pour ce faire, nous allons créer un shield (aussi appelé PCB : Printed circuit board) grâce au logiciel Fritzing. Il se placera entre la matrice LED RGB et l'arduino.
 +
[[Fichier:schemaMatrice.PNG|vignette|200px|Schéma des pins de la matrice]]
 +
Les 8 boutons poussoirs seront reliés aux pins 2 à 9 de l'Arduino. <br>
 +
Concernant la matrice RGB, on connecte :
  
 +
* les Grounds
 +
* les VCC
 +
* le CS (Chip Select) de la matrice avec le pin 10 de l'Arduino
 +
* le MOSI (Master Output, Slave Input) de la matrice avec le pin 11 de l'Arduino
 +
* le SCK (Serial Clock) de la matrice avec le pin 13 de l'Arduino
  
  
−
==== Partie électronique ====
 
−
Découverte du logiciel Fritzing et début de création d'un shield (PCB) pour connecter la matrice LED RGB et l'Arduino.
 
  
−
[[Fichier:Vue Puiss4.PNG|200px|left|Schéma du shield]]
+
Lors de la réalisation du shield, nous avons fait attention à ne pas avoir de connexions qui se croisent ni d'angles droit. Nous avons réalisé un plan de masse et nous avons essayé de réduire au maximum la taille du shield. Néanmoins nous avons besoin d'une taille conséquente afin de pouvoir souder les boutons en face de chaque colonne de la matrice LED RGB.
  
−
Le shield se placera entre la matrice LED RGB et l'arduino. Il permettra tout d'abord de relier les 8 boutons aux pins 2 à 9 de l'Arduino.
+
[[Fichier:Vue Puiss4.PNG|500px|left|upright=0.8|vignette|Schéma du shield]]
 +
[[Fichier:PCB_P4.PNG|490px|center|vignette|Routage]]
  
−
Lors de la réalisation du shield nous avons fait attention à ne pas avoir de connexions qui se croisent ainsi que des angles droit. Nous avons réalisé un plan de masse et nous avons essayé de réduire au maximum la taille du shield. Néanmoins il nécessite une taille conséquente afin de pouvoir souder les boutons en face de chaque colonne de la matrice LED RGB.
+
<br>
 +
<br>
 +
<br>
  
 +
== Séance 2 ==
  
 +
==== Partie informatique - Raspberry ====
  
 +
Nous avons finalisé la configuration de la Raspberry. Nous avons, grace à la clé WiFi "WiPi", configuré le point d'accès. La Raspberry crée alors un réseau WiFi visible par tous les appareils. Ensuite, nous avons configuré l'IP des clients WiFi et ajouté un nom à notre réseau, afin de pouvoir s'y connecter par un nom significatif plutôt que par son adresse IP.
  
 +
La commande de notre puissance 4 se fait via une interface Web. Nous avons donc installé un serveur Web sur la Raspberry Pi avec un système de page dynamique pour exécuter du code sur la Raspberry. Pour que notre page Web puisse communiquer avec l'Arduino grâce au port Série, nous avons également configuré un serveur Websocket.
  
 +
La Raspberry est désormais fonctionnelle pour notre projet.
  
 +
==== Partie électronique ====
  
 +
Nous avons finalisé le shield sur Frizting, puis gravé la carte.
 +
Suite à cela, nous avons soudé les boutons poussoirs, ainsi que des connexions permettant de connecter l'Arduino et le contrôleur de la matrice LED.
  
−
== Séance 2 ==
+
[[Fichier:Shield_Puissance4.gif|vignette|left|upright=0.8|impression de la carte]]
−
 
+
<br>
−
==== Partie informatique ====
+
<br>
−
Nous avons terminé la configuration de la Raspberry. Nous avons ainsi configuré le point d'accès, les IP des clients WiFi, le nom du réseau et le serveur Web.
+
<br>
−
La Raspberry est donc fonctionnelle pour notre projet.
+
<br>
−
 
+
<br>
−
==== Partie électronique ====
+
<br>
−
Finalisation du shield sur Fritzing, gravure de la carte et soudure.
+
<br>
  
−
[[Fichier:Shield_Puissance4.gif|vignette|left|upright=0.8]]
+
<br>
 +
<br>
 +
<br>
 +
Nous nous sommes également renséignés sur le fonctionnement de la matrice LED et son mode de communication.
 +
La matrice LED utilisera le protocole SPI (Serial Peripheral Interface) pour communiquer avec l'Arduino. Dans un SPI, les circuits communiquent selon un schéma maître-esclaves, où le maître contrôle la communication.
 +
* Le maître génère l'horloge et sélectionne l'esclave avec qui il veut communiquer par l'utilisation du signal CS
 +
* L'esclave répond aux requêtes du maître
 +
À chaque coup d'horloge le maître et l'esclave s'échangent un bit. Après huit coups d'horloges le maître a transmis un octet à l'esclave et vice versa.
  
 
== Séance 3 ==
 
== Séance 3 ==
Ligne 75 : Ligne 115 :
 
==== Partie électronique ====
 
==== Partie électronique ====
  
−
Nous avons terminé la partie électronique. Nous avons réalisé les dernières soudures entre la Matrice et le shield.  
+
Nous avons terminé les dernières soudures entre la matrice et le shield. La partie électronique est désormais finalisée, nous allons effectuer des tests informatiques pour savoir si toutes nos connexions sont bien réalisées.
  
−
==== Partie informatique ====
+
==== Partie informatique - Arduino ====
  
−
La partie électronique terminée, nous avons cherché à faire fonctionner la matrice LED. Il nous a été difficile de comprendre le fonctionnement de la matrice et de son contrôleur.  
+
La partie électronique terminée, nous avons cherché à faire fonctionner la matrice LED. Il nous a été difficile de comprendre le fonctionnement de la matrice et de son contrôleur.  Nous avons essayé dans le logiciel Arduino d'allumer une led de la matrice mais sans succès.  
  
−
Nous avons donc cherché sur internet des librairies Arduino faisant fonctionner ce type de matrice. Après plusieurs essais infructueux avec différentes librairies, nous avons réaliser à faire fonctionner notre matrice grâce à la librairie de ce tuto : [https://www.sparkfun.com/tutorials/201]. Dans cette librairie, nous avons du remplacer
+
Nous nous sommes donc résolus à chercher sur internet le fonctionnement de la matrice. Nous avons ainsi recherché des librairies Arduino faisant fonctionner ce type de matrice. Après plusieurs essais infructueux avec différentes librairies, nous avons réaliser à faire fonctionner notre matrice grâce à la librairie de ce tuto : [https://www.sparkfun.com/tutorials/201]. Dans cette librairie, nous avons du remplacer
  
 
  #include "WProgram.h"
 
  #include "WProgram.h"
Ligne 87 : Ligne 127 :
 
  #include "Arduino.h"
 
  #include "Arduino.h"
  
−
Cette librairie étant réalisée dans l'objectif de faire fonctionner plusieurs matrices connectées entre elles à la suite, nous l'avons modifié afin qu'elle soit plus adaptée à nos besoins. Ainsi, cette librairie contient les fonctions de base que nous utiliserons dans notre programme : allumer un pixel de la coueleur de notre choix, allumer/éteindre tous les pixels de la matrice, allumer une ligne/une colonne de la matrice...
+
Le programme fourni sur cette page fonctionne. Il nous faut maintenant adapter la librairie à nos besoins et réaliser le programme du puissance 4.
  
 
== Séance supplémentaire 1 ==
 
== Séance supplémentaire 1 ==
  
−
==== Partie informatique ====
+
====Partie 3D====
  
−
Nous avons commencé notre programme Arduino. Afin de faire fonctionner notre matrice LED, nous avons cherché sur internet une bibliothèque Arduino contenant des fonctions qui seraient utiles pour notre projet. Après de multiples recherches peu fructueuses, nous avons trouvé la bibliothèque "RGBMatrix" sur ce site [https://www.sparkfun.com/tutorials/201]. Cependant, cette bibliothèque était créée pour faire fonctionner plusieurs Matrices LED les unes à coté des autres. Nous l'avons donc modifié et simplifiée afin de pouvoir l'utiliser dans notre projet.
+
[[Fichier:P4 3D.PNG|vignette|left|upright=0.8|Support 3D]]
  
−
Voici une aperçu du contenu de notre bibliothèque "myRGBMatrix"
+
<br>
  
−
//Define the "Normal" 8 bit colors
+
Pour rendre notre jeu plus attrayant et faciliter son utilisation nous avons décidé de créer un support pour l'ensemble Arduino-Shield-Matrice RGB. Nous avons utilisé le site internet TinkerCad [https://www.tinkercad.com/] qui permet de créer des modèles 3D et de les exporter sous format stl. Nous avons enfin imprimé le support au Fabricarium sur l'imprimante Witbox.
−
#define BLACK 0
 
−
#define RED 0xE0
 
−
#define GREEN 0x1C
 
−
#define BLUE 0x03
 
−
#define ORANGE RED|GREEN
 
−
#define MAGENTA RED|BLUE
 
−
#define TEAL BLUE|GREEN
 
−
#define WHITE (RED|GREEN|BLUE)-0x60
 
  
−
#include <avr/pgmspace.h>
 
−
#include <ctype.h>
 
−
#include "myRGBMatrix.h"
 
−
#include "Arduino.h"
 
−
#include "myRGB.h"
 
−
//Define the SPI Pin Numbers
 
−
#define DATAOUT 11 //MOSI
 
−
#define DATAIN  12 //MISO
 
−
#define SPICLOCK  13 //sck
 
−
#define SLAVESELECT 10 //ss
 
−
 
−
#define NUM_ROWS 8
 
−
#define NUM_COLUMNS 8
 
−
#define NUM_PIXELS 64
 
  
−
//A screen struct contains a character array of size 64. Each position in the array corresponds to the color of ann LED on the matrix.
+
<br>
−
  typedef struct{
+
<br>
−
char pixel[NUM_PIXELS];
+
<br>
−
} screen;
+
<br>
−
  screen myscreen;
+
<br>
 +
<br>
 +
 
 +
==== Partie informatique - Arduino ====
 +
 
 +
La bibliothèque Arduino RGBMatrix que nous avons trouvée étant réalisée dans l'objectif de faire fonctionner plusieurs matrices connectées entre elles à la suite, nous l'avons modifié afin qu'elle soit plus adaptée à nos besoins. Ainsi, cette librairie contient les fonctions de base que nous utiliserons dans notre programme : allumer un pixel de la couleur de notre choix, allumer/éteindre tous les pixels de la matrice, allumer une ligne/une colonne de la matrice...
 +
 
 +
 
 +
== Séance supplémentaire 2 ==
 +
 
 +
==== Partie informatique - Arduino ====
 +
 
 +
Nous avons commencé des tests afin de confirmer la bonne réalisation de notre partie électronique : allumage d'une led lors de l'appui d'un bouton par exemple. Ainsi, nous avons été surs que tous les boutons fonctionnent, ainsi que la matrice.
 +
Nous avons alors commencé à élaborer un début de programme Puissance 4, permettant d'allumer une LED correspondant à la colonne selectionnée
 +
 
 +
==== Partie informatique - Page Web HTML ====
 +
 
 +
Nous avons également commencé la page web HTML : Titre, Description du jeu, Liste déroulante pour le choix des couleurs et textbox pour entrer le nom des joueurs.
 +
Pour améliorer l'esthétique de notre site, nous avons créé une feuille de style CSS. N'ayant jamais utilisé de CSS, nous avons appris les bases grâce à ce tuto : [https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mettre-en-place-le-css].
 +
 
 +
 
 +
== Séance supplémentaire 3 ==
 +
 
 +
==== Partie informatique - Arduino ====
 +
 
 +
Nous avons continué la mise en place du programme du puissance 4. Le programme est désormais fonctionnel : quand on appuie sur un bouton, le pixel le plus bas de la colonne correspondante s'allume. Si un alignement est réalisé par un joueur, l'alignement s'allume en blanc puis tous les pixels de la matrice s'allument de la couleur du joueur gagnant.
 +
Voici le principe général du programme :
 +
 
 +
  Tant qu'aucun joueur n'a gagné,
 +
    si un bouton est appuyé,
 +
        allumage de la led de la colonne correspondante,
 +
        verification si gagné,
 +
 
 +
Chaque fois qu'un joueur joue, un compteur nombre de coups est incrémenté. Ce compteur permet de savoir qui doit jouer (si compteur est pair alors joueur 1, si impair joueur 2) et de savoir qui a gagné quand quelqu'un gagne. <br>
 +
Une fonction checkReset est également mise en place pour verifier si on veut recommencer une partie (pour l'instant, par appui simultané des boutons aux extrémités, par la suite lors de l'appui du bouton sur la page web).
 +
 
  
−
cRGBMatrix RGBMatrix; //Create an instance of the class for use in the library
+
On peut désormais jouer à notre puissance 4. La suite du travail consiste à communiquer par liaison série des informations avec le serveur Websocket.
  
−
//Configures SPI and I/O for communication with an RGB Matrix.
+
== Séance supplémentaire 4 ==
−
void cRGBMatrix::begin(void)
 
−
{  //SPI Bus setup
 
−
    SPCR = (1<<SPE)|(1<<MSTR)|(1<<SPR1)|(1<<SPR0); //Enable SPI HW, Master Mode, divide clock by 16    //SPI Bus setup
 
−
//SPCR = (1<<SPE)|(1<<MSTR)|(1<<SPR1); //Enable SPI HW, Master Mode, divide clock by 16    //SPI Bus setup
 
−
    //Set the pin modes for the RGB matrix
 
−
    pinMode(DATAOUT, OUTPUT);
 
−
    pinMode(DATAIN, INPUT);
 
−
    pinMode(SPICLOCK,OUTPUT);
 
−
    pinMode(SLAVESELECT,OUTPUT);
 
−
    //Make sure the RGB matrix is deactivated
 
−
    digitalWrite(SLAVESELECT,HIGH);
 
−
    //Send the command mode character
 
−
    digitalWrite(SLAVESELECT, LOW);
 
−
    spiTransfer('%');
 
−
    digitalWrite(SLAVESELECT, HIGH);
 
−
    delay(100);}
 
  
 +
==== Partie informatique - Communication série ====
  
−
//Sends/receives a single byte to the SPI port. Inputs: char value - The value to be sent to the SPI port. Returns: Value received from the SPI port
+
Pour rappel, les fonctions que nous désirons grâce au serveur Websocket et à la liaison série sont :
−
char cRGBMatrix::spiTransfer(char value)
 
−
{  SPDR = value;                    // Start the transmission
 
−
    while (!(SPSR & (1<<SPIF)))    // Wait for the end of the transmission
 
−
    {};
 
−
    return SPDR;                    // return the received byte
 
−
}
 
  
−
/*Sets the color of a pixel on a given matrix. Note: display won't be updated until display() function is called.
+
* choix des couleurs et surnoms des joueurs.
−
Inputs: int screen - The specific matrix to have a pixel set
+
* affichage du surnom du joueur qui doit jouer.
−
int row - The row of the pixel to be set
+
* affichage des scores (nombre de parties gagnées).
−
int column - The column of the pixel to be set
+
* bouton recommencer permettant de réinitialiser la matrice si la partie est nulle.
−
char color - The color to be used for the pixel fill.
 
−
Returns: 1 - Success
 
−
0 - Failure (invalid screen, row or column)*/
 
−
char cRGBMatrix::fillPixel(int row, int column, char color)
 
−
{ if((column < 0) || column > NUM_COLUMNS)return 0;
 
−
if((row < 0) || row > NUM_ROWS)return 0;
 
−
if(color == 0x25 || color == 0x26)return 0;
 
−
myscreen.pixel[row*8+column]=color;
 
−
return 1;}
 
  
 +
Nous avons utilisé du Javascript dans notre HTML afin de pouvoir utiliser la liaison série.
  
−
/* Fills a screen in the screenBuffer. Note: display won't be updated until the display() function is called.
+
Avant de commencer la partie de puissance 4, l'Arduino attend de recevoir 2 messages série : la couleurs de chaque joueur.
−
Inputs: int screen - The screen to be filled
+
Ensuite, à chaque coup joué, l'Arduino envoie le numéro du joueur qui doit jouer pour continuer la partie. Ainsi, nous pouvons l'afficher à l'écran.
−
char color - The color to be used for the fill.
+
Quand la partie est gagnée, l'Arduino envoie le numéro du joueur gagnant afin de l'afficher sur l'écran et d'incrémenter son score.
−
Returns: 1 - Success
+
Quand le bouton recommencer du site est appuyé, l'Arduino recoit un message lui indiquant de réinitialiser la matrice.
−
0 - Failure (invalid board) */
 
−
char cRGBMatrix::fillScreen(char color)
 
−
{ if(color == 0x25 || color == 0x26)return 0;
 
−
  for(int row=0; row<NUM_ROWS; row++)
 
−
        for(int column=0; column<NUM_COLUMNS; column++)
 
−
            myscreen.pixel[row*NUM_ROWS+column]=color;
 
−
    return 1;
 
−
}
 
  
  
−
//Sends the data in screenBuffer to the matrices.
+
[[Fichier:site.PNG| 800px]]
−
void cRGBMatrix::display(void)
 
−
{
 
−
digitalWrite(SLAVESELECT, LOW); //Select the LED matrices
 
−
spiTransfer(0x26); //SEnd the Start of frame character
 
−
sendScreen(myscreen.pixel); //Send frame data over SPI.
 
−
digitalWrite(SLAVESELECT, HIGH); //Unselect the LED matrices
 
−
}
 
  
−
/* Sends the frame of data determined by the screen parameter
+
== Bilan ==
−
    Inputs: char * screen - The 64 byte buffer to send over SPI*/
 
−
void cRGBMatrix::sendScreen(char * screen)
 
−
{
 
−
    for(int row=0; row<NUM_ROWS; row++)
 
−
        for(int column=0; column<NUM_COLUMNS; column++)
 
−
            spiTransfer(screen[(row*8)+column])
 
−
}
 
  
 +
== Démonstration ==
  
−
//Clears the entire frame by filling all the screens with Black
+
Une démonstration a été faite à Mr Redon le 28 Mai 2018.
−
void cRGBMatrix::clear(void)
+
Une vidéo de démonstration est disponible ici : [https://drive.google.com/file/d/1JYpAT3Cw7ea0ahP_nU8rs3EFk2CdhUuM/view Démo]
−
{ fillScreen(BLACK);
 
−
display();}
 
  
−
=== Bilan ===
+
== Documents Rendus ==
 +
Fichier Fritzing : [[Fichier:Fritzing_PCB.zip]]
 +
<br>
 +
Librairie Arduino : [[Fichier:myRGBMatrix.zip]]
 +
<br>
 +
Programme Arduino : [[Fichier:Puissance4_Arduino.zip]]
 +
<br>
 +
Page Web (fichier html et CSS) : [[Fichier:PageWeb.zip]]

Version actuelle datée du 2 juin 2018 à 15:32

Projet IMA3-SC 2017-2018 : Puissance 4

Description du Projet

Puissance 4



Le but du jeu du puissance 4 est d'aligner une suite de 4 pions de même couleur sur une grille comptant 8 rangées et 8 colonnes. Tour à tour les deux joueurs placent un pion dans la colonne de leur choix, le pion coulisse alors jusqu'à la position la plus basse possible dans la dite colonne, à la suite de quoi c'est à l'adversaire de jouer. Le vainqueur est le joueur qui réalise le premier un alignement (horizontal, vertical ou diagonal) consécutif d'au moins quatre pions de sa couleur. Si, alors que toutes les cases de la grille de jeu sont remplies, aucun des deux joueurs n'a réalisé un tel alignement, la partie est déclarée nulle.



Cahier des charges

Nous allons réaliser le puissance 4 à partir d'une matrice LED RGB de taille 8x8. Chaque colonne de la matrice est associée à un bouton poussoir. Les joueurs jouent à tour de rôle en appuyant sur les boutons pour placer leur pion. Sur une page Web, les joueurs peuvent configurer leur pseudonymes et leur couleur. La page internet permettra d'annoncer les scores et de rejouer plusieurs parties.


Matériel nécessaire

Pour ce projet nous utiliserons:

  • Raspberry-Pi et son module WIFI "WI-PI"
  • Arduino UNO
  • Matrice LED RGB et son contrôleur
  • 8 boutons poussoirs
  • Un shield (PCB crée à partir du logiciel Fritzing)
  • Une page Web HTML pour pouvoir modifier les paramètres du jeu.


Séance 1

Cette première séance nous a permis de constituer notre groupe, de définir notre sujet ainsi que la liste du matériel nécessaire.

Partie informatique - Raspberry

Nous avons découvert la Raspberry Pi. Ce nano-ordinateur nous permettra de communiquer via une liaison série avec l'Arduino. Egalement, elle sera configurée comme un point d'accès WiFi et grâce à un serveur Websocket, elle permettra à une page Web d'utiliser le port série.

Nous avons commencé la configuration de la Raspberry afin qu'elle réponde à nos besoins : connexion série avec l'Arduino, utilisation d'un serveur Websocket. Pour cela, nous avons utilisé ce tutoriel : [1].

Pour pouvoir se connecter à la Raspberry, nous allons utiliser dans un premier de temps la connexion série. Nous avons installé "Raspbian Jessie Lite" sur la Raspberry grâce à une carte sd puis mis à jour cette distribution de Linux. Ensuite, nous avons activé la communication via ssh. La communication série est en effet limitée et elle sera pour notre projet utilisée pour la communication avec l'Arduino.


Partie électronique

Nous avons commencé la partie électronique par la détermination des composants électroniques nécessaires à notre projet. La Matrice RGB est fournie avec un contrôleur qui facilite son utilisation. Nous voulons maintenant connecter l'Arduino, le controleur de la matrice ainsi que les 8 boutons poussoirs. Pour ce faire, nous allons créer un shield (aussi appelé PCB : Printed circuit board) grâce au logiciel Fritzing. Il se placera entre la matrice LED RGB et l'arduino.

Schéma des pins de la matrice

Les 8 boutons poussoirs seront reliés aux pins 2 à 9 de l'Arduino.
Concernant la matrice RGB, on connecte :

  • les Grounds
  • les VCC
  • le CS (Chip Select) de la matrice avec le pin 10 de l'Arduino
  • le MOSI (Master Output, Slave Input) de la matrice avec le pin 11 de l'Arduino
  • le SCK (Serial Clock) de la matrice avec le pin 13 de l'Arduino


Lors de la réalisation du shield, nous avons fait attention à ne pas avoir de connexions qui se croisent ni d'angles droit. Nous avons réalisé un plan de masse et nous avons essayé de réduire au maximum la taille du shield. Néanmoins nous avons besoin d'une taille conséquente afin de pouvoir souder les boutons en face de chaque colonne de la matrice LED RGB.

Schéma du shield
Routage




Séance 2

Partie informatique - Raspberry

Nous avons finalisé la configuration de la Raspberry. Nous avons, grace à la clé WiFi "WiPi", configuré le point d'accès. La Raspberry crée alors un réseau WiFi visible par tous les appareils. Ensuite, nous avons configuré l'IP des clients WiFi et ajouté un nom à notre réseau, afin de pouvoir s'y connecter par un nom significatif plutôt que par son adresse IP.

La commande de notre puissance 4 se fait via une interface Web. Nous avons donc installé un serveur Web sur la Raspberry Pi avec un système de page dynamique pour exécuter du code sur la Raspberry. Pour que notre page Web puisse communiquer avec l'Arduino grâce au port Série, nous avons également configuré un serveur Websocket.

La Raspberry est désormais fonctionnelle pour notre projet.

Partie électronique

Nous avons finalisé le shield sur Frizting, puis gravé la carte. Suite à cela, nous avons soudé les boutons poussoirs, ainsi que des connexions permettant de connecter l'Arduino et le contrôleur de la matrice LED.

impression de la carte











Nous nous sommes également renséignés sur le fonctionnement de la matrice LED et son mode de communication. La matrice LED utilisera le protocole SPI (Serial Peripheral Interface) pour communiquer avec l'Arduino. Dans un SPI, les circuits communiquent selon un schéma maître-esclaves, où le maître contrôle la communication.

  • Le maître génère l'horloge et sélectionne l'esclave avec qui il veut communiquer par l'utilisation du signal CS
  • L'esclave répond aux requêtes du maître

À chaque coup d'horloge le maître et l'esclave s'échangent un bit. Après huit coups d'horloges le maître a transmis un octet à l'esclave et vice versa.

Séance 3

Partie électronique

Nous avons terminé les dernières soudures entre la matrice et le shield. La partie électronique est désormais finalisée, nous allons effectuer des tests informatiques pour savoir si toutes nos connexions sont bien réalisées.

Partie informatique - Arduino

La partie électronique terminée, nous avons cherché à faire fonctionner la matrice LED. Il nous a été difficile de comprendre le fonctionnement de la matrice et de son contrôleur. Nous avons essayé dans le logiciel Arduino d'allumer une led de la matrice mais sans succès.

Nous nous sommes donc résolus à chercher sur internet le fonctionnement de la matrice. Nous avons ainsi recherché des librairies Arduino faisant fonctionner ce type de matrice. Après plusieurs essais infructueux avec différentes librairies, nous avons réaliser à faire fonctionner notre matrice grâce à la librairie de ce tuto : [2]. Dans cette librairie, nous avons du remplacer 

#include "WProgram.h"

par 

#include "Arduino.h"

Le programme fourni sur cette page fonctionne. Il nous faut maintenant adapter la librairie à nos besoins et réaliser le programme du puissance 4.

Séance supplémentaire 1

Partie 3D

Support 3D


Pour rendre notre jeu plus attrayant et faciliter son utilisation nous avons décidé de créer un support pour l'ensemble Arduino-Shield-Matrice RGB. Nous avons utilisé le site internet TinkerCad [3] qui permet de créer des modèles 3D et de les exporter sous format stl. Nous avons enfin imprimé le support au Fabricarium sur l'imprimante Witbox.








Partie informatique - Arduino

La bibliothèque Arduino RGBMatrix que nous avons trouvée étant réalisée dans l'objectif de faire fonctionner plusieurs matrices connectées entre elles à la suite, nous l'avons modifié afin qu'elle soit plus adaptée à nos besoins. Ainsi, cette librairie contient les fonctions de base que nous utiliserons dans notre programme : allumer un pixel de la couleur de notre choix, allumer/éteindre tous les pixels de la matrice, allumer une ligne/une colonne de la matrice...


Séance supplémentaire 2

Partie informatique - Arduino

Nous avons commencé des tests afin de confirmer la bonne réalisation de notre partie électronique : allumage d'une led lors de l'appui d'un bouton par exemple. Ainsi, nous avons été surs que tous les boutons fonctionnent, ainsi que la matrice. Nous avons alors commencé à élaborer un début de programme Puissance 4, permettant d'allumer une LED correspondant à la colonne selectionnée

Partie informatique - Page Web HTML

Nous avons également commencé la page web HTML : Titre, Description du jeu, Liste déroulante pour le choix des couleurs et textbox pour entrer le nom des joueurs. Pour améliorer l'esthétique de notre site, nous avons créé une feuille de style CSS. N'ayant jamais utilisé de CSS, nous avons appris les bases grâce à ce tuto : [4].


Séance supplémentaire 3

Partie informatique - Arduino

Nous avons continué la mise en place du programme du puissance 4. Le programme est désormais fonctionnel : quand on appuie sur un bouton, le pixel le plus bas de la colonne correspondante s'allume. Si un alignement est réalisé par un joueur, l'alignement s'allume en blanc puis tous les pixels de la matrice s'allument de la couleur du joueur gagnant. Voici le principe général du programme : 

Tant qu'aucun joueur n'a gagné,
    si un bouton est appuyé,
        allumage de la led de la colonne correspondante,
        verification si gagné,

Chaque fois qu'un joueur joue, un compteur nombre de coups est incrémenté. Ce compteur permet de savoir qui doit jouer (si compteur est pair alors joueur 1, si impair joueur 2) et de savoir qui a gagné quand quelqu'un gagne.
Une fonction checkReset est également mise en place pour verifier si on veut recommencer une partie (pour l'instant, par appui simultané des boutons aux extrémités, par la suite lors de l'appui du bouton sur la page web).


On peut désormais jouer à notre puissance 4. La suite du travail consiste à communiquer par liaison série des informations avec le serveur Websocket.

Séance supplémentaire 4

Partie informatique - Communication série

Pour rappel, les fonctions que nous désirons grâce au serveur Websocket et à la liaison série sont :

  • choix des couleurs et surnoms des joueurs.
  • affichage du surnom du joueur qui doit jouer.
  • affichage des scores (nombre de parties gagnées).
  • bouton recommencer permettant de réinitialiser la matrice si la partie est nulle.

Nous avons utilisé du Javascript dans notre HTML afin de pouvoir utiliser la liaison série.

Avant de commencer la partie de puissance 4, l'Arduino attend de recevoir 2 messages série : la couleurs de chaque joueur. Ensuite, à chaque coup joué, l'Arduino envoie le numéro du joueur qui doit jouer pour continuer la partie. Ainsi, nous pouvons l'afficher à l'écran. Quand la partie est gagnée, l'Arduino envoie le numéro du joueur gagnant afin de l'afficher sur l'écran et d'incrémenter son score. Quand le bouton recommencer du site est appuyé, l'Arduino recoit un message lui indiquant de réinitialiser la matrice.


Site.PNG

Bilan

Démonstration

Une démonstration a été faite à Mr Redon le 28 Mai 2018. Une vidéo de démonstration est disponible ici : Démo

Documents Rendus

Fichier Fritzing : Fichier:Fritzing PCB.zip
Librairie Arduino : Fichier:MyRGBMatrix.zip
Programme Arduino : Fichier:Puissance4 Arduino.zip
Page Web (fichier html et CSS) : Fichier:PageWeb.zip

Récupérée de « https://projets-ima.plil.fr/mediawiki/index.php?title=Projet_IMA3_P1,_2017/2018,_TD1&oldid=58372 »