Archivo

Entradas Etiquetadas ‘Visual’

Google Maps en Delphi – II

lunes, 29 de junio de 2009 37 comentarios
Share Button

En la última entrada acerca de la API de Google Maps, vimos cómo mostrar un Mapa utilizando la API en un programa Delphi, cómo centrarlo en una posición predefinida y utilizando un Zoom predeterminado.

Además como seleccionar entre los diferentes controles que podemos añadir al mapa (Zoom, Vista general, tipo de mapa…).

También cómo colocar una marca en una ubicación y cómo generar una ventana con información asociada a esa marca (NOTA1).

NOTA1: De forma similar se pueden colocar otros elementos sobre el mapa, como:

  • Líneas, polilíneas y polígonos.
  • Marcas con iconos personalizados.
  • Rutas

Una vez visto cómo mostrar el mapa, lo que nos queda es ver cómo podemos, desde nuestro programa Delphi, interactuar con él; Es decir, que el usuario pueda modificar determinadas características del mapa que tiene en pantalla, y nosotros podamos recuperar esos cambios, para utilizarlos en nuestro programa.

Vamos a continuar con el ejemplo visto en las entradas anteriores; Mostraremos al usuario un Mapa ubicado en una determinada posición. El usuario debe poder «reubicar» la vista del mapa y modificar el Zoom con que está visualizando el mapa, y esos son los valores que obtendremos para posteriormente almacenarlos y actualizarlos en nuestro programa.

  • Coordenada de Longitud
  • Coordenada de Latitud
  • Zoom actual del mapa

La forma de conseguirlo, es añadir a la página web el código necesario para capturar eventos que se produzcan en el mapa. Incluiremos controles de edición, donde se almacenan la longitud/latuitud y Zoom, que después recuperaremos desde el programa Delphi.

GEvent.addListener(map, "click", function (overlay,point)
GEvent.addListener(map, "zoomend", function (oldLevel, newLevel)
GEvent.addListener(map, "mousemove", function(latlng)

Aunque uno no esté muy familiarizado con el tema (yo mismo no lo estoy mucho  ;-D ), no hacen falta muchas explicaciones para comprender los eventos; «Capturaremos» en OnClick, OnZoomEnd y OnMouseMove sobre el mapa. Aquí se puede acceder a la lista de eventos, métodos y propiedades de la clase Gmap.

En el caso del evento OnClick, por ejemplo, utilizaremos un código como este:

GEvent.addListener(map, "click", function (overlay,point){
if (point){
document.posicion.x.value=point.x
document.posicion.y.value=point.y
document.posicion.z.value=map.getZoom()
TipoMapa = map.getCurrentMapType().getName()
document.posicion.t.value=TipoMapa
}

Obtenemos información del punto actual (utilizando un parámetro) y el Zoom actual y el tipo de Mapa utilizando métodos de la clase GMap. Todos ellos se almacenan (como hemos comentado antes) en componentes de tipo Text, que nos sirven como «paso intermedio» para luego capturar esos valores de la página Web desde nuestro programa.

Como resultado final, os dejo el ejemplo que se adjunta con esta entrada. En él he incluído/integrado la parte de Geocodificación (visto en las entradas I y II), y el código y modificaciones necesarias para recuperar posición, Zoom y tipo de Mapa (este incluído a última hora) que el usuario selecciona en un Mapa.

Información capturada

La información de los lugares puede ser guardada y recuperada de un fichero de texto; La estructura es bastante simple y no hace falta mayor explicación. Se almacena en el mismo directorio de la aplicación y recibe el nombre de «Lugares.txt».

Recuperar y Guardar ubicaciones

La información que podemos capturar del Mapa (utilizando la clase GMap) y de otros elementos que estén incluíds en el mapa (imágenes, líneas, marcas,…) es muy extensa y está detallada en las referencias de la API de Google Maps.

Personalmente, creo que las posibilidades de ampliación son muy grandes y bastantes más sencillas de lo que a priori puede parecer.

Se puede descargar el ejemplo completo desde aquí.
<DESCARGAR EJEMPLO>

Espero que estas entradas hayan sido de utilidad. Como siempre cualquier comentario, corrección, sugerencia,… es bienvenida. ;-D

Un saludo.

ACTUALIZACIÓN (10 Febrero 2012): Dado el cambio de política de Google, ahora es necesario (obligatorio) colocar la key que se proporciona desde Google para poder utilizar la API. Es necesario modificar el fichero _mapa.txt del recurso y  recompilarlo utilizando RC.CMD.

 

Google Maps en Delphi – I

jueves, 14 de mayo de 2009 6 comentarios
Share Button

Después de las dos entradas sobre Codificacióin Geográfica (*), toca entrar de lleno en la Visualización e Integración de Google Maps en nuestro programa, que por otra parte era el objetivo inicial de esta serie de entradas. La Codificación Geográfica (obtención de Latitud y Loingitud a partir de una dirección postal) era un «escollo» a salvar en nuestro camino, hasta nuestro verdadero objetivo.

(*) Lo normal es tener en nuestros programas/aplicaciones una serie de direcciones postales o direcciones de correo que deseamos mostrar o señalar en un Mapa. Para utilizar esas direccones con la API de Google Maps necesitamos obtener las coordenadas de Latitud y Longitud apropiadas. Para ello ya vimos  aquí (Codificación Geográfica – I) y aquí (Codificación Geográfica – II) cómo Google provee métodos para obtener las coordenadas de posicionamiento a partir de direcciones postales.

La idea para conseguir la integración es sencilla. Utilizar un componente TWebBrowser para mostrar una página HTML. Desde Delphi debemos «modificar» esa página para que muestre lo que nosotros deseemos.

Utilizando una sencilla página HTML con un Script, podemos visualizar el mapa correspondiente a coordenadas de Latitud y Longitud.  Con un componente TWebBrowser podemos visualizar esa página dentro de una aplicación delphi.

La página en sí sólo contiene el Script para Visualizar un Mapa.
Dentro del Script vemos cómo se crea un elemento de tipo «map»:

map = new GMap2(document.getElementById("map"));

Se añaden los controles que queremos visualizar en el mapa; En este caso, la selección para el tipo de mapa y control de zoom y posición grande.

        // Controles del mapa
        map.addControl(new GMapTypeControl());
        map.addControl(new GLargeMapControl());

El tipo de mapa que queremos que inicialmente aparezca (Mapa, visión por satélite o lo que Google llama híbrido).

        // Tipo de mapa
        map.setMapType(G_NORMAL_MAP);

Y por último colocamos la posición (latitud y longitud) donde queremos que el mapa salga centrado.

Pero no acaban aquí (ni mucho menos) las posibilidades de Google Maps. Una de las opciones, que dentro de lo sencillo, es muy interesante, es la inclusión de marcas señalando puntos del mapa o incluso ventanas de información no es mucho más complejo.

Para añadir una nueva marca, basta con conocer el punto exacto donde queremos situarla y utilizar un objeto GMarker para mostrarla en el mapa. En cuanto a la ventana, de información, sólo necesitamos el código HTML necesario para crearla.
En este ejemplo la ventana tiene un código sencillo (texto, imagen y link) que se almacena en una variable.

// VENTANA (HTML)
 var html="<img src="http://neftali.clubdelphi.com/images/imagen_neftali_60x54.jpg" alt="" width="60" height="54" />
" + "by Neftalí -Germán Estévez-  2009 <strong>
<a href="http://neftali.clubdelphi.com"
 target="_blank">http://neftali.clubdelphi.com</a>
</strong>
<a href="http://neftali.clubdelphi.com" target="_blank">
    </a>
";

Para mostrarla basta con que utilicemos en método OpenInfoWindowHtml (cuyo nombre es bastante descriptivo, por cierto ;-D ) de la siguiente forma:

    // Visualización de la mrca
    var point = new GLatLng(41.381655,2.122829);
    var marker = new GMarker(point);
    marker.openInfoWindowHtml(html);

Hay más opciones y basta con echarle una vistazo a la API de Google Maps para conocerlas. Además hay muchos ejemplos de utilización que pueden servir para aclarar los conceptos y para ver más cláramente cómo se utilizan los diferentes elementos.

Todo lo visto hasta aquí, está puesto en práctica en un ejemplo Delphi.

Podéis descargar el código completo (incluye EXE -comprimido UPX-) desde aquí:
<Descargar Ejemplo>

Y aquí acabamos esta entrada, que no será la última. Me dejo para una segunda parte, algunos detalles finales, como interactuar con el mapa y obtener datos de él y fusionar los dos conceptos vistos hasta ahora.

Nos vemos.

Componente TCustomizeGrid

domingo, 1 de marzo de 2009 7 comentarios
Share Button

(versión 1.3 beta)

Permite modificar algunos aspectos en la visualización de un Grid estandard.
No deriva del DBGrid, si no que funciona como complemento al componente estandard de Delphi. (En construcción…)
La propiedad Flat permite modificar el aspecto del DBGrid.
Implementa métodos para mejorar el pintado en el Grid de las celdas de tipo Booleano y Memo;
Sustituye el texto por un checkbox y (MEMO) que aparece en los campos Memo por el texto del campo.

Además provee eventos para modificar colores del DBGrid:

  • OnPaintCell: Para pintar xeldas de un determinado color.
  • OnPaintCellExt: BIS del anterior con más parámetros.
  • OnPaintColumn: Permite pintar una columna de color.
  • OnPaintRow: Permite pintar una file de color.
  • OnPaintCellImage: Permite pintar imágenes en una celda.
  • OnChangeTitleCell: Modificar las celdas de título.

Imagen del ejemplo

Download Descargar componente

Categories: Componentes Tags: , ,

Componente TSaveComps

domingo, 1 de marzo de 2009 9 comentarios
Share Button

(versión 1.4)

Permite guardar la posicion y tamaño de todos los componentes que se encuentran en el formulario. Utilizapara ello un fichero INI.
Basta con colocar el componente en el formulario y activarlo; Cuando la aplicación se cierra graba la posición/tamaño y al volver a ejecutarla los recupera de forma automática.

NOTA: Es indispensable para grabar la posición y tamaño de un componente que tenga definida la propiedad Name (para controles creados en RunTime).

Imagen del ejemplo

Historial:
(version 1.4): Añadido un evento (OnNotExistComponent) que facilita el trabajo con componentes creados en tiempo de ejecución (runtime); Se han revisado los componentes para trabajar con Delphi 2005/2006.

(versión 1.3): El componente permite guardar propiedades de tipo TStrings (Lines, Items,…)

(versión 1.2): Para la versión 1.2 se ha añadido la posibilidad de poder añadir propiedades por parte del usuario que se grabarán (propiedad SavedProperties).

Download Descargar componente

Categories: Componentes Tags: , ,

Componente TSortlistBox

viernes, 27 de febrero de 2009 Sin comentarios
Share Button

(version 1.0)

Componente derivado de un TListBox que añade la propiedad de definir ordenacionespara los diferentes elementos de la lista;
Junto a cada elemento se muestra una señal para indicar la ordenación. Posee una propiedad de tipo array para consultar el estado de cada item de la lista.

Imagen del componente

Download Descargar componente

Categories: Componentes Tags: ,

Componente TPanelGrid

viernes, 27 de febrero de 2009 Sin comentarios
Share Button

(versión 1.1)

Este componente (en éste caso derivado de un TPanel) muestra cómo añadir a un componente una Cuadrícula o Grid similar a la que aparece en los formularios cuando los estamos diseñando desde el IDE de Delphi.
Se puede configurar en el componente el color y el espaciado entre puntos de la cuadrícula.

Basta con soltarlo en el formulario y activarlo.

  • Incluye código fuente
  • Incluye EXE (demo)

Download Descargar componente

Categories: Componentes Tags: ,

Componente TEditInsideHelp

jueves, 26 de febrero de 2009 Sin comentarios
Share Button

(version 1.1)

Este componente permite definir un texto de ayuda en la parte interna del control de edición (TEdit).

El texto desaparace cuando el control contiene algun texto que el usuario ha introducido. Si el texto se borra vuelve a aparecer el texto de ayuda.

Se pueden definir el color que deseamos para el texto de la ayuda de forma independiente al color definido en la fuente (propiedad Font) del componente.

  • Incluye código fuente
  • Incluye EXE (demo)

Historial:

(Vers. 1.1)
Cambiada la propiedad InsideHelpColor por InsideHelpFont para permitir mayor flexibilidad (thanks Ariel Martín from Cuba).

Download Descargar componente

Categories: Componentes Tags: , , ,