機器視覺小教室 Aurora Vision Studio 入門篇【04】繪圖工具介紹、簡易HMI小程式

我們在上一集裡面 就是有教大家取這個 PTVG 的影像 還有二值化 然後 BLOB 型態學 以及怎麼去計算這個 BLOB 這個中心的座標 並且也學會這個怎麼把這個 座標顯示出來 以及大家已經清楚 比如說這個 Array 的資料 Array 的這個資料有雙箭頭 他可以自動幫你跑一個後迴圈 把所有的 BLOB 統統計算 不管你是幾個 四個也好五個也好 六個也好 那他都可以成功的 依序把它計算出來這個功能 好那我們這一集呢就是要 教大家怎麼去 繪圖 做一個簡單的繪圖 以及寫一個 簡單的 UI 操作介面 HMI 好那我們先來講繪圖 好大家可以看到說 我們這個影像上有圖層 好這個圖層 圖層是 Debug 用的 他並不是真的在這個影像 我們影像其實 還是這一張圖 那他身上標的這個這些 Logo 就是123456 然後這個十字他其實都 其實只是 覆蓋在上面 這是覆蓋在上面他並不是畫在影像上 好那我們怎麼把它畫上去 好怎麼把它畫上去 那要畫上去就要用到繪圖的工具 那我們就要到這個 Drawbox 裡面 去找繪圖的工具 通常你玩到一個 玩到一個程度 我其實很建議去練習玩這個搜尋引擎 好那搜尋引擎就是 我們通常會切到這個第二頁 當然你在第一頁搜也是可以的 結果是一樣的 好那我們繪圖就叫 Draw Draw 那你只要按Draw Enter 他只要 看到這個Draw 就把所有關鍵字裡面跟Draw有關的 指令全部都會秀出來 那你按Enter 他自己會幫你切到這個第二頁 所以你即使在第一頁按也沒有差別 一按他就會自動跳過來 好那我們要Draw什麼 我們要Draw什麼 第一個我想要Draw這個 十字 好這個十字的形碟 十字的形碟叫做Point2D 他的形碟叫Point2D 所以我們找到哪個東西比較像 Draw Point 所以把它拉到裡面來 好拉過來以後他會問 這些跟Draw有關的 只要是跟Draw有關的 他都會問你要Draw哪一種 是Single Color 還是 Two Color 還是Multi Color Single Color就是你所有Draw的這些資料 你都要指定的顏色 固定的顏色 那Two Color Two Color的話就是他 這邊會叫你選 你的資料如果是OK 就是OK的顏色 NG 就是True跟False NG的話又是另外一個顏色 通常在做瑕疵檢測的時候很常用這個 Two Color的繪圖 Multi Color 你就要給他一個調色盤 調色盤 那指定到什麼ID就會是那個ID的顏色 那前兩個比較常用 那我們先用最簡單 他這些工具視窗 這彈出來的最左上角那個 簡單又常用的 大家最常用最簡單都會放在第一個 所以Single Color Insert的丟進來 丟進來了以後 Image要選什麼 Image就是要選要畫的那張圖 所以你把這個圖拉過來連上去 好那畫完的圖就是在這個Opter裡面 好我們等一下就可以秀這個畫完的圖 好那你要畫的內容 內容就是這個 Point的2D 那他要打問號 打問號 所有的行列後面帶個問號 他就意思說這個問號 有帶問號的行列這代表不知道的意思 他可以有資料也可以沒有資料 好但是這邊又給你問 給你這個這個代表說你一定要連一個東西 好這個點下去以後左下角可以看到 Point 一定要有內容 你沒有內容這個這個Block是不能執行的 好所以我們要給他一個內容 內容當然就是我們要畫這個 Mask Center這個輸出 給過來 所以他就會把所有的Mask Center 把他畫上去 好那畫上去呢 你要怎麼畫你要做決定 所以尤其是顏色一定要選 他的預設值的顏色是000是黑色的 好所以我就點點上去以後 他可以讓你選顏色 好比如說我畫紅色 就按下紅色 你要綠色就畫綠色 好比如說紅色 那這個的話Pick有D管 你可以去D螢幕中任意的顏色 看你高興畫面有什麼 給D螢幕任何的地方 好那我就選紅色按OK 那他就會自動幫你把這個紅色的這個值 他叫XYZ就是RGB的意思 R是255然後G是0 D是0 好選好了以後呢 下面還有一些繪圖的參數 繪圖的參數 那這個繪圖參數的效果等一下再看 好我們先畫畫看 好那怎麼看他畫的結果 我可以把這個圖把它分割一下 按右鍵Split 好畫完的圖把它秀在這 好Play 那你可以看到 這個畫完就這麼一個小小的點點 很小一個 好既然這麼小那我們就要改他的尺寸 所以能不能畫大一點 好我們就可以在這個地方 修改這個Point的Size 他現在只有1而已 我們打32 哎他結果他畫的是一個圓圈圈 好圓圈圈 好那如果圓圈你剛好要畫出這個圓形 那你就可以去量 尺寸 我們來看一下這32是什麼意思 好我們這樣量過來這個是16 所以32是直徑的意思 好那我可以看下這個 銅板的直徑大概是多少200 所以我們Key 200就會剛好 框住這個圈圈 那他不會沿著這個邊去框 因為主要是因為我們算出來 只是算他的中心的 這個中心 我們是用這個Block的功能 旁邊有影子 所以這個中心不會剛好是這個圓圈圈 這個錢幣的真實的中心 那以後如果要計算錢幣真實的中心 我們會有別的演算法 目前點到為止 好那他除了畫圓圈圈可以畫什麼形狀 我們按這個Point的Shape 好他目前是Auto Auto好那Auto 代表他用預設的值 你不設定就是預設的值 好那你可以勾起來 勾起來他現在是選到Circle 所以他現在畫的是Circle 好可以選Cross畫十字 Square畫方形 好假如我勾Cross就是一個十字 好十字的大小 好那你覺得這個十字線很細 所以我可以改一下Signal 5個Pixel 他就會畫比較粗 那十字我不想畫那麼大 所以我就用50 好這樣子的話就是一個繪圖的動作 那他跟塗層是不一樣 跟塗層是不一樣 這個圖 這裡是沒有這張圖是沒有塗層 就是影像他就直接畫在影像上面 好你把這個影像把它存下來 存下來以後其實就已經被畫上這個紅色 只是沒辦法再塗掉的 那塗層跟影像 他是分離的可以個別的顯示 好那接下來就是說 我們怎麼樣去做一個HMI 把我目前做的成果 把它變成一個小程式 我們就要選上面 這個HMI這個按鈕 好點下去 點下去他就會彈出一個 HMI的Designer 好點下去有彈 除了彈出Designer以外 左邊這裡 馬上會顯示這個Designer控制項的菜單 好那你要取消的話 你就再點一次他就不見了 啊不見不見的 雖然不見但是不見得你是刪掉的 其他其實你只要有設計任何的 控制項在上面 他只是藏起來不讓你看的 目前他上面是沒有控制項的 所以他其實 這個程式是沒有設計出UI的 等一下我們放了控制項上去以後 這個小程式就會有UI 藏起來這邊的這個Designer的 控制項的菜單不見了 然後再打開他又會跑出來 好那我們要開始設計這個控制項 所以我們先把其他比例使用把它拉 收收掉 好那這個是 視窗的這個 背景底板 那背景底板你可以調大小 可以調大小 那你也可以在左下角這邊 手動設定他的尺寸 比如說1024 768好這個是他的大小 好那這個大小可以在這個視窗這邊調 如果你想要固定的尺寸 Windows mode 他預設只是Windows sizeable 所以使用者是可以調這個視窗 好那你就把它設成Windows fixed size 那你的這個大小尺寸 就是永遠都是1024 768 使用者是不能變更的 好那接下來我們可以調這個Windows title Windows title他預設只是AuraVision 然後Dash 然後他這邊有一個那個 自己會帶參數 你的專案是什麼名字 他這Dash後面就會是什麼 好那我們可以手動把它改掉 比如說我把它改成中文叫做小程式 然後這個叫什麼書籤 小程式書籤 那等一下執行的時候 他的標題就會變小程式書籤 好那接下來呢 我們要拉這個螢幕拉一個螢幕 那螢幕的視窗 如果你只是要秀圖的話 我就在這個video box這個下面 那video box有很多種 那我推薦的是用這個最後一種 叫做zooming video box 這個的話可以用滑鼠拖拉他的大小 好那我們剛拉上去的時候 是一個空白的框框 你可以調這個要顯示的尺寸 好那我把它拉過來 那大概切起這個視窗的邊邊 但是不要貼的太近 好上面留一個小小的空隙就好了 等一下我還要放別的東西 好那在這個拉完了以後 左邊你可以改他的 name 那你如果做小程式的話 就不用改了 那系統會幫你取一個名字 好那我們如果程式開發比較複雜的時候 上面一大堆東西 最好這個 name 把它取一個好記的規則 不然以後多的會找不到 好那接下來我可以改這個視窗 秀圖視窗的背景顏色 按這個 back color back color 按點點點他就會彈出可以選顏色 然後我們選到這個 redefine color 選黑色 ok 那他在沒有的時候背景就會是黑色 好那怎麼把這個圖秀上去 你點到這個控制下我會有這個 in in image 然後會有這個 in image 那有這 in image 就是你的程式 的那一張圖要誰哪一張圖要秀給他 我們要秀這個畫好的 所以我把這個畫好把它放在這裡 好連上去 他這邊箭頭不會牽絲牽過來 因為這兩個是不一樣的視窗 他沒辦法把這個箭頭牽絲直接牽到他身上 所以他會用這個方式在顯示就是 這個 out image 他指向一個 hmi 也就他有被 hmi 用到的意思 好那你到 hmi 這個視窗點了以後發現這個 插頭這個插頭跑出來 表示這個 hmi 這個 input 有被程式碼 丟東西過來 好那你怎麼判斷他丟是誰丟東西過來 你可以滑鼠點在上面 他會寫 connect with 最後面一行 man 就是你的主程式的 process 括弧六括弧六第六個程式 第六個工具 第六工具是左邊那個6一點 draw point 的 single color 的 out image 被他丟過來 他會用顯示文字的方式 好那你如果覺得這文字 不好閱讀 懶得看那麼多你就按右鍵 navigate 瀏覽 當按下去以後他就自動把它選起來 馬上就可以知道是他丟過來 好那這個這個是反過來的 那你如果要順向查 你丟給誰 按下去 好你都不點你按下去以後這個 他馬上就反白 所以你就知道他是傳給他 然後就點下去按右鍵 你也可以看到說 他是傳給這個人民 video box one in image 好所以我剛才講說如果你的 控制像一大堆的話 你幫他取一個好記的 不然怎麼人民 video box 萬度是一共一大堆 你怎麼知道那個一二三十 到底是哪一個 如果你上面有二十幾個 那你看到這個編號 你也忘了那個是什麼東西 所以最好取一個好記的 程式如果寫比較複雜的時候 取好記的名字 一看就知道那個是幹什麼用 好這是一個 程式在編寫的時候一個要養成的 一個好習慣 好那這個做完以後這個程式 其實就可以有 ui 了 好那怎麼樣讓他秀出這個 ui 就算我把它隱藏起來 也是一樣會秀出來 因為我有放東西 好那 你就直接按這個 play 這個 ui 就會跑出來 好那有的人你看 play 那個 ui 不是這樣彈出來 不是那怎麼弄 那是怎麼有的會他會像在這 哎你怎麼沒有像我要會彈出來 那其實就是在這個地方 因為我這個我改過設定 我 program 點在 display hdmi in stand alone window 我把它預設值沒有勾 好所以我們如果我現在勾 不勾的話 好不勾我現在按 play 他就會直接顯示在這個 design 上面 他就沒有彈出來 那我個人我習慣在開發的時候 就先讓他彈出來 然後所以勾起來 play 他就會彈出來 好那彈出來以後 你就會發現 啊你這個銅板被切掉了為什麼 不是秀整個畫面 就雖然滑鼠可以縮放 好那按右鍵 你可以按這個 zoom to bit 他就自己貼齊這個視窗的邊 那因為你這個 顯示這個秀圖的視窗 他的長寬比的影像有點不一樣 所以旁邊會幫你自動留黑邊 那這個邊是什麼顏色 就是當時我們在設背景的那個顏色 好那有沒有辦法讓他一彈出來 自動就貼 自動就貼邊 當然可以我點一下這個 視窗這個控制下 然後回到左邊的 initial size mode 他預設叫 original size 就是你的影像 pixel 是多大他就一比一顯示 那我可以選擇 fit to window 那這樣子的話他一彈出來 他就會自動是 fit 住這個影像的邊邊 自動fit 影像的邊邊 好那這個第一隻小則是 我們就可以按存檔 file 然後選擇 export to runtime executable 按下去 按下去了以後他會問 一些 回答的全部把他勾起來 初學者一開始不要懷疑太多 就是原廠給你的預設值就是 ok 的 啊所以你就按 export 點下去 那他就問你說 你這個程式要放在哪裡 那預設的話會跟你的專案放在一起 會跟你專案放在一起 你可以放在這個 abc 當然你也可以放在別的地方 比如說我就放在桌面 放在桌面 那隨便取個名字 小程式算錢 好存檔 存檔了以後 我這個專案其實可以關掉 關掉關掉以後小程式算錢在這邊 所以我就直接點兩下 那點兩下可以執行的 也是因為我電腦灌這個 runtime 好所以這個是可以直接執行 而且這個他是看不到 source code 我用文字編輯器打開只會一堆亂碼 所以他是已經編成這個 finalize finalize 的這個資料 你是看不到內容 好我直接點兩下打開 好他這個 ui 就會長這樣 好長這樣 可是我發現有一個很奇怪的東西 上面怎麼會有這個勒 為什麼會有這個工具列 這個工具其實是他的 runtime 執行器的這個工具列 好這 runtime 執行器在哪 這就是這個 我只要我的電腦灌這個 runtime 其實 runtime 執行器本身是可以點開 其實就是這個東西 所以我的程式其實是在這個裡面在跑 他在這個環境裡面跑 這個是一個 這是一個就是一個簡易的環境 那他可以去跑這個 binary 的腳本 那我可不可以隱藏這個東西 可以所以我們要改一下程式 然後再把這個 abc 打開 好 abc 打開以後又回到這個 點一下這個視窗的背景 好那 左邊這個視窗背景的這個控制項 他有很多選項 console enable 把他 force 掉 然後 program control visible 把他 force 掉 好 toolbar visible 把他 force 掉 然後他 你看到他預設直接處理 我們通通把他 force 掉 然後 force 掉了以後 存檔要重新輸出 然後把這個小程式算錢 這個直接把它蓋掉 蓋掉了以後 我再直接執行 這個上面就很乾淨的 就不會有那個 gruntime 執行器的上面那些控制列 這個控制列看起來就很像 醜醜的除非你真的很想用他 放上去的那些功能 不過我們一般 如果在寫一個操作視窗的時候 我們不太看到那些東西 好那接下來我可不可以在這邊顯示 這個錢的個數 我要怎麼顯示錢的個數 好錢的個數 我們就回到這個 hmi 的控制 錢的個數我們就要放一個 label label 在哪 就是這裡 ctrl 拉下來 這邊有個 label 好 label 把它拉上去 拉上去放在這 好那放在這邊了以後 這個 你要去改他的字型大小 所以這個字型大小在這個 font 這邊點一下 讓字大一點 比如說我要 20 然後調掉這個尺寸 那我要出題字 出題字 好那接下來這個他預設會有 已經有寫字了 所以你可以去 改掉這個字 就叫這個 text 叫 label 1 你可以寫 0 好所以這邊就顯示好像還是太小 再改大一點 28好那接下來怎麼讓他變化 他這邊 input 的 text 你就把這個 count 把它直接丟上去 好那這樣子這個個數就會跑出來 好像有五個 好六個 好這個是 label 的用法 好那那這個 我們還要再玩一個功能 比如說 我們不是有寫一個二字化 二字化那我們這邊有一個參數 這個參數目前是190 目前是190 那我們可不可以用一個拉霸 去控制這個參數 好拉霸在這邊 這邊有一個叫做 tracker bar 工具 把它拉過來 拉長一點 好那這個 tracker bar 我們要改這個設定因為我這個 是 0 到 25 所以我的 tracker bar minimum 是 0 然後 maximum 是 25 那我不可以在這個範圍裡面亂調 因為範圍要對 你調超過程式可以允許的範圍 有程式會出錯 好那目前的值目前的值 就是 value value 你目前值是 0 好那因為我知道現在 190 是比較實的 我可以先預設是 190 好那這樣子的話我就可以把這個 value 連到這個 maximum value 這裡 因為我現在 maximum value 是 ok 的 那我想要用這個去影響這個 maximum value 所以我就把這個 out value 連到這個 maximum value 好再執行 那這個時候變更這個 他就影響這個二字化的效果 影響這個二字化的效果 那我當我調到 190 附近的時候 這個值他算出來這個 範圍會比較正確 還可以看一下這個預覽視窗 看下這個 blah blah 所以隨著這個值去做變動 好那再來就是 我可不可以把目前這個值秀出來 可以把目前調到值秀出來 一個最簡單的方式就是這裡 我再拉一個 label 放在旁邊 好 label 剛才用過 所以我們操作快一點 直接改大型 把出題字調一下 好那這個 text 要給什麼 你說哎這個值是在這邊嗎 他拉出來這個值在這裡 我可不可以拉到他身上 不可以這個 output 只能拉到程式 只能拉到程式 那程式的值可以拉到影子 所以他視窗的內容 是不可以直接跟視窗溝通的 好那當然你會想哎很聰明 我先把這個 output 拉到程式 然後程式裡 copy 一個值 再把它丟到這裡來 好怎麼做 就自己想想看 程式我可以 copy 這個值 然後再把它丟到他身上 會讓程式幫你轉一個值 ok 可以這樣玩 好那有一個更簡單的做法 label 這是 label 專屬的做法 然後點一下這 label 好拉下來 這邊左下角有個叫 auto value source 把它拉過來 他本來是 none 沒有東西 然後拉過來 他會出現一個 tracker bar 然後他可以顯示一些他有資源 自動連接這個數據 所以他你選到 tracker bar 以後 我就不用再透過程式幫我轉接 所以他就直接是 100 值 然後執行 他直接跟著這個 tracker bar 在跑 好那接下來 我想要知道這個目前二值化的效果 二值化的效果 我能不能把這個二值化效果 也把它 因為我不知道我這個 拉來拉去那二值化對不對啊 我可以把這個二值化的 region 二值化的 region 在這邊 可不可以把它畫在畫面上 但是我這個圖層只能有一張圖而已 那當然你會想到很聰明 我可以把這個 region 做出來 我可不可以找到 region 把它做出來 說 region 有找到嗎 我可以這樣拉過來 好做了 region 你就再做 做兩次 也這個也是個方法 好那我現在介紹的就是 我可以用其他的方式來完成這個功能 因為這個畢竟是客製化的工具 各種主要你是在學功能 功能愛怎麼用就怎麼用 我主要是介紹這個功能 好那 我們就要介紹一個叫做有圖層的 秀圖工具 好那這個我就先刪掉 我不要什麼叫帶圖層的 帶圖層的秀圖工具 我們剛才秀圖不是在 video box 這邊 那帶圖層的秀圖工具呢這個 indicator indicator 的這個叫做指示器 我也不曉得為什麼要取這個名字 好那 view 2D box 就是我們要的 好把它拉進來 那它的操作方式其實 跟 image box 非常的像 一樣就是你可以去調這個視窗的大小 然後也一樣你可以去更換背景的顏色 然後也一樣你可以去更換它預設 是 original size 還是 big window 好也一樣它這邊有 image 你可以把這個 畫完十字的這個 image 拖到它的身上 好然後不一樣的地方就是 它這裡有幾個圖層 可以讓你放快速的放 程式裡面的跟影像有關的資料 好所以比如說要秀這個 region 直接把 region 拉到圖層 然後 play 按下去 這樣子就好了 但是不過這個這個 有一個缺點就是 因為它圖層是改的少 所以你剛才畫這個十字 因為你十字的話是在 底下這個影 所以這個十字就就看不到 所以你白畫了 所以你用這個工具的話要注意這個點 那我們就不要畫用這個十字 我們就不畫了 我們就直接把原圖放上去 然後 region 畫上去 然後 mask center 再畫到下一個圖層 好執行 好它的越底下的圖層 數字越大圖層越蓋在上面 然後數字越小的被壓在下面 好那我們就可以分別去調這個 圖層的屬性 好這個是個別圖層它的顏色 個別圖層的第一個圖層是淺藍色 然後第二個圖層是橘色都是預設 好那剛才顯示出來這個十字好像小小 所以我們就可以改這個十字的大小 不過因為我們都就是用這個 這個屬性是共用的 所以你一改全部圖層 如果你要改大的話 每一個東西都會變得很粗 好所以你畫十字十字會變粗 你如果圖層裡面有用 其他的什麼圓框框啊 他也都會一起變粗 所以這個是用這個 這個讓你程式裡面不用繪圖 直接拉上去就可以用 好那我們最後呢就是 修改把這個程式 蓋掉 然後重新執行這個小程式 那這個就是我們這個 小程式的效果 好那也可以看到說 我們為什麼數出來是六個 這邊不是要有兩個 因為剛纔不是有提到 我們有做一個上次的課程 有面積有篩選 就是因為這兩塊 沒有達到這個一萬臺 所以他不會算 好我再調大一點 他變大了以後這邊他以為這個也是 好那這個簡單的這個 Flop的小程式再加上 入門怎麼去設計這個ui 操作界面 那他功能其實還是非常的多的 後面如果有機會的話 再一個一個去體會