PuzzleBox

Applications et services en ligne

Blynk

À propos de ce projet

Remarque :Ce tutoriel est peut-être obsolète, veuillez y aller ici pour une version plus récente.

Garder vos objets de valeur à l'abri des regards indiscrets peut parfois être difficile, à moins que vous ne les mettiez dans un grand coffre-fort ou quelque chose de similaire... mais qui a de la place pour ça ?

Au lieu de cela, créez votre propre boîte de puzzle en utilisant les composants du MKR IoT Bundle et du carton ! Nous ne pouvons pas garantir la sécurité de vos biens, mais au moins ce sera un moyen de dissuasion amusant pour les voleurs potentiels.

Bien sûr, nous vous conseillons d'y ranger vos bonbons... pas de véritables objets de valeur.

En bref

Afin d'ouvrir la boîte, qui est maintenue fermée avec un servomoteur, vous devrez tourner les potentiomètres jusqu'à ce que vous obteniez la bonne combinaison. La combinaison peut être définie via l'application en ligne Blynk. Une LED vous aidera à deviner, vous donnant des retours de couleur :plus vous êtes proche, plus la couleur est chaude.

Lorsque la bonne combinaison est devinée, le buzzer commencera à jouer une chanson tandis que le servo ouvrira la boîte.

Afin de créer notre boîte de puzzle, nous aurons besoin des composants suivants :

• Sonnerie

• LED RVB

• 3 potentiomètres

• Écran LCD

• Servomoteur

Objectifs d'apprentissage

• Présentation de la plate-forme Internet Blynk

• Câblage et utilisation de l'écran LCD

• Jouer au thème Star Wars avec le buzzer

Vous voulez en savoir plus ?

Ce tutoriel fait partie d'une série d'expériences qui vous familiarisent avec le MKR1000 et l'IoT. Toutes les expériences peuvent être construites à l'aide des composants contenus dans le MKR IoT Bundle.

• Je t'aime oreiller

• Boîte à énigmes

• Le chat de Pavlov

• Le nerd

• Communicateur d'usine

Présentation de Blynk

Blynk est une application mobile populaire pour l'Internet des objets, elle nous permet de contrôler facilement notre Arduino connecté à Internet de partout, à tout moment.

Elle a été fondée sur Kickstarter et est rapidement devenue l'une des applications les plus utilisées dans ce domaine, grâce à sa documentation impressionnante et à sa simplicité.

Premiers pas avec Blynk

Créer un nouveau projet est vraiment simple, il suffit de suivre ces quelques étapes simples ou de jeter un œil à la mise en route officielle de Blynk.

Après avoir créé avec succès un nouveau projet, vous devriez également recevoir par courrier le Jeton d'authentification. C'est un identifiant unique qui est nécessaire pour connecter votre matériel à votre smartphone. Chaque nouveau projet que vous créez aura son propre jeton d'authentification.

Afin de connecter l'Arduino à l'application, nous devrons installer la bibliothèque Blynk. Si vous utilisez l'éditeur Web Arduino, la bibliothèque sera automatiquement téléchargée lorsque vous l'incluez dans le croquis, sinon vous pouvez la télécharger à partir du gestionnaire de bibliothèque.

Nous sommes maintenant prêts à partir. Télécharger ce croquis et jouez avec les curseurs pour voir le résultat :

#include  #include  const char* ssid =SECRET_SSID; // votre réseau SSID (nom) const char* mot de passe =SECRET_PSWD; // votre mot de passe réseau char auth[] =SECRET_TOKEN; // votre jeton d'API Blynk // Variables pour stocker la valeur de la combinaison // Définissez la combinaison initiale sur ( 1 1 1 ) int SliderValueOne =1; int SliderValueTwo =1; int SliderValueThree =1; // Fonctions Blynk pour récupérer les valeurs BLYNK_WRITE(V1) { SliderValueOne =param.asInt(); // affectation de la valeur entrante de la broche V1 à une variable } BLYNK_WRITE(V2) { SliderValueTwo =param.asInt(); // affectation de la valeur entrante de la broche V1 à une variable } BLYNK_WRITE(V3) { SliderValueThree =param.asInt(); // affectation de la valeur entrante de la broche V1 à une variable } void setup() { Serial.begin(9600); Blynk.begin(auth, ssid, mot de passe); // démarrer les fonctionnalités de Blynk et se connecter au WiFi} void loop() { // Variables pour stocker temporairement la combinaison int Temp_Slider_One_value =SliderValueOne; int Temp_Slider_Two_value =SliderValueTwo; int Temp_Slider_Three_value =SliderValueThree; Blynk.run(); // interroge les nouvelles valeurs de combinaison depuis l'application en ligne // vérifie si les valeurs de combinaison sont modifiées et imprime-les sur la console if(Temp_Slider_One_value !=SliderValueOne || Temp_Slider_Two_value !=SliderValueTwo || Temp_Slider_Three_value !=SliderValueThree){ Serial.print("New combinaison:"); Serial.print(SliderValueOne); Serial.print(" "); Serial.print(SliderValueTwo); Serial.print(" "); Serial.println(SliderValueThree); } }  

Utilisation de l'écran LCD

Il est temps de connecter l'écran !

L'écran LCD est facile à utiliser mais nécessite beaucoup de fils, alors soyez prêt à prouver votre patience.

Notez que nous utilisons l'alimentation 5V et une résistance de 220 Ohm.

La luminosité peut être réglée en modifiant la valeur de sortie de la broche analogique 3 de 0 à 255, 0 étant la valeur maximale.

analogWrite(A3, 0);  

Maintenant, nous pouvons télécharger l'exemple de croquis et voir si tout fonctionne bien.

// inclure le code de la bibliothèque :#include  // initialiser la bibliothèque en associant toute broche d'interface LCD nécessaire // avec le numéro de broche arduino auquel elle est connectée const int rs =12, en =11, d4 =2, d5 =3, d6 =4, d7 =5; LiquidCrystal lcd(rs, en, d4, d5, d6, d7) ; void setup() { analogWrite(A3, 0); // Réglez la luminosité à sa valeur maximale // configurez le nombre de colonnes et de lignes de l'écran LCD :lcd.begin(16, 2); // Imprime un message sur l'écran LCD. lcd.print("Bonjour tout le monde !"); } void loop() { // place le curseur sur la colonne 0, ligne 1 // (remarque :la ligne 1 est la deuxième ligne, car le comptage commence par 0) :lcd.setCursor(0, 1); // affiche le nombre de secondes depuis la réinitialisation :lcd.print(millis() / 1000); }  

Ajouter des potentiomètres

Pour lire la valeur des potentiomètres nous n'aurons besoin que d'un analogRead() sur la bonne broche. Nous les connectons aux broches analogiques 0 , 1 , 2.

Notez que la valeur d'un potentiomètre s'étend de 0 à 1023 rendant la combinaison impossible à deviner. Pour mapper ces valeurs de 0 à 9, nous utiliserons le map() fonction,

 int PotOne =map(analogRead(A0), 0, 1023, 0, 9);  

Vous pouvez utiliser cet exemple de code pour imprimer sur l'écran LCD les valeurs des potentiomètres.

#include  // Broches de l'écran LCD const int rs =12, en =11, d4 =2, d5 =3, d6 =4, d7 =5; LiquidCrystal lcd(rs, en, d4, d5, d6, d7) ; void setup() { analogWrite(A3, 0); // règle la luminosité de l'écran LCD à la valeur maximale Serial.begin(9600); lcd.begin (16, 2); // commence l'écran LCD avec 16 colonnes et 2 lignes } void loop() { int PotOne =map(analogRead(A0), 0, 1023, 0, 9); int PotTwo =map(analogRead(A1), 0, 1023, 0, 9); int PotThree =map(AnalogRead(A2), 0, 1023, 0, 9); lcd.setCursor(0, 0); lcd.print(PotOne); lcd.setCursor(2, 0); lcd.print(PotDeux); lcd.setCursor(4, 0); lcd.print(PotTrois); }  

Ajoutez la LED RVB

Nous utiliserons la LED RVB comme retour pour aider les gens à deviner la combinaison, plus ils se rapprochent de la bonne valeur, plus la couleur de la LED est chaude, allant du bleu, de l'aqua, du jaune et du rouge.

Vous pouvez utiliser cet exemple de croquis pour voir le RVB en action !

// Broches LED RVB int redPin =6 ; int greenPin =8; int bluePin =7 ; void setup() { pinMode(redPin, OUTPUT); pinMode(vertPin, SORTIE); pinMode(bluePin, SORTIE); Serial.begin(9600); } boucle vide() { setColor(0, 0, 255); // délai bleu (1000); setColor(0, 255, 255); // délai aqua(1000); setColor(255, 255, 0); // délai jaune (1000); setColor(255, 0, 0); // Retard rouge (1000); } // Envoie les valeurs RVB aux broches LED void setColor(int red, int green, int blue){ analogWrite(redPin, red); analogWrite(greenPin, vert); analogWrite(bluePin, bleu); }  

Connectez-le à Blynk

Maintenant, nous sommes prêts à assembler les choses :connectez la carte à Blynk, le potentiomètre à l'écran LCD et faites clignoter la LED verte lorsque la combinaison est correcte.

• Notez que nous utiliserons la fonction giveColorFeedback() pour régler la couleur de la LED lorsque la valeur absolue de chaque potentiomètre est plus proche qu'un certain seuil de la bonne combinaison.

void giveColorFeedback(int PotOne, int PotTwo, int PotThree){...} 

• Nous utiliserons également ces variables pour stocker les valeurs envoyées depuis l'application et donc la combinaison.

int SliderValueOne =1 ; int SliderValueTwo =1; int SliderValueThree =1;  

Notez que la valeur initiale est définie sur 1, elle ne changera que si vous modifiez les valeurs des curseurs de l'application. Si vous réinitialisez le tableau, la combinaison reviendra à la valeur par défaut.

• Une variable booléenne bool start =true ; est utilisé pour détecter quand la combinaison a déjà été devinée, afin d'éviter de rouvrir la boîte à chaque boucle.

Téléchargez cet exemple de croquis pour le voir en action :

#include  #include  #include  #include  // Broches LED RVB int redPin =6 ; int greenPin =8; int bluePin =7 ; const char* ssid =SECRET_SSID; // votre réseau SSID (nom) const char* mot de passe =SECRET_PSWD; // votre mot de passe réseau char auth[] =SECRET_TOKEN; // votre jeton API Blynk // Broches de l'écran LCD const int rs =12, en =11, d4 =2, d5 =3, d6 =4, d7 =5; début booléen =vrai ; // Variables pour stocker la valeur de la combinaison // Définissez la combinaison initiale sur ( 1 1 1 ) int SliderValueOne =1; int SliderValueTwo =1; int SliderValueThree =1; // Fonctions Blynk pour récupérer les valeurs BLYNK_WRITE(V1) { SliderValueOne =param.asInt(); // affectation de la valeur entrante de la broche V1 à une variable } BLYNK_WRITE(V2) { SliderValueTwo =param.asInt(); // affectation de la valeur entrante de la broche V1 à une variable } BLYNK_WRITE(V3) { SliderValueThree =param.asInt(); // affectation de la valeur entrante de la broche V1 à une variable } LiquidCrystal lcd(rs, en, d4, d5, d6, d7) ; void setup() { pinMode(redPin, OUTPUT); pinMode(vertPin, SORTIE); pinMode(bluePin, SORTIE); analogWrite(A3, 0); // règle la luminosité de l'écran LCD à la valeur maximale Serial.begin(9600); lcd.begin (16, 2); // commence l'écran LCD avec 16 colonnes et 2 lignes Blynk.begin(auth, ssid, password); // démarrer les fonctionnalités de Blynk } void loop() { // Variables pour stocker temporairement la combinaison int Temp_Slider_One_value =SliderValueOne; int Temp_Slider_Two_value =SliderValueTwo; int Temp_Slider_Three_value =SliderValueThree; Blynk.run(); // interroge les nouvelles valeurs de combinaison depuis l'application en ligne // vérifie si les valeurs de combinaison sont modifiées et imprime-les sur la console if(Temp_Slider_One_value !=SliderValueOne || Temp_Slider_Two_value !=SliderValueTwo || Temp_Slider_Three_value !=SliderValueThree){ Serial.print("New combinaison:"); Serial.print(SliderValueOne); Serial.print(" "); Serial.print(SliderValueTwo); Serial.print(" "); Serial.println(SliderValueThree); } int PotOne =map(analogRead(A0), 0, 1023, 0, 9); int PotTwo =map(analogRead(A1), 0, 1023, 0, 9); int PotThree =map(AnalogRead(A2), 0, 1023, 0, 9); lcd.setCursor(0, 0); lcd.print(PotOne); lcd.setCursor(2, 0); lcd.print(PotDeux); lcd.setCursor(4, 0); lcd.print(PotTrois); if (démarrer) { giveColorFeedback(PotOne, PotTwo, PotThree); if (PotOne ==SliderValueOne &&PotTwo ==SliderValueTwo &&PotThree ==SliderValueThree) { blinkGreenLed(); début =faux ; } } if(!start) { if(PotOne ==0 &&PotTwo ==0 &&PotThree ==0){ start =true; } } } // Donne des commentaires en fonction de la proximité du potentiomètre par rapport à la valeur de combinaison // Plus il est proche, plus la couleur du vide de la LED est chaude. - SliderValueOne) <=1 &&abs(PotTwo - SliderValueTwo) <=1 &&abs(PotThree - SliderValueThree) <=1 ) { // Red setColor(255, 0, 0); } else if (abs(PotOne - SliderValueOne) <=3 &&abs(PotTwo - SliderValueTwo) <=3 &&abs(PotThree - SliderValueThree) <=3 ) { // setColor jaune (255, 255, 0); } else if (abs(PotOne - SliderValueOne) <=4 &&abs(PotTwo - SliderValueTwo) <=4 &&abs(PotThree - SliderValueThree) <=4 ) { // aqua setColor(0, 255, 255); } else { // bleu setColor(0, 0, 255); } } void blinkGreenLed() { for (int a =0; a <2; a++) { for (int b =0; b <=255; b +=5) { setColor(0, b, 0); retard (5) ; } pour (int b =255; b>=0; b -=5) { setColor(0, b, 0); retard (5) ; } } pour (int b =0; b <=255; b +=5) { setColor(0, b, 0); retard (5) ; } } // Envoie les valeurs RVB aux broches LED void setColor(int red, int green, int blue){ analogWrite(redPin, red); analogWrite(greenPin, vert); analogWrite(bluePin, bleu); }  

Ajouter le buzzer

Nous utiliserons le buzzer pour jouer une mélodie à l'ouverture de la boîte. Plus précisément, nous jouerons la chanson thème de Star Wars !

Le branchement du buzzer est simple :

Téléchargez cet exemple de code et écoutez :

const int c =261 ; const int d =294 ; const int e =329 ; const entier f =349 ; const entier g =391 ; const int gS =415 ; const int a =440 ; const int aS =455 ; const entier b =466 ; const int cH =523; const int cSH =554 ; const int dH =587; const int dSH =622 ; const int eH =659; const int fH =698; const int fSH =740 ; const int gH =784; const int gSH =830 ; const int aH =880 ; compteur entier =0 ; #define buzzerPin 1 void setup() { pinMode(buzzerPin, OUTPUT); Serial.begin(9600); } boucle vide() { play_jingle(); retard (3000); } void play_jingle() { bip(a, 500); bip (a, 500) ; bip (a, 500) ; bip (f, 350); bip (ch, 150); bip (a, 500) ; bip (f, 350); bip (ch, 150); bip (a, 650); retard (500); bip (eH, 500); bip (eH, 500); bip (eH, 500); bip (fH, 350); bip (ch, 150); bip (gS, 500); bip (f, 350); bip (ch, 150); bip (a, 650); retard (500); } void beep(int note, int duration) { //Jouer la tonalité sur buzzerPin tone(buzzerPin, note, duration); //Arrêter la tonalité sur buzzerPin noTone(buzzerPin); retard (50); //Incrémenter le compteur ++; }  

Ajouter le servomoteur

Le servomoteur est la serrure de notre box, nous aurons besoin qu'il tourne à 90 degrés lorsque la combinaison est correcte, pour que la box s'ouvre.

La connexion du servo ne nécessite que trois fils.

Pour le faire pivoter de 90 degrés, nous utiliserons les fonctions suivantes :

#include  int pos =0 ; // variable pour stocker la position du servo Servo myservo; // crée un objet servo pour contrôler un servo void setup() { myservo.attach(9); // attache le servo sur la broche 9 à l'objet servo myservo.write(pos); // met le servo en position 0 } void loop() { open_the_box(); retard (2000); close_the_box(); retard (2000); } void open_the_box(){ for (pos =0; pos <=90; pos +=1) { // passe de 0 degrés à 90 degrés myservo.write(pos); // dit au servo de se positionner dans la variable 'pos' delay(15); // attend 15ms que le servo atteigne la position } } void close_the_box(){ for (pos =90; pos>=0; pos -=1) { // passe de 90 degrés à 0 degrés myservo.write(pos); // dit au servo de se positionner dans la variable 'pos' delay(15); // attend 15ms que le servo atteigne la position } }  

A noter que pour retourner le servo et fermer le boitier il vous suffira de remettre tous les potentiomètres à 0.

Construisez votre boîte de puzzle

Ce ne serait pas une boîte sans une boîte, alors téléchargez le dossier ci-dessous et utilisez-le comme guide pour créer la vôtre.

A noter que nous avons utilisé un carton de 2mm.

Code

Esquisse complète

Pièces et boîtiers personnalisés

Schémas