Эта страница является переводом страницы Editor Tools. Перевод выполнен на 100%.

---

iRidium Studio

руководство по созданию интерфейсов визуализации

« Настройки GUI Editor

Настройка оборудования »

обучение:
онлайн-вебинары

Проект iRidium содержит графическую часть (страницы, всплывающие окна, кнопки, изображения, анимация, видео-поток, элементы управления) и драйверную часть (команды и статусные каналы оборудования, скрипты на основе JS Guide). Эти части постоянно взаимодействуют, определяя своими настройками сценарии работы проекта. Создание проекта iRidium начинается именно с преднастройки его графической части.

Графическую часть проекта (дизайн) можно получить одним из следующих способов:

1. Бесплатно скачать готовый типовой дизайн на сайте iridiummobile.ru в разделе "Загрузки". Это позволит вам сэкономить время и не разрабатывать интерфейс с нуля.
2. Купить готовый дизайн в секции BUY на сайте iridiummobile.ru (только для интеграторов). Предварительно необходимо зарегистрироваться в секции My account и пройти Full Registration.
3. Создать дизайн самостоятельно в iRidium Studio.

Новый проект iRidium

При запуске редактора iRidium GUI Editor первым шагом является создание нового, или открытие заранее подготовленного проекта. Новый проект создается с помощью клавиши на панели инструментов, Ctrl+N или меню File > New Project

Новый проект:

File > New > New Panel Project

• Project Name - имя нового проекта
• Target Device - тип устройства, на котором будет запускаться проект (определяет разрешение проекта). Выберите "Custom", чтобы ввести разрешение вручную
• Landscape Widht / Landscape Height - разрешение пейзажной страницы проекта в пикселях
• Page Name - имя первой страницы нового проекта
• Orientation - положение стартовой страницы (портретная/пейзажная)

После создания нового проекта вы увидите окно настроек:

Настройки открытого проекта iRidium

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

Переключайтесь между созданием и выбором графических элементов на странице с помощью клавиш панели инструментов:

	Select – выбрать графический элемент
	Draw Item - создать графический элемент

Инструменты для быстрого создания интерфейса описаны в разделе

Рабочая область GUI Editor

Составляющие интерфейса

• Страницы (Page) - база проекта, служит для размещения графических элементов. Окна можно открыть только поверх страницы
  • в проекте должна быть хотя бы одна страница
  • страница может быть вертикальной или горизонтальной
  • страница поддерживает авто-поворот (переключение Горизонтальная/Вертикальная при повороте планшета или смартфона с акселерометром). Чтобы страница повернулась, нужно создать ей пару в другой ориентации
  • все страницы одинаковы по размеру - он определяется разрешением проекта.
  • страницы не могут появляться с эффектами анимации, не могут быть прозрачными и полу-прозрачными
  • одновременно открыта только одна страница, открытие новой закрывает предыдущую и все попапы на ней

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

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

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

• Элементы оформления интерфейса
  • в этом качестве можно использовать любой графический элемент
  • кнопку можно сделать неактивной - она не будет реагировать на нажатия

Организация интерфейса

• Интерфейс на базе страниц

При создании интерфейса на базе страниц (Pages) без окон (Popups) вы можете использовать преимущества поворотного дизайна, который автоматически переключается между вертикальным и горизонтальным видом. При работе со страницами можно испольовать команду "Prev Page" (предыдущая страница), не указывая имя страницы на которую нужно вернуться.

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

• Интерфейс на базе 1 страницы и окон

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

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

Графический элемент – это объект интерфейса, расположенный на странице или окне проекта iRidium. К графическим элементам относятся кнопки, уровни, иконки, элементы оформления, фоновые и анимированные изображения и другие, узко специализированные типы элементов.

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

Draw Item

Используйте инструмент Draw Item панели инструментов для создания шаблона графического элемента, на основе которого можно настроить элемент с любыми свойствами:

Шаблон элемента по умолчанию имеет 2 состояния (вкл/выкл) и тип Button (простая кнопка). Такая кнопка будет менять свое состояние на противоположное при нажатии, и возвращаться в исходное положение при отпускании графического элемента.

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

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

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

Все свойства графических элементов >>

Типы графических элементов

В проектах iRidium у Вас есть возможность оперировать следующими типами графических элементов:

Кнопка (Button)	Отправка фиксированных значений; отображение полученных данных
Уровень (Level)	Отправка значения из заранее заданного диапазона с помощью ползунка; отображение текущего значения за счет позиции ползунка
Триггер (Trigger Button)	Переключение между двумя фиксированными значениями, указанными при настройке Триггера
Прирост/убывание (Up/Down Button)	Увеличение или уменьшение значения на заданную величину относительно текущего значения в установленных пределах. Пределы изменения и шаг прироста/убывания задаются при настройке
Анимированная кнопка (Multistate Button)	Отправка фиксированных значений и получение данных, сопровождающееся воспроизведением анимации при нажатии или смене состояния
Анимированный уровень (Multistate Level)	Отправка и получение значений в заданном диапазоне, где каждому, или группе значений уровня соответствует отдельное изображение
Поле ввода (Edit Box)	Ввод строки данных, которые должны быть отправлены в шину
Джойстик (Joystick)	Управление RGB светодиодами с помощью объекта Color Picker
Статический список (Static List)	Прокрутка списка попапов с помощью жестов
График(тренд) (Trend)	График для отображения значений тегов из базы данных

Button (кнопка)

Графический элемент из 1 или 2х состояний. Кнопка, в зависимости от настроек может быть фиксируемой и не фиксируемой. Каждое нажатие на кнопку инициирует отправку одних и тех же команд, заранее к ней привязанных.

1 Создайте переменную, куда нужно записать число или строку. Настройте ее, как показано в инструкции

2 Создайте кнопку, настройте ее следующим образом (cм. все настройки):

Type	Button
Feedback	Реакция кнопки на нажатия пользователя и на получение данных от оборудования Momentary - кнопка отправляет значение, но не отображает обратную связь Channel - отправляет значение и отображает обратную связь None - визуально не реагирует на нажатие или получение обратной связи Invert Channel - отправляет значение и отображают обратную связь инверсно (false - включена, true - выключена)

3 Перетащите переменную на кнопку, в диалоге привязки переменной укажите:

Action	Send Number - записать в переменную число. Можно переключить на Send String для отпарвки ASCII строки
Event for Action	Событие интерфейса, связанное с кнопкой. При возникновении события, в переменную будет записано указанное значение Press - отправить по нажатию на кнопку Release - отправить при отпускании кнопки Hold - отправлять в цикле по удержанию Move - не работает с кнопкой (Button) Одновременно можно использовать несколько событий. Например, отправть [ 100 ] по нажатию и [ 0 ] по отпусканию.
Value	Значение для записи в переменную. Кнопка отправляет всегда одно и то же, записанное в Value значение
Add a feedback channel	(Create a feedback channel) Поставьте эту галочку, если нужно, чтобы кнопка не только записала значение в переменную, но и изменила состояние при получении данных из этой же переменной. Полученное значение будет влиять на состояние кнопки (вкл/выкл) и может быть отображено в ее текстовом поле.

4 Теперь переменная связана с кнопкой. Посмотреть все связи кнопки можно в OBJECT PROPERTIES > Programming

пример
ЗАГРУЗИТЬ

Используйте обратную связь, чтобы отобразить значение на элементе в виде числа:

1. введите шаблон в текстовое поле элемента
2. перетяните Feedback на элемент, "In Value":

СПИСОК ШАБЛОНОВ

Шаблон	Функция	Шаблон	Функция
$V	целая часть полученного значения	$P	процента от максимального значения Уровня
$F1 - 5	значение с плавающей запятой. От 1 до 5 - число знаков после запятой	$H	максимальное значение Уровня
$S	номер выбранного состояния	$A	значение за вычетом минимального значения Уровня
$R	размах Уровня (максимальное минус минимальное)	$L	минимальное значение Уровня
$X	текущее значение в формате HEX	$$	символ "доллар"

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

• Загрузить: Проект демонстрирующий работу шаблонов (0,7 Mb)

Level (уровень)

Нажатие на уровень или перемещение ползунка отправляет в управляемую переменную число, соответствующее текущему положению ползунка.

1 Создайте переменную, которую нужно регулировать. Настройте ее, как показано в инструкции

2 Создайте уровень, настройте его следующим образом (cм. все настройки):

Type	Level
Feedback	Реакция уровня на нажатия пользователя и на получение данных от оборудования Channel - отправляет значение и отображает обратную связь (ползунок перемещается при получении данных)
Min / Max	Пределы регулирования уровня: определяют диапазон значений, в котором перемещается ползунок
Invert Range	Меняет местами нижнюю и верхнюю часть уровня, т.е. регулирование от 0 до 100 будет происходить не снизу вверх (при вертикальном уровне), а сверху вниз.

3 Перетащите переменную на уровень, в диалоге привязки переменной укажите:

Action	Send Token - отправить переменной значение Value, взятое как текущее положения ползунка уровня в диапазоне Min...Max
Event for Action	Событие интерфейса, связанное с кнопкой. При возникновении события, в переменную будет записано указанное значение Press - отправить Value по нажатию Release - отправить Value при отпускании Move - отправлять все промежуточные значения Value при перемещении ползунка. добавляйте команду Delay (100) перед командой на событии Move, чтобы меньше нагружать оборудование (с командой Delay, Move будет срабатывать не чаще, чем раз в 100 мс) Можно использовать все три события одновременно.
Add a feedback channel	(Create a feedback channel) Поставьте эту галочку, т.к. нужно, чтобы ползунок уровня перемещался в соответствии с актуальным состоянием переменной

4 Теперь переменная связана с уровнем. Посмотреть все связи можно в OBJECT PROPERTIES > Programming

пример
ЗАГРУЗИТЬ

Используйте обратную связь, чтобы отобразить значение на элементе в виде числа:

1. введите шаблон в текстовое поле элемента
2. перетяните Feedback на элемент, "In Value":

СПИСОК ШАБЛОНОВ

Шаблон	Функция	Шаблон	Функция
$V	целая часть полученного значения	$P	процента от максимального значения Уровня
$F1 - 5	значение с плавающей запятой. От 1 до 5 - число знаков после запятой	$H	максимальное значение Уровня
$S	номер выбранного состояния	$A	значение за вычетом минимального значения Уровня
$R	размах Уровня (максимальное минус минимальное)	$L	минимальное значение Уровня
$X	текущее значение в формате HEX	$$	символ "доллар"

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

• Загрузить: Проект демонстрирующий работу шаблонов (0,7 Mb)

Multistate Button (кнопка с анимацией)

Каждое нажатие на кнопку инициирует отправку одних и тех же команд, заранее к ней привязанных. Анимированная кнопка работает с командами точно так же, как обычная, но при нажатии (или получении обратной связи) воспроизводит анимацию при изменении состояния.

1 Создайте переменную, куда нужно записать число или строку. Настройте ее, как показано в инструкции

2 Создайте анимированную кнопку, создайте необходимое число состояний - кадров, настройте изображения для кадров, текст или др., настройки кнопки (cм. все настройки):

Type	Multistate Button
Feedback	Реакция кнопки на нажатия пользователя и на получение данных от оборудования Momentary – анимация при нажатии на кнопку. При отпускании кнопки, анимация пойдет в обратном порядке. Repeat: True - не остановится до отпускания кнопки On – анимация в момент запуска проекта. Repeat: True - не остановится, пока запущен проект (бесконечный цикл) Blink / Channel – анимация при получении любого ненулевого значения от оборудования. Repeat: True - не остановится до получения нуля
Time Up / Time Down	(десятые доли секунды) скорость воспроизведения анимации с первого по последний кадр и обратно
Repeat	непрерывное повторение анимации, когда элемент находится в активном состоянии

3 Перетащите переменную на кнопку, в диалоге привязки переменной укажите:

Action	Send Number - записать в переменную число. Можно переключить на Send String для отпарвки ASCII строки
Event for Action	Событие интерфейса, связанное с кнопкой. При возникновении события, в переменную будет записано указанное значение Press - отправить по нажатию на кнопку Release - отправить при отпускании кнопки Hold - отправлять в цикле по удержанию Одновременно можно использовать несколько событий. Например, отправть [ 100 ] по нажатию и [ 0 ] по отпусканию.
Value	Значение для записи в переменную. Кнопка отправляет всегда одно и то же, записанное в Value значение
Add a feedback channel	(Create a feedback channel) Поставьте эту галочку, если нужно, чтобы кнопка не только записала значение в переменную, но и изменила состояние при получении данных из этой же переменной. Полученное значение будет влиять на состояние кнопки (вкл/выкл) и воспроизведение анимации

4 Теперь переменная связана с кнопкой. Посмотреть все связи кнопки можно в OBJECT PROPERTIES > Programming

пример
ЗАГРУЗИТЬ

Multistate Level (уровень с анимацией)

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

1 Создайте переменную, которую нужно регулировать. Настройте ее, как показано в инструкции

2 Создайте и настройте Multistate Level (cм. все настройки):

Type	Multistate Level
Feedback	Реакция уровня на нажатия пользователя и на получение данных от оборудования Momentary - состояния элемента сменяются только при нажатии Channel - состояния меняются при нажатии и получении данных
Min / Max	Пределы регулирования уровня: определяют диапазон значений, в котором работает уровень
Invert Range	Меняет местами нижнюю и верхнюю часть уровня, т.е. смена кадров будет происходить от последнего к первому

3 Перетащите переменную на уровень, в диалоге привязки переменной укажите:

Action	Send Token - отправить переменной значение Value, взятое как текущее положения ползунка уровня в диапазоне Min...Max
Event for Action	Событие интерфейса, связанное с кнопкой. При возникновении события, в переменную будет записано указанное значение Press - отправить Value по нажатию Release - отправить Value при отпускании Move - отправлять все промежуточные значения Value при перемещении ползунка. добавляйте команду Delay (100) перед командой на событии Move, чтобы меньше нагружать оборудование (с командой Delay, Move будет срабатывать не чаще, чем раз в 100 мс) Можно использовать все три события одновременно.
Add a feedback channel	(Create a feedback channel) Поставьте эту галочку, т.к. нужно, чтобы состояние уровня менялось в соответствии с актуальным состоянием переменной

4 Теперь переменная связана с уровнем. Посмотреть все связи можно в OBJECT PROPERTIES > Programming

пример
ЗАГРУЗИТЬ

List (инерционный список)

Графический элемент, который не используется для работы с оборудованием напрямую. Он позволяет сформировать список пунктов (базирующихся на общем шаблоне), изменять количество пунктов, информацию в них, выполнять действия по нажатию на пункт. Заполнение инерционного списка производится в iRidium Script, см. List API.

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

1 С помощью Java Script сформируйте набор данных, из которых должен строиться инерционный список (например, список песен и исполнителей). Используйте List API, чтобы заполнить список

2 Создайте элемент - List, настройте его следующим образом (cм. все настройки):

Type	List
Feedback	Реакция уровня на нажатия пользователя и на получение данных от оборудования Channel - отправляет значение и отображает обратную связь (ползунок перемещается при получении данных)
Feedback	влияет на подложку списка, но не на элементы в нем. Обычно не используется
List Template	попап, который будет шаблоном для создания пунктов списка
List Items	пункты списка, которые будут созданы по умолчанию (на базе шаблона). Можно создать любое число пунктов и настроить в них разный текст. Команды формируются с помощью List API
Resistance	процент потери инерции при движении списка
Scroll Bar	показать/скрыть полосу прокрутки

3 C помощью List API свяжите элементы списка с командами оборудованию

пример
ЗАГРУЗИТЬ

Up/Down Button (кнопка прирост/убывание)

Графический элемент из 2х состояний. При каждом нажатии на такую кнопку, рассчитывается значение, большее текущего на "Up/Down Value", но не превышающее "Max/Min Value". Рассчитанное значение отправляется переменной: таким образом реализуется пошаговое приращение переменной. Для работы с элементом нужна обратная связь от переменной в реальном времени.

1 Создайте переменную, которую нужно инкрементировать. Настройте ее, как показано в инструкции

2 Создайте уровень, настройте его следующим образом (cм. все настройки):

Type	Up/Down Button
Feedback	Реакция уровня на нажатия пользователя и на получение данных от оборудования Momentary - кнопка должна визуально нажиматься сразу же, она не отображает обратную связь визуально
Up/Down Value	шаг инкрементирования (может быть больше либо меньше нуля)
Min/Max Value	предел инкрементирования (минимальный предел для отрицательного шага, максимальный для положительного)
Hold Value	шаг инкрементирования при срабатывании события Hold. Команду управления оборудованием можно одновременно привязать на Press и Hold, тогда значение будет прирастать при удержании кнопки
Hold Time	время удержания кнопки, чтобы сработало событие Hold
Repeat Time	частота повторения событий On Hold

3 Перетащите переменную на кнопку, в диалоге привязки переменной укажите:

Action	Send Token - отправить переменной Value, рассчитанное как сумма текущего значения и величины инкремента
Event for Action	Событие интерфейса, связанное с кнопкой. При возникновении события, в переменную будет записано рассчитанное значение инкремента Press - отправить по нажатию Hold - при удержании кнопки инкрементировать значение с указанной периодичностью Можно использовать два события одновременно.
Add a feedback channel	(Create a feedback channel) Поставьте эту галочку, т.к. нужно, чтобы инкремент рассчитывался в соответствии с актуальным состоянием переменной

4 Теперь переменная связана с уровнем. Посмотреть все связи можно в OBJECT PROPERTIES > Programming

пример
ЗАГРУЗИТЬ

Trigger Button (кнопка триггер)

Триггерное переключение с помощью элемента "Trigger Button" позволяет отправлять попеременно 2 произвольных значения, указанных в Trigger Value 1 и Trigger Value 2. При наличии обратной связи, триггер автоматически принимает соответствующее состояние и при нажатии отправляет значение, противоположное текущему. Триггер нельзя настроить на работу с 3 и более значениями.

1 Создайте переменную, которую нужно переключать между 2 значениями. Настройте ее, как показано в инструкции

2 Создайте кнопку, настройте ее следующим образом (cм. все настройки элемента):

Type	Trigger Button
Feedback	Реакция на нажатия и получение данных от оборудования Channel - переключает значение и отображает обратную связь (другие не используются)
Trigger Value 1 / Trigger Value 2	значения, которые нужно попеременно отправлять при нажатии на триггер, зависят от типа переменной

3 Перетащите переменную на триггер, в диалоге привязки переменной укажите:

Action	Send Token - отправить переменной значение Value, взятое из графического элемента (Trigger Value 1 или Value 2, в зависимости от текущего состояния триггера)
Event for Action	Событие интерфейса, связанное с кнопкой. При возникновении события, в переменную будет записано указанное значение Press - отправить по нажатию Release - отправить при отпускании Одновременно можно использовать только одно событие для триггера
Add a feedback channel	(Create a feedback channel) Поставьте эту галочку, т.к. нужно, чтобы триггер знал свое состояние и менял его получении данных из переменной и при нажатии.

4 Теперь переменная связана с триггером. Посмотреть все связи можно в OBJECT PROPERTIES > Programming

пример
ЗАГРУЗИТЬ

Radio Buttons

Радиокнопка (Radio Button) - элемент интерфейса, который позволяет выбрать одну из предварительно настроенных опций. В iRidium радиокнопки не выделены как отдельный тип элемента, вы можете настроить их, взяв за основу Trigger Button. Задача радикнопкок: отправлять переменным значения с разных кнопок, из которых можно выбрать только одну.

Настройки и поведение радиокнопки зависят от того, с какой переменной оборудования вы работаете. Приведем несколько ситуаций и примеров настройки.

вар. 1 Радиокнопки для управления одной переменной с возможностью получения обратной связи. Записывают значения в одну переменную; оборудование возвращает текущее состояние этой переменной.

1. Настройте элементы Trigger Button (см. изображение) по числу радиокнопок. В полях Trigger Value 1 и 2 укажите одинаковые значения, соответствующие тем, что каждая кнопка должна отправлять управляемой переменной
2. Перетяните команду управления переменной на все радиокнопки. Выберите событие Press или Release для отправки, обязательно поставьте галочку Add A Feedback Channel для отображения статуса переменной

настроенная кнопка перейдет в State 2 только когда переменная примет значение, указанное в Trigger Value 1 и 2

вар. 2 Радиокнопки для управления переменными с возможностью получения обратной связи. Записывают значения вкл\выкл в разные переменные; оборудование возвращает текущее состояние этих переменных. Переменные не синхронизированы оборудованием автоматизации для работы в режиме радиокнопок (нужно выключать неактивные режимы на стороне iRidium)

1. Настройте элементы Type: Trigger Button, Feedback: Channel, укажите Trigger Value 1 = неактивное, Trigger Value 2 = активное состояние переменной (например 0/1, 0/100)
2. Перетяните команды управления переменными на графические элементы. На примере первого элемента группы:
   1. Отправьте нули во все переменные, которые входят в группу радиокнопок, чтобы отключить текущий активный режим. Для этого в диалоге отправки команды выберите Action: Send Number
   2. Добавьте задержку Delay(50) мс через редактор макросов события Press, чтобы дать оборудованию время на отключение активного режима
   3. Перетяните на элемент команду управления переменной, которая соответствует радиокнопке. Оставьте Action: Send Token. Value на событии Press (или Release), обязательно поставьте галочку Add a Feedback Channel

Если режимы работы оборудования синхронизируются на стороне оборудования автоматизации (при включении одного из режимов остальные автоматически выключаются), вам не нужно отпрвлять нули в отключаемые переменные. Выполните только подпункт 2.3 настроек

Edit Box (поле ввода)

Элемент для ввода данных с клавиатуры. Введенные данные остаются на элементе, откуда их можно "забрать" - отправить оборудованию или обработать в скрипте.

1 Создайте элемент, настройте его следующим образом (cм. все настройки):

Type	Edit Box
Feedback	Реакция на нажатие Momentary - поле ввода подсвечивается при получении фокуса

2 Поле ввода можно связать с переменной напрямую или через скрипт

При нажатии на поле ввода, выполните команду открытия клавиатуры:

• Object Properties > Programming > Press > «Show Keyboard [keyboard_type]»

По событию Enter, передайте данные из Editbox элементу или драйверу.

Пример работы:

• Press - открывается виртуальная клавиатура смартфона (планшета)
• Enter - поле ввода отправляет текст как команду драйверу; закрывает клавиатуру; очищает поле ввода.

Чтобы удалить ранее введенные данные, запишите в поле ввода пустую строку:

пример
варианты настройки поля ввода

Virtual key (виртуальная клавиша)

Элемент для создания пользовательской клавиатуры. На базе виртуальной клавиши Вы можете создать клавиатуру любого вида и конфигурации в проекте iRidium.

1 Создайте элемент, настройте его следующим образом (cм. все настройки):

Type	Virtual key
Feedback	Реакция на нажатие Momentary - для клавиш, отвечающих за ввод отдельного символа Channel - для клавиш, у которых настроена возможность смены регистра Для переключения раскладки используйте переменную проекта, которая хранит число - текущее состояние клавиши. Привяжите переменную “In Value” для смены регистра.
Key Action	Событие клавиши Insert Text – ввод символа, указанного в текстовом поле клавиши. Впишите 1 букву или цифру в текстовое поле, и клавиша отправит ее Enter, Up, Down, Left, … – команды клавиатуры ОС Windows

Виртуальная клавиша отправляет значение в активное поле ввода (Edit Box). Если вы не создали поле ввода, значение не будет никуда записано.

пример
ЗАГРУЗИТЬ

Joystick (джойстик)

Графический элемент из 1 состояния с курсором. Имеет координаты X и Y - текущее положение курсора джойстика. Диапазон движения курсора ограничен минимальным и максимальным значениями. Позволяет получить цвет под курсором для управления RGB освещением.

1 Создайте элемент, настройте его следующим образом (cм. все настройки):

Type	Joystick
Feedback	реакция на события Momentary – курсор перемещается пользователем
MinX ... MaxX / MinY ... MaxY	диапазон перемещения курсора по осям X и Y
InvertX / InvertY	минимум и максимум по осям X и Y меняются местами

2 Джойстик можно связать с переменной напрямую или через скрипт. Обычно используется скрипт для получения цвета под курсором и отправки составляющих цвета в каналы управления RGB лентой

пример
ЗАГРУЗИТЬ

Color Picker

RGB светодиодные ленты управляются с помощью DMX контроллеров и имеют одну из конфигураций:

• Red, Green, Blue - три канала для управления цветом ленты. Уменьшение яркости достигается уменьшением яркости отдельных каналов цвета.
• Red, Green, Blue, Alpha - четыре канала для управления цветом и яркостью ленты

вариант 1 Управлять RGB лентой с помощью трех (четырех) элементов Level.

В проекте создаются 3 (4) переменные Unsigned 8-bit (Subtupe: VALUE). Переменные управляются в диапазоне 0...255, увеличение значения в канале соответствует увеличению яркости соответствующего цвета.

LEVEL

Нажатие на уровень или перемещение ползунка отправляет в управляемую переменную число, соответствующее текущему положению ползунка.

1 Создайте переменную, которую нужно регулировать. Настройте ее, как показано в инструкции

2 Создайте уровень, настройте его следующим образом (cм. все настройки):

Type	Level
Feedback	Реакция уровня на нажатия пользователя и на получение данных от оборудования Channel - отправляет значение и отображает обратную связь (ползунок перемещается при получении данных)
Min / Max	Пределы регулирования уровня: определяют диапазон значений, в котором перемещается ползунок
Invert Range	Меняет местами нижнюю и верхнюю часть уровня, т.е. регулирование от 0 до 100 будет происходить не снизу вверх (при вертикальном уровне), а сверху вниз.

3 Перетащите переменную на уровень, в диалоге привязки переменной укажите:

Action	Send Token - отправить переменной значение Value, взятое как текущее положения ползунка уровня в диапазоне Min...Max
Event for Action	Событие интерфейса, связанное с кнопкой. При возникновении события, в переменную будет записано указанное значение Press - отправить Value по нажатию Release - отправить Value при отпускании Move - отправлять все промежуточные значения Value при перемещении ползунка. добавляйте команду Delay (100) перед командой на событии Move, чтобы меньше нагружать оборудование (с командой Delay, Move будет срабатывать не чаще, чем раз в 100 мс) Можно использовать все три события одновременно.
Add a feedback channel	(Create a feedback channel) Поставьте эту галочку, т.к. нужно, чтобы ползунок уровня перемещался в соответствии с актуальным состоянием переменной

4 Теперь переменная связана с уровнем. Посмотреть все связи можно в OBJECT PROPERTIES > Programming

вариант 2 Управлять RGB лентой с помощью палитры

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

Это требует добавления в проект специального скрипта - библиотеки RGB. Скрипт необходимо добавить только 1 раз, далее можно использовать его для управления RGB лентами любых встроенных драйверов iRidium.

2.1 Создайте палитру и вспомогательные элементы. В качестве палитры можно использовать любое цветное изображение.

• Настройте палитру как Joystick с диапазоном регулирования 0...100 по Х и Y
• Настройте неактивный элемент Button, который будет отображать выбранный на палитре цвет
• Если нужно, настройте активные кнопки Button, которые будут пошагово изменять яркость ленты

2.2 Скачайте файл RGB_Library.js

Этот файл обеспечивает управление цветом с помощью JavaScript. Добавьте файл в проект визуализации: откройте проект в iRidium Studio, нажмите клавишу , выберите пункт ( + ) "Add Script From File"

2.3 Создайте пустой файл скрипта: ( + ) "New Script", чтобы добавить в него описание вашей RGB палитры:

В файле скрипта опишите палитру и элемент для отображения выбранного цвета:

///////// Copy this function to make one more RGB palette ///////
RGB_player(
         "Driver",                                            // Driver in project
         "Channel Red",                                       // Name of Red Channel
         "Channel Green",                                     // Name of Green Channel 
         "Channel Blue",                                      // Name of Blue Channel
         255,                                                 // Top limit for RGB channel (100 or 255)
         IR.GetItem("Page 1").GetItem("Item Color Picker 1"), // Item "Color Picker"
         /////// optional parameters ///////////////////////////
         IR.GetItem("Page 1").GetItem("Item Display 1"),      // Item "Display"
         )

Расширенный вариант содержит кнопки управления яркостью:

Палитра, отображение цвета и кнопки +/- для управления яркостью

///////// Copy this function to make one more RGB palette ///////
RGB_player(
         "Driver",                                            // Driver in project
         "Channel Red",                                       // Name of Red Channel
         "Channel Green",                                     // Name of Green Channel 
         "Channel Blue",                                      // Name of Blue Channel
         255,                                                 // Top limit for RGB channel (100 or 255)
         IR.GetItem("Page 1").GetItem("Item Color Picker 1"), // Item "Color Picker"
         /////// optional parameters ////////////////////////////
         IR.GetItem("Page 1").GetItem("Item Display 1"),      // Item "Display"
         IR.GetItem("Page 1").GetItem("Up 1"),                // Item "Up"
         IR.GetItem("Page 1").GetItem("Down 1"),              // Item "Down"
         10                                                   // Increment step for "Up" and "Down"
         )

В описании укажите где находится палитра, и какому оборудованию отправляет данные:

• IR.GetDevice("Driver") - имя драйвера, которому вы будете отправлять команды RGB. Скопируйте имя драйвера в PROJECT DEVICE PANEL
• "Channel Red", "Channel Green", "Channel Blue" - имена переменных (Commands), которые отвечают за управление красной, зеленой, и синей составляющими цвета. Скопируйте имена в PROJECT DEVICE PANEL. Имена Commands должны совпадать с именами Feedbacks, откуда приходит информация о текущем цвете RGB ленты.
  HDL-Buspro, Domintell - имеют особый способ записи имен. Для них нужно указать <имя устройства в сети>:<имя канала>, например "Dimmer in Bedroom:Channel 1"
• 255 - максимальное значение яркости для каждого цвета. Для большей части оборудования яркость регулируется от 0 до 255, но есть драйверы, которые управляют яркостью цвета в диапазоне 0...100 (например, HDL). Для HDL-Buspro укажите значение 100 в этой строке настроек.
• IR.GetItem("Page 1").GetItem("Item Color Picker 1") - имя страницы ("Page 1") и элемента на ней ("Item Color Picker 1") который вы будете использовать как палитру
• IR.GetItem("Page 1").GetItem("Item Display 1") - имя страницы ("Page 1") и элемента на ней ("Item Display 1") который вы будете использовать для отображения цвета, выбранного на палитре
• IR.GetItem("Page 1").GetItem("Up 1") - имя страницы ("Page 1") и элемента на ней ("Up 1") который будет при нажатии увеличивать яркость выбранного цвета
• IR.GetItem("Page 1").GetItem("Down 1") - имя страницы ("Page 1") и элемента на ней ("Down 1") который будет при нажатии уменшать яркость выбранного цвета
• 10 - значение, на которое увеличится/уменьшится яркость выбранного цвета при нажатии кнопок Up и Down

2.3 Нажмите "ОК" чтобы сохранить описание палитры, запустите Эмулятор, чтобы проверить ее работу.

Ошибки, которые могут возникать при некорректном описании палитры, отображаются в окне лога (F4)

Static List (список попапов)

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

1 Создайте элемент, настройте его следующим образом (cм. все настройки):

Type	Joystick
Popups List	список попапов: откройте окно настройки и выберите попапы, которые должны отображаться в списке
Direction	вертикальный или горизонтальный список
Resistance	(%) процент потери инерции при движении списка
Pull Up Type / Time	тип анимации при листании списка / (мс) скорость листания списка
List Type	способ "прилипания" попапов к краям базового элемента списка: прилипание к центру, к левому краю, к обоим краям. Используется, когда размер попапов в списке не совпадает с размером базового элемента.
List Gap	расстояние между попапами на Static list. Свойство появляется, если свойство List Type = Stick Up или Stick Up & Down

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

пример
ЗАГРУЗИТЬ

График(Trend)

Графический элемент Linear Trend (Линейный График) используется для построения графика изменения переменной во времени.

График можно строить в реальном времени, получая информацию о переменной прямо от оборудования автоматизации. Также можно использовать исторические данные совместно с текущими значениями переменной. Исторические данные могут храниться только на iRidium Server.

Чтобы сохранить историю изменения, настройте сохранение переменной в базу данных сервера. Настройка производится в серверном проекте. Когда переменная сохранена в базу, график ее изменения можно запросить из приложения i3 pro. График объединит исторические и актуальные данные в зависимости от настроек графического элемента Linear Trend.

Настройка отображения графика производится в проекте для панели управления.

1 Создайте переменную, которую нужно отображать на графике. Настройте сохранение переменной в базу данных в проекте iRidium Server.

Формат сохранения данных (Signed 32-bit, Float 64-bit) зависит от размерности переменной. Для сохранения дробных значений всегда используйте Float 64-bit.

Сохранять переменную можно с выбранной периодичностью (Interval) или при изменении ее больше, чем на указанное значение (Deadband).

2 Создайте графический элемент, выберите Type: Linear Trend. Перетяните на элемент один или несколько каналов обратной связи, график изменения которых вы хотите отображать:

3 Перейдите к настройкам графика и опишите его вешний вид:

1. Trend - основные параметры графика: работа с базой данных, временной размах, основная кривая
   1. Range - временной размах графика (по оси X). При загрузке из базы данных, покажет информацию за указанное время
   2. Main Curve - выберите основную переменную на графике (будет выделена ярче остальных)
2. Background, Data View, Border, Cursor - оформление цветовой схемы графика, см. пример

1. Список каналов - переменные, отображенные на графике, и их индивидуальные настройки (Genral, Axis X, Axis Y)
2. Настройки каналов - поведение, цвет и толщина каждой линии на графике
   1. Type - поведение кривой при перезагрузке сервера (в разработке)
   2. Color - цвет линии
   3. Depth - толщина линии
   4. Tag - полное имя тега, указывает на драйвер и переменную сервера, от которой приходят данные. Позволяет управлять переменной через JavaScript
3. Axis X, Axis Y - индивидуальные настройки шкал графика: цвет, подпись и ширина деления

1. General - шкала времени (ось Х)
   1. Visible Axis X - отображать шкалу времени
   2. Position: Down - шкала времени сверху, Top - снизу
   3. Line - цвет шкалы времени
   4. Label, Text - подпись шкалы времени

Примеры графиков:

скачать: Пример настройки графиков

Страницы и окна проекта

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

Новая страница, новый попап

Проект состоит из страниц (Page) и всплывающих окон (popup):

• Страница (Page) - база для размещения графических элементов.
  • в проекте должна быть хотя бы одна страница
  • страница может быть вертикальной или горизонтальной
  • страница поддерживает авто-поворот (переключение Горизонтальная/Вертикальная при повороте панели с акселерометром). Для авто-поворота создаются 2 страницы в разной ориентации
  • все страницы проекта одинаковы по размеру и определяют габариты рабочей зоны проекта.
  • страницы не могут появляться с эффектами анимации или быть прозрачными и полу-прозрачными
  • одновременно может быть показана только одна страница проекта (открытие новой закрывает предыдущую и попапы на ней)

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

Создать страницу (попап):

• Add Page – добавить страницу
• Add Popup Page – добавить попап (окно)
• Add Folder – создать папку страниц и окон
• Change View - переключить вид дерева страниц для работы с Popup Groups

Настройки страницы (попапа):

• Новая страница
  • Name - имя
  • Landscape/Portrait - горизонтальная/вертикальная
• Новый попап
  • Name - имя
  • Left и Top - сдвиг относительно левого-верхнего угла страницы (в пикселях)
  • Width и Height - ширина и высота (в пикселях)

Авто-поворот страницы

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

• Name - имя
• Alternate View - страница с противоположной ориентацией, которая автоматически появится вместо текущей при повороте панели (если панель оснащена датчиком положения)

Дизайна с авто-поворотом должен состоять из одних страниц. Эта рекомендация связана с тем, что при авто-повороте все открытые попапы закрываются. Чтобы при авто-повороте открывать нужные попапы, используйте JavaScript API

Пред-просмотр попапа на странице

Настройте пред-просмотр в меню правой кнопки мыши на открытой странице или в окне.

Переходы между страницами и попапами

Команды управления страницами и окнами могут быть выполнены по событию:

• Нажатие на элемент
• Жест на странице или в окне

Команды формируются в окне макросов для страниц, окон и графических элементов:

Список команд:

Flip (команды переключения страниц)
Show Page (Имя страницы)	Открыть страницу (единовременно может быть открыта только 1 страница). В параметрах команды указывается имя страницы, которую нужно открыть
Prev Page	показать предыдущую открытую страницу проекта
Show Popup (Имя попапа)	Показать попап (одновременно может быть показано множество попапов). В параметрах команды указывается имя попапа, который нужно открыть
Hide Popup (Имя попапа)	Скрыть попап. Параметр – имя скрываемого попапа
Toggle Popup (Имя попапа)	Переключить попап (показать, если скрыт, скрыть, если показан). В параметрах команды указывается имя попапа, который нужно переключить
Hide Group (Имя группы)	Скрыть все попапы, входящие в Группу попапов (см. далее)
Hide Popups On Page (Имя страницы)	Скрыть все попапы на странице (имя страницы)
Hide All Popups	Скрыть все попапы, открытые на данный момент в проекте

В совокупности кнопки, содержащие команды навигации, образуют систему навигации по страницам и окнам проекта iRidium.

Эти команды выполняются и с помощью жестов. Выберите в 'Projects Overview' страницу, зайдите в 'Object Properties – Programming – Gesture'.

Popup Group

В дереве страниц вы можете создавать Папки (Folders) для группировки страниц и попапов. Это не влияет на работу проекта. Но вы также можете создавать Группы попапов (Popup Group) по нажатию правой кнопкой мыши на проект или попап:

Popup Group - набор попапов, которые никогда не должны быть открыты одновременно. Попапы, добавленные в одну группу, становятся взаимоисключающими. Если один попап из группы уже открыт, то при вызове другого он закроется автоматчески.

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

Команда Hide Group служит для того, чтобы скрывать любой открытый попап группы:

Скрыть группу попапов можно командой из скрипта: IR.HideGroup("Group")

Стартовая страница проекта

При запуске проекта iRidium откроется только 1 страница и любое количество всплывающих окон.

Выберите стартовую страницу в Project Properties:

• Page – имя страницы, которая должна быть открыта при запуске проекта iRidium (только одна);
• Popups – список попапов, которые должны быть открыты при запуске проекта. Попапы будут открыты по порядку

StartUp в настройках проекта:

Скринсейвер проекта

шаг 1 Создайте страницу-заставку

шаг 2 Настройте кнопку "назад" для возврата к проекту, команда "Prev Page":

шаг 3 Выберите страницу-заставку проекта в Project Properties:

ScreenSaver - экран заставки:

• On/Off – вкл/выкл экран заставки для проекта
• Page – страница, которая будет использоваться в качестве экрана заставки
• Interval (сек.) – время простоя проекта, через которое будет открываться заставка

загрузки

• Примеры скринсейверов >>
• Пример скринсейвера от JaHeLi media >>

Пароль на открытие страницы

Используйте систему паролей при настройке кнопок, открывающих страницы и окна.

Пароль присваивается графическому элементу:

• None – пароль не установлен, свободный доступ (по умолчанию)
• 1 … 4 – порядковый номер пароля, определяющий категорию доступа (с 1й по 4ю)

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

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

Изменить пароль можно в в iRidium Cloud (см. настройки проекта), iRidium Transfer, а также в системном меню приложения:

в JavaScript API есть метод, который позволяет "проверить" системный пароль, т.е. использовать системные пароли не со стандартным окном запроса пароля, а при выполнении любых действий:

• пользовательское окно запроса системного пароля

Масштабирование страниц и элементов

Чтобы изменить разрешение проекта, например, сделать из 2048х1536 проект 1024x768, впишите нужное разрешение в свойствах проекта. При этом рекомендуется переходить от большего разрешения к меньшему во избежание потери качества изображений в проекте.

После сохранения проекта в новом разрешении, появятся два диалоговых окна:

1. Подтвердите масштабирование

• "Ok" - подтверждает изменение размера проекта
• "Cancel" - проект сохранит исходное разрешение, никаких действий не будет произведено

2. Выберите, нужно ли изменять размер окон и графических элементов проекта

• "Yes" - размеры окон и графических элементов проекта будут масштабированы пропорционально новому размеру страниц
• "No" - размеры окон и графических элементов останутся старыми, изменится только размер страниц проекта

3. Сохраните масштабированный проект, чтобы зафиксировать изменения.

После сохранения, проект можно редактировать или сращивать с другими проектами.

Особенности масштабирования:

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

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

Теперь, проект нужно привести к финальным пропорциям, для чего изменим только его ширину. Отклоните запрос на изменение размера элементов и окон проекта.

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

Обработка нажатий и жестов

Виды событий

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

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

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

Краткое описание:

• Press - отправка команд по касанию кнопки
• Release - отправка команд в момент отпускания кнопки
• Hold - циклическая отправка команд в течении всего времени удержания кнопки
• End Of Hold - однократная отправка команд при отпускании кнопки, если её до этого удерживали
• Move - отправка команд при перемещении ползунка Level или Joystic

• Select - выбор пункта и подпункта в элементе List. Управление событием доступно в JavaScript: List API

• Change - ввод символа или команды в элемент Edit Box. Подробные даныне доступны в JavaScript: GUI API
• Enter - нажатие клавиши Enter в элементе Edit Box

• Lost Focus - событие, которое генерирует любой элемент, вне зависимости от типа и условий, в момент отпускания. Событие означает потерю элементом фокуса (активности). Событие доступно для обработки только в JavaScript: GUI API

• Gestures - жесты, настройка возможна только в свойствах страницы (Page). Жест может начаться на самой странице, графическом элементе или в окне. жест будет автоматически передан родительской странице - сработают команды, настроенные для страницы. Исключение: элементы Level, Joystic, List и Static List, которые обрабатывают событие Move, запрещающее срабатывании жестов

скачать пример использования жестов >>

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

Page

• Press
• Release
• Gestures:
  • Swipe Left
  • Swipe Right
  • Swipe Up
  • Swipe Down
  • Pinch In
  • Pinch Out
  • Double Tap

Popup

• -

Button

• Press
• Release
• Hold
• End of Hold

Level

• Press
• Release
• Move

Multistate Button

• Press
• Release
• Hold
• End of Hold

Multistate Level

• Press
• Release
• Move

List

• Press
• Release
• Select (JavaScript: List API)

Up/Down Button

• Press
• Release
• Hold
• End of Hold

Trigger Button

• Press
• Release
• Hold
• End of Hold

Edit Box

• Press
• Release
• Change (JavaScript: GUI API)
• Enter

Virtual key

• Press
• Release

Joystick

• Press
• Release
• Move

Static List

• Press
• Release

Linear Trend

• -

Pie Chart

• -

Bar Chart

• -

Принцип работы событий интерфейса

На странице или попапе, которые не пересвистываются (не входят в состав Static List и List), кнопки ведут себя следующим образом:

1. короткое нажатие на элемент генерирует события Press > Release
2. длинное нажатие на элемент генерирует события Press > Hold > End Of Hold
3. перемещение ползунка Level, Joystic генерирует события Press > Move > Release
4. При отпускании любого элемента генерируется событие Lost Focus

Графические элементы в списке List и Static List отличаются тем, что работа их событий может прерваться перелистыванием списка. Перелистывание может начаться на попапе и графическом элементе, что останавливает выполнение команд:

1. начало перелистывания списка отключает событие Release, поэтому, при коротком нажатии со сдвигом, у кнопки сработает только событие Press > перелистывание
2. при начале перелистывания списка (смещении курсора/пальца), сразу перестает работать Hold и генерируется End Of Hold: Press > Hold > перелистывание > End Of Hold
3. При отпускании любого элемента генерируется событие Lost Focus

Советы по реализации сценариев интерфейса:

• Если кнопка работает на обычной странице, команды нужно привязывать к событию Press, если в списке - к Release
• Если кнопка должна выполнять разные команды по короткому и длинному нажатию, привяжите "короткую" команду к Release, а "длинную" к End Of Hold
• Если нужно отправить импульс (сначала 1, потом 0) по короткому нажатию, есть два способа:
  • на Press привязать отправку 1, на Release отправку 0. Это позволит регулировать длину импульса временем удержания кнопки. Но, нельзя использовать этот способ в списках, т.к. смещение списка отменит событие Release
  • на Release привяжите обе команды: 1 и 0, настройте между ними задержку (Delay). Импульс будет иметь фиксированную длину и будет правильно работать в списках

Macros Editor

В этом окне настраивают команды, которые нужно выполнить по нажатию на тот или иной графический элемент.

Список событий интерфейса и жестов, на которые реагирует iRidium

Набор команд, которые можно выполнить по событию интерфейса, может быть любым, поэтому опишем только сами команды и способы создания макросов - последовательностей из нескольких команд.

Выберите графический элемент и откройте Macros Editor в окне Object Properties > Programming. В зависимости от типа элемента, будет доступен разный набор событий.

Строки макроса выполняются последовательно, сверху вниз:

Команды в Macros Editor:

Flip (команды переключения страниц)
Show Page (Имя страницы)	Открыть страницу (единовременно может быть открыта только 1 страница). В параметрах команды указывается имя страницы, которую нужно открыть
Prev Page	показать предыдущую открытую страницу проекта
Show Popup (Имя попапа)	Показать попап (одновременно может быть показано множество попапов). В параметрах команды указывается имя попапа, который нужно открыть
Hide Popup (Имя попапа)	Скрыть попап. Параметр – имя скрываемого попапа
Toggle Popup (Имя попапа)	Переключить попап (показать, если скрыт, скрыть, если показан). В параметрах команды указывается имя попапа, который нужно переключить
Hide Group (Имя группы)	Скрыть все попапы, входящие в Группу попапов (см. далее)
Hide Popups On Page (Имя страницы)	Скрыть все попапы на странице (имя страницы)
Hide All Popups	Скрыть все попапы, открытые на данный момент в проекте

Sound (управление звуками)
Play Sample	Воспроизвести аудио-файл
Stop Sample	Остановить воспроизведение аудио-файла
Stop Slot (номер дорожки)	Остановит воспроизведение аудио-файла на первой дорожке
Stop All Sounds	Остановить воспроизведение всего аудио в проекте
Send To Driver (отправить данные драйверу)
Send Number	Отправить десятичное число (формат DEC)
Send Text	Отправить строку данных (формат ASCII)
Send Data	Отправить бинарные данные (формат BIN)
Send Token	Отправить данные, извлеченные из параметров графического элемента (Value, координаты, размеры и т.д. – переменные значения, определяемые свойствами объекта)
Send To Token (отправить данные переменной проекта)
Send Number	Записать в токен десятичное число (формат DEC)
Send Text	Записать в токен текст (формат ASCII)
Send Token	Записать в токен данные, извлеченные из параметров графического элемента (Value, координаты, размеры и т.д. – переменные значения, определяемые свойствами объекта)
Other (остальные команды)
Delay (мс)	Установить задержку между командами макроса (настраивается произвольно)
Script Call (имя функции)	Обратиться к функции iRidium Script по имени
Show Keyboard (тип клавиатуры)	Вызвать виртуальную клавиатуру управляющей панели
Hide Keyboard	Скрыть виртуальную клавиатуру управляющей панели
Minimize	Свернуть приложение iRidium App на управляющей панели
Execute (команда)	Выполнить стандартную команду ОС, например: открыть гиперссылку в браузере (http://iridiummobile.ru/) отправить письмо на адрес (mailto:example@mail.ru) открыть «калькулятор» (calc) или другие стандартные команды для различных ОС
Exit	Закрыть приложение iRidium App на управляющей панели (только для Windows и Android)

Команды управления макросами:

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

Сохранение макросов:

1. Создайте последовательность команд, нажмите кнопку "Сохранить"
2. Дайте имя новой макрокоманде, нажмите ОК
3. Откройте "GALLERY" > "Project Gallery" > "Macros". Вы можете перетащить команду на кнопку или в окно Programming, чтобы привязать к какому-либо событию, помимо Press

Создание связей (Relations):
Кроме макрокоманд, настраиваемых в свойствах отдельных объектов интерфейса (кнопок, страниц, попапов), существуют общие макрокоманды проекта, настройка которых производится в окне All Relations. Здесь создаются связи для передачи данных от одного объекта интерфейса другому:

- открыть окно "Все связи"

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

Работа с элементов, вызвавшим Script Call
При использовании Script Call, у вас есть возможность обратиться к свойствам элемента, который использует Script Call функцию.
Пример.
Создаем скриптовую функцию, которая будет брать значение свойства Text элемента, который вызвал функцию, увеличивать значение на единицу и записывать обратно. Запуск функции привяжем к элементу через Script Call

var a=0;
function action(){
   a+=1;
   this.Text=a; //Обращаемся к свойству Text элемента, который вызвал функцию
};

В результате функция будет менять значение того элемента, который ее вызвал
Скачать пример проекта

Галереи графики и звука

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

Графические галереи

Графическая галерея редактора (Gallery > Graphics)
- хранилище объектов интерфейса, которые можно использовать при создании проектов. В графической галерее могут храниться:

• простые изображения в виде объектов с 1 состоянием
• кнопки с двумя состояниями
• анимированные кнопки
• уровни с двумя состояниями
• уровни с множеством состояний
• группы графических элементов
• страницы и окна проектов

Галерея проекта (Gallery > Project Gallery)
– содержит только те изображения, которые уже используются в проекте iRidium. Не содержит сложных объектов, а только отдельные изображения, из которых объекты состоят.

Галереи звука

Галерея звуков редактора (Gallery > Sounds)
- библиотека аудио-файлов для проекта визуализации. Звук можно воспроизвести по событию (нажатие, отпускание элемента). Привязывают звуки методом Drag&Drop. Звук будет отображен во вкладке Programming окна Object Properties:

При нажатии на [...] во вкладке Programming откроется редактор макросов:

• Play Sample - воспроизвести аудио-файл (имя)
• Play System Sample - воспроизвести стандартный системный звук (один из двух)
• Stop Sample - остановить аудио-файл (имя)
• Stop Slot - остановить воспроизведение конкретного слота (от 1 до 32)
• Stop All Sounds - остановить воспроизведение всех звуков

Двойной клик по строке аудио-файла открывает настройки воспроизведения:

• Sound - название аудио-файла;
• Slot - номер слота воспроизведения (необходимо для группировки по потокам). Всего можно создать 32 слота с неограниченным количеством аудио-файлов в каждом. По умолчанию выставляется "Слот 0" (формируется новый канал воспроизведения без слота);
• Volume - громкость воспроизведения аудио-файла;
• Loop - включает (True) или отключает (False) повтор воспроизведения

Поддерживаемые аудио-форматы:

mp3 (с фиксированным и переменным битрейтом)

wav со следующими кодеками:

PСM (глубина звука 8 или 16 бит, частота дискретизации от 8 до 96 кГц)

IMA ADPCM (глубина звука 8 или 16 бит, частота дискретизации от 8 до 96 кГц)

MS ADPCM (глубина звука 8 или 16 бит, частота дискретизации от 8 до 96 кГц)

GSM (частота дискретизации 8 кГц, глубина звука 16 бит)

MS GSM (частота дискретизации 8 кГц, глубина звука 16 бит)

mu-Law (частота дискретизации 8 кГц, глубина звука 16 бит)

A-Law (частота дискретизации 8 кГц, глубина звука 16 бит)

OGG

Галерея проекта (Gallery > Project Gallery)
– содержит только те звуки, которые уже используются в проекте iRidium.

Работа с изображениями

Фоновые изображения

Используйте команду “Put Image To Page Background” в меню правой кнопки мыши, чтобы сделать изображение фоном страницы или окна. Эта команда не работает для сложных объектов галереи.
Выбрать фон страницы можно и в Object Properties > States, параметр Image

Основные изображения, иконки

Кнопка может одновременно отображать 2 картинки:

• Image - базовое изображение
• Icon - иконка, размещенная поверх Image

Выберите, какую роль будет выполнять картинка при перетаскивании на кнопку (о Chameleon Image читайте далее)

Настройки изображений и иконок во вкладке States:

Изменить изображение и иконку элемента можно в настройках объекта, States:

• Image – основное изображение
• Icon – изображение-иконка (размещается поверх основного)
• Chameleon Image - изображение в формате PNG, которое при наложении на кнопку использует цвета её заливки и рамки, для того чтобы определить цвета внутри изображения
• Icon Align – выравнивание иконки относительно элемента
• Image Aligh – выравнивание основного изображения относительно элемента

Вкладка States обращается к локальной галерее проекта, где хранятся изображения, уже добавленые в проект.

Chameleon Image

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

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

• Alpha - форма элемента
• Red - область, которая будет заполнена цветом заливки элемента
• Green - область, которая будет заполнена цветом бордюра элемента
• Blue - не используется

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

Пример настройки и результат применения цветовой схемы хамелеона:

Execute: URL схемы

URL схема - указатель на ресурс, который можно вызвать командой iRidium. С помощью URL схемы можно запустить приложение, открыть ссылку в браузере, открыть mail-агент, позвонить по номеру, отправить СМС.

Для различных ОС существуют разные URL схемы, учитывайте тип операционной системы, на которой будет работать проект при выборе исполняемых команд.

Вызовы из iRidium

В iRidium вы можете создать кнопку, которая открывает стороннее приложение или ссылку в браузере. Примеры команд, которые можно выполнить на разных ОС:

Гиперссылки:

• Execute(http://iridiummobile.net)

Файлы и приложения на Windows:

• Execute(c:\Program Files\iRidium.exe)

Экранная клавиатура на Windows:

• Execute(osk)

Позвонить по номеру, написать СМС:

• Execute(tel:+123456789)
• Execute(sms:+123456789)

Написать email:

• Execute(mailto:test@example.com)

Запустить приложение:

• Execute(videos://)
• Execute(music://)

Настройки iOS 8 и iOS 9 (для iOS 10 решения пока нет):

• Execute(prefs:root)
• Execute(prefs:root=WIFI)
• см. весь список

Настройки i3 pro на iOS 9-10:

• Execute(app-settings://)

Список URL схем для iOS >>

На iOS и Android URL-схемы не идентичны

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

Вызовы из JavaScript

Создайте JavaScript файл в редакторе скриптов iRidium Studio, чтобы выполнять команды по нажатию на кнопку или событию в системе.

IR.Execute("http://iridiummobile.net");

Подробная информация о работе с JavaScript представлена в Руководстве.

Вызов iRidium из других приложений

URL схемы запуска i3 pro можно вызывать из браузера или почтового клиента, аналогично гиперссылкам на сетевые ресурсы. Используйте команды:

• i3pro://

команда вызова прилоежния (открыть или развернуть). Работает в браузере iOS/Android устройства, где установлен i3 pro. Ее можно выполнить как гиперссылку в браузере, почтовом клиенте или другом приложении

• i3pro://script?data1&data2

команда вызова приложения и запуском скрипта

строка с данными, которая будет передана в скрипт, в параметр query. IR.AddListener(IR.EVENT_RECIEVE_SCHEME,0,function(query, source) {}); - слушатель, который нужно создать в проекте iRidium для получения данных из URL схемы

Пример:

URL схема в стороннем приложении, браузере:

i3pro://script?Page1

Обработчик URL схемы в IRidium:

IR.AddListener(IR.EVENT_RECIEVE_SCHEME,0,function(query, source) 
{
   if (query == "Page1")   
      IR.ShowPage("Page 1");
});

Эффекты визуализации

iRidium поддерживает анимацию нажатия на элементы, покадровую анимацию элементов, анимацию при октрытии страниц и специальные библиотеки iRidium Script.

Анимация при открытии попапов

В свойствах попапа Object Properties > General укажите эффекты анимации, с которым попап будет открываться и закрываться:

• Lifetime (мс) – время жизни попапа. По завершению, попап автоматически закроется
• Effects – установка эффектов появления и скрытия попапа. Допускается создание произвольных комбинаций эффектов.
  • Fade - "выцветание" - попап меняет степень прозрачности
  • Rotate - "кручение" - попап движется, вращаясь вокруг центральной оси
  • Slide - "появление" - попап выдвигается из-за края экрана или "из-за себя"
  • Scale - "расширение" - попап увеличивает или уменьшает свои координаты Х и Y от нуля до заданных
  • TV Scan - "панорама" - попап появляется через изменение координаты Y от нуля до заданной

Настройки эффектов:

• Duration (мс) - время выполнения эффекта
• Delay (мс) - задержка перед началом выполнения эффекта
• Tween - направление, в котором движется попап при появлении или исчезании

Эффект нажатия

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

Состояние элемента меняется при нажатии, если в его настройках выбран "Feedback: Momentary".
Состояние элемента меняется при получении обратной связи при выборе "Feedback: Channel".

«Быстрые эффекты»

Инструмент для автоматического создания эффекта анимации на основе первого (неактивного) состояния кнопки.

Добавьте в проект изображение и нажмите кнопку «Быстрый эффект» на панели инструментов. В параметрах модифицированного состояния укажите:

• Сдвиг изображения относительно изначального
• Прозрачность нового состояния (альфа-канал элемента)
• Цвет и размер текста на новом состоянии

Покадровая анимация

Элемент, цикл анимации на котором прокручивается все время:

1. Создайте элемент с типом Multistate Button и состояниями, содержащими кадры анимации
2. Анимация должна воспроизводиться циклически Repeat: True
3. Тип обратной связи Feedback: On, обеспечит последовательное циклическое воспроизведение кадров анимации

Элемент, цикл анимации которого воспроизводится при получении ненулевого значения (логической единицы):

1. Создайте элемент с типом Multistate Button и состояниями, содержащими кадры анимации
2. Анимация должна воспроизводиться циклически Repeat: True
3. Выберите тип обратной связи Feedback: Blink

Элемент, цикл анимации которого воспроизводится при нажатии пользователя:

1. Создайте элемент с типом Multistate Button и состояниями, содержащими кадры анимации
2. Анимация должна воспроизводиться циклически Repeat: True
3. Выберите тип обратной связи Feedback: Momentary

Оптимизация проекта

Используйте опцию Delete Unused Files - быстрое удаление, чтобы убрать из проекта картинки, которые были в него добавлены, но фактически не используются.

Такие картинки увеличивают время загрузки и общий объем проекта, частая причина их появления - масштабирование элементов, при котором создаются копии изображений в новом размере.

Проверяйте, очищен ли проект от неиспользуемых элементов перед загрузкой на панель:

Объединение проектов

Чтобы научиться быстро объединять свой проект с готовым Script модулем (имеющим свою графическую и драйверную часть), или другим проектом, воспользуйтесь видео-инструкцией: