• Espacios AP

    20 junio, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    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

    20 junio, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    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)

  • Imágenes en controles numéricos tipo botón

    13 junio, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    Descartes ofrece las opciones color para decorar los botones que vamos a utilizar en una escena; sin embargo, también tenemos la posibilidad de asociar una imagen a este tipo de control. En la siguiente imagen se observa como se puede asociar una imagen a un botón (en la ruta imagenes/btn1.png). Es importante definir el tamaño del botón en la casilla pos que, para el ejemplo, es 129×30.

    boton1
    boton2
    En la siguiente escena, se emplean varias imágenes para un botón como las que se muestran en la imagen de la derecha. Descartes, también, reconoce la imagen asociada al botón con el sufijo _over; es decir, si el tenemos el botón con nombre btn1.png y su asociado btn1_over.png, esta última se visiona cuando pasamos el puntero del ratón sobre el botón. Y análogamente con el sufijo _down al pulsar dicho botón.
    En la escena, haz clic varias veces sobre el botón para que observes algunos de los diseños utilizados que son imágenes de dominio público. Por otra parte, hemos incluido unos marcos adicionales en la opción gráficos del editor, como una muestra más de lo que podemos hacer con las imágenes.
    Practica, entonces, con la siguiente escena, para que observes las diferentes opciones que permiten incorporar imágenes en un espacio: fondo, botones y gráficos 2D
    Escena interactiva

    (Puede descargar la escena anterior desde este enlace)

  • Espacios HTMLIframe

    13 junio, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    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

    13 junio, 2014 Autor/a: José R Galo Sánchez
    Sin comentarios todavía

    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)

     

Página anterior Página siguiente