HP17 : Bresturbangame : Différence entre versions

De Les Fabriques du Ponant
Aller à : navigation, rechercher
 
(75 révisions intermédiaires par 5 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
  
==Brest Urban Game. Jeu de piste connecté==
+
[[Fichier:Hackathonpeda2017.jpeg|80px]]
  
Participants : enfants entre 10 et 14 ans (fabricants du jeu et utilisateurs du jeu)
+
=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 des balises WiFi (wemos) qu'ils ont fabriquées ; chacune pose une énigme qui leur permet de trouver la balise suivante.
+
==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)
  
Bornes : une carte wemos (arduino+wifi)
+
*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
  
===A qui s'adresse cette fiche type ?===
+
[[Fichier:BrestUrbanGamePpeFonctionnement.jpg|400px]]
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.
+
====Diaporama du "topo-pechu" du lundi soir====
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.
 
  
===Quel est l'usage d'une telle fiche ?===
+
[[Fichier:Hackathonpeda2017_BrestUrbanGame.odp|C'est là]]
  
Elle doit lui être utile à :
 
* préparer son animation,
 
* 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 ?===
+
==Mardi, réalisation du projet==
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.  
+
TOPO PECHU
 +
[[Fichier:Hackathonpeda2017 BrestUrbanGameV2.odp]]
  
Le cadre de l'animation est défini par :
+
===Conception pédagogique===
* Le type de participants (âge, niveaux, modalité de participation, captif ou libre)...
+
Durée de l'activité : 4 demi-journées
* L'espace dans lequel a lieu l'animation : école, rue, centre de loisirs, musée, exposition, labo,...
+
Nombre d'enfants : 2 groupes de 12 enfants pour l'ensemble du projet
* les partenaires : enseignants, animateurs, ...
 
* évènement particulier
 
* 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,..
 
  
===Quelles rubriques contient-elle ?===
+
====Activité matinée 1 (par groupe de 12 enfants)====
Elle contient deux grandes rubriques :
+
------------------
* La réalisation technique.
 
* le projet pédagogique
 
  
==La réalisation Technique==
+
#. Présentation générale du projet (animateur) : (~30')
==='''Nom de la réalisation technique'''===
+
## 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
  
  
==='''Présentation de la réalisation'''===
+
==> Liste de points d'intérêt retenus
Tutoriel pour construire le "trucotron".
+
    Groupes d'enfants, un par balise
Il fera ceci et cela...
 
  
=== '''Matériel''' ===
+
====Activité matinée 2====
* [[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]
+
----------------------
  
 +
Présentation de la matinée deux parties:
 +
Une partie montage "matériel"- une partie "énigme" en vue de la programmation de la borne
  
==='''La réalisation'''===
+
1ère partie :
On explique comment fabriquer !
+
#. la technique: objectif montage de la borne wifi
Avec des illustrations !
+
## 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?
  
[[image:Petitbot1.JPG|400px]]
+
Par groupe et par balise
[[image:Petitbot4.JPG|400px]]
+
#. Fabrication de la balise
  
==='''Fonctionnement'''===
+
2ème partie :
* étape 1
 
* étape 2
 
  
 +
#. 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
  
==='''Schéma de câblage, si besoin'''===
+
==> 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
  
==='''Le code, si besoin'''===
+
=> Balise prête- le groupe est prêt à faire tester son jeu de piste aux camarades de l'autre groupe
  
<pre>
+
====Activité matinée 4====
///////////////
+
----------------------
// Titre du programme //
+
Chaque groupe va équiper sa zone de jeu pour que l'autre groupe puisse jouer.
///////////////
+
 
// Un programme pédagogique créé à l'occasion du hackathon pédagogique de Brest, les 19 et 20 juin 2017
+
Et maintenant chaque groupe va pourvoir jouer....
// Sous licence CC-By-Sa
+
 
// Par des gens bien
+
=> 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 :
 +
 
 +
* [[Fichier:Wemos.JPG|100px]] une carte Wemos
 +
* [[Fichier:Breadboard.JPG|100px]] une plaque de prototypage
 +
* [[Fichier:PilesAA.JPG|100px]] 4 piles AA (1,5V)
 +
* des câbles :
 +
** [[Fichier:Cables1.JPG|100px]]
 +
** [[Fichier:Cable2.JPG|100px]]
 +
* [[Fichier:Boitier.JPG|100px]] un boîtier imprimé avec l'imprimante 3D
 +
* une boite de "ricoré"
 +
 
 +
Des outils :
 +
* [[Fichier:Pincecoupante.JPG|100px]] une pince coupante
 +
* [[Fichier:PinceAdenuder.JPG|100px]] une pince à dénuder
 +
 
 +
 
 +
Pour souder, il nous faudra :
 +
* [[Fichier:FerASouder.JPG|100px]] Un fer à souder
 +
* [[Fichier:TroisiemeMain.JPG|100px]]Une troisième main
 +
* [[Fichier:Etain.JPG|100px]] De l'étain
 +
 
 +
====Les étapes====
 +
Souder les connectiques aux wemos
 +
 
 +
Le positionnement
 +
* [[Fichier:Le positionnement.JPG|200px]]
 +
* [[Fichier:Positionnementfinal.JPG|200px]]
 +
 
 +
Soudure
 +
* [[Fichier:Soudure1.JPG|200px]]
 +
* [[Fichier:Soudure2.JPG|200px]]
 +
 
 +
 
 +
Résultat Final
 +
* [[Fichier:Résultatfinal.JPG|200px]]
 +
 
 +
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
  
void setup
+
====Les étapes====
// c'est important de documenter son code !
+
* 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
void loop
+
* 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>
 +
//
 +
// 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
  
</pre>
 
  
==='''Source'''===
+
#include <ESP8266WiFi.h> // on appelle la bibliotheque qui gere le WemosD1 mini
* documents
+
#include <FS.h>
* site web
 
* pour aller plus loin ...
 
  
=== '''Applications : liens avec le quotidien''' ===
+
WiFiServer serveur(80);
A quoi ça peut faire penser ?
 
  
 +
void setup() {
 +
  // put your setup code here, to run once:
 +
  initHardware();
 +
  setupWiFi();
 +
  serveur.begin(); // TODO : gestion de l'IP du serveur ?
 +
}
  
==Le projet pédagogique==
+
void setupWiFi() //reglage du reseau wifi emis par le WemosD1 mini
===Titre du projet pédagogique===
+
{
 +
  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);
  
====Analyse didactique et épistémologique====
+
  for (int i = 0; i < AP_NameString.length(); i++)
Quelles sont les notions importantes ?
+
    AP_NameChar[i] = AP_NameString.charAt(i);
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"
+
  WiFi.softAP(AP_NameChar);
|-
+
}
|style="background-color:white" | '''représentation erronée'''
 
|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>
+
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>";
  
Ce tableau devrait être complété après chaque animation
+
  //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";
  
====Notions pré-requises :====
+
 
===Cadre de l'animation===
+
  s += "</body></html>\n"; //Fin de la page Web
* Âge des participants et niveau scolaire
+
 
* Nombre de participants
+
  return (s) ;
* Durée de l'animation (nb de séance, durée de chaque séance)
+
}
* Objectifs pédagogiques (savoir, savoir-faire et savoir être).
 
  
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 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);
 +
}
  
====Déroulement de la séance :====
+
String Indice(WiFiClient c) {
il peut y avoir plusieurs séances.
+
  // 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>";
  
=====introduction :=====
+
  s += "<h2>Bravo ! L'indice est : <br /><br />Continuez tout droit </h2> ";
ce que fait l'animateur en commençant la séance.
+
 
 +
  s += "</body></html>\n"; //Fin de la page Web
 +
 
 +
  return (s) ;
 +
}
  
ex : mise en scène de l'espace, salutations, jeux, présentations, recueil des représentations etc...
+
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;
 +
  }
  
=====déroulement =====
+
  // Lit la premiere ligne de la requete
une séance d'animation comprend plusieurs temps (accueil, tel jeu, telle expérience).
+
  String req = client.readStringUntil('\r');
* temps 1 :
+
  //delay(10);
* Description de l'activité :
+
  client.flush();
* Dynamique de groupe : grands groupes, individuel, sous-groupes de X personnes.
 
* autres temps ?
 
  
====Conclusion de la séance====
+
  int reponse = 0 ;
Comment conclure ?
+
  if (req.indexOf("/rep1") != -1) reponse = 1;
====Autre commentaire pédagogique et précaution====
+
  else if (req.indexOf("/rep2") != -1) reponse = 2;
 +
  else if (req.indexOf("/rep3") != -1) reponse = 3;
 +
  else if (req.indexOf("/rep4") != -1) reponse = 4;
  
====Bilan====
+
  Serial.println("reponse = " + String(reponse));
  Comment fait-on le bilan ?
+
  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();
  
 +
}
 +
</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();

}