Pues seguro que todo tenéis algun rato de esos en los que no sabes en qué página meterte, no sabes a qué jugar ni qué hacer para matar el rato, la idea es hacer cosillas de este estilo, os enseñaré cosillas varias para hacer, hoy toca un reloj de escritorio para Windows, así nos meteremos un poco en la programación, y de paso nos servirá para entender mejor como funcionan los programas que usamos habitualmente (y de paso, para matar el rato).
Para la clase de hoy necesitaremos:
AutoPlay Media Studio 7.5 (rula la versión 8 por ahi, pero no os la recomiendo)
Algun programa de diseño (yo pondré las imagenes que yo use igualmente por si no quereis hacerlas)
Tener un rato muerto y querer seguir los pasos
Bien, dicho esto, empecemos.
-Primero de todo, debemos de plantearnos de qué va la cosa, va a ser un reloj digital de lo mas simple, bien, así que ahora partimos a nuestra aplicación de diseño preferida y hacemos un diseño como mejor nos venga, tal que así:
-Una vez hecho esto, guardamos la imagen, para tomarla de referencia:
Vale, de aquí miraremos el tamaño para nuestro proyecto y las refernecias para colocarlo todo.
-Perfecto, ahora abrimos AMS (a partir de ahora llamaré así al AutoPlay Media Studio), creamos un proyecto nuevo en blanco (yo le he puesto de nombre RelojEOL, pero es indiferente) y vamos a Project>Settings, ahi le pones en Width y Height la Anchura y Altura que tendrá el reloj, que será igual a la Anchura y Altura de la imagen de referencia, por tanto, ponemos 210 y 102 respectivamente, nos quedará así:
-Ahora volvemos a la ventana de Setting, y como no queremos que el reloj quede en una ventana, sino que flote por ahi sin tener borde, marcamos la opción "Flat", de paso le ponemos en Windows Tittle el título que queramos, con Reloj EOL mismamente nos vale, por último, aquí marcaremos en la sección de Taskbar la opción "Hidden", de forma que no nos cree un icono en la barra de tareas cuando lo tengamos ejecutado (sería absurdo tener un widget así), ni tampoco nos lo cree en la bandeja del sistema, simplemente veremos la aplicación pero no nos aparecerá ningún icono cuando se esté ejecutando.
-Bien, ahora vamos a pulsar con el botón derecho del ratón sobre el cuadro blanco que es el diseño de la aplicación que vamos a hacer y seleccionaremos Propierties, una vez ahi, podemos echar un ojo y veremos que hay 2 pestañas, "Settings" y "Script", podéis ojear todo un poco, pero lo que ahora nos interesa es darle a Background "Image" y seleccionar la imagen de referencia, damos a Aceptar, y pulsamos F5 para ver como queda la cosa (IMPORTANTE: tened cuidado porque no podremos cerrarlo por ahora si no es con el administrador de tareas)
Peeerfecto, tenemos una ventana que podemos mover como queramos, pero que es totalmente inutil, por el momento añadiremos un botón para poder cerrarlo sin problemas.
Vamos a la barra de arriba y crearemos un nuevo objeto "Label" (el que tiene de icono una aA), nos aparecerá un objeto de texto con el texto "New Label" y de color negro, hacemos click derecho y vamos a propiedades, en Text ponemos "X", le cambiamos el color a blanco (o algun color que contraste) y cambiamos la fuente a una que quede una X mas o menos bien, quedará así:
-Volvamos a las propiedades del objeto en cuestión, empezaremos con un poquito de código para hacer que se cierre la ventana al pulsarlo.
Vamos a la pestaña "Script" y dentro veremos varias pestañas, la que nos interesa en este caso es "On click", que es la que ejecutará el código que pongamos en el caso de que hagamos click en el objeto.
Ahora tenemos dos opciones, o poner el código a mano (yo llevo tiempo, y por tanto lo escribiría de memoria, pero no es el caso), o bien con el asistente, vamos a hacerlo fácil, pulsamos el botón de Add Action, seleccionamos Application.Exit y le damos a siguiente y finalizar.
-Bien, si hemos hecho todo bien hasta aquí, podemos volver a pulsar F5 sin problemas y ver que esta vez tenemos una ventana nada funcional, pero que al menos podemos cerrar.
-Para que el reloj muestre la hora, tendremos que crear imagenes cada una con un numero (del 0 al 9) y en otra imagen los 2 puntos (le pondremos un efecto para que parpadee), tal que así:
Es importante que todas tengan el mismo tamaño y que las guardemos con el nombre de 1.png, 2.png, 3.png etcétera...
-Una vez tengamos las imagenes, pasamos a colocarlas en el entorno ayudandonos de la imagen de fondo de refencia, pulsamos el icono de la imagen en la barra de arriba y buscamos la imagen de 0.png y la ponemos en su sitio, hacemos lo mismo y la ponemos en el siguiente dígito, y así con los 4, por ultimo creamos otra imagen pero con la imagen puntos.png y la colocamos en su sitio, que quede de la siguiente forma:
-Si ya lo tenemos todo colocado, vamos a ir a las propiedades de cada imagen y bajo la pestaña de Atrributes vamos a desmarcar la casilla Enabled, esto hará que no se pueda realizar ninguna accion al hacer click en la imágen, ni con el derecho ni nada, a cambio, podremos mover la ventana del reloj arrastrando también al clickar los números...
Una vez tengamos todo esto hecho, vamos a poner la imagen de fondo, que será esta:
Creamos un nuevo objeto de imagen y hacemos click derecho sobre ella, vamos a Arrange y ahi damos a Bring to back, se nos pondrá al fondo y ya tendremos el diseño listo.
-Hora de poner todo en marcha, pasamos al código!
Para empezar, vamos a las propiedades de la página, plusando Ctrl+Mayus+Enter, ahi vamos a la pestaña de código (Script), y vamos a la pestaña On Show, que ejecutará un código una vez se muestre la ventana de nuestro programa, vamos a añadir la acción Page.StartTimer y le pondremos 500 como intervalo de tiempo (son milisegundos, esto hará que el código de la pestaña On Timer se ejecute 2 veces por segundo), si lo hemos hecho bien nos quedará "Page.StartTimer(500);".
Una vez tenemos la acción de iniciar el temporizador, vamos a la pestaña On Timer y haremos que el programa obtenga la hora local, y luego la muestre en las imágenes, también haremos que los puntos parpadeen, empecemos.
Vamos a introducir un nuevo código, vamos hasta la sección System y damos a System.GetTime, ahora tendremos que introducir 2 acciones, una que obtenga la hora, y la otra que obtenga los minutos, por tanto, nos quedará así:
hora = System.GetTime(TIME_FMT_HOUR);
minutos = System.GetTime(TIME_FMT_MIN);
hay que tener en cuenta que delante de igual le he puesto de nombre a la variable "hora" y "minutos" para cada acción, de forma que luego podamos trabajar con esas variables.
Si ahora mismo llamásemos a esas variables obtendriamos que la variable hora nos devuelve un dato que sería la hora actual edl sistema, por ejemplo "20", y la variable minutos lo mismo pero con los minutos, por ejemplo "50", de aquí tenemos que extraer el primer y segundo dígito de cada variable para luego aplicarlo a las imagenes, os explico, tendremos que recurrir a las funciones String..Left y String.Right que nos devolverá justo lo que queremos.
Así pues, aplicamos el siguiente código:
minutos1 = String.Left(minutos, 1);
minutos2 = String.Right(minutos, 1);
hora1 = String.Left(hora, 1);
hora2 = String.Right(hora, 1);
Esto hará que por ejemplo, "minutos1 = String.Left(minutos, 1);", pille el valor de minutos, y obtenga el primer dígito de la izquierda (de ahi el 1), y entonces lo guarde en la variable minutos1, así que supongo que también entenderéis como funcionan las demás funciones.
Ya tenemos todos los datos, ahora tan solo nos falta aplicarlos a las imagenes para que muestra la hora, podemos obtener el primer dígito de las horas con hora1, el segundo con hora2, el primero de los minutos con minutos1 y el segundo con minutos2, por tanto, lo que queda es sencillito, recuriremos a la función Image.Load, tal que así:
Image.Load("Image1", "AutoPlay\\Images\\"..hora1..".png");
Image.Load("Image2", "AutoPlay\\Images\\"..hora2..".png");
Image.Load("Image3", "AutoPlay\\Images\\"..minutos1..".png");
Image.Load("Image4", "AutoPlay\\Images\\"..minutos2..".png");
Esto lo que hace es, por ejemplo, si hora1 devuelve el valor 2 (la izquierda de 20), cargar en la imagen "Image1" la imagen 2.png, y de la misma forma con el resto.
Eso sí, es MUY IMPORTANTE, que antes de nada, copieis las imágenes 1.png,2.png, etcétera en la carpeta Images de nuestro proyecto, podemos hacerlo a través del menú Project>File Layout.
Si pulsamos F5 ejecutaremos el reloj y veremos que ya es plenamente funcional.
Por ultimo, vamos a añadir el parpadeo a los puntos, lo haremos con el siguiente código:
puntos = Image.IsVisible("Image5");
if puntos then
Image.SetVisible("Image5", false);
else
Image.SetVisible("Image5", true);
end
Donde la función Image.IsVisible almacenará true o falsa en la variable puntos si la imagen es visible o no, y después crearemos una condición, si la imagen es visible, la hacemos invisible y viceversa.
Ahora sí,
hemos acabado nuestro reloj, como véis, con muy pocas lineas de código.
Cabe destacar que hay formas mas limpias y eficiantes de hacer esto mismo, pero es una forma sencilla de hacerlo y que cualquiera pueda entenderlo, demás, si veo que hay interés, puedo explicar como hacer que también muestre el día de la semana, cómo ponerle alarma y demás curiosidades.
Agradecer a todo el que haya completado el tutorial, nos veremos por aquí, un saludo!
