1 grafiSok Lucía Otero Luis Díaz Huertes Adriana María Suárez Jiménez María Mercedes Paniagua Gómez Marco Antonio Sánchez González Director: Diego Blanco MASTER EN INGENIERÍA DEL SOFTWARE MADRID 29 de Junio de 2010
1
grafiSok
Lucía OteroLuis Díaz Huertes
Adriana María Suárez JiménezMaría Mercedes Paniagua GómezMarco Antonio Sánchez González
Director: Diego Blanco
MASTER EN INGENIERÍA DEL SOFTWARE
MADRID29 de Junio de 2010
2
Overview
Presentación general del framework © grafiSOK
Presentación de la Arquitectura
Presentación de la BBDD utilizada
Librería © grafiSOKMicrocosmos ∮ Macrocosmos
Presentación de Visualizaciones Lucía y LuisArea QuesoRelación QuesoCaracter Waterfall XYLineChart PolarCharPolarChart 3DPieCaracter Barras3D
QuesoRelacionWaterfall
Análisis de pruebas Generación real de videos con © grafiSOK
3
Que es ©grafiSOK?Que es ©grafiSOK?
Framework que nos permite mostrar la evolución en el tiempo de una Red Social mediante diversidad de visualizaciones representadas en vídeos.
Framework que permite integrar fácilmente visualizaciones de redes sociales hechas por usuarios de este framework.
Usos ©grafiSOK©grafiSOKRepresentación de redes socialesAnálisis de redes sociales en el
tiempoGeneración de videos a partir de
visualizaciones de usuarios del framework
5
Descripción de © Descripción de © grafiSOKgrafiSOKEntrada
◦Red social representada en ficheros XML que cumplan con el esquema grafiSOK.xsd
Proceso◦Validación XML y de las visualizaciones◦Ejecución de las visualizaciones para crear
imágenes◦Creación imágenes base para el vídeo
persistidas en una base de datosSalida
◦Video en formato mov
Más de © grafiSOK© grafiSOKHecho en java 6Independencia de frameworks de terceros
Repositorio del proyecto http://code.google.com/p/grafisok/
Librería propia para desarrollar nuevas visualizaciones.
7
Generador XML © grafiSOK
8
Generador XML grafiSOKGenerador XML grafiSOKHerramienta desarrollada en Java
para la generación de XMLs para alimentar el framework © grafiSOK
9
Características del Generador Características del Generador XMLXMLPermite la generación de elementos y
atributos de diferentes formas:◦ Obligatorio◦ Aleatorio◦ Vacío
Valores aleatoriosRelaciones entre nodos aleatoriasMáximo de 99.999 XMLsMáximo de 5.000 nodosElección de la ruta donde generar los
XMLsTodos los XMLs generados son válidos
contra el esquema grafiSOK.xsd
10
Arquitectura© grafiSOK
Multi-tier architecture
Boundary
Usuarios © grafiSOK
Service Interfaces
XMLSok MediaSok
Common
Database
Grupo de almacenamiento
Visualizations developers
Boundary (Usuarios © grafiSOK)
Boundary
+IngresarXML(entrada _xml : bool)+GenerarVideos(entrada _outputURL : string)+CleanDataBase()
Grafisok
Usuarios © grafiSOK import grafisok.boundary.Grafisok;import grafisok.common.exceptions.GrafisokException;import grafisok.common.exceptions.ValidationException;import grafisok.common.exceptions.VideoException;
import java.io.File;
public class MyTest {
public static void main(String[] args) {
try {Grafisok instanciaGrafisok = new Grafisok();
instanciaGrafisok.ingresarXML(new File("FACEBOOK1.XML"),"FACEBOOK", "SEXORBIT", 1L);
instanciaGrafisok.generarVideos("FACEBOOK", "SEXORBIT");
instanciaGrafisok.limpiarBaseDeDatos();
} catch (ValidationException e) {e.printStackTrace();
} catch (GrafisokException e) {e.printStackTrace();
} catch (VideoException e) {e.printStackTrace();
}
}
Core: © grafiSOK
Visualizations developers
XMLSok
Façade, FrontController, Abstract Factory, Builder
MediaSok
Façade, FrontController, Abstract Factory
JAVA MEDIA FRAMEWORK
+executeVisualization() : JComponent
«interface»IVisualization
POJOSBLOB
Creando una visualizacióncon © grafiSOK
Agregar en su classpath mediasok.jar y common.jar
Crear una clase java e implementar la interface IVisualization
En el método executeVisualization implementar la lógica
Retornar el componente donde pinta la red social
Generar un .jar de su visualización
A donde va el JAR de mi visualización?
Al descargarse grafisok se obtiene la siguiente estructura:
Como uso mi visualización?
Visualizations.xml
configurations.xml
Por qué no agrego mi JAR al Por qué no agrego mi JAR al classpath??classpath??Porque todo el framework lo hace
dinámicamente por reflection
17
Limitaciones Limitaciones © grafiSOKJava 6ORM: Implementación JPA de
hibernateJMF 1.2SAX en Java 6.0 (posible solución
temporal, agregando -Xmx1g funciona hasta 1000 nodos)◦ http://bugs.sun.com/bugdatabase/view_bug.do?bug
_id=6536111◦ http://forums.sun.com/thread.jspa?messageID=997
798918
19
Persistencia© grafiSOK
20
Tecnologías usadasTecnologías usadas
MySQL (motor de base de datos open source)
XAMPP (servicio de MySQL)Implementación JPA de Hibernate
(funciona como el patrón DAO, cualquier BD se podría adaptar)◦ JPA es el API de persistencia desarrollada para la
plataforma Java EE e incluida en el estándar EJB3
21
Base de datos de grafiSOKBase de datos de grafiSOK
22
Tabla ImagenTabla Imagen
Guarda la imagen usada para el video
Atributo idImagen PKAtributo frameAtributo imagen (LONGBLOB)Atributo idVisualizacion FK
23
Tabla VisualizacionTabla Visualizacion
Guarda la visualizacion usada y la red social a la que pertenece
Atributo idVisualizacion PKAtributo visualizacionAtributo redSocial
24
Tabla AtributoTabla Atributo
Guarda Atributos de la imagen usada
Atributo idAtributo PKAtributo lastFrameAtributo currentFrame
25
Tabla DetalleAtributoTabla DetalleAtributo
Guarda un atributo del detalle que tiene la imagen
Atributo idDetalleAtributo PKAtributo idAtributo FKAtributo nombreAtributo valor
26
Librerías© grafiSOK
Librería ©grafiSOKLibrería ©grafiSOKCaracterísticasEjemplosMacrocosmos
◦UserCharacterHacia el microcosmos
◦SexOrbit // CharacterOrbitVisualización atómica
27
CaracterísticasCaracterísticasCódigo abiertoFácil de implementar∞ formas de representación
28
EjemplosEjemplosFilosofía
◦Visualizador VisualizationViewer<String,String[]>◦Grafo jung.graph◦Capas layouts (static, circle)◦Usuarios UsersFrame◦Relaciones RelationsUsersFrame◦Filtro FiltraUsersFrame // FiltraRelationsUsersFrame◦Imágenes / geometría
(transparencia, iconos)
29
MicrocosmosMicrocosmos
30
MacrocosmosMacrocosmos
31
32
Visualizaciones© grafiSOK
33
JFreeChartJFreeChartEs una biblioteca libre de Java que facilita a los desarrolladores para mostrar gráficos de calidad en sus aplicaciones.
Incluye:
• Una coherente y bien documentada API.
• Un diseño flexible que es fácil de ampliar, y se dirige tanto del lado del servidor y las aplicaciones como del lado del cliente.
• Apoyo a los tipos de salida, incluyendo los componentes Swing, archivos de imagen (incluyendo PNG y JPEG) y gráficos vectoriales formatos de archivo (incluyendo PDF, EPS y SVG);
• JFreeChart es "fuente abierta" o, más específicamente, es un software libre.
34
La visualización muestra una comparación entre chicos y chicas de los distintos tipos de caracteres.
El azul hace referencia a los chicos y el color morado a las chicas.
AreaArea
35
Muestra las porciones de correspondientes a las diferentes intensidades que posee una relación.
•El color azul muestra la porción correspondiente a la intensidad media.
•El color verde muestra la porción correspondiente a la intensidad baja.
•El color rojo muestra la porción correspondiente a la intensidad alta
QuesoRelacionQuesoRelacion
36
QuesoCaracter
Muestra las porciones de correspondientes a las diferentes caracteres que poseen las personas .
•El color rojo corresponde al carácter calmado•El color azul corresponde al carácter nervioso•El color verde corresponde al carácter agresivo•El color amarillo corresponde al carácter ambicioso•El color fucsia corresponde al carácter introvertido•El color celeste corresponde al carácter extrovertido•El color rosa corresponde al carácter seguro•El color gris corresponde al carácter inseguro
37
Muestra el número de personas que poseen las diferentes aficiones.
La barra amarilla del final corresponde al total de todas las aficiones de las personas
WaterfallWaterfall
38
XYLine Chart
En esta visualización se muestran los datos en una línea que se formará por la unión de sucesivos puntos que serán los datos almacenados para dicha visualización.
39
Cada vértice de la figura es un TipoCarácter.
Cada sexo se identificacon el color rojo a los chicos y con el azul a las chicas.
Polar ChartPolar Chart
40
3D PieChart3D PieChart
41
Muestra los distintos tipos de carácter que hay en cada nodo del grafo.
Realiza una comparación entre los caracteres de chicos y chicas.
Las barras de color rojo corresponde al sexo masculino y las de color azul al sexo femenino.
Barras 3DBarras 3D
Pruebas de rendimientoPruebas de rendimiento
42
Pruebas de rendimientoPruebas de rendimiento
43
Configurando los argumentos de VM con -Xmx1g
Prototipo para probarPrototipo para probar © grafiSOK
Hecho en JavaFX (netbeans)Integrando © grafiSOK:
44