• iRidium studio 2019
• Внешний вид элементов интерфейса

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

Особенности внешнего вида объектов интерфейса​

Страница​

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

Особенности внешнего вида страницы:

• Размер всех страниц интерфейса равен разрешению, которое вы выбрали при создании интерфейса;
• Страница, образно, закрывает "пустое пространство", которое не содержит никакого интерфейса и не обрабатывает нажатия пользователя, поэтому:
• страницы не могут появляться с эффектами анимации,
• не могут быть прозрачными и полупрозрачными.

Неактивная зона интерфейса​

Это то самое "пустое пространство" вокруг страниц, которое не содержит интерфейса и появляется, если пропорции интерфейса не соответствуют пропорциям устройства, где запущено приложение i3 pro.

Цвет неактивных областей можно сменить в настройках проекта: General > Color.

Окно-попап​

Окно-попап (попап) - это окно с графическими элементами, которое можно открыть в любом месте страницы.

Особенности внешнего вида попапа:

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

Графический элемент​

На графические элементы в интерфейсе i3 pro можно нажимать, и нажатия будут сопровождаться отправкой команд. Чтобы показать совершение действия (касание кнопки), и событие (лампа включилась), внешний вид элемента может меняться процессе работы.

Возможность изменения внешнего вида - это важнейшая особенность элемента в i3 pro, реализуемая за счет хранения нескольких вариантов внешнего вида , так называемых Состояний (States) элемента.

Состояния графического элемента

Чтобы создать или удалить состояние графического элемента, а также для быстрого перемещения между состояниями используйте Project > States :

	Current State - редактировать выбранное состояние графического элемента.
	Prev State - открыть предыдущее состояние.
	Next State - открыть следующее состояние.
	Add State - добавить одно состояние.
	Delete State - удалить выбранное состояние.

В зависимости от желаемого поведения (Type), количество вариантов отображения меняется. Например:

• простейшая надпись - Label, имеет 1 вариант внешнего вида = 1 состояние
  Это может быть название комнаты или дисплей с температурой в комнате;
• кнопка - Button, имеет "включенный" и "выключенный" варианты = 2 состояния
  Это привычное поведение кнопки - меняет цвет при нажатии и возвращается в исходное состояние при отпускании;
• уровень - Level, имеет "заполненный" и "незаполненный" варианты = 2 состояния
  Это всевозможные ползунки, которые можно перемещать по шкале, "заполняя" её;
• У элементов с пометкой "Multistate" вы можете создать любое количество состояний для анимации и для смены внешнего вида в соответствии с конкретным значением параметра. Это анимация, прогресс-бары.

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

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

Настройки внешнего вида выбранного состояния будут отражены на динамической панели (под рабочей зоной) и в окне States, которое является частью боковой панели PROJECT.

В процессе работы интерфейса, элемент будет переключать cостояния в соответствии со своими настройками. На это могут влиять нажатия, данные, полученные от оборудования или из токенов, команды из JavaScript.

Настройки внешнего вида​

Внешний вид страницы, попапа, или состояния графического элемента определяется несколькими составляющими, которые расположены слоями ; по порядку наложения:

1. Fill - заливка цветом;
2. Image , Chameleon image или IP-камера - картинка, картинка-хамелеон или IP-камера (нельзя использовать одновременно);
3. Border - рамка;
4. Text - текст;
5. Icon - изображение-иконка.

Слои можно перемещать относительно друг-друга, но это редко используется.

Все свойства, влияющие на внешний вид элемента, можно увидеть в панели PROJECT > State, а также в динамической панели (панель быстрого доступа).

В быстром доступе основные свойства сгруппированы в 2 вкладки:

1. Редактор изображений - управление изображениями (картинкой, хамелеоном, иконкой) и их настройками;
2. Редактор текста - управление текстом и его настройками.

В боковой панели PROJECT > вкладка States, показаны все свойства элемента:

Изображения​

Image: основные и фоновые​

Image - это основные изображения элементов и фоновые изображения страниц и окон. Их можно растягивать на элементе и странице. Основное изображение расположено под Icon - как фон для иконки.

Cпособы добавления Image на элемент/страницу/попап:

1. Нажмите правой кнопкой мыши на элемент, попап или страницу, выберите пункт Add > Image ;
2. В левой панели инструментов включите режим отображения "Images" для панели быстрого доступа. Выберите изображение в поле Image, настройте его растягивание и расположение на элементе;
3. Выберите и настройте изображение в панели свойств элемента: PROJECT > States > Image: [ ... ];
4. Перетяните изображение на графический элемент или страницу из Галереи;
5. Нажмите “Put to page (popup) background” в меню правой кнопки мыши в Галерее, чтобы сделать изображение фоном страницы или окна (не работает для сложных объектов галереи).

Настройки Image:

• Image – файл изображения;
• Image align – выравнивание относительно элемента (привязать изображение к углу, середине стороны, центру элемента, или задать конкретные координаты левого-верхнего угла изображения относительно элемента);
• Image Padding Top / Left / Right / Bottom - отступ изображения от границ элемента (верхней/ левой./ правой/ нижней);
• Image stretch - растягивание на элементе:
• • отображается в оригинальном размере,
• • Proportional - растягивать на весь элемент, сохраняя пропорции (могут появиться пустые полосы),
• • Full size - растягивать на весь элемент, не сохраняя пропорции (изображение может быть искажено);
• Image filtration - алгоритм обработки изображения, который используется, если включен Image stretch. В зависимости от алгоритма, растянутое на элементе изображение может выглядеть более "угловатым" или "замыленным".

Нельзя использовать Image одновременно с Chameleon Image или IP-камерой - настроенный хамелеон будет отображаться, а основное изображение или IP-камера - нет, т.к. они находятся на одном слое "фонового изображения".

Icon: иконки​

Icon - это изображения-иконки, которые можно наложить на основные (Image, Chameleon Image) изображения элементов, страниц и окон. Icon можно перетаскивать по элементу курсором, если выбрать элемент, а на нем Icon.

• Вместо Icon очень часто используют специальные шрифты. Т.е. иконка на элементе задается не картинкой, а текстовым символом - это позволяет изменять ее размер быстро, и без потери качества, просто управляя размером шрифта. iRidium предоставляет множество "иконочных" шрифтов вместе с iRidium studio, см. шрифты "IR_xxx".

Cпособы добавления Icon на элемент/страницу/попап:

1. Нажмите правой кнопкой мыши на элемент, попап или страницу, выберите пункт Add > Icon ;
2. В левой панели инструментов включите режим отображения "Images" для панели быстрого доступа. Выберите изображение в поле Icon, настройте его расположение на элементе;
3. Выберите и настройте изображение в панели свойств элемента: PROJECT > States > Icon: [ ... ];
4. Перетяните изображение на графический элемент или страницу из Галереи.

Настройки Icon:

• Icon – файл изображения;
• Icon align – выравнивание относительно элемента (привязать изображение к углу, середине стороны, центру элемента, или задать конкретные координаты левого-верхнего угла изображения относительно элемента);
• Icon Padding Top / Left / Right / Bottom - отступ иконки от границ элемента (верхней/ левой./ правой/ нижней);
• Icon stretch – растягивание на элементе:
• – отображается в оригинальном размере,
• • Proportional – растягивать на весь элемент, сохраняя пропорции (могут появиться пустые полосы),
• • Full size – растягивать на весь элемент, не сохраняя пропорции (изображение может быть искажено);
• Icon filtration – алгоритм обработки изображения, который используется, если включен Icon stretch. В зависимости от алгоритма, растянутое на элементе изображение может выглядеть более "угловатым" или "замыленным".

Chameleon Image: изображения-хамелеоны​

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

Хамелеон - изображение в формате PNG, состоит из четырех цветовых каналов (прозрачность, красный, зеленый и синий: ARGB). Цвета обрабатываются следующим образом:

*Прозрачность - задает границы элемента; *Red - область, которая будет заполнена цветом заливки элемента (Fill); *Green - область, которая будет заполнена цветом бордюра элемента (Border); *Blue - не используется.

Чтобы прозрачность была распознана правильно, сохраните PNG файл в RGB цветах (32-bit).

Пример хамелеона. Сверху - изображение, снизу - примеры его использования в качестве хамелеона:

Нельзя использовать Chameleon Image одновременно с Image или IP-камерой - настроенный хамелеон будет отображаться, а основное изображение или IP-камера - нет, т.к. они находятся на одном слое "фонового изображения".

IP-камеры​

IP-камера (или динамическое изображение) - это потоковое видео из сети, которое можно выводить на элементе. Ссылка на IP-камеру указывается вместо Image элемента. IP-камеру можно растягивать на элементе, но делать этого не рекомендуется - это сильно "нагружает" приложение, поэтому лучше передавать видео-поток сразу в желаемом разрешении. Кроме видео-потока, можно указать ссылку на изображение из локальной сети или интернета, если оно периодически обновляется.

Способы добавления IP-камеры на элемент/страницу/попап:

1. Нажмите правой кнопкой мыши на элемент, попап или страницу, выберите пункт Add > IP-Camera ;
2. Перетяните камеру на графический элемент из панели CAMERAS (открывается из правой панели инструментов);
3. В левой панели инструментов включите режим отображения "Images" для панели быстрого доступа. Выберите камеру в поле Image, настройте его растягивание и расположение на элементе;
4. Выберите и настройте изображение в панели свойств элемента: PROJECT > States > Image: [ ... ];

Настройки IP-камеры:

• Настройка IP-камер и DVR.

Нельзя использовать IP-камеру одновременно с Image или Chameleon Image - настроенный хамелеон будет отображаться, а основное изображение или IP-камера - нет, т.к. они находятся на одном слое "фонового изображения".

Текст​

Text - это блок текста, который является частью любого графического элемента, а также может быть добавлен на страницу и попап. Блок текста можно перетаскивать по элементу курсором – если выбрать элемент, на нем текст, а затем тащить текст мышью. Текст отображается в пределах объекта, на котором расположен, и не может выходить за них (обрезается).

• Текст часто используют вместо Icon . Специальные "иконочные" шрифты позволяют заменить картинку-иконку на текстовый символ - это позволяет быстро менять размер иконки без потери качества, просто управляя размером шрифта. iRidium предоставляет множество "иконочных" шрифтов вместе с iRidium studio, см. шрифты "IR_xxx":

Cпособы добавления текста на элемент/страницу/попап:

1. Если на элементе уже есть текст, выберите элемент, затем двойным кликом по тексту начните его редактирование;
2. Если текста еще нет, нажмите правой кнопкой мыши на элемент, попап или страницу, выберите пункт Add > Text ;
3. Введите текст в свойствах элемента: PROJECT > States > Text: [ ];
4. Введите текст в поле ввода в панели быстрого доступа;
5. В оконном режиме ввода текста откройте карту символов (Char map) и выберите символы для вставки в текстовое поле (способ очень удобен для работы со шрифтовыми иконками);
6. Для добавления текста на все состояния графического элемента нажмите All states ;
7. При активации чекбокса ESC seq(\r\n) становится доступно перемещение позиции печати на одну строку вниз, при введении символов "\r\n" в текстовом окне (аналог клавиши Enter).

Настройки текста:

• Text – блок или строка текста. Поддерживает переносы строк при редактировании в оконном режиме;
• Font file – файл шрифта. В списке шрифтов вы найдете стандартные, а так же специальные шрифты iRidium. Приложение не загружает автоматически шрифты, имеющиеся в системе. Для добавления собственного шрифта необходимо воспользоваться данной инструкцией;
• Font size – размер шрифта;
• Spacing - межбуквенный интервал;
• LineSpacing - межстрочный интервал;
• Bold, Italic – полужирный текст или курсив (если шрифт поддерживает);
• Text align – выравнивание относительно элемента (привязать текст к углу, середине стороны, центру элемента, или задать конкретные координаты левого-верхнего угла текстового блока относительно элемента); *Text Padding Top / Left / Right / Bottom - отступ текста от границ элемента (верхней/ левой./ правой/ нижней).
  * В зависимости от типа выравнивания (Text Align) выбираются "главные стороны выравнивания". Например, для выравнивания сверху слева, слева по центру, сверху по центру и по центру - главными отступами будут левый и верхний. Для остальных типов выравнивания приоритетными являются линии в соответствующих углах.
  
• Если включен перенос текста (Word Wrap), то он будет переноситься когда дойдет до отступа в элементе. В зависимости от выравнивания текст может выходить за нижние и верхние пределы.
• TextColor – цвет текста;
• Word wrap – автоматический перенос строки, если текст не помещается в ширину элемента;
• Text effect – эффект "тени" у текста, несколько вариантов тени;
• • Effect color – цвет "тени";
• Show value in text – показать в текстовом поле значение, полученное в Value. Можно указать формат отображения (целое число или количество нулей после запятой). Выбранный шаблон отображения данных можно добавить в текст.

Заливка и непрозрачность​

Заливка (Fill) - это заполнение графического элемента цветом. Заливка - это цвет RGB с альфа-каналом (Alpha channel), т.е. сквозь цвет заливки могут просвечивать объекты, расположенные слоем ниже. Альфа-канал не поддерживает только заливка страниц (Page).

Непрозрачность (Opacity) - параметр, который определяет непрозрачность всего элемента - всех слоев, из которых состоит элемент (заливка, изображения, текст и рамка).

Настройка цвета и непрозрачности доступна рядом со списком состояний элемента, над рабочей зоной:

Рамка​

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

Настройка рамки доступна рядом с настройкой цвета и непрозрачности, над рабочей зоной: