Archivio per la categoria ‘Didattica’

23 aprile, 2009 | di

Come prima cosa vorrei ringraziare Andrea per avermi dato la possibilità di contribuire, nel mio piccolo, a TANTO, scusandomi con lui per tutto il tempo (davvero troppo) passato da quando gli ho promesso questo tutorial ad oggi!

In questo breve articolo-tutorial cercherò di fare una panoramica sulla componente client di MapFish, un framework open source basato su ExtJs e OpenLayers, grazie al quale è possibile realizzare delle applicazioni webgis in pieno stile web 2.0 con poco sforzo una volta compreso il funzionamento degli “ingranaggi”.

Innanzitutto va detto che la parte relativa al mapping vero e proprio può essere gestita esattamente come in OpenLayers che, come già ricordato, è compreso all’interno di MapFish.
Si ha quindi a disposizione tutta la flessibilità di OpenLayers (layer WMS, WFS, Google, Yahoo, ecc.) e se si sanno già realizzare mappe online con questa ottima libreria, il passaggio a MapFish consiste semplicemente nel comprendere come gestire layout ed eventi alla maniera di ExtJs (l’altra componente del framework) e nello scoprire gli utili widget che MapFish mette a disposizione dello sviluppatore.

L’utilizzo di questi widget è simile a quello dei controlli di OpenLayers, con la differenza che in questo caso viene sfruttata la potenza di ExtJs per aggiungere un’interfaccia utente avanzata al controllo. I widget che necessitano del solo codice lato client sono:

  • Toolbar – una barra degli strumenti con dei tasti preimpostati (full-extent, pan, zoombox, zoom out) che è possibile espandere con nuovi bottoni sapendosi muovere un minimo con OL;
  • Layer Tree – si tratta di una “toc”, simile al layer switcher di OL, ma molto più configurabile, con la possibilità di includere facilmente icone e di annidare e raggruppare i layer a proprio piacimento;
  • Scorciatoie – liste a discesa con possibilità di autocompletamento del testo inserito (come avviene in Google suggest, per capirci) che centrano la mappa sulle coordinate corrispondenti al luogo/elemento scelto;
  • Stampa – un semplice controllo da includere per stampare la porzione di mappa visualizzata.

Affinché gli altri widget di MapFish (stampa complessa, ricerca nel db, ecc.) funzionino, è necessario che sia installata la componente server del framework che, però, non tratteremo in questo articolo (anche perché, non avendoci mai lavorato, rischierei di scrivere una montagna di cavolate!).
ExtJs semplifica la creazione di layout, anche molto complessi, che risultano accattivanti per l’utente e cross-browser. Con poche righe di codice è possibile creare interfacce a schede (tab), menu accordion, form avanzati, ecc… avendo la sicurezza che l’applicazione verrà correttamente visualizzata su tutti i browser più diffusi in circolazione. Con ExtJs possiamo ottenere rapidamente delle belle GUI in cui “infilare” le nostre applicazioni webgis. Insomma, sono assicurati un risultato di tutto rispetto e un bel risparmio di diottrie e bile (è risaputo che quella di rendere cross-browser delle appicazioni web “complesse” sia una delle attività che più contribuiscono alla creazione di nuovi tipi di imprecazioni… :-) ).

Fatta questa introduzione, passiamo al tutorial vero e proprio!

Tutorial MapFish

Creeremo una semplice applicazione webgis, munita di una toolbar e di un layer tree, con cui sarà possibile visualizzare la localizzazione degli utenti GRASS su due mappe di base alternative.
Le informazioni che mostreremo provengono da diversi server WMS (Nasa, Metacarta, Grass).
Utilizzeremo la versione 1.1 del framework MapFish, scaricabile da qui come archivio compresso in formato tar.gz (se state lavorando in ambiente Windows, vi consiglio di procurarvi l’ottimo 7zip per estrarne il contenuto).

Il primo passaggio consiste ovviamente nello scompattare quanto abbiamo scaricato in modo da ottenere una cartella (MapFish-1.1) che contiene tutto il necessario per creare la nostra applicazione d’esempio.
Utilizzando la sola parte client non abbiamo bisogno di rendere visibile il tutto ad un eventuale webserver e possiamo posizionare la directory di cui sopra dove più ci aggrada nel filesystem…
Tuttavia, per mantenere un certo ordine, consiglio di creare una ulteriore cartella, che chiameremo “EsempioMF”, e di lavorare al suo interno.
Creiamo anche un file index.html, un file myMapFish.js e spostiamo anche loro nella cartella di lavoro “EsempioMF”.
A questo punto, quindi, la situazione dovrebbe essere la seguente:

EsempioMF
|
– MapFish-1.1
|
– index.html
|
– myMapfish.js

Ora che siamo organizzati in modo più o meno ordinato, è il momento di riempire il file index.html.
Ecco come:

	
<html>
<head>
<title>Esempio MapFish by TANTO</title>
	
<!-- link ai CSS della componente ExtJS
(è possibile scaricare temi dal sito di extjs e sostituire default.css con il foglio di stile del tema scaricato... ce ne sono un paio che meritano) -->
<link rel="stylesheet" type="text/css" href="MapFish-1.1/client/mfbase/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="MapFish-1.1/client/mfbase/ext/resources/css/default.css" />
	
<!-- Inserisco i riferimenti agli script Javascript necessari al funzionamento del framework MapFish -->
<script type="text/javascript" src="MapFish-1.1/client/mfbase/openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/ext/ext-all.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/mapfish/MapFish.js"></script>
	
<!-- Inserisco il riferimento allo script Javascript myMapFish.js -->
<script type="text/javascript" src="myMapFish.js"></script>
</head>
<body>
<!-- Nel body creo i div che faranno da contenitori per la mappa vera e propria, per la toolbar e per il layer tree -->
<div id="map"></div>
<div id="buttonbar"></div>
<div id="tree"></div>
</body>
</html>
	

I commenti indicano cosa è stato inserito nell’header.Quindi possiamo chiudere index.html e iniziare a lavorare sullo script myMapFish.js.
Questo script conterrà due porzioni ben distinte:
- la prima servirà a definire il layout dell’applicazione (codice ExtJs);
- la seconda definirà la mappa vera e propria (codice OpenLayers) ed i widget MapFish che utilizzeremo.

Cominciamo, quindi, dalla prima parte dello script ed inseriamo quanto segue:

	
//Layout dell'applicazione
//************************
Ext.onReady(function() {
    new Ext.Viewport({
        layout:'border',
        items:[{
                region:'north',
                margins:'4 4 4 4',
                height: 63,
                html: '<img src="http://blog.spaziogis.it/wp-content/themes/blacknwhite/blacknwhite/images/TANTO_logo.png"/>',
                bodyStyle:'padding:2px;'
                },{
                region:'center',
                layout:'border',
                margins:'0 4 4 4',
                items:[{
                        region:'north',
                        border:false,
                        contentEl:'buttonbar',
                        height:26
                        },{
                        region:'center',
                        contentEl:'map',
                        border:false
                }]
                },{
                title:'Layer tree',
                region:'east',
                margins:'0 4 4 0',
                width:350,
                contentEl:'tree',
                collapsible:true
                },{
                region:'south',
                margins:'0 4 4 4',
                height:20,
                html:'Esempio realizzato per TANTO',
                bodyStyle:'padding:2px;font-size:12px;font-family:tahoma,arial,helvetica'
        }]
	
    });
	
});
	

questa porzione di codice definisce completamente la webgui, non c’è bisogno di altro.
In sintesi, dopo aver inizializzato ExtJs con il metodo Ext.onReady, abbiamo creato un oggetto Viewport per dire ad ExtJs di utilizzare tutta la finestra del browser (dimenticavo… vogliamo che la nostra applicazione sia a tutto schermo :) ) e poi abbiamo inserito un layout di tipo ‘border’ all’interndo del quale (nel pannello ‘center’) abbiamo annidato un secondo layout dello stesso tipo.
Ogni layout di tipo border può contenere 5 panneli (‘region’), detti north, center, east, west, south. Di questi solo ‘center’ è obbligatorio.
Ad ogni modo vi rimando all’esplorazione del sito di ExtJs per scoprire come complicare a piacimento i vostri layout. Il sito è molto ben fatto, pieno di tutorial ed esempi.

Passiamo ora alla mappa e ai mapfish widget.
Sempre all’interno del file myMapFish.js inseriamo questo pezzo di codice sotto al precedente:

	
//Mappa e Widget
//************************
	
function initMap(){
	
    //Creo la mappa e definisco alcuni controlli di base
    var map = new OpenLayers.Map('map',{controls:[
        new OpenLayers.Control.Navigation(),
        new OpenLayers.Control.PanZoomBar()
    ]});
	
    //Definisco l'extent che utilizzerò come vista iniziale
    var bounds = new OpenLayers.Bounds(5,36,21,50);
	
    //Definisco i layer WMS, due di base (alternativi) e uno di overlay
    var jpl_wms = new OpenLayers.Layer.WMS("NASA_Global_Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",{layers: "landsat7"});
	
    var ol_wms = new OpenLayers.Layer.WMS("OpenLayers_WMS",
"http://labs.metacarta.com/wms/vmap0",{layers: 'basic'});
	
    var grass_users = new OpenLayers.Layer.WMS.Untiled("Utenti_grass",
"http://mapserver.gdf-hannover.de/cgi-bin/grassuserwms?",
        {layers: 'GRASS-Users',transparent:true, format:'image/png'},
        {isBaseLayer:false});
	
    //Aggiungo i layer alla mappa
    map.addLayers([jpl_wms,ol_wms,grass_users]);
	
    //Aggiungo il toolbar widget di MapFish:
    //**************************************
    //Creo la toolbar
    var toolbar = new mapfish.widgets.toolbar.Toolbar({map: map, configurable:true});
	
    //Scelgo di renderizzare la toolbar in un div con id = buttonbar
    toolbar.render('buttonbar');
	
    //Aggiungo i bottoni/controlli
    toolbar.addControl(new OpenLayers.Control.ZoomBox(), {iconCls: 'zoomin',toggleGroup: 'map'});
    toolbar.addControl(new OpenLayers.Control.ZoomOut(), {iconCls: 'zoomout',toggleGroup: 'map'});
    toolbar.addControl(new OpenLayers.Control.DragPan({isDefault: true}),{iconCls: 'pan', toggleGroup: 'map'});
	
    //Attivo la toolbar
    toolbar.activate();
	
    //Layer tree
    //***************************************
    //Creo un modello per il layer tree, distribuendo i layer in due nodi espandibili distinti (Mappe di base e Overlay)
    var model = [{
         text: "Mappe di base",
         expanded: true,
         children: [{
              checked:true,
              text:"Nasa Global Mosaic",
              layerName:"NASA_Global_Mosaic"
              },{
              checked:false,
              text:"OpenLayers WMS",
              layerName:"OpenLayers_WMS"
         }]},{
         text: "Overlay",
         expanded: true,
         children: [{
              checked:false,
              text:"Utenti GRASS",
              layerName:"Utenti_grass"
          }]
    }];
	
    //Inserisco il widget vero e proprio indicando
    var tree = new mapfish.widgets.LayerTree({
    map: map, el: 'tree',
    model: model,
    border:false, autoHeight:true
    });
    tree.render();
	
    //Centro la mappa sull'extent definito in precedenza
    map.zoomToExtent(bounds);
	
} //fine della funzione init()
	

Anche qui i commenti dovrebbero essere abbastanza chiari.
Abbiamo creato una mappa esattamente come se stessimo lavorando con buon vecchio OpenLayers e, in più, abbiamo inserito nel codice due MapFish widget.

Prima di vedere il risultato del nostro lavoro dobbiamo fare due piccole modifica al file index.html:
- inserire un evento onload a livello del tag per fare in modo che la mappa venga caricata all’apertura della pagina (esattamente come in OL);
- inseire alcune regole CSS necessarie per la corretta visualizzazione dei MapFish widget

Ecco come deve apparire index.html modificato a dovere:

	
<html>
<head>
<title>Esempio MapFish by TANTO</title>
	
<!-- link ai CSS della componente ExtJS
(è possibile scaricare temi dal sito di extjs e sostituire default.css con il foglio di stile del tema scaricato... ce ne sono un paio che meritano) -->
<link rel="stylesheet" type="text/css" href="MapFish-1.1/client/mfbase/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="MapFish-1.1/client/mfbase/ext/resources/css/default.css" />
	
<!-- Inserisco i riferimenti agli script Javascript necessari al funzionamento del framework MapFish -->
<script type="text/javascript" src="MapFish-1.1/client/mfbase/openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/ext/ext-all.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/mapfish/MapFish.js"></script>
	
<!-- Inserisco il riferimento allo script Javascript myMapFish.js -->
<script type="text/javascript" src="myMapFish.js"></script>
</head>
<body onload="initMap()">
<!-- Nel body creo i div che faranno da contenitori per la mappa vera e propria, per la toolbar e per il layer tree -->
<div id="map"></div>
<div id="buttonbar"></div>
<div id="tree"></div>
</body>
</html>
	
<style type="text/css">
/* Icone dei bottoni della toolbar */
.zoomin {
background-image:url(MapFish-1.1/client/mfbase/mapfish/img/icon_zoomin.png) !important;
height:20px !important;
width:20px !important;
}
.zoomout {
background-image:url(MapFish-1.1/client/mfbase/mapfish/img/icon_zoomout.png) !important;
height:20px !important;
width:20px !important;
}
	
.pan {
background-image:url(MapFish-1.1/client/mfbase/mapfish/img/icon_pan.png) !important;
height:20px !important;
width:20px !important;
}
	
/* Dimensioni del Layer tree */
#tree {
height: 100%;
width: 100%;
}
</style>
	

Adesso apriamo index.html col borwser e il risultato dovrebbe essere questo.

;)

13 aprile, 2009 | di

Advocacy Mapping

Dopo la guida di MapAction, vi segnalo l’ottimo post su Making Maps riguardante la neogeography al servizio dello advocacy, ovvero il processo di intervenire su questioni di interesse comune al fine di esercitare una pubblica influenza riguardante ideologie o per conto di gruppi di persone. Stiamo parlando di “nobili” fini, of course… non certo interessi privati.

Si tratta di due brevi pubblicazioni edite da Tactical Technology Collective:

  • Visualizing Information for Advocacy: an Introduction to Information Design, scaricabile qui
  • Maps for Advocacy: An Introduction to Geographic Mapping Techniques, scaricabile qui.

Consiglio vivamente di leggere il bel post su Making Maps, non voglio dunque aggiungere molto altro se non che le due pubblicazioni non hanno affatto un taglio da “guide” nel senso proprio del termine. La prima è piuttosto un bel lavoro sulla “information design”, mentre la seconda porta diversi esempi nella realizzazione di applicazioni cartografiche e relativi strumenti utilizzati.

Non trascurate poi di dare un’occhiata alle “related resources” del post… molto illuminanti.

29 marzo, 2009 | di

Mi era già capitato di parlare di GISCorps, una ONG di esperti che prestano su base volontaria le loro conoscenze e capacità geomatiche in tutto il mondo. Si è aggiunta di recente anche l’inglese MapAction, e qui voglio segnalare la loro fantastica “Field Guide to Humanitarian Mapping”.

Al di là del target espressamente rivolto alle emergenze umanitarie, la guida è davvero ben fatta, utilissima anche per chi desidera un documento agile – sono poco più di un centinaio di pagine – e chiaro – molti tutorial – per acquisire i concetti alla base dei GIS come pure dell’uso del GPS in campo.

Il primo capitolo introduce alla cartografia e approfondisce argomenti riguardanti i dati spaziali e i vari formati nei quali è possibile trovarli, i sistemi di coordinate. Il secondo capitolo è dedicato all’uso dei dispositivi GPS per raccogliere dati in campo, con un pratico schema per registrare i waypoint. Il terzo e quarto capitolo sono veri e propri tutorial per l’utilizzo di Google Earth e MapWindow – un GIS open source – per la cartografia a scopo umanitario. MapAction lavora soprattutto con Google Earth perchè da un lato si tratta  del software di mapping che mette a disposizione i dati cartografici di base – foto aeree e immagini satellitari – più aggiornati disponibili, dall’altro perchè è estremamente diffuso anche tra i non addetti ai lavori.

In definitiva, questa guida è certamente un ottimo modo per i newbie di sporcarsi le mani e capire cosa vuol dire fare della cartografia digitale e quali possono essere i suoi impieghi pratici. Se poi ci si appassiona e si vuol dare il proprio contributo alla causa umanitaria… tanto meglio!

MapAction Field Guide to Humanitarian Mapping First Edn Low-res

Publish at Scribd or explore others: How-To Guides & DIY gps gis
16 marzo, 2009 | di

In questo post vi mostrerò come creare una sorgente geoRSS a partire da un file CSV che ho creato per l’occasione. Questo contiene dei dati fittizi su tre città italiane, che voglio pubblicare all’interno della sorgente geoRSS, curandone struttura e formattazione, ed inserendo anche un grafico di sintesi dei parametri presenti in ogni record.

Realizzerò il tutto creando un piccolo mashup sfruttando i seguenti servizi:

  • Google Docs, per l’archiviazione dei dati grezzi e per la creazione del CSV a partire da questi
  • Yahoo! Pipes, per l’elaborazione del file CSV e la sua trasformazione in geoRSS
  • le api di Google Charts, per inserire nella sorgente geoRSS dei grafici di sintesi sui dati contenuti nel file CSV
  • Google maps per visualizzare la sorgente geoRSS in una mappa

Un mashup è un’applicazione che, a partire da dati ed informazioni provenienti da due o più fonti/servizi/applicazioni, crea nuove applicazioni/servizi.

Google Docs

Ho creato in Google Docs un nuovo foglio elettronico ed ho inserito dei dati fittizi su tre città italiane. Ho anche aggiunto una colonna per il valore di latitudine, ed una per quello di longitudine (entrambi espressi i gradi decimali).

google docs

Per fare dialogare questo foglio elettronico con gli altri servizi citati sopra, dovrò renderlo pubblico; lo farò utilizzando il tasto Share e selezionando l’opzione “Publish as a web page” (così come nella figura sottostante).

google_docs_publish

Si aprirà una finestra di pop-up e dovrò cliccare su “Publish now“. Fatto questo, cliccherò sul link (presente in basso) “More publishing options“; si aprirà un’altra finestra di pop-up in cui sceglierò CSV come formato di pubblicazione e cliccherò sul tasto “Generate URL”. In ultimo copierò l’URL appena generato e lo incollerò da qualche parte (in un editor di testo).

Yahoo! Pipes e Google Charts

Yahoo! Pipes è il mio editor/cratore di mashup preferito. “Si presenta” ufficialmente così:

Pipes is a powerful composition tool to aggregate, manipulate, and mashup content from around the web.

Con Pipes aggrego ad esempio i feed RSS che pubblico in Blog GIS Italia, ma qui lo utilizzerò in modo diverso.

La prima cosa da fare in Pipes è scegliere la fonte dei nostri dati (possono essere anche più d’una), e in questo caso sceglierò il file CSV di cui sopra; ne andrò a recuperare l’URL e lo incollerò dentro il modulo di Pipes “Fetch CSV”.

fetch_csv3

Posso personalizzare diverse parametri. In questo caso ho escluso dalla lettura dei dati la prima riga (contiene i nomi delle colonne), ed ho impostato a mano i nomi delle colonne della mia tabella.

A questo modulo, ne collego un altro che trovo tra gli operatori di Pipes: “Rename”.

rename_3

In questo modo rinominerò il campo “Citta” in “title”, in modo da avere a disposizione uno dei campi necessari per la creazione di una sorgente RSS.

Eseguirò successivamente il primo di due loop presenti in questo Pipe. Per ogni record della tabella andrò a “costruire” l’URL che mi consentirà di creare un grafico tramite le API di Google Charts. La struttura di base dell’URL per la generazione di un grafico tramite queste API è come quella sottostante:

\"\"http://chart.apis.google.com/chart?
chs=250x100
&chd=t:60,40
&cht=p3
&chl=Hello|World

Dove:

  • http://chart.apis.google.com/chart? è l’URL di base delle API.
  • & è il separatore dei parametri
  • chs=250×100 è la larghezza dei grafici in pixel.
  • chd=t:60,40 sono i dati che voglio rappresentare.
  • cht=p3 è il tipo di grafico.
  • chl=Hello|World sono le etichette del grafico.

Dovrò adattare questo schema ai miei dati, per struttura, valori e formattazione.

Inserirò allora nel modulo “Loop” di Pipes un costruttore di stringhe – il modulo “String Builder” – con cui genererò un URL utile per la stampa a video di un grafico a torta per ogni record della mia tabella.

loop

Assegnerò i valori di output di questo loop alla variabile  “item.chartURI”. Per il primo record verrà generato ad esempio questo URL:

\"http://chart.apis.google.com/chart?cht=p3&chd=t:32,32,34&chl=Parametro
A|Parametro B|Parametro C&chs=450x200&chtt=Reggio Calabria\"

Utilizzerò il modulo “Regex” per fare sì che gli URL generati abbiano una corretta sintassi. Rimuoverò quindi gli spazi e li sostituirò con la stringa “%20″

regex

Utilizzerò adesso il secondo modulo di “Loop”, per generare il contenuto del secondo elemento necessario in una sorgente RSS: il campo “descritpion“. Lo riempirò con delle stringhe di testo con i valori delle colonne che rappresenterò tramite grafico, e con il grafico stesso. Questo per ogni record della tabella.

Posso inserire qualsiasi stringa HTML che sia utile a formattare al meglio gli elementi del mio RSS. Il grafico verrà inserito in corrispondenza del tag <img>, che avrà come source proprio l’URL generato nel primo loop.

loop2

Infine:

  • userò il modulo “Location Extractor” per trasformare un normale RSS in un geoRSS
  • mapperò il campo “link” della sorgente RSS affinché punti al grafico generato
  • genererò l’output

fine

Il modulo “Location Extractor” non richiede informazioni aggiuntive, perché sfrutta due colonne presenti nel mio file CSV originario: “Latitude” e “Longitude”. In questo modo ogni elemento del mio RSS sarà geotaggato.

Non mi resta che salvare il mio Pipe cliccando sul tasto “Save”, e provarlo. Per vederlo in azione cliccherò sul link “Run pipe“, visibile nella zona in alto al centro della finestra di editing del Pipe. Si aprirà una pagina come quella sottostante.

pipe3

Da questavisualizzerò gli elementi della mia sorgente RSS. Nel caso di una fonte geoRSS verrà generata automaticamente una mappa, che potrò inserire in una qualsiasi pagina html (copiando il codice che mi verrà restituito al click sul tasto “Get as a Badge“). Qui sotto vedete il tutto in azione.

Questi alcuni degli altri output possibili:

Google Maps

Due degli output di sopra, RSS e KML, possono essere visualizzati in un istante ed in modo molto efficace in Google Maps.

Basterà incollare uno dei due URL di sopra (RSS o KML) dentro il box di ricerca di Google Maps, e fare click sul tasto di ricerca.

google_maps

Qui i due risultati in azione:

E’ possibile ottenere questo risultato con (quasi) qualsiasi URL di file KML o sorgenti RSS che siano geroRSS.

Considerazioni finali

Questo post è quasi la traduzione di quest’altro pubblicato su uno dei Blog che mi solletica di più in questo momento: OUseful.Info. Leggerlo è stato divertente, ma lo è stato molto di più mettere in pratica quanto descritto. Quello che vorrei trasmettervi è l’importanza del “fare”: si comprendono i concetti in modo più profondo, ed escono fuori molte più idee.

Quello che mi stupisce sempre è qualità, la varietà, e la “potenza” degli strumenti che abbiamo a disposizione. L’esempio descritto in questo post è semplice, e mentre lo scrivevo mi rendevo conto che con un po’ di fantasia ed ingegno si potrebbero ottenere risultati sorprendenti.

Per utilizzare Yahoo! Pipes è necessario avere un account Yahoo!. Qui il Pipe che ho realizzato, che potrete clonare ed adattare alle vostre “vere” esigenze.

Sitografia letta, consigliata e disordinata

  1. “Chart Types – Google Chart API – Google Code,” http://code.google.com/intl/it/apis/chart/types.html.
  2. “Creating Google Charts From CSV Data Inside a Yahoo Pipe « OUseful.Info, the blog…,” http://ouseful.wordpress.com/2009/03/12/creating-google-charts-from-csv-data-inside-a-yahoo-pipe/.
  3. “GeoRSS – Wikipedia, the free encyclopedia,” http://en.wikipedia.org/wiki/GeoRSS.
  4. “The scripting library: Combining data and information in the library,” http://www.slideshare.net/bonaria/the-scripting-library-combining-data-and-information-in-the-library.
  5. “Technical Overview: GeoRSS,” http://www.geowebguru.com/articles/108-technical-overview-georss.
19 gennaio, 2009 | di

Il lavoro di ogni giorno è spesso routinario; spesso anche per chi si occupa di sistemi informativi geografici. Non parlo dell’analisi spaziale, ma di quelle cose che facciamo quasi ogni giorno: leggere le metainfomazioni di un file (e scoprire che sono povere), convertire il formato di un file, estrarre una porzione di una raster, etc.

Si tratta di operazioni in genere molto semplici, che siamo in grado di portare a termine con molti strumenti. Questo blog parla de “le cose che ci piacciono TANTO”; una di queste sono quelle utility che alleggeriscono il lavoro di ogni giorno, con un click del mouse ed un menu contestuale.

Vi parlerò di due applicazioni di questo tipo, una per Windows ed una per Ubuntu (e per tutte le distribuzioni che sfruttano Gnome), che sono in grado di “trasferire” sul tasto destro del mouse alcune comuni operazioni utili ad un utente GIS.

Il prerequisito è che nel nostro sistema operativo siano installate le librerie GDAL, che sfrutteremo come motore delle operazioni “spaziali”. Per installarle su Windows basterà scaricare ed installare FWTools, mentre su Ubuntu basterà installare gdal-bin tramite synaptic o tramite riga di comando.

Alla fine del post saremo in grado di fare click con il destro su una TIFF del nostro hard-disk, ed eseguire queste due semplici (ma comodissime operazioni):

  1. convertirla in un altro formato spaziale (in questo esempio eseguirò la conversione in formato JPG2000, un eccellente formato compresso che può avere attributi geografici)
  2. leggerne le metainformazioni (anche quelle spaziali)

Se dovessi ottenere questi due risultati con le librerie GDAL, dovrei aprire il prompt dei comandi e scrivere rispettivamente:

  1. > gdal_translate -of JP2ECW input.tif output.jp2
  2. > gdalinfo input.tif

Vedremo come convertire questi comandi testuali, in operazioni da eseguire con il mouse.

Su Windows

Su Windows sfrutteremo Open++, un’utility di 200kb che consente di personalizzare l’elenco di comandi presenti nel menu contestuale, che si apre quando si clicca con il tasto destro del mouse su un file (o su una cartella).

Una volta che lo avrete scaricato ed installato, troverete una nuova voce nel menu che si aprirà al click con il destro su un file; è visibile nella figura sottostante (“Open++”).

contextmenu

L’utilizzo è immediato e quasi autoesplicativo, in quanto Open++ è già configurato per eseguire delle comode operazioni di base: ade esempio copiare il percorso assoluto di un file (Copy Path), o  aprire il prompt dei comandi a partire dalla cartella selezionata (Command Prompt). Questi due stupidi comandi, sono già un ottimo esempio di alleggerimento del lavoro.

Il primo comando che voglio aggiungere, ci consentirà di convertire in formato JPG2000 un’immagine TIFF. Per inserire questo nuovo comando, tra quelli disponibili in Open++, dovrò cliccare sull’ultima opzione del suo menu a tendina: “Customize” (vedi figura poco sopra).

Mi si aprirà la finestra sottostante:

image

Questi i passi da eseguire:

  1. cliccare in alto a destra sul tasto “Add”, e scegliere l’opzione “Command”
  2. cliccare sulla cella “Title”, ed aggiungere un nome descrittivo al comando che si sta creando (ad esempio “Convert to JPG2000”)
  3. inserire nella cella “Program” il programma che si vuole lanciare. Nel nostro caso vogliamo lanciare il prompt dei comandi e basterà scrivere “%ComSpec%”
  4. scrivere nella cella “Arguments” gli argomenti che vogliamo passare al nostro comando. Nel nostro caso inseriremo la seguente stringa ‘/c “C:\Programmi\FWTools2.2.6\bin\gdal_translate -of JP2ECW” $(TargetName)$(TargetExt) $(TargetName).jp2′
    1. il parametro “/c” fa sì che il prompt dei comandi venga chiuso al termine dell’operazione
    2. “C:\Programmi\FWTools2.2.6\bin\gdal_translate” è il percorso assoluto (nel mio pc) dell’utility GDAL – gdal_translate – che gestisce le conversioni tra formati di file spaziali
    3. “-of JP2ECW” è il parametro necessario per impostare JPG2000 come formato di output
    4. $(TargetName)$(TargetExt) sono delle variabili che coincidono con il nome e con l’estensione del file su cui cliccheremo con il destro, e che verranno valorizzate dinamicamente al lancio del comando. Se ad esempio il file su cui farò click sarà “c:\dati\input.tif”, la variabile “$(TargetName)” verrà sostituito da “c:\dati\input” e “$(TargetExt)” da “.tif”.
    5. lo stesso si dica per $(TargetName).jp2, che verrà sostituito da “c:\dati\input.jp2”
  5. cliccare sulla cella “Associate with Files” e scrivere *.tif
    1. in questo modo il comando di conversione formato sarà disponibile soltanto per i file con estensione .tif (è possibile aggiungere altre estensioni, separandole tramite “;”)
  6. impostare gli altri parametri come nella figura soprastante e cliccare su “OK”

A questo punto aprite una cartella in cui avete un file TIFF, fateci click sopra con il destro del mouse, e selezionate Open++/Convert to JPG2000. Si aprirà il prompt dei comandi e verrà lanciato il comando gdal_translate; a comando eseguito il prompt dei comandi si chiuderà automaticamente e troverete il file JPG2000 (con estensione .jp2) nella stessa cartella in cui è presente il file TIFF.

Quello di sopra è soltanto un esempio; si può di più, meglio e diversamente. Consideratelo come un primo tutorial, dopo il quale iniziare a dare sfogo alla vostra fantasia ed alla vostra competenza.

Per ottenere le metainformazioni spaziali di un file TIFF, utilizzando soltanto il tasto destro del mouse, dovrete un creare un nuovo comando. La procedura è quasi identica alla precedente, salvo per la cella “Arguments”: dovrete inserire la stringa ‘/k “C:\Programmi\FWTools2.2.6\bin\gdalinfo $(TargetName)$(TargetExt)’.

La differenza più importante è il parametro “/k”, che farà in modo che il prompt dei comandi non venga chiuso al termine del comando gdalinfo. Nella finestra del prompt potrete quindi leggere le metainformazioni del file che avrete selezionato.

In questo filmato vedrete i due comandi in azione:


Su Linux

In questo caso sfrutteremo Nautilus-actions, un’utility analoga a Open++ in ambiente GNOME e quindi anche in Ubuntu. E’ installabile tramite synaptic o digitando nella shell:

>sudo apt-get install nautilus-action

Una volta installato lo troverete nel menu Sistema/Preferenze/Nautilus Actions Configuration.

nautilus-actions

Creiamo un’azione (action) che estragga le metainformazioni da un tif selezionata.

Questi i passi da seguire:

  1. cliccare su Add
  2. inserire nella cella “Label” un nome descrittivo del comando (ad esempio “gdal_info”)
  3. scegliere – è opzionale – un tooltip per il comando (ad esempio “cliccare qui per avere le metainformazioni del file selezionato”)
  4. scegliere – è opzionale – un’icona per il comando
  5. definire il comando da lanciare, tramite la cella “Path”
    1. inserire la stringa “bash -c”
  6. impostarne la stringa “gdalinfo %d/%f > %d/%f.txt && gedit %d/%f.txt” nella cella “Parameters
    1. “%d “e “%f ” sono delle variabili che verrano sostituite dinamicamente dal percorso (senza estensione) e dall’estensione del file selezionato
    2. il carattere “>” farà sì che l’output del comando – le metainformazioni – possano essere scritte e memorizzare in un file di testo
    3. “%d/%f.txt” faranno si che il file di testo venga salvato nella stessa cartella del file selezionato (%d), con lo stesso nome (%f) e con estensione .txt
    4. “&&” fa si che venga esguito il comando successivo – gedit – ma soltanto dopo la fine del primo
    5. “gedit %d/%f.txt” per aprire con l’editor di testo di Ubuntu il file di testo appena creato
  7. cliccare sul Tab “Conditions” e scrivere nella cella “Filenames” la stringa “*.tif” (in questo modo il comando gdal_info sarà visibile soltanto per file con estensione .tif)
  8. selezionare il radio botton “Only files”
  9. e cliccare su OK

edit-action-gdal_info

A questo punto non ci resta che fare click con il destro su un file .tif e provare il comando appena creato. Aggiungo però qualche spiegazione dovuta. Cosa è bash?

Si tratta di un interprete di comandi che permette all’utente di comunicare col sistema operativo attraverso una serie di funzioni predefinite, o di eseguire programmi.

Il parametro “-c” forza bash a leggere i comandi dalla stringa di testo che segue, che nel nostro caso è quella del punto 6 di sopra.

Nel filmato sottostante vedrete (male, è saltata una parte) il comando in azione:


Record your screencast online

Nautilus-actions è a mio avviso un gioiellino. Una caratteristica che lo fa brillare è la facilità di condividere i comandi creati. Lo si fa con il tasto “Import/Export” presente nella finestra principale. Qui ad esempio una serie di “azioni” già pronte. Il comando di conversione in JPG2000 è di facile implementazione e non lo svilupperò.

In chiusura

Prendete quanto scritto soltanto come spunto per “piegare” (ad esempio) le librerie GDAL/OGR al vostro tasto destro. Sono quasi un’analfabeta di istruzioni da riga di comando, e quelle che vi ho indicato possono sicuramente essere scritte meglio e più elegantemente. Mi piacerebbe molto che qualcuno condividesse qui la propria esperienza, con qualche comando “de paura”.

Software/servizi usati per scrivere il post

  • TipCam per registrare il filmato su windows
  • ScreenToaster per farlo su Linux
  • Zotero per gestire e generare la sitografia sottostante

Sitografia letta, consigliata e disordinata

  1. “BASH Help – A Bash Tutorial,” http://www.hypexr.org/bash_tutorial.php.
  2. “Bash – Wikipedia,” http://it.wikipedia.org/wiki/Bash.
  3. “Beginners/BashScripting – Community Ubuntu Documentation,” https://help.ubuntu.com/community/Beginners/BashScripting.
  4. “COMMAND.COM, SHELL and COMSPEC,” http://www.robvanderwoude.com/command.html.
  5. “Eseguire programmi e comandi DOS – Cenati Giovanni VbScript WSH,” http://digilander.libero.it/Cenati/esegui.htm.
  6. “Nautilus-actions: GUI è bello! » Ubuntu block notes,” http://www.aldolat.it/guide-e-howto/nautilus-actions-gui-e-bello/.

TANTO non rappresenta una testata giornalistica ai sensi della legge n. 62 del 7.03.2001, in quanto non viene aggiornato con una precisa e determinata periodicita'. Pertanto, in alcun modo puo' considerarsi un prodotto editoriale.