Tag Archives: Processing

Mapas interactivos y geovisualización con Unfolding

Un nuevo post sobre visualización de datos, esta vez aplicados a la geoinformación y la visualización de mapas interactivos.

En esta ocasión usaremos Unfolding, una libreria en Java basada en Processing (del cual ya hablamos en el anterior post) y de muy facil uso, aplicada en el desarrollo de mapas interactivos y visualización de datos con información geográfica.

El ejemplo que presentamos a contianución desarrolla una sencilla aplicación de escritorio en Java (con Java Swing) que muestra un mapa interactivo donde se marcan diferentes localizaciones que representan marcas de cervezas. Al hacer click sobre un marcador cualquiera, se muestra un pop-up con información adicional del marcador.

Asi que basicamente de lo que se trata es de:

Mostrar el mapa.
Colocar los marcadores sobre el mapa.
Implementar la interacción con los marcadores (mostrar el pop-up).

1. Mostrar el mapa

Como se ha mencionado con anterioridad, Unfolding está basado en Processing y usa parte de su API para realizar ciertas acciones. Para empezar usa el PApplet que ya vimos en Processing como punto de inicio de la aplicación. Además, usa el método setup() para inicializar la apliación y el método draw() para ejecutarla, así como otros métodos ya vistos para configurar e inicializar la vista principal.

Por otro lado, Unfolding ofrece diferentes proveedores de mapas a disposición del usuario. Cada uno tiene sus condiciones de uso y restricciones. En el ejemplo que se presenta, se usará OpenStreetMap, que es bastante flexible y solo limitado por la carga de uso, sin muchas más restricciones. Una vez inicializado el mapa, establecemos una posición de origen mediante sus coordenadas geográficas de latitud y longitud.

/**
 * Birra applet.
 *
 * @author lagarcia
 */
public class BirraApplet extends PApplet {
...
/**
     * @see processing.core.PApplet#setup()
     */
    @Override
    public void setup() {
        /* Set canvas size */
        size(800, 600);

        /* Set proxy settings, if needed */
        Properties systemSettings = System.getProperties();
        systemSettings.put("http.proxyHost", "proxy.YYYYY.es");
        systemSettings.put("http.proxyPort", "8080");
        systemSettings.put("http.proxyUser", "lagarcia");
        systemSettings.put("http.proxyPassword", "XXXXXXX");
        System.setProperties(systemSettings);

        /* Init map */
        birraMap = new UnfoldingMap(this, new OpenStreetMap.OpenStreetMapProvider());

        /* To basically interact with the map */
        MapUtils.createDefaultEventDispatcher(this, birraMap);

        /* Set origin */
        Location madridLocation = new Location(40.4f, -3.7f);
        birraMap.zoomAndPanTo(madridLocation, 6);

        /* Set restrictions */
        birraMap.setZoomRange(6, 8);
    }

    /**
     * @see processing.core.PApplet#draw()
     */
    @Override
    public void draw() {
        /* Draw map */
        birraMap.draw();
    }
... 
}

/**

* Birra applet.

* @author lagarcia

public class BirraApplet extends PApplet {

...

/**

* @see processing.core.PApplet#setup()

@Override

public void setup() {

/* Set canvas size */

size(800, 600);

/* Set proxy settings, if needed */

Properties systemSettings = System.getProperties();

systemSettings.put("http.proxyHost", "proxy.YYYYY.es");

systemSettings.put("http.proxyPort", "8080");

systemSettings.put("http.proxyUser", "lagarcia");

systemSettings.put("http.proxyPassword", "XXXXXXX");

System.setProperties(systemSettings);

/* Init map */

birraMap = new UnfoldingMap(this, new OpenStreetMap.OpenStreetMapProvider());

/* To basically interact with the map */

MapUtils.createDefaultEventDispatcher(this, birraMap);

/* Set origin */

Location madridLocation = new Location(40.4f, -3.7f);

birraMap.zoomAndPanTo(madridLocation, 6);

/* Set restrictions */

birraMap.setZoomRange(6, 8);

}

/**

* @see processing.core.PApplet#draw()

@Override

public void draw() {

/* Draw map */

birraMap.draw();

}

...

}

El resultado sería este:

2. Colocar los marcadores sobre el mapa

Una vez tenemos el mapa, podemos proceder a crear los marcadores con la información pertinente asociada a cada uno y situarlos sobre el mapa.

Para ello lo que vamos a hacer es cargar cierta información de un fichero. Esa información contiene la localización geográfica en la que se colocará el marcador (longitud y latitud), el nombre del marcador y los datos asociados al marcador que se mostrarán posteriormente mediante un pop-up interactivo. Estos son los datos:

# Cervezas artesanas de España

# Ciudad, latitud, longitud, cerveza1-cerveza2-cerveza3-cerveza4

Salamanca,41.0,-5.6,Malasombra-Lega-Bizarra-Helmantica

Madrid,40.4,-3.7,La Virgen-Cibeles-Maravillas

Asturias,43.32,-5.9,Caleya

Vamos por pasos:

Cargamos los datos en una lista interna de DTOs (beans):

/* Load data */
DataLoader dl = new DataLoader();
dl.loadData("data/birras.csv");

/* Load data */

DataLoader dl = new DataLoader();

dl.loadData("data/birras.csv");

Crear los marcadores:

/* Get markers */
List<BirraMarker> markers = dl.getBirraMarkers(loadImage("img/beer-icon.png"));

1 2	/* Get markers */ List<BirraMarker> markers = dl.getBirraMarkers(loadImage("img/beer-icon.png"));

/**
     * Get the markers list.
     *
     * @param imgMarker
     * @return
     */
    public List<BirraMarker> getBirraMarkers(PImage imgMarker) {
        List<BirraMarker> birraMarkers = new ArrayList<BirraMarker>();
        for (BirraTown bt : birras) {
            BirraMarker marker = new BirraMarker(bt, imgMarker);
            birraMarkers.add(marker);
        }
        return birraMarkers;
    }

/**

* Get the markers list.

* @param imgMarker

* @return

public List<BirraMarker> getBirraMarkers(PImage imgMarker) {

List<BirraMarker> birraMarkers = new ArrayList<BirraMarker>();

for (BirraTown bt : birras) {

BirraMarker marker = new BirraMarker(bt, imgMarker);

birraMarkers.add(marker);

}

return birraMarkers;

}

La clase BirraMarker se extiende de SimplePointMarker y tiene unos atributos específicos que el mapa usará para situar y dibujar el marcador sobre él, como el icono (PImage img). También tiene un método draw() que se invoca para dibujar el marcador. Ahí se puede indicar la posición en la que se quiere dibujar la imagen asociada al marcador. Por ejemplo:

/**
     * @see de.fhpotsdam.unfolding.marker.AbstractMarker#draw(processing.core.PGraphics, float, float)
     */
    @Override
    public void draw(PGraphics pg, float x, float y) {
        pg.pushStyle();
        pg.pushMatrix();
        pg.imageMode(PConstants.CORNER);
        // The image is drawn in object coordinates, i.e. the marker's origin (0,0) is at its geo-location.
        pg.image(img, x - (img.width / 2), y - (img.width / 2));
        pg.popMatrix();
        pg.popStyle();
    }

/**

* @see de.fhpotsdam.unfolding.marker.AbstractMarker#draw(processing.core.PGraphics, float, float)

@Override

public void draw(PGraphics pg, float x, float y) {

pg.pushStyle();

pg.pushMatrix();

pg.imageMode(PConstants.CORNER);

// The image is drawn in object coordinates, i.e. the marker's origin (0,0) is at its geo-location.

pg.image(img, x - (img.width / 2), y - (img.width / 2));

pg.popMatrix();

pg.popStyle();

}

Añadimos los marcadores al mapa:

/* Add markers to map */
for (Marker m : markers) {
  birraMap.addMarkers(m);
}

/* Add markers to map */

for (Marker m : markers) {

birraMap.addMarkers(m);

}

Como se ve en el ejemplo, se usan múltiples clases y APIs de Processing, como PImage, loadImage(), etc.

3. Mapa interactivo

Por último, haremos el mapa interactivo. La intención es que al hacer click con el ratón sobre cada marcador, se muestre un pop-up sobre él con información adicional. Al volver a hacer click, o hacer click en otro marcador, el pop-up desaparece. Además también queremos mostrar otro pop-up sobre cada marcador si se coloca el puntero sobre él, que desaparezca cuando éste se vaya. Aquí mostraremos el nombre del marcador.

Ámbos eventos podemos definirlos mediante la API del PApplet heredada de Processing. Este serái el método para el evento de click sobre el mapa:

/**
     * @see processing.core.PApplet#mouseClicked()
     */
    @Override
    public void mouseClicked() {
        if (markers == null) {
            return;
        }

        /* Clear selection */
        for (Marker m : markers) {
            m.setSelected(false);
        }

        /* Select clicked marker */
        Marker m = birraMap.getFirstHitMarker(mouseX, mouseY);
        if (m != null) {
            m.setSelected(true);
        }
    }

/**

* @see processing.core.PApplet#mouseClicked()

@Override

public void mouseClicked() {

if (markers == null) {

return;

}

/* Clear selection */

for (Marker m : markers) {

m.setSelected(false);

}

/* Select clicked marker */

Marker m = birraMap.getFirstHitMarker(mouseX, mouseY);

if (m != null) {

m.setSelected(true);

}

Si no hay marcadores, devolvemos nulo, es decir, no hacemos nada. Si hay marcadores, primero deseleccionamos todos, ya que no admitimos selección múltiple en nuestro ejemplo. Despues detectamos cual es el primer marcador seleccionado en la posición del puntero (Marker m = birraMap.getFirstHitMarker(mouseX, mouseY)) y lo marcamos como tal (m.setSelected(true)).

El método para definir el evento de movimiento del ratón sería el siguiente:

/**
     * @see processing.core.PApplet#mouseMoved()
     */
    @Override
    public void mouseMoved() {
        if (markers == null) {
            return;
        }

        /* Clear selection */
        for (Marker m : markers) {
            ((BirraMarker) m).setHover(false);
        }

        Marker m = birraMap.getFirstHitMarker(mouseX, mouseY);
        if (m != null) {
            ((BirraMarker) m).setHover(true);
        }
    }

/**

* @see processing.core.PApplet#mouseMoved()

@Override

public void mouseMoved() {

if (markers == null) {

return;

}

/* Clear selection */

for (Marker m : markers) {

((BirraMarker) m).setHover(false);

}

Marker m = birraMap.getFirstHitMarker(mouseX, mouseY);

if (m != null) {

((BirraMarker) m).setHover(true);

}

El procedimiento es practicamente el mismo que en el caso anterior. Tan solo en lugar de establecer el marcador como seleccionado, se usa setHover(true).

Tan solo nos falta añadir al método draw() del marcador el código que permitirá dibujar los pop-ups en caso de que éste sea seleccionado o sobrevolado por el puntero. El método definitivo quedaría así:

/**
     * @see de.fhpotsdam.unfolding.marker.AbstractMarker#draw(processing.core.PGraphics, float, float)
     */
    @Override
    public void draw(PGraphics pg, float x, float y) {
        pg.pushStyle();
        pg.pushMatrix();

        pg.imageMode(PConstants.CORNER);
        // The image is drawn in object coordinates, i.e. the marker's origin (0,0) is at its geo-location.
        pg.image(img, x - (img.width / 2), y - (img.width / 2));

        /* Selected */
        if (selected) {
            /* Rounded rectangle */
            pg.translate(x, (int) (y - (this.numBirras * 12.5)));
            pg.stroke(0);
            pg.fill(255);
            pg.strokeWeight(1);
            pg.rectMode(PConstants.CENTER);
            pg.rect(0, 0, elipseDim.width, elipseDim.height, 7, 7);

            /* Triangle */
            pg.beginShape();
            pg.vertex(-5, (int) (this.numBirras * 8.75));
            pg.vertex(5, (int) (this.numBirras * 8.75));
            pg.vertex(0, (int) (this.numBirras * 12.5));
            pg.endShape(PConstants.CLOSE);

            /* Text */
            pg.fill(0);
            pg.text(this.text, -((elipseDim.width / 2) - 5), -((elipseDim.height / 2) - 12));
        }
        /* Hover */
        else if (hover) {
            pg.translate(x, y);
            pg.stroke(0);
            pg.fill(255);
            pg.strokeWeight(1);
            pg.rectMode(PConstants.CENTER);
            pg.rect(40, 0, 80, 20, 7, 7);

            pg.fill(0);
            pg.textAlign(PConstants.CENTER);
            pg.text(this.name, 40, 5);
        }

        pg.popMatrix();
        pg.popStyle();
    }

/**

* @see de.fhpotsdam.unfolding.marker.AbstractMarker#draw(processing.core.PGraphics, float, float)

@Override

public void draw(PGraphics pg, float x, float y) {

pg.pushStyle();

pg.pushMatrix();

pg.imageMode(PConstants.CORNER);

// The image is drawn in object coordinates, i.e. the marker's origin (0,0) is at its geo-location.

pg.image(img, x - (img.width / 2), y - (img.width / 2));

/* Selected */

if (selected) {

/* Rounded rectangle */

pg.translate(x, (int) (y - (this.numBirras * 12.5)));

pg.stroke(0);

pg.fill(255);

pg.strokeWeight(1);

pg.rectMode(PConstants.CENTER);

pg.rect(0, 0, elipseDim.width, elipseDim.height, 7, 7);

/* Triangle */

pg.beginShape();

pg.vertex(-5, (int) (this.numBirras * 8.75));

pg.vertex(5, (int) (this.numBirras * 8.75));

pg.vertex(0, (int) (this.numBirras * 12.5));

pg.endShape(PConstants.CLOSE);

/* Text */

pg.fill(0);

pg.text(this.text, -((elipseDim.width / 2) - 5), -((elipseDim.height / 2) - 12));

}

/* Hover */

else if (hover) {

pg.translate(x, y);

pg.stroke(0);

pg.fill(255);

pg.strokeWeight(1);

pg.rectMode(PConstants.CENTER);

pg.rect(40, 0, 80, 20, 7, 7);

pg.fill(0);

pg.textAlign(PConstants.CENTER);

pg.text(this.name, 40, 5);

}

pg.popMatrix();

pg.popStyle();

}

Como se ve en el método, se usan los atributos selected y hover que se marcan en los métodos anteriores de eventos para determinar el estado del marcador. Hay que recordar que el método draw() se está invocando de forma contínua tal y como se usa en Processing.

Este sería el resultado final:

Podeis descargar el proyecto completo desde aquí. !Ahora a darle a los mapas!

Manipulación de imágenes con Processing

Dentro de un nuevo post sobre visualización gráfica y tenologías relacionadas, vamos a hacer una pequeña reseña en relación a una potente herramienta de manipulacion de imágenes y diseño gráfico.

No es ni más ni menos que el entorno y lenguaje de programación llamado PROCESSING. Este lenguaje está basado en Java y nos permite, de una manera muy sencilla y potente, relaizar diferentes manipulaciones sobre imágenes, desarrollar elementos gráficos, visualizaciones, interacciones y demás temas relacionados con el diseño gráfico y la visualización de datos.

Esta es la URL oficial de PROCESSING, donde se pueden encontrar tutoriales, ejemplos, distribuibles, etc.

Es una herramienta muy potente usada ampliamente en diferentes sectores como el arte, la visualización de datos, el desarrollo de software o incluso es la base de otros lenguajes de programación y entornos de desarrollo como Arduino.

Los dos ejemplos que se muestran a continuación son sencillas pruebas de lo que se puede hacer con Processing a la hora de manipular y analizar imágenes. Pero con Processing se pueden hacer muchas más cosas, como crear formas, textos, imágenes en 2D y 3D, etc. Se recomienda encarecidamente consultar la web oficial y repasar los tutoriales y ejemplos que alli se encuentran.

1. API de Processing

Como hemos dicho antes, Processing está basado en Java, asi que funciona de forma similar. Proporciona una API y una serie de classes que nos permiten trabajar con imágenes de forma sencilla desde cualquier programa o entorno de desarrollo.

Estos son algunos de los elemento de Processing que veremos en los siguientes ejemplos:

PApplet – es un applet Java del que extiende nuestra clase principal y que creará una ventana alrededor de nuestro contenido para una mejor visualización.
PImage – representa una imagen.
setUp() – inicializa la aplcicación.
draw() – es invocado de forma recurrente para refrescar el contenido de la aplicación.
loadImage() – carga una imagen en memoria.
image() – dibuja una imagen en las coordenadas que le indiquemos.

2. Estructuras básicas

Los elementos básicos de los que debe constar una aplicación implementada con Processing serían los siguientes:

El applet de Processing

/**
* Main class.
*
* @author lagarcia
*/
public class JProcessing extends PApplet {
...
}

/**

* Main class.

* @author lagarcia

public class JProcessing extends PApplet {

...

}

Una alternativa a extender el applet e invocar nuestra aplicación como tal es usar esto dentro del metodo main:

/**
* Main method.
*
* @param args
*/
public static void main(String[] args) {
   PApplet.main(new String[] {"--present", "net.luisalbertogh.processing.JProcessing" });
}

/**

* Main method.

* @param args

public static void main(String[] args) {

PApplet.main(new String[] {"--present", "net.luisalbertogh.processing.JProcessing" });

}

El método setpUp() donde se inicializa nuestra aplicación

/**
* @see processing.core.PApplet#setup()
*/
@Override
public void setup() {
/* Load images */
source = new PImage[1];
source[0] = loadImage("images/sunflower.jpg");

/* Destination */
destination = new PImage[2];
destination[0] = createImage(source[0].width, source[0].height, RGB);
destination[1] = createImage(source[0].width, source[0].height, RGB);

/* Set canvas size */
size(800, 400);
}

/**

* @see processing.core.PApplet#setup()

@Override

public void setup() {

/* Load images */

source = new PImage[1];

source[0] = loadImage("images/sunflower.jpg");

/* Destination */

destination = new PImage[2];

destination[0] = createImage(source[0].width, source[0].height, RGB);

destination[1] = createImage(source[0].width, source[0].height, RGB);

/* Set canvas size */

size(800, 400);

}

El método draw() que se invoca de forma repetida mientras la aplicación esté activa

/**
* @see processing.core.PApplet#draw()
*/
@Override
public void draw() {
/* Background color is black */
// background(0);

/* Draw the image to the screen at coordinate (x,y) */
image(source[0], 0, 0);

/* Transform original image into B&W */
toBlackAndWhite(source[0], destination[0], 200.0f);
toPointill(source[0], 10);

// Display the destination
image(destination[0], source[0].width + 10, 0);
}

/**

* @see processing.core.PApplet#draw()

@Override

public void draw() {

/* Background color is black */

// background(0);

/* Draw the image to the screen at coordinate (x,y) */

image(source[0], 0, 0);

/* Transform original image into B&W */

toBlackAndWhite(source[0], destination[0], 200.0f);

toPointill(source[0], 10);

// Display the destination

image(destination[0], source[0].width + 10, 0);

}

Otros métodos de captura de eventos, como por ejemplo el siguiente

/**
* @see processing.core.PApplet#mousePressed()
*/
@Override
public void mousePressed() {
...
}

/**

* @see processing.core.PApplet#mousePressed()

@Override

public void mousePressed() {

...

}

3. Manipulación de imágenes

Una vez tenemos las imagenes cargadas en memoria, podemos acceder a sus píxeles, a las propiedades de estos y usar la API de Processing para manipularlos.

Los píxeles se representan como un array unidimensional. Para acceder a un píxel basta con calcular el índice que le correspondería en ese array. Antes debemos cargar los píxeles de la imagen en cuestión usando la función loadPixels():

// Pixel location and color
source.loadPixels();
int loc = x + y * source.width;
int pix = source.pixels[loc];

// Pixel location and color

source.loadPixels();

int loc = x + y * source.width;

int pix = source.pixels[loc];

El resultado es un valor numérico que representa al píxel (en función de su RGB, brillo, etc.).

Para modificarlo, podemos escribir un nuevo valor en el array. Despùés llamamos a la función updatePixels() para que vuelque los valores a la imagen de nuevo:

destination.pixels[loc] = c;
// We changed the pixels in destination
destination.updatePixels();

destination.pixels[loc] = c;

// We changed the pixels in destination

destination.updatePixels();

Existen una serie de métodos que podemos usar para determinar las diferentes propiedades de cada píxel, como son el rgb, el brillo, etc:

float bright = brightness(pix);
float r = red(pix);
float g = green(pix);
float b = blue(pix);

float bright = brightness(pix);

float r = red(pix);

float g = green(pix);

float b = blue(pix);

4. Dibujo

Aunque no forma parte de esta explicación, como se ha mencionado antes, Processing es una potente herramienta a la hora de realizar cualquier tipo de dibujo, diseño gráfico, etc. Por supuesto tiene un conjunto de funciones que nos permiten dibujar formas de manera sencilla:

/* Draw a ellipse */
fill(r, g, b, 100);
ellipse(x + 20 + source.width * 2, y, pointillSize, pointillSize);

/* Draw a ellipse */

fill(r, g, b, 100);

ellipse(x + 20 + source.width * 2, y, pointillSize, pointillSize);

Finalmente, con lo visto hasta aquí podríamos crear un par de funciones que modifiquen los píxeles de una imagen original para que, en un caso, los cambio a blanco o negro en función de su brillo, y en otro caso, los cambie por elipses de un tamaño determinado y del color del píxel. En este caso, en lugar de cambiar la imagen original, dibujamos dos nuevas imágenes. Puedes descargar el proyecto completo desde aqui.

El resultado sería algo como lo siguiente:

A la izquierda, la imagen original, en el centro en blanco y negro, y a la derecha, con elipses de colores.

¡¡Ahora a jugar con Processing!!

El Recetario

Recetas Java y más

Tag Archives: Processing

Mapas interactivos y geovisualización con Unfolding

Manipulación de imágenes con Processing