KingSCADA初級(jí)教程第四章現(xiàn)場(chǎng)畫(huà)面.doc

《KingSCADA初級(jí)教程第四章現(xiàn)場(chǎng)畫(huà)面.doc》由會(huì)員分享，可在線(xiàn)閱讀，更多相關(guān)《KingSCADA初級(jí)教程第四章現(xiàn)場(chǎng)畫(huà)面.doc（28頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

第四章 繪制現(xiàn)場(chǎng)畫(huà)面 本章內(nèi)容 & 認(rèn)識(shí)圖形編輯器 & 制作精靈圖 & 制作圖形模型 & 制作現(xiàn)場(chǎng)畫(huà)面 第一節(jié) 認(rèn)識(shí)圖形編輯器 在本章我們將利用KingSCADA3.1強(qiáng)大的繪圖工具來(lái)制作現(xiàn)場(chǎng)的流程畫(huà)面，畫(huà)面的組成包括管道、閥門(mén)、水泵、反應(yīng)釜、儲(chǔ)藏罐等等。在制作過(guò)程中我們還會(huì)用到圖庫(kù)精靈、圖形模型等功能。 KingSCADA3.1圖形編輯器中即繪制現(xiàn)場(chǎng)的畫(huà)面，包括監(jiān)控畫(huà)面、趨勢(shì)畫(huà)面、報(bào)警畫(huà)面、現(xiàn)場(chǎng)流程圖等，還可以為畫(huà)面中的圖素設(shè)置連接動(dòng)畫(huà)，編寫(xiě)按鈕的控制程序等等。圖形編輯器為您提供了強(qiáng)大的繪圖工具，不僅提供了基本繪圖工具、擴(kuò)展繪圖工具、Windows UI繪圖工具還提供了精靈圖庫(kù)，大大提高了工程開(kāi)發(fā)的效率。 啟動(dòng)圖形編輯器的方法如下： 在KingSCADA3.1工程開(kāi)發(fā)環(huán)境（KingMake）中單擊“編輯”菜單中的“圖形系統(tǒng)”命令，即可彈出畫(huà)面編輯器，如圖4-1所示： 圖4-1畫(huà)面編輯器 畫(huà)面編輯器包括：菜單欄、工具欄、工具箱、編輯界面、動(dòng)畫(huà)連接窗口、內(nèi)容窗口、對(duì)象瀏覽窗口、屬性配置窗口。 在畫(huà)面編輯器中開(kāi)發(fā)畫(huà)面時(shí)，可以隨時(shí)切換到運(yùn)行環(huán)境，測(cè)試畫(huà)面效果，提高生產(chǎn)率和縮短開(kāi)發(fā)周期。 圖形系統(tǒng)的繪圖工具： 圖形系統(tǒng)的繪圖工具有三部分組成：基本工具、擴(kuò)展工具和Windows UI。 每種圖素都包含一系列的對(duì)象屬性，屬性窗口中包括圖素的名稱(chēng)、大小、位置等外觀(guān)通用屬性，用戶(hù)可以對(duì)這些屬性進(jìn)行修改。同時(shí)每種圖素還有自己的獨(dú)特的屬性。詳細(xì)的圖素屬性說(shuō)明請(qǐng)參考KingScada3.1操作手冊(cè)，下面簡(jiǎn)單介紹幾種圖素的制作。 新建畫(huà)面： 在KingSCADA3.1圖形編輯器中執(zhí)行“文件”菜單中的“新建畫(huà)面”命令，彈出如圖4-2所示： 輸入畫(huà)面名稱(chēng)，例如“學(xué)習(xí)”，設(shè)置畫(huà)面大小，然后點(diǎn)擊“確定”。 如圖4-2所示： 圖4-2 新建畫(huà)面 1、 圓角矩形框： 選擇基本圖形工具的圓角矩形框，然后將圖素放置在畫(huà)面上。圓角矩形的屬性如圖4-3所示：我們主要用到的屬性為： Pen：矩形邊框?qū)傩裕? Brush：矩形畫(huà)刷屬性； DrawOption：矩形框顯示屬性； 現(xiàn)在我們先設(shè)置Pen屬性，點(diǎn)擊彈出設(shè)置線(xiàn)屬性對(duì)話(huà)框，如圖4-4所示，我們選擇線(xiàn)的寬度為3，其他不變。然后我們?cè)O(shè)置Brush屬性，點(diǎn)擊彈出設(shè)置畫(huà)刷對(duì)話(huà)框，選擇“線(xiàn)性”如圖4-5所示，設(shè)置畫(huà)刷的屬性。DrawOption屬性可以設(shè)置顯示的方式，其他屬性的設(shè)置請(qǐng)參考操作手冊(cè)。 圖4-4 線(xiàn)屬性設(shè)置 圖4-5 畫(huà)刷屬性設(shè)置 圖4-3 圓角矩形屬性 2、文本： 文本用來(lái)顯示一個(gè)文本字符串，只能進(jìn)行單行顯示，該文本的大小隨圖素的尺寸而變化，非常適用于值輸出的顯示；對(duì)于多行文本的顯示，建議使用Windows控件中的文本框或超級(jí)文本，文本框部分屬性如下： Text：顯示的文本內(nèi)容； TextFont：顯示的文本的字體； TextBrush：顯示的文本的顏色畫(huà)刷； 選擇基本圖形工具的文本T，然后將圖素放置在畫(huà)面上?？梢酝ㄟ^(guò)屬性設(shè)置文本的內(nèi)容、文本字體、文本顏色等等屬性。 我們將文本“Text”修改為“##”，然后使用動(dòng)畫(huà)連接“添加連接”選擇模擬值輸出，如圖4-5，4-6所示使用模擬值輸出動(dòng)畫(huà)連接，連接變量“\\local\liquid_level”。 圖4-5 動(dòng)畫(huà)連接 圖4-6 模擬值輸出 需要注意的是：當(dāng)文本對(duì)象在開(kāi)發(fā)狀態(tài)下，輸入帶有“#”的字符，即為數(shù)值類(lèi)型的通配符，即當(dāng)該字符串進(jìn)行數(shù)值類(lèi)型輸出動(dòng)畫(huà)連接時(shí)，將文本中第一次遇到的#顯示得到的數(shù)值，按照動(dòng)畫(huà)連接中設(shè)定的數(shù)值格式顯示，例如： 1、當(dāng)文本內(nèi)容為“# 米”時(shí)，而值輸出動(dòng)畫(huà)連接要顯示的數(shù)據(jù)為20.4，則運(yùn)行時(shí)，該文本顯示“20.4 米”； 2、當(dāng)文本內(nèi)容為“此時(shí)液位高度為 # 米”時(shí)，而值輸出動(dòng)畫(huà)連接要顯示的數(shù)據(jù)為20.4，則運(yùn)行時(shí)，該文本顯示“此時(shí)液位高度為 20.4 米”； 3、當(dāng)文本內(nèi)容為“### 米 ###”或者在單個(gè)#，則顯示“20.4 米 ###”，包括當(dāng)輸入文本為“##.##”時(shí)，也會(huì)將遇到的第一個(gè)不為#的字符替換為當(dāng)前的數(shù)值顯示，即顯示為“20.4.##”，因此不需要使用該通配符進(jìn)行格式化； 4、當(dāng)文本內(nèi)容中不含有#號(hào)，卻關(guān)聯(lián)了數(shù)值輸出類(lèi)型的動(dòng)畫(huà)連接時(shí)，則在文本后面顯示值輸出，例如：原文本內(nèi)容為“Text”，關(guān)聯(lián)動(dòng)畫(huà)后，顯示“Text20.4”； 3、管道： 管道是表示帶有外壁并內(nèi)部可以進(jìn)行流動(dòng)的特殊圖素。管道部分屬性如下： OOutterWidth：設(shè)置管道外壁的寬度，以像素為單位； OutterColor：設(shè)置管道外壁的顏色； InnerWidth：設(shè)置管道內(nèi)部的寬度，以像素為單位； InnerColor：設(shè)置管道內(nèi)部的顏色； 選擇基本作圖工具的管道，在畫(huà)面中按照要求畫(huà)一條管道，然后根據(jù)需要設(shè)置相關(guān)的寬度、顏色屬性，雙擊畫(huà)面上的管道，“添加連接—基本—管道流動(dòng)”，離散值輸入中選擇“\\local\water_pump”，如果“\\local\water_pump” 變量為1，管道流動(dòng)，如圖4-6。 圖4-6 管道流動(dòng) 4、按鈕 按鈕可以設(shè)置成普通的按鈕，也可以設(shè)置成多態(tài)按鈕，按鈕部分屬性如下： （1）FlatStyle：置按鈕外觀(guān)風(fēng)格； （2）Font：設(shè)置按鈕文本的字體； （3）Background：設(shè)置按鈕的背景顏色； （4）Foreground：設(shè)置按鈕的前景顏色，即文本的顏色； （5）Style：兩種選擇，常態(tài)和多態(tài)，當(dāng)按鈕處于常態(tài)時(shí)，使用Background屬性進(jìn)行按鈕背景的填充；當(dāng)選擇多態(tài)時(shí)，可使用以下屬性配置對(duì)按鈕進(jìn)行操作時(shí)相應(yīng)的按鈕背景顏色： PressedBackground：當(dāng)按鈕按下時(shí)，按鈕顯示的背景顏色 FocusedBackground：當(dāng)按鈕處于焦點(diǎn)時(shí)，按鈕顯示的背景顏色 DisabledBackground：當(dāng)“Enable”屬性設(shè)置為false時(shí)有效，即按鈕不可操作時(shí)，按鈕顯示的背景顏色 （6）Caption：設(shè)置按鈕上顯示的文本； （7）ShapeStyle：設(shè)置按鈕的形狀 我們制作一個(gè)按鈕，并且將此按鈕的控制功能與前面的管道結(jié)合起來(lái)使用，通過(guò)按鈕來(lái)控制管道是否流動(dòng)。 選擇擴(kuò)展工具的按鈕，然后在畫(huà)面上畫(huà)出一個(gè)按鈕，設(shè)置按鈕的顏色、文本、字體等等屬性，如圖4-7所示：我們?cè)O(shè)置按鈕的文本為“閥門(mén)控制”，設(shè)置正常色、按下時(shí)顏色、獲得焦點(diǎn)的顏色等等屬性。 圖4-7 按鈕屬性設(shè)置 設(shè)置按鈕的鼠標(biāo)左鍵按下的動(dòng)畫(huà)連接，如圖4-8，4-9所示，我們將管道的流動(dòng)動(dòng)畫(huà)與前面建立的變量valve_gate1結(jié)合起來(lái)，通過(guò)按鈕控制閥門(mén)1的開(kāi)通、閉合狀態(tài)，以及控制管道的流動(dòng)與停止。腳本程序如下： if(\\local\valve_gate1==false) { \\local\valve_gate1 =true; \\local\water_pump =true; } else { \\local\valve_gate1=false; \\local\water_pump =false; } 圖4-8 按鈕動(dòng)畫(huà)連接 圖4-9 按鈕腳本 保存畫(huà)面有進(jìn)行運(yùn)行系統(tǒng)，我們就可以通過(guò)點(diǎn)擊按鈕來(lái)控制管道的流動(dòng)啦。 其他作圖工具可以參考KingScada3.1的操作手冊(cè)。 第二節(jié) 制作精靈圖 所謂精靈圖就是在外觀(guān)上類(lèi)似于組合圖素，但內(nèi)嵌了豐富的動(dòng)畫(huà)連接和邏輯控制，工程人員只需把它從精靈圖庫(kù)中調(diào)出來(lái)放在畫(huà)面上，再做少量的修改，就能完成復(fù)雜的控制功能。 KingSCADA3.1的精靈圖庫(kù)中提供了大量工程中常用的精靈圖，用戶(hù)可以直接使用，如果精靈圖庫(kù)中沒(méi)有適合您的精靈圖，您也可以自己開(kāi)發(fā)精靈圖，然后將其放到圖庫(kù)中，以備日后使用。 我們下面就制作一個(gè)液位指示精靈圖在這個(gè)工程中使用，這個(gè)精靈圖即能夠顯示液位數(shù)值，也能夠動(dòng)態(tài)顯示液位的高低。 認(rèn)識(shí)精靈圖開(kāi)發(fā)界面 在KingSCADA3.1圖形編輯器中執(zhí)行“文件”菜單中的“新建—精靈圖”命令，彈出精靈圖開(kāi)發(fā)界面，如圖4-10所示： 圖4-10精靈圖開(kāi)發(fā)界面 精靈圖開(kāi)發(fā)界面與圖形開(kāi)發(fā)界面很相似，由菜單欄、工具欄、工具箱、圖形編輯區(qū)、屬性窗口等組成，操作方法也基本相似。 創(chuàng)建精靈圖 第一步：制作精靈圖外觀(guān)： 在圖4-10所示的圖形編輯區(qū)編輯我們要做的精靈圖形的外觀(guān)，我們先利用前面講的圓角矩形圖素以及直線(xiàn)圖素、文本圖素，畫(huà)出精靈圖的各個(gè)組成部分，各個(gè)部分的顏色需要通過(guò)調(diào)色板進(jìn)行設(shè)置，設(shè)置出我們需要的絢麗的顏色。如圖4-11所示：這個(gè)精靈圖的外觀(guān)有6部分組成，我們用字母A、B、C、D、E、F表示。然后將各個(gè)組成部分一起組合成我們需要的精靈圖形，如圖4-12所示：這樣精靈圖的外觀(guān)就做好了。在組合精靈圖的時(shí)候我們會(huì)用到圖素上下層的調(diào)整，可以選中圖素，點(diǎn)擊右鍵，通過(guò)右鍵菜單“位置”來(lái)調(diào)整，如圖4-13所示。 圖4-11 精靈圖的組成部分 圖4-12 精靈圖的外觀(guān) 圖4-13 右鍵菜單 第二步：建立精靈圖的屬性、變量： 我們要考慮好精靈圖在使用中需要暴露出那些屬性需要在使用中進(jìn)行修改以及精靈圖具備那些功能。在我們這個(gè)精靈圖中我們可以考慮暴露到外面的屬性包括：整體的背景顏色、需要?jiǎng)討B(tài)顯示的液位的顏色、液位高度的最大值、最小值。需要關(guān)聯(lián)液位高度的變量。 屬性定義：?jiǎn)螕粲覀?cè)“內(nèi)容”選項(xiàng)卡，選中“屬性”點(diǎn)擊右鍵在彈出的右鍵菜單中執(zhí)行“添加屬性”命令，彈出圖4-14所示屬性定義對(duì)話(huà)框，我們先定義背景顏色，屬性名稱(chēng)：BackColor，屬性類(lèi)型：Brush。點(diǎn)擊“默認(rèn)”后面的彈出調(diào)色板，通過(guò)調(diào)色板設(shè)置默認(rèn)的畫(huà)刷類(lèi)型與圖4-11我們?cè)O(shè)置的畫(huà)刷類(lèi)型一致。 圖4-14 屬性定義 按照這種方式我們?cè)俣x液位顏色：fluidcolor，類(lèi)型：Brush。 液位高度最大值：Max，最小值Min，類(lèi)型：float。 如圖4-15所示，四個(gè)參數(shù)定義完成。 圖4-15 參數(shù)定義 變量定義：在這里建立的變量是局部變量，只能應(yīng)用在精靈圖中，不能用在工程的其它地方。參數(shù)定義完成后我們定義關(guān)聯(lián)液位高度的變量。如圖4-16所示：選中“變量”，點(diǎn)擊右鍵增加變量， 彈出圖4-17所示的變量定義對(duì)話(huà)框。 圖4-16 增加變量 圖4-17 變量定義 變量名稱(chēng)為：fluidValue，變量類(lèi)型：float，初始值：0。 精靈圖的屬性、變量定義完成。下面我們定義精靈圖的動(dòng)畫(huà)關(guān)聯(lián)。 第三步：建立精靈圖的動(dòng)畫(huà)關(guān)聯(lián)： 精靈圖的動(dòng)畫(huà)關(guān)聯(lián)主要是將我們前面定義的屬性、變量與精靈圖的具體圖素關(guān)聯(lián)起來(lái)。 首先我們關(guān)聯(lián)液位指示精靈圖的面板（圖素A）的背景顏色，選中作為背景的圓角矩形，設(shè)置Brush屬性，點(diǎn)擊Brush屬性后面的按鈕，彈出如圖4-18所示對(duì)話(huà)框，選擇我們前面定義的BackColor屬性，點(diǎn)擊“確定”完成此屬性的關(guān)聯(lián)。 圖4-18 Brush屬性設(shè)置 同樣的方法，我們?cè)O(shè)置液位（圖素D）的顏色屬性，選中作為液位的圓角矩形，設(shè)置Brush屬性，點(diǎn)擊Brush屬性后面的按鈕，彈出如圖4-18所示對(duì)話(huà)框，選擇我們前面定義的fluidColor屬性，點(diǎn)擊“確認(rèn)”完成此屬性的關(guān)聯(lián)。 其次再設(shè)置液位（圖素D）的縮放的動(dòng)畫(huà)連接，選中作為液位的圓角矩形，選擇“連接”，點(diǎn)擊“增加連接”增加動(dòng)畫(huà)連接，如圖4-19所示，選擇縮放的動(dòng)畫(huà)連接。彈出如圖4-20所示的對(duì)話(huà)框。然后進(jìn)行相關(guān)設(shè)置： 圖 4-19 動(dòng)畫(huà)連接 選擇關(guān)聯(lián)的變量：fluidValue，此處只能夠選擇定義的精靈圖的內(nèi)部變量。 選擇縮放比例為：線(xiàn)性縮放。選擇縮放的參考點(diǎn)：下。 圖 4-20 動(dòng)畫(huà)連接 設(shè)置最小時(shí)對(duì)應(yīng)的數(shù)值：點(diǎn)擊彈出如圖4-18所示的對(duì)話(huà)框，選擇屬性Min，然后確定。 設(shè)置最大時(shí)對(duì)應(yīng)的數(shù)值：點(diǎn)擊彈出如圖4-18所示的對(duì)話(huà)框，選擇屬性Max，然后確定。 設(shè)置完成后如圖4-21所示。點(diǎn)擊確定完成設(shè)置。 圖4-21 縮放動(dòng)畫(huà)連接定義 第四步：保存精靈圖： 至此所有的動(dòng)畫(huà)連接完成了，精靈圖的開(kāi)發(fā)也就完成了。單擊“文件”菜單中的“保存”命令，彈出精靈圖庫(kù)對(duì)話(huà)框如圖4-22所示：我們選中最上面的“Genius Graphy Folders”，點(diǎn)擊右鍵彈出菜單，選擇創(chuàng)建一個(gè)新的文件夾，給文件夾命名，例如：my genius。然后給這個(gè)精靈圖命名，例如：genius1。這樣一個(gè)精靈圖就完成了。保存之后再打開(kāi)，如圖4-23 精靈圖的制作不僅僅是用基本作圖工具來(lái)繪制，我們也可以利用現(xiàn)有的精靈圖通過(guò)修改來(lái)生成新的精靈圖。 我們?cè)诤竺娴墓こ坍?huà)面的制作中也會(huì)用到此精靈圖的。 圖4-22 保存精靈圖1 圖4-23 保存精靈圖2 第三節(jié) 制作圖形模型 圖形模型：模擬現(xiàn)實(shí)中的生產(chǎn)設(shè)備，如鍋爐、電機(jī)設(shè)備的圖形展示、動(dòng)畫(huà)連接、安全設(shè)置、腳本語(yǔ)言等，把這些功能組合在一起形成圖形模型，用戶(hù)在使用時(shí)只需要將模型實(shí)例化，即對(duì)圖形模型進(jìn)行一系列配置，可以快速把圖形展示及動(dòng)態(tài)效果部署到工程中。 圖形模型相對(duì)于圖庫(kù)精靈的優(yōu)勢(shì)在于不僅僅具有動(dòng)畫(huà)連接，還可以編寫(xiě)腳本程序，同時(shí)當(dāng)模型重新編輯后，會(huì)把產(chǎn)生變化的內(nèi)容更新到已經(jīng)實(shí)例化的模型對(duì)象中。 我們將前面做的精靈圖與罐結(jié)合起來(lái)制作一個(gè)圖形模型來(lái)在本培訓(xùn)工程中使用。制作過(guò)程如下： 第一步：制作圖形模型的外觀(guān)： 在KingSCADA3.1開(kāi)發(fā)環(huán)境的目錄中選擇“視圖”→“圖形模型”選項(xiàng)，在右側(cè)編輯區(qū)中單擊“新建”按鈕，彈出對(duì)話(huà)框，如圖4-24所示： 圖4-24創(chuàng)建圖形模型對(duì)話(huà)框 在圖4-24中輸入圖形模型的名稱(chēng)如：罐，并根據(jù)需要設(shè)置該模型的其他選項(xiàng)，如：模型描述、創(chuàng)建者、等。 設(shè)置完畢后，單擊“確認(rèn)”按鈕，該模型出現(xiàn)在開(kāi)發(fā)環(huán)境的右側(cè)編輯區(qū)中，如圖4-25所示： 圖4-25編輯區(qū)中的圖形模型 在圖4-25中選中模型圖標(biāo)，雙擊圖形模型圖標(biāo)，彈出對(duì)話(huà)框，如圖4-26所示： 圖4-26圖形模型開(kāi)發(fā)界面 圖形模型開(kāi)發(fā)界面與圖形編輯器界面具有相同的布局，由菜單欄、工具欄、圖形編輯區(qū)、屬性窗口和連接窗口等構(gòu)成。 我們利用基本作圖工具橢圓、矩形框來(lái)制作罐體的外觀(guān)，罐體（橢圓、矩形框）使用過(guò)渡色來(lái)體現(xiàn)金屬質(zhì)感，以增加罐體的美觀(guān)程度。過(guò)渡色的設(shè)置可以通過(guò)Brush屬性來(lái)設(shè)置。我們?cè)诠摅w上添加一個(gè)可以顯示液位高度的圖素，利用圓角矩形和文本來(lái)實(shí)現(xiàn)。圓角矩形通過(guò)設(shè)置Pen，Brush來(lái)設(shè)置提高圖素美觀(guān)程度。文本T可以修改文本的顏色、字體。 如圖4-27所示：為了以后在說(shuō)明時(shí)簡(jiǎn)單一些，我們將罐體設(shè)為A圖素，圓角矩形設(shè)為B圖素，文本設(shè)置C圖素。 圖4-27 圖素制作 罐體設(shè)置完成后我們將精靈庫(kù)中前面已經(jīng)做好的精靈圖取出來(lái)放置在罐體上面。點(diǎn)擊工具欄圖標(biāo)彈出精靈圖庫(kù)對(duì)話(huà)框，選擇我們前面定義的精靈圖文件夾“my genius”，如圖4-28所示，選擇右側(cè)區(qū)域的液位指示的精靈圖，雙擊此精靈圖，然后放置在圖形編輯區(qū)域。精靈圖我們就叫圖素D。 然后我們將精靈圖與前面畫(huà)的各種圖素組合起來(lái)就制作完了了一個(gè)罐的圖形模型的外觀(guān)了。如圖4-29所示的罐的圖形外觀(guān)。在組合圖素的時(shí)候我們會(huì)用到圖素上下層的調(diào)整，可以選中圖素，點(diǎn)擊右鍵，通過(guò)右鍵菜單“位置”來(lái)調(diào)整，如圖4-13所示。 圖4-28 精靈圖庫(kù) 圖4-29 圖形模型外觀(guān) 第二步：建立圖形模型的屬性、變量： 制作屬性、變量的方法與前面制作圖庫(kù)精靈的方法相似，具體操作可以參考前面講解精靈圖的屬性、變量定義部分。 定義的圖形模型的屬性為：罐體顏色（圖素A的顏色）、面板顏色（精靈圖D背景色）、液位指示顏色（精靈圖D液位指示顏色）、文本框顏色（圖素B的背景色）、字體大小（圖素C的字體）、Max、Min（對(duì)應(yīng)精靈圖D的Max、Min屬性，也就是液位的最大值、最小值），其中顏色類(lèi)型選擇Brush，字體類(lèi)型選擇Font，Max、Min選擇float類(lèi)型。如圖4-30所示： 圖4-30 圖形模型屬性設(shè)置 定義圖形模型的變量為：液位高度。此變量主要是與液位指示的精靈的變量進(jìn)行關(guān)聯(lián)顯示液位，以及與文本（圖素C）進(jìn)行模擬值輸出的關(guān)聯(lián)。 第三步：建立圖形模型的動(dòng)畫(huà)連接： 圖形模型的動(dòng)畫(huà)連接與前面講解的精靈圖的動(dòng)畫(huà)連接相似，主要是將我們前面定義的屬性、變量與圖形模型的具體圖素關(guān)聯(lián)起來(lái)。 建立圖形與屬性的關(guān)聯(lián)： 首先我們將罐體（圖素A）的顏色與“罐體顏色”屬性關(guān)聯(lián)起來(lái)，選中作為罐體的圓角矩形，在右側(cè)的屬性欄中設(shè)置Brush屬性，點(diǎn)擊Brush屬性后面的按鈕，彈出如圖4-31所示對(duì)話(huà)框，選擇我們前面定義的“罐體顏色”屬性，點(diǎn)擊OK完成此屬性的關(guān)聯(lián)。同樣的方式選擇作為罐體一部分的橢圓，進(jìn)行Brush屬性的設(shè)置。 圖素B的顏色設(shè)置，選中圓角矩形然后設(shè)置右側(cè)屬性的Brush屬性，點(diǎn)擊Brush屬性后面的按鈕彈出如圖4-30所示對(duì)話(huà)框，關(guān)聯(lián)圖形模型的“文本框顏色”屬性。 文本圖素C選擇“##”，然后設(shè)置右側(cè)屬性的TextFont屬性，點(diǎn)擊TextFont屬性后面的按鈕彈出如圖4-30所示對(duì)話(huà)框，關(guān)聯(lián)到圖形模型的“字體大小”屬性。 圖4-30 選擇屬性 設(shè)置精靈圖D的屬性，選中精靈圖，右側(cè)精靈圖的屬性如圖4-31所示，首先設(shè)置“BackColor”屬性，點(diǎn)擊BackColor屬性后面的按鈕彈彈出如圖4-30所示對(duì)話(huà)框，關(guān)聯(lián)圖形模型的“面板顏色”屬性。同樣的方式設(shè)置“fluidcolor”屬性，關(guān)聯(lián)圖形模型的“液位指示顏色”屬性。設(shè)置“Max”屬性，關(guān)聯(lián)圖形模型的“Max”屬性。設(shè)置“Min”屬性，關(guān)聯(lián)圖形模型的“Min”屬性。屬性設(shè)置完成后，圖形模型的屬性變?yōu)槿鐖D4-32所示。 4-31 精靈圖屬性 圖4-32 精靈圖屬性 建立圖形與變量的關(guān)聯(lián)： 屬性設(shè)置完成后我們?cè)龠M(jìn)行變量的設(shè)置。變量的設(shè)置主要有兩個(gè)地方需要設(shè)置，一個(gè)是文本（圖素C）的模擬量輸出，一個(gè)是精靈圖（圖素D）的液位高度。實(shí)際上兩者關(guān)聯(lián)的是同一個(gè)變量，即“液位高度”變量。 選中文本“##”，然后雙擊彈出如圖4-33所示對(duì)話(huà)框，點(diǎn)擊“添加連接”，彈出下拉菜單，如圖4-34所示，選擇“值輸出－模擬值輸出”，彈出關(guān)聯(lián)變量對(duì)話(huà)框，選擇，彈出選擇變量對(duì)話(huà)框，然后我們選擇變量“液位高度”，設(shè)置顯示的整數(shù)位數(shù)、小數(shù)位數(shù)分別為2位，點(diǎn)擊確定完成此動(dòng)畫(huà)連接的設(shè)置。 圖4-33 動(dòng)畫(huà)連接 精靈圖變量的關(guān)聯(lián)比較簡(jiǎn)單，選中精靈圖，選擇右側(cè)的“連接”，顯示如圖4-35所示圖形，點(diǎn)擊彈出變量選擇對(duì)話(huà)框，如圖4-36所示，此處即可以選擇圖形模型的變量，也可以選擇系統(tǒng)變量。我們點(diǎn)擊左側(cè)的“This”，在右側(cè)即可顯示我們前面定義的圖形模型的變量“液位高度”，選擇此變量，點(diǎn)擊“OK”即可完成精靈圖變量的關(guān)聯(lián)。 圖4-34 下拉菜單 圖4-35 連接 圖4-36 選擇變量 這樣我們圖形模型變量的關(guān)聯(lián)就完成了。 建立圖形模型的腳本程序： 我們前面講精靈圖的時(shí)候可以知道精靈圖是包含動(dòng)畫(huà)連接的，而圖形模型不僅僅包含動(dòng)畫(huà)連接，還有腳本程序。那么下面我們就舉例說(shuō)明圖形模型腳本程序的使用方法。 我們假定在通過(guò)文本“##”顯示液位高度的時(shí)候讓此文本根據(jù)不同的數(shù)值顯示不同的顏色，例如當(dāng)液位高度超過(guò)90％或者低于10％時(shí)用報(bào)警色（例如紅色）顯示，在10％－90％之間時(shí)用正常色（例如綠色）顯示，我們就可以使用圖形模型的腳本程序了。 圖形模型腳本主要有三種，分別為“打開(kāi)時(shí)”、“存在時(shí)”、“關(guān)閉時(shí)”三種。 我們要設(shè)置文本的顏色，需要先設(shè)置文本顏色的屬性，屬性的設(shè)置與前面講過(guò)的操作方式相同。參考如圖4-37所示：我們?cè)黾訉傩詤?shù)“報(bào)警色”、“正常色”，他們的類(lèi)型都是“Brush”類(lèi)型。默認(rèn)的顏色通過(guò)調(diào)色板進(jìn)行設(shè)置。 圖4-37 定義參數(shù) 參數(shù)設(shè)置完成后我們進(jìn)行腳本程序的編寫(xiě)：注意不要選擇任何圖素，然后在右側(cè)的“連接”，通過(guò)點(diǎn)擊“添加連接—基本”彈出如圖4-38所示，我們先編輯“打開(kāi)時(shí)”腳本。如圖4-39所示：腳本程序如下： float HAlarm; float LAlarm; HAlarm=Max*0.9; LAlarm=Max*0.1; if(液位高度HAlarm) Text1.TextBrush=報(bào)警色; else Text1.TextBrush=正常色; 同樣的方式增加“存在時(shí)”腳本，腳本程序與“打開(kāi)時(shí)”相同，默認(rèn)的執(zhí)行周期為3000毫秒，我們修改為1000毫秒。如圖4-40所示： 圖4-38 增加腳本 圖4-39 打開(kāi)時(shí)腳本 圖4-40 存在時(shí)腳本 我們這里用不到“關(guān)閉時(shí)”，所以就不進(jìn)行“關(guān)閉時(shí)”腳本的設(shè)置啦。 這樣圖形模型的腳本程序就完成了。 第四節(jié) 制作現(xiàn)場(chǎng)流程圖 我們利用前面講的基本圖素、亞控公司提供的精靈圖和我們前面制作的圖形模型來(lái)制作現(xiàn)場(chǎng)的流程畫(huà)面。 新建畫(huà)面 在KingSCADA3.1圖形編輯器點(diǎn)擊“文件”菜單的“新建畫(huà)面”命令，彈出對(duì)話(huà)框，如圖4-41所示： 圖4-41新建畫(huà)面對(duì)話(huà)框 對(duì)話(huà)框設(shè)置如下： 名稱(chēng)：監(jiān)控畫(huà)面 畫(huà)面位置：左邊：0 頂端：0 顯示寬度：1024 顯示高度：700 畫(huà)面寬度：1024 畫(huà)面高度：700 畫(huà)面類(lèi)型：覆蓋式 其他選項(xiàng)可根據(jù)需要設(shè)置。 設(shè)置完畢后單擊“確認(rèn)”按鈕，該畫(huà)面被建立在圖形編輯器中，我們還可以通過(guò)畫(huà)面的屬性進(jìn)行相關(guān)的設(shè)置，例如選擇Backgroud屬性，單擊“”按鈕，在彈出的畫(huà)面背景顏色對(duì)話(huà)框中可以設(shè)置背景顏色的漸變效果等。 除了畫(huà)面屬性對(duì)話(huà)框外，凡是在畫(huà)面中添加的任何圖素或控件，在對(duì)其進(jìn)行編輯時(shí)，都會(huì)有相應(yīng)的屬性對(duì)話(huà)框，如：按鈕屬性對(duì)話(huà)框、報(bào)警控件屬性對(duì)話(huà)框、趨勢(shì)曲線(xiàn)控件屬性對(duì)話(huà)框等等，某些屬性不僅可以在開(kāi)發(fā)時(shí)進(jìn)行修改，在運(yùn)行環(huán)境中也可以動(dòng)態(tài)修改。 制作現(xiàn)場(chǎng)畫(huà)面： 第一步：在圖形編輯器中單擊“對(duì)象”菜單中的“圖形模型”命令，彈出圖形模型選擇對(duì)話(huà)框，選擇我們前面建立的罐的圖形模型，并將其添加到畫(huà)面中，我們添加兩個(gè)圖形模型的罐，效果如圖4-42所示： 圖4-42 流程畫(huà)面 第二步：在圖形編輯器中單擊“對(duì)象”菜單中的“精靈圖”命令，在精靈庫(kù)中選則具有攪拌器的反應(yīng)罐“custom－test”，并將其添加到畫(huà)面中，效果如圖4-42所示：此反應(yīng)罐可以通過(guò)控制電機(jī)來(lái)控制罐內(nèi)攪拌器的攪拌運(yùn)行，同時(shí)開(kāi)可以通過(guò)儀表的表頭顯示一個(gè)模擬量數(shù)值，當(dāng)在運(yùn)行狀態(tài)下鼠標(biāo)移動(dòng)到表頭位置時(shí)表頭會(huì)自動(dòng)放大顯示。 同樣的方式我們從精靈圖中將泵、閥門(mén)添加到畫(huà)面中。效果圖如圖4-43所示： 第三步：進(jìn)行管道的連接，利用基本畫(huà)圖工具中的管道，將各個(gè)泵、閥門(mén)、罐、攪拌器等連接起來(lái)。 第四步：進(jìn)行文字標(biāo)注，利用基本畫(huà)圖工具中的文本T，對(duì)系統(tǒng)的各個(gè)圖素進(jìn)行命名。 完成的系統(tǒng)流程畫(huà)面如圖4-43所示： 圖4-43 流程畫(huà)面 這樣我們就把一個(gè)基本的流程圖畫(huà)完了，如果為了畫(huà)面美觀(guān)，我們也可以做一些進(jìn)一步的細(xì)致的美化工作，例如我們從精靈圖中將墻壁的背景放到畫(huà)面上，再利用基本圖素的多邊形做地板，可以設(shè)置多邊形Brush屬性的“Texture”。 基本的流程圖畫(huà)面完成后，我們就可以根據(jù)工程要求的功能對(duì)圖素進(jìn)行屬性設(shè)置以及動(dòng)畫(huà)連接了。 對(duì)圖素進(jìn)行設(shè)置： 我們根據(jù)工程的功能要求對(duì)畫(huà)面上的圖素進(jìn)行相關(guān)設(shè)置： 首先設(shè)置原料罐，選擇原料罐的圖形模型對(duì)象，修改右側(cè)的屬性對(duì)話(huà)框，如圖4-44所示，前面我們制作圖形模型時(shí)設(shè)置的屬性在圖4-45中可以顯示出來(lái)，我們通過(guò)點(diǎn)擊進(jìn)行設(shè)置即可。 圖4-44 屬性設(shè)置 催化劑罐的屬性設(shè)置與原料罐相似。 我們?cè)O(shè)置原料罐動(dòng)畫(huà)連接，選中原料罐圖素，點(diǎn)擊右側(cè)的“連接”對(duì)話(huà)框，顯示如圖4-45所示，點(diǎn)擊，彈出現(xiàn)在變量對(duì)話(huà)框，如圖4-46所示，選擇前面定義的數(shù)據(jù)模型變量：\\local\activator.liquid_level，將此變量與圖形模型對(duì)象的“液位高度”關(guān)聯(lián)起來(lái)即可。 同樣的方式設(shè)置催化劑罐的“液位高度”關(guān)聯(lián)的變量：\\local\液位。 圖 4-45 連接對(duì)話(huà)框 圖4-46 選擇變量 設(shè)置管道的屬性，為了區(qū)分不同的物質(zhì)在不同管道中的顏色，我們可以將管道設(shè)置為三種不同的流動(dòng)顏色，通過(guò)修改管道的“Innercolor”屬性來(lái)設(shè)置流動(dòng)的顏色。如圖4-47所示，這是運(yùn)行環(huán)境下面顯示的管道流動(dòng)顏色。啟動(dòng)或者停止管道的流動(dòng)是通過(guò)控制管道的“連接—基本—管道流動(dòng)”屬性來(lái)實(shí)現(xiàn)的。至于如何控制管道根據(jù)根據(jù)水泵、閥門(mén)狀態(tài)來(lái)流動(dòng)我們?cè)谙旅嬲鹿?jié)中會(huì)介紹的。 圖4-47 管道流動(dòng) 至此，一個(gè)完整的流程畫(huà)面就建立起來(lái)了，它是個(gè)靜態(tài)的畫(huà)面，在下面一章中我們將介紹如何讓圖素動(dòng)起來(lái)。 課后練習(xí)： 1、 熟悉一下Windows UI中各中圖素的使用方法。 2、 屬性一下精靈圖的制作方法。