• Comunicación entre escenas en espacios HTMLIframe

    En el siguiente ejemplo contamos con una escena «madre» que contiene dos escenas «hijas» ubicadas cada una de ellas en un espacio HTMLIframe. Cada hija manda a la madre los valores que modifica y esta última se encarga de mantener actualizadas a las hijas. Ello se logra mediante las funciones id.set(variable,valor) e id.update(), la primera asigna a la variable el valor indicado y la segunda actualiza. Van precedidas del prefijo que indica el id del espacio o bien puede indicarse parent para la escena «madre». Puede descargar esta escena desde este enlace.

    El esquema de esta escena es el siguiente:

    1. Una escena madre incluida en la página denominada madre.html que incluye:
      • Dos espacios HTMLIframe denominados con los identificadores H1 y H2 y que abren respectivamente las páginas hija1.html e hija2.html.
      • En el algoritmo CALCULOS se especifica H1.set(‘var2’,var2);H1.update();H2.set(‘var1’,var1);H2.update();
    2. En la página hija1.html una escena que incluye:
      • Un control var1 con una acción calcular que especifica parent.set(‘var1’,var1);parent.update()
      • Dos gráficos tipo texto que muestran el valor de las variables var1 y var2
    3. En la página hija2.html una escena que incluye:
      • Un control var2 con una acción calcular que especifica parent.set(‘var2’,var2);parent.update()
      • Dos gráficos tipo texto que muestran el valor de las variables var1 y var2

    Así pues el esquema lógico-funcional es el siguiente:

    a) Si se cambia el valor del control var1 en la escena hija 1, la acción calcular parent.set(‘var1’,var1), asigna a la variable denominada var1 en la escena madre (parent) el valor del control var1 de la escena hija 1. Entre comillas simples es el identificador de la variable a actualizar y sin comillas la que actualiza. En este caso, se le ha dado el mismo id con objeto de identificar con el mismo nombre a esa variable en todos los contextos que se consideran, pero pueden ponerse nombres diferentes. Posteriormente en esa misma acción calcular se realiza la actualización de la variable var1 en la escena madre con la función parent.update()

    b) En la escena madre, el algoritmo CALCULOS, al ejecutar H2.set(‘var1’,var1) asigna a la variable var1 (escrita entre comillas simples) del espacio H2 el valor actual de la variable var1 de esta escena madre. De nuevo estamos usando por comodidad el mismo nombre para identificar a las variables que intervienen en diferentes contextos. Con H2.update() se efectúa la actualización en el espacio H2 de la variable var1.

    c) La escena hija2.html muestra el valor actual de la variable var1, que después de la actualización realizada en el paso anterior es el valor procedente de la escena madre y el de ésta el procedente de la escena hija1.

    De manera análoga se procede para pasar el valor del control var2 de la escena hija 2 a la escena madre y de ésta a la escena hija1.

  • Espacios AP

    Los espacios AP o espacios de aplicación permiten embeber recursos interactivos generados con otras aplicaciones como pueden Geolab o Geogebra, entre otras. Con los espacios AP se busca la posibilidad de que haya comunicación entre Descartes y las aplicaciones que se embeben en esos espacios y ese es un camino que puede ser interesante a desarrollar.

    Todos esos recursos pueden embeberse también utilizando espacios HTMLIframe y de hecho, si el objetivo es sólo embeber y no comunicar, es lo más recomendable en el intérprete Java ya que en este caso hay más flexibilidad y más posibilidades de gestión. En Descartes JS no se ha dado continuidad a este tipo de espacios.

    Los parámetros de este tipo de espacio coinciden con los parámetros correspondientes a los espacios HTMLIframe.

     

     

  • Espacios sensibles a los movimientos del ratón

    Cuando la opción sensible_a_los_movimientos_del_ratón está activada en los espacios bidimensionales o tridimensionales el programa detecta los movimientos del ratón sobre la escena y responde a ellos con eventos. Para generar estos eventos existen las variables «mouse_x» y «mouse_y«, precedidas por el identificador del espacio (por ejemplo E1.mouse_x).

    El programa también puede detectar clics del ratón generando una variable con valor «mouse_clicked=1» en el momento del clic, con lo que un evento puede reaccionar a dicha condición.

    El selector se deberá activar en cada uno de los espacios en que se usen las variables mouse_x  y/o mouse_y para generar eventos. Sin embargo, se recomienda dejarlo desactivado a menos que se vaya a utilizar pues esto ralentiza el funcionamiento de la escena.

    (Puede descargar la escena anterior en este enlace)

  • Espacios HTMLIframe

    Los espacios HTMLIframe permiten la visualización de todo el contenido incluido en un fichero html. Los parámetros en este tipo de espacio pueden observarse en la siguiente imagen:

    Parámetros de espacios HTMLIframe

    Parámetros de espacios HTMLIframe

    id Identificador interno que da nombre y referencia al espacio HTMLIframe
    x Posición horizontal en píxeles o porcentaje de la esquina superior izquierda del espacio HTMLIframe respecto a esa esquina en la escena
    y Posición vertical en píxeles o porcentaje de la esquina superior izquierda del espacio HTMLIframe respecto a esa esquina en la escena
    ancho Ancho del espacio en píxeles o porcentaje
    alto Alto de la escena en píxeles o porcentaje
    dibujar-si expresión booleana que al cumplirse visualiza el espacio. Si se omite dibuja siempre el espacio.
    imagen dirección donde localizar una imagen para presentarla como fondo del espacio.
    despl_imagen menú que indica dónde o cómo posicionar la imagen de fondo
    fondo color a asignar como fondo a ese espacio
    archivo dirección donde localizar el archivo html del que quiere presentarse su contenido en este espacio

    La escena siguiente muestra algunas aplicaciones de los espacios HTLMIframe, de los que se han creado tres, el primero muestra una imagen (gif) animada, el segundo un video de YouTube y el tercero una página de la Miscelánea. Obsérvese que si se quiere añadir una imagen animada, como en este caso, la forma de hacerlo es incluirla en un espacio HTMLIframe ya que DescartesJS no muestra este tipo de imágenes como en la versión con Java.

    (Puede descargar la escena anterior desde este enlace)

    El código empleado para cada uno de estos espacios es:

    • <param name=»E_02″ value=»tipo=’HTMLIFrame’ id=’E2′ x=’0′ y=’0′ ancho=’315′ alto=’95’ despl_imagen=’arr-izq’ dibujar-si=’ver#2′ archivo=’images/logo_animado3.gif'»>
    • <param name=»E_03″ value=»tipo=’HTMLIFrame’ id=’E3′ x=’280′ y=’80’ ancho=’400′ alto=’300′ despl_imagen=’arr-izq’ dibujar-si=’ver=1′ archivo=’https://www.youtube.com/embed/6ijTDOKEhVQ'»>
    • <param name=»E_04″ value=»tipo=’HTMLIFrame’ id=’E4′ x=’200′ y=’0′ ancho=’480′ despl_imagen=’arr-izq’  archivo=’https://proyectodescartes.org/miscelanea/materiales_didacticos/domino-JS/index.html'»>
  • Espacios R3 o tridimensionales

    Utilizamos los espacios R3 cuando queremos mostrar objetos en tres dimensiones. Estos espacios se configuran de manera similar a los espacios R2, en su panel de configuración aparecen los campos «fijo«, «escala«, «O.x«, «O.y«, «imagen«, «despl_imagen» y «fondo«, análogos a los de los espacios R2, y además de estos hay otros dos campos adicionales:

    despliegue
    Selector con las opciones: «orden«, «pintor» y «trazado de rayos» que son tres diferentes métodos para desplegar los objetos en tres dimensiones. 

    • El primero, «orden«, dibuja los elementos tridimensionales de atrás hacia adelante. Es el más rápido, pero tiene fallos cuando los elementos de los objetos tridimensionales son grandes.
    • El segundo, «pintor«, es algo más lento pero es mucho más fiable que el primero. Este método dibuja primero los elementos que son tapados por otros.
    • El despliegue «trazado de rayos» rellena, pixel a pixel, el espacio dibujando el color del objeto que se encuentra más cerca del observador. Es el método más fiable pero es extraordinariamente lento, por lo cual sólo puede usarse en ordenadores muy veloces o en espacios de dimensiones muy reducidas.
    cortar
    Es un selector que permite decidir si todos los cuerpos del espacio se cortan entre sí.
    El valor por defecto es desactivado. Si dos superficies se intersecan pero no se les permite cortarse su despliegue es «imposible» y el dibujo resulta incomprensible. Cuando los objetos del espacio no se intersecan entre sí, no es necesario seleccionar cortar. Para más información ver Gráficos_3D.

    Los espacios R3 incluyen unas variables para conocer y controlar los ángulos de giro del espacio : «<Espacio>.rot.y» y «<Espacio>.rot.z» donde <Espacio> es el nombre del espacio. También existen las variables «<Espacio>.escala» y <Espacio>.observador que sirven para controlar la escala y la distancia aparente al observador, ambas se miden en pixeles.

    La siguiente escena ilustra explícitamente el uso de estas variables. Observe que si el usuario cambia la escala o gira el espacio arrastrando el ratón, los controles numéricos se actualizan con los nuevos valores de la escala y las rotaciones.

    (Puede descargar esta escena desde este enlace)