Carte de visite/Console de jeu : ATtiny85 et écran OLED : 5 étapes (avec photos)

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

Salut à tous

Aujourd'hui, je vais vous montrer comment créer votre propre carte de visite/console de jeu/tout ce que vous pouvez imaginer qui comprend un écran I2C OLED rétroéclairé et un microprocesseur ATtiny85. Dans ce Instructable, je vais vous dire comment fonctionne réellement un PCB que j'ai conçu, comment vous pouvez le construire et ce que vous pouvez faire avec cette fonctionnalité. Si vous avez déjà un écran I2C connecté à un ATtiny85, ce Instructable peut toujours être utile si vous essayez d'afficher des images ou si vous souhaitez créer des menus, un jeu, etc.

Vous vous demandez probablement ce qu'est réellement cette chose. C'est juste une simple carte de circuit imprimé avec une batterie intégrée, un écran, des boutons, un interrupteur marche/arrêt et une unité de traitement. Considérez-le comme un petit Gameboy, que vous pouvez facilement programmer pour faire une variété de choses. En avant!

Étape 1: les tripes

Si vous ne l'avez pas déjà fait, je vous recommande fortement de créer un compte sur circuits.io. Cela vous permettra de personnaliser mon design en fonction de vos besoins.

Dans cette étape, j'expliquerai comment vous pouvez réellement mettre la main sur l'une de ces cartes de circuits imprimés (PCB). J'ai créé mon PCB dans circuits.io, un excellent outil en ligne que vous pouvez utiliser pour créer des schémas de circuits et des PCB. Vous pouvez voir le design ici:

Si vous souhaitez obtenir le PCB, vous pouvez en commander autant que vous le souhaitez auprès d'OSH Park en utilisant ce lien:

Il faut un certain temps pour obtenir les planches (1 à 3 semaines), mais croyez-moi. Ça en vaut la peine! Vous aurez besoin des pièces suivantes pour créer votre propre carte multifonctionnelle:

• ATtiny85 dans le package SOIC-8. C'est le cerveau de notre projet qui contrôle TOUT.
• Écran OLED I2C 128x64 pixels:
• 2 résistances de 22k ohms. Ce sont des résistances de pullup pour les boutons.
• Support CR2032 à montage en surface:
• Pile bouton CR2032. Cette petite batterie peut alimenter le circuit pendant un certain temps.
• Interrupteur à glissière à 3 broches. C'est l'interrupteur d'alimentation !
• En-têtes féminins. Vous pouvez les utiliser pour programmer l'ATtiny85 pendant qu'il est dans le circuit !
• Boutons 6 mm:
• Un circuit imprimé (vous pouvez le commander en utilisant le lien ci-dessus

Outils:

• Fer à souder (avec une pointe fine)
• Souder
• Coupe-plombs

Pour programmer l'ATtiny85:

• 6 fils de liaison mâle à mâle
• Un condensateur de 10 microfarads
• Arduino Uno ou un autre microcontrôleur basé sur ATmega

Étape 2: Assemblage du PCB

C'est vraiment assez facile. Tout ce que vous avez à faire est de souder tous les composants à leurs emplacements respectifs, comme indiqué sur la carte. Certains de ces écrans OLED sont disponibles en différentes tailles, donc si le vôtre est trop grand pour la carte, vous pouvez le faire pendre par-dessus comme dans l'image ci-dessus, et vous pencher sur les en-têtes de l'autre côté et les souder aux trous où ils étaient censés partir. Voir la deuxième image si vous êtes confus.

Quelques conseils utiles:

• Le petit point sur l'ATtiny doit être orienté de manière à ce qu'il soit proche de l'interrupteur à glissière, sinon vous aurez les broches dans le mauvais ordre.
• L'orientation du support de batterie est importante. L'extrémité du support avec le plus gravé doit être sur le tampon inférieur (pointé vers une résistance).
• L'orientation des commutateurs, des boutons, des en-têtes et des résistances n'a pas d'importance

Si vous avez des questions, veuillez m'envoyer un e-mail à info[at]coniferapps.com

Étape 3: Il est temps de programmer

J'ai fait fonctionner mon combo ATtiny/screen en utilisant l'Instructable suivant: https://www.instructables.com/id/ATTiny85-connects-to-I2C-OLED-display-Great-Things/. En fait, j'utilise même la bibliothèque qu'AndyB2 a modifiée dans mes propres croquis.

La façon dont nous allons programmer l'ATtiny se fait via un Arduino Uno. L'Instructable suivant vous montre comment procéder: https://www.instructables.com/id/Program-an-ATtiny-with-Arduino/. Si vous ne l'avez pas déjà remarqué, toutes les broches requises sont utilement réparties sur le PCB avec les numéros de broches étiquetés au dos.

Si vous souhaitez commencer avec un exemple de base, téléchargez le croquis lié ci-dessus sur votre carte. Assurez-vous que l'interrupteur d'alimentation est déplacé vers la droite avant de faire cela. Vous ne voulez pas que la batterie et l'Uno fournissent toutes les deux de la tension en même temps ! Dans ce dossier se trouve un tas de fichiers. J'en parlerai plus à l'étape suivante, mais la plupart des fichiers d'en-tête qu'il contient sont des représentations hexadécimales d'images bitmap monochromatiques. Les fichiers.bmp sont ces images que je viens de mentionner - comme vous pouvez le voir, elles sont en noir et blanc et exactement 128x64 pixels. Ceux-ci ne sont pas téléchargés sur le microcontrôleur, mais j'ai pensé les inclure à titre de référence.

Étape 4: À propos du programme lui-même

Le croquis que je vous ai fait télécharger à l'étape précédente est un exemple très basique de la façon dont vous pouvez implémenter un menu. Lorsque vous cliquez sur chacun des boutons gauche et droit, il bascule un compteur dans le programme. Une fonction est alors appelée et l'ATtiny vérifie l'état de ce compteur et, en fonction du numéro du compteur, l'ATtiny dessine une image de l'option de menu actuellement sélectionnée à l'écran. Chacune des différentes cellules de menu sélectionnées est sa propre image. Si le bouton du haut est enfoncé, l'ATtiny vérifie à nouveau l'état du compteur pour déterminer quel écran de détail afficher. Pendant que ces écrans détaillés sont affichés, l'ATtiny vérifie constamment si un bouton est enfoncé. Une fois qu'il détecte une pression sur un bouton, la fonction qui dessine les menus est appelée à nouveau et l'état actuel du menu est dessiné à l'écran, nous ramenant dans le menu. Cela semble un peu intimidant si vous débutez en programmation, mais je vous promets qu'une fois que vous aurez regardé le code, cela aura plus de sens.

Chacun des écrans de détail est également sa propre image.

Si vous ne l'avez pas remarqué, l'option surprise ne fait rien. Nous y reviendrons à l'étape suivante:).

Étape 5: personnalisation de votre création

Maintenant que vous avez vu ce que j'ai fait, il est temps pour vous de personnaliser la carte avec vos propres informations. Cette bibliothèque que j'ai incluse a une fonction pour dessiner du texte à l'écran, mais je vous recommande fortement d'opter pour une solution strictement basée sur l'image, car elle a tendance à être BEAUCOUP meilleure. J'allais à l'origine ajouter des photos à la partie programme de cette instructable, mais c'est assez long pour justifier son propre instructable. Vous pouvez le voir ici:

Maintenant que vous savez comment ajouter des photos, vous pouvez faire en sorte que la carte fasse un tas de choses. Vous pouvez utiliser mes menus et mon écran d'aide, et simplement ajouter vos propres informations de contact. Vous pouvez même faire un petit jeu pour l'option "surprise". Il serait assez simple de déplacer un très petit sprite 10x10 autour de l'écran à l'aide des boutons et de vérifier s'il entre en collision avec un autre sprite. Vous pourriez faire un clone d'oiseau flappy en utilisant ce même concept ! Si vous faites quelque chose, merci de poster une photo/vidéo/fichier dans les commentaires !

Encore un petit point que j'ai oublié de mentionner. En ce qui concerne le stockage, l'ATtiny85 n'en a pas beaucoup. Pour les programmes, c'est environ 8ko. Mon croquis actuel avec 5 images et une bibliothèque d'affichage OLED occupe environ 7 de ces 8 Ko. Tout jeu que vous créez devra tenir dans cette marge relativement petite, ce sera donc un défi amusant:).

Merci de m'avoir écouté et si vous avez des questions, n'hésitez pas à m'envoyer un e-mail à info[at]coniferapps.com (remplacez [at] par @). Veuillez voter pour moi au concours Autodesk Circuits ! J'espère que vous aurez bientôt votre propre carte de visite/jeu à montrer !