Autor Tema: 03) Contruyendo el reloj.  (Leído 6301 veces)

Ascanio

  • Administrator

  • Desconectado
  • *****
  • El 'Autor'

  • 285
  • Karma:
    +105/-0
  • Texto personal
    Autor del IOCPServer y del GaugeComposer
    • Ver Perfil
    • Mi WEB
03) Contruyendo el reloj.
« en: Julio 31, 2014, 06:10:00 pm »
Al acabar esta primera parte deberías tener esto:

Ok, el primer Gauge que vamos a hacer es el Reloj, es uno de los más simples y tiene 'de todo' lo que nos interesa.
Para ello, tenemos por un lado esta imagen que nos proporcionó Andy.


Lo primero que vamos a hacer es el reloj, que está a la izquierda de esa imagen...
Vamos a intentar hacer con el GC, esto...


Necesitamos, el fondo, las tres agujas, el Knob que hay debajo a la izquierda, y si queremos poner la guinda un PNG transparente con el cristal para ponerle encima... (Ya empiezan los problemas, :-) yo no soy diseñador gráfico y los dibujos me quedan muy mal, pero seguro que por ahí hay algún manitas con el Photoshop capaz de hacerlo muy bien)

Vamos a hacer este reloj....

Y para ello, vamos a usar estas imágenes... (podéis copiarlas a vuestro PC)


y para el Knob, estas dos, ya os explicaré el motivo de dos...


Podéis bajar las imágenes directamente o bajando este zip:









« Última modificación: Agosto 01, 2014, 01:25:07 pm por Ascanio »

Ascanio

  • Administrator

  • Desconectado
  • *****
  • El 'Autor'

  • 285
  • Karma:
    +105/-0
  • Texto personal
    Autor del IOCPServer y del GaugeComposer
    • Ver Perfil
    • Mi WEB
Contruyendo el reloj. Empezamos.
« Respuesta #1 en: Julio 31, 2014, 07:11:26 pm »
Ok,
Tenéis el GC instalado, y habéis copiado las imágenes de arriba. Además, tenéis el simulador (recordad que aquí solo haré referencias a los offsets del IOCPServer para FSX) y tenéis instalado el IOCPServer.

Por ahora no necesitamos el Simulador, pero bueno es tenerlo todo preparado...

Ok, abrimos el GC y seleccionamos en el menú Gauge y New y lo dejamos como en la imagen:


Pulsamos OK, y empezamos...
Lo primero es el fondo, ¿tenéis las imágenes localizadas?, es importante...

Con el botón derecho del ratón haced click en cualquier parte de la pantalla del GC, os saldrá un menú, seleccionad,
Elements/ Insert /An image

os saldrá una pantalla como esta, pero con los campos vacíos...
Ponedle la descripción (no es obligatorio pero es importante) y seleccionad la imagen fondo, en cuanto ,o hagáis el GC os preguntará...

Decidle que SI y luego pulsad OK., el fondo del reloj debería aparecer arriba a la izquierda, tal que así...

Bueno, con el fondo no vamos a hacer nada, así que vamos con los importante, vamos a añadir el segundero, (si lo voy a empezar por arriba, luego los ordenaremos). Debería emperzar por la imagen de la horas, pues está debajo y el GC utiliza capas para cada imagen, pero como luego se puede ordenar como nos guste, pues listo..

Añadir el segundero.
Ya sabéis, botón derecho del ratón, Elements / Insert / An image, le damos nombre, y seleccionamos la imagen llamada segundero.png, más o menos así...

Pulsado OK y mirad si ha quedado encima de la otra y centrada...

Bien, ya tenemos el segundero, así que vamos a 'conectarlo' al simulador...
Para ello, os explico lo que vamos a hacer, en primer lugar configuraremos en el GC los datos del servidor IOCP y después en la imagen del segundero escribiremos un Script (programita) que estará asociado al evento 'IOCP change'.

Lo primero, configurar el servidor IOCP. Para ello en el menú principal del GC, seleccionamos Config y luego IOCP Clients, (vamos a configurar uno de los dos clientes IOCP que tiene el GC y que se conectan a los 'servidores' IOCP). Una vez seleccionado esta opción de Menú poned los datos como en esta imagen.

He escrito FSX en la casilla Alias y he puesto la IP 255.255.255.255 y he marcado la casilla 'For this server use uIocpPnp' que permite al GC buscar el solito al FSX sin necesidad de conocer en que IP está... (Función solo compatible con mis servidores IOCP y los de Fernando Brea).

Pulsamos OK y ya tenemos el GC configurado para este Panel. (Nota: las configuraciones IOCP son de cada gauge o panel. Si hacemos un Panel nuevo podemos configurar otro u otros servidores, recordad que el GC se puede ejecutar cuantas veces vuestro PC soporte.)


Bueno, ahora vamos a programar el segundero... empezamos por lo más simple, para editar las propiedades del segundero podéis, hacer doble click con el ratón sobre el segundero y saldrá la ventana de propiedades, o haced click sobre el y luego con el botón derecho del ratón o con el menú del GC y a Elements / Propeerties.

Si hacéis click sobre el segundero veréis que abajo al centro aparecerá algo así,

¿Veis que pone 'segundero'?, eso es porque le pusisteis nombre (descripción) a la imagen, si no lo ponéis dice 'No name' y no sabrés cual está seleccionado, si hay varias imágenes del mismo tamaño una encima de la otra, como es este caso.
Haced una prueba, haced click en el segundero y pulsad TAB, debería cambiar a 'Clock backgound' o lo que hayáis puesto, y eso nos dice que es el fondo el que está seleccionado, volved a pulsar TAB y estaréis de nuevo en el Segundero, ahora podéis ir al menú, Edit / Elements, Properties.

Ahora en la parte de abajo de la ventana de propiedades del segundero escribid esto...
link offset 4 server FSX
data = value
data *= 6
rotate


de manera que quede así...

Os lo explico...
LA primera instrucción es la que 'enlaza' la imagen con el simulador, y concretamente con el offset 4 que corresponde al offset TIME_SECONDS, (Nota: al instalar el IOCPServer se instala el OffsetExplorer que os pemitirá conocer, y buscar, cualquier dato que el simulador pueda proporcionar vía offset de IOCP)  es decir el valor del segundo del reloj del simulador. Una vez cada segundo, y solo si cambia, cuando cambie, el simulador se lo notificará al GC y este podrá actuar ejecutando las líneas siguiente.

Las siguientes líneas son las que harán rotar el segundero, pero vamos partes,
data = value

Tenéis que saber, y recordar pues lo usaremos siempre, que el GC tiene en sus script dos palabras muy importantes, value y data, son los nombres de lo que llamamos variables especiales y que sirven para gestionar los datos recibidos del simulador y pasarlos a las instrucciones que mueven/rotan las imágenes, la palabra value representa el valor recibido del simulador, es decir, justo debajo del link quiero pasar el valor recibido  (que ya estará guardado en la variable value, lo hace el GC internamente) a la otra variable llamada data.

Ahora tenemos en data el mismo valor que vino del simulador (seguro que será un número entre 0 y 59  ;D),

Pues bien, ahora, quiero convertir el valor del segundo en un número que represente cuantos grados ha de girar la imagen en el sentido de las agujas del reloj, ojo, siempre has de calcular que debe girar desde su posición inicial, no desde donde esté. Con los segundos es sencillo, tan solo hay que multiplicar el segundo por 6, y obtenemos los grados a rotar. Haced la prueba, si el segundo es 0 hay que rotar 0 grados, ¿no?, pero si el segundo fuese 30 habría que rotar 180 grados para apuntar hacia abajo, ¿y eso que nos dice?, que basta con multiplicar el segundo por 6.  (Nota: con otras agujas es muuucho más complicado )

Por eso está la siguiente instrucción,
data *= 6  
multiplica data por 6 y lo guarda en data, así que de esta manera tenemos en value los segundos, y en data los grados que queremos que rote la imagen, por lo que ya podemos poner la siguiente instrucción que es rotate
.
Esta instrucción, rotate, ordena al GC rotar la imagen a la que pertenezca este tantos grados como data contenga, como data contiene los grados en función de los segundos recibidos desde el simulador, el GC hará lo propio, es decir rotará la imagen tantos grados como sea necesario para que apunte al segundo correcto.

¿Queréis probar?, arrancad el simulador, con el IOCPServer instalado, entrad en algún vuelo para que el reloj del avión se mueva, en la pantalla principal del FSX no se mueve el reloj del avión :-) y luego seleccionad RUN en el menú del GC. Esto debería mover la aguja del segundero y seguir moviendola (suavemente) según avance el reloj del avión.

(Nota: Si no os funciona la prueba es que algo no está bien, así que preguntad)






« Última modificación: Agosto 01, 2014, 10:54:34 am por Ascanio »

Ascanio

  • Administrator

  • Desconectado
  • *****
  • El 'Autor'

  • 285
  • Karma:
    +105/-0
  • Texto personal
    Autor del IOCPServer y del GaugeComposer
    • Ver Perfil
    • Mi WEB
Contruyendo el reloj. El minutero y las horas.
« Respuesta #2 en: Agosto 01, 2014, 10:56:46 am »
Siguiente paso... añadir el minutero y las horas.

Igual que hicimos con las dos imágenes anteriores, click con el botón derecho del ratón, y en el menú seleccionamos Elements / Insert / An image.
Como la que vamos a añadir es el minutero, podemos hacer ya todo dejando las propiedades así:


Fijaos que esta vez, el link se hace al offset 3, que corresponde con el minuto del reloj del avión... Al puslar OK debería quedar esta imágen:


Lo podéis probar, claro, pero salvadlo primero, en el menú proncipal del GC, seleccionáis Gauge / Save y dadle el nombre de fichero que os apetezca... Luego volved a seleccionar Run y debería marcar los segundos y los minutos. (Nota: luego mejoraremos la apariencia)

Ahora, una vez más, Elements / Insert / An image y seleccionamos la imagen de las horas... y le ponemos su script, algo así...


y pulsando OK debería tener este aspecto...


A ver, ¿Quien ha pensado, anda, el script es distinto? :D, y no me refiero a que ahora el link es al offset 2, (que son las horas), me refiero a que claro que es distinto, si os fijáis tanto el segundero como el minutero van de 0 a 59 y para colocarlos de forma correcta tan solo debemos multiplicar por 6 ese valor y rotar la imagen, pero las horas no hacen eso, ¿verdad?, las horas van de 0 a 23, o de 0 a 12 (dos veces al día), con lo que debemos calcular que hacer...

Lo primero es que si la hora que viene es mayor que 12, tan solo le restamos 12 y listo, y luego calculamos con eso. Si yo quiero que la aguja de un giro de 360 grados cada 12 horas, significa que tengo que dividir 360 entre 12, para saber cuando rota cada hora, lo que me da 30 grados. Antes, con los minutos y los segundos, dividíamos 360 entre 60 que es 6, pero ahora hay que dividir entre 12 lo que nos da 30. Por eso, el data se multiplica por 30 en data *= 30, rotamos y listo...

Podéis salvar y probar... Ya tenemos horas, minutos y segundos, casi el reloj completo.





« Última modificación: Agosto 01, 2014, 11:13:12 am por Ascanio »

Ascanio

  • Administrator

  • Desconectado
  • *****
  • El 'Autor'

  • 285
  • Karma:
    +105/-0
  • Texto personal
    Autor del IOCPServer y del GaugeComposer
    • Ver Perfil
    • Mi WEB
Contruyendo el reloj. Afinando las agujas...
« Respuesta #3 en: Agosto 01, 2014, 11:22:45 am »
Bueno, ya estamos en el camino... Ahora, como me gustan las cosas bien hechas, vamos a afinar las agujas... :-)
Empecemos por el segundero, habréis notado que las agujas se mueven describiendo un movimiento más o menos suave, y que lo hacen como reacción al evento producido... es decir, se mueven despues de que el evento se haya producido. Quiero decir que cuando el segundo pasa a ser el que sea, 4 por ejemplo, entonces, es cuando la aguja se mueve hacia el cuatro, describiendo un movimiento más o menos suave que hace 'que haya un retraso' de casi un segundo entre la hora y el dato que muestra nuestro reloj.

Para eso, hay dos soluciones, una fácil y otra más compleja que veremos al final del todo. Pero por ahora vamos con la solución fácil, acelerar el movimiento de esta aguja, para ello, haremos click sobre cualquiera de las imágenes y pulsaremos la tecla Tab hasta que abajo diga 'Segundero', entonces en el menú del GC o con el ratón seleccionaremos 'Edit / Elements / Properties editamos el Script y entre las líneas data *= 6 y el rotate ponemos la línea setpid 0 con el fin de que el rotate se haga instantáneamente, (si pusiéramos setpid 100 iría muy lento).,

Debería quedar asi:

Podéis probar a ver si ahora el segundero se parece al de un reloj de cuarzo.  8)

Pero claro esto no es todo... a mi que la aguja de los minutos se mueva de golpe cuando los segundos llegan a 0, no me mola nada, aunque lo haga suavemente, así que la vamos a cambiar para que se vaya moviendo junto con los segundos... Seleccionamos la imagen del minutero, ya sabéis como, seleccionando cualquiera y pulsando Tab hasta que aparece abajo Minutero, luego en el menú, Edit / Elements / Properties y la cambiamos para que quede así...


He añadido las líneas que aparecen resaltadas y que me permiten tomar en value el dato que se hubiera recibido en el offset 4, que era el segundero, lo divido por diez, es decir que obtendré un número entre 0 y 6 y se lo añado a los grados ya calculados para girar el minutero... con esto hago que el minutero, gire entre 0 y 6 grados más a medida que el segundero avanza y eso es justo lo que necesitamos.

Ahora haremos lo mismo con la imagen de las horas, que dependiendo del minutero la haremos avanzar. Pero aquí no tiene que avanzar 6 grados sino 30, así que el valor del minutero lo dividiremos por 2 y se lo añadiremos a los grados a rotar la imagen de las horas.


Con lo que ahora nuestro reloj debería ser mucho más realista, pero claro, a ver si alguno proporciona imágenes mejores :)

Ya queda poco por de esta parte, vamos a ordenar bien las 'capas'.


 
« Última modificación: Agosto 01, 2014, 11:50:02 am por Ascanio »

Ascanio

  • Administrator

  • Desconectado
  • *****
  • El 'Autor'

  • 285
  • Karma:
    +105/-0
  • Texto personal
    Autor del IOCPServer y del GaugeComposer
    • Ver Perfil
    • Mi WEB
Contruyendo el reloj. Ordenar las imágenes por capas...
« Respuesta #4 en: Agosto 01, 2014, 11:59:29 am »
Bueno, tenemos esto...


Pero queremos el segundero arriba, y luego los minutos, las horas y el fondo. Vale, pues eso es muy sencillo en GC, tan solo hay que tener claro que debemos ir poniendo arriba y como quedaría el resto.
Poniendo arriba del todo el minutero primero y el segundero después ya nos quedaría todo ordenado... fijáos:


Tenemos ahora, horas, minutos, segundos, y fondo por ese orden de arriba a abajo, 
Si ponemos el minutero arriba, tendremos, minutos, horas, segundos y fondo.
y si luego subimos el segundero, nos queda, segundos, minutos, horas y el fondo. que es justo como debía estar.

¿Como se sube una imagen por encima de las otras?, muy sencillo, la seleccionáis, ya sabéis como, marcad cualquiera y pulsad Tab hasta que está seleccionada la que queréis, (Nota: Shift + Tab selecciona en sentido contrario, por si os pasáis la que queréis y os interesa volver atrás), una vez seleccionada con el botón derecho del ratón o en el Menú Edit del GC, seleccionáis Elements /Send to /Front y listo, ya está arriba... Hacedlo primero con el minutero y luego con el segundero, para obtener esto:

« Última modificación: Agosto 01, 2014, 12:07:58 pm por Ascanio »