В статье «Создание мнемосхемы» упоминались шаблоны визуализации. Там использовались готовые шаблоны, т.е. доступные в системе изначально. При работе над проектом может возникнуть ситуация, что нужного шаблона под рукой просто не окажется. Конечно можно взять и отредактировать готовый шаблон. Но чтобы понять сам процесс создания, возможности оформления шаблона и т.д. нужно понять, как и что делать. Система позволяет создать шаблон с множеством элементов и настроек, что тем самым развязывает руки для творчества. В этой статье поговорим о том, как создать такие шаблоны самостоятельно.
Для начала нужно ПКМ (правая кнопка мыши) нажать на «Шаблоны визуализации» и из списка выбрать «Новый шаблон».
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-1-1024x470.png)
Создадим шаблон «Воздушная заслонка». Имя нового шаблона можно изменить во вкладке «Описание».
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-2-1024x472.png)
Работы с шаблоном ведутся во вкладке «Редактор».
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-3-1024x469.png)
Изначально новый шаблон пуст и имеет размер 250х250. В первых двух вкладках больше нет никаких свойств. Всё потому, что в новый шаблон нужно поместить элементы (квадрат, круг, изображение или текст), у которых, в последствии, будет доступна функция редактирования (добавление изображения, цвета и т.д.).
Первая вкладка
![](https://intrascada.ru/wp-content/uploads/2023/01/cvt-4.png)
Вторая вкладка
![](https://intrascada.ru/wp-content/uploads/2023/01/cvt-5.png)
Третья вкладка
![](https://intrascada.ru/wp-content/uploads/2023/01/cvt-6.png)
Какой шаблон хотелось бы получить? По задумке, хотелось бы получить шаблон, который будет менять цвет и картинку в зависимости от состояния устройства. Напоминаю, что создаётся шаблон «Воздушная заслонка». Именно по этой причине добавим к пустому шаблону изображение. Кликаем на пустой области шаблона ПКМ (правой кнопкой мыши) и добавляем элемент «Изображение».
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-7-1024x470.png)
Растягиваем картинку на весь шаблон и убираем синюю рамку.
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-8-1024x469.png)
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-9-1024x471.png)
Дальнейший шаг, добавление изображения из системы. За основу будет взята картинка «valve9010.svg». Изменим её размер, чтобы шаблон выглядел компактнее. Допустим, до «-30».
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-10-1024x469.png)
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-11-1024x472.png)
Зададим цвет добавленного изображения. Например, «Е0Е0Е0» с прозрачностью «100%».
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-12-1024x470.png)
Так же во второй вкладке можно задать фон, рамку и украшение для шаблона т.е. работать с его визуальной составляющей.
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-13.png)
Как было сказано выше, можно настроить визуальную часть шаблона во время его создания. Но есть и другой путь. Хотелось бы дать небольшой совет касаемо данного шага в работе. Использование шаблона без визуальной части т.е. без фона и рамки, делает его более универсальным. Настройку визуальной части шаблона можно осуществить уже после добавления в контейнер.
Объясню на примере то, что мне хотелось бы донести. Используя такой шаблон в ваших проектах, вы можете настроить его так, как нужно именно вам в вашем проекте, над которым вы работаете. При работе с другим проектом этот шаблон вы так же можете использовать, просто настроив его более подходящим образом т.е. добавили шаблон в контейнер, настроили так как нужно и просто копируете этот шаблон внутри контейнера.
Далее поговорим о переменных, которые позволяют менять внешний вид шаблона в зависимости от состояния устройства. Сделать это можно во второй вкладке в верхней части правого меню.
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-14-1024x471.png)
Как вы уже заметили, кроме переменной «state» есть и другая переменная «error». Изначально система задаёт для нового шаблона только эти две переменные, но, если необходимо добавить другие переменные (value, blk и т.д.) это можно сделать с помощью кнопки в верхнем углу в виде блокнота с плюсиком. Какой тип переменной необходимо добавить зависит лишь от физического устройства, с которым оно будет связано.
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-15-1024x473.png)
Что нужно сделать, чтобы изображение в шаблоне изменилось при изменении состояния устройства? Для начала будем работать с изображением заслонки (она должна быть выбрана, позже объясню почему) и переменной «state». Меняем значение «0» на «1» в строке «state». Осуществляя данное действие, мы как бы имитировали изменение состояния устройства, и сейчас нужно изменить само изображение для переменной «state» в значении «1». В данном примере, менять изображение нет необходимости, я его просто поверну на 90°. Не забывайте сохранять все изменения.
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-16-1024x470.png)
Таким образом, при значении «0» в поле «state» заслонка находится вертикально т.е. «закрыто». В значении «1» – горизонтально т.е. «открыто». Изменение шаблона можно проверить просто, переключив значения с «0» на «1» и обратно в поле «state».
Далее будем работать с переменной «error», но в шаблоне нет изображения для этой переменной и поэтому его нужно добавить. Делается это аналогично, как и для самой заслонки, через ПКМ (правую кнопку мыши).
Прошу обратить ваше внимание на тот факт, что добавление каких-либо элементов осуществляется в первой вкладке в верхней части правого меню. Добавить какой-либо элемент во второй вкладке в верхней части правого меню вы просто не сможете.
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-17-1024x469.png)
Дальнейший шаг, добавление изображения для переменной «error». Выбор пал на картинку «notice1010.svg»:
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-18-1024x469.png)
Размещаем это изображение в левый верхний угол шаблона и красим его в красный цвет. Так же нужно убрать синюю рамку.
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-19-1024x469.png)
Переходим во вкладку для работы с переменными. Выбираем изображение для переменной «error» и делаем её невидимой для значения «0» в строке «error».
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-20-1024x469.png)
Меняем значение с «0» на «1» в строке «error». Больше ничего делать не нужно. Галка в поле «Видимый» уже стоит.
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-21-1024x470.png)
Таким образом, при значении «0» переменной «error» изображение не видно, а при значении «1» это изображение будет видно.
Крайне важно объяснить по какой причине было необходимо выбирать конкретное изображение для конкретной переменной. На самом деле, в этом нет ничего сверх сложного. Важно лишь понять суть, а суть такова. При добавлении картинки в шаблон она ни каким образом не связана с той или иной переменной. Выбирая картинку, мы даём системе понять, к какому изображению мы добавляем изменение переменной. Таким образом мы связываем эти вещи между собой. Эти, так скажем, «связывания» можно легко проверить. К примеру, для переменной «state»:
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-22-1024x472.png)
Таким образом мы видим следующее: для переменной «state» в значении «1» повернуть изображение «image_1» на 90°.
Для переменной «error» ситуация немного иная, поскольку картинка просто становится видимой при значении «1». В значении «0» её не видно.
Далее поговорим о третьей вкладке верхнего меню. Там задаются активные зоны для нажатия на этот шаблон. Для добавления активной зоны, нужно кликнуть ПКМ (правой кнопкой мыши) по шаблону и выбрать из списка «Добавить элемент» – «Action Zone».
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-23-e1675254326809-1024x461.png)
После этого остаётся просто растянуть активную зону по всему шаблону. Не забываем сохранять все изменения в проекте.
![](https://intrascada.ru/wp-content/uploads/2023/02/cvt-24-1024x472.png)
Если есть необходимость в нескольких активных зонах (например, какой-нибудь большой шаблон с множеством кнопок), это также легко сделать. В этом случае нужно растянуть активную зону там, где будет область, на которую нужно нажимать пользователю.