Cartão de visita / console de jogo: ATtiny85 e tela OLED: 5 etapas (com imagens)

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:38

Olá a todos

Hoje vou mostrar como você pode construir seu próprio cartão de visita / console de jogo / qualquer coisa que você possa imaginar que possua um display I2C OLED retroiluminado e um microprocessador ATtiny85. Neste Instructable, direi como uma PCB que projetei realmente funciona, como você pode construí-la e o que você pode fazer com essa funcionalidade. Se você já tem uma tela I2C conectada a um ATtiny85, este Instructable ainda pode ser útil se você estiver tentando exibir imagens ou se quiser fazer menus, um jogo e muito mais.

Você provavelmente está se perguntando o que essa coisa realmente é. É apenas uma placa de circuito impresso simples com uma bateria interna, tela, botões, botão liga / desliga e unidade de processamento. Pense nele como um pequeno Game Boy, que você pode facilmente programar para fazer uma variedade de coisas. Avante!

Etapa 1: a coragem

Se ainda não o fez, recomendo fortemente que faça uma conta em circuits.io. Isso permitirá que você personalize meu design para atender às suas necessidades.

Nesta etapa, explicarei como você pode realmente colocar as mãos em uma dessas placas de circuito impresso (PCBs). Eu fiz meu PCB em circuits.io, uma ótima ferramenta online que você pode usar para criar esquemas de circuito e PCBs. Você pode ver o design aqui:

Se estiver interessado em obter o PCB, você pode pedir quantos quiser do OSH Park usando este link:

Demora um pouco para obter as placas (1-3 semanas), mas confie em mim. Vale a pena! Você precisará das seguintes peças para construir seu próprio cartão multifuncional:

• ATtiny85 no pacote SOIC-8. Este é o cérebro do nosso projeto que controla TUDO.
• Tela OLED de 128x64 pixels I2C:
• 2 resistores de 22k ohm. Estes são resistores pullup para os botões.
• Suporte CR2032 de montagem em superfície:
• Bateria de célula tipo moeda CR2032. Esta pequena bateria pode alimentar o circuito por algum tempo.
• Interruptor deslizante de 3 pinos. Este é o botão liga / desliga!
• Cabeçalhos femininos. Você pode usá-los para programar o ATtiny85 enquanto ele está no circuito!
• Botões de 6 mm:
• Uma placa de circuito impresso (você pode encomendá-la usando o link acima

Ferramentas:

• Ferro de soldar (com ponta fina)
• Solda
• Tesouras de chumbo

Para programar o ATtiny85:

• 6 fios de jumper macho para macho
• Um capacitor de 10 micro-farad
• Arduino Uno ou algum outro microcontrolador baseado em ATmega

Etapa 2: Montagem do PCB

Isso é realmente muito fácil. Basta soldar todos os componentes em seus respectivos locais, conforme indicado na placa. Algumas dessas telas OLED vêm em tamanhos diferentes, então se a sua for muito grande para a placa, você pode pendurá-la sobre o topo como na imagem acima e dobrar sobre os cabeçalhos do outro lado e soldá-los nos orifícios onde eles deveriam ir. Veja a segunda imagem se você estiver confuso.

Algumas dicas úteis:

• O minúsculo ponto no ATtiny precisa ser orientado de forma que fique próximo ao botão deslizante, caso contrário, você terá os pinos na ordem errada.
• A orientação do suporte da bateria é importante. A extremidade do suporte com o sinal de adição gravado precisa estar na almofada inferior (apontada para um resistor).
• A orientação de interruptores, botões, cabeçalhos e resistores não importa

Se você tiver alguma dúvida, envie um e-mail para info [at] coniferapps.com

Etapa 3: Hora de começar a programação

Minha combinação ATtiny / tela está funcionando usando o seguinte Instructables: https://www.instructables.com/id/ATTiny85-connects-to-I2C-OLED-display-Great-Things/. Na verdade, eu até uso a biblioteca que AndyB2 modificou em meus próprios esboços.

A forma como iremos programar o ATtiny é através de um Arduino Uno. O seguinte Instructable mostra como fazer isso: https://www.instructables.com/id/Program-an-ATtiny-with-Arduino/. Se você ainda não percebeu, todos os pinos necessários estão quebrados na placa de circuito impresso com os números dos pinos identificados na parte traseira.

Se você quiser começar com um exemplo básico, carregue o esboço do link acima em seu cartão. Certifique-se de que o botão liga / desliga seja movido para a direita antes de fazer isso. Você não quer que a bateria e o Uno forneçam tensão ao mesmo tempo! Nessa pasta está um monte de arquivos. Falarei mais sobre isso na próxima etapa, mas a maioria dos arquivos de cabeçalho são representações hexadecimais de imagens de bitmap monocromáticas. Os arquivos.bmp são essas imagens que acabei de mencionar - como você pode ver, eles são preto e branco e têm exatamente 128x64 pixels. Eles não são carregados para o microcontrolador, mas pensei em incluí-los para referência.

Etapa 4: Sobre o próprio programa

O esboço que você carregou na etapa anterior é um exemplo muito básico de como você pode implementar um menu. Conforme você clica em cada um dos botões esquerdo e direito, alterna um contador no programa. É então chamada uma função que faz com que ATtiny verifique o estado desse contador e, com base no número do contador, ATtiny desenha uma imagem da opção de menu atualmente selecionada na tela. Cada uma das diferentes células de menu selecionadas é sua própria imagem. Se o botão superior for pressionado, o ATtiny verificará novamente o estado do contador para determinar qual tela de detalhes exibir. Enquanto essas telas de detalhes estão sendo exibidas, o ATtiny verifica constantemente se algum botão foi pressionado. Assim que detecta um pressionamento de botão, a função que desenha os menus é chamada novamente e o estado atual do menu é desenhado na tela, nos levando de volta ao menu. Parece um pouco assustador se você for novo em programação, mas eu prometo que, uma vez que você olhar para o código, fará mais sentido.

Cada uma das telas de detalhes também é sua própria imagem.

Se você não percebeu, a opção surpresa não faz nada. Chegaremos a isso na próxima etapa:).

Etapa 5: Personalizando Sua Criação

Agora que você viu o que fiz, é hora de personalizar o cartão com suas próprias informações. Essa biblioteca que incluí tem uma função para desenhar texto na tela, mas eu recomendo fortemente que você vá com uma solução estritamente baseada em imagens, pois tende a ter uma aparência MUITO melhor. Originalmente, eu ia tornar a adição de fotos ao programa parte deste instrutível, mas é longo o suficiente para garantir sua própria instrução. Você pode visualizá-lo aqui:

Agora que você sabe como adicionar fotos, há várias coisas que você pode fazer com o cartão. Você pode usar meus menus e tela de ajuda, e apenas adicionar suas próprias informações de contato. Você pode até fazer um pequeno jogo para a opção "surpresa". Seria bastante simples mover um sprite bem pequeno de 10x10 pela tela usando os botões e verificar se ele colide com outro sprite. Você poderia fazer um clone de flappy bird usando o mesmo conceito! Se você fizer algo, por favor poste uma foto / vídeo / arquivo nos comentários!

Só mais um pequeno ponto que esqueci de mencionar. No que diz respeito ao armazenamento, o ATtiny85 não tem muito armazenamento. Para programas, é cerca de 8kb. Meu esboço atual com 5 fotos e biblioteca de exibição OLED ocupa cerca de 7 desses 8kb. Qualquer jogo que você fizer terá que caber dentro desta margem relativamente pequena, então será um desafio divertido:).

Obrigado por me ouvir divagar e se você tiver alguma dúvida, não hesite em me enviar um e-mail para info [at] coniferapps.com (substitua [at] por @). Vote em mim no concurso Autodesk Circuits! Esperamos que em breve você tenha seu próprio cartão de visita / jogo para exibir!