HP17 : Bresturbangame : Différence entre versions

De Les Fabriques du Ponant
Aller à : navigation, rechercher
(Conception pédagogique)
 
(40 révisions intermédiaires par 4 utilisateurs non affichées)
Ligne 46 : Ligne 46 :
  
 
==Mardi, réalisation du projet==
 
==Mardi, réalisation du projet==
 +
TOPO PECHU
 +
[[Fichier:Hackathonpeda2017 BrestUrbanGameV2.odp]]
  
 
===Conception pédagogique===
 
===Conception pédagogique===
Ligne 51 : Ligne 53 :
 
Nombre d'enfants : 2 groupes de 12 enfants pour l'ensemble du projet
 
Nombre d'enfants : 2 groupes de 12 enfants pour l'ensemble du projet
  
Activité matinée 1 par groupe de 12
+
====Activité matinée 1 (par groupe de 12 enfants)====
 
------------------
 
------------------
  
Ligne 66 : Ligne 68 :
 
## Lister tous les points d'intérêt identifiés (~12) par l'animateur
 
## 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.  
 
## Constituer 4 groupes de 3 enfants puis tirer au sort un point d'intérêt par chaque groupe.  
## définir lors des balises liées au point d'intérêt
+
## 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
  
  
Ligne 72 : Ligne 74 :
 
     Groupes d'enfants, un par balise
 
     Groupes d'enfants, un par balise
  
Activité matinée 2
+
====Activité matinée 2====
------------------
+
----------------------
par groupe - balise
+
 
réfléchir à une énigme avec le choix de réponse sur le point d'intérêt
+
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
 +
 
 +
==> 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
 +
 
 +
=> 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 :
 +
 
 +
* [[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
  
présentation du matériel avec la fiche montage de la borne wifi
+
====Les étapes====
 +
Souder les connectiques aux wemos
  
===Quel est l'usage d'une telle fiche ?===
+
Le positionnement
 +
* [[Fichier:Le positionnement.JPG|200px]]
 +
* [[Fichier:Positionnementfinal.JPG|200px]]
  
Elle doit lui être utile à :
+
Soudure
* préparer son animation,
+
* [[Fichier:Soudure1.JPG|200px]]
* se remémorer les notions techniques en jeu,
+
* [[Fichier:Soudure2.JPG|200px]]
* 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 ?===
 
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.
 
  
Le cadre de l'animation est défini par :
+
Résultat Final
* Le type de participants (âge, niveaux, modalité de participation, captif ou libre)...
+
* [[Fichier:Résultatfinal.JPG|200px]]
* L'espace dans lequel a lieu l'animation : école, rue, centre de loisirs, musée, exposition, labo,...
 
* 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 ?===
+
Câbler le boîtier
Elle contient deux grandes rubriques :
 
* La réalisation technique.
 
* le projet pédagogique
 
  
=== '''Matériel''' ===
+
Vérification du cablage avec un voltmètre
* [[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]
+
* [[Fichier:Vérification.JPG|200px]]
  
 +
Mise en place de l'interrupteur et soudure des cables connexion wemos
 +
* [[Fichier:Miseenplace interrupteur.JPG|200px]]
  
==='''La réalisation'''===
+
Résultat de l'alimentation
On explique comment fabriquer !
+
* [[Fichier:Résultat alimentation terminée.JPG|200px]]
Avec des illustrations !
 
  
[[image:Petitbot1.JPG|400px]]
+
Installation de l'alimentation dans la boite type "Ricoré"
[[image:Petitbot4.JPG|400px]]
+
* [[Fichier:Installationdanslaboite.JPG|200px]]
 +
* [[Fichier:Résultat.JPG|200px]]
  
==='''Fonctionnement'''===
+
Installation du wemos dans le boite
* étape 1
 
* étape 2
 
  
 +
===FICHE D'AIDE A LA PREPARATION DE LA BALISE===
 +
====Logiciels nécessaires====
  
==='''Schéma de câblage, si besoin'''===
+
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
  
==='''Le code, si besoin'''===
+
====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
  
==Le projet pédagogique==
+
  char AP_NameChar[AP_NameString.length() + 1];
===Titre du projet pédagogique===
+
  memset(AP_NameChar, 0, AP_NameString.length() + 1);
  
 +
  for (int i = 0; i < AP_NameString.length(); i++)
 +
    AP_NameChar[i] = AP_NameString.charAt(i);
  
====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();

}