(RUS) TM610TRE.40 Работа с визуализацией

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.
Вы узнаете, как...
• ... Использовать редактор визуальных компонентов
• ... Создавать приложения, содержащие визуализации
• ... Применять базовые элементы визуализации
• ... Конфигурировать оборудование, используемое для визуализации
• ... Использовать статические элементы на экране
• ... Использовать динамические элементы на экране
• ... Быстро изменять локализацию, выбирая язык и единицы измерения

Редактор визуальных компонентов
2 РЕДАКТОР ВИЗУАЛЬНЫХ КОМПОНЕНТОВ
Среда разработки и поддержки визуализации является неотъемлемым компонентом, встроенным

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

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

ра контроллера (ARsim). Доступ к визуализации осуществляется с помощью программы
VNC Viewer. Поскольку программные элементы имеют модульную структуру, для отра-
ботки примеров может использоваться любая целевая система SG41
Visualization \ Visual Components VC4
1 Может использоваться любая целевая система, в которой приложения хранятся на карте памяти
CompactFlash.

Первая 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 на основе типового проекта.

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

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

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

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

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

выполняет определенную функцию.
Image 7: Рабочая область редактора визуальных компонентов
• Доступ к функциям Visual Components обеспечивается с помощью меню и панелей ин-

струментов.
• Создание, перемещение, удаление и редактирование компонентов визуализации осу-
ществляется в соответствующих узлах структурного дерева в левой части окна.
• Инструменты, предназначенные для конфигурирования компонента, отображаются в
средней части рабочей области.
• Свойства компонента или выбранного объекта отображаются в правой части окна.
Working with Visual Components \ Workspace
Упражнение: Работа с редактором визуальных компонентов

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

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

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

место на экране, которое может быть использовано при созда-
нии визуализации, для более удобной работы с ней.
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).
Управляющие элементы имеют различные свойства, изменение которых определяет их внеш-
ний вид. Управляющий элемент может иметь статические свойства, которые не могут быть изме-
нены во время выполнения программы, или динамические свойства, которые допускают измене-
ния по ходу.
Переменные процесса представляют собой интерфейс между элементом управления и управ-
ляющей программой.

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

мент
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)

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

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

Разработка проекта визуализации
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 Технологическая схема процесса
Сначала производится включение кофемашины, затем осуществляется нагрев воды. После до-
стижения определенной температуры, начинается процесс приготовления выбранного типа кофе.
Оплата за кофе имитируется путем ввода некоторой суммы. Если введенная сумма соответствует
цене выбранного типа кофе, то его приготовление может быть начато.

После завершения приготовления можно получить кофе и сдачу.
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: Структура главной страницы

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

Теперь в окне 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 .

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-серверу

Упражнение: Добавление визуализации и настройка программы "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-интерфейс

Сразу же после добавления терминала вы можете перейти к его свойствам, назначить объект
визуализации и настроить параметры подключения к сети.
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 переменные визуализации.

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

переменных, отображаемая в редакторе информация об используемых ресурсах может
быть обновлена путем нажатия клавиши <F5> или соответствующей кнопки на панели
инструментов.
Shared resources \ Data sources
5.4.3 Отображение значения в единицах измерения
Если переменная визуализации подсоединена к любому управляющему элементу в ней, то этот

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

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

измерения с °F на °C
Подробнее переменные визуализации с единицами измерения будут описаны ниже.
Shared resources \ Unit groups

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

Объект визуализации имеет глобальные свойства, которые могут использоваться для
• Язык, используемый при запуске визуализации
• Страница, отображаемая после запуска
• Настройка параметров экранной заставки
• Переменные визуализации для управления номером текущей отображаемой страницы и
изменения используемого языка визуализации
• Глубина цвета визуализации
• Настройка реакции на срабатывание
В редакторе визуальных компонентов эти настройки находятся в разделе, носящем имя визуа-
лизации.
Упражнение: Задать используемый по умолчанию язык

Каждый новый проект автоматически поддерживает два языка
(английский / немецкий). Создайте визуализацию на своем род-
ном языке.
В глобальных свойствах задайте необходимый язык по умолча-
нию.
1) Выберите раздел с именем визуализации - "TM610".
2) Измените в свойствах используемый по умолчанию язык. Image 29: Выбор языка, используемого
по умолчанию
5.6 Использование слоев при разработке страниц
Каждая страница, отражающая технологический процесс, может состоять из нескольких слоев.

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

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

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

В рассматриваемом примере в заголовке в верхней правой части каждого экрана выводятся дата
и время.
Заголовок отделен от остальной части страницы горизонтальной линией.
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: Настройка формата отображения даты и времени

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

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

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

зуемые для отображения текста или значений переменных, для
обеспечения взаимодействия между пользователем и систе-
мой. При создании новой визуализации, по умолчанию она уже
содержит страницу с одним локальным слоем.
Для данного примера необходимы следующие страни-
цы:
• Страница для управления системой
• Сервисная страница
• Страница с графиками температуры
(см. TM640 «Аварийные сообщения, графики и диагно-
Image 34: Управление страницами
стика»). визуализации
• Страница с аварийными событиями и сообщениями
(см. TM640 «Аварийные сообщения, графики и диагно-
стика»).
Чтобы добавить новую страницу, необходимо щелкнуть правой кнопкой на узле "Pages" и выбрать
из контекстного меню <Add Page>. Альтернативный вариант: воспользоваться кнопкой <Insert>.
Чтобы добавить ссылку на глобальный слой, следует щелкнуть правой кнопкой мыши на узле
страницы и выбрать из контекстного меню <Add Layer Reference>. Затем можно выбрать необ-
ходимый слой из доступных.

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

Главная страница используется для управления системой. На сервисной странице отображается
последовательность операций технологического процесса приготовления кофе.
Добавьте глобальной слой globalArea к каждой из этих страниц.
Ход выполнения:
• Переименуйте "Init_Page" в "MainPage".
• Создайте новую страницу и назовите ее "ServicePage".
• Добавьте глобальной слой к обеим страницам.
Изменение свойств страницы влияют так же на внешний вид самого управляющего эле-
мента, как и поля "Input". Например, если необходимо задать цвет для активного состо-
яния поля ввода, расположенного на сенсорном дисплее, то это может быть выполнено
с помощью свойств, отвечающих за внешний вид.
Теперь в разделе "Pages" расположены две страницы, каждая из которых имеет локаль-
ный слой "default" и ссылку на глобальный слой.
Image 35: Локальные слои и ссылки на слои
В редакторе локальные и глобальные слои (заданные ссылками) отображаются с перекрытием

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

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

Раскройте выпадающий список слоев, находящийся сверху на панели при активной вкладке
"Layers" редактора страниц, и измените видимость слоев с помощью пиктограммы скрытия / отоб-
ражения.
Visualization resources \ Pages
5.8 Стили и таблицы стилей
Стиль (style) определяет внешний вид объекта, который может быть изменен путем задания
заранее предопределенных свойств.
Таблица стилей представляет собой набор стилей. Назначение таблицы стилей для визуализа-
ции является простым способом придания ей унифицированного внешнего вида.
Преимущества применения таблицы стилей
• Централизованное управление свойствами, отвечающими за внешний вид объекта (на-
пример, цвет поля ввода или вывода).
• Возможность создания нескольких стилей для одного объекта.
• Свойства будет необходимо настроить только в одном месте, при этом изменения при-
меняются ко всем объектам в проекте, которым назначен этот стиль.
Image 37: Пример стиля для числовых полей
С целью наглядности в данном обучающем курсе для элементов управления ввода и

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

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

мент "Text", где можно как непосредственно вводить текстовое сообщение, так и отображать его
через ссылку на текстовую группу.
Image 38: Статический и динамический текст
Применение текстовых групп для управления статическим и динамическим текстом поз-

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

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

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

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 "Языки и шрифты".

При добавлении объекта ему присваивается имя по умолчанию (например, 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

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

вмещает ли управляющий элемент текущего размера (с заданной длиной текста, высо-
той и содержимым) тексты для всех языков.
Image 41: Выбор языка в редакторе визуальных компонентов
Элемент "Text" используется для отображения описания объ-

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

Для вывода данных рецепта, имитации оплаты и отображения температуры воды создайте соот-
ветствующие тексты на странице "MainPage", используя элемент "Text".
Это процедура однотипна для всех текстов. В качестве примера будет рассмотрено отображение
текста о температуре воды.
Name («Имя») txtWaterTemperature
Value / Source («Значение / SingleText
Источник»)
Value / Source / TextGroup Recipe («Рецепт»)
(«Значение / Источник /
Текстовая группа»)
Value / Source / Text («Зна- 5: Water temperature
чение / Источник / Текст») («Температура воды»)
Table 8: Свойства текстового поля

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

теперь выглядят следующим образом:
Image 43: Управляющий элемент "Text" («Текст»)
Если выбрать несколько управляющих элементов, удерживая нажатой клавишу <CTRL>, и затем
щелкнуть на них, то их можно выровнять с помощью инструмента выравнивания, расположенного
на панели инструментов.
Image 44: Выравнивание управляющих элементов
И в завершение рассмотрим порядок отображения динамического текста в управляющем эле-

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

Создайте текстовое сообщение на странице „MainPage“ с помощью элемента управления „Text.
Рамка вокруг текста.
Name («Имя») txtMessage
Value / Source («Значение / MultipleTexts
Источник»)
Value / Source / TextGroup Messages («Сообщения»)
(«Значение / Источник /
Текстовая группа»)
Value / Source / Local.gMainLogic.cmd.vis.messageIndex
IndexDatapoint («Значение /
Источник / Индекс точки
данных»)

Appearance / Border Flat_Black
(«Внешний вид / Рамка»)
Тексты сообщений были созданы с использованием управляющих элементов "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 — Международная организация по стандартизации

Image 46: Шрифты визуализации
До сих пор мы использовали шрифты, определяемые стилями.

Шрифт должен быть настроен для каждого языка, используемого в проекте.
Элемент "Font" в редакторе визуальных компонентов позволяет настраивать для каждого языка
как сам шрифт, так и его свойства.
• Шрифты TrueType
• Размер шрифта (в пикселях)
• Полужирный и / или курсив
По умолчанию в проекте содержатся показанные выше шрифты. После задания шрифта, в свой-
ствах элемента вы можете определить его размер и тип .
Изменение языка также может повлиять на тип шрифта и его размер (например, в слу-
чае отображения текста на азиатском языке). В таких случаях для элемента управления
должно быть задано два размера шрифта.
Image 47: Различные размеры шрифта в зависимости от языка
Упражнение: Изменение размера шрифта для конкретного языка

Для китайского "Chinese" языка измените размер шрифта Arial9px с 9 на 12 пикселей.
Задайте для текстовой группы "Messages" текст в пункте Chinese При открытом редакторе стра-
ницы "MainPage" измените язык и проверьте размер текста.
Image 48: Изменение языка в редакторе визуализации
Проверьте, корректно ли отображается шрифт в элементе управления с именем txtMessage (если

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

Appearance / Font («Внеш- Arial9px
ний вид / Шрифт»)
Размер текстового сообщения превышает размер текстового поля. Если по высоте или
ширине текст не помещается в заданные границы, то размер текстового поля следует
увеличить.
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

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

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.

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

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

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

осуществляется в разделе "Unit groups".
Текст единицы измерения и количество десятичных знаков
определены в группе с именем "Currency"(«Валюта»).
Image 55: Группы единиц измерения
Image 56: Группа единиц измерения Currency («Валюта»)
Группа Currency («Валюта») содержит только одну единицу измерения Euro («Евро») (€).
Поскольку для данной группы не требуется никак переключаться во время выполнения програм-
мы, то единица измерения автоматически получает индекс 0 при назначении ее переменной ви-
зуализации.
Кроме того, для данной единицы измерения используется только аббревиатура, следо-
вательно функция масштабирования не требуется. Определяются только свойства аб-
бревиатуры и точность по умолчанию.
Группа единиц измерения Currency («Валюта») назначается для переменной

gMainLogic.par.givenMoney в разделе Data Sources Назначение возможно только в том случае,
если задана настройка VCType = SCALED.
Image 57: Подключение группы единиц измерения Currency («Валюта») к переменной визуализации типа "scaled"

FAQ \ Display \ Displaying a value with unit text
Единицы измерения и значение параметра масштабирования настраиваются не для эле-

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

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

Значения параметров рецепта отображаются тоже с помощью элемента "numeric".
Ниже приводится описание свойств для переменной процесса Sugar («Количество сахара»),
остальные параметры рецепта настраиваются аналогичным образом.
Name («Имя») valSugar
Value / Datapoint («Значе- gMainLogic.par.receipe.sugar
ние / Точка данных»)
Table 11: Свойства параметра только на вывод
1) Разместите элементы "numeric" рядом с текстами описания.
2) Измените свойства в соответствии с количеством каждого ингредиента.
Если есть необходимость отобразить единицу измерения для каждой переменной процесса, ко-
торая отображает данные рецепта, то соответствующие переменные визуализации необходимо
связать с группой единиц измерения.
Значения параметров рецепта отображаются с единицами измерения.
Image 58: Элемент управления "Numeric"
Значение с возможностью выбора единицы измерения

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

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

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

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

Температура воды отображается с помощью элемента "Numeric".
Name («Имя») valTemperature
Value / Datapoint («Значе- gHeating.status.actTemp
ние / Точка данных»)
Table 12: Свойства выводимого числового параметра
Пересчитанное (scaled) значение температуры отображается с одним знаком после за-

пятой и единицей измерения (°C или °F).
Image 60: Элемент управления "Numeric" с пересчитанным (scaled)) значением температуры и текстом
единицы измерения
Функция пересчета обеспечивает преобразование физического значения переменной процесса

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

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

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

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

переменной"gHeating.status.actTemp". Назначение возможно
только в том случае, если задана настройка VCType = SCALED.
Image 65: Группа единиц измерения Temperatures («Значения температуры») связана с переменной визуализации

FAQ \ Display \ Displaying a value with unit text
5.12 Управление с помощью сенсорного экрана и клавиатуры
Реакция на касание может осуществляться через: такие элементы управления как кнопки и ак-
тивная зона (hotspot), а также аппаратные клавиши.
Image 66: Управление с помощью сенсорного экрана и клавиатуры
В редакторе визуальных компонентов каждое назначенное действие (key action) привязыва-

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

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

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

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

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

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

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.
Назначьте кнопкам различные стили.
Name («Имя») cmdCoffeeTypeMinus
Style class («Класс стиля») ScrollUpButton
Keys («Клавиши») vkTypeMinus
Table 13: Настройки для кнопки прокрутки

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 ), которые препят-
ствуют созданию дополнительных локально назначаемых действий.

Key action reference \ UpDownDatapoint

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

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

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

Key action reference \ SetDatapoint

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

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

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

При нажатии кнопки запускается процесс приготовления кофе. Если выполнены не все
требования, то прикладная программа блокирует запуск процесса приготовления.
Image 71: Кнопки с назначенными действиями
На следующем этапе показывается как настроить переключения между главной и сер-

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

Настройка переключения между главной и сервисной страницами, как показано на обзорном ри-
сунке (см. раздел 5.1 "Упражнение"). На сервисной странице для изменения языка можно запро-
граммировать кнопку.
1) Используйте назначаемое действие "ChangePage".
2) Используйте назначаемое действие "ChangeLanguage".
5.13 Использование графических объектов
Добавление, редактирование и упорядочивание графических элементов в визуализации осу-

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

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

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

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

переменной процесса "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

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

сле нажатия кнопки «Пуск» (Start).
Image 75: Элемент управления Bitmap
Мы рассмотрели множество разнообразных возможностей и функций редактора визуальных ком-

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

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

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

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

Итог

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

(RUS) TM610TRE.40 Работа с визуализацией

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

(RUS) TM610TRE.40 Работа с визуализацией

Загружено:

Авторское право:

Доступные форматы

TM610

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Visualization \ Visual Components VC4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Working with Visual Components \ Workspace

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

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

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

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

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

Working with Visual Components \ The workspace \ Toolbar

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

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

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

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

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

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

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

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

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

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

Working with Visual Components \ Conventions