分類: 程式技術

分類
程式技術

找不到的FlashMediaPlayback.swf

今天在查一個小問題, 就是使用 flash player 播放 video 的一個網頁, 發現完全沒有畫面, 結果是因為這個連結沒有檔案 (status=404) http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf

雖然是現在盡量不要使用 flash player 來播放 video, 不過這是因為一個 live streaming 的應用, 所以會播放一個 rtmp 的 video streaming, 也就使用了前面的官方 Flash Media Playback 播放器.

查了一會, 有篇官方的回覆在這裡: https://forums.adobe.com/thread/2013396, 說是已經停止下載了, 需要用戶自行 hosting 這個檔案, source 在這裡: http://sourceforge.net/projects/smp.adobe/files/ strobe media playback.

大家可以自行下載, 並 hosting 在自家網站上, 不要再連結到 adobe 了, 不然沒辦法使用了.

話說回來, 應該是要趕快改 html5 才對, 解決這個還在使用 flash player playback 的問題.

分類
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 等級提升, 相對這些也就都不會是問題了.

快來玩看看吧.

分類
程式技術

寫程式需要天份與熱情嗎?

今天看到這篇: 寫程式不需要天份，也不需要熱情-http://blog.turn.tw/?p=2683

那麼, 寫程式倒底需要天份與熱情嗎? 坦白說, 所有的工作都需要天份與熱情, 也都不需要天份與熱情. 有天份, 就可以一開始做得好, 有熱情就可以持續下去, 沒有天份, 沒有熱情, 其實也只是一份工作, 有基本的工夫, 也可以做出一定的水準.

就像做手工, 做久了你就熟練了, 而且還可能熟能生巧, 有天份可以做得更好, 做得更快, 沒天份, 也能從努力去做而熟練. 至於有熱情, 就能持續保持高度的興趣, 能把持續這個工作, 而且不以為苦. 所以我們當然希望寫程式的人, 能有天份, 也能有熱情啊. (套在其他的工作上也是一樣的啊)

至於天份, 有時也是被訓練來的, 熟能生巧的巧也是這樣來的, 記得, 人是有學習能力的, 善用這個能力, 相信什麼事都能解決, 或都能找到方法解決, 這樣說會不會更容易一點.

而有天份的人, 會更快速, 更容易地達到這點, 若他更努力, 那成就也就更是非凡啦.

希望大家能共勉之.

分類
程式技術

fakeimg的https存取問題

今天在拉一個網頁畫面, 使用 fakeimg 進行測試, 想說網站都用 https 所以圖片也用 https 來進行連接, 結果還是發生安全性提醒.

原因不是 fakeimg 不支援 https, 而是用錯了. 像這樣: https://fakeimg.pl/100×100 少了最後的 /.

也就使用原來的連結被重導至 http://fakeimg.pl/100×100/ 這樣, 使得網頁上的圖片被改成使用 http 連接, 而出現的安全性警告.

所以記得使用 fakeimg 時, 若要使用 https, 則要把相關的網址打對, 也就是

https://fakeimg.pl/100×100/

才不會發生這個問題.

之前介紹 fakeimg 的文章在這裡: https://diary.tw/archives/1266, 可以參考看看.

分類
程式技術

Google Maps Style

Google Maps 大家很常用吧. 在做一些結合 Google Maps 的應用時, 有時會希望能把上面的圖示簡化, 或是一些圖示的顏色改變, 要如何進行呢?

可以使用 Google Maps API Styled Map Wizard: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

這個 Wizard 可以快速的開關與調整圖示的顯示與否與改變顏色, 設定好後, 再產生出 JSON 格式的描述檔, 就可以自訂 Sytle 的 Google Maps.

例如要所有的水都消失:

[ { “featureType”: “water”, “stylers”: [ { “visibility”: “off” } ] } ]

以此類推, 一方面預覽一方面快速產出對應的描述檔, 很快速地建立自訂的 Google Maps.

不過若是想要找一些現成的, 可以利用這個服務:
https://snazzymaps.com/

上面已經有現成的許多格式可供套出, 一樣是產生 JSON 格式的描述檔供應用.

需要更詳細的自訂Google Maps Style可以參考Google 的官方文件:
https://developers.google.com/maps/documentation/javascript/styling

分類
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) 語法的問題.

分類
Database

MySQL資料表不存在的資料就新增-存在就忽略(或異動)的語法

在新增資料於資料表時, 有個需求, 是不存在的資料就新增, 存在的資料就不動作(或是要處理一些異動), 這樣的需求如何操作呢?

可以使用 INSERT IGNORE INTO [table] ….. 的語法,

若是要異動則使用

INSERT INTO [table]….. ON DUPLICATE KEY UPDATE col=expr …..

可以參考以下語法:
http://cain19811028.blogspot.tw/2015/01/mysql-insert-ignore-replace-on.html
https://mariadb.com/kb/en/mariadb/insert-on-duplicate-key-update/

分類
程式技術

bootstrap的datetime picker

在 bootstrap 下使用的 datetime picker 有不少, 不過簡單一點的可以參考這個:

http://www.malot.fr/bootstrap-datetimepicker/

主要是代碼短小, 使用起來也十分容易, 操作也很順手, 是個方便好用的 datetime picker.

若有在查找 bootstrap 的 datetime picker 這個會是一個不錯的選擇. (同時支援 bootstrap 2 與 bootstrap 3)

github: https://github.com/smalot/bootstrap-datetimepicker

分類
Javascript

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

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

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

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

分類
程式技術

在bootstrap下的影片responsive設定

在 bootstrap 下, image 可以很容易地使用 img-responsive class 進行 image 的 responsive 設定, 但是 embed 或是 video 如何處理呢?

在 bootstrap 3.2 起, 增加了好用的 embed-responsive 功能, 簡單說明語法如下:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/ePbKGoIGAXY"></iframe>
</div>

在外部建立一個 div, 包含了 embed-responsive 與 embed-responsive-16by9 or embed-responsive-4by3 class, 然後在 video 或 iframe 包含 embed-responsive-item class, 就可以順利地讓 embed video 能有完整地 responsive 功能了.

參考範例:
http://codepen.io/ncerminara/pen/zbKAD/