隧道的項目我目前是第一次接觸，感覺做起來的效果還蠻贊的，是以給大家分享一下。這個隧道項目的主要内容包括：照明、風機、車道訓示燈、交通信号燈、情報闆、消防、火災報警、車行橫洞、風向儀、COVI、微波車檢以及隧道緊急逃生出口的控制。這個例子我主要講一下風向儀、排風以及逃生出口的動畫設定， 還有就是點選交通信号燈，彈出視窗可以選擇目前信号燈的資訊等内容。
本例效果：
HT 的元件一般都會嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外層的 HT 元件則需要使用者手工将 getView() 傳回的底層 div元素添加到頁面的 DOM 元素中，這裡需要注意的是，當父容器大小變化時，如果父容器是 BorderPane 和 SplitView 等這些<code>HT</code>預定義的容器元件，則<code>HT</code>的容器會自動遞歸調用孩子元件 invalidate 函數通知更新。但如果父容器是原生的 html 元素， 則<code>HT</code>元件無法獲知需要更新，是以最外層的 HT 元件一般需要監聽 window 的視窗大小變化事件，調用最外層元件 invalidate 函數進行更新。
為了最外層元件加載填充滿視窗的友善性，HT 的所有元件都有 addToDOM 函數，其實作邏輯如下，其中 iv 是 invalidate 的簡寫：
最讓我開心的應該是我的開發基本上跟設計部分完全分離了，因為 HT 可以通過 ht.Default.xhrLoad 函數直接加載 json 檔案的場景，這樣我跟設計師就是雙程序了，非常開心呢~加載場景有三個步驟，如下：
我在場景中添加了一些功能，包括前面提到過的一些動畫操作，HT 封裝好的 dataModel.addScheduleTask(task) 通過操作資料容器 dataModel 來控制加載動畫，動畫部分在參數 task 中聲明，task 為 json 對象，可指定如下屬性：
interval：間隔毫秒數，預設值為 10<code></code>
enabled：是否啟用開關，預設為 true<code></code>
action：間隔動作函數，該函數必須設定
我的動畫一共三個，兩個隧道中各有一個風扇、一個風向儀以及一個卷閘門。設定這三個圖元變化即可，我在 json 中分别将這三個圖元的 tag 設定為 feng、feng2 以及 door，在代碼中我就可以直接調用這三個圖元的 tag 屬性：
接着是建立 form 表單，在表單上添加一些資訊，比如交通燈的切換等等，場景預設顯示的右上角的 form 表單我們這裡不做解釋，内容跟點選交通燈出現的 form 表單差不多，是以我們主要說明一下點選交通燈時出現的表單：
表單中重複的部分比較多，我挑出三個部分來解釋一下：文本部分、“目前狀态”顯示的圖示以及下面“修改狀态”中的圖示點選選擇部分：
這個 form 表單的背景隻是設定了一張圖檔而已：
上面還有一個部分沒有提及，就是點選按鈕後調用的 btnClick 函數：
最後就是點選事件了，一個是點選 3D 中的交通燈後出現交通燈控制的 form 表單，還有一個就是點選 form 表單上的“修改狀态”中的圖示事件：