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