HTML5 Geolocation API (地理位置) 測試 - 小狐狸事務所

使用Geolocation API 當然要對地理定位有基本的認識, 也就是要搞清楚以經緯度為基礎的地理座標系統. 簡言之, 把地球從北極到南極縱切的線稱為經線, 以英國 ... 2013年10月10日星期四 HTML5GeolocationAPI(地理位置)測試 月底要去上HTML5的課,因此現在有空要把各API好好測試一番(我做甚麼事都是盡量做到有備而來).這次要從簡單又吸引人的GeolocationAPI著手.這個東東為什麼炫呢? 它是社群互動最常用的功能(聚會地點) 手機平板電腦的瀏覽器都有支援(桌上型瀏覽器幾乎都已支援,IE9+也支援) 這個API是W3C訂定的,而不是HTML5規格的始祖WHATWG工作小組.其規格可在W3C網站取得: http://dev.w3.org/geo/api/spec-source.html. Geolocation是一個很簡短的介面(interface),只定義了三個Javascript方法來規範GPS接收器傳回值的格式.不過這個功能已經被W3C移出HTML5核心規格,成為一個獨立的API.此API會從兩種來源取得裝置所在的地理資訊: GPS訊號(所使用之裝置必須具有GPS接收器) IP位址(所使用之裝置必須具有網路卡,且連上網路) 當終端設備搭載GPS接收器時,GeolocationAPI會從GPS取得定位資訊,否則就會從IP位址來推測.當然,從GPS所取得的地理資訊(經緯度)較精確,而從IP所取得的只是推估值,誤差可能很大,因為IP係網路服務業者所指派,所以推估出來的經緯度約略是業者機房的位置. 使用GeolocationAPI當然要對地理定位有基本的認識,也就是要搞清楚以經緯度為基礎的地理座標系統.簡言之,把地球從北極到南極縱切的線稱為經線,以英國格林威治天文臺為起點,向東為東經,向西為西經,兩者大約在太平洋的國際換日線處交會,該處是東經180度,也是西經180度.而緯度則是與赤道平行的橫切線,範圍是0~90度,赤道為0度,赤道以北為北緯,以南為南緯,北極為北緯90度,而南極則是南緯90度.度又可以再除以60為1分,1分再除60為1秒.詳細說明請參考維基百科.台北的經緯度大約是E121N25,高雄大約是E120N22,可以在 http://card.url.com.tw/realads/map_latlng.php 這個網站查得.  GeolocationAPI實作於瀏覽器的window.navigator物件中,因此要確認瀏覽器是否有支援此API,可用如下程式碼來檢查相容性(window可省略不寫): if(window.navigator.geolocation==undefined){   alert("此瀏覽器不支援地理定位功能!");   } else{   var geolocation=window.navigator.geolocation;//取得Geolocation物件   //地理定位程式碼   } 或是  if(window.navigator.geolocation){   var geolocation=window.navigator.geolocation;//取得Geolocation物件   //地理定位程式碼   } else{   alert("此瀏覽器不支援地理定位功能!");   } Geolocation物件定義了三個方法,其中getCurrentPosition()與watchPosition()用來取得位置資訊,getCurrentPosition()取得目前位置(僅一次,沒有傳回值),而watchPosition()則是會依照所設定之頻率,持續取得裝置所在位置(傳回值為ID);而clearWatch()則是用來停止watchPosition(),這兩個方法是一個配對,正如Javascript的setInterval()與clearInterval()一樣.呼叫watchPosition()時會傳回一個獨一無二的追蹤編號,當要停止持續定位時,就把此編號當作參數傳入clearWatch()即可. getCurrentPosition()與watchPosition()這兩個方法介面一樣: navigator.geolocation.getCurrentPosition(successCallback,[errorCallback[,options]]) navigator.geolocation.watchPosition(successCallback,[errorCallback[,options]]) 必要參數successCallback與非必要參數errorCallback都是回傳函式,當成功取得位置資訊時就呼叫successCallback,並傳入一個Position物件,位置資訊即包含在此物件的屬性coords中(此屬性是一個Coordinates座標物件).當使用者拒絕或無法取得位置資訊時,就呼叫errorCallback,並傳入一個PositionError物件,錯誤資訊即包含在此物件中.而options是JSON選項物件,用來設定精密度,逾時計時器,以及持續取得位置的頻率. GeolocationAPI傳入successCallback的參數Position物件結構如下 : Position物件的屬性說明   coords Coordinates座標物件,存放傳回之位置資訊  timestamp 取得位置資訊之時間(毫秒,自1970/1/1起) Coordinates 物件的屬性說明   latitude 緯度(單位degree)  longitude 經度(單位degree)  altitude 高度 (單位meter),若裝置不支援則傳回0  accuracy 位置誤差  (單位meter)  altitudeAccuracy 高度誤差(單位meter),若裝置不支援則傳回0  heading 移動方向 (單位degree)  speed 移動速度(單位meter/second) 而當錯誤發生時傳入errorCallback的參數PositionError物件則具有如下屬性 : PositionError物件的屬性說明   code錯誤碼,有四個值(整數): UNKNOWN_ERROR(=0):不明原因錯誤 PERMISSION_DENIED(=1):用戶拒絕位置服務,或瀏覽器設定不允許使用位置服務 POSITION_UNAVAILABLE(=2):無法取得位置資訊(例如在隧道或地下室) TIMEOUT(=3):在計時器逾時仍未傳回位置資訊  message錯誤訊息(字串) 根據code屬性值,我們可以顯示錯誤訊息字串給用戶,告知無法取得定位資訊的原因.而message屬性是程式開發階段除錯用的,通常不直接顯示給用戶看.常用的錯誤處理函式如下:   functionerrorCallback(error){    varerrorTypes={       0:"不明原因錯誤",       1:"使用者拒絕提供位置資訊",       2:"無法取得位置資訊",       3:"位置查詢逾時"       };    alert(errorTypes[error.code]);    //alert(error.message); //測試時用    } API會傳回一個PositionError物件,我們須將其作為參數error傳入錯誤處理函式. 此處我們使用一個物件實體errorTypes來儲存錯誤碼與其解釋字串,以錯誤碼error.code作為索引. 而選項物件options則定義了三個屬性如下: options物件的屬性說明   enableHighAccuracy設定取得高精確度之位置資訊(true/false,預設false).設為true時,瀏覽器會盡可能取得最高精確度位置,通常會優先啟動GPS感測器,若裝置沒有GPS,就會以WIFI熱點或行動基地台三角定位來計算位置,因此設為true會加速耗用行動裝置電池.  maximumAge設定上一次取得之位置資訊的有效期限(單位毫秒,預設為0),每次取得位置資訊時都會保存在記憶體中,再次呼叫位置查詢時API會先查看記憶體中所保存之上一次查詢紀錄是否已經超過maximumAge,是的話就重新查詢,否則就直接傳回記憶體中的舊資料,不會重新查詢.此屬性值大小也會決定watchPosition重新查詢的頻率,越小越頻繁,若設為0表示每次呼叫都必定重新取得新位置.   timeout逾時計時器 (單位毫秒),預設無限大(infinity),若超過此時間仍未取得位置資訊,將會觸發錯誤事件. 接下來,我們就來測試一下裝置所在位置的定位資訊: 測試範例1 : http://tony1966.xyz/test/html5test/geolocation_1.htm [看原始碼] 範例一中,我們把三個參數都傳進getCurrentPosition中,maximumAge設為0表示每次執行都會重新查詢目前位置,timeout設為600000表示查詢等候時間可容許至10分鐘.傳回的位置資訊我們把它放在表格中,每一列的第二格都設定id名稱為各屬性名稱,利用$i函數來設定位置資訊:    if(navigator.geolocation){       vargeo=navigator.geolocation;       varoption={             enableAcuracy:false,             maximumAge:0,             timeout:600000             };       geo.getCurrentPosition(successCallback,                              errorCallback,                              option                              );       }   else{alert("此瀏覽器不支援地理定位功能!");}    functionsuccessCallback(position){     $i("latitude").innerHTML=position.coords.latitude;     $i("longitude").innerHTML=position.coords.longitude;     $i("altitude").innerHTML=position.coords.altitude;     $i("accuracy").innerHTML=position.coords.accuracy;     $i("altitudeAccuracy").innerHTML=position.coords.altitudeAccuracy;     $i("heading").innerHTML=position.coords.heading;     $i("speed").innerHTML=position.coords.speed;     $i("timestamp").innerHTML=position.timestamp;     } Chrome30.0.1599 Firefox24.0 IE9.0.8112 以上是使用筆電在wifi連線情況下的結果,  注意,IE8不支援Geolocation,須IE9+才有. 如果是用桌電以社區網路(LAN)固網連線,那麼在Chrome就無法查得位置,傳回錯誤碼2(positionunavailable)如下圖:   Chrome在LAN連網下無法查得位置  在IE9仍可正常顯示位置資訊,但是精確度卻低得嚇人,測試位置在高雄,621公里是在太平洋耶!   IE9在LAN連網下精確度降低   如果是Firefox在LAN連網下則是會超過timeout計時器造成逾時,回覆code=3(timeout). 依據HTML5規格,呼叫getCurrentPosition或watchPosition方法時,瀏覽器必須預設詢問使用者是否同意提供所在位置資訊,以保護隱私權.各瀏覽器之定位資訊設定如下: Chrome:設定/隱私權/內容設定 Chrome:內容設定/位置 Firefox:工具/頁面資訊 Firefox:透露地理位置   IE9:網際網路選項/隱私權  可見,詢問選項應該被列為預設值,但如果使用者要永遠都透露自己的位置,也是可以的.注意,IE9中若勾選"永遠不允許網站要求您的所在位置"的話,那呼叫Geolocation方法時就會永遠傳回錯誤:"使用者不允許透露位置",所以預設是不勾選,這樣IE就會詢問了.   Chrome詢問視窗   Firefox詢問視窗   IE9詢問視窗 在 W3C的Geolocation規格草案中提到:"FutureversionsoftheAPImayallowadditionalattributesthatprovideotherinformationaboutthisposition(e.g.streetaddresses).".亦即,Position物件將來還會有一個address屬性.在博碩出版的"一定要學會的HTML5+CSS3網頁設計應用"一書中,也有列出Position物件的address屬性(為一nslDOMGeoPositionAddress物件)如下: nslDOMGeoPositionAddress物件說明   country 國家  countryCode 國碼  postalCode 郵遞區號  region 地區  premises 區域   county 州郡   city 市   street 街道名  streetNumber 街道號碼 但事實上目前還沒有瀏覽器實做address屬性,下列範例二我們用JSON.stringify()方法來將Position物件變成字串就可以看出瀏覽器有沒有實做address屬性了: 測試範例2 : http://tony1966.xyz/test/html5test/geolocation_2.htm [看原始碼] 範例二裡,我們在頁面上放了一個p元素來輸出結果,並改寫了successCallback:   

  functionsuccessCallback(position){    $i("output").innerHTML=JSON.stringify(position);    } 下面是在Chrome瀏覽器執行的結果,可見Chrome並未實做address屬性:  {"timestamp":1381453563427,"coords":{"speed":null,"heading":null,"altitudeAccuracy":null,"accuracy":34,"altitude":null,"longitude":120.3156676,"latitude":22.6336712}} 範例一中,我們於表格裡一一列舉coords的屬性,其實這可以用物件迴圈來做,以一個陣列arr來儲存要輸出的屬性及其值,最後再以跳行br串接起來:        functionsuccessCallback(position){    vararr=newArray();    for(variinposition.coords){       arr.push(i+"="+position.coords[i]);       }    $i("output").innerHTML=arr.join("
");    } 測試範例3 : http://tony1966.xyz/test/html5test/geolocation_3.htm [看原始碼] 在Chrome瀏覽器顯示:  speed=null heading=null altitudeAccuracy=null accuracy=101 altitude=null longitude=120.30913050000001 latitude=22.6608414 接著來測試持續監視位置的方法watchPosition(),在下列範例四中,我們加上兩個按鈕,按下id為start的按鈕啟動持續監視,而按下id為stop者則停止監視: 測試範例4 : http://tony1966.xyz/test/html5test/geolocation_4.htm [看原始碼]         vargeolocation=navigator.geolocation;//取得Geolocation物件   $i("start").onclick=function(){     varoption={        enableAcuracy:false,        maximumAge:1000,        timeout:60000        };     watchID=geolocation.watchPosition(successCallback,                      errorCallback,                      option                      ); $i("start").value="位置監視中";//變更按鈕顯示     };//endofonclick  $i("stop").onclick=function(){     geolocation.clearWatch(watchID);//停止監視     $i("start").value="開始";//恢復按鈕顯示     };//endofonclick  };//endofwindow.onload   functionsuccessCallback(position){    vararr=newArray();    for(variinposition.coords){       arr.push(i+"="+position.coords[i]);       }    arr.push(position.timestamp);    $i("output").innerHTML=arr.join("
");    } 範例四必須用行動裝置測試,只要偵測到位置有變動便會再次查詢位置資訊,網頁就會立即更新,我特地騎腳踏車去全聯買東西,半路上停下來看,果真只要走一小段路就會自動更新網頁(當然要先開啟行動網路打開網頁,之後可以關掉只開GPS).如果用在家用筆電測試,只有啟動時抓到一次之後就不變了,我猜是因為沒有切換wifi信號源,所以位置沒變就不會再次查詢. 測試範例5 : http://tony1966.xyz/test/html5test/geolocation_5.htm [看原始碼] GoogleMapJavascriptAPI v3 ~~未完待續 張貼者： 小狐狸事務所 於 10/10/201309:20:00上午 以電子郵件傳送這篇文章 BlogThis！ 分享至Twitter 分享至Facebook 標籤： HTML5 沒有留言 : 張貼留言 較新的文章 較舊的文章 首頁 訂閱： 張貼留言 ( Atom ) 總網頁瀏覽量 小狐狸事務所 載入中… 訂閱 發表文章 Atom 發表文章 留言 Atom 留言 Translate 聯絡表單 名稱 以電子郵件傳送 * 訊息 * 網誌存檔 ►  2022 ( 336 ) ►  10月 ( 21 ) ►  9月 ( 36 ) ►  8月 ( 31 ) ►  7月 ( 34 ) ►  6月 ( 31 ) ►  5月 ( 35 ) ►  4月 ( 42 ) ►  3月 ( 41 ) ►  2月 ( 39 ) ►  1月 ( 26 ) ►  2021 ( 453 ) ►  12月 ( 28 ) ►  11月 ( 38 ) ►  10月 ( 43 ) ►  9月 ( 47 ) ►  8月 ( 36 ) ►  7月 ( 25 ) ►  6月 ( 38 ) ►  5月 ( 30 ) ►  4月 ( 35 ) ►  3月 ( 37 ) ►  2月 ( 41 ) ►  1月 ( 55 ) ►  2020 ( 483 ) ►  12月 ( 42 ) ►  11月 ( 33 ) ►  10月 ( 35 ) ►  9月 ( 43 ) ►  8月 ( 35 ) ►  7月 ( 30 ) ►  6月 ( 46 ) ►  5月 ( 46 ) ►  4月 ( 39 ) ►  3月 ( 48 ) ►  2月 ( 48 ) ►  1月 ( 38 ) ►  2019 ( 459 ) ►  12月 ( 38 ) ►  11月 ( 39 ) ►  10月 ( 34 ) ►  9月 ( 34 ) ►  8月 ( 27 ) ►  7月 ( 50 ) ►  6月 ( 38 ) ►  5月 ( 26 ) ►  4月 ( 51 ) ►  3月 ( 47 ) ►  2月 ( 32 ) ►  1月 ( 43 ) ►  2018 ( 394 ) ►  12月 ( 38 ) ►  11月 ( 36 ) ►  10月 ( 30 ) ►  9月 ( 33 ) ►  8月 ( 31 ) ►  7月 ( 26 ) ►  6月 ( 30 ) ►  5月 ( 48 ) ►  4月 ( 26 ) ►  3月 ( 38 ) ►  2月 ( 26 ) ►  1月 ( 32 ) ►  2017 ( 317 ) ►  12月 ( 35 ) ►  11月 ( 30 ) ►  10月 ( 24 ) ►  9月 ( 34 ) ►  8月 ( 30 ) ►  7月 ( 27 ) ►  6月 ( 28 ) ►  5月 ( 19 ) ►  4月 ( 22 ) ►  3月 ( 21 ) ►  2月 ( 30 ) ►  1月 ( 17 ) ►  2016 ( 296 ) ►  12月 ( 17 ) ►  11月 ( 23 ) ►  10月 ( 28 ) ►  9月 ( 24 ) ►  8月 ( 28 ) ►  7月 ( 33 ) ►  6月 ( 28 ) ►  5月 ( 26 ) ►  4月 ( 24 ) ►  3月 ( 24 ) ►  2月 ( 25 ) ►  1月 ( 16 ) ►  2015 ( 296 ) ►  12月 ( 18 ) ►  11月 ( 22 ) ►  10月 ( 19 ) ►  9月 ( 25 ) ►  8月 ( 27 ) ►  7月 ( 24 ) ►  6月 ( 15 ) ►  5月 ( 23 ) ►  4月 ( 32 ) ►  3月 ( 51 ) ►  2月 ( 22 ) ►  1月 ( 18 ) ►  2014 ( 323 ) ►  12月 ( 29 ) ►  11月 ( 18 ) ►  10月 ( 16 ) ►  9月 ( 15 ) ►  7月 ( 11 ) ►  6月 ( 27 ) ►  5月 ( 41 ) ►  4月 ( 38 ) ►  3月 ( 43 ) ►  2月 ( 38 ) ►  1月 ( 47 ) ▼  2013 ( 267 ) ►  12月 ( 22 ) ►  11月 ( 23 ) ▼  10月 ( 35 ) 宅女小紅 ExtJS4測試(一):對話框與進度條 爽死了 問題在哪裡 絕非笑話 機器學習的好書 精神分裂症探索 罪過大矣 門當戶對 關於SPA(SinglePageWebApplications) CSS中的overflow:hidden與clear:both怎麼用 Win8.1操作摘要 客語認證初級考試 EDUPNanoEP-N8531無線網卡 何鼓的預言 如何用WSH抓取網頁 Win8.1開放下載更新 用磁鐵辨別不鏽鋼餐具是否含過量重金屬 黃帝內經的養生智慧 智慧型手機抓螢幕的方法(截圖) 林徽音與金岳霖 關於鋰電池的使用方式 HTML5好書 好用的SDFormatter 五穀宮伯公生 CHT9100回魂記 家事記錄表 HTML5GeolocationAPI(地理位置)測試 瀏覽量20000 屈原之死 關於客語聲調研究的評論 貴一定是好貨嗎 奠邊府之虎 雞排妹談丟鞋子 聽說劉政鴻要提告 ►  9月 ( 28 ) ►  8月 ( 13 ) ►  7月 ( 32 ) ►  6月 ( 27 ) ►  5月 ( 13 ) ►  4月 ( 19 ) ►  3月 ( 18 ) ►  2月 ( 12 ) ►  1月 ( 25 ) ►  2012 ( 49 ) ►  12月 ( 2 ) ►  8月 ( 5 ) ►  7月 ( 5 ) ►  6月 ( 2 ) ►  5月 ( 4 ) ►  4月 ( 5 ) ►  3月 ( 4 ) ►  2月 ( 10 ) ►  1月 ( 12 ) ►  2011 ( 178 ) ►  12月 ( 9 ) ►  11月 ( 17 ) ►  10月 ( 5 ) ►  9月 ( 1 ) ►  8月 ( 7 ) ►  7月 ( 7 ) ►  6月 ( 5 ) ►  5月 ( 12 ) ►  4月 ( 29 ) ►  3月 ( 29 ) ►  2月 ( 21 ) ►  1月 ( 36 ) ►  2010 ( 201 ) ►  12月 ( 18 ) ►  11月 ( 30 ) ►  10月 ( 23 ) ►  9月 ( 8 ) ►  8月 ( 11 ) ►  7月 ( 9 ) ►  6月 ( 16 ) ►  5月 ( 14 ) ►  4月 ( 47 ) ►  3月 ( 5 ) ►  2月 ( 3 ) ►  1月 ( 17 ) ►  2009 ( 256 ) ►  12月 ( 18 ) ►  11月 ( 29 ) ►  10月 ( 6 ) ►  9月 ( 38 ) ►  8月 ( 25 ) ►  7月 ( 24 ) ►  6月 ( 17 ) ►  5月 ( 16 ) ►  4月 ( 4 ) ►  3月 ( 24 ) ►  2月 ( 34 ) ►  1月 ( 21 ) ►  2008 ( 303 ) ►  12月 ( 28 ) ►  11月 ( 18 ) ►  10月 ( 26 ) ►  9月 ( 29 ) ►  8月 ( 30 ) ►  7月 ( 62 ) ►  6月 ( 59 ) ►  5月 ( 48 ) ►  4月 ( 2 ) ►  3月 ( 1 ) 文章標籤 ♥ ( 19 ) ♥♥ ( 10 ) ♥♥♥ ( 9 ) 人工智慧 ( 86 ) 八字學 ( 1 ) 大數據 ( 6 ) 小狐狸 ( 73 ) 小狐狸生態 ( 22 ) 工作 ( 48 ) 手機 ( 29 ) 日文 ( 3 ) 木工 ( 24 ) 比特幣 ( 2 ) 主機 ( 73 ) 占星術 ( 6 ) 生活 ( 1157 ) 生活雜記 ( 8 ) 多媒體 ( 4 ) 好文 ( 6 ) 好書 ( 401 ) 好站 ( 254 ) 自作專案 ( 3 ) 自動化 ( 29 ) 系統 ( 4 ) 其他 ( 65 ) 易經 ( 1 ) 物理學 ( 10 ) 物聯網 ( 253 ) 信號處理 ( 5 ) 架站 ( 14 ) 相術 ( 2 ) 科學 ( 22 ) 英文 ( 10 ) 計算語言學 ( 3 ) 音樂 ( 73 ) 飛控 ( 25 ) 食譜 ( 72 ) 修行 ( 22 ) 借書 ( 5 ) 旅行 ( 44 ) 旅遊 ( 1 ) 書籤 ( 2 ) 索引 ( 31 ) 能源 ( 94 ) 動畫 ( 2 ) 區塊鏈 ( 3 ) 專案 ( 20 ) 排版 ( 3 ) 控制系統 ( 1 ) 教育 ( 17 ) 深度學習 ( 1 ) 理財 ( 125 ) 軟體開發 ( 8 ) 通訊 ( 3 ) 備忘 ( 2 ) 創客 ( 31 ) 單晶片 ( 30 ) 智慧音箱 ( 1 ) 無人機 ( 18 ) 硬體 ( 38 ) 紫微斗數 ( 2 ) 統計 ( 4 ) 統計學 ( 10 ) 虛擬幣 ( 3 ) 評論 ( 169 ) 量化投資 ( 14 ) 雲端 ( 21 ) 園藝 ( 1 ) 新知識 ( 1 ) 新產品 ( 1 ) 新軟體 ( 7 ) 資安 ( 7 ) 資料科學 ( 35 ) 資料庫 ( 4 ) 農業 ( 23 ) 電子零件 ( 27 ) 電子學 ( 18 ) 電腦 ( 210 ) 電腦技術 ( 12 ) 電路學 ( 1 ) 演算法 ( 8 ) 網頁技術 ( 224 ) 網路 ( 43 ) 網路爬蟲 ( 32 ) 網購 ( 327 ) 語言學 ( 55 ) 語音技術 ( 4 ) 語音辨識 ( 10 ) 影像處理 ( 1 ) 影像辨識 ( 2 ) 數學 ( 21 ) 線上工具 ( 5 ) 線性代數 ( 1 ) 論文 ( 1 ) 養生 ( 20 ) 樹莓派 ( 192 ) 機器人 ( 6 ) 機器學習 ( 158 ) 歷史 ( 60 ) 戲劇 ( 25 ) 還書 ( 125 ) 韓文 ( 1 ) 韓劇 ( 10 ) 醫藥 ( 55 ) 繪圖 ( 3 ) 藝術 ( 2 ) 讀書劄記 ( 9 ) 邏輯設計 ( 17 ) Android ( 13 ) AngularJS ( 1 ) Anime ( 1 ) App ( 30 ) Appfog ( 4 ) Arduino ( 179 ) ASP ( 11 ) AutoIt ( 15 ) AWS ( 16 ) Azure ( 1 ) BananaPi ( 3 ) BigData ( 1 ) Blynk ( 7 ) Bokeh ( 2 ) Bootstrap ( 27 ) brython ( 1 ) C語言 ( 19 ) Chart.js ( 2 ) Chatbot ( 5 ) Cheatsheet ( 2 ) CKeditor ( 1 ) Corona ( 3 ) CSS ( 10 ) D3.js ( 6 ) DataMining ( 1 ) Django ( 20 ) DSP ( 3 ) EasyUI ( 48 ) ESP32 ( 54 ) ESP8266 ( 146 ) Excel ( 11 ) ExtJS ( 24 ) Fintech ( 18 ) Firebase ( 3 ) Flask ( 3 ) FPGA ( 1 ) GAE ( 40 ) GAS ( 2 ) GCP ( 4 ) Git ( 11 ) GitHub ( 5 ) Go ( 1 ) Google ( 24 ) Highcharts ( 2 ) HomeAssistant ( 1 ) HTML5 ( 44 ) IC設計 ( 7 ) Java ( 100 ) JavaFX ( 1 ) Javascript ( 89 ) Jetson ( 11 ) Joomla ( 3 ) jqPlot ( 1 ) jQuery ( 125 ) jQueryMobile ( 30 ) jQueryUI ( 35 ) JSP ( 2 ) Julia ( 12 ) Kali ( 1 ) Keras ( 1 ) Kotlin ( 1 ) Line ( 5 ) Linux ( 15 ) LoRa ( 12 ) Lua ( 6 ) MacOS ( 11 ) Masonite ( 1 ) Mathematics ( 2 ) Matplotlib ( 9 ) mermaid.js ( 1 ) Micro:bit ( 3 ) MicroPython ( 93 ) MongoDB ( 3 ) Nginx ( 3 ) NLP ( 29 ) NLTK ( 5 ) Node.js ( 14 ) NoSQL ( 1 ) Numpy ( 1 ) OpenCV ( 2 ) p5.js ( 14 ) Pandas ( 7 ) PHP ( 109 ) Plotly ( 1 ) Praat ( 23 ) Python ( 463 ) PyTorch ( 12 ) R語言 ( 43 ) RaspberryPi ( 132 ) Ruby ( 1 ) scikit-learn ( 2 ) SciPy ( 4 ) Seaborn ( 3 ) SpaCy ( 4 ) SQL ( 15 ) SQLite ( 1 ) STM32 ( 2 ) Swift ( 6 ) TCP/IP ( 6 ) TensorFlow ( 19 ) tensorflow.js ( 3 ) Three.js ( 1 ) TinyMCE ( 1 ) tkinter ( 16 ) UAV ( 3 ) Ubuntu ( 2 ) Verilog ( 1 ) VHDL ( 1 ) VoIP ( 1 ) Vue ( 7 ) WebGL ( 3 ) Wireshark ( 2 ) WordPress ( 18 ) WSH ( 5 ) 常用連結 QR-Code產生器 爾灣分校Python函式庫 神秘金字塔 MyGitHib Google協作平台 Hinet信箱 Dropbox box Aliexpress bittrix24 CCompiler CH.Tseng G.T.Wang部落格 HomePi HTMLCleaner IBMSwiftSandbox Inside Kej'sRetriever muckibu.de OneDrive Pinterest Python機器學習 Rmanual Rapidgator TutorialsPoint VirusTotal Youtube-mp3 Zamzar線上轉檔 中華電信Hibox 台大網路測速 線上C編譯器 線上OCR 螢幕錄影 訂台鐵與高鐵票 高師大圖書館 高科大圖書館 高雄市立圖書館 線上方程式 音頻轉換器 CSS色碼表 Youtube轉mp3 熱門文章 Arduino基本語法筆記 Arduino的程式語法基於C/C++,其實就是客製化的C/C++語言,其程式架構仿自廣為藝術與設計界人士熟悉的Processing語言,而其開發工具ArduinoIDE則是衍生自以Processing為基礎的電子開發設計平台Wiring.由於... Arduino串列埠測試(UART) 今天要下午才進辦公室,早上都在家,所以研究測試了一下Arduino的串列埠,紀錄整理如下.所謂串列埠是源自IBMPC的RS-232通訊協定,也就是個人電腦後面的COM埠(9針公座DB-9),現在新的桌上型電腦與筆電大都沒有接出COM埠了,... GooglePlay安裝或更新App一直顯示"正在等待下載"問題 最近我的Note8手機要更新Yahoo股市App時一直顯示 "正在等待下載",但是進度條卻不動:我按GooglePlay左上角的三條槓選"設定",點"應用程式下載偏好設定"改... Python內建GUI模組tkinter測試(一):建立視窗 最近因為玩樹苺派的關係,接觸到Python內建的GUI開發模組Tkinter(意思是TkInterface),初步覺得比用Java的Swing還要來得容易,因此就來學看看唄!Tk原先是為Tcl語言所開發的GUI套件,因為是T... 邏輯設計筆記序向篇:Latch(電栓)與Flip-Flop(正反器) 這個月為了邏輯設計授課努力打了200多頁簡報,為了查閱方便整理在此,同時也讓我的外籍學生們可利用Google翻譯以母語複習上課內容.由於本次協同授課負責序向邏輯部分,因此先整理序向邏輯,組合邏輯以後有機會再整理.雖然說現在設計IC大都改用VHDL或V... Java複習筆記:陣列 陣列是程式員最常用的資料結構,Java的陣列屬於傳統的固定式陣列,亦即陣列元素資料類型必需相同,而且元素個數必須先宣告才能使用,不像Javascript等動態語言之陣列允許異質性資料,且長度不需先宣告即可使用.當然,Java陣列也不支援關聯性陣列,Java... jQueryUI的日期選擇器datepicker測試 近兩周都在玩jQueryUI的日曆小工具(或日期選擇器datepicker),就是讓使用者可以直接在日曆上選取日期的小工具,而且日期格式可以指定.這個widget小工具根據書上講是jQueryUI最古老,功能選項也最龐大的一個,照官網範例三兩下就看到... ★ESP8266WiFi模組ATcommand測試 這是我今年四月以$180向露天賣家XLAN買的超小型WiFi模組(現已降價為$145),採用上海樂鑫科技的ESP8266晶片,板子型式是ESP-01,這是Arduino最經濟的WiFi方案,因為目前買一塊內建WiFi的Arduin... ★ESP8266WiFi模組與Arduino連線測試 經過兩個月來的摸索,對於Arduino經由ESP8266連上網路的實驗終於來到實作階段.這當中也分心去研究如何製做ESP8266的轉接板,雖已經有腹案,但覺得還是先把連網實驗做完再來搞定轉接板好了.這兩塊板子互連主要有兩個障礙,一是開發階段串列埠不夠的問題... Arduino的聲音測試(一) 很早就想做這個實驗,因為只需要ArduinoNANO加上一個蜂鳴器就可以進行了,頂多加一顆按鈕開關,這跟物聯網無關,因此不需要用到ESP8266上網.趁著中秋連假,就把這個簡單的小實驗做完吧!以下實驗所用的程式是參考下列幾本書裡面的範例加以修改來的:... 關於我自己 小狐狸事務所 熱愛自由不想被拘束,無法忍受無聊而不斷學習的射手座,因為記性不好必須在部落格紀錄思考學習與生活點滴的平凡上班族. 檢視我的完整簡介 追蹤者