Marcar punts al mapa d'OpenStreetMap (a OSM o amb icones personalitzades per a pàgines web)

Avui explicarem com marcar punts al mapa d'OpenStreetMap, primer explicarem una forma molt senzilla de fer-ho (útil per exemple, per enviar a algú una ubicació per correu electrònic), i després una més complicada per gent que tingui pàgina web i vulgui marcar-hi una ubicació amb una icona personalitzada.

Per la primera situació el procediment és molt senzill. En primer lloc cal anar a la pàgina d'OpenStreetMap (www.openstreetmap.org) i allà cercarem la ubicació que volem compartir, acostant-nos al màxim al mapa i intentant que el que volem marcar quedi en el centre de la imatge. Quan ho tenim només cal clicar a «Enllaç permanent» i veurem que ens canvia l'URL (l'adreça que ens mostra el navegador) amb les coordenades del centre del mapa que estem visualitzant, per exemple:

http://www.openstreetmap.org/?lat=41.413216&lon=1.965577&zoom=18&layers=M

El que hem de fer és tant senzill com afegir una «m» davant de «lat» i de «lon» d'aquesta manera (aquí les hem engrandit exageradament perquè destaquin en l'URL):

http://www.openstreetmap.org/?mlat=41.413216&mlon=1.965577&zoom=18&layers=M

 

Llavors refresquem la pàgina. Veurem que ens apareix un marcador, i a qualsevol persona a qui enviem el nou URL li apareixerà el mapa amb el punt senyalitzat:

Evidentment si ens allunyem del mapa, mai perdrem el marcador de la nostra ubicació (que en aquest cas era l'Aliança Palmarenca):

[Actualització 22/01/2012] 

Podem marcar també punts sobre els mapes amb les diferents capes base, per tant sobre Mapnik (layers=M, com l'exemple que hem fet), Osmarender (layers=O), CycleMap (layers=C), Mapa de transports (layers=T) i MapQuest Open (layers=Q).

També podem seleccionar el nivell de zoom per l'enllaç canviant a l'URL el valor de zoom=18 (els valors van des de 1 que és el més allunyat, fins a 18 que és el màxim apropament, cal tenir en compte que no totes les capes base arriben al nivell màxim de zoom).

[fi de l'actualització] 

Si el que volem és mostrar a la nostra pàgina web un mapa en què marquem ubicacions amb icones personalitzades necessitarem OpenLayers (www.openlayers.org/).

Nosaltres hem realitzat una petita prova a partir del tutorial del bloc Descartes: «Estilos personalizados en OpenLayers: puntos», i la demostració que trobem a «Dynamic map markers». El resultat ha estat aquest (clica sobre la imatge per accedir a la demostració):

Val a dir que nosaltres l'única cosa que hem fet ha estat retocar els fitxers que s'ofereixen al bloc de Descartes i els hem trastejat una mica per aconseguir els nostres objectius. Si ho desitgeu podeu treballar amb els nostres fitxers que trobareu aquí: http://www.konfraria.org/osm/lapalma2012/proves/1/
Com veureu hi ha 3 tipus de fitxers:

• PuntsAlMapaOSMLaPalma.htm que és la pàgina web que s'obre quan cliqueu sobre la imatge del damunt (que porta a la demostració).
• TestImageStyle.js és el codi java que interactuarà amb OpenLayers per mostrar-nos les icones al mapa
• I també hi trobareu vuit fitxers .PNG que són les imatges de les icones per a cada ubicació.

Només amb aquests fitxers ja podem crear un mapa amb marcadors amb icones personalitzades. Per tant, val la pena descarregar-los per posar-nos a retocar-los.
Suposem que volem afegir-hi un nou element, per exemple, «casa».
Obrirem el fitxer TestImageStyle.js amb un editor de text, com per exemple el gedit. Veurem que a la segona línea hi trobem:

var ticFeature, ermitaFeature, liluFeature, celpFeature, germFeature, casalFeature, konfrariaFeature, ajuntFeature

No cal dir que aquests vuit Features fan referència als vuit punts marcats actualment al mapa. Aquí hi afegirem un nou element (el novè), que es dirà «casaFeature»:

var ticFeature, ermitaFeature, liluFeature, celpFeature, germFeature, casalFeature, konfrariaFeature, ajuntFeature, casaFeature

A continuació cercarem a la línia número trenta-cinc el text:

vectorLayer.addFeatures([ticFeature, ermitaFeature, liluFeature, celpFeature, germFeature, casalFeature, konfrariaFeature, ajuntFeature]);

Per afegir-hi també un altre «casaFeature»:

vectorLayer.addFeatures([ticFeature, ermitaFeature, liluFeature, celpFeature, germFeature, casalFeature, konfrariaFeature, ajuntFeature, casaFeature]); 

A continuació reaprofitarem el codi de qualsevol de les Features ja creades, per exemple el de la Feature «Konfraria», el codi s'inicia a la línia vuitanta-nou i és:

// Crear la Feature Konfraria
    var konfrariaStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    konfrariaStyle.graphicOpacity = 1;
    konfrariaStyle.externalGraphic="konfraria.png";
    konfrariaStyle.graphicWidth = 50;
    konfrariaStyle.graphicHeight = 50;
    pWGS84 = new OpenLayers.LonLat(1.9657,41.4133);
    pOSM = transformToSphericalMercator(pWGS84);
     point = new OpenLayers.Geometry.Point(pOSM.lon,pOSM.lat);
    konfrariaFeature = new OpenLayers.Feature.Vector(point,null,konfrariaStyle);

Podem copiar i enganxar aquest codi on farem els següents canvis:

// Crear la Feature Casa(només informatiu)
    var casaStyle = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    casaStyle.graphicOpacity = 1;
    casaStyle.externalGraphic="directori_fitxer/nom_fitxer_icona";
    casaStyle.graphicWidth = amplada en píxels de la icona;
    casaStyle.graphicHeight = alçada en píxels de la icona;
    pWGS84 = new OpenLayers.LonLat(lat_punt_en_mapa,lon_punt_en_mapa);
    pOSM = transformToSphericalMercator(pWGS84);
     point = new OpenLayers.Geometry.Point(pOSM.lon,pOSM.lat);
    casaFeature = new OpenLayers.Feature.Vector(point,null,casaStyle);

Hi ha un parell d'aspectes que possiblement ens interessi retocar, el primer és a la línia catorze:

centerWGS84=new OpenLayers.LonLat(1.9669,41.4119);

El que tenim marcat en color rosa són les coordenades ( lat , lon ) on es centrarà el mapa per defecte. El segon aspecte a retocar el trobem a la línia vint-i-cinc:

map.setCenter(centerOSM, 15);

Aquest codi ens indica el nivell de zoom que apliquem al punt on centrem el mapa. Els valors poden anar des de 1 (màxim allunyament) a 18 (màxim apropament).

Quan tenim aquests canvis realitzats podem desar el fitxer, i passem a obrir el fitxer .HTML. En realitat aquest fitxer conté gran part de codi que només respon a aspectes estètics i d'altres tipus. La part de codi necessària per mostrar el mapa únicament és:

On podrem decidir l'amplada (width) i l'alçada (height) en píxels del mapa que es mostrarà al navegador, així com el gruix i color del marge (solid 1px black).

Seguint aquestes senzilles instruccions -que penso que qualsevol persona sense massa coneixements pot seguir-, ja podreu tenir el vostre mapa amb la ubicació que desitgeu senyalada amb una icona personalitzada a la vostra web.

Si necessites informació més tècnica sobre OpenLayers, val la pena que et passis pel bloc Descartes (aquest enllaç et portarà al bloc, filtrant les entrades per l'etiqueta OpenLayers).

Espero que hagi estat d'utilitat! ;-)

GIMP: Traducció al català dels degradats i altres trucs i traduccions amb scripts

El maig de l'any 2011 jo vaig ser un dels voluntaris que es van oferir per ajudar al Joaquim Pérez en resposta a la seva demanda d'ajuda, tot i que val a dir que me'n vaig assabentar gràcies a una entrada a la web dels amics de GnuLinux.cat.

Des de llavors, i en vistes a l'alliberació de l'esperada versió del Gimp 2.8 he estat treballant com a col·laborador de Softcatalà en aquest projecte, juntament amb el Joaquim (que traduïa el Gimp des de feia 7 anys en solitari), i també el Pau (col·laborador també de Softvalencià i GnuLinux.cat), l'Eulàlia, i altres col·laboradors puntuals, així com el Gil (coordinador de les traduccions del Gnome).

Una de les frustracions amb què ens vam trobar va ser veure com traduint al 100% tots els fitxers, hi havia elements del Gimp que continuaven en anglès; concretament els tipus de pinzells, les dinàmiques del pinzell, els degradats, els patrons, les paletes, etc.

Investigant una mica em vaig adonar de què cada pinzell, cada degradat, cada paleta, etc. disposava d'un fitxer en text pla en què es podia substituir la cadena en anglès per la seva corresponent al català, així que vaig decidir-me a crear un script per a Linux que traduís automàticament totes aquestes cadenes. Evidentment això era una solució provisional, així que en Gil va informar d'aquest bug (la impossibilitat de traduir aquests elements) als desenvolupadors del Gimp, i la seva resposta va ser clara, traduir aquestes cadenes pot fer que el Gimp falli: https://bugzilla.gnome.org/show_bug.cgi?id=666857.

O sigui que el bug està enviat, i saben com solucionar-lo, afegint una «Etiqueta descriptiva» (i traduïble per mitjà de fitxers .PO) al «Nom» del degradat, pinzell, paleta o el que sigui.

Ara intentaré explicar el funcionament de l'script i donaré alguns consells per si algun intrèpid el vol utilitzar, i després explicaré com modificar alguns paràmetres dels scripts que descarreguem per afegir funcions al Gimp per traduir-los al català i ubicar-los al menú on preferim.

L'script que tradueix al català els degradats, les dinàmiques, les paletes i les descripcions dels efectes del Gimpressionist

En primer lloc cal descarregar el fitxer GIMPcatala.tot.zip (que conté l'script), pots fer-ho clicant sobre la icona del fitxer:

Quan l'hem descarregat hem de descomprimir el fitxer .zip per obtenir el fitxer GIMPcatala.tot, a aquest haurem de donar-li permisos perquè s'executi com un programa. Això es fa clicant amb el botó dret sobre el fitxer i seleccionar «Propietats». Allà anem a la pestanya «Permisos» i marcarem l'opció «Permet executar aquest fitxer com a un programa».
Ara haurem d'obrir el Terminal, dirigir-nos a la carpeta on tinguem el fitxer i hi escriurem:

./GIMPcatala.tot

Al Terminal apareixerà el següent menú:

En què  només hem d'introduir el número de l'opció desitjada i prémer la tecla de retorn, i ja només ens caldrà seguir les instruccions.

Què fa l'script? L'script en primer lloc desa els fitxers originals dels degradats, paletes, etc. a la carpeta /home/usuari/.GIMPcatala/backup, i després simplement el que fa és cridar als fitxers dels degradats, paletes, etc. (amb la comanda cat) per canviar-hi cadenes referents al nom en anglès per cadenes en català (i això es fa amb la comanda sed). Aquest canvi es desa en un fitxer nou a la carpeta /home/usuari/.GIMPcatala (és una carpeta oculta), després aquests fitxers generats (i traduïts) es mouen a la carpeta amb què treballa el Gimp (normalment /usr/share/gimp/2.0). L'script fa una sèrie de preguntes per assegurar-se de que la carpeta que pensa que és de l'usuari és la correcte, i també la carpeta on el Gimp hi té els fitxers. Si les carpetes que es donen per defecte no són correctes l'script també permet canviar-les. Si hem realitzat una traducció (opcions 1-4) i no estem contents amb el resultat, també podem tornar als fitxers antics amb les opcions de restaurar (5-8), que el que fan és copiar els fitxers desats a /home/usuari/.GIMPcatala/backup (és molt important no esborrar la carpeta .GIMPcatala!!) a la carpeta del Gimp (/usr/share/gimp/2.0 per defecte). Ah, per cert, l'script també es desa a ell mateix a la carpeta .GIMPcatala per si de cas.

Pot malmetre el Gimp? L'script és inofensiu, i el més greu que ens podria passar és que perdéssim els fitxers dels degradats, paletes, dinàmiques i efectes predeterminats del Gimpressionist del Gimp (tot i que això no hauria de passar perquè n'hauríem de tenir una còpia a la carpeta .GIMPcatala). Ara bé, cal entendre que els scripts del Gimp criden a aquests elements pel seu nom, i el que haurem fet és canviar-los el nom; per tant, podríem trobar-nos amb què alguna funció deixés de funcionar (perquè l'script crida un element que ha canviat de nom). Això sobretot pot passar amb algun degradat concret, però encara no m'he trobat amb què m'hagi passat amb cap paleta ni cap dinàmica, i mai pot passar amb les descripcions del GIMPressionist perquè aquestes són «desc» i no «name».
Un exemple d'aquest error és si anem a «Fitxer > Crea > Logotips i rètols» i seleccionem l'opció «Degradat...», no podrem crear el logotip perquè el Gimp no trobarà el degradat «Golden», evidentment perquè ara es diu «Daurat». Per veure que això no és tan greu podem obrir amb el gedit el fitxer /usr/share/gimp/2.0/scripts/blended-logo.scm (cal fer-ho com a root, o superusuari) per veure com a dins ens crida el gradient «Golden»:

Si aquí hi canviéssim el «Golden» per un «Daurat», la funció que abans donava un error funcionaria sense problemes. I jo diria, que realment situacions com aquesta ens les trobaríem de manera puntual. Ara bé, si féssim això i mai es solucionés el bug, caldria llavors tornar a reemplaçar el «Daurat» pel «Golden» original, per aquest motiu no recomano fer-ho a no ser que la funció sigui de vital importància.

Conclusió: Si no tens por de remenar una mica els fitxers que he comentat, des del meu punt de vista val la pena tenir el Gimp amb els degradats, les dinàmiques, les paletes, i les descripcions dels efectes del Gimpressionist en català; si més no mentres no arreglin el bug perquè es pugui disfrutar d'aquestes traduccions de la manera correcta. Jo personalment haig de dir que les traduccions dels degradats em van ajudar a redescobrir-ne el seu sentit. Aquí un petit vídeo de com es veu el Gimp 2.7.6 amb aquests elements en català:

I després de l'script, a remenar i catalanitzar més cosetes... ;-)

Un cas pràctic, "Glass Effect Text" (o sigui, «Text amb efecte vidre»)

Un dels avantatges principals d'utilitzar el Gimp és la possibilitat d'afegir-hi els scripts que desitgem. Suposem per exemple que volem afegir la possibilitat de crear logotips amb efecte vidre, amb un script que altres ja han creat. Aquest efecte per exemple podem descarregar-lo des d'aquí, on haurem de baixar l'arxiu glass-text-v1-1.zip. A continuació només ens caldrà descomprimir l'arxiu i desar-ne el seu contingut (els arxius glass-text.scm i README1st) a la carpeta /home/usuari/.gimp-2.7/scripts.
Si ara obrim el Gimp i anem a «Fitxer > Crea» veurem que hi tenim un nou submenú anomenat «Logos (gimpchat.com)», i a dins l'opció «Glass Effect Text...». Si ens resulta poc pràctic aquest nou menú, i a més a més, ens agradaria més tenir-lo en català, hi ha una solució. Es tracta d'obrir el fitxer glass-text.scm amb el gedit, per exemple i canviar-ne alguns detalls. En primer lloc buscarem aquest text:

La línia que diu "/Xtns/Logos (gimpchat.com)/Glass Effect Text..." fa referència a la ubicació de la opció dins dels menús. Per incloure aquest efecte a "Logotips i rètols" i de passada traduir-ho al català escriuríem:
"/Xtns/Logos/Text amb efecte vidre...", és important fixar-nos en què no posem «Logotips i rètols» (que és el que ens apareixerà al programa) sinó «Logos», ja que aquesta és la cadena original en anglès per a aquest menú, i és aquesta la que necessita l'script per ubicar el submenú. Les cadenes originals les podem trobar als fitxers de traducció, per exemple, aquesta la trobaríem al fitxer gimp-script-fu.master.ca.po, on podeu cercar la cadena «Logotips i rètols» i us apareixeria:

#: ../plug-ins/script-fu/script-fu.c:312
msgid "_Logos"
msgstr "_Logotips i rètols"

I si ho desitgem, també en podríem canviar la definició, canviant el "Creates Glass-Effect Text with a drop shadow" per "Crea un text amb efecte vidre amb una ombra caiguda", per exemple. Lògicament, també podem traduir la finestra emergent que s'obre quan decidim aplicar l'efecte, només caldrà traduir les cadenes de la segona columna:

I també podríem jugar-hi una mica més i personalitzar-nos l'efecte canviant-ne per exemple el text que apareix per defecte ("Gimp"), la font ("Arial Black"), el patró ("Dried mud"), etc. En el nostre cas, per exemple, hem realitzat els següents canvis al fitxer glass-text.scm:

El resultat ha estat aquest (pots comprovar-ho tu mateix, descarregant el fitxer des d'aquí):

Un altre exemple, "Fake HDR Effect" (o sigui, la «Imita l'efecte HDR»)

Suposem que volem afegir més funcionalitats al nostre Gimp i descarreguem per exemple, l'esplèndid script "Fake HDR Effect" (que podem descarregar des d'aquí, haurem de descarregar l'arxiu: Fake HDR effect script-fu-v0.2.zip) i que ens permet aplicar efectes per simular imatges d'alt rang dinàmic (HDR).
De la mateixa manera que abans, només cal descomprimir-ne el contingut i desar-lo a la carpeta /home/usuari/.gimp-2.7/scripts. Si ara obrim el Gimp veurem que s'han creat nous menús amb l'efecte que aplica la millora a les fotografies:

Al meu entendre, afegir un nou menú només per dues funcions noves no és gaire pràctic, i menys encara si tenim en compte que el submenú «Enhance» que se'ns ha afegit amb el nou menú «Script-fu», ja el teníem abans, concretament a «Filters > Enhance» (en la traducció al català «Filtres > Millora»). Així donaré més coherència al meu Gimp, ja que m'he decidit a quedar-me amb aquest script.
No m'entretindré, simplement comentar que a l'arxiu hdr-eff.scm hi canviaré:
"/Script-Fu/Enhance/Fake HDR Effect..." per:
"/Filters/Enhance/Imita l'efecte HDR..."
I a l'arxiu hdr-eff-plus.scm, faré el mateix, canviant:
"/Script-Fu/Enhance/Fake HDR Effect plus..." per:
"/Filters/Enhance/Imita l'efecte HDR extra...".
Amb aquests dos canvis tindrem els efectes reubicats correctament al nostre Gimp, i evidentment posats a tocar els arxius .SCM, que no costa res traduir-los en un moment, si ho desitgeu aquests són els arxius modificats (reubicats al menú i traduïts al català) i comprimits en un .zip: hdr-efectes-catala.zip.

Espero que aquesta entrada hagi estat d'utilitat per a aprendre alguna cosa nova sobre el Gimp, ah i per cert! El Gimp que es veu als vídeos i a les imatges és el 2.7.6 i aviat Softcatalà publicarà la traducció al català per a aquesta versió, o ja per la definitiva, la 2.8 que està al caure. A disfutar-ho!

[Actualització 08/01/12] Recomano la lectura de l'article "Gimp, penes i alegries" del Pau a GnuLinux.cat sobre l'estat del Gimp en diferents aspectes.