Documentació de l’Extensió Rellotge Binari

Concepte del projecte

Aquesta extensió és una aplicació de tipus WebExtension per al navegador Firefox. Mostra un rellotge binari minimalista dins d’un popup, permetent personalitzar el color dels bits i la visualització de l’hora digital. L’objectiu és oferir una eina visual i estètica que representi el temps d’una manera alternativa.

Esbossos del disseny

Les tres columnes representen l’hora (columna esquerra), els minuts (columna central) i els segons (columna dreta). Cada columna té sis quadrats que representen els bits d’un nombre binàri.

Hi ha nombres que, en convertir-los a binari, no necessiten 6 dígits per ser representats. Per exemple, el número 23 es converteix en 10111, que només té 5 dígits. Per mantenir totes les columnes del rellotge amb la mateixa alçada i el mateix nombre de quadrats, he afegit zeros a l’esquerra fins a completar els 6 dígits. D’aquesta manera, hores, minuts i segons sempre formen columnes uniformes i visualment alineades.

Alhora de representar aquest números binaris en les columnes, el primer dígit de l’esquerra es representa a dalt de tot en la seva colummna corresponent i els digits següents és van dibuixant en la columna en ordre descendent. Els quadrats grisos equivalen a 0 i els quadrats blaus equivalen a 1.

Casos d’ús principals

• Consultar l’hora en format binari.
• Personalitzar el color dels bits per adaptar-lo al gust o al tema del navegador.
• Activar o desactivar la visualització de l’hora digital.

Interacció amb els elements

La icona de configuració en el popup redirecciona a la secció de configuració on es pot decidir:

• Mostrar o no l’hora en format digital
• Canviar el color dels cuadrats que representen bits actius.

Ús de storeItem() i getItem()

L’extensió utilitza localStorage per recordar les preferències de l’usuari. Quan l’usuari canvia el color dels bits o la configuració de l’hora digital, la informació s’emmagatzema amb storeItem(). Quan el popup es torna a obrir, getItem() recupera les preferències guardades, permetent mantenir la configuració personalitzada sempre activa.

Millora proposada
Fixar el popup perquè es pugui mantenir obert (“pin popup”).

Normalment, el popup d’una extensió es tanca automàticament quan l’usuari fa clic fora o canvia de pestanya. Això és una limitació de totes les extensions: un popup no pot quedar-se obert per si mateix. La millora consisteix a simular un “popup fix” obrint una finestra pròpia de l’extensió que actua com una mini-aplicació flotant.

Això permetria:

• Mantenir el rellotge sempre visible.
• Posicionar-lo lliurement.
• Tancar-lo manualment quan l’usuari vulgui.
• Obrir múltiples “rellotges” si es permet.

Procediment proposat:

• Afegir una icona estil “xinxeta” al popup

Quan l’usuari prem el botó, sobre una petita finestra independent que no es tanca sola, es pot moure, i té el mateix contingut que el popup.

• Diferenciar el popup real de la finestra flotant

El codi podria detectar si està dins una finestra flotant:

• 3. Desactivar elements innecessaris en la versió fixada.

• Amagar el botó “Opcions”
• amagar la icona “xinxeta” (per no obrir infinites finestres)

Enllaç Git

https://github.com/magulloc/rellotge-binari.git

Es tracta d’una aplicació interactiva que utilitza la càmera web per detectar la cara de l’usuari i, més concretament, l’obertura de la boca. Quan l’usuari obre la boca, l’aplicació genera animacions, combinades amb música i elements visuals com fantasmes i una carabassa animada. L’objectiu és oferir una experiència que connecti el moviment facial amb efectes gràfics en temps real.

Workflow del App

L’aplicació s’inicia mostrant una pantalla de benvinguda amb el títol i un botó “Començar”, indicant a l’usuari que ha d’obrir la boca per generar animacions. En prémer el botó, es carrega la càmera i es detecta la cara en temps real amb FaceMesh; quan l’usuari obre la boca, apareixen partícules animades (caramels) sobre els llavis. Alhora, la música es reprodueix i es pot controlar amb el botó de play/pause i el slider de volum. La interacció continua fins que l’usuari tanca l’aplicació, moment en què es deixa de processar el vídeo i s’aturen les animacions i el so.

Aspectes tècnics

He fet servir p5.js 2.0.5 i per detectar el moviment dels llavis en temps real he triat la llibreria externa ml5.js, concretament el model FaceMesh. Es tracta d’una llibreria JavaScript basada en TensorFlow.js que facilita l’ús de models d’intel·ligència artificial directament al navegador.

El model FaceMesh detecta de forma automàtica i en temps real més de 400 punts de referència de la cara, incloent-hi els llavis, els ulls i el contorn facial. Aquesta detecció detallada permet calcular l’obertura de la boca i generar animacions de partícules exactament en la posició correcta dels llavis.

L’avantatge de fer servir ml5.js és que tot es processa localment al navegador, sense necessitat de servidors externs ni enviar imatges de la càmera a la xarxa, millorant la privacitat i la fluïdesa de l’experiència.

Enllaços

Github

https://github.com/magulloc/healthy_smile

Web

https://editor.p5js.org/magulloc/full/QXkPzX7lH