發表文章

目前顯示的是 2013的文章

DIP - Search Area

圖片
在數位影像處理裡，當我們要選取某個範圍時，首先要定義怎麼樣的情況下這些點算是同一個範圍，接下來才能做範圍的搜尋。所以我們看到上圖的最左邊，這邊定義了九宮格內的那八個鄰居，如果跟中間我們正在參考的點數值一樣的話，那麼那一個鄰居就是跟中間的點屬於同一個範圍。 於是基於這個定義，看到上圖中間，我們將綠色的點分布分成了三個獨立的群，三個物件。 搜尋的動作是一種擴散的行為，當我們碰到一個點是我們要的，接著從這個點，基於定義，往他週遭的點搜尋，一點接一點擴散出去。所以我在搜尋的實作上，第一想到的是遞迴，因為遞迴是一種相同方式持續延伸的概念，但我利用此方式時遇到了一個問題 ，遞迴大概在延伸到28xx層的時候就會overflow，而28xx層是很容易達到的，只在一個 800 x 600 的影像裡隨便一個佔了4列 Pixel 的東西就達成了。所以遞迴的方式勢必是不能採用，那麼該怎麼延伸呢？ 遞迴是一個接連的概念，只要找到下一個就會往下一層鑽，最後在一層一層回來，然而想到"擴散"，比較像是水波漣漪般的散播出去，如下圖： 於是我就想到，如果要做到擴散的行為，我就是要把當下搜尋的結果記起來，接著再依序去看那些結果，因此Queue的概念由此產生。 把搜尋的結果放到Queue，接著從Queue拿點出來再搜尋，再將新找的點加進Queue裡排隊等著被搜尋(擴散)，直到Queue裡的點都被拿光為止，就表示這個區域已經擴散完了。 以下是此方法的範例程式，開始搜尋後會表現出搜尋過程！  :) 寬(X)： 高(Y)： ... 點擊下列方塊產生區域分布 ... Reset 開始搜尋 Current Target： Area Search Queue：
張貼留言
閱讀完整內容

jQuery - css - dynamic change style

圖片
最近工作上所開發的網頁系統，打算把切換介面風格的功能做上去，於是研究了一下如何動態改變CSS並且套用，發現還挺簡單的~ 只需要置換網頁所Link的CSS file即可 ，以下弄個實際範例，透過jQuery來操作： 首先我們建立一個簡單的網頁 <html> <head> <title>Sample</title> <link rel="stylesheet" type="text/css" href="style_1.css" class="pagestyle" id="style_1" /> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript"> </script> </head> <body> <div class="outborder" id="div_1"> <div class="inline">Sample text</div> </div> </body> </html> 這個網頁所使用的CSS file為 style_1.css ，其內容如下： /*  *  Style 1  */ body { text-align:center; } .outborder { padding:5px;  background:red ; } .inline { padding:5px;  color:black; font-size:40px; font-weight:bold;  background:yellow ; } 接下來我們建立第二種風格，檔案為 style_2.css
張貼留言
閱讀完整內容

jQuery - header & floating menu - dynamic detect & adjust

圖片
相信很多人都有手機相關APP的使用經驗，這些APP的介面，大多最上方會有一個Header，Header裡面可能放了一些主題名稱、功能按鈕等等。接著，我們按了某個按鈕之後，最常看到就是會跑出一個功能選單，這個功能選單是蓋在內容上方的，如圖： 我昨天花了點時間，使用HTML及CSS，把這東西實做出來了，基本上的技巧就是延續之前介紹footer的做法，透過css設定 position:fixed; 以固定Header及Menu的位置，然後內容Content上方保留一些空間， padding Header的高度。 本來以為這樣就很棒了，Perfect！但今天測試的時候發現一個問題！由於我的Title是依照顯示內容會動態改變，當這個Title文字過長而換行的時候，糟糕了，那個位置固定的話就會錯亂，如下： 看到了嗎？Menu選單顯示時應該下移一點配合Header的高度，而且Content第一行也被Header蓋住了！所以怎麼解決這問題呢？我今天想來想去，目前想到的做法是，當Header高度有改變的時候，我就跟著調整Menu跟Content的位置設定。而這個方法要完成，需要解決兩件事情，第一件事情是我要知道Header的實際高度，而第二件事情是，高度改變的時候要觸發處理事件。 先從第一件事情來，在jQuery裡有個方法叫 outerHeight() ，它會回傳我們所選取物件目前的實際高度。我們取得實際高度之後，接著去設定Menu及Content，如下： function HeaderResize() { // Header高度變動時,動態調整Page及Menu顯示的位置 var headerHeight = $('#header_title') .outerHeight (); $('#PopupMenu').css('top', headerHeight); $('#content').css('padding', headerHeight + ' 0 0 0'); } 接著第二件事情就是，我們要在高度改變的時候觸發這個處理function。高度改變有兩種狀況，第一種狀況是我們在瀏覽的時候改變了視窗大小而導致Title
張貼留言
閱讀完整內容

javascript - class like

當物件導向的程式寫久了之後，會發現class的包裝方式真的是一種很棒的東西，把一些相關的東西包在一起，包括變數，包括程式(function、方法)，內部共享資源，對外則提供安全(簡單)的存取通道。 而我最近在寫 javascript，js沒有class這種東西，起初有點灰心，但後來網路上爬了一陣子發現，由於js架構的關係，可以弄出class like的程式架構，於是我就把它學起來了！以下弄一個範例分享給各位。 這一個範例，概念上是弄一個叫myRing的物件，它是一個RING資料容器，大小是10，存滿10筆資料之後，又重頭開始存。存資料進去的function為addData。而依照新舊順序將容器裡所有資料取出的function為getData，另外dataLength為此容器目前的資料筆數。總共三個對外的資源，而內部控制及存取資料的變數有三個，curIndex, upLimit, myData，為private，外部不能直接存取。 完整的程式碼如下：(js_class_like.html) <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>javascript class like</title> <style type="text/css"> #log { font-size:24px; color:blue; font-family:Tahoma; } </style> <script type="text/javascript"> var RoutineInt; var ring = new myRing(); RoutineInt = self.setInterval('MyAction()', 1000); function MyAction() { ring.addData(Math.floor(Math.random() * 100)); document.ge
張貼留言
閱讀完整內容

HTML - WebSocket Sample - with PHP Server

圖片
兩個月前因為工作的關係，開始在網路上找如何實做 WebSocket。 這是關於 WebSocket 的介紹： ◎  http://www.websocket.org/ ◎  http://zh.wikipedia.org/wiki/WebSocket 如果懶得看，讓我們從這張比較圖來了解最快！ 簡單說以前網頁大多數的狀況是，使用者端要求新的資料，提供資料的伺服才吐新的資料給你，這樣如果要做到即時更新，變得使用者端要不斷地詢問 Server 有沒有新的資料，而這樣一去一回，浪費時間也浪費資源，也沒想像中的即時。因此 HTML5 多了這條路 WebSocket，WebSocket 概念是一開始使用者端跟 Server "握個手"之後，在沒說要斷線的情況下，任何一方就可以在任何時間主動扔資料給對方，如此是也，不用一去一回，也省去了一些重新建立連線的動作，又快又方便。 以上簡介，那接下來我在網路上搜尋的過程中，發現 Client 端建立 WebSocket 的範例很多，但是 Server 端處理 WebSocket 的範例卻很少，即使找到了，還不能直接 Run ，所以小的才 po 這篇文章，提供一個可以直接運作的版本 (程式有不少部分是網路上找來的，加以改善)。 以 Server 傳時間給 Client 端顯示為範例。 首先是 Client 端，一般來說 Client 端為網頁，透過 javascript 建立連線，建立連線之後可以定義  onopen (連線成功)、onmessage (收到訊息)、onclose (結束連線)、onerror (錯誤時) 四個事件各要對應什麼 function 處理。如下 ： File ： client.html +  jquery-1.10.1.min.js <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>WebSocket</title> <script type="text/javascript&qu
5 則留言
閱讀完整內容

HTML - CSS - footer floating toolbar bottom 瓢浮置底的工具列

圖片
哈哈 前幾天花了不少時間用 HTML footer bottom 等相關字眼在那邊找怎麼做置底的工具列... 怎樣看都不是我要的那種, 結果今天用 html floating toolbar bottom 終於找到了! 而且還很簡單! 只要把你要置底的東西 ex. #footer { width:100%; height: 100px ; position:fixed; bottom:0px; z-index:1; } 就成功啦 另外要注意的是, 因為這東西是會蓋過下面的內容, 所以你得讓下面內容的底部也空出該footer高度的空間出來, 以免看不到蓋住的內容... ex. #page { padding:0 0 100 0; } PS: #page為我頁面內容的容器(div)
張貼留言
閱讀完整內容

HTML5 - SVG

圖片
嘿~ 這陣子都在做網頁程式, 裡面有個東西我覺得超讚的想分享一下, 我用HTML5的SVG透過javascript動態畫出資料C hart圖, 剛剛我利用時間把這東西改成一個分享版本! 對這有興趣的人可以抓去看看!    這壓縮檔裡面有兩個檔, 一個是HTML檔, 一個是jquery檔, 要放在一起, 然後直接用瀏覽器開那個HTML就可以看結果. ^_^  檔案連結： https://docs.google.com/file/d/0B0kC-urN3g_jZHA5RFFhXzQ0elU/edit?usp=sharing 參考教學： http://www.w3schools.com/svg/
張貼留言
閱讀完整內容

閒聊 - 反思我程式寫法的演化

今天有個同學請教我, 我的作業裡面這一行Code的意義是什麼? bool[] boolArray = new bool[bitArrayCollection.Sum(b => b.Length)]; 如果是四年前的我, 可能也看不懂這一行. 而我, 其實也不是為了說要寫得很炫, 讓人家看不懂才這樣寫. 用意只是為了少打幾行Code, 而且讓文字字面單純而了解意思, 才這樣寫 可以看到裡面有幾個關鍵字 "Collection"、"Sum"、"Length" 它作用是bitArrayCollection這個集合裡所有物件的Length屬性... 加總起來(Sum) 這是LINQ用法 ok 從出社會工作一直到現在, 再加上大學四年的學習,  寫程式的時間已經超過10年了, 而這10年裡面, 其實我一直有在做一種思考, 就是"我這幾行Code怎麼寫比較好?" 也包括我在看別人的Code時感覺到什麼? 幾天前在PTT資訊工作板 有個人回文說他20年前在電子街遇到一個國中生, 超厲害 他寫的Code連旁邊的碩士都看不懂, 於是他就下定決心不加入資訊行業的戰局 接著 下面數個留言說... 是那個國中生不懂程式 哈哈, 對這應答真的感觸良多 現在用一個實例來描述這十年來在我身上發生的演變... 這邊有三個東西 b1, b2, b3. 他們的長度分別是10, 20, 30 BitArray b1 = new BitArray(10); BitArray b2 = new BitArray(20); BitArray b3 = new BitArray(30);  然後為了解說方便, 先用某個容器裝有它們 List<BitArray> bitArrayCollection = new List<BitArray>(); bitArrayCollection.Add(b1); bitArrayCollection.Add(b2); bitArrayCollection.Add(b3); 現在我們要加總他們的長度, 就好像算學期總分
張貼留言
閱讀完整內容