HP17 : Bresturbangame : Différence entre versions

De Les Fabriques du Ponant
Aller à : navigation, rechercher
 
(78 révisions intermédiaires par 5 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
  
==Jeu de piste connecté==
+
[[Fichier:Hackathonpeda2017.jpeg|80px]]
  
Participants : enfants entre 10 et 14 ans
+
=Brest Urban Game. Jeu de piste connecté=
  
Avec leur téléphone les enfants se déplacent dans une zone délimitée. ils recherchent une balise WiFi (wimos) qu'ils ont fabriqués
+
==Lundi, de l'idée au projet==
  
[[Fichier:Hackathonpeda2017.jpeg|80px]]
+
===Fin de l'idéation : lundi midi===
 +
Idée de départ : jeu de piste avec la fabrication de bornes et des boîtiers à utiliser par les équipes qui jouent.
  
==Résultats de lundi matin==
+
Après "brainstormer" ... Quelques idées retenues
Quelques idées retenues. Point du lundi midi
 
  
 
[[Fichier:ChasseTresorLundiMidi.jpg|400px]]
 
[[Fichier:ChasseTresorLundiMidi.jpg|400px]]
  
Les élèves sont guidés par des énigmes à résoudre dans chaque borne
+
===Re-appropriation des idées du matin===
 +
 
 +
====Idée : concevoir un jeu de piste basé sur des énigmes====
 +
 
 +
Deux aspects :
 +
 
 +
Utilisation du jeu
 +
------------------
 +
Participants : des 10-14 ans en groupes
 +
 
 +
Avec leur smartphone, les participants se déplacent dans une zone géographique préalablement délimitée. Ils recherchent des balises. Sur chaque balise un QR code leur permet de débloquer une question sur le lieu sur lequel ils sont. La bonne réponse à la question leur permet de débloquer un indice pour trouver la balise suivante. Si la réponse n'est pas correcte, le système se bloque pendant un certain temps. Puis ils peuvent proposer une autre réponse.
 +
 
 +
Les participants se déplacent en groupe pendant le jeu.
 +
 
 +
Fabrication du jeu
 +
------------------
 +
 
 +
*Matériel / balise : alimentation, câbles, boîte de métallique, wemos D1 mini, boîte à imprimer / découper et monter, photos et énigme, zone géographique concernée
 +
 
 +
*Matériel complémentaire : smartphone, lecteur QR code, navigateur Web, ordinateur, arduino IDE (avec librairie wemos)
 +
 
 +
*Tâches (à faire en activité encadrée) : conception du jeu (thème, zone du lieu, départ et arrivée, étapes balisées(énigmes, cachettes)), conception et création de boîtiers, paramétrer les wemos, génération de QR codes (imprimer et plastifier ensuite),
 +
 
 +
Le principe de fonctionnement
 +
 
 +
[[Fichier:BrestUrbanGamePpeFonctionnement.jpg|400px]]
 +
 
 +
====Diaporama du "topo-pechu" du lundi soir====
 +
 
 +
[[Fichier:Hackathonpeda2017_BrestUrbanGame.odp|C'est là]]
 +
 
 +
 
 +
==Mardi, réalisation du projet==
 +
TOPO PECHU
 +
[[Fichier:Hackathonpeda2017 BrestUrbanGameV2.odp]]
 +
 
 +
===Conception pédagogique===
 +
Durée de l'activité : 4 demi-journées
 +
Nombre d'enfants : 2 groupes de 12 enfants pour l'ensemble du projet
 +
 
 +
====Activité matinée 1 (par groupe de 12 enfants)====
 +
------------------
 +
 
 +
#. Présentation générale du projet (animateur) : (~30')
 +
## Idée : conception et réalisation d'un jeu de piste connecté
 +
## Utilisation de smartphone et wifi pour les balises dans le jeu
 +
## Découverte technique du numérique (wifi + Web)
 +
## Imaginer des énigmes en lien avec les points d'intérêt du jeu
 +
## Esprit d'équipe
 +
#. Présentation de la zone de jeu (animateur)
 +
#. Points d'intérêt
 +
## Discussion et définition qu'est ce que c'est qu'un point d'intérêt (animateur et enfants)
 +
## Recherche de points d'intérêt et présentation par les enfants : organisation éventuel des enfants en groupes
 +
## Lister tous les points d'intérêt identifiés (~12) par l'animateur
 +
## Constituer 4 groupes de 3 enfants puis tirer au sort un point d'intérêt par chaque groupe.
 +
## Définir l'ordre des balises liées aux points d'intérêt et donner selon l'ordre un numéro de balise par groupe
 +
 
 +
 
 +
==> Liste de points d'intérêt retenus
 +
    Groupes d'enfants, un par balise
 +
 
 +
====Activité matinée 2====
 +
----------------------
 +
 
 +
Présentation de la matinée deux parties:
 +
Une partie montage "matériel"- une partie "énigme" en vue de la programmation de la borne
 +
 
 +
1ère partie :
 +
#. la technique: objectif montage de la borne wifi
 +
## Présentation du matériel et de leur rôle
 +
## Présentation de la fiche montage
 +
#. La gestion de la wifi- confinement comment et pourquoi?
 +
 
 +
Par groupe et par balise
 +
#. Fabrication de la balise
 +
 
 +
2ème partie :
 +
 
 +
#. Réfléchir à l'énigme et aux possibilités de réponses
 +
## Rédiger l'énigme
 +
## Définir les réponses - soit texte ou recherche d'image
  
Bornes : une carte wimos (arduino+wifi)
+
==> Balise prête à être programmée et égnime prête pour chaque groupe
 +
   
 +
====Activité matinée 3====
 +
----------------------
 +
Avec l'ensemble des 12 enfants
 +
#.Présentation de l'objectif de programmation de la balise
 +
#.Présentation de la fiche d'aide à la programmation avec les étapes
  
 +
En groupe-balise
 +
#.Programmer la balise
 +
#.Aller se renseigner sur le point d'intérêt suivant afin de définir un indice pour s'y rendre
 +
#.Programmer l'indice
 +
#.Tester avec leur smarphone
 +
#.imprimer un QR-Code et échange sur sa fonction et sa présence dans notre vie quotidienne
  
===A qui s'adresse cette fiche type ?===
+
=> Balise prête- le groupe est prêt à faire tester son jeu de piste aux camarades de l'autre groupe
Cette fiche est rédigée par les participants au [[Hackathon pédagogique 2017]] de Brest.
 
  
L'idée c'est qu'elle serve à la suite du hackathon à des pédagogues qui souhaiteraient mettre en place des activité pédagogique numériques.
+
====Activité matinée 4====
Cela peut-être un enseignant mais aussi un animateur de TAP (Temps d'animation périscolaire) ou de centre de loisir (animateur BAFA par exemple), un médiateur numérique.
+
----------------------
 +
Chaque groupe va équiper sa zone de jeu pour que l'autre groupe puisse jouer.
  
===Quel est l'usage d'une telle fiche ?===
+
Et maintenant chaque groupe va pourvoir jouer....
  
Elle doit lui être utile à :
+
=> Satisfaction de l'aboutissement du travail du groupe dans une réalisation commune
* préparer son animation,
+
et de la résolution des énigmes
* se remémorer les notions techniques en jeu,
 
* bien adapter son intervention aux participants (nous préfèrerons le terme de "participant" plutôt que "public" car il ne préjuge pas de sa passivité mais bien au contraire, reconnait son statut d'apprenant actif au "public"-"participant".).
 
* préparer son dispositif pédagogique,
 
* disposer de pistes pour l'évaluation de l'acquisition des notions, et la qualité de l'acte pédagogique
 
* identifier quelques sources pour vérifier les contenus.
 
  
===Qu'est-ce qu'une animation ?===
+
===FICHE MONTAGE DE LA BALISE ===
Une animation c'est un l'intervention d'un animateur ayant un objectif pédagogique, pour une ou plusieurs séances, dans un cadre particulier.
+
====Matériel nécessaire====
 +
Pour la fabrication d'une balise, nous aurons besoin de :
  
Le cadre de l'animation est défini par :
+
* [[Fichier:Wemos.JPG|100px]] une carte Wemos
* Le type de participants (âge, niveaux, modalité de participation, captif ou libre)...
+
* [[Fichier:Breadboard.JPG|100px]] une plaque de prototypage
* L'espace dans lequel a lieu l'animation : école, rue, centre de loisirs, musée, exposition, labo,...
+
* [[Fichier:PilesAA.JPG|100px]] 4 piles AA (1,5V)
* les partenaires : enseignants, animateurs, ...
+
* des câbles :
* évènement particulier
+
** [[Fichier:Cables1.JPG|100px]]
* résultats attendus : transmission de connaissances, développement de capacités psychomotrices, de compétences, s'amuser, se délecter, se cultiver, modifier son rapport aux sciences et technologies, participer à un projet de recherche,..
+
** [[Fichier:Cable2.JPG|100px]]
 +
* [[Fichier:Boitier.JPG|100px]] un boîtier imprimé avec l'imprimante 3D
 +
* une boite de "ricoré"
  
===Quelles rubriques contient-elle ?===
+
Des outils :
Elle contient deux grandes rubriques :
+
* [[Fichier:Pincecoupante.JPG|100px]] une pince coupante
* La réalisation technique.
+
* [[Fichier:PinceAdenuder.JPG|100px]] une pince à dénuder
* le projet pédagogique
 
  
==La réalisation Technique==
 
==='''Nom de la réalisation technique'''===
 
Une vidéo si besoin :
 
  
==='''Présentation de la réalisation'''===
+
Pour souder, il nous faudra :
Tutoriel pour construire le "trucotron".
+
* [[Fichier:FerASouder.JPG|100px]] Un fer à souder
Il fera ceci et cela...
+
* [[Fichier:TroisiemeMain.JPG|100px]]Une troisième main
 +
* [[Fichier:Etain.JPG|100px]] De l'étain
  
=== '''Matériel''' ===
+
====Les étapes====
* [[Image:Wemos.jpg|50px]] Carte wemos D1 mini [http://fr.aliexpress.com/wholesale?catId=0&initiative_id=SB_20160413075537&SearchText=wemos+mini  | lien vers aliexpress si vous voulez acquérir un wemos]
+
Souder les connectiques aux wemos
* [[Image:servo360.jpg|50px]] 2 Servos moteurs 360° (rotation continue) [http://fr.aliexpress.com/wholesale?catId=0&initiative_id=SB_20160812062931&SearchText=360+servo  | Lien]
 
  
==='''La réalisation'''===
+
Le positionnement
On explique comment fabriquer !
+
* [[Fichier:Le positionnement.JPG|200px]]
Avec des illustrations !
+
* [[Fichier:Positionnementfinal.JPG|200px]]
  
[[image:Petitbot1.JPG|400px]]
+
Soudure
[[image:Petitbot4.JPG|400px]]
+
* [[Fichier:Soudure1.JPG|200px]]
 +
* [[Fichier:Soudure2.JPG|200px]]
  
==='''Fonctionnement'''===
 
* étape 1
 
* étape 2
 
Une illustration si besoin :
 
[[image:Petitbot-interfaceweb.PNG|400px]]
 
  
==='''Schéma de câblage, si besoin'''===
+
Résultat Final
[[Fichier:Petitbot.png|400px]]
+
* [[Fichier:Résultatfinal.JPG|200px]]
  
==='''Le code, si besoin'''===
+
Câbler le boîtier
  
 +
Vérification du cablage avec un voltmètre
 +
* [[Fichier:Vérification.JPG|200px]]
 +
 +
Mise en place de l'interrupteur et soudure des cables connexion wemos
 +
* [[Fichier:Miseenplace interrupteur.JPG|200px]]
 +
 +
Résultat de l'alimentation
 +
* [[Fichier:Résultat alimentation terminée.JPG|200px]]
 +
 +
Installation de l'alimentation dans la boite type "Ricoré"
 +
* [[Fichier:Installationdanslaboite.JPG|200px]]
 +
* [[Fichier:Résultat.JPG|200px]]
 +
 +
Installation du wemos dans le boite
 +
 +
===FICHE D'AIDE A LA PREPARATION DE LA BALISE===
 +
====Logiciels nécessaires====
 +
 +
Pour la programmation d'une balise, nous aurons besoin d’un PC avec les logiciels suivants :
 +
 +
* Arduino IDE (cette activité  a été testée avec la version 1.8.2) : à télécharger à l’adresse https://www.arduino.cc/en/Main/Software
 +
* Configurer l’Arduino IDE pour qu’il reconnaisse le module Wemos D1 Mini : suivre les instructions du site http://www.wikidebrouillard.org/index.php?title=Wemos_D1_mini
 +
* Installer le plugin ESP8266 file uploader pour Arduinon IDE : récupere le plugin à l’adresse https://github.com/esp8266/arduino-esp8266fs-plugin/releases puis dézipper le fichier dans le répertoire $HOME_ARDUINO/tools
 +
 +
====Les étapes====
 +
* La toute première fois que le Wemos est utilisé, il faut le formater pour pouvoir utiliser la mémoire flash. Pour cela, compiler et « flasher » sur le Wemos le code du setup qui se trouve à l’adresse http://www.esp8266.com/viewtopic.php?f=29&t=8194
 +
* Récupérer le code du projet Brest Urban Game à l’adresse suivante. Dézipper le fichier. Il contient un répertoire et un fichier .ino. Ouvrir le fichier .ino avec Arduino IDE et flasher son contenu dans le Wemos.
 +
*Dans le répertoire vous trouverez cinq fichiers :
 +
** Le fichier reponseX.jpg contient l’image qui correspondra à la réponse numéro X de l’énigme
 +
** Le fichier bonneReponse.txt doit contenir la bonne réponse à l’énigme. Elle doit correspondre à une chaîne de caractères rep1, rep2, rep3 ou rep4 en fonction de la bonne réponse à l’énigme.
 +
 +
===CODE DE LA BALISE WEMOS===
 
<pre>
 
<pre>
///////////////
+
//
// Titre du programme //
+
// Brest Urban Game
///////////////
+
//
// Un programme pédagogique créé à l'occasion du hackathon pédagogique de Brest, les 19 et 20 juin 2017
+
// 20/06/2017
// Sous licence CC-By-Sa
+
// TO BE CONTINUED
// Par des gens bien
+
// Notes
 +
// Le code est prévu pour être unique pour toutes les balises wemos
 +
// prérequis : il faut initialiser la mémoire flash du wemos cf.https://github.com/esp8266/arduino-esp8266fs-plugin
 +
// TODO notamment :
 +
// - stockage des photos, question, réponse, indice dans des fichiers sur la flash de la balise
 +
// - créer un formulaire pour pouvoir déposer sur chaque wemos les fichiers propres à la balise
 +
// - factoriser le code, ajouter des css
 +
// - vérifier l'utilisation en cas de clients multiples (cookies ? identification par adresse MAC ?) : un client peut être dans 3 états :
 +
//    - il n'a pas encore répondu
 +
//     - il a bien répondu
 +
//    - il a mal répondu et doit attendre un certain temps pour pouvoir répondre à nouveau
 +
// - réfléchir à comment vérifier le passage effectif dans toutes les balises
  
void setup
 
// c'est important de documenter son code !
 
void loop
 
}
 
  
{
+
#include <ESP8266WiFi.h> // on appelle la bibliotheque qui gere le WemosD1 mini
 +
#include <FS.h>
  
</pre>
+
WiFiServer serveur(80);
  
==='''Source'''===
+
void setup() {
* documents
+
  // put your setup code here, to run once:
* site web
+
  initHardware();
* pour aller plus loin ...
+
  setupWiFi();
 +
  serveur.begin(); // TODO : gestion de l'IP du serveur ?
 +
}
  
=== '''Applications : liens avec le quotidien''' ===
+
void setupWiFi() //reglage du reseau wifi emis par le WemosD1 mini
A quoi ça peut faire penser ?
+
{
 +
  WiFi.mode(WIFI_AP);
 +
  uint8_t mac[WL_MAC_ADDR_LENGTH];
 +
  WiFi.softAPmacAddress(mac);
 +
  String macID = String(mac[WL_MAC_ADDR_LENGTH - 2], HEX) +
 +
                String(mac[WL_MAC_ADDR_LENGTH - 1], HEX);
 +
  macID.toUpperCase();
 +
  String AP_NameString = "BREST URBAN GAME"; //nom du reseau
  
 +
  char AP_NameChar[AP_NameString.length() + 1];
 +
  memset(AP_NameChar, 0, AP_NameString.length() + 1);
  
==Le projet pédagogique==
+
  for (int i = 0; i < AP_NameString.length(); i++)
===Titre du projet pédagogique===
+
    AP_NameChar[i] = AP_NameString.charAt(i);
Le titre est formulé sous forme de question ? autre ?
 
  
====Analyse didactique et épistémologique====
+
  WiFi.softAP(AP_NameChar);
Quelles sont les notions importantes ?
+
}
comment les aborder ?
 
etc...
 
====Concepts scientifiques et techniques en jeu (ceux à faire passer, ceux périphériques,...) :====
 
====Représentations historiques et actuelles====
 
  
{|style="background-color:black; font-size:small; float: left; margin:3px 3px 3px 10px"
+
void initHardware()
|-
+
{
|style="background-color:white" | '''représentation erronée'''
+
  Serial.begin(115200); //ouvre une connection serie pour monitorer le fonctionnement du code quand on reste branche a l'ordinateur
|style="background-color:white" | '''Rectification'''  
+
}  
|-
 
|style="background-color:white" | Ici je met une représentation erronée
 
|style="background-color:white" | et là une rectification
 
|}
 
  
<br>
+
String Enigme(WiFiClient c) {
 +
  // Prepare la page web de réponse. on commence par le "header" commun; (le code HTML sera ecrit dans la chaine de caracteres s).
 +
  String s = "HTTP/1.1 200 OK\r\n";
 +
  s += "Content-Type: text/html; charset=UTF-8\r\n\r\n";
 +
  s += "<!DOCTYPE html>\r\n";
 +
  s += "<html>\r\n";
 +
  s += "<head>\r\n";
 +
  s += "<body><center>";
 +
  s += "<h1 style=\"font-size:300%;\"\> BREST URBAN GAME ";
 +
  s += "</h1>";
 +
  s += "</center>";
  
 +
  //s += "<p>Vous êtes connecté : client = ";
 +
  //s += c ;
 +
  //s += "</p>";
 +
  s += "<h2>La question qui tue : quelle est la bonne réponse ?</h2>" ;
 +
  s += "<a href=\"/rep1\"\"><button style=\"font-size:200%; width: 18%\"\>img1 </button></a>\r\n";
 +
  s += "<a href=\"/rep2\"\"><button style=\"font-size:200%; width: 18%\"\>img2 </button></a>\r\n";
 +
  s += "<a href=\"/rep3\"\"><button style=\"font-size:200%; width: 18%\"\>img3 </button></a>\r\n";
 +
  s += "<a href=\"/rep4\"\"><button style=\"font-size:200%; width: 18%\"\>img4 </button></a><br />\r\n";
  
Ce tableau devrait être complété après chaque animation
+
 
 +
  s += "</body></html>\n"; //Fin de la page Web
 +
 
 +
  return (s) ;
 +
}
  
====Notions pré-requises :====
+
String MauvaiseReponse(WiFiClient c) {
===Cadre de l'animation===
+
  // Prepare la page web de réponse. on commence par le "header" commun; (le code HTML sera ecrit dans la chaine de caracteres s).
* Âge des participants et niveau scolaire
+
  String s = "HTTP/1.1 200 OK\r\n";
* Nombre de participants
+
  s += "Content-Type: text/html; charset=UTF-8;\r\n\r\n";
* Durée de l'animation (nb de séance, durée de chaque séance)
+
  s += "<!DOCTYPE html>\r\n";
* Objectifs pédagogiques (savoir, savoir-faire et savoir être).
+
  s += "<html>\r\n";
 +
  s += "<head>\r\n";
 +
  s += "<meta http-equiv=\"refresh\" content=\"5; url=/\" />";
 +
  s += "<body><center>";
 +
  s += "<h1 style=\"font-size:300%;\"\> BREST URBAN GAME ";
 +
  s += "</h1>";
 +
  s += "<h2 style=\"color:red\">Mauvaise réponse !</h2>";
 +
  s += "</body></html>\n"; //Fin de la page Web
 +
 
 +
  return(s);
 +
}
  
Ici vous avez un exemple de guide méthodologique pour formuler vos objectifs http://www.formations-actives.com/index.php/les-objectifs-pedagogiques-guide-pratique-33/
+
String Indice(WiFiClient c) {
 +
  // Prepare la page web de réponse. on commence par le "header" commun; (le code HTML sera ecrit dans la chaine de caracteres s).
 +
  String s = "HTTP/1.1 200 OK\r\n";
 +
  s += "Content-Type: text/html; charset=UTF-8\r\n\r\n";
 +
  s += "<!DOCTYPE html>\r\n";
 +
  s += "<html>\r\n";
 +
  s += "<head>\r\n";
 +
  s += "<body><center>";
 +
  s += "<h1 style=\"font-size:300%;\"\> BREST URBAN GAME ";
 +
  s += "</h1>";
 +
  s += "</center>";
  
====Déroulement de la séance :====
+
  s += "<h2>Bravo ! L'indice est : <br /><br />Continuez tout droit </h2> ";
il peut y avoir plusieurs séances.
+
 
 +
  s += "</body></html>\n"; //Fin de la page Web
 +
 
 +
  return (s) ;
 +
}
  
=====introduction :=====
+
void loop() {
ce que fait l'animateur en commençant la séance.
+
  // put your main code here, to run repeatedly:
 +
    // Vérifie si il y a navigateur connecte
 +
  WiFiClient client = serveur.available();
 +
  if (!client) {
 +
    return;
 +
  }
  
ex : mise en scène de l'espace, salutations, jeux, présentations, recueil des représentations etc...
+
  // Lit la premiere ligne de la requete
 +
  String req = client.readStringUntil('\r');
 +
  //delay(10);
 +
  client.flush();
  
=====déroulement =====
+
  int reponse = 0 ;
une séance d'animation comprend plusieurs temps (accueil, tel jeu, telle expérience).
+
  if (req.indexOf("/rep1") != -1) reponse = 1;
* temps 1 :
+
  else if (req.indexOf("/rep2") != -1) reponse = 2;
* Description de l'activité :
+
  else if (req.indexOf("/rep3") != -1) reponse = 3;
* Dynamique de groupe : grands groupes, individuel, sous-groupes de X personnes.
+
  else if (req.indexOf("/rep4") != -1) reponse = 4;
* autres temps ?
 
  
====Conclusion de la séance====
+
  Serial.println("reponse = " + String(reponse));
Comment conclure ?
+
  Serial.println("req= " + req);
====Autre commentaire pédagogique et précaution====
+
 
 
+
  //la bonne réponse est rep2 (au final la bonne réponse est à lire dans un fichier de la flash)
====Bilan====
+
  if (reponse == 2) {
  Comment fait-on le bilan ?
+
    // affiche page indice
 +
    client.print(Indice(client));
 +
  }
 +
  else if ( reponse == 1 or reponse == 3 or reponse == 4 ) {
 +
    // affiche page erreur pendant 5 sec
 +
    client.print(MauvaiseReponse(client));
 +
    // delay(5000);
 +
  }
 +
  else {
 +
    //affiche page enigme
 +
    client.print(Enigme(client));
 +
  }  
 +
 
 +
  Serial.println("Client disconnected");
 +
  // client.flush();
  
 +
}
 +
</pre>
 
[[Catégorie:HP17]]
 
[[Catégorie:HP17]]

Version actuelle datée du 20 juin 2017 à 16:50

Hackathonpeda2017.jpeg

Brest Urban Game. Jeu de piste connecté

Lundi, de l'idée au projet

Fin de l'idéation : lundi midi

Idée de départ : jeu de piste avec la fabrication de bornes et des boîtiers à utiliser par les équipes qui jouent.

Après "brainstormer" ... Quelques idées retenues

Erreur lors de la création de la miniature : Fichier avec des dimensions supérieures à 12,5 MP

Re-appropriation des idées du matin

Idée : concevoir un jeu de piste basé sur des énigmes

Deux aspects :

Utilisation du jeu


Participants : des 10-14 ans en groupes

Avec leur smartphone, les participants se déplacent dans une zone géographique préalablement délimitée. Ils recherchent des balises. Sur chaque balise un QR code leur permet de débloquer une question sur le lieu sur lequel ils sont. La bonne réponse à la question leur permet de débloquer un indice pour trouver la balise suivante. Si la réponse n'est pas correcte, le système se bloque pendant un certain temps. Puis ils peuvent proposer une autre réponse.

Les participants se déplacent en groupe pendant le jeu.

Fabrication du jeu


  • Matériel / balise : alimentation, câbles, boîte de métallique, wemos D1 mini, boîte à imprimer / découper et monter, photos et énigme, zone géographique concernée
  • Matériel complémentaire : smartphone, lecteur QR code, navigateur Web, ordinateur, arduino IDE (avec librairie wemos)
  • Tâches (à faire en activité encadrée) : conception du jeu (thème, zone du lieu, départ et arrivée, étapes balisées(énigmes, cachettes)), conception et création de boîtiers, paramétrer les wemos, génération de QR codes (imprimer et plastifier ensuite),

Le principe de fonctionnement

Erreur lors de la création de la miniature : Fichier avec des dimensions supérieures à 12,5 MP

Diaporama du "topo-pechu" du lundi soir

Fichier:Hackathonpeda2017 BrestUrbanGame.odp


Mardi, réalisation du projet

TOPO PECHU Fichier:Hackathonpeda2017 BrestUrbanGameV2.odp

Conception pédagogique

Durée de l'activité : 4 demi-journées Nombre d'enfants : 2 groupes de 12 enfants pour l'ensemble du projet

Activité matinée 1 (par groupe de 12 enfants)


  1. . Présentation générale du projet (animateur) : (~30')
    1. Idée : conception et réalisation d'un jeu de piste connecté
    2. Utilisation de smartphone et wifi pour les balises dans le jeu
    3. Découverte technique du numérique (wifi + Web)
    4. Imaginer des énigmes en lien avec les points d'intérêt du jeu
    5. Esprit d'équipe
  2. . Présentation de la zone de jeu (animateur)
  3. . Points d'intérêt
    1. Discussion et définition qu'est ce que c'est qu'un point d'intérêt (animateur et enfants)
    2. Recherche de points d'intérêt et présentation par les enfants : organisation éventuel des enfants en groupes
    3. Lister tous les points d'intérêt identifiés (~12) par l'animateur
    4. Constituer 4 groupes de 3 enfants puis tirer au sort un point d'intérêt par chaque groupe.
    5. Définir l'ordre des balises liées aux points d'intérêt et donner selon l'ordre un numéro de balise par groupe


==> Liste de points d'intérêt retenus 
    Groupes d'enfants, un par balise

Activité matinée 2


Présentation de la matinée deux parties: Une partie montage "matériel"- une partie "énigme" en vue de la programmation de la borne

1ère partie :

  1. . la technique: objectif montage de la borne wifi
    1. Présentation du matériel et de leur rôle
    2. Présentation de la fiche montage
  2. . La gestion de la wifi- confinement comment et pourquoi?

Par groupe et par balise

  1. . Fabrication de la balise

2ème partie :

  1. . Réfléchir à l'énigme et aux possibilités de réponses
    1. Rédiger l'énigme
    2. Définir les réponses - soit texte ou recherche d'image

==> Balise prête à être programmée et égnime prête pour chaque groupe

Activité matinée 3


Avec l'ensemble des 12 enfants

  1. .Présentation de l'objectif de programmation de la balise
  2. .Présentation de la fiche d'aide à la programmation avec les étapes

En groupe-balise

  1. .Programmer la balise
  2. .Aller se renseigner sur le point d'intérêt suivant afin de définir un indice pour s'y rendre
  3. .Programmer l'indice
  4. .Tester avec leur smarphone
  5. .imprimer un QR-Code et échange sur sa fonction et sa présence dans notre vie quotidienne

=> Balise prête- le groupe est prêt à faire tester son jeu de piste aux camarades de l'autre groupe

Activité matinée 4


Chaque groupe va équiper sa zone de jeu pour que l'autre groupe puisse jouer.

Et maintenant chaque groupe va pourvoir jouer....

=> Satisfaction de l'aboutissement du travail du groupe dans une réalisation commune et de la résolution des énigmes

FICHE MONTAGE DE LA BALISE

Matériel nécessaire

Pour la fabrication d'une balise, nous aurons besoin de :

  • Wemos.JPG une carte Wemos
  • Breadboard.JPG une plaque de prototypage
  • PilesAA.JPG 4 piles AA (1,5V)
  • des câbles :
    • Cables1.JPG
    • Cable2.JPG
  • Boitier.JPG un boîtier imprimé avec l'imprimante 3D
  • une boite de "ricoré"

Des outils :

  • Pincecoupante.JPG une pince coupante
  • PinceAdenuder.JPG une pince à dénuder


Pour souder, il nous faudra :

  • FerASouder.JPG Un fer à souder
  • TroisiemeMain.JPGUne troisième main
  • Etain.JPG De l'étain

Les étapes

Souder les connectiques aux wemos

Le positionnement

  • Le positionnement.JPG
  • Positionnementfinal.JPG

Soudure

  • Soudure1.JPG
  • Soudure2.JPG


Résultat Final

  • Résultatfinal.JPG

Câbler le boîtier

Vérification du cablage avec un voltmètre

  • Vérification.JPG

Mise en place de l'interrupteur et soudure des cables connexion wemos

  • Miseenplace interrupteur.JPG

Résultat de l'alimentation

  • Résultat alimentation terminée.JPG

Installation de l'alimentation dans la boite type "Ricoré"

  • Installationdanslaboite.JPG
  • Résultat.JPG

Installation du wemos dans le boite

FICHE D'AIDE A LA PREPARATION DE LA BALISE

Logiciels nécessaires

Pour la programmation d'une balise, nous aurons besoin d’un PC avec les logiciels suivants :

Les étapes

  • La toute première fois que le Wemos est utilisé, il faut le formater pour pouvoir utiliser la mémoire flash. Pour cela, compiler et « flasher » sur le Wemos le code du setup qui se trouve à l’adresse http://www.esp8266.com/viewtopic.php?f=29&t=8194
  • Récupérer le code du projet Brest Urban Game à l’adresse suivante. Dézipper le fichier. Il contient un répertoire et un fichier .ino. Ouvrir le fichier .ino avec Arduino IDE et flasher son contenu dans le Wemos.
  • Dans le répertoire vous trouverez cinq fichiers :
    • Le fichier reponseX.jpg contient l’image qui correspondra à la réponse numéro X de l’énigme
    • Le fichier bonneReponse.txt doit contenir la bonne réponse à l’énigme. Elle doit correspondre à une chaîne de caractères rep1, rep2, rep3 ou rep4 en fonction de la bonne réponse à l’énigme.

CODE DE LA BALISE WEMOS

//
// Brest Urban Game
//
// 20/06/2017
// TO BE CONTINUED
// Notes
// Le code est prévu pour être unique pour toutes les balises wemos
// prérequis : il faut initialiser la mémoire flash du wemos cf.https://github.com/esp8266/arduino-esp8266fs-plugin
// TODO notamment :
// - stockage des photos, question, réponse, indice dans des fichiers sur la flash de la balise
// - créer un formulaire pour pouvoir déposer sur chaque wemos les fichiers propres à la balise
// - factoriser le code, ajouter des css
// - vérifier l'utilisation en cas de clients multiples (cookies ? identification par adresse MAC ?) : un client peut être dans 3 états : 
//     - il n'a pas encore répondu
//     - il a bien répondu
//     - il a mal répondu et doit attendre un certain temps pour pouvoir répondre à nouveau
// - réfléchir à comment vérifier le passage effectif dans toutes les balises


#include <ESP8266WiFi.h> // on appelle la bibliotheque qui gere le WemosD1 mini
#include <FS.h> 

WiFiServer serveur(80);

void setup() {
  // put your setup code here, to run once:
  initHardware();
  setupWiFi();
  serveur.begin(); // TODO : gestion de l'IP du serveur ?
}

void setupWiFi() //reglage du reseau wifi emis par le WemosD1 mini
{
  WiFi.mode(WIFI_AP);
  uint8_t mac[WL_MAC_ADDR_LENGTH];
  WiFi.softAPmacAddress(mac);
  String macID = String(mac[WL_MAC_ADDR_LENGTH - 2], HEX) +
                 String(mac[WL_MAC_ADDR_LENGTH - 1], HEX);
  macID.toUpperCase();
  String AP_NameString = "BREST URBAN GAME"; //nom du reseau

  char AP_NameChar[AP_NameString.length() + 1];
  memset(AP_NameChar, 0, AP_NameString.length() + 1);

  for (int i = 0; i < AP_NameString.length(); i++)
    AP_NameChar[i] = AP_NameString.charAt(i);

  WiFi.softAP(AP_NameChar);
}

void initHardware()
{
  Serial.begin(115200); //ouvre une connection serie pour monitorer le fonctionnement du code quand on reste branche a l'ordinateur
} 

String Enigme(WiFiClient c) {
  // Prepare la page web de réponse. on commence par le "header" commun; (le code HTML sera ecrit dans la chaine de caracteres s).
  String s = "HTTP/1.1 200 OK\r\n";
  s += "Content-Type: text/html; charset=UTF-8\r\n\r\n";
  s += "<!DOCTYPE html>\r\n";
  s += "<html>\r\n";
  s += "<head>\r\n";
  s += "<body><center>";
  s += "<h1 style=\"font-size:300%;\"\> BREST URBAN GAME ";
  s += "</h1>";
  s += "</center>";

  //s += "<p>Vous êtes connecté : client = ";
  //s += c ;
  //s += "</p>";
  s += "<h2>La question qui tue : quelle est la bonne réponse ?</h2>" ;
  s += "<a href=\"/rep1\"\"><button style=\"font-size:200%; width: 18%\"\>img1 </button></a>\r\n";
  s += "<a href=\"/rep2\"\"><button style=\"font-size:200%; width: 18%\"\>img2 </button></a>\r\n";
  s += "<a href=\"/rep3\"\"><button style=\"font-size:200%; width: 18%\"\>img3 </button></a>\r\n";
  s += "<a href=\"/rep4\"\"><button style=\"font-size:200%; width: 18%\"\>img4 </button></a><br />\r\n";

  
  s += "</body></html>\n"; //Fin de la page Web
  
  return (s) ;
}

String MauvaiseReponse(WiFiClient c) {
  // Prepare la page web de réponse. on commence par le "header" commun; (le code HTML sera ecrit dans la chaine de caracteres s).
  String s = "HTTP/1.1 200 OK\r\n";
  s += "Content-Type: text/html; charset=UTF-8;\r\n\r\n";
  s += "<!DOCTYPE html>\r\n";
  s += "<html>\r\n";
  s += "<head>\r\n";
  s += "<meta http-equiv=\"refresh\" content=\"5; url=/\" />";
  s += "<body><center>";
  s += "<h1 style=\"font-size:300%;\"\> BREST URBAN GAME ";
  s += "</h1>";
  s += "<h2 style=\"color:red\">Mauvaise réponse !</h2>";
  s += "</body></html>\n"; //Fin de la page Web
  
  return(s);
}

String Indice(WiFiClient c) {
  // Prepare la page web de réponse. on commence par le "header" commun; (le code HTML sera ecrit dans la chaine de caracteres s).
  String s = "HTTP/1.1 200 OK\r\n";
  s += "Content-Type: text/html; charset=UTF-8\r\n\r\n";
  s += "<!DOCTYPE html>\r\n";
  s += "<html>\r\n";
  s += "<head>\r\n";
  s += "<body><center>";
  s += "<h1 style=\"font-size:300%;\"\> BREST URBAN GAME ";
  s += "</h1>";
  s += "</center>";

  s += "<h2>Bravo ! L'indice est : <br /><br />Continuez tout droit </h2> ";
  
  s += "</body></html>\n"; //Fin de la page Web
  
  return (s) ;
}

void loop() {
  // put your main code here, to run repeatedly:
    // Vérifie si il y a navigateur connecte
  WiFiClient client = serveur.available();
  if (!client) {
    return;
  }

  // Lit la premiere ligne de la requete
  String req = client.readStringUntil('\r');
  //delay(10);
  client.flush();

  int reponse = 0 ;
  if (req.indexOf("/rep1") != -1) reponse = 1;
  else if (req.indexOf("/rep2") != -1) reponse = 2;
  else if (req.indexOf("/rep3") != -1) reponse = 3;
  else if (req.indexOf("/rep4") != -1) reponse = 4;

  Serial.println("reponse = " + String(reponse));
  Serial.println("req= " + req);
  
  //la bonne réponse est rep2 (au final la bonne réponse est à lire dans un fichier de la flash)
  if (reponse == 2) {
    // affiche page indice
    client.print(Indice(client));
  }
  else if ( reponse == 1 or reponse == 3 or reponse == 4 ) {
    // affiche page erreur pendant 5 sec
    client.print(MauvaiseReponse(client));
    // delay(5000);
  }
  else {
    //affiche page enigme
    client.print(Enigme(client));
  }  
  
  Serial.println("Client disconnected");
   // client.flush();

}