Вы находитесь на странице: 1из 52

TM610

Работа с визуализацией

TM610TRE.40-RUS
2014/05/23
Необходимые условия
Обучающие курсы TM210 — Работа с Automation Studio
(тренинг-модули): TM600 — Работа с визуализацией
Программное обеспе- Automation Studio 4.0
чение
Аппаратное обеспе- [дополнительно] панель Power Panel с сенсорным экраном 10,4"
чение

2 TM610 - Работа с визуализацией


Оглавление

ОГЛАВЛЕНИЕ

1 ВВЕДЕНИЕ.......................................................................................................................................... 4
1.1 Цель обучающего курса....................................................................................................... 4
2 РЕДАКТОР ВИЗУАЛЬНЫХ КОМПОНЕНТОВ................................................................................... 5

3 ПЕРВАЯ VNC ВИЗУАЛИЗАЦИЯ........................................................................................................6

4 РЕДАКТОР ВИЗУАЛЬНЫХ КОМПОНЕНТОВ................................................................................... 7


4.1 Типовой проект "CoffeeMachine".......................................................................................... 7
4.2 Справочная система: раздел Visual Components...............................................................8
4.3 Рабочая область................................................................................................................... 9
4.4 Структура приложения визуализации............................................................................... 10
5 РАЗРАБОТКА ПРОЕКТА ВИЗУАЛИЗАЦИИ....................................................................................13
5.1 Упражнение.......................................................................................................................... 13
5.2 Добавление нового объекта визуализации...................................................................... 15
5.3 Назначение визуализации аппаратному обеспечению....................................................16
5.4 Управление переменными и переменными визуализации..............................................19
5.5 Глобальные свойства объекта визуализации.................................................................. 21
5.6 Использование слоев при разработке страниц................................................................21
5.7 Страницы экрана визуализации........................................................................................ 23
5.8 Стили и таблицы стилей.................................................................................................... 25
5.9 Статический и динамический текст................................................................................... 26
5.10 Языки и шрифты............................................................................................................... 31
5.11 Отображение и изменение переменных процесса.........................................................35
5.12 Управление с помощью сенсорного экрана и клавиатуры............................................41
5.13 Использование графических объектов........................................................................... 47
6 ИТОГ.................................................................................................................................................. 50

TM610 - Работа с визуализацией 3


Введение

1 ВВЕДЕНИЕ

Данный обучающий курс позволяет ознакомиться с возможностями, предоставляемыми встроен-


ным в среду Automation Studio редактором визуальных компонентов (Visual Components).
Редактор визуальных компонентов компании B&R представляет собой среду, с помощью которой
могут быть созданы визуализации любого уровня сложности.

Image 1: Редактор визуальных компонентов

В данном обучающем курсе объясняется, как в среде Automation Studio разработать проект, в
состав которого будет входить визуализация, и как эффективно использовать инструменты ре-
дактора визуальных компонентов.

1.1 Цель обучающего курса

Конкретные примеры иллюстрируют и помогают продемонстрировать простые и эффективные


способы создания визуализации в среде Automation Studio.
Вы узнаете, как...
• ... Использовать редактор визуальных компонентов
• ... Создавать приложения, содержащие визуализации
• ... Применять базовые элементы визуализации
• ... Конфигурировать оборудование, используемое для визуализации
• ... Использовать статические элементы на экране
• ... Использовать динамические элементы на экране
• ... Быстро изменять локализацию, выбирая язык и единицы измерения

4 TM610 - Работа с визуализацией


Редактор визуальных компонентов

2 РЕДАКТОР ВИЗУАЛЬНЫХ КОМПОНЕНТОВ

Среда разработки и поддержки визуализации является неотъемлемым компонентом, встроенным


в среду Automation Studio.
Тем самым обеспечивается единое пространство для разработки и редактирования проекта непо-
средственно вместе с визуализацией.
Происходящие в системе процессы могут отображаться различными способами: на дисплее це-
левой системы, отдельно от контроллера на удаленном терминале (например, на панели Power
Panel) или на виртуальном дисплее VNC (Virtual Network Computing).

Image 2: Встроенная визуализация

В отличие от обычных систем визуализации (когда приложение визуализации работает отдельно


от управляющего контроллера, и для коммуникации используется отдельный канал для получе-
ния доступа к отображаемым параметрам), средство Visual Components интегрировано с задача-
ми контроллера.

Все примеры из данного обучающего курса выполняются с использованием эмулято-


ра контроллера (ARsim). Доступ к визуализации осуществляется с помощью программы
VNC Viewer. Поскольку программные элементы имеют модульную структуру, для отра-
ботки примеров может использоваться любая целевая система SG41

Visualization \ Visual Components VC4

1 Может использоваться любая целевая система, в которой приложения хранятся на карте памяти
CompactFlash.

TM610 - Работа с визуализацией 5


Первая VNC визуализация

3 ПЕРВАЯ VNC ВИЗУАЛИЗАЦИЯ

В этом разделе мы будем использовать справочную систему Automation Studio для создания но-
вого проекта с визуализацией, передачи его в эмулятор контроллера (ARsim), а затем тестирова-
ния программы в среде Automation Studio.

Упражнение: Создание первого проекта, руководствуясь


справочной системой
Создайте новый проект Automation Studio с VNC визуализацией.
При выполнении задания руководствуйтесь указаниями разде-
ла Getting Started («Приступая к работе») справочной системы
Automation Studio.

Automation Software \ Getting started \ Creating Image 3: Создание первого проекта


visualizations with Automation Studio \ First VNC
visualization

1) Создайте новый проект.

2) Добавьте программу.

3) Добавьте визуализацию.

4) Активируйте VNC-сервер и сконфигурируйте его.

5) Откройте редактор визуальных компонентов и создайте


визуализацию из имеющихся объектов.

6) Выполните компиляцию проекта и загрузите его в эмуля-


тор контроллера (ARsim).

7) Откройте программу просмотра VNC и подключите ее к


эмулятору контроллера (ARsim).

8) Протестируйте визуализацию с помощью программы VNC


Viewer.

При поддержке интерактивной справочной системы вы создали свое первое приложение


визуализации с помощью редактора визуальных компонентов.
В следующих нескольких разделах будет разъяснена структура проекта Automation
Studio на основе типового проекта.

6 TM610 - Работа с визуализацией


Редактор визуальных компонентов

4 РЕДАКТОР ВИЗУАЛЬНЫХ КОМПОНЕНТОВ

Для демонстарции редактора визуальных компонентов и структуры самого проекта визуализации


используется проект-пример из Automation Studio.

4.1 Типовой проект "CoffeeMachine"

В состав Automation Studio включено несколько типовых проектов-примеров. Один из таких типо-
вых проектов используется в данном обучающем курсе для демонстрации возможностей редак-
тора визуальных компонентов и многочисленных функций, которые он предоставляет.

Упражнение: Типовой проект Automation Studio — «CoffeeMachine»


Проект-пример может быть открыт из начальной страницы (start page).

Image 4: Выбор типового проекта

1) Откройте типовой проект Automation Studio из начальной страницы.

2) Откройте объект визуализации "Visu" из окна Logical View.

Image 5: Открытие проекта в среде Automation Studio

TM610 - Работа с визуализацией 7


Редактор визуальных компонентов

4.2 Справочная система: раздел Visual Components

Справочная система Automation Studio - ваш верный помощник на протяжении всего процесса
разработки, настройки и ввода проекта в эксплуатацию.
В справочную систему входят руководства по использованию Automation Studio и ее редакторов,
руководства по созданию программ или приложений визуализации и конфигурированию приво-
дов, а также обеспечивает доступ ко всей документации по оборудованию B&R.

Image 6: Справочная система: раздел Visual Components

В текущих тренингах, посвященных визуализации, часто приводятся ссылки на справку, поскольку


она доступна в любое время и впоследствии, когда это будет наиболее актуально, при создании
проекта.

В данном обучающем курсе приводятся ссылки на следующие разделы справочной си-


стемы Automation Studio: Visualization \ Visual Components VC4 и Visualization \ Visual
Components Remote.

8 TM610 - Работа с визуализацией


Редактор визуальных компонентов

4.3 Рабочая область

Окно редактора визуальных компонентов разделено на несколько областей, каждая из которых


выполняет определенную функцию.

Image 7: Рабочая область редактора визуальных компонентов

• Доступ к функциям Visual Components обеспечивается с помощью меню и панелей ин-


струментов.
• Создание, перемещение, удаление и редактирование компонентов визуализации осу-
ществляется в соответствующих узлах структурного дерева в левой части окна.
• Инструменты, предназначенные для конфигурирования компонента, отображаются в
средней части рабочей области.
• Свойства компонента или выбранного объекта отображаются в правой части окна.

Working with Visual Components \ Workspace

Упражнение: Работа с редактором визуальных компонентов


Целью этого упражнения является ознакомление с основными принципами использования редак-
тора Visual Components.

TM610 - Работа с визуализацией 9


Редактор визуальных компонентов

Откройте каждый узел в проводнике визуализации, а затем дважды щелкните на необходимом


объекте, чтобы открыть соответствующий редактор. Свойства объекта выводятся с правой сторо-
ны экрана.

Скрытие проводника позволяет освободить дополнительное


место на экране, которое может быть использовано при созда-
нии визуализации, для более удобной работы с ней.

Image 8: Скрытие проводника проекта

Working with Visual Components \ The workspace \ Toolbar


Working with Visual Components \ The workspace \ Project browser
Working with Visual Components \ The workspace \ Property editor
Working with Visual Components \ The workspace \ Workspace
Working with Visual Components \ The workspace \ Controls

4.4 Структура приложения визуализации

Приложение визуализации состоит из нескольких экранов (Pages), каждый из которых отобража-


ет свою последовательность действий для оператора, отображает процессы, происходящие в
системе.
Взаимодействие оператора с установкой осуществляется посредством клавиатуры или сенсор-
ного экрана.
Процессы, происходящие в системе можно донести до оператора в виде текста, вывода теку-
щих значений параметров процесса и в виде графической информации. Отображаемые в редак-
торе Visual Components элементы называются управляющие элементами (в англоязычной доку-
ментации - Controls).
Управляющие элементы имеют различные свойства, изменение которых определяет их внеш-
ний вид. Управляющий элемент может иметь статические свойства, которые не могут быть изме-
нены во время выполнения программы, или динамические свойства, которые допускают измене-
ния по ходу.
Переменные процесса представляют собой интерфейс между элементом управления и управ-
ляющей программой.

10 TM610 - Работа с визуализацией


Редактор визуальных компонентов

Управляющий эле- Источник данных Свойства управляющего элемента


мент

Image 10: Представление переменных в


источниках данных (data sources) Image 11: Управляющему элементу
Image 9: Выбор назначается его источник данных в поле
управляющего элемента свойств "Value"

Table 1: Связь между переменными процесса и управляющими элементами

Переменные визуализации (Data points) являются переменными процесса, которым в редак-


торе Visual Components могут быть заданы дополнительные свойства, например, единицы изме-
рения или предельные значения.
Когда любой управляющий элемент визуализации детектирует входное воздействие (input),
он запускает выполнение какой-либо операции (action) в приложении визуализации или изменяет
значение связанной с ним переменной процесса. Действие, оказывающееся входным триггером,
настраивается также с помощью свойств.

4.4.1 Глобальные и локальные элементы визуализации

Наряду с локальными (внутренними) элементами, приложение


визуализации также включает в себя и глобальные элементы
для всех объектов в проекте Automation Studio.
Управление глобальными ресурсами, например, общими пере-
менными визуализации, языками и аварийными сообщениями,
в проводнике визуализации осуществляется в разделе "Shared
resources".
Локальные ресурсы используются только в пределах одной ви-
зуализации и управление ими осуществляется в рамках компо-
нента с таким же названием как"Имя текущего объекта визу-
ализации".
Image 12: Ресурсы визуализации

4.4.2 Правила именования в редакторе Visual Components

Так же как и при программировании в Automation Studio, существует ряд рекомендаций, которым
необходимо следовать при разработке визуализации в редакторе Visual Components.

Working with Visual Components \ Conventions

4.4.3 Шаблон визуализации

При добавлении новой визуализации в окне Logical View, выбор используемого шаблона, будет
означать, что он будет содержать
При добавлении новой визуализации в окне Logical View, выбор используемого шаб-
лона, будет означать, что он будет содержать
• Начальная страница (Init_Page)

TM610 - Работа с визуализацией 11


Редактор визуальных компонентов

• Шрифты и два языка — английский и немецкий


• Группы единиц измерения (единицы СИ)
• Ряд предопределенных классов стилей для всех управляющих элементов
• Конфигурации для клавиш сенсорных панелей
• Объявленные базовые аварийные события
• Группы растровых изображений для сенсорных панелей и выводимых аварийных сооб-
щений
• Окантовка и кнопки

12 TM610 - Работа с визуализацией


Разработка проекта визуализации

5 РАЗРАБОТКА ПРОЕКТА ВИЗУАЛИЗАЦИИ

В предыдущем упражнении была описана


структура редактора и его компонентов на ос-
нове проекта-примера из Automation Studio.
В этой главе вы создадите визуализацию в ре-
дакторе визуальных компонентов по примеру
проекта "CoffeeMachine".

Image 13: Типовая программа в редакторе визуальных


компонентов

Будут объяснены и выполнены следующие разделы проекта:

Упражнение: Выполнение программы-примера "CoffeeMachine"


Запустите типовую программу "CoffeeMachine" в среде Automation Studio.
Цель упражнения заключается в загрузке программы-примера в эмулятор ARsim и работе с со-
зданной визуализацией через программу VNC Viewer. В дальнейшем это же потребуется при вы-
полнении других упражнений.

Automation Software \ Getting started \ Creating programs with Automation Studio \


CoffeeMachine example

Уже разработанную визуализацию с именем "Visu"из проекта "CoffeeMachine" можно в


любое время использовать в качестве примера реализации и подсказки. Следует иметь
в виду, что в редакторе визуальных компонентов в каждый момент времени может быть
открыта только одна визуализация.

5.1 Упражнение

Ваша задача заключается в создании собственной визуализации, повторно реализующей функ-


ционал проекта "CoffeeMachine".

5.1.1 Технологическая схема процесса

Сначала производится включение кофемашины, затем осуществляется нагрев воды. После до-
стижения определенной температуры, начинается процесс приготовления выбранного типа кофе.
Оплата за кофе имитируется путем ввода некоторой суммы. Если введенная сумма соответствует
цене выбранного типа кофе, то его приготовление может быть начато.

TM610 - Работа с визуализацией 13


Разработка проекта визуализации

После завершения приготовления можно получить кофе и сдачу.

5.1.2 Используемые переменные процесса

Для обмена данными между визуализацией и пользовательскими приложениями могут исполь-


зоваться следующие переменные процесса.

Операция Объект визуализации Переменная процесса


Выбор типа кофе Список, кнопка gMainLogic.par.coffeeType
Используемые ингредиен- Числовое поле gMainLogic.par.recipe.coffee
ты для напитка gMainLogic.par.recipe.milk
gMainLogic.par.recipe.sugar
gMainLogic.par.recipe.water
Ввод цены на кофе Числовое поле gMainLogic.par.recipe.price
Оплата Числовое поле gMainLogic.par.givenMoney
Включение / отключение Кнопка gMainLogic.cmd.switchOnOff
Запуск процесса приготов- Кнопка diStartCoffee
ления кофе
Задание температуры во- Числовое поле gHeating.status.actTemp
ды
Индикаторы состояния Текстовое поле gMainLogic.cmd.vis.messageIndex

5.1.3 Отображение технологического процесса на экранах визуализации

Визуализация должна иметь следующую структуру:

Главная страница
Структура главной страницы аналогична шаб-
лону. Окантовка и элементы оформления от-
сутствуют. Данные рецепта могут быть измене-
ны здесь путем ввода соответствующих значе-
ний в числовые поля.

Image 14: Структура главной страницы

14 TM610 - Работа с визуализацией


Разработка проекта визуализации

Сервисная страница
В данном обучающем курсе сервисная стра-
ница используется для изменения языка. Эта
страница открывается вручную с главной стра-
ницы.

Image 15: Структура сервисной страницы

5.2 Добавление нового объекта визуализации

Создание нового объекта визуализации и выполнение операций с ним осуществляются в окне


Logical View.
Это было сделано при создании первого проекта в первом упражнении.

Упражнение: Добавление объекта визуализации — TM610


Добавьте новый объект визуализации в окне Logical View и присвойте ему имя TM610. Выберите
разрешение 640 х 480 и альбомную (landscape) ориентацию.

1) Закройте открытую визуализацию.

2) Щелкните правой кнопкой мыши на папке Visualization из контекстного меню, выберите <Add
object>, чтобы вставить новую визуализацию типа VC4 из подкатегории "Visualization".

3) Выберите стандартный шаблон Basic

4) Добавьте этот объект к текущей конфигурации.

Image 16: Добавление нового объекта визуализации Image 17: Выбор стандартного шаблона Basic

TM610 - Работа с визуализацией 15


Разработка проекта визуализации

Теперь в окне Logical View добавлен новый объект визуализации.

Image 18: Объект TM610 в окне Logical View

Объект визуализации отображается в соответствующих позициях в конфигурации про-


граммного обеспечения.

Image 19: Объект TM610 в окне "Software configuration"

Working with Visual Components \ Inserting visualization objects

Исходная визуализация из проекта "CoffeeMachine" имеет поддержку не только языков


по умолчанию (английского и немецкого), но также и китайского языка для демонстрации
текста в формате UNICODE. Этот язык добавляется в новую визуализацию автоматиче-
ски при ее открытии (4.4.1 "Глобальные и локальные элементы визуализации").
Об этом свидетельствует сообщение в окне вывода.
Warning: New language "zh(CN)" was added to the project («Предосте-
режение: К проекту был добавлен новый язык zh(CN)»).

5.3 Назначение визуализации аппаратному обеспечению

До того как приступить к настройке параметров визуализации, она должна быть предварительно
назначена соответствующему аппаратному обеспечению.
Объект визуализации может отображаться различными способами:
• Визуализация на локальном дисплее
• Визуализация отображается через VNC viewer
• Визуализация на терминале, подключенном по сети Ethernet

5.3.1 Визуализация на локальном дисплее

При наличии у контроллера дисплея, визуализация назначается ему в окне Physical View. В кон-
текстном меню элемента Display выберите Configuration .

16 TM610 - Работа с визуализацией


Разработка проекта визуализации

Image 20: Назначение объекта визуализации дисплею

В разделе "VC Mapping" ("Назначение визуали-


зации") может быть выбрана любая визуализа-
ция, которая предварительно была добавлена
в окне "Software configuration" и соответствует
указанному разрешению дисплея.

Image 21: Локальная визуализация на панели Power Panel


PP520

5.3.2 Визуализация через технологию VNC

Объект визуализации может быть назначен VNC-серверу в свойствах интерфейса Ethernet. Что-
бы это сделать, в контекстном меню интерфейса Ethernet выберите Settings. В разделе "VNC
Servers" назначаются визуализации. Данная возможность позволяет нескольким VNC-серверам
быть сконфигурированными для различных визуализаций.
Под полем назначения визуализации располагаются дополнительные настройки для VNC-серве-
ра, как например, пароли и настройки подключения.

Image 22: Назначение визуализации TM610 VNC-серверу

TM610 - Работа с визуализацией 17


Разработка проекта визуализации

Упражнение: Добавление визуализации и настройка программы "VNC Viewer"


Задача заключается в том, чтобы сначала активировать новый VNC объект в окне Physical View
для конфигурации "Simulation".
Затем необходимо назначить, что визуализацию TM610 будет отображаться через VNC. В разделе
VNC server configuration должен быть определен пароль, обеспечивающий доступ как только на
просмотр, так и на управление визуализацией.

1) В окне Physical View откройте настройки интерфейса Ethernet


2) В разделе VNC server назначьте объект визуализации TM610
3) Задайте пароль, обеспечивающий доступ на просмотр и на управление визуализацией.

4) Задайте номер порта равным 5901

5) Загрузите проект в целевую систему и откройте программу VNC Viewer.

Для подключения в программе просмотра VNC необходимо указать IP-адрес и порт 5901.
После ввода пароля отобразится пустая страница визуализации.

Image 23: Выбор визуализации для отображения в программе VNC Viewer

Visual Components Remote \ VNC \ VNC project development

5.3.3 Визуализация на терминале

Так же как и в случае VNC-сервера, визуализация на терминале отображается удаленно.


Терминал подключается, к примеру, через Ethernet-интерфейс к ЦПУ, к терминальному серверу.
Терминал можно добавить перетаскиванием из каталога оборудования (Hardware Catalog) туда,
где располагается Ethernet-интерфейс в окне Physical View.

Image 24: Подключение терминала через Ethernet-интерфейс

18 TM610 - Работа с визуализацией


Разработка проекта визуализации

Сразу же после добавления терминала вы можете перейти к его свойствам, назначить объект
визуализации и настроить параметры подключения к сети.

Image 25: Параметры конфигурации терминала

Visual Components Remote \ Terminal Mode \ Terminal server project development

5.4 Управление переменными и переменными визуализации

Актуальная информация может быть добавлена на экран с по-


мощью переменных, настроенных в среде Automation Studio.
Переменные процесса , которые используются в проекте, свя-
заны с редактором визуальных компонентов через переменные
визуализации (data points), которые и служат для отражения Image 26: Источники данных
технологического процесса в визуализации.
В редакторе визуальных компонентов создание и управление
переменными визуализации осуществляется в разделе "Data
sources" в проводнике.

5.4.1 Связь между переменными процесса и переменными визуализации

Переменные процесса оперируют физическими величинами в проекте.


Однако, в редакторе визуальных компонентов переменные визуализации обладают рядом до-
полнительных свойств. В дополнение к непосредственному использованию значения переменной
процесса, переменные визуализации можно масштабировать, ограничивать диапазон изменения
и необходимую точность.

Переменная визуализации = переменная с дополнительными свойствами.

5.4.2 Переменные визуализации

В проекте-примере уже содержится ряд настроенных переменных визуализации для имеющихся


прикладных программ. Двойной щелчок на раздел Local Data source отобразит все имеющиеся
в проекте Automation Studio переменные визуализации.

TM610 - Работа с визуализацией 19


Разработка проекта визуализации

Image 27: Переменные, используемые в качестве переменных визуализации

Если в прикладной программе переменные изменились, или после добавления новых


переменных, отображаемая в редакторе информация об используемых ресурсах может
быть обновлена путем нажатия клавиши <F5> или соответствующей кнопки на панели
инструментов.

Shared resources \ Data sources

5.4.3 Отображение значения в единицах измерения

Если переменная визуализации подсоединена к любому управляющему элементу в ней, то этот


элемент автоматически наследует все свойства этой переменной.

Это означает, что свойства переменной визуализации (напри-


мер, количество десятичных разрядов и / или название единицы
измерения) настраиваются для переменной, а не для элемен-
та. В редакторе визуальных компонентов управление группами
единиц измерения и выполнение операций с ними осуществля-
ется в разделе Unit groups.

Image 28: Изменение единицы


измерения с °F на °C

Подробнее переменные визуализации с единицами измерения будут описаны ниже.

Shared resources \ Unit groups

20 TM610 - Работа с визуализацией


Разработка проекта визуализации

5.5 Глобальные свойства объекта визуализации

Объект визуализации имеет глобальные свойства, которые могут использоваться для


Объект визуализации имеет глобальные свойства, которые могут использоваться для
• Язык, используемый при запуске визуализации
• Страница, отображаемая после запуска
• Настройка параметров экранной заставки
• Переменные визуализации для управления номером текущей отображаемой страницы и
изменения используемого языка визуализации
• Глубина цвета визуализации
• Настройка реакции на срабатывание

В редакторе визуальных компонентов эти настройки находятся в разделе, носящем имя визуа-
лизации.

Упражнение: Задать используемый по умолчанию язык


Каждый новый проект автоматически поддерживает два языка
(английский / немецкий). Создайте визуализацию на своем род-
ном языке.
В глобальных свойствах задайте необходимый язык по умолча-
нию.

1) Выберите раздел с именем визуализации - "TM610".

2) Измените в свойствах используемый по умолчанию язык. Image 29: Выбор языка, используемого
по умолчанию

5.6 Использование слоев при разработке страниц

Каждая страница, отражающая технологический процесс, может состоять из нескольких слоев.


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

• Шаблон для общих областей страницы


• Объединение различных слоев для формирования
всей страницы целиком
• Блокировка, скрытие и отображение отдельных слоев
во время выполнения программы

Image 30: Использование слоев при


разработке страниц

Перед тем как приступить к созданию конкретных страниц, необходимо определить, какие данные
необходимо будет отображать на всех них.

TM610 - Работа с визуализацией 21


Разработка проекта визуализации

В рассматриваемом примере в заголовке в верхней правой части каждого экрана выводятся дата
и время.
Заголовок отделен от остальной части страницы горизонтальной линией.

Image 31: Пример глобальной страницы

Упражнение: Добавление глобального слоя для отображения времени


Задание заключается в создании нового глобального слоя с именем "globalArea" в разделе
"Common Layers" («Общие слои»). Этот слой будет использоваться для отображения времени
в заголовке страницы.
Формат времени определяется его выбором в виде текстовой группы с именем DateTimeFormat.
Форматы даты и времени могут быть независимы от используемого языка, если используется на-
страиваемый формат строки.

1) Создайте локальную текстовую группу с именем "DateTimeFormat".

2) Добавьте текст в следующих форматах:

Немецкий Английский
%d.%m.%Y %H:%M:%S %m/%d/%Y %H:%M:%S
Table 2: Формат даты и времени

3) Добавьте глобальный слой.

4) Добавьте элемент "DateTime" в верхний правый угол страницы и назначте элементу текст
из группы "DateTimeFormat".

5) Проведите горизонтальную линию шириной 2 пикселя.

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

Image 32: Добавление глобального слоя

Image 33: Настройка формата отображения даты и времени

22 TM610 - Работа с визуализацией


Разработка проекта визуализации

Рекомендуется каждому элементу управления в визуализации задавать имя, соответ-


ствующее выполняемой им функции. В противном случае, при использовании только
имен по умолчанию, в крупном проекте будет сложно определить назначение отдельных
элементов управления.
Цвет фона глобального слоя не влияет на страницу, на которой он будет расположен.
Независимо от вашего родного языка, для используемых элементов в проекте рекомен-
дуется задавать английские названия. Это упростит редактирование проекта вашими
коллегами из других стран. Данная рекомендация распространяется на все учебное по-
собие.

В глобальном слое содержится вся информация, которая остается неизменной и исполь-


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

Visualization resources \ Common layers

5.7 Страницы экрана визуализации

Страницы состоят из одного или нескольких слоев.

На слое страницы размещаются элементы управления, исполь-


зуемые для отображения текста или значений переменных, для
обеспечения взаимодействия между пользователем и систе-
мой. При создании новой визуализации, по умолчанию она уже
содержит страницу с одним локальным слоем.
Для данного примера необходимы следующие страни-
цы:
• Страница для управления системой
• Сервисная страница
• Страница с графиками температуры
(см. TM640 «Аварийные сообщения, графики и диагно-
Image 34: Управление страницами
стика»). визуализации
• Страница с аварийными событиями и сообщениями
(см. TM640 «Аварийные сообщения, графики и диагно-
стика»).

Чтобы добавить новую страницу, необходимо щелкнуть правой кнопкой на узле "Pages" и выбрать
из контекстного меню <Add Page>. Альтернативный вариант: воспользоваться кнопкой <Insert>.
Чтобы добавить ссылку на глобальный слой, следует щелкнуть правой кнопкой мыши на узле
страницы и выбрать из контекстного меню <Add Layer Reference>. Затем можно выбрать необ-
ходимый слой из доступных.

TM610 - Работа с визуализацией 23


Разработка проекта визуализации

Упражнение: Создание главной и сервисной страниц


Главная страница используется для управления системой. На сервисной странице отображается
последовательность операций технологического процесса приготовления кофе.
Добавьте глобальной слой globalArea к каждой из этих страниц.
Ход выполнения:
• Переименуйте "Init_Page" в "MainPage".
• Создайте новую страницу и назовите ее "ServicePage".
• Добавьте глобальной слой к обеим страницам.

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

Теперь в разделе "Pages" расположены две страницы, каждая из которых имеет локаль-
ный слой "default" и ссылку на глобальный слой.

Image 35: Локальные слои и ссылки на слои

В редакторе локальные и глобальные слои (заданные ссылками) отображаются с перекрытием


и наложением друг на друга..
Если страница содержит слои, которые должны динамически отображаться и скрываться во вре-
мя выполнения программы (например, диалоговые окна или окна сообщений), то они могут быть
скрыты на время редактирования для упрощения работы над проектом.
Для этой цели используется пиктограмма скрытия / отображения, расположенная на панели ин-
струментов страницы при открытой закладке "Layers".

Image 36: Управление видимостью слоев

24 TM610 - Работа с визуализацией


Разработка проекта визуализации

Упражнение: Изменение видимости слоев в редакторе


Раскройте выпадающий список слоев, находящийся сверху на панели при активной вкладке
"Layers" редактора страниц, и измените видимость слоев с помощью пиктограммы скрытия / отоб-
ражения.

Visualization resources \ Pages

5.8 Стили и таблицы стилей

Стиль (style) определяет внешний вид объекта, который может быть изменен путем задания
заранее предопределенных свойств.
Таблица стилей представляет собой набор стилей. Назначение таблицы стилей для визуализа-
ции является простым способом придания ей унифицированного внешнего вида.
Преимущества применения таблицы стилей
• Централизованное управление свойствами, отвечающими за внешний вид объекта (на-
пример, цвет поля ввода или вывода).
• Возможность создания нескольких стилей для одного объекта.
• Свойства будет необходимо настроить только в одном месте, при этом изменения при-
меняются ко всем объектам в проекте, которым назначен этот стиль.

Image 37: Пример стиля для числовых полей

С целью наглядности в данном обучающем курсе для элементов управления ввода и


вывода будут использоваться различные стили.

Visualization resources \ Style sheets

TM610 - Работа с визуализацией 25


Разработка проекта визуализации

5.9 Статический и динамический текст

В редакторе визуальных компонентов для отображения текста используется управляющий эле-


мент "Text", где можно как непосредственно вводить текстовое сообщение, так и отображать его
через ссылку на текстовую группу.

Image 38: Статический и динамический текст

Применение текстовых групп для управления статическим и динамическим текстом поз-


воляет централизовано и многократно его использовать на протяжении всего проекта.

Для наших задач это означает, что создание текста и выполнение всех операций с ним будут
выполняться через текстовые группы. Такие элементы, как текст, кнопки и списки будут содержать
только ссылку на соответствующую тексту группу.
Текст необходимо вывести для следующих элементов:
• Тип кофе — управляющий элемент Listbox
• Приготовление кофе — управляющий элемент Text
• Оплата — управляющий элемент Text
• Отображение температуры воды — управляющий элемент Text
• Текстовые сообщения — управляющий элемент Text в качестве динамического текста

Visualization resources \ Text groups


Control reference \ Text

Упражнение: Создание текстовых групп для всех текстов и описаний


Создайте следующие локальные текстовые группы:
• Control («Элемент управления»)
• Recipe («Рецепт»)
• Messages («Сообщения»)
• CoffeeTypes («Типы кофе»)

Введите все тексты, приведенные ниже для английского и немецкого языков. В скобках указыва-
ются индексы. Добавьте текстовые группы в локальный узел с именем "Text Groups" (внизу).

26 TM610 - Работа с визуализацией


Разработка проекта визуализации

1) Текстовая группа "Control"

Индекс Немецкий язык Английский язык


0 Ein On («ВКЛ»)
1 Aus Off («ОТКЛ»)
2 Start Start («Пуск»)
3 Geld einwerfen Insert coin («Внесите оплату»)
Table 3: Тексты, содержащиеся в текстовой группе Control

2) Текстовая группа "Recipe"

Индекс Немецкий язык Английский язык


0 Preis Price («Цена»)
1 Milch Cream («Сливки»)
2 Zucker Sugar («Сахар»)
3 Kaffee Pulver Coffee powder («Молотый кофе»)
4 Wasser Water («Вода»)
5 Wassertemperatur Water temperature («Температура во-
ды»)
Table 4: Тексты, содержащиеся в текстовой группе Recipe

3) Текстовая группа "Messages"

Индекс Немецкий язык Английский язык


0 Maschine ist ausgeschaltet Machine is switched off («Машина отклю-
чена»)
1 Wassertemperatur noch nicht erreicht Water temperature not yet stable («Не до-
стигнута заданная температура воды»)
2 Wassertemperatur erreicht Water set temperature reached («Достиг-
нута заданная температура воды»)
Table 5: Тексты, содержащиеся в текстовой группе Messages

4) Текстовая группа "CoffeeTypes"

Индекс Немецкий язык Английский язык


0 Normal Regular («Регуляр»)
1 Cappuccino Cappuccino («Капучино»)
2 Espresso Espresso («Эспрессо»)
Table 6: Тексты, содержащиеся в текстовой группе CoffeeTypes

Созданные текстовые сообщения теперь могут использоваться для отображения стати-


ческого или динамического текста на управляющих элементах на английском или немец-
ком языке.
В общих ресурсах также определен и третий язык, китайский. Мы обсудим использование
этого языка в главе 5.10 "Языки и шрифты".

TM610 - Работа с визуализацией 27


Разработка проекта визуализации

При добавлении объекта ему присваивается имя по умолчанию (например, TextGroup_1).


Текстовым группам всегда следует присваивать говорящие имена, так чтобы впослед-
ствии их можно было легко идентифицировать.

В списке показаны возможные типы кофе.

Упражнение: Выбор типа кофе из списка


Как показано, доступные типы кофе отображаются в виде списка.
Добавьте элемент "Listbox" на страницу "MainPage" и в его свойствах укажите текстовую группу
"CoffeeType".

Свойство Value
Name («Имя») lstCoffeeType
Style class («Стиль») Output («Вывод»)
Value / Source («Значение / Ис- MultipleTexts
точник»)
Value / Source / Textgroup («Зна- CoffeeType («Тип кофе»)
чение / Источник / Текстовая Image 39: Свойства управляющего
группа») элемента "Listbox"

Value / Source / IndexDatapoint gMainLogic.par.CoffeeType


(«Значение / Источник / Индекс
точки данных»)
Format / alignment / Horizontal Left («По левому краю»)
(«Формат / Выравнивание / По
горизонтали»)
Format / Buttons / Slider («Фор- Never («Нет»)
мат / Кнопки / Ползунок»)
Table 7: Свойства элемента управления Listbox

1) Перетяните элемент из окна "Tools" на предварительно открытую страницу.

2) Отрегулируйте размер элемента, удерживая нажатой кнопку мыши и перетаскивая точки на


его границе.

3) Измените свойства.

Теперь список для выбора типа кофе выглядит следующим образом:

Image 40: Управляющий элемент Listbox

28 TM610 - Работа с визуализацией


Разработка проекта визуализации

Control reference \ Listbox

Изменяя язык с помощью пиктограммы на панели инструментов, вы можете проверить,


вмещает ли управляющий элемент текущего размера (с заданной длиной текста, высо-
той и содержимым) тексты для всех языков.

Image 41: Выбор языка в редакторе визуальных компонентов

Элемент "Text" используется для отображения описания объ-


екта или текста, который изменяется во время выполнения про-
граммы.
Image 42: Управляющий элемент
"Text" («Текст»)

Control reference \ Text

Упражнение: Отображение текстов описания


Для вывода данных рецепта, имитации оплаты и отображения температуры воды создайте соот-
ветствующие тексты на странице "MainPage", используя элемент "Text".
Это процедура однотипна для всех текстов. В качестве примера будет рассмотрено отображение
текста о температуре воды.

Свойство Value
Name («Имя») txtWaterTemperature
Value / Source («Значение / SingleText
Источник»)
Value / Source / TextGroup Recipe («Рецепт»)
(«Значение / Источник /
Текстовая группа»)
Value / Source / Text («Зна- 5: Water temperature
чение / Источник / Текст») («Температура воды»)
Table 8: Свойства текстового поля

TM610 - Работа с визуализацией 29


Разработка проекта визуализации

Тексты сообщений были созданы с использованием управляющих элементов "Text" и


теперь выглядят следующим образом:

Image 43: Управляющий элемент "Text" («Текст»)

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

Image 44: Выравнивание управляющих элементов

И в завершение рассмотрим порядок отображения динамического текста в управляющем эле-


менте "Text".
В отличие от статического текста, вывод динамического текста осуществляется через перемен-
ную процесса.

Упражнение: Отображение сообщения


Создайте текстовое сообщение на странице „MainPage“ с помощью элемента управления „Text.
Рамка вокруг текста.

Свойство Value
Name («Имя») txtMessage
Value / Source («Значение / MultipleTexts
Источник»)
Value / Source / TextGroup Messages («Сообщения»)
(«Значение / Источник /
Текстовая группа»)
Value / Source / Local.gMainLogic.cmd.vis.messageIndex
IndexDatapoint («Значение /
Источник / Индекс точки
данных»)
Table 9: Свойства текстового поля

30 TM610 - Работа с визуализацией


Разработка проекта визуализации

Свойство Value
Appearance / Border Flat_Black
(«Внешний вид / Рамка»)
Table 9: Свойства текстового поля

Тексты сообщений были созданы с использованием управляющих элементов "Text" и те-


перь выглядят следующим образом:

Image 45: Управляющий элемент Text для отображения динамических текстов

5.10 Языки и шрифты

Раздел language (язык)относится к определенному языку, на-


пример, немецкому или японскому.
Языки подразделяются на языковые семьи и однозначно иден-
тифицируются с помощью параметра "Language Codes" (в со-
ответствии с требованиями ISO2 649-1 and 639-2).

Добавление языков и выполнение с ними других операций осуществляется в разделе общих ре-
сурсов "Languages".

Shared resources \ Languages

Для всех текстов, которые не могут быть охвачены на этапе разработки, может быть
задан базовый язык. В таких случаях любое пустое текстовое поле во время сборки
проекта будет заполнено текстом на базовом языке.
Базовый язык определяется в разделе Languages («Языки») с помощью свойства
FallBackLanguage.

В сфере типографии шрифтами обозначаются наборы графических рисунков с начертаниями


знаков. В редакторе визуальных компонентов управление шрифтами осуществляется в разделе
Fonts («Шрифты»).

2 ISO: International Organization for Standardization — Международная организация по стандартизации

TM610 - Работа с визуализацией 31


Разработка проекта визуализации

Image 46: Шрифты визуализации

До сих пор мы использовали шрифты, определяемые стилями.


Шрифт должен быть настроен для каждого языка, используемого в проекте.
Элемент "Font" в редакторе визуальных компонентов позволяет настраивать для каждого языка
как сам шрифт, так и его свойства.
• Шрифты TrueType
• Размер шрифта (в пикселях)
• Полужирный и / или курсив

По умолчанию в проекте содержатся показанные выше шрифты. После задания шрифта, в свой-
ствах элемента вы можете определить его размер и тип .

Изменение языка также может повлиять на тип шрифта и его размер (например, в слу-
чае отображения текста на азиатском языке). В таких случаях для элемента управления
должно быть задано два размера шрифта.

Image 47: Различные размеры шрифта в зависимости от языка

Упражнение: Изменение размера шрифта для конкретного языка


Для китайского "Chinese" языка измените размер шрифта Arial9px с 9 на 12 пикселей.
Задайте для текстовой группы "Messages" текст в пункте Chinese При открытом редакторе стра-
ницы "MainPage" измените язык и проверьте размер текста.

Image 48: Изменение языка в редакторе визуализации

Проверьте, корректно ли отображается шрифт в элементе управления с именем txtMessage (если


ему назначено, например, такое имя) или Text_n (имя по умолчанию):

Свойство Value
Name («Имя») txtMessage
Table 10: Свойства текстового поля

32 TM610 - Работа с визуализацией


Разработка проекта визуализации

Свойство Value
Appearance / Font («Внеш- Arial9px
ний вид / Шрифт»)
Table 10: Свойства текстового поля

Размер текстового сообщения превышает размер текстового поля. Если по высоте или
ширине текст не помещается в заданные границы, то размер текстового поля следует
увеличить.

Image 49: Управляющий элемент "Text" после изменения языка

В разделе 5.12 "Управление с помощью сенсорного экрана и клавиатуры" описывается,


каким образом язык может быть изменен во время выполнения программы.

В дополнение к шрифтам, входящим в состав ОС Windows, при установке Automation Studio уста-
навливается также ряд дополнительных шрифтов для редактора Visual Components (в процессе
установки должно быть принято соответствующее лицензионное соглашение):
В дополнение к шрифтам, входящим в состав ОС Windows, при установке Automation
Studio для редактора Visual Components также устанавливаются следующие шрифты
(в процессе установки должно быть принято соответствующее лицензионное согла-
шение):
• Arial и Arial Unicode
• Bitstream Vera Sans

Эти шрифты не требуют дополнительной лицензии в режиме выполнения.


Большинство шрифтов Windows защищено авторским правом. По этой причине могут
налагаться определенные условия лицензирования, ограничивающие их использование
в редакторе Visual Components. Не все шрифты разрешается использовать бесплатно.
Этот юридический аспект должен всегда проверяться перед использованием шрифта!

Unicode является международным стандартом, цель которого


заключается в определении цифрового кода для каждого гра-
фического символа или элемента в любом тексте и системе
символов.

Image 50: Unicode

TM610 - Работа с визуализацией 33


Разработка проекта визуализации

Visualization resources \ Fonts


Visualization resources \ Fonts \ Using fonts
Shared resources \ Languages \ Unicode
Visualization resources \ Fonts \ Unicode fonts
Working with Visual Components \ Editing texts externally

Сглаживание (Anti-aliasing) обеспечивает устранение «зубча-


тости» по краям шрифта.
Функция сглаживания может быть как включена, так и отключе-
на для всех текстов проекта в свойствах объекта визуализации.

Image 51: Сглаживание

Visualization resources \ Visualization object \ Anti-aliasing

34 TM610 - Работа с визуализацией


Разработка проекта визуализации

5.11 Отображение и изменение переменных процесса

Для отображения или изменения значения переменной процесса в редакторе визуаль-


ных компонентов может использоваться управляющий элемент "Numeric" (цифровой) или
"Alphanumeric" (буквенно-цифровой).

Image 52: Отображение и изменение переменных процесса

В программе-примере отображение и ввод значений в перемен-


ные процесса осуществляются с помощью элемента "Numeric".
Image 53: Элемент "Numeric"

Следующие элементы должны отображаться в виде числовых значений:


• Имитации оплаты — значения и отображаются и редактируются в числовом поле
• Приготовление кофе — значения отображаются в числовом поле
• Внесение оплаты — отображается в виде текста
• Отображение температуры воды — значения, отображаемые в числовом поле приведе-
ны к типу "scaled"

Операция Визуальные компо- Переменная процесса


ненты
Используемые ингре- Числовое поле gMainLogic.par.recipe.coffee
диенты для напитка gMainLogic.par.recipe.milk
gMainLogic.par.recipe.sugar
gMainLogic.par.recipe.water
Ввод цены на кофе Числовое поле gMainLogic.par.recipe.price
Оплата Числовое поле gMainLogic.par.givenMoney
Отображение темпе- Числовое поле gHeating.status.actTemp
ратуры воды

Упражнение: Имитации оплаты — значения и отображаются и редактируются в числовом


поле
Активация управляющего элемента осуществляется нажатием или прикосновением в пределах
границ элемента.
Для ввода значений в редакторе визуальных компонентов используется уже созданная виртуаль-
ная клавиатура "NumPad". Вводимое значение должно находиться в пределах от 1 до 10.

TM610 - Работа с визуализацией 35


Разработка проекта визуализации

Свойство Value
Name («Имя») valueInsertCoin
Style class («Класс стиля») Input («Ввод»)
Value / Datapoint («Значе- gMainLogic.par.givenMoney
ние / Переменная визуали-
зации»)
Value / MinValue («Значе- 0
ние / Мин. значение»)
Value / MaxValue («Значе- 10
ние / Макс. значение»)
Format / UnitText («Формат / Abbreviation («Сокраще-
Текст единицы измерения») ние»)

1) Перетяните элемент "Numeric" из списка управляющих элементов в открытый редактор


страницы и поместите его рядом с текстом описания Insert money («Внесите оплату»).

2) Измените свойство StyleClass на Input («Ввод»).

3) Добавьте переменные процесса, пределы и текст единицы измерения.

Изменение поля "StyleClass" автоматически задает свойства, необходимые для


того,чтобы можно было вводить данные, например Input = True, Input/TouchPad = NumPad,
а также внешний вид окантовки, позволяющей отличать поля ввода от вывода.

После назначения переменной процесса "gMainLogic.par.givenMoney" элементу и используе-


мого текста единицы измерения будет отображаться число с двумя десятичными разрядами и
указанной размерностью.

Control reference \ Numeric

Значение с указанной размерностью


Переменная визуализации gMainLogic.par.givenMoney представляет собой переменную типа
"Real". Редактор визуальных компонентов автоматически отображает переменные визуализации
с использованием этого типа данных, т.е. с десятичными разрядами.

Image 54: Тип данных gMainLogic.par.givenMoney

Для того чтобы эта переменная визуализации отображалась с определенным количеством знаков
после запятой и / или с текстом единицы измерения (например, евро €), она должна быть связана
с группой единиц измерения.

36 TM610 - Работа с визуализацией


Разработка проекта визуализации

Единицы измерения и переменные визуализации являются глобальными ресурсами. Эти


элементы уже были сконфигурированы для визуализации "Visu" и также могут использо-
ваться в другой визуализации. Далее приводится описание процесса их создания.

Создание единиц измерения и выполнение операций над ними


осуществляется в разделе "Unit groups".
Текст единицы измерения и количество десятичных знаков
определены в группе с именем "Currency"(«Валюта»).

Image 55: Группы единиц измерения

Image 56: Группа единиц измерения Currency («Валюта»)

Группа Currency («Валюта») содержит только одну единицу измерения Euro («Евро») (€).
Поскольку для данной группы не требуется никак переключаться во время выполнения програм-
мы, то единица измерения автоматически получает индекс 0 при назначении ее переменной ви-
зуализации.

Кроме того, для данной единицы измерения используется только аббревиатура, следо-
вательно функция масштабирования не требуется. Определяются только свойства аб-
бревиатуры и точность по умолчанию.

Группа единиц измерения Currency («Валюта») назначается для переменной


gMainLogic.par.givenMoney в разделе Data Sources Назначение возможно только в том случае,
если задана настройка VCType = SCALED.

Image 57: Подключение группы единиц измерения Currency («Валюта») к переменной визуализации типа "scaled"

Shared resources \ Unit groups


FAQ \ Display \ Displaying a value with unit text

Единицы измерения и значение параметра масштабирования настраиваются не для эле-


мента управления, а для переменной визуализации (переменная процесса + свойства).

TM610 - Работа с визуализацией 37


Разработка проекта визуализации

Упражнение: Вывод параметров рецепта — вывод числовых значений


Значения параметров рецепта отображаются тоже с помощью элемента "numeric".
Ниже приводится описание свойств для переменной процесса Sugar («Количество сахара»),
остальные параметры рецепта настраиваются аналогичным образом.

Свойство Value
Name («Имя») valSugar
Value / Datapoint («Значе- gMainLogic.par.receipe.sugar
ние / Точка данных»)
Format / UnitText («Формат / Abbreviation («Сокраще-
Текст единицы измерения») ние»)
Table 11: Свойства параметра только на вывод

1) Разместите элементы "numeric" рядом с текстами описания.

2) Измените свойства в соответствии с количеством каждого ингредиента.

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

Значения параметров рецепта отображаются с единицами измерения.

Image 58: Элемент управления "Numeric"

Значение с возможностью выбора единицы измерения


В примере "CoffeeMachine" текущая температура воды связывается с переменной визуализации
"gHeating.status.actTemp".
Температура задается с точностью 0,1 °С.
Поскольку датчик температуры выдает значение температуры также с точностью 0,1 °С. Однако,
градусы Цельсия используются не во всех странах. В некоторых из них температуру принято из-
мерять в градусах по Фаренгейту.

38 TM610 - Работа с визуализацией


Разработка проекта визуализации

Для отображения температуры воды необходимо обес-


печить поддержку следующих функций:
• Масштабирование (пересчет) исходного значения в °C
• Масштабирование (пересчет) исходного значения в °F
• Выбор типа масштабирования (пересчета) в зависимо-
сти от языка интерфейса
• Отображение значения с одним знаком после запятой
• Отображение единицы измерения °C или °F

Image 59: Температура

Перед тем как перейти к рассмотрению того, каким образом мо-


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

Упражнение: Вывод температуры воды — Numeric output


Температура воды отображается с помощью элемента "Numeric".

Свойство Value
Name («Имя») valTemperature
Value / Datapoint («Значе- gHeating.status.actTemp
ние / Точка данных»)
Format / UnitText («Формат / Abbreviation («Сокраще-
Текст единицы измерения») ние»)
Table 12: Свойства выводимого числового параметра

Пересчитанное (scaled) значение температуры отображается с одним знаком после за-


пятой и единицей измерения (°C или °F).

Image 60: Элемент управления "Numeric" с пересчитанным (scaled)) значением температуры и текстом
единицы измерения

Функция пересчета обеспечивает преобразование физического значения переменной процесса


в значение, которое может быть отображено (значение параметра процесса), в соответствии с
линейной зависимостью y=k*x+d.
При разрешении 1/10 градуса физическое значение 200 будет соответствовать отображаемому
значению 20,0 °C.

TM610 - Работа с визуализацией 39


Разработка проекта визуализации

K = 0.1 шаг приращения значения на одну десятую)


d = 0 (смещение)
y = 0,1 * 200 + 0 = 20,0
Для отображения градусов по Фаренгейту используется следующая формула:
°F = °C * 9/5 + 32
Формулы пересчета, относящиеся к одному и тому же физическому параметру, могут быть сгруп-
пированы в unit group.
Для изменения отображаемой единицы измерения температуры используется группа единиц из-
мерения "Temperatures".
В состав этой группы входят две единицы измерения — градусы Цельсия и градусы Фаренгейта.
Каждая единица измерения характеризуется именем, аббревиатурой, полным текстом и точно-
стью (количеством знаков после запятой).

Image 61: Группа единиц измерения Temperatures («Значения температуры»)

Переменная процесса, подключенная к свойствам группы еди-


ниц измерения, используется для изменения единицы измере-
ния во время выполнения программы.

Image 62: Изменение единицы


измерения

Пересчет значений в градусы по Фаренгейту


В свойствах каждой единицы измерения функция пересчета
(scaling) имеет линейную зависимость. Для пересчета темпера-
туры по Фаренгейту функция пересчета использует статическое
соотношение (Type = StaticPairs). Используя формулу °F = 9/5
х °C + 32 , мы получаем следующие внутренние значения: 0 °C
= 32 °F, а также для любой другой точки, например, 1000 °C =
1832 °F.

Image 63: Единица измерения


Fahrenheit («Градусы по Фаренгейту»)

Пересчет значений в градусы по Цельсию


Никакого преобразования не требуется, поскольку переменная
процесса уже предоставляет значение в градусах по Цельсию.
Следовательно, пересчет осуществляется с коэффициентом 1.

Image 64: Единицы измерения Celsius


(«Градусы по Цельсию»)

40 TM610 - Работа с визуализацией


Разработка проекта визуализации

Группа единиц измерения назначается


переменной"gHeating.status.actTemp". Назначение возможно
только в том случае, если задана настройка VCType = SCALED.

Image 65: Группа единиц измерения Temperatures («Значения температуры») связана с переменной визуализации

Shared resources \ Unit groups


FAQ \ Display \ Displaying a value with unit text

5.12 Управление с помощью сенсорного экрана и клавиатуры

Реакция на касание может осуществляться через: такие элементы управления как кнопки и ак-
тивная зона (hotspot), а также аппаратные клавиши.

Image 66: Управление с помощью сенсорного экрана и клавиатуры

В редакторе визуальных компонентов каждое назначенное действие (key action) привязыва-


ется к виртуальной клавише (virtual key). Благодаря этому становится возможным назначать
действия и реакции на клавиши независимо от того, какое используется оборудование.
В данном упражнении будут рассмотрены следующие операции:
• Выбор типа кофе
• Включение и отключение кофемашины
• Запуск процесса приготовления кофе
• Выбор страницы, отображаемой на экране
• Изменение языка

Использование виртуальной клавиши можно сравнить с использованием глобального


слоя: Она также не исполняет никакой функции сама по себе, пока не будет подключена
или использоваться на странице.

TM610 - Работа с визуализацией 41


Разработка проекта визуализации

Виртуальные клавиши и назначаемые действия


Виртуальная клавиша (virtual key)не связана напрямую с фи-
зической клавишей или полем сенсорного экрана.

Image 67: Использование


виртуальных клавиш

Клавиша этого типа только описывает поведение клавиши с помощью назначаемого ей действия
(key action). Место, в котором это действие происходит, не имеет значения. Назначенное дей-
ствие (key action) не будет выполняться до тех пор, пока виртуальная клавиша не будет связана
с физическим объектом.

Назначаемые клавишам действия являются аппаратно-независимыми

Visualization resources \ Keys

Назначаемое действие (key action) описывает действию, которое выполняется при нажатии кла-
виши или кнопки на сенсорном экране.
В отношении рассматриваемого примера это означает, что при нажатии кнопки пере-
менная визуализации будет изменена в следующих случаях:
• При изменении выбранного типа кофе
• Во время записи 0/1 при выключении / отключении
• Во время записи 1 для запуска процесса приготовления кофе
• Во время записи при изменении языка

Изменение страницы осуществляется не через переменную визуализации, а с помощью другого


назначаемого действия.
В редакторе визуальных компонентов назначаемые действия могут быть как локальными так и
глобальными.

Локально назначаемые действия (Local key actions) относятся только к одному слою и приме-
няются только в том случае, если этот слой является активным.
Локально назначаемые действия создаются при добавлении на редактируемую страницу кнопки
или активной зоны (hotspot).
Перед назначаем виртуальной клавише действия, эта клавиша (virtual key) предварительно долж-
на быть создана. Виртуальная клавиша создается для элементов кнопки или активной зоны после
нажатия кнопки "Browse" в разделе свойств элемента "Keys".

42 TM610 - Работа с визуализацией


Разработка проекта визуализации

Image 68: Создание новой виртуальной клавиши

Введите имя, описывающее действие, затем выберите назна-


чаемое клавише действие.

Image 69: Выбор назначаемого


действия (key actions)

Visualization resources \ Keys \ Key actions

Глобально назначаемые действия (Global key actions) относятся ко всей визуализации и до-
ступны для любого слоя и любой страницы.
Виртуальные клавиши с глобально назначаемыми действиями создаются путем двойного щелчка
на узле "Keys".

Упражнение: Изменение типа кофе с помощью двух кнопок


Измените тип кофе, используя две кнопки. Кнопки должны обеспечивать изменение переменной
процесса "gMainLogic.cmd.coffeeType" в диапазоне от 0 до 2.
Назначенное действие (key action) "UpDownDatapoint" кнопке должно увеличивать значение пе-
ременной визуализации в пределах от 0 до 2, а действие, назначенное другой кнопке, должно
уменьшать это значение в пределах от 2 до 0.
Назначьте кнопкам различные стили.

Свойство Value
Name («Имя») cmdCoffeeTypeMinus
Style class («Класс стиля») ScrollUpButton
Keys («Клавиши») vkTypeMinus
Table 13: Настройки для кнопки прокрутки

TM610 - Работа с визуализацией 43


Разработка проекта визуализации

Свойство Value
Keys / Action / Type («Клавиши» / «Действие» / UpDown data point («Точка
«Тип») данных UpDown»)
Keys / Action / Repeat («Клавиши» / «Дей- False («Ложь»)
ствие» / «Повторение»)
Keys / Action / Value / Datapoint («Клавиши» / gMainLogic.par.coffeeType
«Действие» / «Значение» / «Точка данных»)
Keys / Action / Value / MinValue («Клавиши» / 0
«Действие» / «Значение» / «Мин. значение»)
Keys / Action / Value / MaxValue («Клавиши» / 2
«Действие» / «Значение» / «Макс. значение»)
Keys / Action / Value / StepValue («Клавиши» / -1
«Действие» / «Значение» / «Шаг»)
Table 13: Настройки для кнопки прокрутки

1) Вставьте две кнопки рядом со списком (элемент listbox).

2) Расположите их в требуемых местах и настройте размер (например, 32x32 пикселя).


3) Добавьте по одной новой виртуальной клавише для каждой кнопки.

4) Назначенное действие UpDownDatapoint

5) Настройте свойства каждой кнопки.

Задание в свойстве "StepValue" отрицательного значения приводит к уменьшению зна-


чения переменной процесса, задание положительного значения — к увеличению значе-
ния.

Задание в свойстве "StepValue" значения -1 или 1 позволяет уменьшать или увеличивать


переменную процесса.

Image 70: Назначенное действие UpDownDatapoint

Назначение соответствующих стилей позволяет визуально различить две кнопки.

Виртуальной клавише с глобально назначенным действием могут быть дополнительно


заданы локально назначаемые действия. При этом следует помнить, что также существу-
ют исключительные назначенные действия (exclusive key actions ), которые препят-
ствуют созданию дополнительных локально назначаемых действий.

44 TM610 - Работа с визуализацией


Разработка проекта визуализации

Key action reference \ UpDownDatapoint


Visualization resources \ Keys \ Key actions

В данном учебном пособии рассматриваются только локально назначаемые действия.


Далее мы создадим элементы управления, которые позволяют включать и отключать кофемаши-
ну, а также запускать процесс приготовления кофе.

Упражнение: Кнопки для включения и отключения


Используйте две кнопки для включения и отключения машины. Кнопки должны записывать значе-
ния 0 (откл) и 1 (вкл) в переменную процесса "gMainLogic.cmd.switchOnOff".
Запись определенного значения в переменную процесса осуществляется с помощью назначае-
мого действия "SetDatapoint" .

Свойство Value
Name («Имя») cmdCoffeeOn
Keys («Клавиши») vkCoffeeOn
Keys / Action / Type («Клавиши» / «Действие» / Set data point
«Тип»)
Keys / Action / Value / Datapoint («Клавиши» / gMainLogic.cmd.switchOnOff
«Действие» / «Значение» / «Точка данных»)
Keys / Action / Value / SetValue («Клавиши» / 1
«Действие» / «Значение» / «Задать значение»)
Table 14: Свойства кнопки включения (On)

1) Добавьте две кнопки.

2) Расположите их в требуемых местах и настройте размер.

3) Добавьте по одной новой виртуальной клавише для каждой кнопки.

4) Назначьте клавише действие SetDatapoint

5) Настройте свойства каждой кнопки.

Когда в переменную "gMainLogic.cmd.switchOnOff" записывается значение 1, то запус-


кается процесс нагревания, и температура повышается. При достижении заданной для
выбранного типа кофе температуры выдается соответствующее сообщение в строке со-
общений.

Если необходимо, чтобы после нажатия кнопка оставалась в нажатом состоянии, следует
использовать действие "ToggleDatapoint".

TM610 - Работа с визуализацией 45


Разработка проекта визуализации

Key action reference \ SetDatapoint


Key action reference \ ToggleDatapoint

Кнопка нажимается для того, чтобы запустить процесс приготовления кофе.


Прикладная программа проверяет наличие указанных ниже состояний, при их соблю-
дении процесс приготовления кофе может быть запущен:
• Кофемашина должна быть включена.
• Температура воды должна соответствовать заданному значению.
• Оплата должна быть произведена.

Упражнение: Создание кнопки для запуска процесса приготовления


Создайте кнопку, с помощью которой будет запускаться процесс приготовления кофе.
При нажатии кнопки должно записываться значение 1 в локальную переменную процесса
"visCtrl.cmdStartCoffee".
Действие "MomentaryDatapoint" записывает одно значение в переменную процесса пока кнопка
удерживается и другое значение при ее отпускании.

Свойство Value
Name («Имя») cmdStartCoffee
Keys («Клавиши») vkStartCoffee
Keys / Action / Type («Клавиши» / «Действие» / Momentary data point
«Тип») («Мгновенная точка дан-
ных»)
Keys / Action / Value / Datapoint («Клавиши» / visCtrl.cmdStartCoffee
«Действие» / «Значение» / «Точка данных»)
Keys / Action / Value / SetValue («Клавиши» / 1
«Действие» / «Значение» / «Задать значение»)
Keys / Action / Value / ResetValue («Клавиши» / 0
«Действие» / «Значение» / «Сбросить значе-
ние»)
Table 15: Свойства кнопки пуска (Start)

1) Добавьте кнопку.

2) Расположите ее в требуемое место и настройте размер.

3) Создайте новую виртуальную клавишу.

4) Назначьте клавише действие MomentaryDatapoint.

5) Настройте свойства.

Key action reference \ MomentaryDatapoint

46 TM610 - Работа с визуализацией


Разработка проекта визуализации

При нажатии кнопки запускается процесс приготовления кофе. Если выполнены не все
требования, то прикладная программа блокирует запуск процесса приготовления.

Image 71: Кнопки с назначенными действиями

На следующем этапе показывается как настроить переключения между главной и сер-


висной страницами. Сервисная страница используется для изменения языка.
Эти задания должны быть выполнены самостоятельно с использованием справочной си-
стемы редактора Visual Component.

Упражнение: Переключение страницы и языка


Настройка переключения между главной и сервисной страницами, как показано на обзорном ри-
сунке (см. раздел 5.1 "Упражнение"). На сервисной странице для изменения языка можно запро-
граммировать кнопку.

1) Используйте назначаемое действие "ChangePage".

2) Используйте назначаемое действие "ChangeLanguage".

5.13 Использование графических объектов

Добавление, редактирование и упорядочивание графических элементов в визуализации осу-


ществляется в разделе "Bitmaps".

На страницах визуализации графические элементы могут отоб-


ражаться с помощью элемента управления Bitmap.
В данном примере процесс приготовления отображается гра- Image 72: Элемент управления Bitmap
фически в три этапа. на панели инструментов

В разделе "Bitmap groups" несколько графических элементов могут быть объединены в логиче-
ские группы, например, одного и того же размера и из одной и той же области.
• Перемещение кофейной чашки в позицию для наполнения
• Добавление в чашку ингредиентов, входящих в состав кофе, и воды
• Перемещение чашки с кофе в позицию выдачи

Упражнение: Графическое отображение процесса приготовления


Импортируйте показанные ниже графические файлы из исходного проекта CoffeeMachine в новую
группу изображений с именем "ProgressStep".

TM610 - Работа с визуализацией 47


Разработка проекта визуализации

Анимация этих растровых изображений осуществляется из прикладной программы с помощью


переменной процесса "gMainLogic.status.progressStep".

Image 73: Группа изображений ProgressStep

1) Создайте группу растровых изображений (bitmap group).


2) Импортируйте растровые изображения "progress_transport.bmp",
"progress_brewing.bmp" и"progress_takeout.bmp".

3) Добавьте элемент управления bitmap на страницу "MainPage".

4) Настройте связь элемента управления "Multiple bitmap" с новой группой растровых изобра-
жений.

5) Подсоедините переменную визуализации для переключения растрового изображения.

Используйте изображения из исходного проекта CoffeeMachine (из визуализации "Visu") ), ис-


пользуя кнопку Browse «Поиск» в диалоговом окне "Add bitmap".

Image 74: Добавление изображений

Изображения, используемые в визуализации Visu, находятся в следующем каталоге: "..\Logical


\Visualisation\Visu\Bitmaps"

Visualization resources \ Bitmap groups


Visualization resources \ Bitmaps
Control reference \ Bitmap

48 TM610 - Работа с визуализацией


Разработка проекта визуализации

Процесс приготовления отображается графически путем чередования изображений по-


сле нажатия кнопки «Пуск» (Start).

Image 75: Элемент управления Bitmap

Мы рассмотрели множество разнообразных возможностей и функций редактора визуальных ком-


понентов.
Используя справочную систему Automation Studio, вы можете создавать свои собственные при-
ложения визуализации в соответствии с конкретными требованиями.
В разделе FAQ (Ч.А.В.О), включенном в состав справочной документации Visual Components VC4,
приводится описание способов выполнения различных задач.

FAQ («Часто задаваемые вопросы»)

TM610 - Работа с визуализацией 49


Итог

6 ИТОГ

Изучив данный обучающий курс, вы сможете создавать визуализацию с использованием встро-


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

Image 76: Редактор визуальных компонентов

Объект визуализации настраивается независимо от используемого оборудования. Благодаря


этому приложение может отображаться на локальном дисплее, удаленном терминале или в про-
грамме VNC viewer.
Возможности создания и использование одной или нескольких визуализаций в среде Automation
Studio в рамках одного проекта позволяют в значительной степени упростить процесс разработки.

50 TM610 - Работа с визуализацией


Итог

TM610 - Работа с визуализацией 51


ОБУЧАЮЩИЕ КУРСЫ (ТРЕНИНГ-МОДУЛИ)