專題介紹 - NI LabVIEW Web UI Builder (上)

首先先貼上資源網址:





這個網站需要安裝 Silverlight ,如果沒有安裝過的可以在這裡取得。
此外,若安裝好了 Silverlight 但是還是無法執行,請更換瀏覽器試試看。

回到原本的話題,NI LabVIEW Web UI Builder是一個可以利用 Silverlight + Web 環境達到可以編寫程式的目的。LabVIEW 的 Web UI Builder 可讓您透過圖形化介面來開發輕量級的、基於Web的客戶端應用程式的能力。這些應用程式作為圖形化人機界面(GUI),使用戶能夠遠端監控,並通過Web瀏覽器套件進行 LabVIEW 的測量和自動化系統。



進到網頁之後,請用力地按下畫面中的 Try It Now。接下來他就會跳入讀取的頁面,首次讀取的時間比較久。



當讀取完畢之後,視窗中會跳出一個登入的畫面,此時若沒有 NI Cloud Portal 帳號的朋友們,請按下方 Create an Account 進行帳號的建立。



下圖就是建立帳號的畫面,過程十分簡單,重點是免費!



當建立完帳號後重新進入 UI Builder 的登入畫面,輸入帳號密碼完畢之後就可以正式試用這套軟體了!咦?試用?沒錯,試用的部分後續會跟大家做說明。

當登入之後,畫面正中央就有個快速引導介面,提供建立新的 VIX ,開啟或匯入資料,同時右邊也有許多詳盡的資源說明,這邊就不多作介紹了。



當選取建立新的 VIX 檔案之後,它便會跳到編輯的畫面,簡單的畫面介紹如下圖,因版面限制,故圖案必須縮小,大家可以點進這張圖看原始的介紹畫面。



首先我們要做的是最簡單的「在 Chart 上顯示隨機數值」。
首先先看到左邊一排的工具箱,其中一個是 Graph ,點開之後就可以看到常用的圖表工具都有,這次我們需要的是 Chart ,請在 Chart 上點左鍵一下之後,就可以看到圖表的圖形會跟著滑鼠移動。



此時將圖形移動到右方的前置面板上,在點一下左鍵,物件就被配置到面板上了。

這個時候在看畫面上方的工具列,嗯,十分微軟風格(畢竟是靠 Silverlight )。這個工具列就可以協助設定物件屬性,相較於 LabVIEW 來說,個人是認為這樣還頗人性化的。



接下來按下面板切換,切換到 block diagram中,


同時從左方的工具箱的 Structures 中拖曳出 While loop 並放置到右方的編輯區內。此時可以從迴圈外圍的八個控制點去改變迴圈的大小。


接下來再次看到上方的工具列就變成了跟 While loop 相關的設定項目,十分方便!



此時再看一次面板切換區域,下方的待用元件就有前置面板放置的 Chart 端點,同樣的把這個元件拖曳到迴圈內。



放置上去之後就會跑出下方的快速指令表,由左到右分別是:改變端點讀寫屬性、複製端點(建立區域變數)、尋找端點對應的前置面板元件、尋找所有相同端點(所有的區域變數)、將端點變更為常數。


接著再從左方的工具箱中的 Numeric 中找到 Random Number ,並把它拖曳至迴圈內。



最後接線的方式是將滑鼠移動到物件上方,物件的端點就會顯示出來,在端點上點一下滑鼠左鍵,就會跳出連線的樣式,以及一個快速指令表,由上到下分別是:建立常數、建立控制器、建立顯示器。也就是 LabVIEW 中按下 Create 後所跳出的列表一樣。



最後將亂數以及 Chart 接上線,



再來就是設定 STOP 端點,一樣在端點上點滑鼠左鍵,並選擇建立控制器。



點選之後,滑鼠前端自動會出現控制器端點,將它放置到迴圈內部即可。
同樣的再從左方工具列的 Timing 中拉出 wait ,這次是建立常數給它。



建立完畢後,我們的 block diagram 就完成了。



再切回前置面板,這次待用元件變成 STOP 的控制項,



同樣的把元件拖曳到編輯區即可。拖曳的過程中,程式還會好心的提示對齊的條件,超級人性化。(為什麼 LabVIEW 沒有!)


接下來按下畫面最左上角的執行,就可以看到程式如預期的再跑了。