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

    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)

  • Imágenes en Gráficos 2D

    Las imágenes se pueden insertar como fondo de un espacio, asociados a controles y, como lo explicamos en este apartado, como un elemento tipo gráfico 2D. En este caso, el panel de configuración específico del tipo imagen tiene este aspecto:

    imagen1

    A continuación se explican los campos específicos.

    Expresión La expresión es un campo de texto. Su contenido puede ser de dos tipos:

    • Sólo uso de las coordenadas (x, y). En este caso, se asumen estas coordenadas como el extremo superior izquierdo de la imagen.

    imagen2

    • Uso de coordenadas y tamaño de la imagen (x, y, w, h). Esta opción permite incluir dos valores (ancho y alto), que definen el tamaño relativo de la imagen. La imagen en su tamaño original se logra con la expresión (x, y, 1, 1). Una imagen reducida a la mitad sería (x, y, 0.5, 0.5). Las coordenadas, en este caso, corresponden al centro de la imagen.

    imagen3

    Archivo Es un campo de texto libre en el que debe escribirse el nombre del archivo que contiene la imagen que se desea usar como objeto gráfico. Sólo pueden utilizarse archivos png, jpg y gif. Los archivos de imágenes pueden colocarse  en la carpeta donde se encuentra la página que contiene la escena o en subdirectorios de ella. En el nombre del archivo hay que escribir los subdirectorios (ver imágenes anteriores). También es posible usar el nombre de un archivo, cuyo contenido es el archivo de la imagen, incluidos los subdirectorios.

    imagen4

    Animado  Selector para indicar si se trata de una imagen animada (gif animado). Los gif animados sólo se representan como tales con el intérprete de Java, con el intérprete DescartesJS sólo se verá la primera imagen que compone ese gif. Para usar gráficos animados con DescartesJS ha de usarse un espacio HTMLIframe (consulte el artículo “Espacios HTMLIframe“)
    Frecuencia Lapso de tiempo en milisegundos que debe haber entre una y otra actualización de la imagen animada.
    Rotini Determina el ángulo de rotación de la imagen. Para una rotación con respecto al centro de la imagen, se recomienda la expresión con coordenadas y tamaño de la imagen (ver escena de ejemplo, al final de este apartado).

    En la siguiente escena se puede observar el funcionamiento de los parámetros “Expresión” y “Rotini”. Usa los controles y observa el comportamiento de la imagen, si haces clic en el botón “Coordenadas y tamaño”, podrás practicar, además, con el rotini o rotación de la imagen:

    Si prestaste atención, seguramente notaste que para valores negativos en el tamaño, la imagen se invierte. La siguiente escena, muestra una utilidad de este comportamiento del tamaño de la imagen:

    (Puede descargar esta escena y la anterior desde este enlace)

    Finalmente, la opción familia que trae el panel de configuración, también es posible usarla con imágenes.

     

  • Imágenes de fondo en espacios

    En algunas escenas es conveniente utilizar una imagen de fondo. Algunas veces, porque obedecen a un patrón de diseño en un proyecto específico, como el que se observa en la siguiente imagen:

    fondo3

    La imagen de fondo se define en el campo de texto etiquetado como imagen, escribiendo la ruta donde se encuentra la misma.

    fondo2

    Su posicionamiento queda indicado mediante el selector despl_imagen que puede tomar cuatro valores:

    fondo0

    • arr-izq: posiciona la imagen arriba a la izquierda.
    • expand.: escala la imagen para que ocupe completamente el tamaño del espacio, obviamente dependiendo de la imagen este cambio de escala puede puede influir en la calidad de la misma.
    • mosaico: que reproduce la imagen tantas veces como sea necesario para teselar completamente el fondo del espacio.
    • centrada: la ubica en el centro del espacio.

    Si el peso de la imagen es muy elevado puede tardar en reflejarse en la escena. Como alternativa para evitar el uso de imágenes muy pesadas se dispone de la opción mosaico indicada antes. Esta opción permite que usemos imágenes muy pequeñas, que se desplegarán en todo el fondo del espacio. En la siguiente escena, se han empleado varios fondos usando imágenes de dominio público cuyo tamaño no es superior a los 10 KB.

    fondo1 fondo2 fondo3 fondo4
    fondo5 fondo6 fondo7 fondo8

    Escena interactiva

    (Puede descargar la escena anterior desde este enlace)