Controles

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:

Como los demás objetos de Descartes, el “nombre” de un control se refiere al nombre externo del parámetro que aparecerá para el alumno-usuario. El “id” es el nombre interno del parámetro que se modifica con el control; el “id” se le asigna al parámetro al agregar el control a la lista a la izquierda del panel de configuración de los controles.

El id y el nombre pueden ser iguales, pero no tienen que serlo. Por ejemplo, en la escena de las figuras 3D abajo podemos ver que el control con nombre “h” de height (alto) tiene E2.escala como id.

Se debe activar el interruptor “visible” para que el valor de los controles aparezcan en la interfaz del usuario de la escena. Si se selecciona esta opción, el usuario puede modificar el valor del parámetro escribiendo un número en el campo de texto y pulsando intro.

Si el (modo de despliegue del) control numérico es un menú, los nombres de las opciones se tienen que enumerar en el campo “opciones”, seguidos por sus respectivos valores entre [ ] y separados por una coma. Este tipo de control numérico es particularmente útil si se están manejando varios objetos gráficos en un mismo espacio que deben aparecer separadamente, como era el caso en el ejemplo de los objetos 3D abajo. Como vimos en la sesión de creación de una escena sencilla, si eso es el caso, el control gráfico se debe usar en combinación con el campo dibujar-si para cada uno de los objetos en cuestión. Este campo se encuentra en la parte superior de los paneles de configuración de gráficos y gráficos 3D.

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:

Un polígono con relleno verde (representando el pasto) que tiene la forma de un rectángulo menos la forma de la piscina. Por tanto, conecta 6 puntos en la primera escena y 7 puntos en la segunda.
Un segmento que representa el contorno de la piscina y que conecta 6 puntos en piscina 1 y 7 puntos en piscina 2.
Otro polígono (de forma rectángular) con relleno turquesa representando el agua, en que el parámetro d es la coordenada del eje Y de sus dos vértices superiores. Por tanto, al cambiar el valor de d mediante el control gráfico Agua, cambiará igualmente el tamaño del polígono.

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.

Otro polígono blanco que representa el espacio vacío de la piscina y que está posicionado detrás del polígono del agua.
Unas familias de segmentos azules que indican las medidas del nivel y volumen del agua, cuya coordenada del eje Y es un parámetro “s” que va del valor 1 a 6 en 5 pasos o instancias. Por tanto, se dibuja una familia de 6 segmentos. Por ejemplo, la expresión de la familia de segmentos que indican el nivel del agua en piscina 1 es (6,s)(5.7,s), lo que dibuja 6 segmentos que conectan los puntos con coordenadas (6,1)(5.7,1); (6,2)(5.7,2); (6,3)(5.7,3), etc.
Unas familias de puntos de tamaño cero con un texto que contiene una expresión para calcular la medida requerida a base del parámetro s. Como hemos visto anteriormente, conviene definir el texto como un punto invisible para poder editar su posición con mayor precisión. En la lección más adelante sobre el editor de fórmulas veremos cómo configurar la expresión.
Una imagen “SKY.JPG” que se encuentra en la carpeta “images”.

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:

El control tiene el aspecto de un pulsador que está colocado en la banda “sur” de la escena
El campo “decimales” está en cero ya que no se han usado fracciones en esta escena. El valor inicial del parámetro d (campo “valor”) es 1, lo que significa que al abrirse el applet, el nivel del agua siempre será 1 unidad.
El valor del parámetro d (id) puede variar entre los límites 1 y 6 y la unidad de incrementación del valor es 1; en otras palabras, cada vez que se pulsa sobre las flechas del pulsador, el valor del parámetro - y por tanto el nivel del agua - subirá o bajará una unidad.

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.

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.

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

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

el control Caso aparezca como un bóton con las etiquetas “proporcional” y “no proporcional”
en el control Agua, las etiquetas en el campo al lado del pulsador muestren el nivel real del agua (30 cm, 60 cm, etc) pero sin que se muestre el valor (numérico) de estas etiquetas.

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.
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.
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