Simulador de Casio F-91W en HTML

Hace casi 3 años ya de Simulador de Casio W-59 en Flash, llevaba un año o así dándole vueltas a programar un simulador, que además incluyera la funcionalidad del reloj.

Me puse manos a la obra, y tras cuatro días de trabajo, y más de 1000 lineas de código, finalmente os puedo presentar Simulador de Casio F-91W en HTML. Además de cambiar el modelo de reloj de un W-59 a un F-91W-1YEF, que no obstante comparten el módulo 593, incluye bastantes novedades en base a mi experiencia anterior.

Obviamente, y al dominar mucho más la plataforma, hay algunos refinamientos muy interesantes, como el uso de requestAnimationFrame en el caso de estar disponible, efectos CSS, manejo de eventos independientemente del navegador (tanto para dispositivos táctiles, como de escritorio o versiones antiguas de Internet Explorer), etc.

Lo que más me gusta es su concepción, muy basada en datos, que me permitiría tomarla como base para otras simulaciones de relojes digitales Casio.

Al mismo tiempo soy consciente de algunas carencias al respecto de la simulación. Por ejemplo:
– Los parpadeos en modo de ajuste, no tienen la frecuencia correcta en navegadores que no soportan requestAnimationFrame.
– La alarma, una vez empieza a sonar no se puede cancelar manualmente.
– El ajuste de fecha no es 100% fiel al modelo original, donde se pedía antes del día del mes, el mes.
– Los indicadores de PM y 24H, son tipográficos en vez de bitmaps, por lo que no son exactamente iguales.
– La tipografía usada, no es exactamente como la de Casio. Por ejemplo los 1 están alineados al centro en vez de a la derecha.

Otras cosas, se me han quedado en el tintero, y espero poderlas añadir pronto:
– Poder guardar el estado en cookie, y restaurar nuestras configuraciones de alarma, 24h, … cada vez que se cargue.
– Sincronizarlo desde un servidor público de tiempo.
– Optimizar los estilos CSS, y pegarle una limpiecilla al código.

Lo tenéis disponible gratuitamente en nikkhokkho.sourceforge.net/images/casio_f-91w_simulator/, y sea para probarlo, enlazarlo, o incrustarlo en vuestras páginas.

Incrustarlo es tan sencillo como agregar el siguiente código:

13 comentarios en “Simulador de Casio F-91W en HTML”

  1. Javier Gutiérrez Chamorro (Guti)

    Muchas gracias Sergi. Como verás, acabo de actualizarlo a la versión 1.10 con algunas mejoras menores.

  2. Currado que lo flipas, te ha quedado fantástico. Ojala supiera yo hacer esas cosas en HTML, pero es que a mi eso del diseño Web nunca se me ha dado demasiado bien. 🙁

  3. Hola, un trabajo excelente, me encantaría poder ponerlo en mi web pero no como enlace sino que cuando entres se vea porque es una maravilla. ¿me podrías indicar como hacerlo? Es una pagina Jimdoo y la verdad estoy muy pez con el tema.
    Saludos

  4. Javier Gutiérrez Chamorro (Guti)

    Muchas gracias Oscar.
    No estoy familiarizado con Jimdoo, pero supongo que el contenido de las páginas permitirá insertar código HTML. En ese caso, un simple iframe como el siguiente, debería funcionarte para incrustarlo:

  5. Javier Gutiérrez Chamorro (Guti)

    Sí que la había visto Arcano. Me alegra que haya aparecido porque es posterior a mi simulador, y además carece de algunas funciones que yo si que he implementado. No solamente la tipografía es poco fiel al original, sino que se descuadra en pantalla y no es demasiado fiel a los originales Casio F-91W.

    Algo en lo que no han caído la gente de Mode TR, los desarrolladores del Casio F-91W Watch Widget es en emular/simular la palabra Casio como prueba de “autenticidad”. Eso por no hablar que utilizar los botones requiere un pago de 1€ y el resto de funciones incluyen anuncios, cosa que el mío es totalmente gratis, y además open source.

    Las comparaciones son odiosas, y está mal que yo lo diga, pero es que ese widget para Android, parece la obra de un aprendiz el que encima apenas ha puesto cuidado en lo que ha hecho. Fíjate que hasta parece que el LCD esté “sucio” y desenfocado y que el reloj esté viejo.

    Casio F-91W HTML5 Simulator (Guti) -2013-:

    Casio F-91W Watch Widget for Android (Mode TR) -2018-:

  6. Si, yo la había descargado. Los número me aparecián encuadrados pero fue cambiar el tamaño y se desencuadró.

    Creo sería buena idea hacer una web de inicio solo html con link seteables al abrirse con el blok de notas para los usuarios. Con los colores ya estipulados en el css.

    Y agregar una listita de foros y páginas importantes relacionadas a casio. Y que se descargue todo el archivo como una web y con instrucciones para pagina de inicio de los usuarios, obviamente con el buscador de google por algún lado.

    Si no la hacés vos capaz la hago yo para divertirme un rato y te la paso.

    No me acuerdo si el w59 tiene las mismas fuentes pero estaría bueno como opción B. Ando con ganas de comprarme uno luego de la buena experiencia con el f91, que vendí porque la correa me quedaba corta. Fue de los relojes que más me gustó comprarme. Pero como el w59 permite más correas compraré alguna para ponerle. Acá en uruguay no venden el de correa textil y si lo compro por intentet donde vivo no llega. Aunque no se, hay una oferta en ebay del ae1200 a 14 dólares muy tentadora y con envío gratis.

  7. Javier Gutiérrez Chamorro (Guti)

    Me encanta que te haga ilusión Arcano, porque yo estoy liadísimo, así que te lo agradecería.
    ¡Saludos y muchas gracias por ofrecerte!

Deja un comentario