本文格式為Word版，下載可任意編輯——KingSCADA初級教程第四章現(xiàn)場畫面第四章繪制現(xiàn)場畫面

第四章繪制現(xiàn)場畫面

本章內(nèi)容

????

認識圖形編輯器制作精靈圖制作圖形模型制作現(xiàn)場畫面

第一節(jié)認識圖形編輯器

在本章我們將利用KingSCADA3.1強大的繪圖工具來制作現(xiàn)場的流程畫面，畫面的組成包括管道、閥門、水泵、反應釜、保存罐等等。在制作過程中我們還會用到圖庫精靈、圖形模型等功能。

KingSCADA3.1圖形編輯器中即繪制現(xiàn)場的畫面，包括監(jiān)控畫面、趨勢畫面、報警畫面、現(xiàn)場流程圖等，還可以為畫面中的圖素設置連接動畫，編寫按鈕的控制程序等等。圖形編輯器為您提供了強大的繪圖工具，不僅提供了基本繪圖工具、擴展繪圖工具、WindowsUI繪圖工具還提供了精靈圖庫，大大提高了工程開發(fā)的效率。

啟動圖形編輯器的方法如下：

在KingSCADA3.1工程開發(fā)環(huán)境（KingMake）中單擊“編輯〞菜單中的“圖形系統(tǒng)〞命令，即可彈出畫面編輯器，如圖4-1所示：

圖4-1畫面編輯器

畫面編輯器包括：菜單欄、工具欄、工具箱、編輯界面、動畫連接窗口、內(nèi)容窗口、對象瀏覽窗口、屬性配置窗口。

在畫面編輯器中開發(fā)畫面時，可以隨時切換到運行環(huán)境，測試畫面效果，提高生產(chǎn)率和縮短開發(fā)周期。

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

圖形系統(tǒng)的繪圖工具：

圖形系統(tǒng)的繪圖工具有三部分組成：基本工具、擴展工具和WindowsUI。

每種圖素都包含一系列的對象屬性，屬性窗口中包括圖素的名稱、大小、位置等外觀通用屬性，用戶可以對這些屬性進行修改。同時每種圖素還有自己的獨特的屬性。詳細的圖素屬性說明請參考KingScada3.1操作手冊，下面簡單介紹幾種圖素的制作。新建畫面：

在KingSCADA3.1圖形編輯器中執(zhí)行“文件〞菜單中的“新建畫面〞命令，彈出如圖4-2所示：輸入畫面名稱，例如“學習〞，設置畫面大小，然后點擊“確定〞。

如圖4-2所示：

圖4-2新建畫面1、圓角矩形框：

選擇基本圖形工具的圓角矩形框，然后將圖素放置在畫面上。圓角矩形的屬性如圖4-3所示：我們主要用到的屬性為：

Pen：矩形邊框?qū)傩裕籅rush：矩形畫刷屬性；DrawOption：矩形框顯示屬性；現(xiàn)在我們先設置Pen屬性，點擊

彈出設置線屬性對話框，如圖4-4所示，我們選擇線的寬度為

彈出設置畫刷對話框，選擇“線性〞如圖4-5所示，

3，其他不變。然后我們設置Brush屬性，點擊

設置畫刷的屬性。DrawOption屬性可以設置顯示的方式，其他屬性的設置請參考操作手冊。

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

圖4-4線屬性設置

圖4-5畫刷屬性設置

圖4-3圓角矩形屬性2、文本：

文本用來顯示一個文本字符串，只能進行單行顯示，該文本的大小隨圖素的尺寸而變化，十分適用于值輸出的顯示；對于多行文本的顯示，建議使用Windows控件中的文本框或超級文本，文本框部分屬性如下：

Text：顯示的文本內(nèi)容；

TextFont：顯示的文本的字體；

TextBrush：顯示的文本的顏色畫刷；

選擇基本圖形工具的文本T，然后將圖素放置在畫面上。可以通過屬性設置文本的內(nèi)容、文本字體、文本顏色等等屬性。

我們將文本“Text〞修改為“##〞，然后使用動畫連接“添加連接〞選擇模擬值輸出，如圖4-5，4-6所示使用模擬值輸出動畫連接，連接變量“\\\\local\\liquid_level〞。

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

圖4-5動畫連接

圖4-6模擬值輸出

需要注意的是：當文本對象在開發(fā)狀態(tài)下，輸入帶有“#〞的字符，即為數(shù)值類型的通配符，即當該字符串進行數(shù)值類型輸出動畫連接時，將文本中第一次遇到的#顯示得到的數(shù)值，依照動畫連接中設定的數(shù)值格式顯示，例如：

1、當文本內(nèi)容為“#米〞時，而值輸出動畫連接要顯示的數(shù)據(jù)為20.4，則運行時，該文本顯示“20.4米〞；

2、當文本內(nèi)容為“此時液位高度為#米〞時，而值輸出動畫連接要顯示的數(shù)據(jù)為20.4，則運行時，該文本顯示“此時液位高度為20.4米〞；

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

3、當文本內(nèi)容為“###米###〞或者在單個#，則顯示“20.4米###〞，包括當輸入文本為“##.##〞時，也會將遇到的第一個不為#的字符替換為當前的數(shù)值顯示，即顯示為“20.4.##〞，因此不需要使用該通配符進行格式化；

4、當文本內(nèi)容中不含有#號，卻關聯(lián)了數(shù)值輸出類型的動畫連接時，則在文本后面顯示值輸出，例如：原文本內(nèi)容為“Text〞，關聯(lián)動畫后，顯示“Text20.4〞；

3、管道：

管道是表示帶有外壁并內(nèi)部可以進行滾動的特別圖素。管道部分屬性如下：OOutterWidth：設置管道外壁的寬度，以像素為單位；OutterColor：設置管道外壁的顏色；

InnerWidth：設置管道內(nèi)部的寬度，以像素為單位；InnerColor：設置管道內(nèi)部的顏色；

選擇基本作圖工具的管道，在畫面中依照要求畫一條管道，然后根據(jù)需要設置相關的寬度、顏色屬性，雙擊畫面上的管道，“添加連接—基本—管道滾動〞，離散值輸入中選擇“\\\\local\\water_pump〞，假使“\\\\local\\water_pump〞變量為1，管道滾動，如圖4-6。

圖4-6管道滾動4、按鈕

按鈕可以設置成普通的按鈕，也可以設置成多態(tài)按鈕，按鈕部分屬性如下：（1）FlatStyle：置按鈕外觀風格；（2）Font：設置按鈕文本的字體；

（3）Background：設置按鈕的背景顏色；

（4）Foreground：設置按鈕的前景顏色，即文本的顏色；

（5）Style：兩種選擇，常態(tài)和多態(tài)，當按鈕處于常態(tài)時，使用Background屬性進行按鈕背景的填充；選中擇多態(tài)時，可使用以下屬性配置對按鈕進行操作時相應的按鈕背景顏色：

2PressedBackground：當按鈕按下時，按鈕顯示的背景顏色2FocusedBackground：當按鈕處于焦點時，按鈕顯示的背景顏色

2DisabledBackground：當“Enable〞屬性設置為false時有效，即按鈕不可操作時，按鈕顯示的背景顏色

（6）Caption：設置按鈕上顯示的文本；（7）ShapeStyle：設置按鈕的形狀

我們制作一個按鈕，并且將此按鈕的控制功能與前面的管道結(jié)合起來使用，通過按鈕來控制管道是否滾動。

選擇擴展工具的按鈕，然后在畫面上畫出一個按鈕，設置按鈕的顏色、文本、字體等等屬性，如圖4-7

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

所示：我們設置按鈕的文本為“閥門控制〞，設置正常色、按下時顏色、獲得焦點的顏色等等屬性。

圖4-7按鈕屬性設置

設置按鈕的鼠標左鍵按下的動畫連接，如圖4-8，4-9所示，我們將管道的滾動動畫與前面建立的變量valve_gate1結(jié)合起來，通過按鈕控制閥門1的開通、閉合狀態(tài)，以及控制管道的滾動與中止。腳本程序如下：

if(\\\\local\\valve_gate1==false){}else{}

\\\\local\\valve_gate1=false;\\\\local\\water_pump=false;\\\\local\\valve_gate1=true;\\\\local\\water_pump=true;

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

圖4-8按鈕動畫連接

圖4-9按鈕腳本

保存畫面有進行運行系統(tǒng)，我們就可以通過點擊按鈕來控制管道的滾動啦。其他作圖工具可以參考KingScada3.1的操作手冊。

其次節(jié)制作精靈圖

所謂精靈圖就是在外觀上類似于組合圖素，但內(nèi)嵌了豐富的動畫連接和規(guī)律控制，工程人員只需把它從精靈圖庫中調(diào)出來放在畫面上，再做少量的修改，就能完成繁雜的控制功能。

KingSCADA3.1的精靈圖庫中提供了大量工程中常用的精靈圖，用戶可以直接使用，假使精靈圖庫中沒有適合您的精靈圖，您也可以自己開發(fā)精靈圖，然后將其放到圖庫中，以備日后使用。

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

我們下面就制作一個液位指示精靈圖在這個工程中使用，這個精靈圖即能夠顯示液位數(shù)值，也能夠動態(tài)顯示液位的高低。

認識精靈圖開發(fā)界面

在KingSCADA3.1圖形編輯器中執(zhí)行“文件〞菜單中的“新建—精靈圖〞命令，彈出精靈圖開發(fā)界面，如圖4-10所示：

圖4-10精靈圖開發(fā)界面

精靈圖開發(fā)界面與圖形開發(fā)界面很相像，由菜單欄、工具欄、工具箱、圖形編輯區(qū)、屬性窗口等組成，操作方法也基本相像。

創(chuàng)立精靈圖

第一步：制作精靈圖外觀：

在圖4-10所示的圖形編輯區(qū)編輯我們要做的精靈圖形的外觀，我們先利用前面講的圓角矩形圖素以及直線圖素、文本圖素，畫出精靈圖的各個組成部分，各個部分的顏色需要通過調(diào)色板進行設置，設置出我們需要的絢麗的顏色。如圖4-11所示：這個精靈圖的外觀有6部分組成，我們用字母A、B、C、D、E、F表示。然后將各個組成部分一起組合成我們需要的精靈圖形，如圖4-12所示：這樣精靈圖的外觀就做好了。在組合精靈圖的時候我們會用到圖素上下層的調(diào)整，可以選中圖素，點擊右鍵，通過右鍵菜單“位置〞來調(diào)整，如圖4-13所示。

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

圖4-11精靈圖的組成部分

圖4-12精靈圖的外觀圖4-13右鍵菜單其次步：建立精靈圖的屬性、變量：

我們要考慮好精靈圖在使用中需要暴露出那些屬性需要在使用中進行修改以及精靈圖具備那些功能。在我們這個精靈圖中我們可以考慮暴露到外面的屬性包括：整體的背景顏色、需要動態(tài)顯示的液位的顏色、液位高度的最大值、最小值。需要關聯(lián)液位高度的變量。

屬性定義：單擊右側(cè)“內(nèi)容〞選項卡，選中“屬性〞點擊右鍵在彈出的右鍵菜單中執(zhí)行“添加屬性〞

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

命令，彈出圖4-14所示屬性定義對話框，我們先定義背景顏色，屬性名稱：BackColor，屬性類型：Brush。點擊“默認〞后面的

彈出調(diào)色板，通過調(diào)色板設置默認的畫刷類型與圖4-11我們設置的畫刷類型一致。

圖4-14屬性定義

依照這種方式我們再定義液位顏色：fluidcolor，類型：Brush。液位高度最大值：Max，最小值Min，類型：float。如圖4-15所示，四個參數(shù)定義完成。

圖4-15參數(shù)定義

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

圖4-26圖形模型開發(fā)界面

圖形模型開發(fā)界面與圖形編輯器界面具有一致的布局，由菜單欄、工具欄、圖形編輯區(qū)、屬性窗口和連接窗口等構(gòu)成。

我們利用基本作圖工具橢圓、矩形框來制作罐體的外觀，罐體（橢圓、矩形框）使用過渡色來表達金屬質(zhì)感，以增加罐體的美觀程度。過渡色的設置可以通過Brush屬性來設置。我們在罐體上添加一個可以顯示液位高度的圖素，利用圓角矩形和文本來實現(xiàn)。圓角矩形通過設置Pen，Brush來設置提高圖素美觀程度。文本T可以修改文本的顏色、字體。

如圖4-27所示：為了以后在說明時簡單一些，我們將罐體設為A圖素，圓角矩形設為B圖素，文本設置C圖素。

圖4-27圖素制作

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

罐體設置完成后我們將精靈庫中前面已經(jīng)做好的精靈圖取出來放置在罐體上面。點擊工具欄圖標彈出精靈圖庫對話框，選擇我們前面定義的精靈圖文件夾“mygenius〞，如圖4-28所示，選擇右側(cè)區(qū)域的液位指示的精靈圖，雙擊此精靈圖，然后放置在圖形編輯區(qū)域。精靈圖我們就叫圖素D。

然后我們將精靈圖與前面畫的各種圖素組合起來就制作完了了一個罐的圖形模型的外觀了。如圖4-29所示的罐的圖形外觀。在組合圖素的時候我們會用到圖素上下層的調(diào)整，可以選中圖素，點擊右鍵，通過右鍵菜單“位置〞來調(diào)整，如圖4-13所示。

圖4-28精靈圖庫

圖4-29圖形模型外觀

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

其次步：建立圖形模型的屬性、變量：

制作屬性、變量的方法與前面制作圖庫精靈的方法相像，具體操作可以參考前面講解精靈圖的屬性、變量定義部分。

定義的圖形模型的屬性為：罐體顏色（圖素A的顏色）、面板顏色（精靈圖D背風景）、液位指示顏色（精靈圖D液位指示顏色）、文本框顏色（圖素B的背風景）、字體大小（圖素C的字體）、Max、Min（對應精靈圖D的Max、Min屬性，也就是液位的最大值、最小值），其中顏色類型選擇Brush，字體類型選擇Font，Max、Min選擇float類型。如圖4-30所示：

圖4-30圖形模型屬性設置

定義圖形模型的變量為：液位高度。此變量主要是與液位指示的精靈的變量進行關聯(lián)顯示液位，以及與文本（圖素C）進行模擬值輸出的關聯(lián)。

第三步：建立圖形模型的動畫連接：

圖形模型的動畫連接與前面講解的精靈圖的動畫連接相像，主要是將我們前面定義的屬性、變量與圖形模型的具體圖素關聯(lián)起來。

建立圖形與屬性的關聯(lián)：

首先我們將罐體（圖素A）的顏色與“罐體顏色〞屬性關聯(lián)起來，選中作為罐體的圓角矩形，在右側(cè)的屬性欄中設置Brush屬性，點擊Brush屬性后面的

按鈕，彈出如圖4-31所示對話框，選擇我們前面定

義的“罐體顏色〞屬性，點擊OK完成此屬性的關聯(lián)。同樣的方式選擇作為罐體一部分的橢圓，進行Brush屬性的設置。

圖素B的顏色設置，選中圓角矩形然后設置右側(cè)屬性的Brush屬性，點擊Brush屬性后面的出如圖4-30所示對話框，關聯(lián)圖形模型的“文本框顏色〞屬性。

文本圖素C選擇“##〞，然后設置右側(cè)屬性的TextFont屬性，點擊TextFont屬性后面的

北京亞控科技發(fā)展有限公司

按鈕彈

按鈕彈出如

第四章繪制現(xiàn)場畫面

圖4-30所示對話框，關聯(lián)到圖形模型的“字體大小〞屬性。

圖4-30選擇屬性

設置精靈圖D的屬性，選中精靈圖，右側(cè)精靈圖的屬性如圖4-31所示，首先設置“BackColor〞屬性，點擊BackColor屬性后面的

按鈕彈彈出如圖4-30所示對話框，關聯(lián)圖形模型的“面板顏色〞屬性。同樣

的方式設置“fluidcolor〞屬性，關聯(lián)圖形模型的“液位指示顏色〞屬性。設置“Max〞屬性，關聯(lián)圖形模型的“Max〞屬性。設置“Min〞屬性，關聯(lián)圖形模型的“Min〞屬性。屬性設置完成后，圖形模型的屬性變?yōu)槿鐖D4-32所示。

4-31精靈圖屬性圖4-32精靈圖屬性建立圖形與變量的關聯(lián)：

屬性設置完成后我們再進行變量的設置。變量的設置主要有兩個地方需要設置，一個是文本（圖素C）的模擬量輸出，一個是精靈圖（圖素D）的液位高度。實際上兩者關聯(lián)的是同一個變量，即“液位高度〞變量。

選中文本“##〞，然后雙擊彈出如圖4-33所示對話框，點擊“添加連接〞，彈出下拉菜單，如圖4-34所示，選擇“值輸出－模擬值輸出〞，彈出關聯(lián)變量對話框，選擇

，彈出選擇變量對話框，然后我們

選擇變量“液位高度〞，設置顯示的整數(shù)位數(shù)、小數(shù)位數(shù)分別為2位，點擊確定完成此動畫連接的設置。

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

圖4-33動畫連接

精靈圖變量的關聯(lián)比較簡單，選中精靈圖，選擇右側(cè)的“連接〞，顯示如圖4-35所示圖形，點擊

彈

出變量選擇對話框，如圖4-36所示，此處即可以選擇圖形模型的變量，也可以選擇系統(tǒng)變量。我們點擊左側(cè)的“This〞，在右側(cè)即可顯示我們前面定義的圖形模型的變量“液位高度〞，選擇此變量，點擊“OK〞即可完成精靈圖變量的關聯(lián)。

圖4-34下拉菜單

圖4-35連接

北京亞控科技發(fā)展有限公司

第四章繪制現(xiàn)場畫面

圖4-43流程畫面

這樣我們就把一個基本的流程圖畫完了，假使為了畫面美觀，我們也可以做一些進一步的細致的美化工作，例如我們從精靈圖中將墻壁的背景放到畫面上，再利用基本圖素的多邊形做地板，可以設置多邊形Brush屬性的“Texture〞。

基本的流程圖畫面完成后，我們就可以根據(jù)工程要求的功能對圖素進行屬性設置以及動畫連接了。

對圖素進行設置：