Tag browsing: Qt Mobility

[Actualizado] Integrando Mapas con QML

November 14th, 2011

El objetivo de este post es mostrarles de forma practica, un par de opciones para que puedan integrar mapas en sus aplicaciones Qt, tanto en Symbian como en MeeGo, la primera opción hace uso de la Location API incluida en QtMobility, la segunda opción permite integrar servicios como Google Maps, Bing Map o Nokia Maps (ex Ovi Maps) haciendo uso de QtWebKit.

Usted esta aquí

Las opciones que describo en este post permiten ubicar en el mapa un punto especifico, este punto lo podemos obtener de diversas maneras, desde una DB, ingresando los datos manualmente u obteniendo las coordenadas desde el GPS del dispositivo, para hacer esto ultimo solo debemos primero, agregar a nuestro proyecto la dependencia a la Location API de QtMobility

import QtMobility.location 1.2

Luego vamos a declarar unas propiedades en las cuales almacenaremos la longitud y la latitud que obtendremos usando el elemento PositionSource, para luego mostrarlos usando un elemento Text.

property double mapLat
property double mapLong
mapLat: positionSource.position.coordinate.latitude
mapLong: positionSource.position.coordinate.longitude

PositionSource {
    id: positionSource
    active: true
    updateInterval: 1000
}

Text {
    color:"#fff"
    text: "Latitud: " + mapLat + "<br/>" + "Longitud: " + mapLong
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
}

QML & Maps - Get Position Demo

Simulando el GPS

Si no cuentan con un dispositivo para probar, pueden simular el uso del GPS usando la opciones de Location que vienen incluidas en Qt Simulator.

QML & Maps - Qt Simulator

QtMobility Location API

Esta opción hace uso de algunos de los elementos QML que nos provee la Location API, en este ejemplo usaremos un elemento Coordinate, para almacenar la latitud y la longitud que obtenemos del PositionSource, luego crearemos un elemento Map, el cual a su vez contiene una MapImage, tanto la propiedad center del Map, como la propiedad coordinate del MapImage van a usar los datos de la Coordinate previamente declarada.

property double mapLat
property double mapLong
mapLat: positionSource.position.coordinate.latitude
mapLong: positionSource.position.coordinate.longitude

PositionSource {
    id: positionSource
    active: true
    updateInterval: 1000
}

Coordinate { 
    id: defaultMapCenter
    latitude: mapLat
    longitude: mapLong
}

Map {
    id: map
    anchors.fill: parent
    plugin : Plugin {name : "nokia"}
    size.width: parent.width
    size.height: parent.height
    zoomLevel: 16
    center: defaultMapCenter

    MapImage {
        id : pin
        coordinate: defaultMapCenter
        source:"images/pin.png"
    }
}

QML & Maps - Qt Mobility Sample

QtWebKit y Nokia Maps

Esta opción quizás no se integra de forma 100% nativa de la misma manera que podemos hacer usando la Location API, pero tiene la ventaja de que podemos usar a nuestro proveedor preferido y ademas nos permite reutilizar código que hayamos creado con anterioridad, este ejemplo hace uso de la API de Nokia Maps y para comenzar crearemos una pagina web con el siguiente código (ver abajo) y la incluiremos en nuestro proyecto, el código en si no tiene mucha magia, al principio hay una referencia a la librería de Nokia Maps, luego inicializamos el mapa, configuramos los elementos que vamos a utilizar en el, el nivel de zoom, una posición por default y finalmente crearemos la función setLocation que sera la encargada de ubicar el pin y centrar el mapa usando las coordenadas obtenidas por el PositionSource

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ovi Maps</title>
<script src="http://api.maps.ovi.com/jsl.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var map;
    function initialize() {
        map = new ovi.mapsapi.map.Display(document.getElementById("map"), {
        components: [
            new ovi.mapsapi.map.component.ZoomBar(),
            new ovi.mapsapi.map.component.Overview(),
            new ovi.mapsapi.map.component.TypeSelector()],
            'zoomLevel':16,
            'center':[-34.603000, -58.380000]
        });
        
        ovi.mapsapi.util.ApplicationContext.set("defaultLanguage", "es-ES")
        map.addComponent(new ovi.mapsapi.map.component.panning.Drag());
        map.addComponent(new ovi.mapsapi.map.component.panning.Kinetic());
    }

    function setLocation(lat, lon) {
        pin = new ovi.mapsapi.map.Marker([lat, lon], { icon: "images/pin.png" }),
        map.objects.add(pin);
        map.setCenter(new ovi.mapsapi.geo.Coordinate(lat,lon));
    }
</script>
</head>
<body onload="initialize()">
    <div id="map"></div>
</body>
</html>

Del lado del QML, lo primero que haremos sera importar a QtWebKit como dependencia.

import QtWebKit 1.0

Luego crearemos una WebView que va a cargar la pagina web anteriormente creada.

Solo resta esperar que se dispare el evento onLoadFinished que ejecutara la función updatePosition que usando el metodo evaluateJavaScript le pasara a la función setLocation que se encuentra en la pagina web, los parámetros que necesita para centrar y ubicar el pin en el mapa.

property double mapLat
property double mapLong
mapLat: positionSource.position.coordinate.latitude
mapLong: positionSource.position.coordinate.longitude

PositionSource {
    id: positionSource
    active: true
    updateInterval: 1000
}

function updatePosition(mapLat, mapLong){
    mapView.evaluateJavaScript("setLocation("+mapLat+","+mapLong+");");
}

WebView {
    id: mapView
    url: "map.html"
    preferredWidth: parent.width
    preferredHeight: parent.height
    scale: 1
    onLoadFinished: {
        updatePosition(mapLat, mapLong);
    }
}

QML & Maps - QtWebKit + Nokia Maps Sample

Algunas consideraciones

Todos los ejemplos descriptos anteriormente son básicos, no intenten usarlos directamente en aplicaciones reales sin antes crear cierta lógica para manejar los fallos y demoras que acompañan siempre a las aplicaciones que dependen del uso del GPS.

¿Cual opción usar?

Mas allá de las ventajas antes descriptas, como por ejemplo, la flexibilidad de proveedores, la reutilización de código o la integración de forma nativa, hay un punto muy importante que deben tener en cuenta a la hora de decidir que camino seguir, este punto es la performance, mi experiencia me ha demostrado que la Location API no tiene un buen rendimiento cuando es usada en Symbian si lo comparamos con MeeGo, el obtener los datos del GPS puede demorar bastante, desde mínimo 5 segundos hasta 30 segundos o mas, en cambio en MeeGo este proceso es casi instantáneo, esto en parte se puede subsanar en Symbian usando un BusyIndicator y pidiendo paciencia al usuario, esta lentitud también se ve reflejada a la hora de cargar el Map, el cual puede tardar entre 5 y 10 segundos en completar su tarea en Symbian, todo lo contrario en MeeGo, en el cual la carga es casi inmediata usando WiFi y demorando no mas de 2 segundos si usamos 3G, es por ello que la opción QtWebKit + Nokia Maps puede llegar a ser útil en algunos casos, ya que su performance no es deslumbrante pero si un poco mejor que la que proporciona la Location API en Symbian, ademas de que es mas consistente y regular en los tiempos de carga del mapa, lo que ayuda a que su rendimiento sea mas predecible.

El porque de esta diferencia de performance de la Location API entre Symbian y MeeGo no he podido dilucidarlo aun, puede ser la diferencia de velocidad entre los dispositivos (N8/C7 680Mhz vs. N9/N950 1Gz ) o una falta de optimización en la versión para Symbian, por mientras pueden usar alguna de las opciones antes detalladas según el caso de uso que quieran resolver.

Actualización – 15/11/2011

Hoy luego de algunas pruebas usando Qt Mobility 1.2.1, versión que esta incluida en el nuevo Qt SDK 1.1.4, pude comprobar que la performance de la versión para Symbian de la Location API ha mejorado bastante, no esta al nivel de la versión para MeeGo aun, pero entra en el terreno de lo usable.

Development , , , , , , No response

Qt Mobility 1.2 Technology Preview

December 25th, 2010

Ayer se libero la Technology Preview de Qt Mobility 1.2, ademas del código fuente, esta versión viene acompañaba de paquetes RPM para dispositivos compatibles con MeeGo (no así de paquetes SIS para Symbian, si desean usar esta TP en Symbian deberán compilarlo ustedes mismos), el objetivo principal de esta versión es el soporte para MeeGo y se espera que este finalizada justo para el lanzamiento de MeeGo 1.2 en abril del año que viene.

Documentación

Source

Instalar Qt Mobility 1.2 TP en Meego

sudo zypper addrepo http://download.meego.com/live/devel:/qt-mtf:/qt-mobility:/1.2tp1/testing/  mobility-1.2-tp1
sudo zypper addrepo http://download.meego.com/live/Trunk:/Testing/standard/ trunk-testing
sudo zypper refresh
sudo zypper install qt-mobility
sudo zypper install qt-mobility-examples

Si desean mantenerse actualizados de los cambios, pueden acceder a los repositorios oficiales en:

Para mas información acerca de las novedades de esta versión y de los problemas conocidos no dejen de leer el anuncio de lanzamiento, en cambio si son nuevos en Qt Mobility el vídeo a continuación es una buena introducción.

Development , , , No response