Tarjeta de visita / consola de juegos: ATtiny85 y pantalla OLED: 5 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

¡Hola a todos

Hoy le mostraré cómo puede construir su propia tarjeta de presentación / consola de juegos / cualquier cosa que pueda imaginar que cuente con una pantalla OLED I2C retroiluminada y un microprocesador ATtiny85. En este Instructable, te diré cómo funciona realmente un PCB que diseñé, cómo puedes construirlo y qué puedes hacer con esta funcionalidad. Si ya tiene una pantalla I2C conectada a un ATtiny85, este Instructable aún puede ser útil si está tratando de obtener imágenes para mostrar o si desea crear menús, un juego y más.

Probablemente se esté preguntando qué es esto en realidad. Es solo una simple placa de circuito impreso con una batería integrada, pantalla, botones, interruptor de encendido / apagado y unidad de procesamiento. Piense en ello como un pequeño Gameboy, que puede programar fácilmente para hacer una variedad de cosas. ¡Adelante!

Paso 1: las tripas

Si aún no lo ha hecho, le recomiendo que cree una cuenta en circuits.io. Esto le permitirá personalizar mi diseño para adaptarlo a sus necesidades.

En este paso, explicaré cómo puede tener en sus manos una de estas placas de circuito impreso (PCB). Hice mi PCB en circuits.io, una gran herramienta en línea que puede usar para crear esquemas de circuitos y PCB. Puede ver el diseño aquí:

Si está interesado en obtener el PCB, puede pedir tantos como desee en OSH Park usando este enlace:

Lleva un tiempo conseguir las tablas (de 1 a 3 semanas), pero confía en mí. ¡Vale la pena! Necesitará las siguientes partes para construir su propia tarjeta multifuncional:

• ATtiny85 en paquete SOIC-8. Este es el cerebro de nuestro proyecto que controla TODO.
• Pantalla OLED I2C de 128x64 píxeles:
• 2 resistencias de 22k ohmios. Estas son resistencias pullup para los botones.
• Soporte CR2032 de montaje en superficie:
• Batería de celda de moneda CR2032. Esta pequeña batería puede alimentar el circuito durante bastante tiempo.
• Interruptor deslizante de 3 pines. ¡Este es el interruptor de encendido!
• Encabezados femeninos. ¡Puede usarlos para programar el ATtiny85 mientras está en el circuito!
• Botones de 6 mm:
• Una placa de circuito impreso (puede solicitarla utilizando el enlace de arriba

Instrumentos:

• Soldador (con punta fina)
• Soldar
• Clippers de plomo

Para programar el ATtiny85:

• 6 cables de puente macho a macho
• Un condensador de 10 micro-faradios
• Arduino Uno o algún otro microcontrolador basado en ATmega

Paso 2: Montaje de la PCB

Esto es realmente muy sencillo. Todo lo que necesita hacer es soldar todos los componentes en sus respectivos lugares, como se indica en la placa. Algunas de estas pantallas OLED vienen en diferentes tamaños, por lo que si la suya es demasiado grande para la placa, puede hacer que cuelgue sobre la parte superior como en la imagen de arriba, y doblar los encabezados en el otro lado y soldarlos a los agujeros donde se suponía que iban a ir. Vea la segunda imagen si está confundido.

Algunos consejos útiles:

• El pequeño punto en el ATtiny debe orientarse de modo que esté cerca del interruptor deslizante, de lo contrario, tendrá los pines en el orden incorrecto.
• La orientación del soporte de la batería es importante. El extremo del soporte con el plus grabado debe estar en la almohadilla inferior (apuntando hacia una resistencia).
• La orientación de interruptores, botones, encabezados y resistencias no importa

Si tiene alguna pregunta, envíeme un correo electrónico a info [at] coniferapps.com

Paso 3: ¡Es hora de empezar a programar

Obtuve mi combo ATtiny / screen funcionando usando el siguiente Instructable: https://www.instructables.com/id/ATTiny85-connects-to-I2C-OLED-display-Great-Things/. De hecho, incluso utilizo la biblioteca que AndyB2 modificó en mis propios bocetos.

La forma en que vamos a programar el ATtiny es a través de un Arduino Uno. El siguiente Instructable le muestra cómo hacer esto: https://www.instructables.com/id/Program-an-ATtiny-with-Arduino/. Si aún no lo ha notado, todos los pines necesarios están divididos en la PCB con los números de los pines etiquetados en la parte posterior.

Si desea comenzar con un ejemplo básico, cargue el boceto vinculado anteriormente a su tarjeta. Asegúrese de que el interruptor de encendido se mueva hacia la derecha antes de hacer esto. ¡No querrás que la batería y el Uno suministren voltaje al mismo tiempo! En esa carpeta hay un montón de archivos. Hablaré de esto más en el siguiente paso, pero la mayoría de los archivos de encabezado son representaciones hexadecimales de imágenes de mapa de bits monocromáticas. Los archivos.bmp son estas imágenes que acabo de mencionar; como puede ver, son en blanco y negro y tienen exactamente 128x64 píxeles. Estos no se cargan en el microcontrolador, pero pensé en incluirlos como referencia.

Paso 4: Acerca del programa en sí

El boceto que te hice subir en el paso anterior es un ejemplo muy básico de cómo podrías implementar un menú. Al hacer clic en cada uno de los botones izquierdo y derecho, cambia un contador en el programa. A continuación, se llama a una función que hace que ATtiny compruebe el estado de este contador y, basándose en el número del contador, ATtiny dibuja una imagen de la opción de menú actualmente seleccionada en la pantalla. Cada una de las diferentes celdas de menú seleccionadas es su propia imagen. Si se presiona el botón superior, ATtiny nuevamente verifica el estado del contador para determinar qué pantalla de detalles mostrar. Mientras se muestran estas pantallas de detalles, ATtiny verifica constantemente para ver si se presiona algún botón. Una vez detecta una pulsación de botón, se vuelve a llamar a la función que dibuja los menús y se dibuja en pantalla el estado actual del menú, llevándonos de nuevo al menú. Suena algo abrumador si eres nuevo en la programación, pero te prometo que una vez que mires el código, tendrá más sentido.

Cada una de las pantallas de detalle es también su propia imagen.

Si no lo ha notado, la opción sorpresa no hace nada. Llegaremos a esto en el siguiente paso:).

Paso 5: personalización de su creación

Ahora que ha visto lo que hice, es hora de que personalice la tarjeta con su propia información. Esa biblioteca que incluí tiene una función para dibujar texto en la pantalla, pero le recomiendo que elija una solución estrictamente basada en imágenes, ya que tiende a verse MUCHO mejor. Originalmente iba a hacer que agregar fotos al programa fuera parte de este instructable, pero es lo suficientemente largo como para justificar su propio instructable. Puede verlo aquí:

Ahora que sabe cómo agregar fotos, hay un montón de cosas que puede hacer con la tarjeta. Puede usar mis menús y la pantalla de ayuda, y simplemente agregar su propia información de contacto. Incluso podrías hacer un pequeño juego para la opción "sorpresa". Sería bastante sencillo mover un objeto muy pequeño de 10x10 por la pantalla usando los botones y comprobar si choca con otro objeto. ¡Podrías hacer un clon de pájaro flappy usando este mismo concepto! Si haces algo, ¡publica una foto / video / archivo en los comentarios!

Solo un pequeño punto más que olvidé mencionar. En lo que respecta al almacenamiento, el ATtiny85 no tiene mucho. Para los programas, es de aproximadamente 8 kb. Mi boceto actual con 5 imágenes y biblioteca de pantallas OLED ocupa aproximadamente 7 de esos 8kb. Cualquier juego que hagas tendrá que caber dentro de este margen relativamente pequeño, por lo que será un desafío divertido:).

Gracias por escucharme divagar, y si tiene alguna pregunta, no dude en enviarme un correo electrónico a info [at] coniferapps.com (reemplace [at] por @). ¡Vota por mí en el concurso de circuitos de Autodesk! ¡Esperamos que pronto tengas tu propia tarjeta de presentación / juego para presumir!