分類
Javascript

有趣的trackingjs javascript framework

這個利用 javascript 寫的 tracking js 用來做許多視訊與圖形辨識上的應用, 官方介紹在這裡:

http://trackingjs.com/

來看看他的應用有哪些:

  1. 相片裡的人臉辨識 http://trackingjs.com/examples/face_tag_friends.html 像 facebook 裡的標記朋友那樣的功能.
  2. 人臉的眼、口辨識: http://trackingjs.com/examples/face_hello_world.html
  3. 動態的人臉追蹤, 這是從 webcam 動態追蹤人臉: http://trackingjs.com/examples/face_camera.html
  4. 相片的顏色辨識: http://trackingjs.com/examples/color_hello_world.html
  5. 從 webcam 的影像做顏色辨識: http://trackingjs.com/examples/color_camera.html
  6. 從 video 中的影像做顏色辨識: http://trackingjs.com/examples/color_video.html

還有很多其他型式的應用, 簡單來說, 這個 framework 把原本是在應用程式中才能做的特殊影像辨識技術應用在 browser 裡的 javascript 來達來, 目前比較會有問題的是在效率的問題, 不過若是未來 browser 強化與隨著 cpu 等級提升, 相對這些也就都不會是問題了.

快來玩看看吧.

分類
Javascript

CSS寬度問題

今天在修正一個瀏覽器相容性問題時, 在使用 css 中的 calc(100%- 10px) 這樣的語法時, 由於 ie8 不支援, 所以改用 jQuery 的 obj.parent().width() 來進行設置.

測試後發現有一點落差, 起用 browser 的 box model 來檢查, 發現其中 parent 有設定左右的 padding, 導致 parent width 和原來的 css calc(100% -10px) 的 100% 會有落差, 所以查了一下 jQuery 語法, 使用 obj.parent().outerWidth() 就能順利取得和原來 css calc(100% -10px) 的 100% 寬度相同了.

如此一來就解決了在 ie8 下寬度使用 calc(100% -10px) 語法的問題.

分類
Javascript

可愛的ClockPicker-用時鐘方式來選取時間

這個專案組件很可愛, 是一個時間選取器, 呈現的介面就是一個時鐘, 操作起來還蠻方便的, 另外也在手機上測試操作看看, 也是一樣方便順手, 蠻有意思的.

有需要使用到 timepicker 的場合, 可以試看看這組 clockpicker , 很不錯.

有 bootstrap版本: http://weareoutman.github.io/clockpicker/
還有 jQuery 版本: http://weareoutman.github.io/clockpicker/jquery.html

分類
Javascript

[json]如何讀取含有減號的json key

剛在撰寫程式碼時, 發現要取回 aws cloudsearch 中的搜尋使用時間, 其傳回的 json 參數中, 使用了減號, 該鍵值為 time-ms , 其實很直覺地要使用, 但又覺得怪怪的, 一執行馬上就有問題.

因為原來的 jsonObj.time-ms 會被視為 jsonObj.time – ms , 所以必須調整寫法, 正確寫法如下:

jsonObj["time-ms"]

這樣就可以了, 當然, 該回應的 json 中, 該鍵值(key)也必須是使用引號包起來的, 否則該 json 物件也會有問題.

測試程式碼如下:

var a = { 
  "mykey": "value1", 
  "my-key": "value2",
}
alert(a["my-key"]);

會回應 value2 這樣就對了.

參考資料:
http://stackoverflow.com/questions/13869627/unable-to-access-json-property-with-dash

分類
Javascript

身份證字號產生器/檢查器

身份證字號檢查可以參考這裡:
http://zh.wikipedia.org/wiki/%E4%B8%AD%E8%8F%AF%E6%B0%91%E5%9C%8B%E5%9C%8B%E6%B0%91%E8%BA%AB%E5%88%86%E8%AD%89#.E9.A9.97.E8.AD.89.E8.A6.8F.E5.89.87

主要是依照第一碼英文的代碼, 加上後面的個別數字運算而來, 其中第一碼是申報登記戶籍的地點, 共有26個英文字, 第二碼則是性別, 之後則是流水號.

驗證方式如上面連結的說明, 利用該說明, 進行程式實作後, 可以參考這個範例:
http://sample.diary.tw/pid/

上面網址使用純 javascript 撰寫, 並也製作了產生器, 配合 html download blob 語法, 可以下載內容, 十分方便, 可以參考看看.

html download blob 語法可以參考:
http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/

較複雜的下載方式, 可以參考這個 FileSaver.js 工具:
https://github.com/eligrey/FileSaver.js

分類
Javascript

在nodejs中發起json post的字元長度問題

在 nodejs 專案中, 若是需要對外發起使用 application/json 的 http post , 若有中文字, 需要注意計算字串長度的問題. 一般發起的程式碼請參考:

http://tech.pro/tutorial/1091/posting-json-data-with-nodejs

不過該範例是使用英文字, 所以沒有問題, 若是要發起中文字的 json http post, 需要調整計算 Content-Length 的方式, 使用 new Buffer(str).length, 如下:

var obj_json = { name: "王大頭", age: 25 };
var json_string = JSON.stringify(obj_json);

var req = http.request({
        host: 'host.example.com',
        port: 80,
        path: '/upload',
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Content-Length': new Buffer(json_string).length
        }
    }, function(res) {
    res.setEncoding('utf-8');
    var responseString = '';
    res.on('data', function(data) {
        responseString += data;
    });
    res.on('end', function() {        
        console.log(responseString);
    });
});

req.on('error', function(e) {
  // http post error
});    

req.write(json_string);
req.end();

參考資料: http://cnodejs.org/topic/50616f5301d0b801482695cf

分類
Javascript

lable標籤包住的問題

在現在使用手機瀏覽網頁愈來愈普遍的時候, 著重對手機網頁的效果也愈來愈重要.

最近測試到一個問題, 被 label 包起來的多個 input box 時, 會發生即時點到後第二或第三個 input box 也會 focus 到第一個 input box 的問題. 如下面的 html

<label>
  <input type=text size="3">-
  <input type=text size="3">-
  <input type=text size="3">
</label>

其實這個問題的原因很單純, 因為 label 是用來強化使用者輸入便利性的標籤, 拿來包多個 input 會發生只會指向第一個 input 是因為原始的設計導致, 目前測試在桌機的 firefox 、android 原生瀏覽器、android chrome瀏覽器、iphone/ipad safari瀏覽器, 都會有這樣的現象, 但桌機的chrome, 桌機的IE11則不會, 原因可能和取得物件焦點的順序有關.

無論如何, 包多個 input 在一個 label 不是一個正確的作法, 要避免這個狀況, 就是不在把多個 input 放在一個 label 中即可.

測試網頁 http://sample.diary.tw/35/label.htm

html label標籤的用法, 可以參考這裡: http://www.w3schools.com/tags/tag_label.asp

分類
Javascript

強迫jQuery Mobile換頁不用ajax

同事因為一個使用 jQuery Mobile 的網頁, 因為 login 頁面後的重導頁內容, 無法正常顯示而苦惱, 正在 debug 時, 我和他說明, jQM 預設會使用 ajax 來將網頁內容替代, 包含了 form submit 也都會這樣, 而不需要整頁 refresh, 所以會有這種特殊的狀況.

然而他想做到的功能是 login –submit–> login (check) –redirect–> index 這樣的方式, 所以簡單地說, 就是要將 login page上的 form submit 後的頁面, 不要使用 ajax 即可, 查了一下網路資料, 在 form 表單上, 多加入 data-ajax=”false” 即可, 請同事加上後, 測試果然無誤.

所以若有這樣需求的應用, 可以加入 data-ajax=”false” 來取消這個預設的功能.

參考資料:
http://stackoverflow.com/questions/7739183/jquery-mobile-how-do-i-submit-forms-to-a-url-and-transit-to-another-page-insid
http://dev.chetankjain.net/2011/12/jquery-mobile-page-transitions-with.html
http://tim-fly.iteye.com/blog/1453766

官方資料:
http://jquerymobile.com/demos/1.0/docs/pages/page-links.html

分類
Javascript

讓jQuery UI支援Touch device

在 jQuery UI 中, 使用像是 drag drop, slider 等, 在 iPhone/iPad/Android 上這種 touch 的設備, 可能會有不順或不支援的狀況, 這裡有個工具可以讓這樣的狀況改善, 並正常使用:

jQuery UI Touch Punch – http://touchpunch.furf.com/

這個只需要在引入 jQuery, jQuery UI 後, 再引入這個 jQuery UI Touch Punch 即可.

可以比較之前的一個範例: (原文: http://diary.tw/archives/1292 )

無使用 jQuery UI Touch Punch – http://sample.diary.tw/33/1.htm
有使用 jQuery UI Touch Punch – http://sample.diary.tw/33/2.htm

無使用 jQuery UI Touch Punch – http://sample.diary.tw/33/1-1.htm
有使用 jQuery UI Touch Punch – http://sample.diary.tw/33/2-1.htm

使用桌上型瀏覽器沒有差別, 不過使用 touch device 就有很明顯的差異了!

另外其實 jQuery Mobile 也有完整的功能, 若是直接要做 mobile 的網頁, 應該就直接使用 jQuery Mobile 的 framework 就有完整支援 touch 了:

jQuery Mobile 的 slider: http://view.jquerymobile.com/1.3.0/docs/widgets/sliders/

分類
Javascript

反向排序內容(倒排)

今天在整理 http://sample.diary.tw/ 時, 發現 sample 愈來愈多了, 而且內容是由舊往新排, 想說把它反過來排, 新的放在上面, 舊的在下面.

由於內容不多, 把 <li> 手動一筆筆排一下應該不會花太多時間, 不過又想到應該是要用指令來才有效率才對, 於是想說用 sort 指令來操作, 發現 sort 功能強大, 要用來做倒排反而不是很快速方便.

乾脆又來動手寫個小程式好了(又是一個 sample): http://sample.diary.tw/31/1.htm 只利用了 javascript 的 array 功能, 馬上就寫好了一個反向排序功能(倒排功能), 用法很簡單, 就是把文字內容貼進去, 按下[反向排序]按鈕, 就會倒排完成.

程式如下:

//var arrData = document.getElementById("data").value.split("\n");
//arrData = arrData.reverse();
//document.getElementById("data").value = arrData.join("\n");
document.getElementById("data").value = document.getElementById("data").value.split("\n").reverse().join("\n");

前三行可以簡化為最後一行, 簡單說明, 就是把 textarea 內容取出, 用換行 split分割為陣列, 再用 reverse 倒排後, 再利用 join 用換行合併, 塞回去原本的 textarea 完成.

所以現在的 http://sample.diary.tw/ 是由新到舊排了!