- Repositorio de un temporizador físico de concentración basado en ESP32, que implementa un flujo de trabajo y descanso estilo Pomodoro usando una pantalla ePaper y un dial rotatorio como dispositivo de entrada
- El código no se puede usar directamente porque se eliminaron algunos assets y fuentes, pero se puede modificar según las necesidades propias si hace falta
- El hardware está compuesto por un ESP32, un WaveShare 4.26inch 800x480 e-Paper HAT, un encoder rotatorio KY-040, un LED WS2812, un conector USB-C, una carcasa impresa en 3D, resistencias y capacitores
- Como ePaper no tiene retroiluminación, reduce las distracciones durante el trabajo, y el modelo de 4.26 pulgadas admite refresco parcial de 0.3 segundos, lo que evita el parpadeo negro/blanco al actualizar
- El software usa C++ con el framework Arduino, PlatformIO y la biblioteca GxEPD2, y ofrece funciones como selección de presets, notificaciones LED, estadísticas de descanso y repetición de descansos largos
Descripción general del proyecto
- Este repositorio contiene código y materiales de diseño para un temporizador de concentración basado en ESP32
- La entrada usa un dial rotatorio, y la visualización se maneja con una pantalla ePaper
- El código del repositorio no está listo para usarse de inmediato porque se eliminaron algunos assets y fuentes
- Si hace falta, se puede modificar el código según los requisitos propios
- El producto terminado también se puede ver en MakerWorld
Componentes usados
- Componentes principales:
- ESP32, por ejemplo AZDelivery ESP32 NodeMCU
- WaveShare 4.26inch e-Paper display HAT, 800x480
- Otras pantallas podrían funcionar, pero la UI fue diseñada para esta resolución
- Encoder rotatorio KY-040 con botón
- 1 LED WS2812
- Se puede reemplazar por un LED RGB simple
- Conector USB-C
- Si se usa un conector USB-C de 2 hilos, podría requerirse un cable USB-A a USB-C para suministrar energía
- Carcasa impresa en 3D
- Resistencia para el LED, resistencia pull-up para el interruptor y capacitores de 0.1uF para suavizar la señal del encoder rotatorio
- Como componentes opcionales, se pueden usar contrapesos para balanceo de llantas y patas de goma
Motivación y objetivos de diseño
- El proyecto empezó con el objetivo de crear un temporizador de concentración para un amigo
- Al creador le gusta probar técnicas de productividad y tiene la costumbre de dedicar alrededor de un mes al año a un proyecto que pueda ayudar a otra persona
- Después de comprar una impresora 3D BambuLab X1C, quería aprovecharla; y, por su experiencia de haber completado una formación en electrónica antes de pasar a la ingeniería de software, quería crear un dispositivo físico
- Los objetivos de diseño eran tres:
- Que fuera un dispositivo físico
- Que fuera divertido
- Que fuera intuitivo de usar
- Existían ejemplos como el proyecto Focus Dial by Salim Benbouziyane, pero quería construirlo desde cero
Razones para elegir los componentes
-
ESP32
- Era su segundo intento de hacer algo con un microcontrolador después de mucho tiempo, y como ya conocía el ESP32, le resultó cómodo retomar
- Hizo una investigación previa para confirmar la compatibilidad con la pantalla
-
Pantalla ePaper
- La guía de cableado de la pantalla está en
docs/display_wiring.md
- Uno de los objetivos principales del proyecto era que el dispositivo no interrumpiera el flujo de trabajo, y para eso quería una pantalla sin retroiluminación
- Necesitaba una pantalla lo bastante grande como para poder leerla sobre el escritorio
- Después de pedir y probar varias pantallas ePaper de WaveShare, eligió el modelo de 4.26 pulgadas
- Tiene buena resolución
- El tamaño es adecuado
- Admite refresco parcial, con un tiempo de refresco de 0.3 segundos
- No tiene el molesto parpadeo negro/blanco durante el refresco
- Al principio quería usar una pantalla en blanco, negro y rojo, pero el modelo que le gustaba tenía un tiempo de refresco de 16 segundos y no admitía refresco parcial, así que lo descartó
- Como no tiene retroiluminación, si el escritorio no está suficientemente iluminado es difícil leer la pantalla de noche, y esto se considera “una función, no un bug”
-
Encoder rotatorio
- Le pareció que usar un dial como dispositivo de entrada era lo más natural
- La entrada por dial complica más el diseño de los menús y requiere manejar correctamente el debounce de entrada
- Se agregaron capacitores de 0.1uF a los pines CLK y DT para suavizar la señal
-
LED
- En las primeras iteraciones no había planes de incluir un LED
- La pantalla sin retroiluminación podía sentirse demasiado sutil cuando terminaba un bloque de concentración
- Se probaron varias alternativas como medio de notificación
- El buzzer no ofrecía una buena experiencia porque sobresaltaba al usuario
- El parlante tenía mucho ruido y zumbidos en la configuración probada
- El LED WS2812 permitía crear animaciones con la biblioteca NeoPixel y era fácil de usar
- El LED WS2812 también tenía la ventaja de no requerir muchos pines de salida adicionales
- Finalmente, el LED funcionó bien para mostrar varios estados, y a la carcasa se le agregó una pequeña pantalla/cubierta y una capa difusora para que el LED se viera mejor
Carcasa y diseño físico
- La carcasa está compuesta por dos partes: base y tapa
- Debido al diseño en el que el marco de la pantalla se imprime como parte de la base en una sola pieza, durante la impresión hubo un problema de ligera deformación en los bordes superiores
- La decisión de colocar el dial al frente fue un punto mejorable
- Como la pieza impresa y los componentes electrónicos son livianos, al presionar el interruptor del dial el dispositivo completo puede desplazarse hacia atrás
- Se solucionó agregando patas de goma y contrapesos de balanceo de llantas en la parte inferior
Configuración del software
- El software está escrito en C++ y usa el framework Arduino
- La gestión del proyecto se hace con PlatformIO
- La pantalla depende en gran medida de la biblioteca GxEPD2
- El código del repositorio está algo desordenado, con copiado y pegado y código anterior sin limpiar, para poder terminar dentro del plazo
- Parte del código fue generado con IA, principalmente Claude, para cumplir con la fecha límite del proyecto
- Como era un proyecto para un amigo, también incluye easter eggs y elementos divertidos
- Incluye una función que muestra datos aleatorios en la pantalla durante la concentración
Flujo de uso del dispositivo
- Cuando el dispositivo se inicia, se puede cambiar la configuración o entrar al modo de selección de presets
- Se elige uno de tres presets
- El temporizador arranca y, cuando termina el tiempo, el LED parpadea y se muestra un mensaje en pantalla
- El usuario puede seguir trabajando o iniciar un descanso después
- Durante el descanso se pueden ver estadísticas
- Con los valores predeterminados, cada 4 ciclos se otorga un descanso más largo
Desarrollo y personalización
- Herramientas necesarias para el desarrollo:
- PlatformIO
- Se usa la extensión de VSCode
- Python 3.13 o superior para regenerar assets
- Para preparar imágenes, íconos y fuentes, se debe ejecutar el script
generate_assets.py
- Redimensiona imágenes
- Convierte al formato correcto
- Genera código C++ para incluir en el proyecto
- Ejemplo de ejecución:
uv sync
uv run scripts/generate_assets.py
- Los presets están definidos en
src/main.cpp
- Ejemplos de presets predeterminados: Emails, Coding, Focus
- Emails: 15 minutos de concentración, 5 minutos de descanso, 15 minutos de descanso largo
- Coding: 45 minutos de concentración, 15 minutos de descanso, 30 minutos de descanso largo, 2 repeticiones
- Focus: 25 minutos de concentración, 5 minutos de descanso, 20 minutos de descanso largo
Mapeo de pines
- Encoder rotatorio KY-040:
- Pantalla ePaper WaveShare de 4.26 pulgadas en blanco y negro:
- BUSY: 4
- RST: 16
- DC: 17
- CS: 5
- CLK: 18
- DIN: 23
- LED WS2812:
1 comentarios
Comentarios de Hacker News
Al menos para mí, eso importa. Le puse al medidor eléctrico un dispositivo con un ESP32 y un fotoresistor para medir el parpadeo del contador y volverlo “inteligente”; es tosco, pero funciona bien. Cada vez que voy al garaje y veo parpadear ese aparatito, me da gusto y me dan más ganas de seguir con el siguiente proyecto. Me da la seguridad de que puedo hacer cosas, tener éxito y mejorar en la vida
Puede sonar tonto, pero así es como recibo también el proyecto del post original
Si estás programando una pantalla eInk y un microchip para corregir tu hábito de procrastinar, entonces deberías pausar ese proyecto, comprar un temporizador físico y hacer lo que tienes que hacer
Si te dan ganas de ponerte a comprar y comparar temporizadores antes de trabajar, te ahorro la búsqueda. Este también funciona bien: https://www.amazon.com/dp/B07TLC9SFZ aunque en realidad cualquiera sirve
Ve y haz esa tarea. Vale la pena
Pero el post original dice claramente que es un proyecto para hacer algo para un amigo y probar herramientas nuevas
Un proyecto de hacking divertido no tiene que satisfacer una demanda real del mercado. Puede ser solo por diversión
[0] https://www.amazon.com/product-reviews/B07H59ZL1L/ref=acr_se...
En lo personal, me gusta este diseño de temporizador de disco: https://m.media-amazon.com/images/I/618WCXnyfXL.SL1500.jpg
Si buscas un proyecto para hackatón, el ecosistema E-ink ya está bastante maduro y es fácil de programar, y una IA como Claude también entiende bien la superficie de su API. En general, la gente no sabe qué está viendo, así que hay que describirlo como “una pantalla tipo Kindle”, pero en la sala prefiero las pantallas e-ink a las pantallas con retroiluminación. Molestan mucho menos
Por cierto, E-ink [0] y Pomodoro [1] son dos temas en los que he profundizado bastante
[0] https://sambroner.com/posts/raspberry-pi-train
[1] https://sambroner.com/posts/personal-analytics-2024
Me gusta mucho la elección de la pantalla, y también que en el README se explique bien el propósito y la usabilidad
Tengo algunas ideas sobre el diseño del objeto en sí. A mí también me cuesta mucho esta parte, y le dedico mucho tiempo a iterar y mejorar. Si la perilla estuviera arriba, más ancha y plana, podrías poner la pantalla al centro y hacer el dispositivo más pequeño, además de reducir la posibilidad de que la caja se deslice al girarla. Los chaflanes y bordes redondeados elevan mucho la sensación de acabado. La diferencia entre esquinas filosas y redondeadas parece un detalle menor, pero se siente bastante
Si el menú siempre tiene tres opciones, me pregunto si en lugar de la perilla no convendría poner tres botones arriba, como el botón de “snooze” de un despertador. Habría menos interacción. Si usas filamento translúcido, también podrías hacer piezas geniales tipo “guía de luz”. Por ejemplo, si hicieras la caja del LED de una sola pieza, podría dar una vibra de tablero ochentero. O podrías imprimir el marco de la pantalla e iluminar esa parte para lograr un diseño más minimalista
No lo puedo evitar, me encanta pensar en estas cosas. Me da curiosidad cómo diseñaste la perilla. ¿Fue en OpenSCAD? El moleteado se ve bien y parece generado de forma programática
Si volviera a diseñar la perilla, probablemente la movería arriba. Todo el cronograma de este proyecto fue de 4 semanas, y cuando surgió el problema del peso no me sentía con la confianza de rehacer la carcasa e imprimir otro prototipo, pero sin duda habría quedado mejor así
Puse redondeos/chaflanes en casi todos los bordes, e imprimí la carcasa final con fuzzy skin para que se sintiera más premium
La idea original de la perilla también contemplaba cambiar la duración del temporizador, así que una rueda me parecía adecuada. Al final no quedó así, por lo que para el menú actual tres botones podrían dar una mejor UX. Y el dispositivo también sería más pequeño
La visera empezó originalmente para evitar fugas de luz, y después la reimprimí en blanco junto con una película plástica difusora para mejorar un poco la difusión del LED. Me gusta la idea de poner una tira de LEDs en el borde de la pantalla. No se me había ocurrido
Normalmente uso más Blender, así que seguí un tutorial para hacer el moleteado en Onshape. A esa herramienta no le gusta mucho ese tipo de geometría y se pone lenta al trabajar, pero puedes revisar libremente el archivo de Onshape enlazado en el README
Para quienes vienen empezando, estaría bien añadir en el texto que Pomodoro originalmente tomó su nombre de un temporizador físico con perilla giratoria y codificador rotatorio
https://medium.com/@thejinxes/ditch-the-tomato-timer-d8bbf01...
Si algún día logra usar una pantalla e-ink roja como quería, parece que sería una alternativa divertida a Pepe.
[0] - https://github.com/lvgl/lvgl
He usado la app Visual Timer [0] en Android y en general ha sido excelente, pero obviamente sería mejor si pudiera guardar el teléfono.
[0] https://play.google.com/store/apps/details?id=at.cwiesner.an...
Para mí, la mejor UX para la técnica Pomodoro está justo en ese temporizador de cocina físico.
Pero para hacer algo así tuve que enfrentar los límites de mis conocimientos y habilidades, y también quería intentarlo a mi manera. Además, al final me terminó encantando esa pantalla de papel electrónico.
Actualización: aquí está https://github.com/robertolupi/augmented-awareness/tree/main...
Para quienes lo usan en una oficina, o para quienes no quieren estar mirando una pantalla para ver cuánto tiempo queda, los indicadores LED en la parte superior del dispositivo podrían ser útiles. Podrían encenderse en rojo o verde como una barra de luz elegante para que alguien del otro lado, que no puede ver la pantalla, sepa si puede interrumpirte en ese momento. Si quieres, incluso podría hacerse como una barra de progreso luminosa.