繪圖基礎教學繪圖基礎教學繪圖基礎教學繪圖基礎教學講師講師講師講師::::黃永森黃永森黃永森黃永森2•HMIWebDisplayBuilder介紹介紹介紹介紹•HMIWebDisplayBuilder設定設定設定設定3自定圖面自定圖面自定圖面自定圖面在在在在SymmetrE中自定圖面的工具有兩種中自定圖面的工具有兩種中自定圖面的工具有兩種中自定圖面的工具有兩種::::1.DisplayBuilder2.HMIWebDisplayBuilder第一種為舊版工具第一種為舊版工具第一種為舊版工具第一種為舊版工具,,,,畫出的圖檔為畫出的圖檔為畫出的圖檔為畫出的圖檔為dsp檔檔檔檔,,,,缺點為功能較少且圖檔較大缺點為功能較少且圖檔較大缺點為功能較少且圖檔較大缺點為功能較少且圖檔較大,,,,不支不支不支不支援新型圖檔援新型圖檔援新型圖檔援新型圖檔((((如如如如::::GIF、、、、PNG、、、、SWF….等等等等),,,,R310後已停止發展升級後已停止發展升級後已停止發展升級後已停止發展升級。。。。第二種為第二種為第二種為第二種為R200後才支援的新工具後才支援的新工具後才支援的新工具後才支援的新工具,,,,畫出的圖檔為畫出的圖檔為畫出的圖檔為畫出的圖檔為HTM網頁檔網頁檔網頁檔網頁檔,,,,支援支援支援支援GIF、、、、Flash動畫及許多新功能動畫及許多新功能動畫及許多新功能動畫及許多新功能,,,,且往後只有此工具的版次功能會升級且往後只有此工具的版次功能會升級且往後只有此工具的版次功能會升級且往後只有此工具的版次功能會升級,,,,故本次教學以故本次教學以故本次教學以故本次教學以此工具為主此工具為主此工具為主此工具為主。。。。HMIWeb多出的功能多出的功能多出的功能多出的功能::::1.形狀合併形狀合併形狀合併形狀合併2.超連結超連結超連結超連結3.漸變圖層漸變圖層漸變圖層漸變圖層4.虛線虛線虛線虛線5.支援動畫檔支援動畫檔支援動畫檔支援動畫檔6.提示窗提示窗提示窗提示窗(ToolTip)7.Faceplate及及及及popupHMIWeb少掉的功能少掉的功能少掉的功能少掉的功能::::1.圖號圖號圖號圖號2.PointDetail圖面一定要圖面一定要圖面一定要圖面一定要用用用用dsp檔檔檔檔3.Shape物件無法旋轉物件無法旋轉物件無法旋轉物件無法旋轉4HMIWeb介面說明介面說明介面說明介面說明選單及功能按鈕選單及功能按鈕選單及功能按鈕選單及功能按鈕物件瀏覽器物件瀏覽器物件瀏覽器物件瀏覽器點位瀏覽器點位瀏覽器點位瀏覽器點位瀏覽器繪圖區繪圖區繪圖區繪圖區5選單選單選單選單6選單說明選單說明選單說明選單說明•新增圖面新增圖面新增圖面新增圖面********•開啟舊檔開啟舊檔開啟舊檔開啟舊檔•關閉編輯中的圖面關閉編輯中的圖面關閉編輯中的圖面關閉編輯中的圖面•儲存圖面儲存圖面儲存圖面儲存圖面•另存新檔另存新檔另存新檔另存新檔•全部儲存全部儲存全部儲存全部儲存•預覽預覽預覽預覽•頁面設定頁面設定頁面設定頁面設定•列印列印列印列印•預覽列印預覽列印預覽列印預覽列印•之前編輯的圖檔之前編輯的圖檔之前編輯的圖檔之前編輯的圖檔•離開離開離開離開•還原還原還原還原•重做重做重做重做•剪下剪下剪下剪下•複製複製複製複製•貼上貼上貼上貼上•元件複製元件複製元件複製元件複製•刪除刪除刪除刪除•選擇全部選擇全部選擇全部選擇全部•全部不選擇全部不選擇全部不選擇全部不選擇•尋找尋找尋找尋找•取代取代取代取代•Scripting•插入插入插入插入Shape元件元件元件元件•插入圖片插入圖片插入圖片插入圖片********新增圖面時有四種選擇新增圖面時有四種選擇新增圖面時有四種選擇新增圖面時有四種選擇::::1.Display::::普通圖面普通圖面普通圖面普通圖面2.Pop-up::::供供供供Pop-up功能用之圖面功能用之圖面功能用之圖面功能用之圖面3.ShapeSequence::::多態元件圖多態元件圖多態元件圖多態元件圖4.DynamicShape::::動態元件圖動態元件圖動態元件圖動態元件圖,,,,可包含多組可包含多組可包含多組可包含多組Shape圖或撰寫圖或撰寫圖或撰寫圖或撰寫Script程式程式程式程式7選單說明選單說明選單說明選單說明•放大放大放大放大/縮小縮小縮小縮小•尺規尺規尺規尺規•隔線隔線隔線隔線•鎖定隔線鎖定隔線鎖定隔線鎖定隔線•參數視窗參數視窗參數視窗參數視窗•Script編輯器編輯器編輯器編輯器•物件瀏覽器物件瀏覽器物件瀏覽器物件瀏覽器•點位瀏覽器點位瀏覽器點位瀏覽器點位瀏覽器•圖庫圖庫圖庫圖庫•HTML原始檔原始檔原始檔原始檔•參數表參數表參數表參數表•狀態欄狀態欄狀態欄狀態欄•上下層級切換上下層級切換上下層級切換上下層級切換•群組群組群組群組•對齊對齊對齊對齊•調整大小調整大小調整大小調整大小•水平平均分散水平平均分散水平平均分散水平平均分散•垂直平均分散垂直平均分散垂直平均分散垂直平均分散•鎖定鎖定鎖定鎖定8選單說明選單說明選單說明選單說明•左旋轉左旋轉左旋轉左旋轉•右旋轉右旋轉右旋轉右旋轉•水平翻轉水平翻轉水平翻轉水平翻轉•上下翻轉上下翻轉上下翻轉上下翻轉•關連合併關連合併關連合併關連合併•差異合併差異合併差異合併差異合併•相切合併相切合併相切合併相切合併•獨占合併獨占合併獨占合併獨占合併•開放結合開放結合開放結合開放結合********•轉換路徑轉換路徑轉換路徑轉換路徑•結合結合結合結合•不結合不結合不結合不結合•嵌入元件嵌入元件嵌入元件嵌入元件•升級嵌入的元件升級嵌入的元件升級嵌入的元件升級嵌入的元件•替換元件替換元件替換元件替換元件•點位更名點位更名點位更名點位更名•變更變更變更變更Server•分析圖面效能分析圖面效能分析圖面效能分析圖面效能•繪圖助理繪圖助理繪圖助理繪圖助理•圖面報告圖面報告圖面報告圖面報告•自定工具列自定工具列自定工具列自定工具列•選項選項選項選項•重疊顯示重疊顯示重疊顯示重疊顯示•並排顯示並排顯示並排顯示並排顯示•排列圖示排列圖示排列圖示排列圖示********Join開放結合只能將兩個開放元件開放結合只能將兩個開放元件開放結合只能將兩個開放元件開放結合只能將兩個開放元件結合成一個封閉的元件結合成一個封閉的元件結合成一個封閉的元件結合成一個封閉的元件,,,,如下如下如下如下::::兩段頭尾兩段頭尾兩段頭尾兩段頭尾相接的線條結合成一個不規則的圓相接的線條結合成一個不規則的圓相接的線條結合成一個不規則的圓相接的線條結合成一個不規則的圓9快捷按鈕說明快捷按鈕說明快捷按鈕說明快捷按鈕說明•標準工具標準工具標準工具標準工具•檢視工具檢視工具檢視工具檢視工具•調整工具調整工具調整工具調整工具•轉換工具轉換工具轉換工具轉換工具•格式工具格式工具格式工具格式工具•繪圖工具繪圖工具繪圖工具繪圖工具•工具箱工具箱工具箱工具箱10快捷按鈕說明快捷按鈕說明快捷按鈕說明快捷按鈕說明•以下只針對工具箱做說明以下只針對工具箱做說明以下只針對工具箱做說明以下只針對工具箱做說明•超連結超連結超連結超連結•文字方塊文字方塊文字方塊文字方塊•扇形扇形扇形扇形•弧線弧線弧線弧線•曲線曲線曲線曲線•多邊型多邊型多邊型多邊型•折線折線折線折線•直線直線直線直線•橢圓橢圓橢圓橢圓•圓角矩型圓角矩型圓角矩型圓角矩型•矩型矩型矩型矩型•節點編輯節點編輯節點編輯節點編輯•旋轉旋轉旋轉旋轉•放大鏡放大鏡放大鏡放大鏡•滑鼠滑鼠滑鼠滑鼠•全局時間表全局時間表全局時間表全局時間表•表格表格表格表格•警報標示警報標示警報標示警報標示•事件事件事件事件•警報警報警報警報•ActiveX控制控制控制控制•插入插入插入插入Shape元件元件元件元件•插入圖片插入圖片插入圖片插入圖片•ActiveX文件文件文件文件•歷史曲線歷史曲線歷史曲線歷史曲線•曲線加事件曲線加事件曲線加事件曲線加事件•選擇框選擇框選擇框選擇框•指示條指示條指示條指示條•按鈕按鈕按鈕按鈕•勾選框勾選框勾選框勾選框•數值文字數值文字數值文字數值文字屬性窗說明屬性窗說明屬性窗說明屬性窗說明12屬性設定屬性設定屬性設定屬性設定•HMIWebDisplayBuilder程式程式程式程式設定設定設定設定•頁面屬性窗說明頁面屬性窗說明頁面屬性窗說明頁面屬性窗說明•元件屬性窗說明元件屬性窗說明元件屬性窗說明元件屬性窗說明13HMIWebDisplayBuilder設定設定設定設定使用的使用的使用的使用的Script語法語法語法語法,,,,支援支援支援支援VB或或或或JAVA可可可可復原復原復原復原/重作重作重作重作動作的次數動作的次數動作的次數動作的次數儲存最近開啟檔案紀錄的筆數儲存最近開啟檔案紀錄的筆數儲存最近開啟檔案紀錄的筆數儲存最近開啟檔案紀錄的筆數每隔多久自動儲存每隔多久自動儲存每隔多久自動儲存每隔多久自動儲存,,,,建議不啟建議不啟建議不啟建議不啟用用用用,,,,會影響畫圖效能會影響畫圖效能會影響畫圖效能會影響畫圖效能從選單的從選單的從選單的從選單的ToolsOptions…可進入可進入可進入可進入HMIWebDisplayBuilder的程式設定畫面的程式設定畫面的程式設定畫面的程式設定畫面14HMIWebDisplayBuilder設定設定設定設定水平格線的間距水平格線的間距水平格線的間距水平格線的間距畫圖時的背景底色畫圖時的背景底色畫圖時的背景底色畫圖時的背景底色垂直格線的間距垂直格線的間距垂直格線的間距垂直格線的間距鎖定物件到格線鎖定物件到格線鎖定物件到格線鎖定物件到格線顯示格線顯示格線顯示格線顯示格線顯示尺規顯示尺規顯示尺規顯示尺規15HMIWebDisplayBuilder設定設定設定設定Shape物件的存放位置物件的存放位置物件的存放位置物件的存放位置插入插入插入插入Shape物件時的聯結方式物件時的聯結方式物件時的聯結方式物件時的聯結方式:Contentsofshapefile代表會將代表會將代表會將代表會將Shape檔案複製檔案複製檔案複製檔案複製到頁面的同名資料夾中到頁面的同名資料夾中到頁面的同名資料夾中到頁面的同名資料夾中,,,,Linktoshapefile則不複製則不複製則不複製則不複製,,,,而是到而是到而是到而是到Station的圖檔路徑的圖檔路徑的圖檔路徑的圖檔路徑中去搜尋及聯結中去搜尋及聯結中去搜尋及聯結中去搜尋及聯結Shape檔案檔案檔案檔案16HMIWebDisplayBuilder設定設定設定設定插入插入插入插入Shape物件時的聯結方式物件時的聯結方式物件時的聯結方式物件時的聯結方式:Contentsofshapefile::::當插入當插入當插入當插入Shape檔案到頁面中時檔案到頁面中時檔案到頁面中時檔案到頁面中時,,,,系統會自動將該系統會自動將該系統會自動將該系統會自動將該Shape的原始檔案複製一份到頁面的同名資料夾中的原始檔案複製一份到頁面的同名資料夾中的原始檔案複製一份到頁面的同名資料夾中的原始檔案複製一份到頁面的同名資料夾中,,,,並且以後只會在該位址去並且以後只會在該位址去並且以後只會在該位址去並且以後只會在該位址去聯結這個聯結這個聯結這個聯結這個Shape,,,,如果如果如果如果Shape不存在於頁面的同名資料夾中不存在於頁面的同名資料夾中不存在於頁面的同名資料夾中不存在於頁面的同名資料夾中,,,,則會顯示找不到則會顯示找不到則會顯示找不到則會顯示找不到Shape的訊息的訊息的訊息的訊息,,,,因會複製元件到各圖面之資料夾因會複製元件到各圖面之資料夾因會複製元件到各圖面之資料夾因會複製元件到各圖面之資料夾,,,,所以會造成整個所以會造成整個所以會造成整個所以會造成整個Abstract圖圖圖圖檔數量過多檔數量過多檔數量過多檔數量過多、、、、佔用空間過大佔用空間過大佔用空間過大佔用空間過大Linktoshapefile::::當插入當插入當插入當插入Shape檔案到頁面中時檔案到頁面中時檔案到頁面中時檔案