sobota, 31 sierpnia 2013

Importowanie i wyświetlanie plików KML w Google Maps

Ubocznym skutkiem dodania współrzędnych geograficznych do zdjęć za pomocą skryptu gpsPhoto.pl jest plik w formacie KML. Każde zdjęcie w takim pliku jest oznakowane jak na przykładzie:


#1: Import do GMaps

#2: Z pinkaccordions

#3: Z sites.google.com

#4: Z sites.google.com

#5: Z serwera chello.pl

<Placemark>
<name>s300013_08275298.jpg</name>
<description><![CDATA[<a href="/home/tomek/Obrazy/s300013_08275298.jpg">
<img src="/home/tomek/Obrazy/s300013_08275298.jpg" width="200" /></a><br>
<a href="/home/tomek/Obrazy/s300013_08275298.jpg">full size</a>]]>
</description>
<Point>
<altitudeMode>clampToGround</altitudeMode>
<coordinates>16.496808361,53.466461571,122</coordinates>
</Point>

Dawno temu zrobiłem skrypt, który podmienia adres w lokalnym systemie plików (taki jak /home/tomek/Obrazy/s300013_08275298.jpg) na tenże plik, ale umieszczony na moim koncie w serwisie flickr.com:


<Placemark>
<name>s300013_08275298.jpg</name>
<description><![CDATA[<a href="http://www.flickr.com/tprzechlewski/9615076609/">
<img src="http://static.flickr.com/7411/9615076609_a243eed0f1_m.jpg" width="200" /></a><br>
<a href="http://www.flickr.com/tprzechlewski/9615076609/">full size</a>]]>
</description>
... itd ...

Taki plik za pomocą kilku klików importowałem do mapy Google (Mapy→Moje Miejsca → utwórz w klasycznej wersji Moich map) i działało -- do zeszłego piątku, kiedy to plik KML z wycieczki do Nadarzyc uparcie nie chciał się poprawnie wyświetlić (#1 -- obcięty ślad w okolicach Nadarzyc).

Konsultując problem via Google dowiedziałem się, że cyt KML upload and rendering has always been problematic with Maps i że lepiej (jeżeli już) to nie importować KML tylko wyświetlić go podając URL do dokumentu KML jako wartość parametru q. Przykład:


https://mapy.google.pl/maps?q=http://pinkaccordions.homelinux.org/Geo/kml/20130828__MP.kml

Działa (rys. #2). Ponieważ serwer pinkaccordions.homelinux.org jest rachityczny pomyślałem, że dobrze by było plik KML umieścić w jakimś lepszym miejscu, np. na witrynie sites.google.com. Jest nawet dedykowany -- i niestary bo z 2010 roku -- dokument w temacie pn. Using Google Sites to Host Your KML

Niestety plik KML pobierany z http://sites.google.com/site/ nie wyświetla się poprawnie. Po kliknięciu w ikonę niektórych zdjęć otwiera się okno ale jest ono puste (#3) i/lub nie wskazuje na stosowne miejsce na mapie (por. #4). Kombinowałem jak toto poprawić ale nie doszedłem do żadnych pozytywnych wniosków: połączenie GMaps + KML + sites.google.com nie działa.

PS: przypomniałem sobie, że mój Internet Provider daje w pakiecie konto na serwerze WWW z limitem 200Mb (z którego do tej pory mało korzystałem)... Sprawdziłem -- działa. Będę zatem tam trzymał pliki KML/KMZ (Rys. #5.)

Wycieczka do Bornego Sulinowa

We wtorek pojechaliśmy do Nadarzyc koło Bornego Sulinowa (Gross Born). Głównym punktem wycieczki był spływ rzeką Piławą. Byliśmy na miejscu (agroturystyka U Stasia w Nadarzycach nad brzegiem Piławy) tuż po 11:00. Dalej standard: pojechaliśmy samochodem właściciela i jego kajakami do mostu nad Piławą we wsi Liszkowo. Około 12:00 z tego miejsca zaczęliśmy spływ, który skończyliśmy U Stasia tuż przed 18:00.

Miejscami jest bardzo szeroko, miejscami rzeczka jest płytka i wąska. Jest odcinek z przeszkodami (zwalone drzewa), ale da się płynąć. Dwa razy trzeba przenieść kajak.

Drugi raz w życiu widziałem zimorodka!

Rzeczka jest malownicza a miejsce wydaje się odludne (byliśmy wszakże ,,po sezonie''). Płynąc Piławą warto zapoznać się z trasą, mieć GPSa albo mapę bo na jeziorach są czasami wątpliwości ,,którędy dalej...''

Następnego dnia poszwendaliśmy się po Bornym Sulinowie oraz zwiedziliśmy kirkut w Jastrowie.

Ślad całej wycieczki (ze zdjęciami) jest tutaj.

sobota, 24 sierpnia 2013

Konwersja z WordPressa do Bloggera

Kol. DM pisze sobie bloga używając WordPressa. Trochę go to kosztuje więc pojawiła się koncepcja żeby przeszedł na bezpłatnego Bloggera. Początkiem tej koncepcji jest oczywiście konwersja WP do formatu Bloggera.

Wpisy kol. DM zawierają tekst i dużo zdjęć oraz innych rysunków. Nie mam bladego pojęcia nt. WordPressa, ale dość szybko ustaliłem, że można wyeksportować treść posługując się stosowną funkcją dostępną z Kokpit→Narzędzia→Eksport (powstaje plik w formacie WordPress eXtended RSS -- WXR).

Plik WXR zapisujemy na dysku. Można go zamienić do formatu Bloggera korzystując z konwertera dostępnego tutaj. Jest wprawdzie napisane, że konwerter obsługuje pliki nie większe niż 1Mb, ale mój miał 4Mb i też poszło.

Plik kolegi DM zawiera tekst oraz prawidłowe linki do niektórych rysunków. Inne rysunki są wstawiane sprytnym czymś co nazywane jest shortcode (cf Shortcode API.) Nie wchodząc w szczegóły, zamiast rysunków w treści postu jest umieszczone np. coś takiego:


[nggallery id=506]

506 z kolei jest identyfikatorem zbioru rysunków, które fizycznie są przechowywane w katalogu:


wp-content/gallery

Każda galeria jest w oddzielnym katalogu, ale nazwami katalogów nie są identyfikatory typu 506 ale coś innego. Logując się do phpMyAdmin byłem w stanie ściągnąć całą bazę (w formacie SQL), w której siedzi WordPress. W jednej z tabel bazy znalazłem przypisanie id_galeriinazwa-katalogu-z-plikami


INSERT INTO `wp_ngg_gallery` (`gid`, `name`, `slug`,
`path`, `title`, `galdesc`, `pageid`, `previewpic`, `author`) VALUES
(17, 'gottardo_2', '', 'wp-content/gallery/gottardo_2', '', '', 0, 0, 1),
(16, 'gottardo_1', '', 'wp-content/gallery/gottardo_1', '', '', 0, 0, 1),
(15, 'nufenen', '', 'wp-content/gallery/nufenen', NULL, NULL, 0, 0, 1),
... itd ...

Czyli zawartość czegoś, co w treści wygląda jak:


[nggallery id=15]

Znajduje się w katalogu wp-content/gallery/nufenen.

Teraz ściągnąłem cały katalog wp-content na dysk lokalny wykorzystując ncftp


ncftp -u USER -p PASS HOST
get -R -T wp-content

Następnie zamieniłem nazwy plików w następujący sposób:


nr_galerii__nazwa_pliku

Pliki wysłałem na google za pomocą skryptu. Istotne jest to, że skrypt po załadowaniu, zwraca URL zdjęcia pod którym jest ono dostępne na koncie googla:


100__fra_07063.jpg http://lh5.ggpht.com/-26SgLqsS1vM/UhdwT-Q62CI/AAAAAAAAABQ/k_ipaT4SNsE/100__fra_07063.jpg
100__fra_07064.jpg http://lh4.ggpht.com/-1kWivWwiZW4/UhdwU4vZWPI/AAAAAAAAABY/XxuIGrIPj8Q/100__fra_07064.jpg
itd...

Czyli zdjęcie 100__fra_07063.jpg (oryginalnie należące go galerii o identyfikatorze równym '100') jest dostępne pod adresem:


http://lh5.ggpht.com/-26SgLqsS1vM/UhdwT-Q62CI/AAAAAAAAABQ/k_ipaT4SNsE/100__fra_07063.jpg

Uwaga: Album ze zdjęciami na koncie googla może zawierać maksymalnie 1000 zdjęć. Jeżeli zdjęć jest więcej trzeba utworzyć więcej albumów.

Skryptem Perla (wyrażenia regularne/regułowe) zamieniam każde [nggallery id=506] na stosowny ekwiwalent. Przykładowo:


&lt;div id='gid_g509'&gt;
&lt;span&gt;&lt; a href="http://lh5.ggpht.com/-NZ_dEAq8qZI/Uhf_OPG9jiI/AAAAAAAADp8/BtBx9DwVgs4/509__1106_016.jpg"
imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"&gt;
&lt;img border="0" src="http://lh5.ggpht.com/-NZ_dEAq8qZI/Uhf_OPG9jiI/AAAAAAAADp8/BtBx9DwVgs4/s128/509__1106_016.jpg"
height='85' /&gt;&lt;/a&gt;
&lt;/span&gt;
... itd ...

Pozostałe zdjęcia mają `prawdziwe URLe' (a nie jakieś shortcody), ale oczywiście URLe te są złe bo wskazują na starego hosta. Zdjęcia te (z `prawdziwymi URLami') są przechowywane w katalogu ./wp-content/uploads. Ze zdjeciami postępuję, tak jak w przypadku zdjęć z galerii: 1) wysyłam na konto google skryptem; 2) zmieniam oryginalne URLe na URLe z konta google (skryptem Perla).

Przed importem do Bloggera warto sprawdzić czy plik, który ma być zaimportowany jest well-formed:


xmllint plik-do-zaimportowania.xml

czwartek, 22 sierpnia 2013

Problematyczny Lightbox w Bloggerze

Kliknięcie zdjęcia lub obrazu zamieszczonego na blogu powoduje wyświetlenie go w nakładce na stronie. Jest to tzw. widok Lightbox. (cf. Widok Lightbox w Bloggerze):

<div>
<span>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU6xuLcKQQ-_ccqmRlM7tjekEMVB4Jgx2UvxS8wqL5154fLo383vlvKYmL4wvghW9wCu6nIyGyvW5eyEv4TNkScK3qc0zGJxZ4EOAC7Pb0YWWnBFGpDgcrmXwqNFP1au-D_nwrdBMPd78N/" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU6xuLcKQQ-_ccqmRlM7tjekEMVB4Jgx2UvxS8wqL5154fLo383vlvKYmL4wvghW9wCu6nIyGyvW5eyEv4TNkScK3qc0zGJxZ4EOAC7Pb0YWWnBFGpDgcrmXwqNFP1au-D_nwrdBMPd78N/s128/epl313_6040342.jpg" /></a>
</span>
<span>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MsKjD61FOS9mOciTMc2srBAy9YeDnFfq05r_PPhFA8-psqNilfs5hkET159ViIBg07tw9kJBFT2Yy-aI7KplfVUNvmICu07pwX0Q2UPiQenTfmKh11P_ZrAs1_aRZjdeDiHTOyyy-gu6/" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MsKjD61FOS9mOciTMc2srBAy9YeDnFfq05r_PPhFA8-psqNilfs5hkET159ViIBg07tw9kJBFT2Yy-aI7KplfVUNvmICu07pwX0Q2UPiQenTfmKh11P_ZrAs1_aRZjdeDiHTOyyy-gu6/s128/epl313_6040338.jpg" /></a>
</span>
<span>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA059OOx8ZLS7XqpiZ94iAZ7fdepsU3VAnGCeZ01SiDImelMrjHZwBd5g_o9shvBVB4Ut6x-_cfDrT51VvTc8KuQ7VlCYcZhOr0kEFenfurTKIs_rescLpAKu3-QbCtdwMmDEFaehvU3FM/" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA059OOx8ZLS7XqpiZ94iAZ7fdepsU3VAnGCeZ01SiDImelMrjHZwBd5g_o9shvBVB4Ut6x-_cfDrT51VvTc8KuQ7VlCYcZhOr0kEFenfurTKIs_rescLpAKu3-QbCtdwMmDEFaehvU3FM/s128/epl313_6040339.jpg" /></a>
</span>
<span>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jT3S-QbEQ4sUexmIQoryhbi2C53tWrO0yHFrZyhRI-Q3naU_KxDipx0005eXd5t6WTgGwcpHnPDJyYWSG1en1R7aEmtpFxkJbc0tRWjQj3lr2_jNtfNn9B-FAVrtLenz8qLyizwxvOq1/" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0jT3S-QbEQ4sUexmIQoryhbi2C53tWrO0yHFrZyhRI-Q3naU_KxDipx0005eXd5t6WTgGwcpHnPDJyYWSG1en1R7aEmtpFxkJbc0tRWjQj3lr2_jNtfNn9B-FAVrtLenz8qLyizwxvOq1/s128/epl313_6040332.jpg" /></a>
</span>
</div>

Wynik jest następujący (kliknij w zdjęcie aby przejść do widoku Lightboksa):

W powyższym przykładzie zawartość atrybutów href i src jest prawie identyczna, bo różni się wyłącznie fragmentem s128/. Jest to przykład zastosowania sprytnego URLa, który spowoduje automagiczne przeskalowanie zdjęcia, tak aby dłuższy wymiar miał maksymalnie 128 pikseli. Jeżeli zamiast s128/ wstawimy s128-c/ albo s128-p/, to spowoduje to automagiczne wycięcie kwadratu o wymiarach maksymalnych 128 pikseli (crop). Przykład:

<div>
<span>
<a href="http://lh3.ggpht.com/…/epl313_6040338.jpg" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="http://lh3.ggpht.com/…/s128-c/epl313_6040338.jpg" /></a>
</span>
<span>
<a href="http://lh3.ggpht.com/…/epl313_6040338.jpg" 
 imageanchor="1" style="margin-bottom: 1em; margin-right: .1em;"><img border="0" 
 src="http://lh3.ggpht.com/…/s128-p/epl313_6040338.jpg" /></a>
</span>

Symbolem oznaczono pominiętą część URLa (żeby nie wystawał na margines).

Wynik (kliknięcie w zdjęcie nie powoduje przejścia do widoku Lightboksa):

BTW: Liczba 128 nie jest magiczna, można przeskalować obrazek na inny wymiar.

Jeżeli zdjęcia są różnych wymiarów (portret/pejzaż), to s128-c/ (albo s128-p/) jest lepsze niż zwykłe s128, bo minaturki są jednakowej wielkości, tyle że Lightbox takie zdjęcia ignoruje. Czemu -- nie wiem... Nie wiem też jak to zmienić

Jako obejście problemu można przeskalować miniaturkę do jednakowej wysokości. Przykład:

<div>
<span>
<a href="https://lh4.googleusercontent.com/…/epl313_6040342.jpg" 
 imageanchor="1" style="margin-bottom: 1em;"><img border="0" height='85'
 src="https://lh4.googleusercontent.com/…/s128/epl313_6040342.jpg" /></a>
</span>
<span>
<a href="http://lh3.ggpht.com/…/epl313_6040338.jpg" 
 imageanchor="1" style="margin-bottom: 1em;"><img border="0" height='85'
 src="http://lh3.ggpht.com/…/s128/epl313_6040338.jpg" /></a>
</span>
<span>
<a href="http://lh6.ggpht.com/…/epl313_6040339.jpg" 
 imageanchor="1" style="margin-bottom: 1em;"><img border="0" height='85'
 src="http://lh6.ggpht.com/…/s128/epl313_6040339.jpg" /></a>
</span>
<span>
<a href="http://lh5.ggpht.com/…/epl313_6040332.jpg" 
 imageanchor="1" style="margin-bottom: 1em;"><img border="0" height='85'
 src="http://lh5.ggpht.com/…/s128/epl313_6040332.jpg" /></a>
</span>
</div>

Symbolem oznaczono pominiętą część URLa (żeby nie wystawał na margines).

Wynik jest następujący:

Kliknięcie w zdjęcie powoduje przejście do widoku Lightboksa.

Być może za czas jakiś problem zniknie. Wyświetlanie dla tego wpisu 10 zamiast 8 obrazków w widoku Lightboksa będzie tego dowodem:-)