Урок III. Графический интерфейс.

[perfectpullquote align=«full» bordertop=«false» cite=»» link=»» color=»#1e73be» class=»» size=«»]Графический интер­фейс явля­ет­ся «лицом» Scada–системы. Каче­ство гра­фи­ки, рас­по­ло­же­ние эле­мен­тов, инстру­мен­ты инфор­ми­ро­ва­ния о состо­я­нии систе­мы — всё име­ет зна­че­ние для оператора.[/perfectpullquote]

И если с каче­ством гра­фи­ки инже­нер сде­лать ниче­го не может, то осталь­ное он вполне может реа­ли­зо­вать, исхо­дя из слож­но­сти тех­но­ло­ги­че­ской систе­мы, запро­са заказ­чи­ка и сво­е­го опыта.

Создание страницы

Есте­ствен­но, для нача­ла необ­хо­ди­мо создать стра­ни­цу, на кото­рой будут рас­по­ло­же­ны потом эле­мен­ты гра­фи­ки и инфор­ма­ци­он­ные инстру­мен­ты. Для созда­ния стра­ни­цы надо открыть ресур­сы про­ек­та сле­ва и выбрать стро­ку Screens.

При наве­де­нии кур­со­ра на стро­ку Screens появ­ля­ет­ся груп­па пик­то­грамм, с помо­щью кото­рых мож­но сде­лать несколь­ко опе­ра­ций с экра­на­ми систе­мы дис­пет­че­ри­за­ции. Пер­вая пик­то­грам­ма поз­во­ля­ет создать пап­ку для удоб­ной груп­пи­ров­ки экра­нов. Но нам нуж­на сей­час вто­рая пик­то­грам­ма, кото­рая поз­во­ля­ет создать новое окно.

В появив­шем­ся окне надо выбрать раз­мер экра­на (опе­ра­тор­ско­го мони­то­ра) и его дизай­на из набо­ра шаб­ло­нов. Кста­ти, раз­ра­бот­чик может созда­вать эти шаб­ло­ны сам. Об этом мы рас­ска­жем ниже.

В ниж­ней части окна вве­ди­те имя экра­на и нажми­те ОК.

В цен­траль­ной части Редак­то­ра появит­ся поле ново­го экра­на, на кото­ром будут рас­по­ла­гать­ся эле­мен­ты интер­фей­са. Напри­мер, вот такие:

Варианты настройки фона рабочего экрана.

Фон рабо­че­го окна может отоб­ра­жать кор­по­ратв­ный цвет пред­при­я­тия заказ­чи­ка. Может пред­став­лять собой фото­гра­фию реаль­но­го тех­но­ло­ги­че­ско­го поме­ще­ния. Может кон­цен­три­ро­вать вни­ма­ние на части экра­на с помо­щью цве­то­во­го гра­ди­ен­та. Всё — в руках разработчика.

В Свой­ствах экра­на Properties открой­те раз­дел Style (Сти­ли) и нажми­те на трое­то­чие в квад­рат­ных скоб­ках спра­ва от образ­ца суще­ству­ю­ще­го фона в стро­ке Background. Откро­ет­ся окно выбо­ра вари­ан­тов залив­ки фона рабо­че­го окна.

Выбор залив­ки фона рабо­че­го окна: Градиент 

Выбор залив­ки фона рабо­че­го окна: Фотография 

Выбор залив­ки фона рабо­че­го окна: Градиент 

К сво­бо­де твор­че­ства при выбо­ре залив­ки фона рабо­че­го окна луч­ше отно­сить­ся с осто­рож­но­стью: на этот экран опе­ра­тор будет смот­реть весь рабо­чий день и «кис­лот­ные» цве­та, кото­рые могут впе­чат­лить заказ­чи­ка, могут пагуб­но ска­зать­ся на кон­цен­тра­ции вни­ма­ния оператора.

Создание шаблона

Для удоб­ства и уско­ре­ния раз­ра­бот­ки про­ек­та, раз­ра­бот­чик может создать свой шаб­лон, что­бы не тра­тить вре­мя на настрой­ку каж­до­го экра­на сво­е­го про­ек­та. Для это­го надо создать новый экран, настро­ить его пара­мет­ры, задать фоно­вое изоб­ра­же­ние и выбрать в заклад­ке Grouping коман­ду Сохра­нить Шаб­лон Create a Screen Template в верх­ней части окна Редактора.

Новый шаб­лон сохра­ня­ет­ся как файл в пап­ку C:\ProgramData\Progea\­Movicon.NExT\­NewScreenTypes\. Этот файл мож­но пере­име­но­вать или уда­лить, если шаб­лон уже не нужен.

Размещение графических элементов на рабочем экране

Вся та кра­со­та, отоб­ра­жа­е­мая на экране АРМ опе­ра­то­ра, рас­по­ла­га­ет­ся в двух кол­лек­ци­ях: Гале­рее сим­во­лов Symbol Gallery и Набо­ре инстру­мен­тов Toolbox. Раз­ни­ца меж­ду эти­ми кол­лек­ци­я­ми опре­де­ля­ет­ся их функ­ци­я­ми. Сим­во­лы — это про­сто гра­фи­че­ские обра­зы зда­ний, машин, тех­но­ло­ги­че­ских систем и тому подоб­ное. Инстру­мен­ты отоб­ра­жа­ют реаль­ную тех­но­ло­ги­че­скую ситу­а­цию в раз­лич­ной фор­ме от цифр до гра­фи­ков, сиг­на­ли­зи­ру­ют цве­том ава­рии и кри­ти­че­ские состо­я­ния, поз­во­ля­ют управ­лять авто­ма­ти­кой с помо­щью кно­пок, пол­зун­ков и переключателей.

Размещение символов

Гале­рея сим­во­лов нахо­дит­ся в пра­вой части Редак­то­ра. Она «при­пар­ко­ва­на» рядом в Набо­ром инстру­мен­тов и выгля­дит как вер­ти­каль­ный ярлы­чок. Для того, что­бы раз­вер­нуть Гале­рею, про­сто щёлк­ни­те на ярлыч­ке Symbol Gallery.

Для того, что­бы раз­ме­стить сим­вол на рабо­чем экране Movicon​.Next надо про­сто пере­тя­нуть его в нуж­ное место экрана.

Сим­во­лы сгруп­пи­ро­ва­ны по назна­че­нию. При выбо­ре груп­пы сим­во­лов, её назва­ние оста­ёт­ся в заго­лов­ке Гале­реи, что поз­во­ля­ет быст­ро пере­клю­чать­ся меж­ду рабо­чи­ми набо­ра­ми сим­во­лов без их поис­ка в Гале­рее. Уда­лить груп­пу из заго­лов­ка мож­но, нажав на кре­стик рядом с име­нем группы.

Сим­во­лы мож­но груп­пи­ро­вать по рабо­чим момен­там. Напри­мер, мож­но сде­лать сим­во­лы доступ­ные для дан­но­го Поль­зо­ва­те­ля User или для дан­но­го Про­ек­та Project.

Если удоб­нее, что­бы гале­рея сим­во­лов рас­по­ла­га­лась в верх­ней части окна, а бра­у­зер — в ниж­ней, мож­но нажать на неболь­шой сим­вол из двух стре­лок на раз­де­ля­ю­щей полоске.

Установка инструмента

Раз­ме­ще­ние инстру­мен­та в рабо­чем окне систе­мы дис­пет­че­ри­за­ции подоб­но выбо­ру и уста­нов­ке сим­во­лов. Выбе­ри­те ярлык Toolbox (Набор инстру­мен­тов), най­ди­те нуж­ный раз­дел по назна­че­нию и пере­тя­ни­те нуж­ный инстру­мент на рабо­чее поле экрана.

После раз­ме­ще­ния Сим­во­ла или Инстру­мен­та на рабо­чее поле экра­на надо щёлк­нуть на нём два­жды и в открыв­шем­ся окне Свойств Properties надо при­вя­зать его к тэгу Tag ком­му­ни­ка­ци­он­но­го драй­ве­ра, что­бы Инстру­мент отоб­ра­жал, сиг­на­ли­зи­ро­вал или мог управ­лять авто­ма­ти­кой с его помо­щью. Мож­но так­же щёлк­нуть пра­вой кноп­кой мыш­ки на выбран­ном объ­ек­те и выбрать в меню Item Tag. Откро­ет­ся спи­сок тэгов, из кото­рых надо выбрать нужный.

Каж­дый инстру­мент и сим­вол мож­но под­верг­нуть кос­ме­ти­че­ской настрой­ке: изме­нить цвет залив­ки, очер­та­ния; задать отсту­пы со всех сто­рон в рам­ках сво­е­го кон­тей­не­ра; задать коор­ди­на­ты объ­ек­та в поле экрана.