Flickr Edit On GMap v0.9

Update:

  • UI revise. The ‘split’ between map and photo is now adjustable. In previous version, only medium(500px) photo is supported. An appropriate size of photo will be displayed to fit the area of photo part.
  • GPS track now support only local GPX file
  • Remove logout function. Leaving the page results in logging out.

Google Spreadsheet and Track Viewer on Gmap

Track Viewer on Gmap can load track specified in URL, so that it can be embeded in other pages using iframe.
example:
http://photo.vito.tw/track/?key=phd0Onr_IEDNp9FiHchPwLw
The format of Google Spreadsheet track format and the way to produce is described here:

format: just simple as “Index, Lat, Lon, Altitude, Time”, as shown:
excel_result

To generate this spreadsheet, you can 1, use GPSbanel, and 2, use
this page, or craft manually yourself.

The generated excel( or csv files) must be uploaded to Google Docs, and “published” so that everybody else can view it.

Using GPSBABEL: Select the output format as “Tab delimited filelds useful for OpenOffice, Ploticus…”. Please NOTE: the Altitude fields generated by psbabel is “Altitude(m)”, and you must manually delete “(m)”. And there are unused fields, it is better to delete those unused fields to save internet resources.

gpsbabel


Track Viewer on Gmap 事實上可以用網址的方式載入軌跡,以便以iframe的方式內嵌於一般的網頁中。
例如:
http://photo.vito.tw/track/?key=phd0Onr_IEDNp9FiHchPwLw

而Google Spreadsheet的格式和產生方法說明如下:

格式:Index, Lat, Lon, Altitude, Time

excel_result

產生方式:有三種,使用GPSBABEL,自己產生,以及用這個網頁產生。

不管用什麼方式產生,都必須上傳到Google Docs,然後公開發佈。主要是因為Google目前沒有提供公開發佈的API,所以沒有一個方便的方法。

使用GPSBABEL,選擇輸出格式為”Tab delimited filelds useful for OpenOffice, Ploticus…”。請注意,gpsbabel產生的檔案中Alititude為Altitude(m),要手動修改刪掉”(m)”,另外,會有

很多沒用到的欄位,刪除這些沒用到的欄位可以避免網路資源的浪費,會比較好。

gpsbabel

Track Viewer on Gmap-中文版

我不介意我是唯一的使用者,但如果有人喜歡它,我會覺得很高興。所以,我決定公開這個網頁。

Track Viewer on Gmap可以看GPX檔(Google Spreadsheet)的軌跡,它也可以將選擇的軌跡存成單一軌跡。
示範及截圖:
進入http://photo.vito.tw/track/.
會看到一個很簡單的Google Map:
opening
右上方的Google control下有一列工具列:
toolbar
這些工具列包括了所有的功能:
載入 – 載入軌跡
儲存 – 將顯示的軌跡存成GPX 檔
顯示/隱藏軌跡資訊 - 顯示或者隱藏目前選擇的軌跡資訊
顯示/隱藏高度變化圖 - 顯示或者隱藏目前選擇的高度變化圖
顯示/隱藏速度變化圖 - 顯示或者隱藏目前選擇的速度變化圖
顯示/隱藏軌跡列表 - 顯示或者隱藏軌跡資訊列表
About - 關於

從載入開始看,可以載入Google Spreadsheet的資料,當然,這個spreadsheet必須是公開發佈而且是符合要求格式的:
load_track_gss
或者是指定GPX檔的網路路徑,這個網路路徑當然也是必須可以被其他人看到的。
load_track_url

最後一個可能是上傳GPX檔。請注意:由於Javascript無法存取本地機器上的檔案(是的,有例外,但不是很方便),所以GPX檔必須先上傳再下載,所以會花一些時間。

一旦載入成功,就可以見到地圖上顯示的軌跡,以及右上方有一個軌跡的列表。
勾選/取消勾選可以顯示/隱藏對應的軌跡。
要選擇一條軌跡請點選軌跡的名字。
load_
這個列表也可隱藏起來。
hide_track_list
點第三個圖示即可顯示目前所選的軌跡的一些資訊:
select_track
可以顯示高度及速度變化圖,點變化圖則會在地圖上對應的點出現infowindow:

chart

最後,可以儲存目前顯示(也就是有勾選的)軌跡,如果選擇合併,則所有的軌跡會合併成一條軌跡。

save

Track Viewer on Gmap

I don’t mind that I am the only user, but if someone else like it, I would be glad. That’s why I published this application.

Track Viewer on Gmap is used to view TRACKS of gpx files(and Google Spreadsheet). Saving selected tracks and optionally combine them into one single track is also possible.
Simple demostration:
Go to http://photo.vito.tw/track/.
You will see

opening

look at the right top coner, below GMAP control:

toolbar

All functions are listed as icons, and they are:

Load – load tracks

Save – save selected tracks to another GPX file.

Show/Hide Track Summary -show or hide information about selected track.

Show/Hide Altitude Chart – show or hide altitude chart of selected track

Show/Hide Speed Chart – show or hide speed chart of selected track

Show/Hide Track List – show or hide the “Track List”

About

Let’s start from “Load”. You can load track from data of Google Spreadsheet. Of course, the spreadsheet must be published and formated.

load_track_gss

Or, you can open GPX file specified as URL, the url should be public accessible.

load_track_url

Or, you can upload an valid GPX format file as the third option. Note: since Javascript cannot access local file, the local gpx file must be uploaded and then downloaded, so it will take some time to finish loading.

Once tracks are successfuly loaded, you can find a list of tracks below the tool icons.

Check/uncheck the checkbox to show/hide the track.

Click the track name to SELECT the track.

load_

You can hide the Track List.

hide_track_list

Click the 3rd tool icon to show Track Summary.

select_track

Alitude/Speed charts. You can click on the chart, and the coresponding point on map will be shown.

chart

You can save showing track into another GPX file. Showing tracks are those shown on map with checkbox checked. You can “combined” them to a single track with specified track name.

save

Flickr Editor on Google MAP

This application is here for two reasons.
The first reason: I am learning Javascript/AJAX, and I love Flickr and Google Map.

The second reason: I upload all my photos to Flickr, most of them are during travel and location is important, and select some of them to share with friends. Flickr Organizer is good to manage photos/photosets. However, it’s hard for me to select photos from one set in Flickr Organizer, for I cannot make selection by seeing the thumbnails. To look larger photo, and the location where the photo was taken is also cumbersome. Not to mension that you must wait to save modification to title/description of each photo.
The goals are:

  1. Google Map is used, of course.
  2. Keyboard Control for Previous/Next, and Tag set/unset.
  3. “Medium” photo displayed, and preloaded. “Large” photo is available and can be quickly accessed.
  4. Update modification in one batch

So this Flickr-Gmap mashup is created, so that I can edit title/description, by look where the photo was taken, and set tags quickly. Other operations, like
perimission setting or creating new set, can be done easily in Flickr Organizer.

http://photo.vito.tw/som/index.html

Usage:

  1. Login Flickr and Authorization
  2. Click the link “Login Flickr” on left-bottom to login Flickr and authorize “Flickr Editor” to access your photos.
    You can also VIEW photo sets by manually input SET ID, without login. Of course, you can only see PUBLIC photoswithout login.
    The authorization data is not saved, so you must “log-in” everytime.
    If you want to edit Titles, Descriptions, Locations, Tags of your photos, you must authorize “Flickr Editor” to “Write Access”.

  3. Browse
    select set
    Once login and authorized, you can select your photoset from the drop down list.
    Scroll and click the thumbnails to view photos. You can also click the markers on map to select photos.
    Keyboard action:
    ‘z’: previous photo.
    ‘x’: next photo.click the photo to see “Large Image”. Click on the “Large Image” to dismiss it.
  4. Edit
    If “Write Access” is authorized, you can edit the meta data following.
    Click “End Edit” button to end edit mode.
    Or, click “Update All” to update editing to Flickr.
    Everything you modified is kept locally, before you “Update All” to Flickr.The description must be loaded before you can edit it. Since description is loaded in asynchronous manner, you might see “loading” in the description textarea.

    1. label & description
      Input the text in the text fields.
    2. location
      Click the “Set Location” button, and click on map to set photo location.
    3. tags
      The most complex items here.
      Check/uncheck the checkboxes to set/unset Tags.
      The tag names can be changed. Just place mouse cursor over “Tags”, the
      tag names editor will pop-up.
      tagname editor
      Change the text to what you want.
      The real tag names used to update to Flickr are those before you press
      Update All“. For example, if you select tag 1, named “select_1“, and later change the “select_1” to “myselection_1“, and then press “Update All“, the tag set to Flickr will be “myselection_1“. Changing tag names will change status of the checkboxes, to reflect the real status of TAG- set or unset. For example, if one photo already has one TAG , named “myprevious_select“, and after changing one of the tag names to “myprevious_select“,the corresponding checkbox will be checked. The TAGs of the photo will also show on the Tag Name Editor, following the “This Photo“.
      Keyboard Action:
      press key 1,2, or 3 to set/unset corresponding tags.

View Mode:
See “Browse” section. If setid is given in URL, it is in “View only” mode.
eg.
http://photo.vito.tw/som/index.html?set=72157600565648150

—————————————————————–
寫這個應用有兩個理由;第一,我在學Javascript/AJAX,我喜歡Flickr及Google Map。
其次,我把所有的照片都放上Flickr,然後挑選一些公開;這些照片大都是去玩的時候拍的,所以拍照的地點有重要性。Flickr Organize很好用,但是拿來選照片就很難用:只看縮圖很難決定,而要看大一點的圖及地圖,更是要用Mouse點好幾次才行。更提每更改一張照片的資訊,就要等一下子。
想要的樣子是:

  1. 使用Google Map。
  2. 可以用Keyboard看下/上一張,以及設Tag
  3. 可以看到”Medium”(中等)的照片,有預載,也可以很快地看大圖。
  4. 一次更新所有的變動,而不是改一下就要更新。因為更新要等一下,節奏不順。

這個Flickr-Gmap的「混搭」就是這樣來的;可以編輯Title/Description、可以看到照片在那裏拍的,快速地設Tag。設好Tag後就可以很方便地用Flickr Organize來做其他動作;例如,更改權限或加入新的SET。

http://photo.vito.tw/som/index.html

使用方法:

  1. 登入Flickr及授權
  2. 點左下角的”登入 Flickr” 授權”Flickr Edito on Google Map”的存取。不登入也可以用輸入SET ID的方式看照片,但只能看到公開的照片。
    因為授權的資料沒有被儲存,所以每次都要「登入」。
    要編輯Title/Description/location/Tag的話,必須授權「寫入的權限」。

  3. 流覽
    select set
    一旦登入也授權後,你的所有的SET都會出現,可以在左下方那個下拉式選單點選。
    選了一個SET後,縮圖就會出現,如果有設定位置,也會在相對的地圖上出現一個標記。縮圖和地圖上的標記都可以點。點左方的圖可以看大圖。
    鍵盤操作
    ‘z’: 前一張。
    ‘x’: 下一張。
  4. 編輯
    如果是授權「寫入」,就會出現「編輯」的按鈕。按下則可以更改下列的項目。
    按下「結束編輯」就會結束編輯狀態。
    或者,如果已經有變動,按下「更新全部」就會將全部的變動更新到Flickr。
    請注意在按下「更新全部」之前,所有的變動都不會動到Flickr。另外,照片的說明(description)必須要下載完成才能進行編輯。因為說明是以非同步的方式下載的,所以你可能會看到”Loading”出現。

    1. 標題及說明
      輸入文字即可。但按「更新全部」才會將變動存到Flickr。
    2. location
      按”設定位置” 按鈕,然後在地圖上對應的點按一下。
    3. Tag
      這個有點複雜:
      基本上就是可以勾選三個Tag前的checkbox。不過,tagname是可以改變的:只要將游標移到”Tags”,就會出現一個可以編輯tagname的editor。
      tagname editor
      勾選Tag只是勾選邏輯上的三個tag,真的會寫到flickr的tag最在按「更新全部」鈕之前的tagname。例如,原本第一個tag是”select_1″,勾了第一個tag,後來將”select_1″改成”myselection_1″,如果接著就儲存變動,則真正的tag是”myselection_1″。改變這三個tagname也會改變checkbox的狀態,以反應真正的狀態:例如,如果有張圖已經有一個tag叫”myprevious_select”,當把第一個tagname改成”myprevious_select”後,對應的checkbox就會被勾選。照片原本有的TAG會出現在編輯tagname的editor下,在”This Photo:”後面。
      鍵盤操作
      按1,2,3 即可勾/取消勾選這三個Tag。

純流覽模式
操作請參考前面的說明。如果網址加上set id進入,則不會出現可以編輯的畫面。
例如:
http://photo.vito.tw/som/index.html?set=72157600565648150