В статье «Создание мнемосхемы» упоминались шаблоны визуализации. Там использовались готовые шаблоны, т.е. доступные в системе изначально. При работе над проектом может возникнуть ситуация, что нужного шаблона под рукой просто не окажется. Конечно можно взять и отредактировать готовый шаблон. Но чтобы понять сам процесс создания, возможности оформления шаблона и т.д. нужно понять, как и что делать. Система позволяет создать шаблон с множеством элементов и настроек, что тем самым развязывает руки для творчества. В этой статье поговорим о том, как создать такие шаблоны самостоятельно.
Для начала нужно ПКМ (правая кнопка мыши) нажать на «Шаблоны визуализации» и из списка выбрать «Новый шаблон».
Создадим шаблон «Воздушная заслонка». Имя нового шаблона можно изменить во вкладке «Описание».
Работы с шаблоном ведутся во вкладке «Редактор».
Изначально новый шаблон пуст и имеет размер 250х250. В первых двух вкладках больше нет никаких свойств. Всё потому, что в новый шаблон нужно поместить элементы (квадрат, круг, изображение или текст), у которых, в последствии, будет доступна функция редактирования (добавление изображения, цвета и т.д.).
Первая вкладка
Вторая вкладка
Третья вкладка
Какой шаблон хотелось бы получить? По задумке, хотелось бы получить шаблон, который будет менять цвет и картинку в зависимости от состояния устройства. Напоминаю, что создаётся шаблон «Воздушная заслонка». Именно по этой причине добавим к пустому шаблону изображение. Кликаем на пустой области шаблона ПКМ (правой кнопкой мыши) и добавляем элемент «Изображение».
Растягиваем картинку на весь шаблон и убираем синюю рамку.
Дальнейший шаг, добавление изображения из системы. За основу будет взята картинка «valve9010.svg». Изменим её размер, чтобы шаблон выглядел компактнее. Допустим, до «-30».
Зададим цвет добавленного изображения. Например, «Е0Е0Е0» с прозрачностью «100%».
Так же во второй вкладке можно задать фон, рамку и украшение для шаблона т.е. работать с его визуальной составляющей.
Как было сказано выше, можно настроить визуальную часть шаблона во время его создания. Но есть и другой путь. Хотелось бы дать небольшой совет касаемо данного шага в работе. Использование шаблона без визуальной части т.е. без фона и рамки, делает его более универсальным. Настройку визуальной части шаблона можно осуществить уже после добавления в контейнер.
Объясню на примере то, что мне хотелось бы донести. Используя такой шаблон в ваших проектах, вы можете настроить его так, как нужно именно вам в вашем проекте, над которым вы работаете. При работе с другим проектом этот шаблон вы так же можете использовать, просто настроив его более подходящим образом т.е. добавили шаблон в контейнер, настроили так как нужно и просто копируете этот шаблон внутри контейнера.
Далее поговорим о переменных, которые позволяют менять внешний вид шаблона в зависимости от состояния устройства. Сделать это можно во второй вкладке в верхней части правого меню.
Как вы уже заметили, кроме переменной «state» есть и другая переменная «error». Изначально система задаёт для нового шаблона только эти две переменные, но, если необходимо добавить другие переменные (value, blk и т.д.) это можно сделать с помощью кнопки в верхнем углу в виде блокнота с плюсиком. Какой тип переменной необходимо добавить зависит лишь от физического устройства, с которым оно будет связано.
Что нужно сделать, чтобы изображение в шаблоне изменилось при изменении состояния устройства? Для начала будем работать с изображением заслонки (она должна быть выбрана, позже объясню почему) и переменной «state». Меняем значение «0» на «1» в строке «state». Осуществляя данное действие, мы как бы имитировали изменение состояния устройства, и сейчас нужно изменить само изображение для переменной «state» в значении «1». В данном примере, менять изображение нет необходимости, я его просто поверну на 90°. Не забывайте сохранять все изменения.
Таким образом, при значении «0» в поле «state» заслонка находится вертикально т.е. «закрыто». В значении «1» – горизонтально т.е. «открыто». Изменение шаблона можно проверить просто, переключив значения с «0» на «1» и обратно в поле «state».
Далее будем работать с переменной «error», но в шаблоне нет изображения для этой переменной и поэтому его нужно добавить. Делается это аналогично, как и для самой заслонки, через ПКМ (правую кнопку мыши).
Прошу обратить ваше внимание на тот факт, что добавление каких-либо элементов осуществляется в первой вкладке в верхней части правого меню. Добавить какой-либо элемент во второй вкладке в верхней части правого меню вы просто не сможете.
Дальнейший шаг, добавление изображения для переменной «error». Выбор пал на картинку «notice1010.svg»:
Размещаем это изображение в левый верхний угол шаблона и красим его в красный цвет. Так же нужно убрать синюю рамку.
Переходим во вкладку для работы с переменными. Выбираем изображение для переменной «error» и делаем её невидимой для значения «0» в строке «error».
Меняем значение с «0» на «1» в строке «error». Больше ничего делать не нужно. Галка в поле «Видимый» уже стоит.
Таким образом, при значении «0» переменной «error» изображение не видно, а при значении «1» это изображение будет видно.
Крайне важно объяснить по какой причине было необходимо выбирать конкретное изображение для конкретной переменной. На самом деле, в этом нет ничего сверх сложного. Важно лишь понять суть, а суть такова. При добавлении картинки в шаблон она ни каким образом не связана с той или иной переменной. Выбирая картинку, мы даём системе понять, к какому изображению мы добавляем изменение переменной. Таким образом мы связываем эти вещи между собой. Эти, так скажем, «связывания» можно легко проверить. К примеру, для переменной «state»:
Таким образом мы видим следующее: для переменной «state» в значении «1» повернуть изображение «image_1» на 90°.
Для переменной «error» ситуация немного иная, поскольку картинка просто становится видимой при значении «1». В значении «0» её не видно.
Далее поговорим о третьей вкладке верхнего меню. Там задаются активные зоны для нажатия на этот шаблон. Для добавления активной зоны, нужно кликнуть ПКМ (правой кнопкой мыши) по шаблону и выбрать из списка «Добавить элемент» – «Action Zone».
После этого остаётся просто растянуть активную зону по всему шаблону. Не забываем сохранять все изменения в проекте.
Если есть необходимость в нескольких активных зонах (например, какой-нибудь большой шаблон с множеством кнопок), это также легко сделать. В этом случае нужно растянуть активную зону там, где будет область, на которую нужно нажимать пользователю.
