[Actualización] Tachame la Lista!

En un post anterior publiqué un programa llamado Tachame la Lista! Un programa del estilo “to-do list” que vengo usando bastante.

Desde la primera versión publicada hubieron bastantes cambios:

1. Errores: Se corrigieron algunos, sobre todo relacionados con la apertura / cierre del panel lateral cuando los ítems de la lista contienen descripciones. También con algunos errores que aparecían si se intentaba borrar o marcar completado / incompleto un ítem si no había uno seleccionado.

2. Optimización del código: sobre todo en relación al uso de variables globales innecesarias o la mala costumbre de no cerrar la conexión a la base de datos tras ser accedida. Imagino que todavía hay bastante que se podría optimizar.

3. Atajos de teclado: siempre resulta más rápido y sencillo poder usar atajos de teclado simples en vez de ir y venir con el mouse. Tras abrir la aplicación podemos presionar CTRL+A para agregar un ítem a la lista. Si solamente utilizamos un título podemos presionar directamente ENTER tras escribir el ítem a agregar y este se agregará a la lista. Además, si agregamos información del ítem en la descripción podemos presionar TAB lo que ubicará el foco en el botón “Listo”, por lo que presionando ENTER o la BARRA ESPACIADORA agregará todo el contenido a nuestra lista. Obviamente esto significa que ya no se podrá utilizar TAB dentro del área de texto de la descripción, pero encontré en la práctica que nunca lo uso.

Atajos de teclado sencillos: CTRL+A para agregar ítem, ENTER para confirmar, TAB y ENTER para confirmar si usamos descripciones de los ítems que agregamos.

1. Resaltado: agregada la posibilidad de resaltar ítems de nuestra lista. Fue una de las primeras cosas que pensé cuando empecé a usar la app seguido. Es necesario poder resaltar ítems importantes. Cuando la lista se empieza a agrandar es necesario marcar algunas cosas como importantes para dar prioridad XD. Por el momento esta opción está restringida a una combinación de colores específica pero pienso que en el futuro se podría agregar algún menú con más opciones de resaltado. Al igual que el resto de la información la información respecto de si un ítem está resaltado o no se guarda en la base de datos.

Para mantener compatibilidad con las versiones anteriores al iniciarse el programa el mismo busca que exista la columna resaltado en la base de datos, de no existir la crea.

1. Búsqueda de actualizaciones: En el menú programa se agrega la opción para buscar actualizaciones. El programa compara la versión actual con la existente en el repositorio de GitHub, si encuentra diferencia es porque seguramente exista una versión nueva. Finalmente convertí en módulo esta función (que siempre está mezclado con el resto del programa) así que será más fácil implementarla en futuros proyectos a partir de ahora. Muchas veces vuelvo sobre programas viejos para corregir errores o agregar funciones y salvo que el usuario mismo se tome el trabajo de comparar versiones con el repositorio, nunca se enteraría si hay nuevas versiones.

Creo que todo esto resume a grandes rasgos los cambios que se fueron haciendo en la app. Posiblemente siga haciendo cambios pero por ahora creo está en una versión estable y le estoy dando bastante uso!

Link al repo en GitHub: https://github.com/mcattani/tachame_la_lista

Como siempre, si el contenido de este blog les agrada se agradecen la difusión y los comentarios y si además quieren ayudar de otra mana pueden invitarme un cafecito XD (le tengo el ojo a unos esp32 y unos display que me estoy muriendo por comprar 0_0 )

Saludos!

Proyecto prueba de librerías Button2 & ESPRotary

Buscando información para un futuro proyecto que tengo en mente me encontré con dos librerías muy interesantes creadas por Lennart Hennigs.

La primera llamada Button2:

“Esta biblioteca le permite utilizar funciones de devolución de llamada para realizar un seguimiento de clics simples, dobles, triples y largos (…) La biblioteca también se encarga de evitar rebotes. El uso de esta biblioteca reducirá y simplificará significativamente su código…”
(Fuente, traducido con google translate)

La segunda llamada ESPRotary:

“Esta biblioteca le permite leer interacciones con un codificador rotatorio y actuar en consecuencia. Utiliza funciones de devolución de llamada para recibir notificaciones cuando cambia [el estado de] el codificador rotatorio.” (Fuente, traducido con google translate)

Según el autor, ambas librerías fueron testeadas en placas: Arduino, ESP8266 y ESP32 y pueden descargarse desde el Administrador de Bibliotecas del IDE de Arduino.

Dado que seguramente las usaré en proyectos futuros me pareció una buena idea armar un proyecto simple para mostrar su funcionamiento. El uso de las mismas es muy sencillo y realmente facilitan tareas cuando se utiliza un pulsador o un rotary encoder. Respecto al primero no tendremos que preocuparnos por los rebotes ni la detección de doble pulsado, etc… y respecto al segundo no tendremos que andar escribiendo líneas y líneas de código para andar detectando la orientación del encoder.

“Los rebotes son las falsas pulsaciones (ruido) que se producen al hacer falsos contactos en el interruptor. El proceso de eliminarlos se llama Debounce.” (fuente y más información aquí)

Creo que en el video se muestra claramente en qué consiste el proyecto y como utilizaremos los distintos componentes. Los cuales son:

1. Arduino UNO (o compatible)
2. Rueda Neopixel de 12 leds.
3. Módulo KY-040 Rotary Encoder.
4. Breadboard y cables jumper.

Por recomendación de la página de NeoPixel hay conectado un condensador de 100uF en la alimentación de la rueda. [Editado: Veo que el condensador está conectado en toda la línea + y GND del breadboard, mantengo igualmente la sugerencia.]

Las conexiones son las siguientes:

Rueda LED	Arduino
GND	GND
PWR / VCC	5v
D1 / IN	Pin D7

Módulo KY-040	Arduino
CLK	Pin D3
DT	Pin D4
SW	Pin D6
VCC / +	5v
GND	GND

Como siempre el código está bastante comentado para que se pueda ir siguiendo y entendiendo paso a paso lo que se está haciendo.

Lo que me interesa destacar es el uso de las funciones de retorno de llamada (callback functions) dado que así interactuamos con las funciones que nos ofrecen las librerías.

Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción. (Fuente)

Esta definición puede ser un poco confusa, pero en la práctica es muy sencillo.

pulsador.setClickHandler(pulsado); 
pulsador.setLongClickDetectedHandler(pulsado_largo); 
encoder.setChangedHandler(rotacion); 
encoder.setLeftRotationHandler(mostrar_direccion);
encoder.setRightRotationHandler(mostrar_direccion);
encoder.setLowerOverflowHandler(tope_inferior); 
encoder.setUpperOverflowHandler(tope_superior);

Dentro del sketch se puede observar más claramente el uso de cada una; por ej. cuando se produce una pulsación “pulsador.setClickHandler(pulsado)“ se llama a la función “pulsado“ que definiremos más abajo. La segunda refiere a una pulsación larga y llama a la función pulsado_largo, la tercera cuando se detecte una cambio de posición en el encoder, la cuarta y quinta llamarán a las funciones que designemos cuando el encoder gire hacia un lado u otro y las últimas dos cuando nos topemos con el límite establecido de valores que puede tomar el encoder.

Las librerías contienen más funciones de las que ejemplifico en el proyecto, por eso les recomiendo leer la documentación respectiva a cada librería (ambas se pueden encontrar en el link del autor al comienzo del post) pero creo que en el sketch se pueden apreciar las más básicas.

Si te resultaron de utilidad no dudes en dejar una estrella en el repositorio del autor. Y si te gustó este proyecto no dudes en dejar un mensaje y compartir.

Link al sketch: https://gist.github.com/mcattani/c1a235bd2c94b32297c30ca34e2ef046

Saludos!

Tachame la Lista!

En esta ocasión les traigo una aplicación hecha en Gambas3.

Se trata de un programa del estilo to-do list (lista de tareas) que escribí para una amiga que estaba buscando una app muy simple para gestionar tareas.

La información se almacena en una base de datos sqlite3 que consta de 4 campos:

1. ID: Único por cada entrada.
2. “Completado”: Que es un valor booleano (verdadero/falso) para indicar si el elemento de la lista ha sido completado o no.
3. Título: Nombre que le asignamos a la tarea.
4. Contenido: Dentro de cada tarea se puede guardar más información. Por ejemplo si agregamos una tarea que sea “Ir al supermercado” podemos además agregar información respecto de la compra que tenemos que hacer. Si la entrada posee “contenido” el mismo aparecerá en un panel lateral al hacer click sobre la tarea.

A modo de chiste (y porque a mi amiga le encanta completar tareas) se reproducen sonidos cada vez que una ítem de la lista se marca como “realizado” y también cuando se completa la lista entera o se borran todos los elementos. Nunca había reproducido sonidos en una aplicación hecha en Gambas y según material que encontré en Internet hay varios métodos. Elegí el que pareció más sencillo y claro.

Como siempre el código está bastante comentado. Debajo está el link a GitHub para descargar el código fuente y paquetes de instalación. Si este proyecto les resultó de interés no duden en dejar un comentario.

Saludos!

GitHub: https://github.com/mcattani/tachame_la_lista

[Post Actualización] https://thenerdyapprentice.blogspot.com/2024/03/actualizacion-tachame-la-lista.html

Servidor Web con sensor DHT11 y conexión a NTP

En el post anterior comenté que había adquirido un ESP8266. En esta ocasión traigo un proyecto clásico pero entretenido para quien acaba de adquirir uno de estos microcontroladores.

Utilizaremos un módulo sensor de temperatura y humedad, más específicamente un DHT11 y mostraremos las mediciones del mismo a través de una página web utilizando el esp8266 como servidor web. Además mostraremos la hora actual, para esto nos conectaremos a un servidor NTP.

Network Time Protocol (NTP) es un protocolo de Internet para sincronizar los relojes de los sistemas informáticos a través del enrutamiento de paquetes en redes con latencia variable. NTP utiliza UDP como su capa de transporte, usando el puerto 123. Está diseñado para resistir los efectos de la latencia variable.

Algunos detalles del DHT11:

• Voltaje de Operación: 3V - 5V DC.
• Rango de medición de temperatura: 0 a 50 °C.
• Precisión de medición de temperatura: ±2.0 °C.
• Rango de medición de humedad: 20% a 90% RH.
• Precisión de medición de humedad: 5% RH.
• Tiempo de sensado: 1 seg.

Como se muestra en el gráfico de arriba conectaremos el sensor en el pin digital 2 del esp8266. Es importante saber que este sensor puede funcionar con los 3.3v que proporciones este microcontrolador (puede que estemos acostumbrados a los 5v del Arduino).

Quiero aclarar que no se nada de CSS por lo que en este proyecto utilizaremos únicamente código HTML para crear la página web que mostraremos. Si usaremos fuentes e íconos de https://fonts.google.com/icons.

El código está bastante comentado para ir siguiéndolo paso a paso. Pero quiero resaltar algunas partes:

Vamos a utilizar varias librerías para:

1. Conectarnos a nuestra red WiFi.
2. Crear nuestro servidor web.
3. Crear conexiones UDP.
4. Conectarnos al servidor NTP.

   #include <ESP8266WiFi.h>
   #include <ESP8266WebServer.h>
   #include "DHT.h"
   #include <WiFiUdp.h>
   #include <NTPClient.h>
   

   En relación al servidor NTP utilizo un servidor pero esto no es necesario especificarlo y por defecto se usa el servidor ‘pool.ntp.org’.

   NTPClient timeClient(ntpUDP, "1.ar.pool.ntp.org", -10800, 6000);
   

   -10800 Corresponde al offset, en mi caso Buenos Aires es -3 GMT por lo que resto 10.800 segundos del horario que devuelve el servidor NTP. 6000 Corresponde al intervalo de refresco en milisegundos.

Dentro de la función SendHtml que devuelve la página web a mostrar se indica:

ptr += "<head> <meta http-equiv=\"refresh\" content=\"10\">\n";

Con esta línea le indicaremos al navegador web que actualice automáticamente la página web o después de un intervalo de tiempo determinado (en este caso 10 segundos).

En mi caso (dado que es la primera vez que trabajaba con código HTML, me sirvió crear primero el bosquejo de la página en un editor web online como este y luego reemplazar los datos con las variables dentro del código en el IDE.

Dejo debajo el link al código, espero les haya interesado. Si este es el caso no se olviden de dejar un comentario y compartir. Lo mismo si utilizan el código y lo embellecen un poco. Me gustaría ver una versión estéticamente más agradable a la vista XD.

Sketch: https://gist.github.com/mcattani/91e7d6d876fbd70174282f23927227ae

Saludos!

Wake On Lan - ESP8266 - Enciende la PC de manera remota

Finalmente me compré una placa con el integrado ESP8266, en este caso una placa de desarrollo NodeMCU ESP8266 V3. Hace rato que quería probar esta familia de placas que, entre otras cosas, tienen conectividad WiFi.

No voy a entrar en muchos detalles respecto de las características de la placa, no es el fin de este post, pero resumidamente son las siguientes:

• Procesador: ESP8266 @ 80MHz (3.3V) (ESP-12E)
• 4MB de memoria FLASH (32 MBit)
• WiFi 802.11 b/g/n
• Regulador 3.3V integrado (500mA)
• Conversor USB-Serial CH340G / CH340G
• 9 pines GPIO con I2C y SPI
• 1 entrada analógica (1.0V max)
• 4 agujeros de montaje (3mm)
• Pulsador de RESET
• Entrada alimentación externa VIN (20V max)

En realidad la primera placa que compré fue una Wemos D1 Mini pero no hubo manera de hacerla andar. Puedo subir sketchs desde el IDE de Arduino pero no puedo utilizar ninguno de los pines. ¯_(ツ)_/¯

En fin, desde hace tiempo que tenía ganas de probar la función WOL de la placa madre de mi PC.

WOL o Wake on Lan es un estándar de redes que permite encender la pc de manera remota. En mi caso, que utilizo Gnu-Linux como sistema operativo, no tuve que hacer más que habilitar la opción de wake on lan en el BIOS de la pc.

En este link les dejo un artículo de la web Xataca que explica como habilitar esta función tanto en el Bios como en Microsoft Windows.

Wake-on-LAN está implementado utilizando un paquete especialmente diseñado llamado “Paquete mágico”, el cual es enviado a todos los equipos en la red, entre ellos el dispositivo a ser encendido. El “paquete mágico” contiene la dirección MAC del equipo destino, un identificador numérico que tiene cada Tarjeta de Red u otros dispositivos de red en la computadora, que posibilita ser reconocido dentro de la red. (…) Si un “paquete mágico” es recibido y está direccionado a la dirección MAC del dispositivo, la Tarjeta de Red envía la señal a la fuente de energía o tarjeta madre para iniciar el encendido del sistema, muy similar a lo que acontece cuando se presiona el botón de encendido. Fuente: Wikipedia

Para este proyecto entonces usaremos la placa mencionada arriba, dos leds de diferente color (en mi caso usé un led RGB) y un pulsador. La idea es que el ESP8266 se conecte a nuestro router (nos señale con los leds cuando se está conectando y cuando la conexión ha sito establecida exitosamente) y cuando presionamos el pulsador se envía el paquete mágico.

Vamos a hacer uso de tres librerías que pueden instalarse vía el Gestor de de Librerías (Herramientas -> Administrar Bibliotecas…)

• La primera es WiFiUdp.h que nos permite crear una instancia de la clase WiFi UDP que puede enviar y recibir mensajes UDP.

• La segunda es WakeOnLan.h que es la librería que nos permitirá armar de manera sencilla el paquete mágico y enviarlo. Toda la información referente a esta librería la pueden encontrar en este link.

• La tercera es Debouncer.h que no es estrictamente necesaria pero a mi me resulta muy útil y sencilla para evitar los “rebotes” del pulsador y la uso habitualmente (para este sketch en particular los rebotes no son un problema).

Los rebotes son las falsas pulsaciones (ruido) que se producen al hacer falsos contactos en el interruptor. Si te interesa saber más sobre los rebotes recomiendo visitar esta página.

Dejo el diagrama de conexiones. Como comenté arriba estoy usando un led RGB de cátodo común, ustedes pueden utilizar LEDS comunes (recuerden conectarlos a GND utilizando una resistencia de 220ohms). El uso de los LEDS no es necesario, pero me gustan los indicadores visuales.

Como siempre el código está bastante comentado para que en cada paso se entienda lo que estamos haciendo.

Dejo debajo el link al proyecto en GitHub. Incluyo también un script en python llamado “wake_on_lan.py” (estoy aprendiendo python XD) que funciona perfectamente para encender remotamente una pc y en donde se puede ver con claridad como se arma el paquete mágico.

GitHub: https://github.com/mcattani/esp8266_wake_on_lan

Como siempre si este proyecto te gustó / interesó no dudes en compartirlo y dejar algún comentario, se aprecia.

Saludos!