【實習生日誌】Processing教學(2):美化資料讀取介面

八月 13, 2015
Facebook
Twitter
文/鄭元傑
除了原本的單純顯示各站Youbike,筆者增加了顏色區分以及小塊面板顯示的功能,此篇延續上一篇的程式。

步驟一

為了讓資料更容易被分析,這邊筆者將每個腳踏車站依照使用率分成紅橘綠三種程度。
這部分程式碼簡易,可以直接閱讀程式註解。

步驟二

接著,筆者希望新增一塊區域顯示滑鼠點擊的區域,取代原本跳出方框的方式。但是原本滑鼠點擊觸發事件是在Station這個Class中發生,在主程式draw裡頭僅有一行map.draw(),在setup時我們已經將所有的Station加入map中,也就是map.addMarkers(_station),接著就由map來繪製並管理所有的Station。

原本事件觸發是因為map發現滑鼠的座標出現在自己所管理的某一個Station上,接著將這個Station設成「被選定」狀態,在Station 裏頭也有draw(),這就是每個Station顯示的方式。

但是,每個Station各自顯示有個缺點,就是後來繪製的Station會蓋過先前的Station,所以在操作時可以發現點擊觸發的方框有可能被遮蓋。

步驟三

我們需要在主程式得到被點擊的Station資料,這部分就是在void mouseMoved()裡頭。

這部分需要查詢unfolding的官方API
http://unfoldingmaps.org/javadoc/index.html
首先for迴圈裏頭表示「逐一檢視map中所有的Marker」全部設為「非鎖定」狀態;接著Marker marker = map.getFirstHitMarker(mouseX, mouseY);
看得出來這是要讀取被標記的Marker,此時就要來看Marker到底是什麼東西;到官方API查詢後發現Marker是個Interface(介面),他底下implement許多class包含Station所繼承的SimplePointMarker

Interface可以被視為一種共同的規格書,實作這個interface的class都需要遵守其中的規範(function),詳細的內容可以看這邊:
http://jimmu-jimmu.blogspot.tw/2012/10/abstract-classinterface.html
再往下拉可以看到Marker這個interface中有哪些函式可以使用;這邊筆者使用了getLocation()與getProperty()這兩個函式取得特定的值。Location是unfolding自己宣告的變數型態,而property是java本身的某種資料型態。如果直接使用這兩個函式會毫無反應,必須先setLocation()與setProperties()。
get和set是一個成對的function命名,主要是對同一參數進行設定與讀值,這部分是在Station中實作的,可以參考程式碼註解。

setProperties()當中需要傳入HashMap,這部分可以參考此網站:
http://openhome.cc/Gossip/JavaGossip-V2/HashMap.htm
別忘了要include java library詳情可以參考程式碼。
目前的程式碼請見此連結:
https://github.com/sj82516/Processing_JSON_Youbike_setUI_step1

步驟四:美化UI

緊接著處理外觀設計,筆者希望增加一個小面板,面板功能主要是顯示資訊以及選擇顏色顯示,因此另外新增了一個InfoPanel的class。UI設計部份可以使用著名的Library,像是ControlP5等等,但是使用其他人開發的Library有個麻煩的地方,就是必須照個他的參數設定,有時候不見得方便,所以筆者就自行繪製按鈕。

一開始是一連串的參數設定,有幾個方程式:繪製面板、繪製按鈕以及設定按鈕顏色,一般來說,按鈕有三種狀態default(初始狀態)、focus(被鎖定)、click(被按下),筆者針對這三種狀態設定不同的顏色,其餘細節可看註解。

另外分享一點,筆者一開始僅使用mousePressed判斷滑鼠是否按下,但發現bounce的情況過於嚴重,所已增設一個pressStat,在主程式使用mouseReleased()抓取滑鼠按下放開的那一刻才將pressStat設為true,其它情形再把它設回false,就完成debounce的動作。

接著就可以點選不同的按鈕選擇希望輸出的特定顏色Youbike站囉!

參考http://unfoldingmaps.org/javadoc/index.html?de/fhpotsdam/unfolding/providers/package-summary.html

裡頭可以分成兩種,一種是以Provider結尾的,這種的話就要在include在專案中,像是:「import de.fhpotsdam.unfolding.providers.ThunderforestProvider;ThunderforestProvider就是一個地圖的提供者
接著在「map = new UnfoldingMap(this, new ThunderforestProvider.Landscape());」後面可以看到ThunderforestProvider.後面帶一個提供的地圖形態,可以挑選自己喜歡的。

Social media & sharing icons powered by UltimatelySocial