Controles



Un control es un objeto que sirve para que el usuario-alumno modifique los parámetros que intervienen en una escena. Son pues los objetos que inyectan la escena con interactividad.

Descartes cuenta con dos tipos de controles: numérico y gráfico. En esta lección se le enseñará al lector cómo usar los siguientes objetos en escenas de complejidad avanzada:

Controles numéricos

Pulsadores
Barras de desplazamiento
Menús
Botones
Acciones

Controles gráficos

Conjuntamente, el lector tendrá que estudiar los detalles de la configuración del panel de edición de los controles en la sección controles de la documentación técnica de Descartes.



A. Controles numéricos

Los controles numéricos sirven para modificar el valor de un solo parámetro. Echemos la vista atrás y recordemos los controles en la escena de las figuras 3D: todos eran controles numéricos y como ya vimos, se puede configurar la posición de dichos controles en la escena, su modo de despliegue (barra, menú, etc), el valor mínimo y máximo del parámetro, etc.

Recordemos brevemente las siguientes peculiaridades de los controles numéricos:



Aquí está la escena de referencia para que miremos otra vez los campos mencionados.



Ilustremos ahora la funcionalidad de los controles numéricos en base a otra escena: las piscinas.



Como la escena de los vasos, esta escena se elaboró para demostrar el concepto de la proporcionalidad, ya que en la primera piscina, que tiene una forma rectangular, el nivel y el volumen del agua aumentarán proporcionalmente, mientras en la segunda piscina la relación entre volumen y nivel no es proporcional.

Lo que nos interesa en esta lección es la construcción del espacio principal de la piscina. Por tanto, hemos extraido este espacio con todos sus objetos de la escena y lo hemos convertido en una escena más simple de un solo espacio.

Miremos primero cómo se construyeron los objetos gráficos de esta escena.

Cada una de estas escenas tiene una serie de objetos gráficos 2D:

Nota: Notamos que el agua de la piscina 2 también es un polígono de forma rectangular, pero cuya posición está detrás del pasto, por lo cual tiene otro aspecto visual. Esto hace más simple la configuración de este objeto gráfico.







Y qué podemos decir sobre los controles?

Como podemos ver, esta versión simple de la escena tiene un solo control numérico, que tiene el nombre “Agua” y que sirve para modificar el parámetro con id “d” que se refiere al nivel del agua en la piscina.

En el panel de configuración de Controles, se puede apreciar lo siguiente:



Ahora bien, las dos escenas de las piscinas se pueden juntar en una sola escena mediante un control gráfico adicional para seleccionar un “caso” u otro.

En la escena que vamos a estudiar a continuación se ha hecho justamente esto: podemos ver, además de Agua, otro control numérico llamado “Caso”.

Abriendo el panel de configuración de Controles de esta escena, podemos ver que el control Caso tiene un valor máximo de 2, y que se inicia en 1. Como el control “caras” de la escena de los objetos gráficos 3D, hemos entonces creado un nuevo criterio o parámetro que va a controlar si un objeto gráfico aparece sobre la escena o no y que se puede aplicar a cualquier objeto gráfico de la escena. A diferencia del control “caras”, este control aparece como un pulsador así que sólo el valor numérico de este parámetro aparece en la escena.

Ahora, ¿cómo se configuran los objetos gráficos para acomodar este nuevo parámetro? Si abrimos el panel de configuración de gráficos 2D, veremos que el campo de “dibujar-si” de los gráficos perteneciendo a la piscina número 1 (la proporcional) está configurado como “caso=1”, lo que significa que sólo se dibujarán cuando el valor del parámetro “caso” es 1. Prestemos atención al hecho de que “caso” aquí es el id del parámetro, no el nombre, ya que, como hemos visto, para la configuración interna de los parámetros se usa el id, no el nombre.

De la misma manera, los objetos perteneciendo a la segunda piscina tienen la condición de dibujar “caso=2”. En cambio, el único objeto gráfico que ambos casos tienen en común - la imagen del cielo - no tiene esta condición por lo cual aparece en ambos casos.





B. Controles gráficos

Los controles gráficos son objetos que aparecen sobre alguno de los espacios de la escena y que el usuario puede arrastrar con el ratón o con las flechas del teclado, con lo cual modifica en realidad un punto del espacio cuyas coordenadas se pueden usar como parámetros en toda la escena. Al crear un control gráfico se crea (internamente) un punto cuyas coordenadas son id.x e id.y donde id es el identificador del control gráfico.

Como primera ilustración, estudiemos la siguiente escena que contiene dos controles gráficos etiquetados con las letras A y B. El objeto gráfico de esta escena, la flecha rosa, es un vector que es la suma de los puntos A y B y por tanto cambia según se mueven los dos controles gráficos con el ratón.



Los controles gráficos son bastante sencillos de configurar, como podremos ver al mirar el panel de configuración de controles de esta escena. Se representan, por defecto, por pequeños discos cuyo radio y color pueden ser elegidos por el autor. También se puede indicar su posición sobre el espacio, y en qué espacio deben aparecer si hay más de uno. Aquí el texto que acompaña los controles es simplemente el nombre del punto, pero obviamente se puede escribir cualquier texto.

Para los detalles más minuciosos de su funcionalidad, se puede consultar el apartado de controles del manual técnico de Descartes.

Para que los objetos gráficos se puedan manipular con los controles gráficos, hay que “conectar” ambos, utilizando las coordenadas de los controles en la expresión del objeto gráfico que depende de ellos, como también era el caso para los controles numéricos. Habíamos visto que un control gráfico es en realidad un punto cuyas coordenadas son id.x e id.y. En esta escena las coordenadas de los gráficos serán A.x, A.y y B.x, B.y, respectivamente. En el panel de configuración de gráficos de la escena en cuestión se puede apreciar cómo se ha hecho la configuración de los objetos de acuerdo con su relación con los controles:

Ahora vamos a abrir la ventana de edición de la escena del vector y vamos a agregar un nuevo control gráfico, que puede tener cualquier id. Veremos que al crearlo, se crean simultáneamente dos controles numéricos con identificadores id.x e id.y por si el autor desea utilizarlos. Si no los desea utilizar conviene eliminarlos.

En la escena abajo se han utilizado estos controles numéricos para mostrar el valor de las coordenadas de un punto que se mueve sobre la gráfica de una ecuación.





Para que el movimiento de los controles gráficos quede restringido a una curva hay que usar el campo “constricción” escribiendo en él una ecuación que represente a la curva deseada. Así la constricción del control A es y=sen(2*(x+6)), la del control B es x^2+y^2=4 y la de C es x=6+sen(2*y). Usando min y max en los controles numéricos asociados a los controles gráficos, es posible restringir el movimiento del control gráfico a una parte de la curva de constricción. Para esto, se usan los valores de las coordenadas x y y de los controles asociados, y puede ser útil hacer aparecer la red para definir el mínimo y máximo de estos valores. Podemos ver que aquí el movimiento del control A se ha constringido de manera que no salga de la parte de la curva dibujada, y el control C se ha editado de manera que no salga del espacio de la escena.

El tamaño de un control gráfico puede modificarse usando el campo “tamaño”. En él hay que indicar el radio del control gráfico en pixeles.

Los colores de un control gráfico pueden modificarse usando los botones color y color-int. Estos colores incluso pueden hacerse transparentes si conviene en la aplicación como ocurre en el siguiente ejemplo en el que se usa un control gráfico grande y transparente centrado en la imagen del pato para hacer que dicha imagen pueda ser arrastrada por el usuario.

Nota: En Descartes sólo se pueden usar imágenes rectángulares. Aquí, la imagen del pato es un cuadro de 60 pixeles con un círculo del mismo diametro y la parte exterior al círculo transparente.

La siguiente escena que ilustra la reflexión, sirve para mostrar que con un sólo control gráfico se pueden configurar y modificar múltiples objetos gráficos.



Escena elaborada por © Ministerio de Educación y Ciencia. Año 2003



Los controles gráficos deben asignarse a un espacio de la escena mediante el menú desplegable llamado “espacio”. Un detalle notable de los controles gráficos es que un control gráfico de un espacio puede afectar objetos gráficos de otros espacios, independientemente de si éstos son 2D o 3D. En otras palabras, el efecto de los controles gráficos no está limitado al espacio al que pertenece el control sino que puede afectar a toda la escena. Esto se ilustra muy bien en el ejemplo de los globos terráqueos, que reproducimos a continuación.



Escena basada en otra elaborada por José Ireno Fernández Rubio, © Ministerio de Educación y Ciencia. Año 2003

Botones y Acciones.

La siguiente escena tiene muchos botones y cada uno de ellos realiza una acción diferente. Con un clic derecho sobre el botón se obtiene una explicación de la acción que el botón realiza. Por supuesto con un clic izquierdo el botón realiza dicha acción.

La mejor manera de estudiar las acciones de Descartes es analizar esta escena.

Una escena que lo único que incluye es un botón con la acción abrir Escena, ofrece una manera alternativa de crear escenas en botones, como muestra este ejemplo:

No sólo se puede asignar una acción a los botones, los otros controles también pueden generar acciones. Sin embargo en el caso de los controles que no son botones la única acción que suele ser útil es la de calcular.

Es posible realizar acciones no sólo por manipulación de controles sino también mediante los eventos, pero eso se estudia en la lección sobre Auxiliares.



Ejercicios

  1. En la escena de las piscinas, reconfigure los controles numéricos Caso y Agua para que:

  1. En la escena con los controles gráficos A y B cuya suma es el vector rosa, aplique una restricción al movimiento de ambos controles para que no puedan salir del espacio de la escena.

  2. En la escena del globo terráqueo agregue otro control gráfico y otro punto sobre el globo que sea el definido por la posición del nuevo control. Dibuje sobre el globo el arco con centro en el centro del globo y que pasa por los dos puntos sobre el globo. Este arco es la geodésica entre ambos puntos. Ahora dibuje la geodésica sobre el plano.

  3. Partiendo de una escena vacía, cree paso a paso una escena con botones que realicen acciones de todos los tipos.




Autores: José Luis Abreu León y Tine Stalmans