DIY Comment faire une montre cool - StickC - Facile à faire : 8 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Dans ce tutoriel, nous allons apprendre à programmer ESP32 M5Stack StickC avec Arduino IDE et Visuino pour afficher une heure sur l'écran LCD et également régler l'heure à l'aide des boutons StickC.

Étape 1: ce dont vous aurez besoin

M5StickC ESP32: vous pouvez l'obtenir ici

Programme Visuino: Télécharger Visuino

Remarque: consultez ce tutoriel ici pour savoir comment installer la carte StickC ESP32

Étape 2: Démarrez Visuino et sélectionnez le type de carte M5 Stack Stick C

Démarrez Visuino comme indiqué dans la première image Cliquez sur le bouton "Outils" sur le composant Arduino (Image 1) dans Visuino Lorsque la boîte de dialogue apparaît, sélectionnez "M5 Stack Stick C" comme indiqué sur l'image 2

Étape 3: Dans Visuino, ajoutez des composants

1. Cliquez sur le tableau "M5 Stack Stick C" pour le sélectionner
2. Dans la fenêtre "Propriétés", sélectionnez "Modules" et cliquez sur "+" pour développer,
3. Sélectionnez "Afficher ST7735" et cliquez sur "+" pour le développer,
4. Réglez "Orientation" sur "goRight"
5. Définissez "Couleur d'arrière-plan" sur "ClBlack"
6. Sélectionnez "Éléments" et cliquez sur le bouton bleu avec 3 points…
7. La boîte de dialogue Éléments s'affichera
8. Dans la boîte de dialogue Éléments, faites glisser « Champ de texte » de la droite vers la gauche

9. Cliquez sur le "Champ de texte1" sur le côté gauche pour le sélectionner, puis dans la "fenêtre Propriétés", cliquez sur "Couleur" et réglez-le sur "aclWhite" et cliquez sur "Fill Color" et réglez-le sur "aclBlack" (Vous peut jouer avec les couleurs si tu veux)

   -également dans les fenêtres de propriétés, définissez X:10 et Y:20, c'est ici que vous souhaitez afficher l'heure sur l'écran LCD.

10. Ajouter le composant "Décoder (Split) Date/Time"
11. Ajouter un composant "Texte formaté"

Étape 4: Dans Visuino Set Composants

1. Sélectionnez le composant "FormattedTxt1" et sous la fenêtre "Propriétés", définissez "Texte" sur: %0:%1:%2
2. Double-cliquez sur le composant "FormattedText1" et dans la boîte de dialogue Éléments, faites glisser 3x "Texte" vers la gauche
3. Sélectionnez la carte « M5 Stack Stick C » et dans la fenêtre « Propriétés », sélectionnez « Modules » > « Réveil en temps réel (RTC) » > « Éléments »
4. Cliquez sur le bouton bleu avec 3 points et dans la boîte de dialogue Éléments, faites glisser "Définir l'heure", "Définir les minutes" et "Définir la seconde" sur le côté gauche
5. Sélectionnez à gauche l'élément "Définir l'heure1" et sous la fenêtre "Propriétés", définissez "Ajouter une valeur" sur "Vrai" et "Valeur" sur "1"
6. Sélectionnez à gauche l'élément "Set Minute1" et sous la fenêtre "Properties", définissez "Add Value" sur "True" et "Value" sur "1"
7. Sélectionnez à gauche l'élément "Set Second1" et sous la fenêtre "Properties", définissez "Add Value" sur "True" et "Value" sur "1"

Explication:

"Valeur" signifie combien nous voulons ajouter à chaque clic d'un bouton à l'heure existante (heures, minutes ou secondes) "Ajouter de la valeur" signifie que nous voulons ajouter la valeur à l'heure existante

Étape 5: dans les composants Visuino Connect

1. Connectez "M5 Stack Stick C"> Réveil en temps réel (RTC)> Broche [Sortie] à la broche du composant "DecodeDateTime1" [Entrée]
2. Connectez la broche du composant "DecodeDateTime1" [Hour] à la broche "TextElement1" du composant "FormattedText1" [In]
3. Connectez la broche du composant "DecodeDateTime1" [Minute] à la broche "TextElement2" du composant "FormattedText1" [In]
4. Connectez la broche du composant "DecodeDateTime1" [Second] à la broche "TextElement3" du composant "FormattedText1" [In]
5. Connectez la broche du composant "FormattedText1" [Out] à la carte "M5 Stack Stick C" "Display ST7735"> "Text Field1" broche [In]
6. Connectez "M5 Stack Stick C" > Boutons "A (M5)" à "M5 Stack Stick C" > Réveil en temps réel (RTC) > Broche "Set Hour1" [Clock]
7. Connectez "M5 Stack Stick C"> Boutons "B" à "M5 Stack Stick C"> Réveil en temps réel (RTC)> Pin "Set Minute1" [Clock]

Étape 6: générer, compiler et télécharger le code Arduino

1. Dans Visuino, en bas, cliquez sur l'onglet "Build", assurez-vous que le bon port est sélectionné, puis cliquez sur le bouton "Compiler/Build and Upload".

Étape 7: Jouez

Si vous alimentez le module M5Sticks, l'écran devrait commencer à afficher l'heure. Vous pouvez modifier l'heure à l'aide des boutons "M5" pour les heures et "B" pour les minutes

Toutes nos félicitations! Vous avez terminé votre projet M5Sticks avec Visuino. Le projet Visuino que j'ai créé pour ce Instructable est également joint, vous pouvez le télécharger ici.

Vous pouvez le télécharger et l'ouvrir dans Visuino:

Étape 8: Dans le didacticiel suivant

Dans le prochain tutoriel, je vais vous montrer comment créer une montre Cool Looking où vous pouvez régler l'heure (heures, minutes et secondes) à l'aide des boutons StickC et créer un menu simple ! Restez à l'écoute et consultez mes autres tutoriels ici.