Графические символы

Пример: символ насоса от рисунка до видеокадра

Создадим PumpGraphic для шаблона PumpBase. Корпус насоса будет зелёным при работе и серым при остановке. Под корпусом появится давление с двумя дробными знаками, над ним — имя экземпляра. В конце разместим символ экземпляра Pump1 на видеокадре MainSchema.

Все изображения в примере — снимки Studio с учебным проектом. Изображение можно открыть в полном размере нажатием на него.

1. Откройте проект и создайте шаблон PumpBase с описанием «Насос». Если вы уже выполняли пример настройки шаблона, используйте подготовленный шаблон.
2. На вкладке «Теги» добавьте два тэга из таблицы ниже. Для учебной проверки достаточно значений по умолчанию; подключение к оборудованию на этом этапе не требуется.
3. Перейдите на вкладку «Графические символы» и нажмите «＋ Добавить». Создайте символ с именем PumpGraphic и описанием «Насос: состояние и давление».
4. Откройте редактор символа. В дальнейшем двойной щелчок по строке PumpGraphic открывает редактор, одиночный — выбирает символ и показывает его предпросмотр.

Шаг 1. Нарисуйте корпус, трубопроводы и надписи

Соберите рисунок из отдельных объектов. Не объединяйте их в один контур: корпусу и двум надписям нужны разные анимации. Значки инструментов и их назначение приведены в таблице инструментов рисования; название каждой кнопки также появляется при наведении.

1. Выберите «Линия» — значок отрезка с двумя точками. Нарисуйте горизонтальный входной и выходной участки трубопровода. Удерживайте Shift, чтобы линия оставалась горизонтальной. В свойствах задайте тёмную обводку и толщину, например 6.
2. Выберите «Прямоугольник» и нарисуйте основание под насосом. Задайте светло-серую заливку, тёмную обводку толщиной 4 и небольшое скругление углов.
3. Выберите «Эллипс» и, удерживая Shift, нарисуйте круг между трубопроводами. В свойствах установите одинаковые «Радиус X» и «Радиус Y», например 70. Задайте серую заливку и тёмную обводку толщиной 4. Это корпус насоса.
4. Инструментом «Путь» поставьте три точки треугольника внутри круга. Последним щелчком по первой точке замкните контур. Задайте светлую заливку и тёмную обводку.
5. Инструментом «Текст» добавьте над корпусом надпись «Насос», а под ним — 0.00. Справа от числа добавьте ещё один текстовый объект «бар». Установите размер шрифта, например 24, и «Цвет текста».
6. Переключитесь на курсор — кнопку со стрелкой. Выберите объект на холсте или в дереве справа и уточните его координаты и размеры в свойствах слева. Для выравнивания сначала выберите опорный объект, затем добавьте остальные к выделению.
7. Нажмите кнопку с дискетой «Сохранить символ» вверху справа. Дождитесь сообщения о сохранении.

В этом рисунке корпус имеет ID ellipse1, заголовок — text1, числовая надпись — text2, единица измерения — text3. При другом порядке рисования номера могут отличаться: выбирайте объект по его назначению. В поле «Описание» можно указать, например, «Корпус насоса», чтобы легче находить его в дереве.

Шаг 2. Создайте локальный параметр заголовка

Running и Pressure — тэги шаблона. Их не нужно добавлять в параметры символа: анимации будут обращаться к ним напрямую через this. Для заголовка создадим отдельную локальную строковую переменную Title.

1. В режиме курсора щёлкните по свободному месту рабочего поля, чтобы снять выделение. Слева появится блок «Параметры символа».
2. Нажмите «Открыть параметры», затем «+ Добавить параметр».
3. В колонке «Имя» введите Title, в «Тип значения» выберите «Строка», в «Значение для проверки» укажите «Насос».
4. Нажмите «Применить». Параметр станет доступен в анимациях и скриптах этого символа.

Локальный параметр хранит значение внутри символа; в этом примере его заполняет скрипт открытия.

Шаг 3. Покажите в заголовке имя экземпляра

1. Нажмите «Скрипты символа» в левой панели редактора.
2. В поле «Сценарий» выберите «Открытие символа» и введите приведённую ниже строку. Период для этого сценария не задаётся.
3. Нажмите «Применить». После успешной проверки закройте окно. Звёздочка у названия сценария и значок под кнопкой скриптов показывают, что скрипт задан.
4. Выберите надпись «Насос» (text1) и нажмите «Добавить анимацию». Выберите «Вывод значения».
5. В поле «Параметр» нажмите кнопку «…». В окне «Выбор параметра или тега» выберите Params.Title из локальных переменных символа.
6. Нажмите «Применить» и закройте окно анимации. Строковый параметр выводится без числового формата.

Title := this.MyName;

this.MyName возвращает имя текущего экземпляра. Когда символ откроется для Pump1, скрипт запишет это имя в Title, а анимация отобразит его в заголовке. Для другого экземпляра того же шаблона появится его собственное имя.

Шаг 4. Привяжите цвет корпуса к тэгу Running

1. Выберите круг корпуса (ellipse1). Нажмите «Добавить анимацию» либо дважды щёлкните по корпусу.
2. В окне «Анимация» выберите «Заливка + линия». В части «Заливка» найдите поле «Параметр».
3. Введите this.Running и выберите найденную строку с описанием «Насос работает». Можно открыть список кнопкой «…» и выбрать тэг там. Для подтверждения привязки нажмите найденную строку.
4. Оставьте «Режим» — «Бинарный». Переключатель «Оформление по классу» оставьте выключенным: в этом примере цвета задаются непосредственно.
5. Для «Истина» установите зелёный цвет, например #22c55e, для «Ложь» — серый #94a3b8. В обоих состояниях отметка «есть» должна быть включена, чтобы заливка присутствовала.
6. В части «Линия» оставьте параметр пустым: обводка должна сохранять постоянный цвет. Прокрутите содержимое окна к кнопке «Применить», нажмите её и закройте окно.

Ссылка this.Running сохраняет символ универсальным: для Pump1 используется его тэг Running, а для другого насоса — тэг этого насоса.

Шаг 5. Добавьте вывод давления

1. Выберите числовую надпись 0.00 (text2). Откройте анимацию и выберите «Вывод значения».
2. В поле «Параметр» найдите this.Pressure и выберите строку с описанием «Давление после насоса».
3. В поле «Тип вывода» оставьте «Значение». В поле «Формат» введите #.02f: значение 2.4 будет отображаться как 2.40. Для запятой используйте #,02f.
4. Нажмите «Применить», закройте окно и сохраните символ кнопкой с дискетой.

«Вывод значения» заменяет всё содержимое выбранного текстового объекта. Поэтому единицу измерения мы нарисовали отдельно: если написать 0.00 бар в одном объекте и назначить ему эту анимацию, при обновлении останется только отформатированное число.

Шаг 6. Проверьте сохранённый символ

1. Вернитесь в рабочую область PumpBase по ссылке над названием символа. Если экземпляр ещё не создан, нажмите «＋ Создать экземпляр» и задайте имя Pump1. Его можно разместить в модели PumpStation1, как в примере настройки модели.
2. На вкладке «Графические символы» выберите PumpGraphic одним щелчком и нажмите «Проверка Runtime» у предпросмотра.
3. Дождитесь готовности проверки. В поле «Экземпляр» выберите Pump1 и дождитесь обновления: заголовок рисунка должен стать Pump1.
4. В блоке «Теги экземпляра» переключите Running в True. Корпус должен стать зелёным. При False он снова становится серым.
5. Измените Pressure, например на 2.4. Число под насосом должно отобразиться как 2.40, без изменения надписи «бар».
6. Закройте проверку. Если результат отличается от ожидаемого, откройте нужный объект, проверьте выбранный тэг и параметры анимации, примените изменения и снова сохраните символ.

Это проверка графики в Studio с тестовыми значениями. Она позволяет проверить анимации до подключения АРМ к работающему серверу приложений.

Шаг 7. Разместите символ на видеокадре

1. Откройте раздел проекта «Видеокадры» и создайте обычный видеокадр MainSchema с описанием «Насосная станция». Откройте его графический редактор. Размеры и фон доступны по кнопке «Свойства»; для примера подойдёт кадр 1920 × 1080.
2. В левой панели найдите блок «Символы объектов». В поле «Поиск по имени или пути» введите Pump1. Нужная строка называется «Pump1 — PumpGraphic»; ниже указан путь модели и экземпляра.
3. Перетащите строку символа на рабочее поле в нужное место. Одиночный щелчок по строке показывает предпросмотр, но не добавляет объект на видеокадр.
4. Выберите вставленный символ. В блоке «Положение и размер» задайте X, Y, ширину и высоту, затем нажмите «Применить». Перемещать объект и изменять его размер можно также мышью.
5. Если пропорции изменились, используйте верхнюю кнопку «Восстановить пропорции символа». Кнопка «Вписать» возле масштаба показывает весь видеокадр в рабочей области, не изменяя размеры самих объектов.
6. Нажмите «Сохранить» вверху справа и откройте «Предпросмотр». Проверьте положение насоса и читаемость надписей. Анимации с изменением тестовых значений проверяются предыдущим шагом.

Для работы у оператора назначьте модель с Pump1 серверу приложений, включите MainSchema в состав АРМ и загрузите проекты на оба узла. Последовательности приведены в разделах размещения моделей на Runtime и выбора видеокадров АРМ. В работающем АРМ символ будет получать значения своего экземпляра.

Рабочая область редактора

Редактор символов работает с SVG, но большинство задач выполняется обычными инструментами рисования. Слева находятся инструменты, свойства выбранного объекта и его анимации. Дерево объектов помогает выбирать элементы внутри сложных групп. Сверху расположены команды выравнивания, размеров, группировки, каталога, импорта, сохранения и помощи.

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

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

Инструменты рисования

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

Пути, кривые и дуги

Начните путь и последовательно задавайте узлы. Щелчок добавляет узел прямого участка. Чтобы задать кривую Безье, нажмите кнопку мыши в месте нового узла и переместите указатель, удерживая кнопку: так задаются управляющие ручки кривой. Режим дуги включается с Alt или кнопкой «Дуга · Alt»: выберите конец участка, затем следующим щелчком задайте изгиб. Чтобы замкнуть контур, вернитесь к первой точке: замыкание соответствует команде Z в SVG.

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

Enter завершает открытый путь; Escape отменяет текущий незавершённый участок. В блоке «Точки (Path)» доступна раскрывающаяся строка исходного атрибута d. Она удобна для точной правки и переноса геометрии из известного SVG. Введите команды SVG и координаты, затем примените изменения.

M 20 20 L 100 20 C 130 20 130 80 100 80 L 20 80 Z

Здесь M задаёт начало, L — прямой участок, C — кубическую кривую с двумя управляющими точками, Z — замыкание. Сначала проверьте результат на холсте, затем сохраните символ. Ручное редактирование d изменяет геометрию, а не настройки анимации.

Размеры, выравнивание и распределение

Первый выделенный объект служит опорным для выравнивания и подгона размеров. Сначала выберите эталон, затем остальные элементы. Команды «Выровнять по ширине», «Выровнять по высоте» и «Подогнать размер» приводят размеры к опорному объекту.

Равномерное распределение по горизонтали или вертикали выравнивает промежутки между элементами, в том числе когда они перекрываются. Распределение задаёт одинаковые промежутки, выравнивание — общую ось или границу.

Для отдельного прямоугольника или эллипса изменение размера меняет собственные геометрические параметры: ширину и высоту прямоугольника либо радиусы эллипса. У группы преобразование применяется ко всему составу. Кнопки отражения и поворота на 90° позволяют быстро получить симметричный вариант.

Сочетание Ctrl или Command со стрелками перемещает выделенные объекты на одну единицу координат; с Shift — на десять. Точные координаты и размеры задайте в числовых полях свойств. Изменение длины линии перемещает её вторую конечную точку.

Обычный и многострочный текст

Текст редактируется в многострочном поле свойств или непосредственно на холсте: выберите объект и используйте F2 либо пункт «Редактировать текст» контекстного меню. Двойной щелчок по обычному анимируемому объекту предназначен для анимации, поэтому текстовый режим включается отдельно.

Переносы строк сохраняются при копировании, дублировании и повторном открытии символа. Размер шрифта задаётся свойством текста. У графической кнопки размер надписи задаётся отдельно: изменение размеров кнопки не меняет размер шрифта.

Цвет текста — fill. Stroke задаёт обводку букв. Если надпись выглядит слишком толстой или пустой внутри, проверьте оба свойства и применённый CSS-класс.

Группы, идентификаторы и описания

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

ID уникален внутри символа и используется техническими связями. Описание предназначено для человека и может повторяться. Подпись в дереве вида «Корпус клапана (rect1)» помогает видеть назначение, не теряя идентификатор.

Ctrl/Command+C и Ctrl/Command+V копируют и вставляют объекты; дублирование создаёт копию в текущем редакторе. При копировании привязки анимаций сохраняются. Для другого источника замените тэг в настройках анимации.

Параметры символа и привязки

Параметры символа — собственные переменные графического объекта, используемые его анимациями и клиентскими скриптами. Они настраиваются в отдельном окне с таблицей. Тэги шаблона, используемые через this, не требуется повторно объявлять параметрами символа.

Для отображения состояния оборудования выберите прямую ссылку на тэг. Локальный параметр удобен для клиентского состояния и промежуточных расчётов скрипта символа. Совпадение имени параметра с именем серверного тэга не создаёт между ними привязку.

Для шаблонной графики используйте собственные тэги, доступные объекты и дочерние объекты композиции, например this.N1.current. MyModel обращается к модели экземпляра; фактическая доступность пользовательских объектов зависит от контекста экземпляра и проверяется при подготовке загрузки проекта.

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

Настройка анимаций

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

Числа и табличный вывод текста

Формат определяет представление, а не меняет значение тэга. #.03f задаёт три дробных знака с точкой, #,03f — с запятой. Например, одно и то же значение можно показать как 12.500 или 12,500.

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

Так код состояния 0, 1 и 2 можно представить словами «Остановлен», «Работает» и «Авария», а измерение — диапазонами. Табличный вывод меняет текст на экране; значение тэга остаётся числовым.

Дискретная кнопка и клиентские скрипты

При потере связи команда отпускания может не дойти до оборудования. Для импульсного управления задайте ограничение длительности команды в ПЛК.

У символа есть скрипты открытия, закрытия и периодического выполнения. Они работают на клиенте, пока символ открыт. Action Script относится к элементу и может запускаться по левой или правой кнопке мыши, в том числе циклически при удержании. Для непрерывного выполнения используйте скрипт шаблона на Runtime.

Таблицы и CSS-классы

Таблица вставляется как управляемый объект. Двойным щелчком откройте её настройки: заголовки, размеры, выравнивание, шрифты, цвета, текст и ссылки ячеек. Итоговая графика остаётся SVG, а структура ячеек редактируется через диалог таблицы.

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

Редактор CSS-классов позволяет задать обычное состояние, hover, active и другие поддерживаемые состояния. Образец справа — только тестовый объект. Проверьте на нём наведение и нажатие, затем сохраните класс и при необходимости примените к выделению. В анимации оформления можно выбирать класс вместо отдельных цветов и толщин.

Общий каталог символов

Каталог хранит заготовки графики и доступен из разных проектов одной установки Studio. Например, изображение насоса можно один раз подготовить в каталоге, а затем использовать в нескольких проектах.

В каталог передаётся чистая графика: анимации, скрипты и привязки к тэгам проекта не переносятся. После вставки настройте их в символе проекта. Внешний вид таблиц и слайдеров сохраняется, а их источники данных необходимо назначить заново.

В верхней панели редактора символов нажмите «Каталог символов» — кнопку с папкой и двумя квадратами. Слева расположены папки, сверху — поиск и команды каталога, в основной области — карточки с предпросмотром, именем, описанием и действиями. Эти команды доступны и при редактировании самого символа каталога.

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

Добавление графики в каталог

Из открытого символа

1. Подготовьте рисунок в редакторе символов.
2. Нажмите «Добавить символ в каталог» в верхней панели — кнопку с папкой и знаком плюса.
3. Укажите название, папку и описание. Название помогает найти заготовку, описание — выбрать подходящий вариант.
4. Нажмите «Добавить чистую графику». Найдите новую карточку и проверьте предпросмотр.

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

Из SVG-файла

1. Откройте каталог и нажмите «Загрузить SVG» — значок файла с кривой.
2. Выберите файл SVG, заполните название, папку и описание.
3. Нажмите «Загрузить в общий каталог» и проверьте появившуюся карточку.

Файл должен содержать корректную SVG-графику и быть не больше 5 МБ. При ошибке исправьте файл и повторите загрузку.

Команда «Импорт SVG» на верхней панели редактора добавляет файл непосредственно на рабочий холст. Команда «Загрузить SVG» внутри каталога создаёт запись в общей библиотеке.

Вставка и редактирование символа каталога

1. Откройте символ проекта, в котором нужна заготовка.
2. Откройте каталог, найдите графику и нажмите на её предпросмотр или кнопку «Вставить» со знаком плюса.
3. Разместите добавленную группу на холсте, измените размеры и оформление.
4. Назначьте необходимые параметры, привязки и анимации, затем сохраните символ проекта.

Вставляется независимая копия. Изменение или удаление записи каталога не обновляет и не удаляет уже вставленную графику.

1. Для изменения заготовки нажмите «Редактировать» с изображением карандаша в её карточке.
2. В отдельной вкладке откроется редактор символа каталога. Измените рисунок и сохраните его кнопкой с дискетой.
3. Вернитесь к каталогу: карточка будет обновлена. Последующие вставки используют новую графику.

Сохранение в этом редакторе обновляет именно запись каталога. Для автоматического обновления включённой графики при изменении источника используйте вставку символа проекта, которая сохраняет связь с исходным символом.

Папки, перемещение и удаление

1. Нажмите «Добавить папку», укажите название и родительскую папку. Для верхнего уровня выберите «Корень каталога».
2. Нажмите «Сохранить папку».
3. Для изменения названия или родителя нажмите карандаш рядом с папкой в дереве.
4. Чтобы переместить символ, перетащите его карточку на нужную папку либо выберите папку в списке карточки.

Кнопка «Удалить» с изображением корзины в карточке удаляет заготовку из общего каталога после подтверждения. Чтобы удалить папку, откройте её настройки и нажмите «Удалить папку». Удалить можно только пустую папку: предварительно переместите или удалите её содержимое и вложенные папки.

Экспорт и импорт каталога

ZIP-архив каталога используется для переноса библиотеки на другой сервер Studio и для её отдельного резервного копирования. Архив каталога и SVG-файл отдельного символа загружаются разными кнопками.

1. В исходной Studio откройте каталог и нажмите «Экспорт каталога». Сохраните ZIP-файл. В архив входит весь каталог, независимо от выбранной папки и строки поиска.
2. В целевой Studio откройте каталог и нажмите «Импорт каталога» — значок архива со стрелкой.
3. Выберите ZIP-файл в поле «Архив каталога» и нажмите «Проверить архив».
4. Проверьте число папок, символов, новых записей и конфликтов.
5. Для каждого совпадения выберите «Перезаписать», «Пропустить» или «Задать новое имя». В последнем случае введите новое название. Список «Для всех конфликтов» позволяет сразу назначить перезапись или пропуск.
6. После разрешения всех конфликтов нажмите «Импортировать каталог».
7. Проверьте итоговое сообщение о добавленных, обновлённых и пропущенных записях, затем откройте нужную папку.

«Перезаписать» обновляет совпавшую запись каталога; «Пропустить» оставляет существующую; «Задать новое имя» сохраняет импортируемую графику отдельно. Ранее вставленные в проекты копии во всех случаях остаются прежними.

Вложенные символы проекта и всплывающие окна

Вставка символа проекта сохраняет связь с исходным объектом. В списке выберите владельца — шаблон, экземпляр или модель, затем нужный символ. Контекстная команда «Открыть исходный символ» переводит к месту, где определяется вставленная графика.

Для всплывающего окна выберите символ своего контекста или дочернего объекта композиции. Настройте фиксированный размер с вписыванием графики либо размер самого символа. Заголовок можно скрыть или задать выражением, например this.description; в экземпляре оно должно разрешаться в его контексте.

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

Поиск и замена тэгов

Выберите область: весь символ или выделенные объекты. При замене тэга исходные варианты берутся из реально используемых ссылок этой области. В обработку входят анимации, таблицы, условия, скрипты символа и Action Script.

Можно заменить часть имени: например, _1 на _2 в ссылках this.boiler_1.T.value и this.boiler_1.P.value. Перед применением замены редактор проверяет существование и допустимость каждой новой привязки.

В скриптах меняются ссылки на тэги, а не строковые литералы и комментарии. После применения сохраните символ, повторно откройте его и проверьте несколько привязок. Если графика уже развёрнута, обновите HMI.

Замещение при плохом качестве

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

Проверьте замещение при потере качества и возврат исходной графики после его восстановления.

Перед использованием символа в рабочем проекте проверьте состояния TRUE и FALSE, крайние числовые значения, отсутствие источника и плохое качество. После загрузки проекта повторите проверку на АРМ.