颱風波浪預測模式視窗化介面介紹

本介面開發環境擬以Matlab 中的 GUIDE(Graphical User Interfaces Development Environment)進行開發。操作環境為 Mathworks 公司的科 技運算應用軟體 Matlab。在往昔交通部運輸研究所港灣技術研究中心 的合作研究計畫『台灣港灣地區颱風波浪推算之應用研究』中已成功 開發花蓮港颱風波浪推算模式的視窗化介面，而後並提送經濟部智慧 財產局核定取得『類神經網路所建立的颱風波浪預報模式』專利權(中 華民國發明第285338 號)。故高雄港颱風波浪推算模式以往昔的工作經 驗配合新的演算及整合技術來建構此視窗化介面。

圖形化介面的開發目標期望能以最少的操作程序作最多的流程以 及展現最多的資訊，如此一來可以減少視窗的切換以及提升操作流程 的流暢度。目前整個圖形化介面主要由九個視窗組成、分別為 1.主介 面視窗 2.資料輸入視窗 3.模擬輸出視窗 4.資料存檔視窗(包含圖片存 檔以及資料存檔) 5.颱風路徑圖 6.預測波高圖 7.預測波高表 8.即時波 浪資訊9.即時衛星雲圖資訊，在此分別介紹如下：

1.主介面視窗

(1) 介面主視窗標題列：標題列明確列出目前介面所在視窗並註明介 面版本等資訊。

(2) 介面主視窗工具列：工具列包含控制、模擬以及其他三個部分。

工具列的編排主要符合一般 Windows 應用程式的架構，以樹狀 的結構將所要選取的指令存放於內，示如圖5.2-2。

圖 5.2-1 本介面主視窗

圖 5.2-2 樹狀結構的工具列

如圖5-3 中所示第一子工具列為控制部分包括颱風資料的輸入、波 浪資料的輸入、清除已輸入的資料及離開本介面。清除已輸入資料目 的在於當輸入資料發生錯誤或是欲另外輸入資料前先將記憶體中的暫 存資料清除。第二子工具列為模擬部分，此部份為資料輸入確定無誤 後選取適當的類神經架構進行模擬。第三子工具列為颱風資訊，可在 連接網際網路的情況下在本介面中展示中央氣象局所公布的即時波浪 資料與衛星雲圖。第四子工具列為其他部分，包含呼叫完整的使用手 冊以及關於本介面的版本資訊視窗開啟，使用手冊的開啟將呼叫外部 程式以開啟HTML 資料的瀏覽器。

(3) 選擇預測模式區域：目前颱風波浪預測模式的測試資料有花蓮 港、高雄港及安平港的波浪資料，在此可選擇預測的區域。

(4) 颱風名稱以及颱風資料起始時間輸入：新增此框架目的在於能在 輸出視窗中明確列出處理中的颱風名稱或編號。此外，透過輸入 的颱風資料起始時間，能在各個時序圖中標示出正確的時間，進 而提供比時間序列更明確的圖軸表示。

工具列

控制

模擬

其他

1.輸入颱風資料 2.清除已輸入資料 3.離開

選取合適的模式進行模擬

1.使用手冊 2.關於本介面

颱風資訊 1.即時衛星影像

2.即時波高

(5) 輸入資料之颱風風速變化圖：此區域可即時將所輸入的颱風風速 資料以繪圖方式來表示，幫助使用者即時了解所輸入之颱風資 料，並標示出風速最大值所發生的時間。

(6) 輸入資料之颱風距離變化圖：此區域可即時將所輸入的颱風位置 資料運算成颱風與港口之間距離變化並以繪圖方式來表示，幫助 使用者即時了解所輸入之颱風資料以及颱風最接近點的時間。

(7) 輸入資料之狀態視窗：本文字狀態區域能即時顯示輸入之颱風資 料筆數以及颱風的基本資訊，以便檢核資料良缺，判斷輸入之資 料是否適合進行下一階段的模擬程序。

2.資料輸入視窗

圖 5.2-3 颱風資料輸入視窗

資料輸入視窗與一般 Windows 檔案開啟視窗相似，操作部分詳述 於下：

(1) 目前資料夾位置：顯示目前所在資料夾，使用者能在此區域切換 各個位於該電腦中的儲存設備或是網路儲存設備以更改目前資 料夾位置。

(2) 回上一頁按鈕：本按鈕功能為回到之前所在目錄。

(3) 回上一層按鈕：本按鈕功能為回到目前所在資料夾的上一層，若 是以處在最上層資料夾則會回到磁碟根目錄，Windows 作業系統 根目錄的上一層則為我的電腦。

(4) 新增資料夾按鈕：本按鈕能在所在資料夾內再新增一子資料夾。

(5) 檢視模式變換按鈕：本按鈕可將目前所在資料夾內的檔案表現方 式做適當的改變，包含大型圖示、小型圖示、清單、詳細資料以 及縮圖五種方式。

(6) 檔案名稱區域：使用者可在本區域輸入欲開啟的輸入資料檔名。

(7) 選取檔案類型：本區域能夠設定檔案列表區內顯示的檔案類型，

本介面在此內定為顯示附檔名為*.dat 之所有檔案，使用者可視 需要更改為顯示所有檔案。

(8) 開啟檔案按鈕：本按鈕可在選取檔案後執行開啟的動作，並回到 主視窗進行下一步的運算以及檢核。

(9) 取消按鈕：不作任何更動離開本視窗。

(10) 檔案區列表區：列出本資料夾中所有檔案以及子資料夾。

(11) 說明按鈕：按下此按鈕後滑鼠游標會呈現問號，再點及本視窗中 各個元件後，會出現各元件的簡單說明。

(12) 關閉視窗按鈕：同於取消按鈕，不作任何改變離開本視窗。

3.模擬輸出視窗

圖 5.2-4 模擬結果輸出視窗

(1) 模擬輸出視窗標題列：標題列明確列出目前介面所在視窗並註明 介面版本等資訊。

(2) 本區域列出颱風名稱及颱風資料起始時間，另外還有介面推算過 程中的基本資訊，包括目前時間、計算位置以及輸入資料筆數。

(3) 顯示颱風路徑按鈕：此按鈕可以開啟颱風路徑圖視窗，並可提供 圖檔儲存之功能。

(4) 顯示預測波高表按鈕：此按鈕可以開啟波高預測表視窗，可提供 逐筆檢視預測波高值。

(5) 顯示預測波高圖按鈕：此按鈕可以開啟波高預測圖視窗，可檢視 波高歷時圖，並提供圖檔儲存之功能。

(6) 模擬結果繪圖區 A：本繪圖區可展現風速-時間、距離-時間、海 面上 10 米風速-時間以及波高-時間圖，並且標示出各個歷時圖 中較重要的峰值。

(7) 模擬結果繪圖區 B：同於模擬結果繪圖區 A、本介面利用雙圖框 讓使用者能在同一時刻比較兩種不同資料。

(8) 本區域以下拉式功能表選取顯示在模擬結果繪圖區 A 的變化圖。

(9) 本區域以下拉式功能表選取顯示在模擬結果繪圖區 B 的變化圖。

(10) 預測資料輸出按鈕：開啟資料存檔視窗，以便儲存模擬後的輸出 資料，目前支援格式為純文字文件。

(11) 完成按鈕：結束模擬輸出視窗，並關閉一切展示視窗，回到主視 窗重新接受資料輸入。

4.資料存檔視窗

由模擬輸出視窗中的預測資料輸出按鈕以及各個展示視窗(颱風路 徑圖視窗、預測波高圖視窗)中的圖形資料存檔按鈕可以開啟這兩個存

檔視窗，視窗中各元件介紹同於資料輸入視窗；差異在於圖5.2-5 為將 資料檔儲存為純文字文件格式，而圖5.2-6 則為將圖形的部分作存檔的 動作。而存檔的檔案格式限制以及更動都是在(7)存檔類型的區域，兩 個不同的視窗會對存檔的格式作限制，使用者無須擔心會將ascii 的資 料檔儲存為附檔名jpg 的圖形檔格式。

圖 5.2-5 模擬結果資料存檔視窗

圖 5.2-6 模擬結果圖形存檔視窗 5.颱風路徑圖

圖 5.2-7 颱風路徑圖

颱風路徑圖視窗中展示該颱風在北緯5~40 度、東經 100~140 度範 圍內的颱風行進路徑。並提供颱風路徑圖的圖檔儲存，視窗大小可自 由拉伸做大小、長寬的調整，在儲存時儲存按鈕會自動消失使存檔的 圖片較為美觀且圖形橫軸不會被該按鈕遮蔽。

6.預測波高圖

圖 5.2-8 預測波高圖

預測波高圖視窗中展示該颱風在預測點所造成的波高值，橫軸為 時間序列，縱軸為波高，途中並標示出波高最大值所發生的時間。並 提供圖檔儲存，視窗大小可自由拉伸做大小、長寬的調整，在儲存時

儲存按鈕會自動消失使存檔的圖片較為美觀且圖形橫軸不會被該按鈕 遮蔽。

7.預測波高表

預測波高表提供操作者即時檢視預測波高值以及時間的列表，使 操作者更能了解波高值的細部變化。由於在模擬輸出視窗中已提供預 測資料的純文字資料輸出，故本視窗沒有提供儲存功能。

圖 5.2-9 預測波高表 8.即時波高資訊

即時波高資訊可透過網際網路的傳輸在模式介面中直接展示中央 氣象局所公布的即時波高資料，目前所提供波浪資料的測站有花蓮、

龜山島、蘇澳、新竹、小琉球、大鵬灣等。其中小琉球測站與大鵬灣 測站的波高資料與本計畫高雄港推算點的位置接近，可作為推算結果 比較的參考值，如圖5.2-10 所示。

圖 5.2-10 即時波高資訊視窗 9.即時衛星雲圖資訊

本介面並可透過網際網路連結中央氣象局所公布的 MTSAT 之衛 星雲圖影像，影像類型包括可見光、紅外光、及色調強化等。空間尺 度並分為全球、東亞及台灣等三個尺度，如圖5.2-11 所示。

圖 5.2-11 即時衛星雲圖資訊視窗

圖形化介面初步建構除了上述功能之外，並撰寫完整且清楚的說 明文件，以便讓使用者能於操作時即時以圖片明確地了解各個操作步 驟以及流程的控制，完整且清楚的說明文件能讓使用者在操作時透過 上方工具列即時開啟，說明文件採用Flash 製作，內容採用互動式的樹 狀架構，如圖 5.2-12 所示。除了版權宣告與開發單位訊息外並以圖片 明確地說明各元件的功能與參數調整，另外對於整個操作流程也一併 建立了step by step 的圖說明，讓使用者能了解各個操作步驟以及流程

圖形化介面初步建構除了上述功能之外，並撰寫完整且清楚的說 明文件，以便讓使用者能於操作時即時以圖片明確地了解各個操作步 驟以及流程的控制，完整且清楚的說明文件能讓使用者在操作時透過 上方工具列即時開啟，說明文件採用Flash 製作，內容採用互動式的樹 狀架構，如圖 5.2-12 所示。除了版權宣告與開發單位訊息外並以圖片 明確地說明各元件的功能與參數調整，另外對於整個操作流程也一併 建立了step by step 的圖說明，讓使用者能了解各個操作步驟以及流程