【Tridium Niagara Vykon N4 物聯網平臺】 06_完善界面

本次實驗是在“燈光控制實驗”的基礎上,優化了照明控制的界面。實現了增加背景圖片、燈光獨立控制等功能。

1. 啓動平臺和站點

首先啓動平臺,在Application Director界面中啓動站點。
圖2.1 啓動站點

雙擊站點名,打開站點內容。在左側導航欄中找到Station -> Light_Control文件夾。
圖2.2 打開站點

Light_Control文件夾是之前做的燈光控制實驗,本次將在燈光控制實驗的基礎上添加背景圖片,完善界面的顯示效果。

2. 添加背景圖片

右鍵單擊Light_Control文件夾,選擇Views -> Graphic,切換到佈局界面。
圖2.3 佈局界面

佈局界面如下圖所示。
圖2.4 佈局界面展示

這是我們之前設計的燈光控制系統界面,手自動切換選項可以選擇在手動和自動照明之間進行切換;時間表按鈕用來設置自動照明模式下的照明時間;手動開關按鈕用來在手動模式下控制燈光的亮滅。當勾選“手自動控制切換”選項時,手動控制有效,不勾選時自動控制有效。
接下來點擊軟件菜單欄的編輯按鈕,切換到佈局編輯界面。
圖2.5 佈局編輯界面

佈局編輯界面如下圖所示。
圖2.6 佈局編輯界面

接下來需要下載背景圖,我下載了一個房屋平面圖,作爲整個界面的背景。
下載圖片完成後,首先要在Niagara軟件的側邊欄中找到該文件。
比如我已經將該圖片下載並移動到了桌面上,將其命名爲“背景圖片.png”。那麼就可以在Niagara軟件的側邊欄中查找My File System -> C: -> Users -> ZHJ -> Desktop -> 背景圖片.png 找到該文件。選中該文件,右鍵點擊複製。(注:路徑中的ZHJ是我的用戶名)
圖2.7 背景圖片

之後在Niagara軟件的側邊欄中,選中Station -> Files 文件夾並右鍵單擊,選擇粘貼。
圖2.8 粘貼圖片

背景圖片就被粘貼到站點中了。
圖2.9 背景圖片位置

雙擊編輯界面空白部分的網格,可以更改編輯界面的大小。在彈出來的屬性窗口中,點擊viewSize並輸入數值。我調整的界面大小爲1400×800,可以根據自己的顯示屏調整。
圖2.10 設置佈局大小

在編輯界面的上半部分,可以添加一個標題。右鍵點擊空白部分,選擇 New -> Label,新建標籤。
圖2.11 添加標籤

雙擊該標籤可以設置其屬性。將text屬性設置爲“照明控制界面展示”background(背景色)設置爲銀色。點擊font(字體)屬性,取消勾選Null/Default選項,字體選擇微軟雅黑,字體大小設置爲26,如下圖所示。
圖2.12 設置字體

總共需要設置三個屬性,設置完成後如下圖所示。
圖2.13 更改屬性

現在編輯界面的效果如下:
圖2.14 界面展示

接下來設置背景圖片。首先在空白部分右鍵單擊,選擇New -> Picture
圖2.15 新建圖片

調整一下Picture組件的大小
圖2.16 界面展示

雙擊Picture組件,設置其屬性。點擊image屬性,設置背景圖片資源。
圖2.17 查找圖片位置

在文件選擇器中,選中圖片並點擊打開。
圖2.18 打開圖片

圖片資源設置完成後,點擊OK保存即可。
圖2.19 圖片屬性

現在,圖片就已經被添加到編輯界面了。
圖2.20 界面展示

在圖片上點擊右鍵,選擇Reorder -> To Bottom,將圖片始終置於界面最下方,防止背景圖片覆蓋其他組件。
圖2.21 背景置於底部

之後可以通過拖拽圖片邊框,調整一下圖片顯示的大小。將兩個燈泡分別調整到背景圖片適合的位置。比如,分別將兩個燈泡移動至房屋平面圖的臥室位置。
圖2.22 燈泡位置

3. 燈光獨立控制

爲了能夠分別控制兩個燈泡,可以使用action對燈泡進行獨立控制。
選中左側導航欄中的Station -> Config -> Light_Control文件夾,將燈泡Light01拖動至Graphic編輯界面。
圖2.23 添加組件

在彈出的組件界面中,按住Ctrl,選擇Actions屬性下的ActiveInactiveAuto三類動作,添加到界面中。
圖2.24 添加動作

添加完成後,會出現三個對應的按鈕。
圖2.25 按鈕展示

將這三個按鈕依次命名爲“1號燈點亮”“1號燈熄滅”“自動控制”。雙擊按鈕,修改其text屬性。
圖2.26 設置文字屬性

這樣,第一個按鈕就更改完成了。其餘兩個按鈕也是同樣的修改方式。修改完成後如下圖所示。
圖2.27 設置文字

接下來設置2號燈的獨立控制按鈕。將Station ->Config -> Light_Control -> Light02拖動到佈局編輯界面。
圖2.28 添加組件

與Light01相同,Light02同樣是設置Actions下的ActiveInactiveAuto三個動作。
圖2.29 設置動作

更改其text屬性,分別改爲“2號燈點亮”“2號燈熄滅”“自動控制”
圖2.30 設置文字

接下來調整一下按鈕佈局,然後選中所有按鈕,右鍵單擊,選擇“編輯設置”以設置其字體屬性。
圖2.31 編輯屬性

更改字體選項,將字體更改爲微軟雅黑,字號爲14。
圖2.32 字體屬性

最終照明控制界面的效果如下圖所示。
圖2.33 界面展示

點擊編輯按鈕,從編輯界面切換回佈局界面。
圖2.34 編輯界面

照明控制界面展示效果如下:
圖2.35 界面展示

“手自動控制切換”選項被勾選時,是手動控制模式;不勾選時是自動控制模式。
“總控開關”可以在手動模式下,同時控制兩個燈的亮滅,但在自動模式下無效。
“時間表”可以編輯在自動模式下的照明時間,但在手動模式下無效。
“1號燈點亮”按鈕可以隨時控制1號燈的點亮,在任意模式下都可以使用。
“1號燈熄滅”按鈕可以隨時控制1號燈的熄滅,也是在任意模式下有效。
“1號燈自動控制”按鈕可以將照明模式改爲時間表控制。
2號燈的按鈕操作與1號燈相同。

4. 功能測試

在手動控制模式下,點擊“總控開關”按鈕,可以控制兩個燈的亮滅。
圖2.36 總控開關

自動控制模式下,根據照明時間表計劃的照明時間,可以點亮燈泡。
圖2.37 自動控制

點擊“1號燈熄滅”按鈕,測試其功能。
會彈出Inactive窗口,直接點擊OK確認使其失能。
圖2.38 確認設置
圖2.39 強制關燈

可以看到,1號燈已經被強制關閉了,2號燈由於處在時間表控制下,所以還保持着點亮的狀態。
同樣,點擊“1號燈點亮”按鈕,激活1號燈的照明。
圖2.40 確認設置
圖2.41 強制開燈

這樣1號燈就被正常點亮了。
接下來測試“自動控制”按鈕。先將“2號燈熄滅”按鈕按下,使2號燈被強制熄滅。
圖2.42 強制關燈

然後點擊“2號燈自動控制”按鈕。
圖2.43 自動控制

可以看到,因爲自動控制狀態的時間表是開啓照明狀態,所以2號燈被正常開啓了。說明各個按鈕的功能都是正常的。

5. 總結

本次實驗是在“燈光控制實驗”的基礎上,優化了照明控制的界面。實現了增加背景圖片、燈光獨立控制等功能。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章