Список документации на актуальную версию студии iRidium Studio 2019:

• Типы графических элементов;
• Навигация в интерфейсе: переключение страниц и попапов;
• Внешний вид элементов интерфейса;
• Программирование элементов;
• Relations: связи внутри интерфейса i3 pro;
• Анимация в интерфейсе;
• Воспроизведение звуков, вибрация;
• Вызов приложений, ссылок, команды ОС.

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

Проект 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

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

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

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

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

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

Структура интерфейса

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

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

• в проекте должна быть хотя бы одна страница

• страница может быть вертикальной или горизонтальной

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

• все страницы одинаковы по размеру - он определяется разрешением проекта.

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

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

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

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

• окно не может быть горизонтальным или вертикальным

• окно закроется при авто-повороте страницы и при открытии новой страницы

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

• на одной странице можно открыть множество окон

• Кнопки для перехода между страницами и окнами

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

• • кнопка начинает управлять проектом, как только вы привяжете к ней команду "Flip"

• кнопка может управлять страницами, окнами и оборудованием одновременно

*Кнопки для управления оборудованием

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

• настройки кнопки определяют значения, которые будут отправлены оборудованию

• кнопка может управлять страницами, окнами и оборудованием одновременно

• Элементы оформления интерфейса

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

• кнопку можно сделать неактивной - она не будет реагировать на нажатия

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

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

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

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

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

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

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

Draw Item

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

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

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

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

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

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

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

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

• Button (кнопка)

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

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

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

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

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

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

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

1. введите шаблон в текстовое поле элемента

2. перетяните Feedback на элемент, "In Value":

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

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

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

• Level (уровень)

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

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

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

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

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

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

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

1. введите шаблон в текстовое поле элемента

2. перетяните Feedback на элемент, "In Value":

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Joystick (джойстик)

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

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

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, увеличение значения в канале соответствует увеличению яркости соответствующего цвета.

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

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

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

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

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м. все настройки):

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

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

• 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. Перейдите к настройкам графика и опишите его вешний вид:

5. Trend - основные параметры графика: работа с базой данных, временной размах, основная кривая

• Range - временной интервал графика (по оси X). При загрузке из базы данных, покажет информацию за указанное время
• Main Curve - выберите основную переменную на графике (будет выделена ярче остальных)

6. Background, Data View, Border - оформление цветовой схемы графика, см. пример
7. Cursor - в разработке

8. General - основные настройки оси времени (ось Х)

• Visible Axis X - отображать ось времени
• Position: Top - шкала времени сверху, Down - снизу
• Line - настройки шкалы времени
  Major - настройки оси и разметки (шкалы)
  Minor - настройки дополнительной разметки (шкалы)
• Visible - отображать ось Х
• Color - цвет оси и разметки
• Depth - толщина линии
• Interval - временной интервал на шкале времени
• Serif - размер засечки на шкале
• Count - количество дополнительных засечек на шкале
• Label - подпись шкалы времени (формат отображения, шрифт, цвет подписи, отступ от оси)
• Text - подпись оси времени (текст, шрифт, цвет подписи)

9. General - основные настройки оси значений (ось Y)

• Visible Axis Y - отображать ось значений
• Position: Left - шкала значений слева, Right - справа
• Range - диапазон значений на оси (от минимума к максимуму)
• Auto scale - ось автоматически подстраивается под значения, приходящие из базы
• Min/Max - минимальное/максимальное значение оси

Остальные настройки аналогичны оси Х.

10. Список каналов - переменные, отображенные на графике, и их индивидуальные настройки (Genral, Axis X, Axis Y)
11. Индивидуальные настройки кривых для нескольких каналов' - тип отображения, цвет и толщина каждой кривой на графике

• Color - цвет кривой
• Type - тип отображения кривой:
• Dotted line - кривая строится в виде отдельных точек
• Line - кривая строится в виде сплошной линии
• Square line - кривая строится в виде блоков
• Depth - толщина линии
• Setup Axis X and Y - включить индивидуальные настройки осей для данной кривой (если отключено, будут отображаться главные оси графика)
• Tag - полное имя тега, указывает на драйвер и переменную сервера, от которой приходят данные. Позволяет управлять переменной через JavaScript
• Axis X, Axis Y - индивидуальные настройки осей графика (аналогичны настройкам главных осей графика)

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

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

Управление отображением трендов с помощью скрипта

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

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

Для построения такого графика в проекте создайте новый графический элемент Linear Trend и кнопку для построения графика

Создайте новый скрипт:

var l_oPage = IR.GetPage("Page 1");
var l_oTrend = l_oPage.GetItem("Item 1");
var L_oCurve = l_oTrend.GetCurve("test"); 
var l_aArray = [[0, 60], [1, 30], [2, 90], [ 3, 10], [4, 60], [5, 20], [ 6, 80]]; // <translate><!--T:357-->
массив, в который вписываем значения для графика</translate>

IR.AddListener(IR.EVENT_ITEM_RELEASE, l_oPage.GetItem("Get_SCRIPT"), function(){
   L_oCurve.SetData(l_aArray , 0, l_aArray.length); 
});

var l_aArray - массив, в который нужно вписать значения, по которым будет построен тренд.

Тренд из примера, созданный при помощи скриптового массива

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

• Заполнение графика из внешней базы данных

Для того, чтобы вывести информацию из внешней базы данных необходимо настроить подключение iRidium Pro к базе через драйвер ODBC.

1. Создайте серверный проект
   
2. Настройте подключение к базе данных. Для этого добавьте в серверный проект новый скрипт:

IR.AddListener(IR.EVENT_START,0,function()
{  
IR.SetTimeout(2000, function(){
   var MySQL = new ODBC("root", "", "MySQLresurs"); // creating database connection object
   if(MySQL == false)
   {
      IR.Log("Wrong connection");
   }
   else
   {
      IR.Log("Right connection");
   }
   var response = MySQL.Query("SELECT * FROM test");
   if (response)          // if connection is successful and answer exists
   {
       var rows = response.GetRows();
       var columns = response.GetColumns();
       var data = {};               // two-dimension array with query result
       for (var i = 0; i < columns; i++) {
           var colName = response.GetColumnName(i);
           data[colName] = [];
           for (var j = 0; j < rows; j++) {
               data[colName][j] = response.GetRowValue(i, j);
           }
       }
    response.Free(); // free memory of recordset (optional action for memory optimization)
    IR.Log(JSON.Stringify(data));
    IR.SetVariable("Server.Tags.Data",JSON.Stringify(data));
    }
});
});

3. Создайте виртуальный тег, через который данные будут передаваться с серверного проекта в панельный.
   
4. Создайте панельный проект.
   
5. Добавьте в него графический элемент Linear Trend и настройте его.
   
6. Добавьте кнопку, по нажатию которой будут запрашиваться значения из базы.

7. Добавьте в панельный проект скрипт:

var l_oDevice = IR.GetDevice("iRidium Server");
var l_oPage = IR.GetPage("Page 1");
var l_oTrend = l_oPage.GetItem("Item 1");
var L_oCurve = l_oTrend.GetCurve("test"); 
var l_aArray = [];
IR.AddListener(IR.EVENT_ITEM_RELEASE, l_oPage.GetItem("Get_BD"), function(){
   L_oCurve.SetData(l_aArray , 0, l_aArray.length); 
});

IR.AddListener(IR.EVENT_TAG_CHANGE, l_oDevice ,function(m_sTag, m_sData){
   if(m_sTag == "Data"){
      l_aArray = [];
      var m_oData = JSON.Parse(m_sData);
      for(var Index in m_oData["X"]){
         l_aArray[Index] = [m_oData["X"][Index], m_oData["Y"][Index]+0];    
      }
   }
});

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

• Line Chart

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

На графике отображаются значения из базы данных сервера iRidium . Некоторые параметры Line Chart доступны для изменения в скрипте.

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

• Настройка графиков

1. Настройка сохранения истории изменений в канале обратной связи в базе данных сервера iRidium
2. Настройка отображения истории на графике: создание графических элементов линейных графиков в интерфейсе i3 pro и назначение им отдельных каналов обратной связи, по которым будет отображаться история.

• • 1. Сохранить историю канала обратной связи в базе данных сервера iRidium

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

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

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

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

Параметры сохранения данных в базе данных:

• Persist – сохраните последнее значение, записанное в переменной, и воспроизведите его после перезапуска сервера до инициализации драйверов. С помощью этого параметра значения загружаются без резких "падений", но факт перезапуска или выключения сервера не фиксируется на графике.
• Store In DB – включите сохранение переменной в базе данных, выберите формат данных
• Нет – сохранение в базе данных отключено
• • Подписанный 32-разрядный – сохранить как целое число со знаком
• • 64-битный формат с плавающей запятой – сохранить как число с плавающей запятой
• • Строка UTF8 – сохранить как строку
• Load On Start – записывает последнее значение переменной из базы данных в канал обратной связи при запуске сервера
• DB Save Strategy – стратегия сохранения данных: выберите тип события, которое сохраняется в базе данных:
• • Deadband – сохранение при изменении переменной на значение, отличающееся от предыдущего на установленное значение или более.
• • • Deadband (значение) – минимальное изменение переменной, которая записана в базе данных В Deadband: 0 любое значение записывается в базу данных, и ничего не записывается, если значение соответствует одному и тому же числу. Но, если данные записаны в виде строки, они сохраняются каждый раз, поскольку строки не сравниваются.*
• • Interval – периодическое сохранение. Данные записываются с заданным интервалом времени.
• • • Interval (Значение) – выберите интервал от 5 секунд до 1 часа или введите его вручную (Пользовательский) в ms * Если в хранилище в базе данных выбрана строка UTF8, данные сохраняются раз в минуту, более частое сохранение установить невозможно (используйте стратегию "Мертвой зоны")
• • • Значение интервала - значение интервала (минимум 1); *** Единицы измерения интервала - единицы измерения;
• Forward value to - перенаправление значения из одного тега в другой (подробнее здесь);

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

Сохранение "при изменении" подходит для переменных, для которых важно не пропустить момент их изменения. Например, включение/выключение света, изменение скорости вращения вентилятора могут быть сохранены в базе данных.

• • 2. Отобразить историю на графике

1. Создайте панельный проект из серверного или синхронизируйте уже существующий.

2. Создать Line Chart графический элемент в интерфейсе i3 pro и назначить ему канал обратной связи с сервером, история которого должна отображаться:

• Простые настройки

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

• Название – название кривой

• Tag – серверная переменная, из которой график получает данные для построения кривой

• Тип линии – тип кривой

• Сплошная – точки кривой соединены линиями, это сплошная линия

• Пунктирная – точки кривой соединены линиями, это пунктирная линия

• Квадратная – кривая строится поэтапно от точки к точке, линия сплошная

• Толщина линии – толщина линии или точки

• Цвет – цвет линии

• Цвет заливки - цвет заливки области под линией графика

• Цвет фона - цвет области графика

• Цвет текста - цвет текста данных, расположенного на осях

• Цвет сетки - Цвет сетки

• Диапазон – диапазон значений на оси времени

• Автоматическое масштабирование – Авто-масштабирование выставляется от нижнего до верхнего значения кривой на промежутке

• Мин... Макс (при выключенном автоматическом масштабировании) – фиксированный диапазон отображения данных

• Расширенные настройки - переключатель режимов окна настроек

• Расширенные настройки

Активация чек-бокса “Расширенные настройки” открывает подробные настройки, которые разделены по вкладкам:

1. Линии графика:

• Название – название кривой
• Tag – серверная переменная, из которой график получает данные для построения кривой
• Тип линии – тип кривой
• Сплошная – точки кривой соединены линиями, это сплошная линия
• Пунктирная – точки кривой соединены линиями, это пунктирная линия
• Квадратная – кривая строится поэтапно от точки к точке, линия сплошная
• Толщина линии – толщина линии или точки
• Цвет – цвет линии
• Цвет заливки - цвет заливки области под линией графика

2. Область графика

• Цвет фона графика - цвет области графика

• Цвет фона под осями - цвет области под осями

• Показать рамку - активирует отображение рамки

• Толщина - толщина линии рамки

• Цвет - цвет рамки

• Настройки управления жестами

• Листать график

• Приближать\отдалять график

• Всплывающее окно значений:

• Цвет фона - цвет области попапа значений

• Цвет курсора - цвет курсора на области графика

• Шрифт - настройка шрифта

• Размер текста - размер шрифта

• Стиль - стиль текста

• Цвет - цвет текста

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

3. Линии сетки

• Цвет - настройка цвета линий сетки
• Толщина - настройка толщины линий сетки
• Основные линии сетки - основная сетка по количеству марок на оси Y
• Дополнительные линии сетки - дополнительная сетка
• Количество дополнительных линий

4. Горизонтальная ось

• Диапазон – диапазон значений на оси времени
• Положение – расположение временной оси: вверху или внизу графика
• Цвет – цвет линии оси
• Толщина - настройка толщины линий оси
• Показывать ось - активирует отображение оси, настройки Настройки имени оси и Настройки подписи времени и даты
• Настройки имени оси - настройки отображения и стиля названия оси
• Показывать название оси - активирует отображение названия и его настоек
• Настройки подписи времени и даты - настройки отображения и стиля текста времени
• Показывать время и дату - активирует отображение времени и даты на оси

5. Вертикальная ось:

• Автоматическое масштабирование – Авто-масштабирование выставляется от нижнего до верхнего значения кривой на промежутке
• Мин... Макс (при выключенном автоматическом масштабировании) – фиксированный диапазон отображения данных
• Положение - расположение оси данных: слева или справа от графика
• Количество марок - отметками на графике с заданным интервалом (целое число)
• Настройки названия оси - настройки отображения и стиля названия оси
• Показывать название оси - активирует отображение названия и его настоек
• Настройки подписи значений на оси - настройки отображения и стиля текста данных
• Показывать время и дату - активирует отображение времени и даты на оси

Пример:

https://drive.google.com/file/d/1aVJ9UOnORL2XsxN817QTyx9QvvNJKGn-/view?usp=drive_link

• Circular level (круговой уровень)

Круговой уровень - это разновидность уровня с перемещением ползунка по круговой шкале.

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

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

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

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

Скачайте демо-проект:

• Circular Level

• Режимы кругового уровня Simple - простой круговой уровень, может использоваться как уровень громкости, освещенности и т.д.

Looped - бесконечный круговой уровень.

Уровень удобно использовать, если нужно более точно выставить значение. При выборе этого режима появляется свойство “Changing Angle”, которое устанавливает количество оборотов уровня, необходимое для достижения максимального значения.

Например, при настройке громкости (значения уровня от 0 до 100), при значении 60 музыка играет тихо, а при 65 - очень громко, 62 - оптимальное значение. При установке промежуточных значений на простом круговом уровне могут возникнуть трудности. В таком случае можно использовать бесконечный уровень.

Для этого выбираем соответствующий режим кругового уровня и ставим в свойстве “Changing Angle” удобное для нас значение (2 - один оборот=50, 4 - один оборот=25 и т.д.). Таким образом можно будет легко выставить значение 62.

Double - уровень с двумя значениями.

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

Для этого в созданном уровне необходимо:

1. Задать режим Double.

2. Одному из значений в параметре Slider Hit установить значение Display Only чтобы в дальнейшем пользователь не мог им управлять. Данное значение будет отображать текущую температуру.
3. Создать скрипт. В данном примере мы используем устройство Modbus.

var point;
IR.AddListener(IR.EVENT_ITEM_RELEASE,IR.GetItem("Page 1").GetItem("Circle level"), function(){
  data = IR.GetItem("Page 1").GetItem("Circle level").Value2;
});
var Modbus = IR.GetDevice("Modbus TCP");
IR.AddListener(IR.EVENT_CHANNEL_SET, Modbus, function() {
  var temperature = IR.GetVariable("Drivers.Modbus TCP.Feedback 1");
  IR.GetItem("Page 1").GetItem("Circle level").Value1 = temperature;
  if(temperature>=point+2){
    IR.SetVariable("Drivers.Modbus TCP.Channel 1", 0);
}
  if(temperature<=point-2) {
    IR.SetVariable("Drivers.Modbus TCP.Channel 1", 1);
}
});

Triple - уровень с тремя значениями.

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

Настройка данного режима уровня очень похожа на режим Double:

1. Задать режим Triple.
   
2. Одному из значений в параметре Slider Hit установить значение Display Only чтобы в дальнейшем пользователь не мог им управлять. Данное значение будет отображать текущую температуру.
   
3. Создать скрипт. В данном примере мы используем устройство Modbus.

var min;
var max;
IR.AddListener(IR.EVENT_ITEM_RELEASE,IR.GetItem("Page 1").GetItem("Circle level"), function(){
  min = IR.GetItem("Page 1").GetItem("Circle level").Value1;
  max = IR.GetItem("Page 1").GetItem("Circle level").Value2;
});
var Modbus = IR.GetDevice("Modbus TCP");
IR.AddListener(IR.EVENT_CHANNEL_SET, Modbus, function() {
  var temperature = IR.GetVariable("Drivers.Modbus TCP.Feedback 1");
  IR.GetItem("Page 1").GetItem("Circle level").Value3 = temperature;
  if(data>=max){
    IR.SetVariable("Drivers.Modbus TCP.Channel 1", 0);
}
  if(data<=min) {
    IR.SetVariable("Drivers.Modbus TCP.Channel 1", 1);
}
});

• Multistate circular level (круговой уровень с анимацией)

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

1. Создайте переменную, которую нужно регулировать. Настройте ее, в соответствии с инструкцией для драйвера, который будет использоваться.
2. Создайте и настройте Multistate circular level, создайте необходимое число состояний - каждое из которых будет отвечать за отображение уровня (cм. все настройки):

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

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

Пример:

• Multistate Circular Level

• Picker (барабан)

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

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

Пример:

• скачать

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

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

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

Проект состоит из страниц (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

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

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

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

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

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

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

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

Show Page (Имя страницы)	Открыть страницу (единовременно может быть открыта только 1 страница). В параметрах команды указывается имя страницы, которую нужно открыть
Prev Page	Показать предыдущую открытую страницу проекта
Show Popup (Имя попапа)	Показать попап (одновременно может быть показано множество попапов). В параметрах команды указывается имя попапа, который нужно открыть. Также можно изменить координаты Top и Left расположения попапа, установив параметр Use :
Hide Popup (Имя попапа)	Скрыть попап. Параметр – имя скрываемого попапа
Toggle Popup (Имя попапа)	Переключить попап (показать, если скрыт, скрыть, если показан). В параметрах команды указывается имя попапа, который нужно переключить. Также можно изменить координаты Top и Left расположения попапа, установив параметр Use :
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 – вкл/выкл экран заставки для проекта *Interval (сек.) – время простоя проекта, через которое будет открываться заставка *Show Page - если включено, то через указанный интервал появится страница заставки *Landscape Page – страница, которая будет использоваться в качестве экрана заставки в альбомном отображении проекта *Portrait Page - страница, которая будет использоваться в качестве экрана заставки в портретном отображении проекта *Start Script - если включено, выполнится скрипт *Script Name on Start - имя функции в скрипте

загрузки

• Примеры скринсейверов >>

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

• Можно настроить срабатывание скрипта при появлении скринсейвера. Например, уменьшать яркость дисплея устройства, при помощи метода [IR.SetVariable](/SWDL/dev-iridi/Tokens_API#irsetvariable).

загрузки

• Пример скринсейвера с запуском скрипта >>

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

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

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

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

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

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

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

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

• Также можно воспользоваться методом для вызова системной функции TouchID, и вместо паролей использовать отпечаток пальца для разблокирования страниц и окон.

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

Чтобы изменить разрешение проекта, например, сделать из 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 Multistate Level

Up/Down Button Joystick

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

На странице или попапе , которые не пересвистываются (не входят в состав 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:

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

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

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

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

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).

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

• Динамические изображения

Подробнее: IP камеры и DVR.

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://)

• На 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 модулем (имеющим свою графическую и драйверную часть), или другим проектом, воспользуйтесь видео-инструкцией: