組態(tài)軟件操作指引繪制現(xiàn)場(chǎng)畫面

1、-35 -第四章 繪制現(xiàn)場(chǎng)畫面第四章 繪制現(xiàn)場(chǎng)畫面本章內(nèi)容I認(rèn)識(shí)畫面編輯器 制作精靈圖 制作圖形模型 制作現(xiàn)場(chǎng)畫面第一節(jié)認(rèn)識(shí)畫面編輯器在本章我們將利用 KingSCADA強(qiáng)大的繪圖工具來(lái)制作現(xiàn)場(chǎng)的流程畫面，畫面的組成包括管道、閥門、水泵、反應(yīng)釜、儲(chǔ)藏罐等等。在制作過程中我們還會(huì)用到圖庫(kù)精靈、圖形模型等功能。KingSCADA圖形編輯器中即繪制現(xiàn)場(chǎng)的畫面，包括監(jiān)控畫面、趨勢(shì)畫面、報(bào)警畫面、現(xiàn)場(chǎng)流程圖等，還可以為畫面中的圖素設(shè)置連接動(dòng)畫，編寫按鈕的控制程序等等。圖形編輯器為您提供了強(qiáng)大的繪圖工具，不僅提供了基本繪圖工具、擴(kuò)展繪圖工具、UI繪圖工具和通用控件，還提供了精靈圖庫(kù)，大大提高了工程開發(fā)的效

2、率。在KingSCADA工程設(shè)計(jì)器中，單擊“編輯”菜單中的“圖形系統(tǒng)”命令，即可彈出畫面編輯器，如 圖4-1所示：minssw3面3q a a qO Q sV|O ,陽(yáng)L:盅L E3 eb 口日面 M造回口國(guó)出了意 序1k而F 口口危通用槐件工L 巴回文件口 羯我 瑞圈 sifter 抵制如 而口心 泰助如:A 一口 I 4二 N固固I 團(tuán).r?劉妣甌也 M.0 Id時(shí)熱已蹄 一 *于菽9 Hi st自寫 B.dGGund I I 盹笆 Iirfilthiili ty trueH fi .Ana1 t皿 * cvTkll04rEtlst 口8幫叱EtlkSiEHahlaEbIeiAgEoV*心

3、VindwSlyl*OvitrliyEb日律5子mfl wit日 TLiidrLbAl3 AB. d DHI ind4SzLSO,I睫4 riclurtSaitLS8O,l(E4DptnKlvayxE0ie*HLdQrDwdh 4I01回 TornklCwaml圖4-1畫面編輯器北京亞控科技發(fā)展有限公司-36 -第四章 繪制現(xiàn)場(chǎng)畫面畫面編輯器包括：菜單欄、工具欄、工具箱、編輯界面、動(dòng)畫連接窗口、內(nèi)容窗口、對(duì)象瀏覽窗口、 屬性配置窗口。在畫面編輯器中開發(fā)畫面時(shí)，可以隨時(shí)切換到運(yùn)行環(huán)境，測(cè)試畫面效果，提高生產(chǎn)率和縮短開發(fā)周期。圖形系統(tǒng)的繪圖工具：圖形系統(tǒng)的繪圖工具有三部分組成：基本、擴(kuò)展、UI控件

4、和通用控件。每種圖素都包含一系列的對(duì)象屬性，屬性窗口中包括圖素的名稱、大小、位置等外觀通用屬性，用戶 可以對(duì)這些屬性進(jìn)行修改。同時(shí)每種圖素還有自己的獨(dú)特的屬性。詳細(xì)的圖素屬性說明請(qǐng)參考 KingSCADA操作手冊(cè)，下面簡(jiǎn)單介紹幾種圖素的制作。在KingSCADA圖形編輯器中執(zhí)行“文件”菜單中的“新建畫面”命令，彈出如圖4-2所示。輸入畫面名稱，例如“監(jiān)控畫面”，設(shè)置畫面大小，然后點(diǎn)擊“確定”，如圖4-2所示：圖4-2新建畫面北京亞控科技發(fā)展有限公司-37 -第四章 繪制現(xiàn)場(chǎng)畫面.圓角矩形框選擇基本圖形工具的圓角矩形框，然后將圖素放置在畫面上。圓角矩形的屬性如圖4-3所示：我們主要用到的屬性為：

5、Pen:矩形邊框?qū)傩?；Brush ：矩形畫刷屬性；DrawOption :矩形框顯示屬性；現(xiàn)在我們先設(shè)置 Pen屬性，點(diǎn)擊 以彈出設(shè)置線屬性對(duì)話框，如圖 4-3、4-4、4-5,所示，我們選擇線 的寬度為3,其他不變。然后我們?cè)O(shè)置Brush屬性，點(diǎn)擊 且彈出設(shè)置畫刷對(duì)話框，選擇“線性”如圖4-5所示，設(shè)置畫刷的屬性。DrawOption屬性可以設(shè)置顯示的方式，其他屬性的設(shè)置請(qǐng)參考操作手冊(cè)。屬性d X1*-3.外Bi scNameRoundRectlfalsaCommentBounds0111口 348 00Location73.0, T9.0ETr ansf OTBiatioiiRotatio

6、n0.00Sheari宜莒0.00國(guó)Rei at i v&C ent er0.0/ 0,00Kb s olut&C eitt er128,5, 253.0日StylePen三實(shí)線，1Brush匚二1純色Dr wOpt i onBrawEdgeAn IF ill日D a0R中皿必i ce0.5HarizontalFillF.100. 00Verti caUillPen100 00Hori zontd.Fi 1101Le EtTRightVerticalFillOri，BtittomToTcpPercantFillMadeNonePerctntFillSrusl他色臼EditEditLockfal

7、setrg日Secvxi tySecuri tyPri or it：1Stcur i tySfictirflnNene,UIVisiUetrueEnabletru4Tabindex0HotKey(KoneDEn本bL電TooltipfalseTacltipText圖4-3圓角矩形屬性圖4-4線屬性設(shè)置圖4-5 畫刷屬性設(shè)置北京亞控科技發(fā)展有限公司-38 -第四章 繪制現(xiàn)場(chǎng)畫面.文本文本用來(lái)顯示一個(gè)文本字符串， 只能進(jìn)行單行顯示，該文本的大小隨圖素的尺寸而變化， 非常適用于 值輸出的顯示；對(duì)于多行文本的顯示， 建議使用 Windows控件中的文本框或超級(jí)文本， 文本框部分屬性如 下：Text:顯

8、示的文本內(nèi)容；TextFont:顯示的文本的字體；TextBrush ：顯示的文本的顏色畫刷；選擇基本圖形工具的文本 T,然后將圖素放置在畫面上。可以通過屬性設(shè)置文本的內(nèi)容、文本字體、 文本顏色等等屬性。我們將文本“ Text”修改為“ #，然后使用動(dòng)畫連接“添加連接”選擇模擬值輸出，如圖 4-6, 4-7 所示使用模擬值輸出動(dòng)畫連接，連接變量“ localliquid_level ”。圖4-6 動(dòng)畫連接北京亞控科技發(fā)展有限公司-39 -第四章 繪制現(xiàn)場(chǎng)畫面圖4-7模擬值輸出需要注意的是：當(dāng)文本對(duì)象在開發(fā)狀態(tài)下，輸入帶有“#的字符，即為數(shù)值類型的通配符，即當(dāng)該字符串進(jìn)行數(shù)值類型輸出動(dòng)畫連接時(shí)，

9、將文本中第一次遇到的#顯示得到的數(shù)值，按照動(dòng)畫連接中設(shè)定的數(shù)值格式顯示，例如：1）當(dāng)文本內(nèi)容為“ #米”時(shí)，而值輸出動(dòng)畫連接要顯示的數(shù)據(jù)為20.4,則運(yùn)行時(shí)，該文本顯示“ 20.4米”；2）當(dāng)文本內(nèi)容為“此時(shí)液位高度為#米”時(shí)，而值輸出動(dòng)畫連接要顯示的數(shù)據(jù)為20.4,則運(yùn)行時(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ù)值輸出類型的動(dòng)畫連接時(shí)，則在文本后面顯示值

10、輸出，例如：原文本內(nèi)容為“ Text”，關(guān)聯(lián)動(dòng)畫后，顯示“ Text20.4”；.管道管道是表示帶有外壁并內(nèi)部可以進(jìn)行流動(dòng)的特殊圖素。管道部分屬性如下：OutterWidth :設(shè)置管道外壁的寬度，以像素為單位；OutterColor ：設(shè)置管道外壁的顏色；InnerWidth :設(shè)置管道內(nèi)部的寬度，以像素為單位；北京亞控科技發(fā)展有限公司-40 -第四章 繪制現(xiàn)場(chǎng)畫面InnerColor ：設(shè)置管道內(nèi)部的顏色；選擇基本作圖工具的管道，在畫面中按照要求畫一條管道，然后根據(jù)需要設(shè)置相關(guān)的寬度、顏色屬性,雙擊畫面上的管道，添加連接一基本一管道流動(dòng)”，離散值輸入中選擇“ localwater_pump

11、 ,如果“l(fā)ocalwater_pump ” 變量為1,管道流動(dòng)，如圖 4-8。n圖4-8管道流動(dòng).按鈕按鈕可以設(shè)置成普通的按鈕，也可以設(shè)置成多態(tài)按鈕，按鈕部分屬性如下：FlatStyle :置按鈕外觀風(fēng)格；Font:設(shè)置按鈕文本的字體；Background :設(shè)置按鈕的背景顏色；Foreground :設(shè)置按鈕的前景顏色，即文本的顏色；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í)，按鈕顯示的背景顏色F Focuse

12、dBackground :當(dāng)按鈕處于焦點(diǎn)時(shí)，按鈕顯示的背景顏色D DisabledBackground :當(dāng)Enable”屬性設(shè)置為false時(shí)有效，即按鈕不可操作時(shí)，按鈕顯示的背 景顏色Caption :設(shè)置按鈕上顯示的文本；ShapeStyle：設(shè)置按鈕的形狀我們制作一個(gè)按鈕，并且將此按鈕的控制功能與前面的管道結(jié)合起來(lái)使用，通過按鈕來(lái)控制管道是否流動(dòng)。北京亞控科技發(fā)展有限公司-41 -第四章 繪制現(xiàn)場(chǎng)畫面選擇擴(kuò)展工具的按鈕，然后在畫面上畫出一個(gè)按鈕，設(shè)置按鈕的顏色、文本、字體等等屬性，如圖4-9所示：我們?cè)O(shè)置按鈕的文本為“閥門控制”，設(shè)置正常色、按下時(shí)顏色、獲得焦點(diǎn)的顏色等等屬性。Butt

13、on!Member AccessfalseCommentSiz134.0, 48。田L(fēng)ocation294 0, 60.0on0 00Shearing0.00田Rei at i veC ent er0 0, 0.0國(guó)Ab s oluteC enter361 0, 84.0FlatStylfeStandardFantAriU 12.0Eackground匚二1批色F are ground我色Fr e w m e a士kgr 0311蛙色FogsedSackgroiu 1 英色EissibledB&ckgrai匚1%色Capti onButtonEditLockfalseEditVisibletr

14、ueSecur i tyFri ori tj1Securi tySecti onHane;圖4-9按鈕屬性設(shè)置設(shè)置按鈕的鼠標(biāo)左鍵按下的動(dòng)畫連接，如圖4-10, 4-11所示，我們將管道的流動(dòng)動(dòng)畫與前面建立的變量valve_gate1結(jié)合起來(lái)，通過按鈕控制閥門 1的開通、閉合狀態(tài)，以及控制管道的流動(dòng)與停止。腳本程 序如下：if(localvalve_gate1=false) localvalve_gate1 =true;localwater_pump =true;else localvalve_gate1=false;localwater_pump =false;北京亞控科技發(fā)展有限公司第四章

15、繪制現(xiàn)場(chǎng)畫面-42 -圖4-10按鈕動(dòng)畫連接圖4-11 按鈕腳本保存畫面有進(jìn)行運(yùn)行系統(tǒng)，我們就可以通過點(diǎn)擊按鈕來(lái)控制管道的流動(dòng)啦。其他作圖工具可以參考 KingSCADA的操作手冊(cè)。北京亞控科技發(fā)展有限公司-43 -第四章 繪制現(xiàn)場(chǎng)畫面第二節(jié)制作精靈圖所謂精靈圖就是在外觀上類似于組合圖素，但內(nèi)嵌了豐富的動(dòng)畫連接和邏輯控制，工程人員只需把它從精靈圖庫(kù)中調(diào)出來(lái)放在畫面上，再做少量的修改，就能完成復(fù)雜的控制功能。KingSCADA 的精靈圖庫(kù)中提供了大量工程中常用的精靈圖，用戶可以直接使用，也可以進(jìn)行編輯， 如果精靈圖庫(kù)中沒有適合您的精靈圖，您也可以自己開發(fā)精靈圖，然后將其放到圖庫(kù)中，以備日后使用。

16、我們下面就制作一個(gè)液位指示精靈圖在這個(gè)工程中使用，這個(gè)精靈圖即能夠顯示液位數(shù)值，也能夠動(dòng)態(tài)顯示液位的高低。認(rèn)識(shí)精靈圖開發(fā)界面在KingSCADA圖形編輯器中執(zhí)行“文件”菜單中的“新建一精靈圖”（如果是打開-精靈圖，即可選擇編輯已存在的精靈圖）命令，彈出精靈圖開發(fā)界面，如圖 4-12所示：圖4-12精靈圖開發(fā)界面精靈圖開發(fā)界面與圖形開發(fā)界面很相似，由菜單欄、工具欄、工具箱、圖形編輯區(qū)、屬性窗口等組成, 操作方法也基本相似。創(chuàng)建精靈圖第一步：制作精靈圖外觀在圖4-12所示的圖形編輯區(qū)編輯我們要做的精靈圖形的外觀，我們先利用前面講的圓角矩形圖素以及直線圖素、文本圖素，畫出精靈圖的各個(gè)組成部分，各個(gè)部

17、分的顏色需要通過調(diào)色板進(jìn)行設(shè)置，設(shè)置出我們需要的絢麗的顏色。如圖 4-13所示：這個(gè)精靈圖的外觀有6部分組成，我們用字母 A、B、C、D、E、F表示。然后將各個(gè)組成部分一起組合成我們需要的精靈圖形，如圖 4-14所示：這樣精靈圖的外觀就做好 了。在組合精靈圖的時(shí)候我們會(huì)用到圖素上下層的調(diào)整，可以選中圖素，點(diǎn)擊右鍵，通過右鍵菜單“位置北京亞控科技發(fā)展有限公司-44 -第四章 繪制現(xiàn)場(chǎng)畫面來(lái)調(diào)整，如圖4-15所示。文件漏芍 0!S（y）對(duì)腰蚣批制四窗口 幫助四dr|qd|g， i困國(guó)巨回國(guó)駐 利國(guó).：回a=圈鎖國(guó)10*iHraQ *堇羊Fq 3 n 鼻 n?？?TT F/展衛(wèi)口如此話 口國(guó)回：_出

18、；*T控件* 口國(guó)aH U1之國(guó)恒f與田口無(wú)標(biāo)Jg_2* X圖4-13精靈圖的組成部分o110012001300院輯St5（I） CtrltI拷貝 Ctrl+C粘貼 g Ctrl+V除在我替換舊0D 組含 解娼（Q）對(duì)齊捧列卜位置3鐐定E解鎖購(gòu)由連接配置.9工具箱患）；工連接0國(guó)內(nèi)容對(duì)等項(xiàng)L:摩性通*愉出上承下樓置項(xiàng)置底圖4-14 精靈圖的外觀圖4-15右鍵菜單第二步：建立精靈圖的屬性、變量我們要考慮好精靈圖在使用中需要暴露出那些屬性需要在使用中進(jìn)行修改以及精靈圖具備那些功能。整體的背景顏色、需要?jiǎng)討B(tài)顯示的液位的顏色、在我們這個(gè)精靈圖中我們可以考慮暴露到外面的屬性包括: 液位高度的最大值、最小

19、值。需要關(guān)聯(lián)液位高度的變量。北京亞控科技發(fā)展有限公司-45 -第四章 繪制現(xiàn)場(chǎng)畫面屬性定義：?jiǎn)螕粲覀?cè)“內(nèi)容”選項(xiàng)卡，選中“屬性”點(diǎn)擊右鍵在彈出的右鍵菜單中執(zhí)行“添加屬性”命令，彈出圖4-16所示屬性定義對(duì)話框，我們先定義背景顏色，屬性名稱：BackColor,屬性類型：Brush。點(diǎn)擊“默認(rèn)”后面的一彈出調(diào)色板，通過調(diào)色板設(shè)置默認(rèn)的畫刷類型與圖4-13我們?cè)O(shè)置的畫刷類型一致。圖4-16屬性定義按照這種方式我們?cè)俣x三個(gè)參數(shù)，液位顏色： fluidcolor ,類型：Brush;液位高度最大值：Max,最小值Min,類型：float。如圖4-17所示，四個(gè)參數(shù)定義完成。圖4-17參數(shù)定義北京亞控

20、科技發(fā)展有限公司-46 -第四章 繪制現(xiàn)場(chǎng)畫面變量定義：在這里建立的變量是局部變量，只能應(yīng)用在精靈圖中，不能用在工程的其它地方。參數(shù)定義完成后我們定義關(guān)聯(lián)液位高度的變量。如圖4-18所示：選中“變量”，點(diǎn)擊右鍵增加變量，彈出圖4-19所示的變量定義對(duì)話框。添加受量?jī)?nèi)容EackColOT fluideolor復(fù)制 Ctrl+C靶貼區(qū)CLrl+V刪除重命名聞變量配置圖4-18增加變量無(wú)標(biāo)題鼠標(biāo)圖4-21動(dòng)畫連接選擇關(guān)聯(lián)白變量：fluidValue ,此處只能夠選擇定義的精靈圖的內(nèi)部變量。北京亞控科技發(fā)展有限公司-48 -第四章 繪制現(xiàn)場(chǎng)畫面選擇縮放比例為：線性縮放。選擇縮放的參考中心為：下。圖4-

21、22 動(dòng)畫連接設(shè)置最小時(shí)對(duì)應(yīng)的數(shù)值：點(diǎn)擊匚彈出如圖4-20所示的對(duì)話框，選擇屬性Min,然后確定。設(shè)置最大時(shí)對(duì)應(yīng)的數(shù)值：點(diǎn)擊 回彈出如圖4-20所示的對(duì)話框，選擇屬性Max,然后確定。設(shè)置完成后如圖4-23所示。點(diǎn)擊確定完成設(shè)置。圖4-23縮放動(dòng)畫連接定義北京亞控科技發(fā)展有限公司-49 -第四章 繪制現(xiàn)場(chǎng)畫面第四步：保存精靈圖至此所有的動(dòng)畫連接完成了，精靈圖的開發(fā)也就完成了。單擊“文件”菜單中的“保存”命令，彈出精靈圖庫(kù)對(duì)t框如圖 4-24所示：我們選中最上面的Genius Graphy Folders”,點(diǎn)擊右鍵彈出菜單，選擇創(chuàng) 建一個(gè)新的文件夾，給文件夾命名，例如： my genius o

22、然后給這個(gè)精靈圖命名，例如： geniusl。這樣一個(gè) 精靈圖就完成了。保存之后再打開，如圖 4-25精靈圖的制作不僅僅是用基本作圖工具來(lái)繪制，我們也可以利用現(xiàn)有的精靈圖通過修改來(lái)生成新的精靈圖。我們?cè)诤竺娴墓こ坍嬅娴闹谱髦幸矔?huì)用到此精靈圖的。圖4-24保存精靈圖1圖4-25保存精靈圖2北京亞控科技發(fā)展有限公司-50 -第四章 繪制現(xiàn)場(chǎng)畫面第三節(jié)制作圖形模型圖形模型和精靈圖區(qū)別:.存儲(chǔ)位置不同精靈圖存儲(chǔ)在安裝目錄-bin-Glib中，如果工程拷貝到另外一臺(tái)計(jì)算機(jī)，不影響工程使用，但會(huì)影響工 程精靈圖修改。圖形模型存儲(chǔ)在工程目錄下，跟隨工程。.實(shí)例傳播不同精靈圖一旦在畫面中進(jìn)行創(chuàng)建，即使模板進(jìn)行

23、了修改，也不傳播到已存在實(shí)例中去。圖形模型則會(huì)傳 播到已經(jīng)存在的實(shí)例中去。圖形模型：模擬現(xiàn)實(shí)中的生產(chǎn)設(shè)備，如鍋爐、電機(jī)設(shè)備的圖形展示、動(dòng)畫連接、安全設(shè)置、腳本語(yǔ)言 等，把這些功能組合在一起形成圖形模型，用戶在使用時(shí)只需要將模型實(shí)例化，即對(duì)圖形模型進(jìn)行一系列 配置，可以快速把圖形展示及動(dòng)態(tài)效果部署到工程中。圖形模型相對(duì)于圖庫(kù)精靈的優(yōu)勢(shì)在于不僅僅具有動(dòng)畫連接，還可以編寫腳本程序，同時(shí)當(dāng)模型重新編 輯后，會(huì)把產(chǎn)生變化的內(nèi)容更新到已經(jīng)實(shí)例化的模型對(duì)象中。我們將前面做的精靈圖與罐結(jié)合起來(lái)制作一個(gè)圖形模型來(lái)在本培訓(xùn)工程中使用。制作過程如下：一步：制作圖形模型的外觀在KingSCADA開發(fā)環(huán)境的目錄中選擇“

24、視圖” 一 “圖形模型”選項(xiàng)，在右側(cè)編輯區(qū)中單擊“新建” 按鈕，彈出對(duì)話框，如圖 4-26所示：圖4-26創(chuàng)建圖形模型對(duì)話框如：模型描述、創(chuàng)建者、4-27所示:在圖4-26中輸入圖形模型的名稱如：罐，并根據(jù)需要設(shè)置該模型的其他選項(xiàng),設(shè)置完畢后，單擊“確認(rèn)”按鈕，該模型出現(xiàn)在開發(fā)環(huán)境的右側(cè)編輯區(qū)中，如圖北京亞控科技發(fā)展有限公司-51 -第四章 繪制現(xiàn)場(chǎng)畫面 lake文件9 編輯 視圖9 編譯 工具復(fù)）幫助心新建為添加、端打開理查找陶大圖標(biāo)丐詳細(xì)”編譯圖刊向解決方案BCMAEwm。新建X刪除邑屬性從文件中添加從庫(kù)I.J ttEt|=| _i人機(jī)界面日視圖,，畫面圖形模型國(guó)皿工運(yùn)行設(shè)置-匚豆點(diǎn)圖4-

25、27編輯區(qū)中的圖形模型在圖4-27中選中模型圖標(biāo)，雙擊圖形模型圖標(biāo)，彈出對(duì)話框，如圖 4-28所示:圖4-28圖形模型開發(fā)界面圖形模型開發(fā)界面與圖形編輯器界面具有相同的布局，由菜單欄、工具欄、圖形編輯區(qū)、屬性窗口和連接窗口等構(gòu)成。我們利用基本作圖工具橢圓、矩形框來(lái)制作罐體的外觀，罐體（橢圓、矩形框）使用過渡色來(lái)體現(xiàn)金屬質(zhì)感，以增加罐體的美觀程度。過渡色的設(shè)置可以通過Brush屬性來(lái)設(shè)置。我們?cè)诠摅w上添加一個(gè)可以顯示液位高度的圖素，利用圓角矩形和文本來(lái)實(shí)現(xiàn)。圓角矩形通過設(shè)置 Pen, Brush來(lái)設(shè)置提高圖素美觀程度。文本T可以修改文本的顏色、字體。如圖4-29所示：為了以后在說明時(shí)簡(jiǎn)單一些，我

26、們將罐體設(shè)為 A圖素，圓角矩形設(shè)為 B圖素，文本設(shè)置C圖素。北京亞控科技發(fā)展有限公司第四章 繪制現(xiàn)場(chǎng)畫面-52 -圖4-29圖素制作.罐體設(shè)置完成后我們將精靈庫(kù)中前面已經(jīng)做好的精靈圖取出來(lái)放置在罐體上面。點(diǎn)擊工具欄圖標(biāo). 口 一彈出精靈圖庫(kù)對(duì)話框，選擇我們前面定義的精靈圖文件夾“ my genius，如圖4-30所示，選擇右側(cè)區(qū)域的 液位指示的精靈圖，雙擊此精靈圖，然后放置在圖形編輯區(qū)域。精靈圖我們就叫圖素Do然后我們將精靈圖與前面畫的各種圖素組合起來(lái)就制作完了 了一個(gè)罐的圖形模型的外觀了。如圖4-31所示的罐的圖形外觀。在組合圖素的時(shí)候我們會(huì)用到圖素上下層的調(diào)整，可以選中圖素，點(diǎn)擊右鍵，通過

27、右鍵菜單“位置”來(lái)調(diào)整，如圖 4-15所示。圖4-30精靈圖庫(kù)北京亞控科技發(fā)展有限公司第四章 繪制現(xiàn)場(chǎng)畫面-53 -EE前面編鑄器文件g 編輯笛視團(tuán)9 對(duì)象如繪制窗口如 幫助如O S I Q BI 4同國(guó)|回皂胤*,|第工具箱中x八2、汨*x圖4-31圖形模型外觀poo第二步：建立圖形模型的屬性、變量制作屬性、變量的方法與前面制作圖庫(kù)精靈的方法相似，具體操作可以參考前面講解精靈圖的屬性、變量定義部分。定義的圖形模型的屬性為：罐體顏色（圖素 A的顏色）、面板顏色（精靈圖 D背景色）、液位指示顏色（精靈圖D液位指示顏色）、文本框顏色（圖素 B的背景色）、字體大?。▓D素 C的字體）、Max、Min（

28、對(duì)應(yīng)精靈圖 D的Max、Min屬性，也就是液位的最大值、最小值），其中顏色類型選擇 Brush,字體類型選才F Font, Max、Min選才? float類型。如圖4-32所示：北京亞控科技發(fā)展有限公司第四章 繪制現(xiàn)場(chǎng)畫面-54 -圖4-32 圖形模型屬性設(shè)置定義圖形模型的變量為：液位高度。此變量主要是與液位指示的精靈的變量進(jìn)行關(guān)聯(lián)顯示液位，以及 與文本（圖素 C）進(jìn)行模擬值輸出的關(guān)聯(lián)。第三步：建立圖形模型的動(dòng)畫連接圖形模型的動(dòng)畫連接與前面講解的精靈圖的動(dòng)畫連接相似，主要是將我們前面定義的屬性、變量與圖 形模型的具體圖素關(guān)聯(lián)起來(lái)。建立圖形與屬性的關(guān)聯(lián)：首先我們將罐體（圖素 A）的顏色與“罐體

29、顏色”屬性關(guān)聯(lián)起來(lái)，選中作為罐體的圓角矩形，在右側(cè) 的屬性欄中設(shè)置 Brush屬性，點(diǎn)擊Brush屬性后面的母按鈕，彈出如圖4-33所示對(duì)話框，選擇我們前面定 義的“罐體顏色”屬性，點(diǎn)擊OK完成此屬性的關(guān)聯(lián)。同樣的方式選擇作為罐體一部分的橢圓，進(jìn)彳T Brush屬性的設(shè)置。圖素B的顏色設(shè)置，選中圓角矩形然后設(shè)置右側(cè)屬性的Brush屬性，點(diǎn)擊Brush屬性后面的口按鈕彈出如圖4-33所示對(duì)話框，關(guān)聯(lián)圖形模型的“文本框顏色”屬性。文本圖素C選擇“#，然后設(shè)置右側(cè)屬性的 TextFont屬性，點(diǎn)擊TextFont屬性后面的 回按鈕彈出如 圖4-33所示對(duì)話框，關(guān)聯(lián)到圖形模型的“字體大小”屬性。北京亞

30、控科技發(fā)展有限公司第四章 繪制現(xiàn)場(chǎng)畫面-55 -圖4-33選擇屬性設(shè)置精靈圖D的屬性，選中精靈圖，右側(cè)精靈圖的屬性如圖 4-34所示，首先設(shè)置“ BackColor”屬性， 點(diǎn)擊BackC010r屬性后面的?按鈕彈彈出如圖4-33所示對(duì)話框，關(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-35所示。BackColor匚二|線性口film deor純色Max100,000000

31、Iflin0.0000001| 二卸板靚色I(xiàn)ui dcolor1_| =灌位指示藪色二 M二Min=MinTooltipText4-34屬性關(guān)聯(lián)前的精靈圖屬性圖4-35屬性關(guān)聯(lián)后的精靈圖屬性建立圖形與變量的關(guān)聯(lián)：屬性設(shè)置完成后我們?cè)龠M(jìn)行變量的設(shè)置。變量的設(shè)置主要有兩個(gè)地方需要設(shè)置，一個(gè)是文本（圖素C）的模擬量輸出，一個(gè)是精靈圖（圖素 D）的液位高度。實(shí)際上兩者關(guān)聯(lián)的是同一個(gè)變量，即“液位高度” 變量。選中文本“ #，然后雙擊彈出如圖 4-36所示對(duì)話框，點(diǎn)擊“添加連接”，彈出下拉菜單，如圖 4-37 所示，選擇“值輸出模擬值輸出，彈出關(guān)聯(lián)變量對(duì)話框，選擇 ,彈出選擇變量對(duì)話框，然后我們選擇變量

32、“液位高度”，設(shè)置顯示的整數(shù)位數(shù)、小數(shù)位數(shù)分別為2位，點(diǎn)擊確定完成此動(dòng)畫連接的設(shè)置。北京亞控科技發(fā)展有限公司圖4-36 動(dòng)畫連接-56 -第四章 繪制現(xiàn)場(chǎng)畫面圖4-37 下拉菜單精靈圖變量的關(guān)聯(lián)比較簡(jiǎn)單，選中精靈圖，選擇右側(cè)的“連接”，顯示如圖4-38所示圖形，點(diǎn)擊 工彈出變量選擇對(duì)話框，如圖 4-39所示，此處即可以選擇圖形模型的變量，也可以選擇系統(tǒng)變量。我們點(diǎn)擊左側(cè)的“This”，在右側(cè)即可顯示我們前面定義的圖形模型的變量“液位高度”，選擇此變量，點(diǎn)擊“ OK”即 可完成精靈圖變量的關(guān)聯(lián)。動(dòng)畫集輯力旦區(qū)動(dòng)而列表；守二1三|豹E1值入模擬值輸入 ThUCFi ctureWraul 1表達(dá)式植

33、擬值 V液位高度根擬值輸入值最小值:最大值:提示信息輸入模擬值：口隱藏0使用默認(rèn)值匚直接輸入 回啟用夠盤100?；瑝K輸入口連續(xù)寫入圖4-38連接北京亞控科技發(fā)展有限公司第四章 繪制現(xiàn)場(chǎng)畫面-57 -圖4-39選擇變量這樣我們圖形模型變量的關(guān)聯(lián)就完成了。建立圖形模型的腳本程序：我們前面講精靈圖的時(shí)候可以知道精靈圖是包含動(dòng)畫連接的，而圖形模型不僅僅包含動(dòng)畫連接，還有 腳本程序。那么下面我們就舉例說明圖形模型腳本程序的使用方法。我們假定在通過文本“ #顯示液位高度的時(shí)候讓此文本根據(jù)不同的數(shù)值顯示不同的顏色，例如當(dāng)液 位高度超過90%或者低于10%時(shí)用報(bào)警色（例如紅色）顯示，在 10% 90%之間時(shí)用

34、正常色（例如綠色） 顯示，我們就可以使用圖形模型的腳本程序了。圖形模型腳本主要有三種，分別為“打開時(shí)”、“存在時(shí)”、“關(guān)閉時(shí)”三種。我們要設(shè)置文本的顏色，需要先設(shè)置文本顏色的屬性，屬性的設(shè)置與前面講過的操作方式相同。參考 如圖4-40所示：我們?cè)黾訉傩詤?shù)“報(bào)警色”、“正常色”，他們的類型都是“ Brush”類型。默認(rèn)的顏色通 過調(diào)色板進(jìn)行設(shè)置。北京亞控科技發(fā)展有限公司圖4-40 定義參數(shù)-58 -第四章 繪制現(xiàn)場(chǎng)畫面參數(shù)設(shè)置完成后我們進(jìn)行腳本程序的編寫：注意不要選擇任何圖素，然后在右側(cè)的“連接”，通過點(diǎn)擊“添加連接一基本”彈出如圖4-41所示，我們先編輯“打開時(shí)”腳本。如圖 4-42所示：腳

35、本程序如下：float HAlarm;float LAlarm;HAlarm=Max*0.9;LAlarm=Max*0.1;if（液位高度LAlarm|液位高度HAlarm）Text1.TextBrush=報(bào)警色;else3000毫秒，我們Text1.TextBrush=正常色;同樣的方式增加“存在時(shí)”腳本，腳本程序與“打開時(shí)”相同，默認(rèn)的執(zhí)行周期為修改為1000毫秒。如圖4-43所示:311 3. I 百厘| 圖4-41增加腳本北京亞控科技發(fā)展有限公司第四章 繪制現(xiàn)場(chǎng)畫面-59 -動(dòng)畫組拉日叵I區(qū)建4 1/1 打開時(shí) 險(xiǎn)變星勃酉而囪面面軸函數(shù)函數(shù)聲明：void01 C.1LetDnDpenf

36、 float HAlarm;Float LAlarn;ilAlji m-lldx0.9;LAlarm=Max*0,1;1乳液位高度工L Ria | 渡位高度: HQ arm)TckU .TcxtBruf h=報(bào)警色;eleTcKtl .TcxtBf ush=正常色；培象性量 同對(duì)雇變 囹_!$“ ffiM打 JTD1應(yīng)用重置取消圖4-42 打開時(shí)腳本存在時(shí)Ln %Col 13T?WTru-存在時(shí)True一日動(dòng)畫列表：分D1 $!Float IIAldrn；Float LAldrn；HALdrnkMdx*D.9；LflLdriikMdx*a.1 ；iff液位高度LRIarm| |液位高度)HUl

37、arm)Textl .TEKtBrush報(bào)警色；elseTextl .TextBrUsrfT,V ；加voidV/hfeOpen(魚除變量,配方衛(wèi)畫面。函數(shù) 函數(shù)聲明.存在時(shí)年 1000字曾量性量保對(duì)雇殳輸出a XMessageFosi tionA=編譯：】成功，0央噥=V重置取消圖4-43 存在時(shí)腳本我們這里用不到“關(guān)閉時(shí)”，所以就不進(jìn)行“關(guān)閉時(shí)”腳本的設(shè)置了。 這樣圖形模型的腳本程序就完成了。北京亞控科技發(fā)展有限公司-60 -第四章 繪制現(xiàn)場(chǎng)畫面第四節(jié) 制作現(xiàn)場(chǎng)流程圖我們利用前面講的基本圖素、亞控公司提供的精靈圖和我們前面制作的圖形模型來(lái)制作現(xiàn)場(chǎng)的流程畫 面。新建畫面在KingSCADA圖

38、形編輯器點(diǎn)擊“文件”菜單的“新建畫面”命令，彈出對(duì)話框，如圖 4-44所示:圖4-44新建畫面對(duì)話框?qū)υ捒蛟O(shè)置如下：名稱：監(jiān)控畫面畫面位置：左邊：0 頂端：0顯示寬度：1280顯示高度：1024畫面寬度：1280畫面高度：1024北京亞控科技發(fā)展有限公司-61 -第四章 繪制現(xiàn)場(chǎng)畫面畫面類型：覆蓋式其他選項(xiàng)可根據(jù)需要設(shè)置。設(shè)置完畢后單擊“確認(rèn)”按鈕，該畫面被建立在圖形編輯器中，我們還可以通過畫面的屬性進(jìn)行相關(guān) 的設(shè)置，例如選擇 Backgroud屬性，單擊“些按鈕，在彈出的畫面背景顏色對(duì)話框中可以設(shè)置背景顏色 的漸變效果等。除了畫面屬性對(duì)話框外，凡是在畫面中添加的任何圖素或控件，在對(duì)其進(jìn)行編輯

39、時(shí)，都會(huì)有相應(yīng)的屬 性對(duì)話框，如：按鈕屬性對(duì)話框、報(bào)警控件屬性對(duì)話框、趨勢(shì)曲線控件屬性對(duì)話框等等，某些屬性不僅可 以在開發(fā)時(shí)進(jìn)行修改，在運(yùn)行環(huán)境中也可以動(dòng)態(tài)修改。制作現(xiàn)場(chǎng)畫面：第一步：在圖形編輯器中單擊“對(duì)象”菜單中的“圖形模型”命令，彈出圖形模型選擇對(duì)話框，選擇我們前面建立的罐的圖形模型，并將其添加到畫面中，我們添加兩個(gè)圖形模型的罐，效果如圖4-45所示:圖4-45流程畫面第二步：在圖形編輯器中單擊“對(duì)象”菜單中的“精靈圖”命令，在精靈庫(kù)中選則具有攪拌器的反應(yīng)罐“customtest”,并將其添加到畫面中，效果如圖 4-45所示：此反應(yīng)罐可以通過控制電機(jī)來(lái)控制罐內(nèi)攪 拌器的攪拌運(yùn)行，同時(shí)開可以通過儀表的表頭顯示一個(gè)模擬量數(shù)值，當(dāng)在運(yùn)行狀態(tài)下鼠標(biāo)移動(dòng)到表頭位置 時(shí)表頭會(huì)自動(dòng)放大顯示。同樣的方式我們從精靈圖中將泵、閥門添加到畫面中。效果圖如圖 4-46所示:第三步：進(jìn)行管道的連接，利用基本畫圖工具中的管道，將各個(gè)泵、閥門、罐、攪拌器等連接起來(lái)