第13章界面設(shè)計(jì)與美化.ppt

精通LabVIEW虛擬儀器程序設(shè)計(jì)與案例實(shí)現(xiàn) 第13章界面設(shè)計(jì)與美化 第13章界面設(shè)計(jì)與美化 本章內(nèi)容 界面設(shè)計(jì)的一般原則菜單設(shè)計(jì)子VI的調(diào)用與重載界面美化常用技巧 第13章界面設(shè)計(jì)與美化 界面設(shè)計(jì)的一般原則 第13章界面設(shè)計(jì)與美化 界面設(shè)計(jì)的一般原則 推薦對(duì)控件進(jìn)行歸類 功能類似的放在界面的同一區(qū)域 比如說(shuō) 將命令 控制按鈕放在一起 結(jié)果顯示放在一起 狀態(tài)顯示放在一起 布局合理 主次要分明 重要的 常用的控件要放在界面上顯眼的位置 不常用的控件可以使用模塊化 在平常時(shí)隱藏 需要用到時(shí)再調(diào)用 按閱讀習(xí)慣布局控件 人們的閱讀習(xí)慣一般是從左住右 從上到下 第13章界面設(shè)計(jì)與美化 常用的界面布局 第13章界面設(shè)計(jì)與美化 常用界面風(fēng)格 儀器型界面 第13章界面設(shè)計(jì)與美化 常用界面風(fēng)格 測(cè)試平臺(tái)界面 第13章界面設(shè)計(jì)與美化 常用界面風(fēng)格 Windows平臺(tái)界面 第13章界面設(shè)計(jì)與美化 菜單設(shè)計(jì) 菜單編輯器 打開(kāi)菜單編輯器的方法為 在菜單欄里選擇 編輯 運(yùn)行時(shí)菜單 第13章界面設(shè)計(jì)與美化 菜單設(shè)計(jì) 菜單操作函數(shù) 函數(shù) 編程 對(duì)話框與用戶界面 菜單 思路一般為 先獲取當(dāng)前菜單 然后再對(duì)它進(jìn)行編輯 第13章界面設(shè)計(jì)與美化 實(shí)例 通過(guò)函數(shù)編程實(shí)現(xiàn)菜單欄生成 第13章界面設(shè)計(jì)與美化 屬性節(jié)點(diǎn) 在這個(gè)例子中 使用屬性節(jié)點(diǎn)控制 波形圖 的橫 縱坐標(biāo)顯示范圍 并用它來(lái)設(shè)置 停止 按鈕控件在程序運(yùn)行時(shí)進(jìn)行閃爍 這里要注意的是 用屬性節(jié)點(diǎn)控制 波形圖 等波形顯示控件的顯示范圍時(shí) 要將這些控件橫縱坐標(biāo)的 自動(dòng)調(diào)整 屬性取消 否則就會(huì)出現(xiàn)程序運(yùn)行時(shí)顯示控件因?yàn)樽鴺?biāo)顯示范圍的不停變化而不停地閃爍的現(xiàn)象 第13章界面設(shè)計(jì)與美化 調(diào)用節(jié)點(diǎn) 在本例中 通過(guò) 調(diào)用節(jié)點(diǎn) 調(diào)用 波形圖 的 導(dǎo)出圖像 方法 將波形一幅正弦波形圖像導(dǎo)出到指定位置 程序框圖與運(yùn)行結(jié)果如圖所示 關(guān)于調(diào)用節(jié)點(diǎn)的各個(gè)輸入端口具體表示的含義與輸入 輸出值 可以參考LabVIEW的幫助文檔 但注意的是 只有當(dāng)調(diào)用節(jié)點(diǎn)連接到了某個(gè)具體的控件時(shí) 幫助文檔里才會(huì)有相應(yīng)的內(nèi)容 第13章界面設(shè)計(jì)與美化 子VI調(diào)用與重載 編寫子VI程序代碼 與編寫正常的LabVIEW一樣 定義端口 修飾圖標(biāo) 可以是圖片或者文字 即子VI被調(diào)用時(shí)呈現(xiàn)給大家看的 相貌 保存 在其它程序中進(jìn)行調(diào)用 子VI的編寫大概可以分為以下幾個(gè)步驟 第13章界面設(shè)計(jì)與美化 實(shí)例 創(chuàng)建子VI 這個(gè)子VI的功能是實(shí)現(xiàn)對(duì)輸入信號(hào)的濾波 輸出濾波后的波形 濾波器參數(shù)可以設(shè)置 第13章界面設(shè)計(jì)與美化 實(shí)例 創(chuàng)建子VI 為子VI配置接線端口 第13章界面設(shè)計(jì)與美化 實(shí)例 創(chuàng)建子VI 修飾子VI圖標(biāo) 第13章界面設(shè)計(jì)與美化 子VI調(diào)用 子VI的調(diào)用方法為在后面板上點(diǎn)擊鼠標(biāo)右鍵 選擇 選擇VI 在彈出的對(duì)話框中選擇創(chuàng)建好的子VI 第13章界面設(shè)計(jì)與美化 多面板程序設(shè)計(jì) 一種是在彈出子面板時(shí) 主程處于等待狀態(tài) 直到子面板運(yùn)行完成 可以簡(jiǎn)單地通過(guò)子VI的調(diào)用來(lái)實(shí)現(xiàn) 另一種是彈出子面板后 子面板與主程序相互獨(dú)立運(yùn)行 需要通過(guò)VI引用的調(diào)用節(jié)點(diǎn)來(lái)實(shí)現(xiàn) 在設(shè)計(jì)這種程序時(shí) 一般分兩種情況 第13章界面設(shè)計(jì)與美化 實(shí)例 基于按鈕的多面板程序 第13章界面設(shè)計(jì)與美化 實(shí)例 基于菜單的多面板程序 第13章界面設(shè)計(jì)與美化 動(dòng)態(tài)載入界面 LabVIEW提供一個(gè) 子面板 控件 利用這個(gè)控件可以實(shí)現(xiàn)動(dòng)態(tài)載入界面和子界面重用 第13章界面設(shè)計(jì)與美化 利用 子面板 動(dòng)態(tài)載入界面 子面板控件的大小是一個(gè)比較棘手的問(wèn)題 這里提出一點(diǎn) 調(diào)用的VI在子面板中的顯示位置與VI編輯時(shí)相對(duì)于左上角的位置是一樣的 所以在編寫子VI時(shí) 最好把控件從左上角開(kāi)始排列 第13章界面設(shè)計(jì)與美化 利用 子面板 和VI模板實(shí)現(xiàn)子界面重用 將儀器界面編寫為一個(gè)單獨(dú)的VI 并把它保存為VI模板 保存時(shí)把擴(kuò)展名改為 vit即可 當(dāng)用 打開(kāi)VI引用 函數(shù)打開(kāi)VI模板時(shí) 它會(huì)自動(dòng)在內(nèi)存中創(chuàng)建一份復(fù)本 如果打開(kāi)多次就會(huì)創(chuàng)建多個(gè)復(fù)本 這就是VI模板的克隆特性 在界面上放置多個(gè) 子面板 作為儀器界面的 容器 右擊每一個(gè) 子面板 并選擇 創(chuàng)建 引用 選項(xiàng) 在程序框圖中創(chuàng)建它們的引用 通過(guò)For循環(huán)來(lái)實(shí)現(xiàn)載入VI模板的多個(gè)復(fù)本 當(dāng)有許多相同的儀器界面需要顯示時(shí) 可以用 子面板 與VI模板來(lái)實(shí)現(xiàn) 步驟如下 第13章界面設(shè)計(jì)與美化 實(shí)例 子界面重用 第13章界面設(shè)計(jì)與美化 實(shí)例 子界面重用 第13章界面設(shè)計(jì)與美化 界面美化 使用布局工具排列對(duì)象 第13章界面設(shè)計(jì)與美化 界面美化 使用布局工具排列對(duì)象 有些控件的大小是系統(tǒng)默認(rèn)的 無(wú)法用 調(diào)整對(duì)象大小控件 中的 調(diào)整寬度和高度 工具進(jìn)行調(diào)整 比說(shuō)數(shù)值控件的寬度等 這些不能調(diào)整的控件大小的尺寸會(huì)用 標(biāo)識(shí)出來(lái) 第13章界面設(shè)計(jì)與美化 界面美化 添加背景圖片 一種是直接從源圖片中進(jìn)行復(fù)制 粘貼 另一種是通過(guò)LabVIEW的菜單欄中 編輯 導(dǎo)入圖片至剪貼板 選項(xiàng) 從文件中選擇圖片 然后在前面板上進(jìn)行粘貼 添加背景圖片的方法有兩種 第13章界面設(shè)計(jì)與美化 界面美化 自定義控件 第13章界面設(shè)計(jì)與美化 界面美化 自定義控件 在前面板上放置一個(gè) 確定 按鈕 鼠標(biāo)右鍵單擊控件 選擇 高級(jí) 自定義 打開(kāi)自定義編輯對(duì)話框 從 編輯 導(dǎo)入圖片至剪貼板 導(dǎo)入圖片到剪貼板 右鍵單擊控件 選擇 從剪貼板導(dǎo)入圖片 始終 將圖片導(dǎo)入到控件上 切換到編輯模式 調(diào)整圖片和文字的位置 大小 保存自定義控件 自定義控件編輯效果 不同狀態(tài)下插入圖片的自定義控件效果 第13章界面設(shè)計(jì)與美化 界面美化 自定義控件 LabVIEW的所有控件都支持添加控件說(shuō)明信息 具體方法為在控件上單擊鼠標(biāo)右鍵 選擇 屬性 打開(kāi)屬性對(duì)話框 在 說(shuō)明信息 標(biāo)簽頁(yè)中進(jìn)行添加 第13章界面設(shè)計(jì)與美化 界面美化 動(dòng)畫 在程序載入過(guò)程中 文件保存過(guò)程中添加一些動(dòng)畫效果 將會(huì)使程序看上去更有活力 在LabVIEW中添加動(dòng)畫效果有很多種方法 最方便的就是在程序界面上添加一個(gè) GIF的動(dòng)畫圖片 GIF動(dòng)畫圖片的效果與程序運(yùn)行過(guò)程是互不影響的 另外一種常用的方法是使用LabVIEW自帶的進(jìn)度條等控件 或者是自定義控件 下面分別通過(guò)具體實(shí)例來(lái)演示它們的實(shí)現(xiàn)過(guò)程 用進(jìn)度條實(shí)現(xiàn)動(dòng)畫效果 第13章界面設(shè)計(jì)與美化 界面美化 動(dòng)畫 圖片滾動(dòng)條 第13章界面設(shè)計(jì)與美化 界面美化 利用控件選板與工具選板 控件 新式 容器 控件 新式 修飾 容器子面板中的修飾控件 修飾子面板中的修飾控件 第13章界面設(shè)計(jì)與美化 實(shí)例 分隔欄使用示例 第13章界面設(shè)計(jì)與美化 界面美化 工具選板 第13章界面設(shè)計(jì)與美化 界面美化 VI屬性設(shè)置 第13章界面設(shè)計(jì)與美化 綜合實(shí)例 用屬性節(jié)點(diǎn)控制Tab控件 第13章界面設(shè)計(jì)與美化 綜合實(shí)例 用屬性節(jié)點(diǎn)