Camaleon : Controles a Partir de Imágenes

Continuando con el desarrollo del proyecto Nodos (Ambiente Distribuidos para la Creación Colaborativa) se han realizado pruebas para que la aplicación Camaleon (Interface Multimodal para Controlar Servicios Multimedia) dibuje los controles a partir de imágenes, lo cual permite crear diferentes aspectos de los controles y adicionando la posibilidad de crear temas que dibujen los controles con diferentes aspectos.

Repositorio : 

Para el desarrollo de esta nueva característica se creo una rama dentro el repositorio de fuentes del proyecto (camaleon/branches/visualizacion)  que contiene las versiones para Java, Android e iOS a las cuales se les adicionara la nueva visualización, Ver Repositorio

Desarrollo :

Se adiciono la clase NO2ImageControlsRender que hereda de la clase NO2BasicControlsRender que actualmente se encarga del dibuja de los controles, esto con el fin de usar el dibujado básico de controles cuando no exista todavía la versión con imágenes, estas clases a su vez implementan la interface NO2ControlsRender que contiene la definicion de los metodos para el dibujado de los controles.

La clase NO2ImageControlsRender es la encargada de cargar las imágenes a utilizar al momento de pintar los controles, por el momento se están cargando las imágenes como recursos dentro de un paquete de la aplicación (resources/skin1) el cual debe ir incluido en el archivo .jar de la aplicación, pero se debe pensar en un futuro en cargar dinamicamente un archivo con el "tema" desde una ubicación especifica. Actualmente se han realizado pruebas con los controles PushButton, ToggleButton y el Slider con una propuesta visual desarrollada por el grupo de Diseño Visual de la Universidad de Caldas dentro del Laboratorio Sensor. Para las pruebas iniciales simplemente se cambio la asignación del render en NO2Player para que use el render basado en imágenes.

Se realizaron los mismos cambios en la versión Android de la aplicación donde también se adicionaron las imágenes a usar como un paquete  y se implemento la carga de las imágenes usando la clase Bitmap, se uso inicialmente solo la visualización de la imagen para el control PushButton.

Camaleon : Controles como Imagenes en Android

Tareas : 

• Especificar por cada control las imágenes a usar, con sus partes y tamaños para evitar que los controles pierdan el aspecto cuando se modifica su tamaño.
• Adicionar pruebas para los controles adicionales para probar su funcionamiento.

Enlaces : 

• Pagina Oficial del Proyecto
  http://www.sensorlab.org/nodos

Ya se encuentran disponibles las primeras versiones publicas de las Aplicaciones para Nodos (Ambiente Distribuidos para la Creación Colaborativa) las cuales permiten controlar dispositivos que soporte el protocolo OSC (Open Sound Control) a través de una aplicación de escritorio o móvil a manera de control remoto, permitiendo el control de aplicaciones que permitan la comunicación con OSC, dispositivos como sintetizadores que soporten el protocolo y aplicaciones que sirvan de puente entre OSC y otros protocolos de control.

Camaleon Desktop Editor 0.7.1

Las aplicaciones de Nodos esta dividia en tres grandes productos :

• Camaleon Desktop Editor :
  Editor de interfaces graficas que pemite crear los archivos que contienen las descripciones de los controles a ser visualizados en la aplicación de control. Permite la creación de interfaces con controles como Sliders, PushButtons, ToggleButtons, XY, MultiSliders, MultiToggles, Rotary, Labels
  http://www.sensorlab.org/nodos/sitio/camaleon/desktop-editor
• Camaleon Desktop Player :
  Aplicación de Escritorio que hace las veces de control remoto para el manejo de las aplicaciones con soporte OSC. Utiliza las interfaces generadas por el editor para controlar diferentes aplicaciones y dispositivos.
  http://www.sensorlab.org/nodos/sitio/camaleon/desktop-player
• Camaleon Android Player :
  Aplicación para dispositivos moviles basados en la plataforma Android que pemite el control remoto de aplicaciones con soporte OSC que esten en la misma red inalambrica que el dispositivo movil.
  http://www.sensorlab.org/nodos/sitio/camaleon/android-player

Las versiones del Player y el Editor pueden ser ejecutadas rápidamente a través de Java Web Start (se necesita instalar Java para su funcionamiento)

Enlaces :

• Proyecto Nodos
  http://www.sensorlab.org/nodos

El Martes 15 de Marzo de 2011 se presentaron oficialmente los primeros prototipos al equipo de trabajo del proyecto Nodos con el fin de avanzar rápidamente en la definición de plataformas de desarrollo y en la creación de la estructura de cada proyecto para iniciar el proceso de desarrollo por parte de los estudiantes que colaboraran en el desarrollo de los clientes para el proyecto Nodos. Los prototipos presentados implementan la funcionalidad básica de dibujado de los controles en la pantalla y responden a la interacción con el usuario lo que permite entrar en una etapa de implementación de otros controles adicionales que vendran incluidos en la primera version de Camaleon.

Los prototipos desarrollados fueron el cliente de escritorio desarrollado en la plataforma Java, el cliente para dispositivos móviles como teléfonos y tablets basados en la plataforma Android y el cliente para la plataforma iOS el cual permite la ejecución de la aplicación en dispositivos iPhone y iPad. El desarrollo de estos prototipos también sirvo para comprobar el funcionamiento de las herramientas de desarrollo a utilizar que incluyen el ambiente de desarrollo NetBeans para el desarrollo de la version de escritorio, Eclipse y el SDK de Android para la version para este sistema operativo y el Xcode para el desarrollo de la version para iOS.

Hace poco me di a la tarea de desarrollar un prototipo de una aplicación en Windows Azure con el propósito de conocer la plataforma y conocer las herramientas y el proceso de desarrollo bajo esta plataforma, buscando que hacer y tratando de adicionarle elementos de aplicación móvil para crear el cliente en Windows Phone 7, recordé el proyecto que desarrollamos hace ya varios años con Alexander Parrales y Martin Estrada el cual llamamos Ciudad Digital y me di a la tarea de crear un nuevo prototipo.

Ciudad Digital (rebautizado como MCity) es un proyecto en el cual las ciudades están llenas de historias que los ciudadanos cuentan desde sus teléfonos móviles, permitiendo contar cualquier tipo de anécdota o suceso que suceda dentro de la ciudad con solo tomar el teléfono móvil y publicando desde el lugar de los hechos una descripcion de lo que le sucedio, o una imagen o un sonido;  esta historia es almacenada para que despues otros ciudadanos cuando lleguen cerca al lugar puedan leer las historias de otros ciudadanos que han pasado por ahi.

La aplicación tiene un componente servidor donde se almacenan las historias, con su titulo, descripción y posición geográfica (latitud y longitud) y las cuales son enviadas y consultadas desde los dispositivos móviles usando WebServices, para el caso de la implementacion en Azure se implemento una solucion en Azure con tres proyectos :

• MCityAzure
  • MCityModel
    Modelo de Datos de la aplicación
    Basado en el servicio de almacenamiento de Azure de Tablas
  • MCityServices
    Modelo de Servicios
    Servicio Web basado en SOAP para el registro y listado de historias
  • MCityWeb
    Aplicación web para la publicación del web service y la administración

El cliente móvil de la aplicación se implemento bajo la plataforma Windows Phone 7 el cual incluye :

• MCityMobile
  • Envio de Historias
    Permite enviar historias al servidor para su almacenamiento
    Utiliza el servicio de localización para determinar la posición geográfica del usuario
    Adiciona la posición a las historias que el usuario quiere publicar
  • Visualizacion de Historias
    Permite visualizar las historias usando un mapa del servicio Bing donde se muestran marcadores por cada historia los cuales pueden ser tocados para visualizar la historia completa

La aplicación móvil utiliza una fachada que permite acceder al webservice en el servidor y a los servicios de localización.

Los proyectos se desarrollaron en Microsoft Visual Web Developer Express 2010 y Microsoft Visual Studio 2010 Express for Windows Phone.

Versiones :

• Version 0.1 (2011.01.26)
  Monousuario
  Listado de historias e interface web sencilla
  El movil solo permite publicar historias no se incluía la posicion geografica
• Version 0.2 (2011.01.31)
  Monousuario
  Listado de historias e interface web sencilla
  El móvil permite publicar historias con la posición geográfica tomada del GPS del teléfono
  Visualizar historias en un mapa via Bing desde el movil
• Futuras Versiones :
  Adicionar imagen o sonido a la historia
  Multiusuario
  Categorizacion de las historias
  y mucho mas ...

El script XyyyyzText permite visualizar texto dentro de un prim ademas de permitir la creación de un conjunto de prims como un tablero para la visualización de texto multilinea, el script que realmente son cuatro: un script para modificar la forma del objeto donde se visualizan los caracteres, para que se vean 5 caras sobre un mismo lado, un script para controlar la visualización del texto en cada objeto, un script que permite controlar un conjunto de objetos para visualizar gran cantidad de caracteres y un script de ejemplo para controlar el tablero y actualizar el texto visualizado en el tablero.

Se realizo una copia local de los scripts para mantener una versión que pueda ejecutarse en Second Life y una modificada para ejecutarlos en OpenSimulator, como tambien modificar los scripts para su uso dentro de Pulsar en los tableros de texto.

XyyyyzText en Funcionamiento

Uso de XyyyyzText en Second Life :

• Aunque existen muchos lugares donde se pueden encontrar los scripts, se realizo una copia local para controlar el posible cambio de versiones que pueda suceder, aqui esta nuestra copia :
  http://code.google.com/p/pulsarproject1/source/browse/trunk/virtualword/opensim/PulsarProjectTools/XyyyyzText
  O pueden descargarlos directamen del Wiki de SecondLife
  http://wiki.secondlife.com/wiki/XyyyyzText
• Conectarse a Second Life
• Crear la Celda :
  • Crear un Prim Cubo
  • Crear un nuevo script dentro del cubo y copiar el contenido de :
    XyyyyzText_Cell_Transform.lslp
  • Este script cambia la forma del cubo para poder visualizar las cinco caras en un solo lado
  • Copiar el script :
    XyyyyzText_Cell.lslp
    Dentro del objeto, con esto tenemos una celda que visualiza 10 caracteres
  • Copiar la celda cuantas veces se requiera,
    por ejemplo para visualizar 180 carateres se pueden crear 18 celdas, 3 filas y 6 columnas
• Crear el Control del Tablero :
  
  • Crear un nuevo prim
  • Copiar el script :
    XyyyyzText_BoardControl.lslp
  • Abra el script y vaya a la linea 15 :
    integer linelength = 80;
    Cambie 80 por la longitud de caracteres de la linea
  • Copiar el script de ejemplo que permite actualizar el contenido del tablero con solo escribir el mensaje :
    XyyyyzText_Example.lslp
  • Ahora se deden enlazar todos los elementos en un solo objeto
    Con la tecla SHIFT presionada vaya dando click en cada celda, finalmente de click en el prim del control del tablero y presiones las teclas Ctrl-L, esto enlaza todos los objetos en uno solo y permite que el control del tablero envíe las cadenas a cada celda.
• Uso :
  Simplemente escriba algo en el chat y esto aparecerá en el tablero, si se desea cambiar de linea coloque el carácter |

Uso de XyyyyzText en OpenSimulator :

• El script utiliza texturas que no se encuentran disponibles en OpenSim, por tal motivo se deben descargar de Second Life y subir a nuestro servidor de OpenSim
• Se descargo la lista de texturas utilizadas por el script utilizando una aplicación php que se esta desarrollando para la descarga y subida de texturas, se realizo una copia local en el directorio :
  http://code.google.com/p/pulsarproject1/source/browse/trunk/virtualword/opensim/PulsarProjectTools/#PulsarProjectTools/PulsarXyyyyzText/texturas
• Se subieron al servidor con otro script de php, cada imagen devuelve un nuevo UUID por lo cual se debe crear una lista de estos para modificarla en el script
• Realizar los mismos pasos que se realizaron para la construccion del tablero en SecondLife
• Modificar la lista de texturas en el script :
  XyyyyzText_Cell.lslp
• Nota :
  • Abra los scripts y haga modificaciones para que OpenSim obligue a su actualización y compilación
  • Se pueden utilizar programas de terceros para subir las texturas a OpenSim o subirlas, se debe generar la lista de UUIDs a mano
  • Las texturas estan en formato jp2 el cual es el standard utilizado en Second Life, se necesitan editores que soporten este formato para visualizar las imagenes
  • Se esta tratando de crear herramientas que permitan de una forma facil y rapida crear texturas que funcionen con este script.

Aunque actualmente se están realizando pruebas de funcionamiento de los scripts al parecer todo esta funcionando muy bien y se procederá a crear tableros basados en este script para la publicación de información tipo texto dentro del mundo virtual. Se deben hacer pruebas de migracion del script a otras regiones, pero eso lo haremos mas adelante.

Visualizar Texto dentro de objeto (también llamado Prim) dentro de un mundo virtual como Second Life parecería fácil, desafortunadamente no existen funciones que permitan escribir directamente texto sobre un objeto y no existe forma de cargar una textura generada dinamicamente con el contenido texto, tampoco existe una forma de generar la imagen de forma externa y cargarla directamente dentro del objeto; por este motivo mucho del contenido encontrado dentro de los mundos virtuales son imágenes con el texto a visualizar que son generadas con editores de imagen y que son subidas al simulador de Second Life por $10 Lindens cada una, pero afortunadamente existe una forma de visualizar texto dentro de un objeto en Second Life.

Probando Scripts para la Visualizacion de Texto

Algunas Formas :

• Un letra por Objeto :
  Crear una textura (imagen de 512x512 pixeles) con los caracteres del abacedario a utilizar en la fuente a utilizar, se pueden crear una textura mas grande si el conjunto de letras es muy extenso o varias texturas con diferentes conjuntos de letras, como también se pueden crear texturas por cada fuente a utilizar aunque se recomienda utilizar fuentes donde los caracteres tengan las mismas dimensiones ya que todos aparecerán dentro de objetos del mismo tamaño que conforma el mensaje a utilizar. Luego se debe crear un script que asigne a cada objeto la letra que se quiere visualizar, calculado su posición dentro de la textura y aplicarla al objeto.  Lo malo de esta estrategia es que para mostrar el mensaje "Hola Mundo" se necesitarían diez objetos para la construcción del visor, así que si queremos un tablero de 180 caracteres debemos tener 180 objetos lo cual es una gran cantidad debido a que este recurso es limitado y degrada el desempeño del servidor del mundo virtual.
• Una Letra por Lado del Objeto :
  Esta estrategia permite colocar varias letras dentro del mismo objeto, esto se logra tomando el objeto cubo que tiene seis caras (en cada cara se puede colocar una textura diferente) y aplanando este, para que por un lado se puedan ver hasta cinco texturas, esto se logra deformando el cubo con las herramientas de edición, una vez que tenemos el cubo podemos colocar un carácter en cada cara, logrando tener un máximo de cinco caracteres por cada objeto, de esta manera podemos colocar el mensaje "Hola Mundo" utilizando dos objetos lo que reduce en una quinta parte el uso de prims y se reduce a una textura con el conjunto de caracteres a visualizar.
• Varias Letras por Lado del Objeto :
  Otra estrategia a utilizar es colocar dos caracteres por cada cara del objeto, en este caso podríamos obtener diez caracteres y nueva mente reducimos a la mitad el consumo de objetos para la visualización de texto, aunque aumenta el numero de texturas a utilizar ya que debemos crear todas las posibles combinaciones de dos letras lo cual nos demanda una gran cantidad de texturas pero reduciendo el numero de objetos a utilizar. Esta ultima estrategia es la mas usada en la visualización de texto dentro de objetos de SecondLife y de cual existen varios scripts.

Scripts Disponibles en Second Life :

• XyText
  Script que permite visualizar hasta 6 caracteres en un prim.
  http://lslwiki.net/lslwiki/wakka.php?wakka=XyText
• XyText 1.5
  Permite visualizar 10 caracteres en un prim, usa 66 texturas
  http://wiki.secondlife.com/wiki/XyText
• XyText-UTF8
  Permite el uso de caracteres unicode
  http://wiki.secondlife.com/wiki/XyText-UTF8
• ZZText
  Permite visualizar 10 caracteres en un prim, usa 35 texturas
  Se puede crear texturas propias con caracteres especiales
  Mas rápida y eficiente que otras versiones
  http://wiki.secondlife.com/wiki/ZZText
• XyzzyText
  Permite visualizar 10 caracteres en un prim, usa 66 texturas
  Se deben nombrar cada celda con nombres especificos
  Versión mas Eficiente que XyText
  http://wiki.secondlife.com/wiki/XyzzyText
• XyzzyText-UTF8
  Permite el uso de caracteres unicode
  http://wiki.secondlife.com/wiki/XyText-UTF8
• XyyyyzText
  Permite visualizar 10 caracteres en un prim, usa 66 texturas
  No se necesitan renombrar las celdas, enlace automático, multilinea
  Versión mas Eficiente que XyText
  http://wiki.secondlife.com/wiki/XyyyyzText

Existen gran cantidad de soluciones para este problema, algunas utilizan mas recursos como prims y scripts lo que puede causar que el rendimiento del simulador se vea afectado (LAG), mientras otras versiones utilizan mas recursos como texturas que no afectan el funcionamiento del simulador pero afectan al cliente, el cual debe descargar gran cantidad de texturas para poder visualizar la información, otro problema adicional es la necesidad de crear nuevas texturas de acuerdo al conjunto de caracteres que se necesitan y aunque los scripts con soporte de UTF mejoran el uso de caracteres especiales, se deben crear las texturas necesarias para su visualización.

Se tomo la decisión de probar XyyyyzText para la creacion basica de los tableros de texto mas adelante se explorara con mas detalle la creación dinámica de texto utilizando otras herramientas.