Framework Cross Platform para el desarrollo de
aplicaciones empresariales en Large Screen Surfaces
Alonso G. De la Fuente Carrión
Facultad de Ingeniería, Universidad Peruana de
Ciencias Aplicadas
Lima, Perú
U201013634@upc.edu.pe
RESUMEN
En estos últimos años se ha incrementado el interés por el
desarrollo de aplicaciones en grandes superficies que
permitan interactuar con el usuario mediante gestos y
multitoque, es así como surgen los dispositivos large screen
surfaces. Debido a la actual tarea de desarrollar
aplicaciones que dependan de frameworks privativos y de
tener que reescribir el código para portar el proyecto a
múltiples plataformas, hemos visto como oportunidad la
implementación de un framework cross platform para el
desarollo de aplicaciones empresariales diseñado para
soportar dicha tecnología. El framework busca aportar
características como la orientación del dispositivo, la
implementación de líneas de diseño, módulos escalables y
componentes gráficos que frameworks similares no poseen,
y que permiten al programador agilizar la creación del
software y mejorar su productividad. En este paper se
presenta los procedimientos para la creación del framework
y la implementación de dos aplicaciones que validan las
funcionalidades del mismo.
Author Keywords
Large screen devices; framework; cross platform;
enterprises.
ACM Classification Keywords
H.5.2 User Interfaces: Input devices and strategies (e.g.,
mouse, touchscreen).
INTRODUCTION
En los últimos años, ha surgido una tecnología llamada
Large Screen Computers o Large Screen Surfaces (en
adelante LSS), el cual es definida por Gartner como
pantallas de gran tamaño que soportan la interacción directa
mediante el tacto o gestos. Estas pantallas pueden estar en
orientación tanto vertical como horizontal e incorporan
elementos de interacción multitouch que se encuentran en
Permission to make digital or hard copies of all or part of this work for
personal or classroom use is granted without fee provided that copies are
not made or distributed for profit or commercial advantage and that copies
bear this notice and the full citation on the first page. Copyrights for
components of this work owned by others than the author(s) must be
honored. Abstracting with credit is permitted. To copy otherwise, or
republish, to post on servers or to redistribute to lists, requires prior
specific permission and/or a fee. Request permissions from
Permissions@acm.org.
ISS’16, November 06 - 09, 2016, Niagara Falls, ON, Canada Copyright is
held by the owner/author(s). Publication rights licensed to ACM.
ACM
DOI:
Miguel E. Cuadros Gálvez
Facultad de Ingeniería, Universidad Peruana de
Ciencias Aplicadas
Lima, Perú
U811176@upc.edu.pe
dispositivos “de mano” como los smartphones o tablets,
pero a diferencia de estos, reconocen múltiples usuarios,
permitiendo realizar trabajos colaborativos. El tamaño está
restringido a la habilidad de físicamente alcanzar toda la
superficie. Las pantallas más grandes usualmente soportan
una interface gestual, donde el usuario no necesita
físicamente tocar la superficie [1].
El desarrollo en dispositivos con pantallas de gran tamaño
se remonta a la década de los 90’, donde se comienza a
evidenciar las primeras investigaciones sobre interacciones
con superficies, como el caso de la Digital Desk, un intento
de fusionar el mundo físico con el mundo electrónico,
dando como resultado una mesa digital donde el usuario
puede manipular objetos físicos y electrónicos cambiando
de esta manera una estación de trabajo convencional [2];
pero debido a las limitantes de ese tiempo, como la baja
resolución de los dispositivos, baja capacidad de
procesamiento e interactividad touch limitada, las
aplicaciones para esta tecnología quedaron relegadas varios
años.
Actualmente se está incrementando la cantidad de
aplicaciones y dispositivos LSS como dispositivos que
reconocen los gestos de mano basados en la detección de
marcadores de color (rojo, azul, amarillo y verde) montado
sobre los dos manos realizados por el usuario [3], un LSS
que sirve de centro de colaboración e intercambio de
información entre distintos dispositivos periféricos para un
centro inteligente de respuestas de emergencias [4], un
sistema conformado por LSS y realidad aumentada para la
enseñanza de anatomía [5], una aplicación para la edición
de audio [6], entre otras.
Cada una de estas aplicaciones o soluciones fueron
desarrolladas bajo su propio SDK, framework, lenguaje de
programación y lineamientos de diseño, en algunos casos
orientados más a los usuarios que en otros (experiencia de
usuario). Además, existen propuestas independientes de
experiencia de usuario para LSS, como el caso de Remy,
quien propone patrones de diseño de comunicación para
IHC (Interacción Humano Computadora) a manera de guía
tanto para los diseñadores como desarrolladores de
aplicaciones y de esta manera aumentar la eficacia de sus
tareas [7].
A raíz de este crecimiento sin un estándar, si una persona
desea desarrollar una aplicación para LSS, debe de
seleccionar el dispositivo en el que se desplegará, puesto
que no es lo mismo desarrollar para otro distinto. Cada
framework de desarrollo está enfocado exclusivamente en
el dispositivo de cada fabricante y eso limita el despliegue
de cada aplicación y su alcance. Además, cada vez que un
equipo de desarrollo desee desarrollar la aplicación en un
dispositivo donde no han desplegado anteriormente,
deberán de pasar por una etapa de aprendizaje del
framework de dicho dispositivo.
Existen esfuerzos para resolver este problema como
Tactive, un Framework Cross Platform para el desarrollo en
Tabletop que utiliza tecnologías web como HTML5, CSS3
y JavaScript, pero solo es válido para dispositivos de 42” o
más, además que los Tabletop son LSS pero de orientación
horizontal, es decir, a modo de mesa [13].
En este artículo presentamos un framework llamado Large
Screen Framework (LSF), diseñado y construido para el
desarrollo de aplicaciones en LSS, sin restricción de la
orientación o tamaño de este. LSF es un framework cross-
platform que permita facilitar el desarrollo de aplicaciones
empresariales, de manera que la aplicación pueda
desplegarse en variedad de plataformas, ahorrando recursos
en el desarrollo de una aplicación y darle la opción de
incrementar su alcance. También contempla lineamientos
de diseño orientado al público empresarial, de esta forma
que la experiencia de usuario se asegura para dichos
usuarios. Para tal fin utilizamos tecnologías web como
HTML5, CSS3 y JavaScript, de tal manera que abstraemos
la dificultad de la capa de frontend, y simplificamos la
lógica de la conexión con el backend.
El artículo se organiza en 6 secciones. En la sección 2, se
describen los trabajos relacionados referentes a frameworks
para LSS. En la sección 3, se presenta al LSF, donde se
detalla los lineamientos de diseño que utiliza, la
construcción del dispositivo LSS necesario para las pruebas
y su respectivo diseño. En la sección 4, se explica la
validación del LSF. En la sección 5, se presentan las
conclusiones. Por último, en la sección 6, se presentan los
agradecimientos a las personas que apoyaron nuestra
solución.
TRABAJOS RELACIONADOS
Dispositivos LSS
Martinez-Maldonado presenta un modelo conceptual
llamado Tabletop Supported Collaborative Learning
(TSCL), el cual proporciona las bases para la construcción
de sistemas basados en tabletops los cuales apoyan el
trabajo colaborativo [8].
Por otro lado, Dalsgaard construyó un dispositivo Large
Screen Surfaces a manera de mesa (tabletop), el cual
funciona combinando interacciones reales del usuario con
la proyección 3D [9].
Por su parte, Chen construyó un dispositivo para ser usado
de manera colaborativa dentro de un salón de clases
utilizando como base un mando de Wii y sensores de
radiación infrarroja. Además, propone una serie de
lineamientos que debe de seguir toda aplicación para Large
Screen Surfaces con el fin de permitir una alta experiencia
de usuario [10].
Bellarbi propone un método de reconocimiento de gesto de
mano basado en la detección de marcadores de color (rojo,
azul, amarillo y verde) montado sobre las dos manos y, de
esta manera, el usuario puede realizar diferentes gestos
como zoom, mover, sorteo y escribir en un teclado virtual.
Para esto construyó un dispositivo tabletop con base en un
proyector y una cámara web para reconocer los gestos
realizados por el usuario [3].
Frameworks para LSS
Ho Lee desarrolló un software que permite una correcta
visualización en dispositivos Large Screen Surfaces, el cual
trabaja usando un método de visualización de contenido
llamado SpreadView [11].
Por su parte, Liu diseñó e implementó un sistema que se
compone de una pantalla grande, un tablero de mesa
compartido que actúa como el medio principal de la
colaboración (LSS), y un mecanismo de intercambio de
interfase de usuario para la conexión de dispositivos
periféricos con el tabletop en un espacio inteligente para
una respuesta rápida, eficiente y eficaz de una emergencia.
Para tal fin, creó el framework uPlatform [4].
Lilis presenta un framework implementado y orientado para
el desarrollo de juegos tipo "juegos de mesa" para tabletops
con soporte multimodal. Dicho framework brinda la
capacidad de mediante "bloques" poder crear todo el
ecosistema de juego, optimizado para superficies grandes
con interacción touch y varios jugadores por turnos [12].
Por su parte, Gaggi propone a Tactive, framework cross
platform, que permite, bajo tecnologías web, poder
encapsular aplicaciones en widgets preparados para
interfaces multitouch, permitiendo abstraer la complejidad
del hardware y software proveyendo una API Javascript
orientada al control de los gestos. Soporta hasta cinco
gestos. Las características que abarca son: reconocimiento
de gestos, orientación de la interfaz y manejo de ventanas
[13].
Tobias presenta a TULIP, framework para el desarrollo de
aplicaciones basado en Computer Vision (concepto que
permite reconocer formas y objetos mediante la
computadora). Básicamente, permite el uso de la colocación
de elementos en el tabletop que signifiquen cosas para el
desarrollador y, a modo de piezas, poder ejecutar
funcionalidades al ser reconocidas por el framework [14].
Experiencia de usuario para LSS
Scott presenta ocho directrices de diseño para una
colaboración eficaz, basándose en los tabletops. Son: (1) la
interacción interpersonal natural, (2) las transiciones entre
las actividades, (3) las transiciones entre el trabajo personal
y de grupo, (4) transiciones entre colaboración de mesa y
trabajo externo, (5) uso de objetos físicos, (6) acceso a
compartir objetos físicos y digitales, (7) disposiciones
flexibles del usuario, y (8) interacciones simultáneas del
usuario [15].
Remy, por su parte, propone patrones de diseño de
comunicación para IHC (Interacción Humano
Computadora) a manera de guía tanto para los diseñadores
como desarrolladores de aplicaciones para Large Screen
Surfaces y, de esta manera, aumentar la eficacia de sus
tareas [7].
Por otro lado, Collins presenta las funcionalidades básicas
de un tablero interactivo, así como los gestos y las formas
de interacción entre el usuario y el dispositivo [16].
Aplicaciones para LSS
Papadopoulos elaboró una aplicación para enseñar árabe
utilizando un tabletop a niños de 5 años [17].
Por su parte, Kubicki realizó una aplicación para tabletop
con tecnología RFID llamado TangiSense que se basa en un
sistema multi-agente que permite a los usuarios asociar
información con comportamientos para manipular objetos
tangibles. La aplicación implica el reconocimiento de
colores básicos, en donde los niños deben manipular
objetos tangibles [18].
Baldassarri propone ImmertableApp, una innovadora
interfaz multimodal basada en interacción tangible para
edición de audio a partir de una interfaz proporcionada por
un tabletop [6].
Codd-Downey propone un sistema para el aprendizaje de
anatomía y para tal efecto proporciona un tabletop común
donde se brinda una vista global de un modelo anatómico
con la que los usuarios pueden interactuar. Además, cada
usuario tiene acceso al modelo a través de un dispositivo
móvil que está sincronizado, permitiéndole tener una vista
personalizada [5].
PROPUESTA
En el presente capítulo se mostrarán tanto los
requerimientos de hardware y software que se utilizaron
para el desarrollo del framework LSF, además, se revisarán
los lineamientos en los cuales nuestro proyecto está basado.
Lineamientos de diseño
 Orientación de pantalla: La orientación de la pantalla va a
depender del tipo de programa que se quiera utilizar y
varía ampliamente su uso, tanto si se está en vertical o si
se encuentra horizontalmente respecto al punto de vista
de la persona. La orientación vertical sugiere aplicaciones
explicativas tales como presentaciones a una audiencia o
en sesiones de clase. También puede usarse este modo
para simular entornos cotidianos como un centro de notas
adhesivas, listas to-do, entre otras. Por otro lado, la
orientación horizontal sugiere entornos colaborativos, en
los cuales varios usuarios rodean lados de la pantalla
como parte de su espacio de trabajo.
 Capacidad Multiusuario: Una de las capacidades de estos
dispositivos de pantallas de gran tamaño es el de poder
trabajar en equipo, de manera simultánea. Es este quizás
uno de los diferenciadores más fuertes con respecto a los
equipos de sobremesa, o dispositivos móviles, ya que el
tamaño de la pantalla y la capacidad táctil permite que de
manera natural se pueda desarrollar actividades
colectivas.
 Escalamiento: El escalamiento va directamente
relacionado con las diversas densidades de pantalla. Se
debe asegurar la legibilidad y uniformidad de
presentaciones en diversidad de dispositivos, presentando
una interfaz similar en tamaño y distribución,
independientemente de los píxeles por pulgada de la
pantalla (ppi). Debido a que la tecnología Web a través
de CSS ya implementa esta solución a través de los
viewport, se tomarán los elementos con px, símbolo de la
unidad de píxel, a diferencia de soluciones nativas de
Android que suelen usar dp.
 Gestos: Son el lenguaje por el cual el usuario puede
interactuar con la interfaz sin necesidad de presionar
botones, los gestos son movimientos uno o varios dedos,
en formas que reflejen acciones o experiencias cotidianas
o intuitivas. Se presenta un set de gestos basado en el
estudio de selección de estos para Tabletops.
Acción del
Descripción
gesto
Selección Se realiza un toque y se mantiene
simple presionado.
Se realiza el toque de selección
simple en el primer objeto seguido
Selección
de toques rápidos con la otra mano
múltiple
en los demás objetos, quedando
seleccionados.
Manteniendo el objeto presionado
Deslizamiento se desliza hacia la ubicación
deseada.
Utilizando 4 dedos (simulando la
Paneo colocación de la mano) se desliza
todo el ambiente de trabajo.
Se coloca el dedo en una de las
Rotación esquinas y se comienza a girar
desde ese punto seleccionado.
Se coloca el dedo en la pantalla de
Pegar desde
origen y se arrastra hasta llegar a la
origen remoto
pantalla de destino.
 Acción del
Descripción
gesto
Arrastrar el elemento fuera de la
pantalla o del espacio de trabajo y
Eliminar
esperar a que el objeto se torne
rojizo y soltar.
Al estirar en sentidos contrarios los
Zoom dedos, ya sea de una o de los dos
índices de cada mano.
Se realiza un doble toque sobre el
Abrir
elemento a abrir.
Se realiza un gesto desde el objeto
hacia la zona de minimización (debe
Minimizar
estar ubicada cerca de alguno de los
lados).
Tabla 1. Listado de gestos

 Notificaciones: Informan a los usuarios acerca de los

eventos en su aplicación mientras el usuario se centra en Figura 1. Estructura del Large Screen Framework.
otro lugar. Ya que pueden ser interruptoras, utilizar las
notificaciones juiciosamente. Las notificaciones no deben Información de
Módulo Responsabilidad
ser usadas para información que se encuentra actualmente Implementación
en la pantalla u operaciones técnicas que no requieren la Sistema Host donde está
participación de los usuarios. Además, los usuarios deben Operativo soportado el Sistema Operativo
siempre tener el control sobre las notificaciones al framework.
permitirles desactivar o cambiar su configuración en la Navegador Aplicación donde
aplicación. se ejecuta el Aplicación
 Espacios Privados: Los espacios privados en los Large framework.
Screen Surfaces vienen a ser regiones definidas y JQuery Librería que
resaltadas donde cada usuario pueda tener y manipular permite
sus propios elementos. Estos espacios podrán identificar a interconectar el Librería
todos sus elementos hijos y poder tener control exclusivo DOM al
sobre ellos. framework.
Framework LSF Annyang Librería que
La elaboración del Framework está compuesta por 2 partes permite realizar el
principales, primero el modelo de implementación del reconocimiento de
Hardware, y como segundo punto la implementación y uso voz y poder Librería
del modelo lógico. A continuación, se presenta la ejecutar eventos
interrelación del framework dentro de una solución web, y con base en dicho
como se relaciona con otros componentes y librerías para su reconocimiento.
funcionamiento.
Large Framework que
Screen permite integrar
Framework las funciones
necesarias de
conectividad,
gestos, espacios
Framework
de trabajo y
reconocimiento de
voz para realizar
aplicaciones para
Large Screen
Surfaces.
 Información de  Proyector Multimedia: Excelvan 800 lúmenes 1366x768
Módulo Responsabilidad @60hz.
Implementación
Aplicación Aplicación que se  Marco de Soporte: Madera Tornillo diagonal, 60’’
Web conecta al diagonal interna.
framework y que  Filmina para Proyección: Filmina marca Defytech.
desarrolla el  Vidrio: Templado de 6mm de espesor y laminado por la
Aplicación parte superior.
programador para
realizar algún  Marco Táctil: Marca DefyTech, 10 puntos de toque,
sistema 60’’diagonal, reconocimiento vía tecnología infrarroja.
específico.
Para el despliegue del dispositivo LSS, se necesita el
Tabla 2. Descripción de los módulos del framework.
siguiente hardware:
Acción del
Descripción  Superficie con reconocimiento táctil.
gesto
Computadora Encargada de hospedar el  Proyección de rango entre 45’’ a más.
Cliente Framework Lógico para el  Arquitectura x86 – x64.
despliegue de Soluciones LSS.
Implementación del Framework Lógico
IR Componente encargado de brindar La construcción Framework Lógico se desarrolló con el fin
TouchFrame gestos multitoque sobre la de proporcionar un conjunto de funcionalidades genéricas
superficie LSS. que, con base en las investigaciones realizadas, son
Proyector Componente encargado de esenciales para desarrollar aplicaciones para este tipo de
transmitir las imágenes desde el dispositivos. Estas funcionalidades se han separado en
computador hasta la superficie cuatro módulos que se explicarán a continuación:
táctil.
 Connectivity: Brinda la facilidad de poder conectarse vía
Google Speech Componente encargado de procesar WebRTC o Websockets con cualquier servidor que siga
API los comandos de voz en texto dichos estándares. Con este módulo, el desarrollador
enviados desde la librería Annyang. puede ser capaz de interconectar en tiempo real entre
Mozilla Stun Componente encargado para recibir varias instancias de la misma aplicación, permitiendo
Server una señal WebRTC para obtener la interactuar entre ellas. Ejemplos de implementación de
IP Local de la computadora. ello podría ser un chat.
Tabla 3. Descripción de los componentes físicos del  Gestures: Brinda la capacidad de poder establecer
framework. métodos propios para la gestión de los gestos diseñados
para Large Screen Surfaces. Con este módulo, el
Implementación del dispositivo
Se procedió a armar el un dispositivo de 60’’ multitoque, desarrollador puede ser capaz de gestionar de manera
con reconocimiento de puntos mediante una grilla de leds nativa los gestos del navegador y así poder manejar
infrarrojos, soportada en un marco de madera y un vidrio múltiples gestos al mismo tiempo sobrescribiendo los
templado con una filmina para proyección. Ya en la parte gestos que vienen por defecto del navegador y teniendo
posterior, se colocó un proyector que envía las imágenes al control total sobre ellos. En el ejemplo inferior, se
marco, quedando la distribución de la siguiente manera: muestra una prueba realizada en la cual los cuadros
verdes podían girar, rotar y desplazarse de manera
independiente presionando sobre ellos y arrastrándolos a
cualquier lugar de la pantalla. Dichos cuadrados se
podían mover todos al mismo tiempo, de manera
independiente uno del otro.
 SpeechRecognition: Brinda la capacidad de poder usar la
voz como comandos para poder aumentar la
productividad y realizar tareas de manera sencilla. Con
este módulo el desarrollar puede desarrollar aplicaciones
o funcionalidades que se activen con la voz y, por
ejemplo, poder acceder a secciones del dispositivo que no
puede alcanzar o mostrar u ocultar secciones específicas
del área de trabajo.
Figura 2. Explode View del dispositivo LSS
 Workspaces: Brinda la logística para poder brindar la interconectar y facilitar al desarrollador la creación de
capacidad de uso del Large Screen Surface a más de una aplicaciones móviles que necesiten interactuar con
persona. Este módulo también permite activar un teclado dispositivos Large Screen Surfaces.
propio para cada espacio, lo que permite a múltiples
Un ejemplo de desarrollo con el framework es UPC
usuarios interactuar con el dispositivo al mismo tiempo.
Timeline, aplicación que fue diseñada para mostrar líneas
En el ejemplo, se muestran 2 espacios de trabajos cada
de tiempo interactivas que el usuario puede ir revisando y
uno con su propio teclado. Cada teclado solo interactúa
poder seleccionar un evento en especial, arrastrarlo hacia
con los elementos que estén dentro del mismo workspace.
su celular y compartir con este la línea de tiempo desde
Para poder desplegar el framework, se necesitan los ese punto, permitiendo a la persona seguir revisando la
siguientes requisitos de software: información aun cuando ya terminó de usar la aplicación
 Google Chrome 47+ en el Surface Computer.
 Chrome para Android 49+
 Firefox 44+
 NodeJS (para funcionalidad de servidor websocket) 45’’
a más.
Proceso de implementación
A continuación, se muestra el proceso de implementación
del Framework LSF:
1. Proceder a la construcción del dispositivo, según lo
especificado en Implementación del dispositivo.
2. Proceder con la instalación de los requerimientos de Figura 3. UPC Timeline
software explicado en Implementación del framework
lógico. VALIDACIÓN DE LA SOLUCIÓN
Para validar el framework LSF, se desarrolló una aplicación
3. Descargar el framework desde el repositorio y dos pruebas de concepto. La aplicación con el fin de
https://bitbucket.org/mikicegal/large-screen- validar que las tecnologías web cubrían las necesidades
framework/downloads y descomprimir el archivo básicas para desarrollar el framework. Las dos pruebas de
lsf.css y lsf.js en el proyecto a desarrollar. concepto fueron desarrolladas con base en el framework,
4. Revisar la documentación en la carpeta descomprimida cada una con un fin específico.
lsf\doc\index.html para encontrar la ayuda y Casos de estudio
documentación necesaria. Se construyó una aplicación antecedente llamada “Concept
Ámbito de trabajo Kitchen”. Con esta aplicación validamos que los
El uso de este framework está pensado para poder requerimientos necesarios para desarrollar el framework
ejecutarse en cualquier plataforma, debido a que está cumplen los lineamientos de diseño propuestos. Su objetivo
programado enteramente en Javascript y bajo estándares es identificar ingredientes de cocina y brindar su
Web, puede ser adaptado para poder usarse en los información básica como: la cantidad, peso, calorías y las
siguientes escenarios: vitaminas y minerales asociadas a estas. Con esto se busca
ayudar al usuario a elaborar dietas más balanceadas. Esta
 Aplicaciones Web: Se pueden crear Web Apps capaces aplicación está desarrollada bajo un entorno web y con
de explotar el potencial del Large Screen Surfaces, tecnologías front end (HTML5, CSS3, JavaScript) y back
brindando todas las funcionalidades desde el navegador. end (C# con SignalR y .Net Framework). Para ver en
 Aplicaciones de Escritorio: LSF Se puede envolver funcionamiento el proyecto, se puede visitar el siguiente
dentro de aplicaciones en paquetes ejecutables tanto de link: https://www.youtube.com/watch?v=NOBzmxjf1Iw.
Windows, como Mac y Linux. Herramientas como
Electron.io hacen posible el despliegue de estas
soluciones y el Framework se puede adaptar sin
problemas a este tipo de desarrollo.
 Aplicaciones Móviles: Si bien el Large Screen
Framework no está diseñado para usarse enteramente en
dispositivos móviles, sí puede usarse parte de las
funcionalidades, como la gestión de gestos, la
conectividad y el reconocimiento de voz, para poder

Figura 4. Concept Kitchen
La primera aplicación desarrollada con el Framework se
llama “UPC Timeline”, esta tiene como base el framework
LSF y su objetivo es mostrar una línea de tiempo interactiva
donde se permite al usuario navegar entre varias líneas de
tiempo y darle la capacidad de llevarse la información
contenida en el timeline a su celular desde el último evento
que visualizó en el LSS.
Figura 5. UPC Timeline
La segunda aplicación desarrollada se llama “UPC
Composer”, la cual funciona como un editor de páginas
web táctil. Una característica única de esta solución es que
permite el desarrollo de diferentes proyectos de manera
paralela, partiendo la pantalla en dos.
Figura 6. UPC Composer
Procedimiento y observación
Dentro de cada aplicación se han usado componentes
específicos del framework para verificar su funcionamiento.
Cada componente cumple un rol específico dentro del
proceso de desarrollo. También se mostrará cómo funciona
cada módulo seleccionado de manera independiente
mediante un ejemplo genérico.
Resultados
A partir del dispositivo construido, se procedió a armar el
sistema, es decir, colocar el LSS a una distancia de 1.5 mts
del proyector y dicho proyector conectado a la
computadora. Una vez validadas todas las conexiones
físicas, se procedió a ejecutar UPC Timeline, el cual usa el
componente de Conectividad.
El módulo de Conectividad permite enviar y recibir
información en formato JSON, dentro de las
funcionalidades se encuentra la habilidad de encontrar la IP
local de la computadora y poder buscar, con base en dicha
IP, todos los servidores locales a los cuales poder
conectarse. Además, gestiona la capacidad de enviar textos,
archivos, imágenes, tramas de error y tramas customizables.
Figura 7. Prueba del módulo de conectividad.
Como se aprecia en la imagen, el módulo de conectividad
puede conectarse y conversar a través de WebSockets con
cualquier dispositivo, como por ejemplo dispositivos
móviles.1
Para la segunda aplicación, “UPC Composer” se desarrolló
para tener productividad en este tipo de aplicaciones puesto
que, a diferencia de la primera aplicación, que solo se
limitaba a consumir información, esta permite el desarrollo
de páginas web. Se procedió a ejecutar el desarrollo con
base en los módulos de gestos y de espacios de trabajo.
El primer módulo mencionado permite implementar los
gestos básicos de manera nativa (scroll, zoom, selección
simple y múltiple, rotación y eliminación) de manera que se
puedan realizar dichas acciones de manera independiente,
pudiendo tener a muchas personas interactuando con
diferentes objetos.
1
https://www.youtube.com/watch?v=ozVyPruX78w
 Figura 8. Prueba del módulo de gestos.
Como se ve en la imagen se pueden mover rotar de manera
independiente cada cuadrado habilitando el uso
multiusuario.2
El segundo módulo del framework lógico usado en este
proyecto permite activar espacios de trabajo, donde cada
uno permite la interacción de contenido por usuario dentro
de un área destinada para su uso exclusivo. Se le habilita de
manera automática un teclado virtual por cada workspace
con capacidad de actuación dentro del ámbito de creación.
Figura 9. Prueba del módulo de workspaces
Como se puede apreciar en el ejemplo, se tiene 2 espacios
de trabajo, separados por colores, que permite tener cada
uno su propio teclado, y solo tienen alcance para poder
escribir dentro del input de su propio espacio.3
Además, existe un cuarto módulo llamado Speech
Recognition el cual, haciendo uso de la librería Annyang,
permite el reconocimiento de comandos de voz y poder
ejecutar una acción.
2
https://www.youtube.com/watch?v=QbTs-7WYWUg
3 4
https://www.youtube.com/watch?v=X6GDMUQ72N8
Figura 10. Prueba del reconocimiento de voz.
Como se aprecia en la imagen, según comandos de voz
pueden mostrarse cuadrados del 1 al 10 al decir la orden, de
igual manera si se quiere pintar los cuadros de otro color.4
Beneficios
LSF brinda un ahorro en términos de codificación e
implementación de funcionalidades básicas en el desarrollo
de aplicaciones para LSS. LSF trae consigo mejoras al
desarrollo de aplicaciones, ya que permite abstraer la
complejidad de las funcionalidades porque fueron
implementadas en una capa de software, de esta manera
permite interactuar con cualquier LSS. Dicho de otra forma,
nuestro framework define una serie de funciones comunes a
todas las soluciones LSS y permite ordenar el código
haciéndolo un proyecto escalable.
Aunque el LSF no considera características que están
disponibles solo en configuraciones especiales o que posean
hardware adicional privativo, el API del código ha sido
desarrollado para elaborar futuras mejoras y reducir esta
limitación.
CONCLUSION
En este artículo presentamos LSF, un framework que
permite brindar funcionalidades agrupadas en 4 módulos,
conectividad en tiempo real, reconocimiento de comandos
de voz, capacidad multiusuario en paralelo y gestos
mostrado en un dispositivo LSS en modo pizarra de 60''.
De esta manera, LSF permite el desarrollo de aplicaciones
empresariales con la capacidad de desplegarse en diferentes
plataformas LSS, además de contemplar lineamientos de
diseño para dicho público. También brinda un proceso de
implementación que incluye hardware y software, pasando
por la construcción de un dispositivo LSS. Finalmente, el
framework lógico del LSF es escalable, donde cada
desarrollador puede crear módulos adicionales a los cuatro
ya existentes.
LSF ha sido validado a través de dos aplicaciones, donde
cada aplicación utilizó diferentes módulos del framework
lógico y fueron probados en el dispositivo LSS construido
para tal caso. También se realizaron pruebas individuales a
cada módulo creado para asegurar su buen funcionamiento.
https://www.youtube.com/watch?v=5IXSoRm1cQ4
LSF y su documentación se encuentran disponibles en
Bitbucket para beneficiar a otros investigadores o
desarrolladores en LSS.
AGRADECIMIENTOS
Se agradece al Dr. David Mauricio por la orientación y
apoyo en la construcción del presente artículo científico, al
Profesor Alfredo Barrientos por su guía, apoyo y consejos
en el desarrollo de la investigación, a Marco Florian y Juan
Carlos Ramos por las ideas aportadas, así como la
implementación de las aplicaciones desarrolladas a Kamila
Flores, Mariano Ponce, Ana Lucía Lira por su apoyo
brindado en el aporte gráfico y diseño de las ilustraciones e
interfaces de las aplicaciones y a la Escuela de Ingeniería de
Sistemas y Computación de la Universidad Peruana de
Ciencias Aplicadas por brindar los recursos necesarios para
poder implementar el dispositivo LSS.
REFERENCIAS
1. GARTNER – IT Glossary from
http://www.gartner.com/it-glossary/surface-computers
2. Pierre Wellner. 1991. The DigitalDesk calculator:
tangible manipulation on a desk top display. In
Proceedings of the 4th annual ACM symposium on
User interface software and technology (UIST'91).
ACM Press, New York, NY, 27-33.
DOI:http://dx.doi.org/10.1145/120782.120785
3. Abdelkader Bellarbi, Samir Benbelkacem, Nadia
Zenati-Henda and Mahmoud Belhocine. 2011. Hand
Gesture Interaction Using Color-Based Method For
Tabletop Interfaces. In Proceedings of the IEEE 7th
International Symposium on Intelligent Signal
Processing (WISP). IEEE, Floriana, 1-6.
DOI:http://dx.doi.org/10.1109/WISP.2011.6051717
4. Jie Liu, Yongqiang Qin, Qiang Yang and Chun
Yu. 2015. A Tabletop-Centric Smart Space for
Emergency Response. IEEE Pervasive Computing 14,
2 (Abril 2015), 32-40.
DOI:http://dx.doi.org/10.1109/MPRV.2015.24
5. R. Codd-Downey, R. Shewaga, A. Uribe-Quevedo
and B. Kapralos, 2016, A Novel Tabletop and Tablet-
Based Display System to Support Learner-Centric
Ophthalmic Anatomy Education In Proceedings of the
Augmented Reality, Virtual Reality and Computer
Graphics Third International Conference, AVR 2016,
Lecce, Italy, June 15-18, 2016. Proceedings, Part II,
Lucio Tommaso De Paolis, Antonio Mongelli (eds.).
Springer International, Switzerland, 3-12.
6. Sandra Baldassarri , Javier Marco, Clara Bonillo,
Eva Cerezo and José Ramón Beltrán, 2016,
ImmertableApp: Interactive and Tangible Learning
Music Environment In Human-Computer Interaction.
Novel User Experiences 18th International
Conference, HCI International 2016, Toronto, ON,
Canada, July 17-22, 2016. Proceedings, Part III,
Masaaki Kurosu (eds.) Springer International,
Switzerland, 365-376.
7. Christian Remy, Malte Weiss, Martina Ziefle and
Jan Borchers. 2010. A Pattern Language for Interactive
Tabletops in Collaborative. In Proceedings of the 15th
European Conference on Pattern Languages of
Programs (EuroPLoP '10). ACM Press, New York,
NY, 1-48.
DOI:http://dx.doi.org/10.1145/2328909.2328921
8. Roberto Martinez-Maldonado, Kalina Yacef, Judy
Kay. 2015. TSCL: A conceptual model to inform
understanding of collaborative learning processes at
interactive tabletops. International Journal of Human-
Computer Studies 83 C: 62-82.
9. Peter Dalsgaard and Kim Halskov. 2011. Tangible
3D Tabletops: Combining Tangible Tabletop
Interaction and 3D Projection. In Proceedings of the
6th Nordic forum for Human-Computer Interaction
(Norchi'12). ACM Press, New York, NY, 42-47.
DOI:http://dx.doi.org/10.1145/2658859
10. Rui Chen, Po-Jui (Ray) Chen, Rui Feng, Yilin
(Eliane) Liu, Andy Wu and Ali Mazalek, 2014.
SciSketch: a tabletop collaborative sketching system.
In Proceedings of the 8th International Conference on
Tangible, Embedded and Embodied Interaction (TEI
'14). ACM Press, New York, NY, 247-250.
DOI:http://dx.doi.org/10.1145/2540930.2540973
11. Ho Lee, J., Kim, H., & Park, J.-H. (2015).
SpreadView: A Multi-touch Based Multiple Contents
Visualization Method Composed of Aligned Layers.
Held as Part of HCI International 2015, (págs. 305-
316). Los Ángeles
12. Yannis Lilis and Anthony Savidis. 2014. An
Integrated Development Framework for Tabletop
Computer Games. Computers in Entertainment (CIE) -
Theoretical and Practical Computer Applications in
Entertainment 12 3: Article 4.
13. Ombretta gai and Marco Regazzo. 2014. Tactive, a
Framework for Cross Platform Development of
Tabletop Applications. In Proceedings of the 10th
International Conference on Web Information Systems
and Technologies (WEBIST). SciTePress, Barcelona,
91-98.
DOI:http://dx.doi.org/10.5220/0004857800910098
14. Eric Tobias, Valérie Maquil and Thibaud Latour.
2015. TULIP: a widget-based software framework for
tangible tabletop interfaces. In Proceedings of the 7th
ACM SIGCHI Symposium on Engineering Interactive
Computing Systems (EICS '15). ACM Press, New
York, NY, 216-221.
DOI:http://dx.doi.org/10.1145/2774225.2775080
15. Stacey D. Scott, Karen D. Grant and Regan L.
Mandryk. 2003. System guidelines for co-located,
collaborative work on a tabletop display. In
Proceedings of the 8th conference on European
Conference on Computer Supported Cooperative Work
(ECSCW'03). Kluwer Academic Publishers Norwell,
Massachusetts, MA, 159-178.
DOI:http://dx.doi.org/10.1007/978-94-010-0068-0_9.
16. Anthony Collins, Christopher James Ackad, Trent
Apted, Paul Sztajer, Peter Ward, Hanley Weng and
Judy Kay. 2011. Core functionality and new
applications for tabletops and interactive surfaces. In
Proceedings of the 13th international conference on
Ubiquitous computing (UbiComp'11). ACM Press,
New York, NY, 607-608.
DOI:http://10.1145/2030112.2030237.
17. M. Papadopoulos P., Ibrahim Z. and Karatsolis A,
2014, Teaching the Arabic Alphabet to Kindergarteners
- Writing Activities on Paper and Surface Computers
In Proceedings of the 6th International Conference on
Computer Supported Education, Susan Zvacek, Maria
Teresa Restivo, James Uhomoibhi and Markus Helfert
(eds.). Scitepress?, Spain, 433-439.
18. Sébastien Kubicki, Marion Wolff, Sophie Lepreux
and Christophe Kolski. 2015. RFID interactive tabletop
application with tangible objects: exploratory study to
observe young children’ behaviors. Personal and
Ubiquitous Computing 19 8: 1259-1274.