• iRidium studio 2019
• Обзор на iRidium Studio 2019

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

Создание проекта в i3 pro начинается в приложении iRidium studio, В нем, как в конструкторе, собирается проект визуализации или проект, запускаемый на сервере. В зависимости от типа проекта интерфейс студии изменяется, для панельного и серверного проекта существует свой набор инструментов. Например, для панельного проекта появляются инструменты присущие графическому редактору (галерея изображений, звуков, анимации, редактор текста, состояний объектов и др.), а при создании серверного проекта появляется больше инструментов работы с логикой (расписания, блок-схемы и прочее).

Инструменты визуализации​

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

1. Workspace - показывает, как будет выглядеть страница, попап и графический элемент при запуске в i3 pro. В рабочей области можно выбрать графический элемент, а также вариант внешнего вида (State) элемента для просмотра и редактирования при помощи панелей свойств.
2. Project - список страниц и попапов, которые есть в интерфейсе визуализации. Обеспечивает переключение объектов, отображаемых в рабочей зоне и отображение их свойств.
3. Programming - действия, которые выполняет графический объект в i3 pro при нажатии на него. Элементы могут управлять как внутренней логикой интерфейса визуализации, так и отправлять/отображать данные, полученные от оборудования.
4. Images - галерея объектов интерфейса, которые можно использовать в визуализации, и изображения, которые уже добавлены в интерфейс.
5. Cameras - архив настоек для популярных моделей IP-камер и ссылки на IP-камеры, которые уже добавлены в интерфейс.
6. Sounds - архив аудио-файлов, которые можно воспроизводить в интерфейсе а также файлы, которые уже добавлены в интерфейс.
7. Animation - эффекты анимации, которые можно использовать для анимирования попапов проекта.
8. Resources - изображения, музыка и шрифты, используемые в проекте.

Адаптация изображения на мониторах с разрешением 4К​

1. Перейдите в папку C:\Program Files (x86)\iRidium Ltd\iRidium Pro\Studio64 (Studio32);
2. Перейдите к свойствам файла iRidium Studio.exe (через меню ПКМ);
3. Во вкладке "Compatibility" нажмите "Change high DPI settings" - откроется окно настройки разрешения;
4. Выберите "Override high DPI scaling behavior.", в "Scaling perfomed by" укажите "System";
5. Сохраните изменения.

Workspace​

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

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

Редактируя страницу, вы можете регулировать масштаб рабочей области с помощью кнопок Ctrl+скрол колесиком мыши. Удерживая нажатие на колесико мыши, вы можете перемещать страницу в рабочей области.

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

1. Колесо мыши вверх/вниз - вертикальное перемещение по рабочей области;
2. Shift + колесо мыши вверх/вниз - горизонтальное перемещение по рабочей области;
3. Ctrl + колесо мыши вверх/вниз - масштабирование;
4. Колесо мыши (удерживать) - свободное перемещение по рабочей области.

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

Каждая страница или всплывающее окно в рабочей области содержит свой набор графических элементов. Для добавления на графический элемент логики (токены, команды и фидбеки), изображений, камер, звуков и др., удерживая необходимую функцию, перетащите её на кнопку (Drag&drop).

Панель настроек​

Настройка отображения рабочей области расположена в нижней части экрана и имеет следующие свойства:

• изменение масштаба в рабочей зоне. Удобный инструмент при работе с интерфейсами, которые имеют разрешение FullHD или Retina и не помещаются в окне полностью.

• функция Zoom to fit позволяет установить максимально возможный масштаб для выбранной страницы / попапа (всплывающего окна).

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

• выбрать cвойства элементов в рабочей зоне:
  • Show item names - отобразить на элементе его имя,
  • Show item borders - отобразить границы элемента,
  • Show number of commands - отобразить на элементе количество привязанных команд.

Guide Line (направляющие линии)​

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

Добавление направляющей линии в проект:

• для добавления горизонтальной направляющей линии в проект, потяните за горизонтальную разметку (линейку в верхней части окна интерфейса) на нужную координату проекта (по Y);
• для добавления вертикальной направляющей линии в проект, потяните за вертикальную разметку (линейку в левой части окна интерфейса) на нужную координату проекта (по X);

Удаление направляющей линии в проекте:

• выделите необходимую линию курсором и удалите по нажатию кнопки "Delete" на клавиатуре;
• выделите необходимую линию курсором и удалите по нажатию кнопки "Delete" в меню ПКМ.

Направляющие линии имеют следующие свойства:

• Линии отображаются на всех страницах и окнах-попапах в проекте;
• Графические элементы "примагничиваются" к направляющим линиям по краю, а так же по середине элемента;
• Каждая направляющая линия имеет собственные изменяемые параметры: Name (имя), Coordinate (координата) и LineColor (цвет линии). Данные параметры отображаются в окне PROJECT (вкладка General) при выделении направляющей линии;
• При сохранении проекта, все созданные направляющие линии и их параметры (координаты, цвет) так же сохраняются;
• При запуске i3 Pro направляющие линии не будут отображаться в интерфейсе проекта.

Меню ПКМ По нажатию правой кнопки мыши по линейке в рабочей области, откроется меню, в котором будут доступны следующие функции:

• Copy All Guides - скопировать все направляющие линии на странице;
• Paste Guides - вставить скопированные направляющие линии;
• Delete all guide lines - удалить все направляющие линии на странице.

Динамическая панель​

Динамическая панель - это панель быстрого доступа к редактированию графических элементов. В зависимости от выбранного элемента динамическая панель изменяет свои параметры. Они подразделяются на:

1. Основные настройки графического элемента (General):

• X / Y - координата элемента,
• Width / Height - размер элемента,
• Angle - угол, на который повернут элемент,
• Name - имя элемента.

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

3. Настройка состояний графического элемента:

• All sates - одновременная настройка всех состояний,
• On / Off - выбор одного из состояний элемента для настройки,
• Opacity - прозрачность элемента,
• Color - цвет элемента,
• Border - выбор рамки для элемента,
• Border color - цвет рамки.

Панель инструментов рабочей области​

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

• Selection - выделить элемент; Hand - переместить рабочую область.

• рисовать элемент.

• отобразить на динамической панели основные параметры элемента (General).

• Type (тип элемента) - определяет количество состояний и значения, которые элемент может отправлять;
• Feedback (обратная связь) - определяет, будет элемент реагировать сменой состояний на нажатия пользователя, на получение значения от оборудования, или вообще не будет менять свое состояние;
• Hit (факт нажатия) - определяет область и характер нажатия на элемент;
• Visible (отображение) - скрыть / отобразить элемент на странице;
• Active (активность) - сделать кнопку активной / не активной. Кнопка перестает реагировать на нажатия и отображается в серых оттенках.

• отобразить на динамической панели настройки изображения элемента.

• Select image - добавить картинку на элемент;

• Delete image - удалить картинку;

• Image stretch - разместить картинку на элементе:

  • none - с сохранением реальных размеров,
  • proportional - разместить пропорционально изначальным размерам,
  • full size - растянуть картинку на весь элемент;

• Image align - выравнивание изображения;

• Select icon - добавить иконку на элемент;

• Delete icon - удалить иконку;

• Icon stretch - разместить иконку на элементе:

  • none - с сохранением реальных размеров,
  • proportional - разместить пропорционально изначальным размерам,
  • full size - растянуть иконку на весь элемент;

• Icon align - выравнивание иконки;

• Select chameleon - добавить картинку-хамелеон на элемент;
• Delete chameleon - удалить картинку;
• Chameleon stretch - разместить картинку-хамелеон на элементе:
  • none - с сохранением реальных размеров,
  • proportional - разместить пропорционально изначальным размерам,
  • full size - растянуть картинку-хамелеон на весь элемент.

5. - отобразить на динамической панели настройки текста элемента.

• Font type - выбор шрифта;
• Font size - выбор размера шрифта;
• Bold - жирный шрифт;
• Italics - курсив;
• Text - текст, который будет отображаться на элементе;
• Color - цвет текста;
• Text align - выравнивание текста;
• Word wrap - перенос слов на новую строку;
• Effect - добавить эффект на шрифт;
• Effect color - цвет добавленного эффекта;
• Show value in text - отображать значения (Value) в тексте.

6. - позиция элемента на странице.

7. - позиция элемента на странице.

8. - интервал между элементами.

9. - выравнивание текста на элементе.

Настройки отображения элементов (меню ПКМ)​

Меню ПКМ - это набор инструментов для быстрого и удобного редактирования графического интерфейса. Для открытия меню, выделите элемент левой кнопкой мыши и нажмите правой кнопкой мыши в любой части рабочего окна.

Иконка	Описание
	Select item (Esc) - переключиться на режим выбора элемента.
	Draw item (Ctrl + D) — переключиться в режим рисования
	Копировать элемент
	Вставить скопированный или вырезанный элемент
	Клонировать элемент
	Вырезать элемент
	Удалить элемент
	Add (добавить на элемент): Image; Icon; Text; Sound; Chameleon; IP-Camera; Link; Script call
	Delete (удалить с элемента): Image; Icon; Text; All sounds; Chameleon; IP-Camera; All Links; All script calls; All relations and commands; All changes
	Order (порядок отрисовки): Bring to front; Send to back; Bring forward; Send backward; Bring in front of...; Send behind...; Change places with...
	Lock — закрепить элемент
	Unlock — открепить элемент
	Hide — скрыть элемент
	Show — показать элемент
	Edit / Make transparent — сделать элемент прозрачным
	Copy/Paste style: Copy state style; Copy style of all state; Paste state style

Project​

Панель проекта (Project) - это инструмент для редактирования внешнего вида графического элемента (страница, уровень, кнопка и др.) в интерфейсе. Открывается с помощью кнопки (Project structure) на правой боковой панели редактора. Состоит из 3-х частей: Pages and popups (дерево проекта), General (настройка графического элемента) и States (настройка отображения состояний графического элемента).

Pages and popups​

Дерево проекта (Pages and popups) позволяет создать новые страницы (Pages) и всплывающие окна (Popups). Страница или окно, созданное в дереве проекта, появляется в рабочей области редактора.

Pages and popups:

Иконка	Описание
	Add page – создать новую страницу.
	Add popup – создать новый попап.
	Add folder – создать новую папку.
	Copy page – копировать страницу/попап.
	Paste page – вставить скопированную страницу/попап.
	Clone – клонировать страницу/попап.
	Move up - переместить страницу/попап/кнопку выше по списку.
	Move down - переместить страницу/попап/кнопку ниже по списку.
	Search - поиск по дереву проекта.
	Project properties - настройка проекта.

Инструменты меню правой кнопки мыши:

Иконка	Описание
	Add folder – создать новую папку.
	Add view – добавить альтернативную ориентацию страницы.
	Add page – создать новую страницу.
	Add popup – создать новый попап.
	Add_item – создать новую кнопку.
	Delete page – удалить страницу/попап/кнопку.
	Copy - копировать страницу/попап/кнопку.
	Paste - вставить скопированную страницу/попап/кнопку.
	Add item to gallery - добавить страницу/попап/кнопку в галерею.
	Show popup on page - отобразить попап на текущей странице.
	Rename - переименовать страницу/попап/кнопку.
	Show usage - показать связи с элементом.
	Close project - закрыть проект.
	Create server project - создать серверный проект.
	Manager of popup groups - открыть менеджер всплывающих окон.

Инструменты управления и логики​

Управление оборудованием и логика доступны как для панельного, так и для серверного проекта, т.к. оба проекта могут напрямую связываться с оборудованием, но серверный проект имеет инструменты, недоступные в панельном. К инструментам управления и логики можно отнести:

1. Drivers - список устройств и сервисов, к которым подключается i3 pro или iRidium server для управления и получения данных (здесь могут отражаться не все устройства, т.к. возможно создание устройств через JavaScript).
2. Programming (только для панельного проекта) - действия, которые выполняет графический объект в i3 pro при нажатии на него. Элементы могут управлять как внутренней логикой интерфейса визуализации, так и отправлять/отображать данные, полученные от оборудования.
3. Script - JavaScript редактор, доступен для i3 pro или iRidium server. При разработке скриптов важно учитывать окружение - сервер или интерфейс визуализации, т.к. окружение определяет набор доступных методов и доступные способы обращения к данным.
4. Project tokens - переменные, в которых можно хранить пользовательские данные между запусками i3 pro или iRidium server.
5. System tokens - переменные, которые позволяют получить информацию об устройстве, на котором запущен i3 pro или iRidium server (время, тип ОС, параметры сети, экрана и др.).
6. GC cloud - онлайн-база инфракрасных команд для управления аудио-видео оборудованием по ИК. Команды хранятся в формате для оборудования Global Cache.
7. Modules (только для панельного проекта) - онлайн-инструмент для добавления виджетов (готовых пультов) из i3 lite в интерфейс визуализации для i3 pro.
8. ETS import - импорт групповых адресов из проекта ETS5 (*.knxproj).

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

1. Schedule - расписание событий, у которых можно настроить время срабатывания и периодичность повторения.
2. Schemes - программирование логики работы iRidium server при помощи логических блоков.
3. Routines - сценарии (последовательности команд и условия их запуска), которые можно запускать по расписанию или событию.

Панель управления iRidium Studio​

Панель управления iRidium Studio - это набор настроек для студии и проекта в частности.
В неё входят:

1. Настройки iRidium Studio:

• File - создание, открытие/ закрытие и сохранение проекта,
• Tools - настройка студии (язык, настройка отображения элементов в рабочей области),
• View - редактирование расположения панелей инструментов,
• Help - информация о приложении (версия, документация, техподдержка).

2. Инструменты настройки и управления проектом.

3. Инструменты тестирования и запуска проекта:

• Emulator - в панельном проекте эмулятор запускает интерфейс из iRidium studio в приложении i3 pro на вашем ПК. В серверном проекте эмулятор запускает проект из iRidium studio в приложении iRidium server на вашем ПК, в режиме Test mode;
• Send to transfer - отправляет интерфейс или серверный проект из iRidium studio на телефон, планшет или сервер который находится в той же сети, что и ваш ПК.

4. Управление вкладками проектов

• "+" - создание нового проекта
• "" - перемещение сфокусированного проекта влево и вправо на панели соответственно

Настройки iRidium Studio​

Команды, доступные в выпадающих списках

File​

Tools​

Languages - Выбрать язык интерфейса редактора

Options

Основные настройки iRidium Studio:

• Настройки Эмулятора
• Настройка рабочей области
• Настройка резервного копирования
• Настройка отображения элементов
• Операции с файлами

Открыть: Инструменты > Опции (Tools > Options)

Emulator - настройки работы Эмулятора в редакторе

• Show log at Emulator start — запускать окно лога (F4)

Workspace - настройки отображения элементов в рабочей зоне редактора.

Информация об элементе в рабочей области панельного проекта:

• Show item border - отобразить границы элемента (указать цвет границ),
• Show item name - отобразить на элементе его имя,
• **Show number of commands - отобразить на элементе количество привязанных команд,
• Font - задать параметры шрифта, который будет отображаться на элементе по умолчанию (указать шрифт и размер шрифта),
• Element selection color - изменить цвет рамки выделенного графического элемента.

Выравнивание элементов в рабочей области панельного проекта:

• Snap to grid — привязать графические элементы к сетке,
• Show grid — отобразить сетку (указать цвет и размер сетки),
• Show guide lines — отобразить направляющие линии в рабочей области (указать цвет линий),
• Sticking to edge of popup — включить прилипание графических элементов к краю страницы,
• Alignment (Ctrl) — включить выравнивание, относительно последнего выделенного элемента. Для выравнивания выделите необходимые графические элементы с зажатой кнопкой Ctrl (последний выделенный элемент будет эталоном для выравнивания) и выберите тип выравнивания (п.7) (указать цвет рамки последнего выделенного элемента).

Другие настройки:

• Show item in tree — отобразить все элементы проекта (кнопки, уровни и т.д.) в дереве проекта,
• Show coordinate axes in schemes — отобразить оси координат в окне Shames в серверном проекте,
• Support of RTL languages — включить поддержку RTL для направления письма справа налево (арабский, иврит и др.).

"Backup" - настройка сохранения резервных копий проекта.

• Backup — сохранять / не сохранять резервные копии проекта,
• Backup path — путь к папке, в которую будут сохраняться резервные копии,
• Create backup each time project is saved - создавать резервную копию при каждом сохранении проекта,
• Create backup every... (sec) - создавать резервную копию каждые... (сек),
• Delete backup older than... (days) - удалять резервные копии старше... (дней),
• Number of backups - количество хранимых резервных копий,
• Force backup - принудительное резервное копирование,
• Restore from backup - восстановить проект из резервной копии,
• Open folder with backup of currect project - открыть папку с резервными копиями текущего проекта,
• Open backup folder - открыть папку с резервными копиями,
• Delete currect project backup - удалить текущую резервную копию проекта,
• Clear backup folder - очистить папку с резервными копиями.

"Project style" - настройка стиля проекта (цвет, шрифт и другие параметры элементов по умолчанию).

Fonts - параметры шрифта на элементах:

• Page,
• Window,
• Item,
• Label.

Page - параметры страницы:

• Page color - цвет страницы,
• Page border - границы страницы (стиль, цвет),
• Text alignment - выравнивание текста.

Window - параметры окна:

• Window color - цвет окна,
• Window border - границы окна (стиль, цвет),
• Text alignment - выравнивание текста.

Default button text - параметры текста кнопки:

• Create manually - текст на элементе по умолчанию,
• Create from command - формат отображения текста на элементе при перетягивании команды/фидбека в рабочую область:
  • Driver name. Command name - отображать имя драйвера и имя команды/фидбека,
  • Command name - отображать только имя команды/фидбека,

State 1/State 2 - параметры отображения состояний кнопок:

• Item color - цвет элемента,
• Item border - границы элемента (стиль, цвет),
• Text alignment - выравнивание текста.

"File operations" - создание анимированных элементов.

• Separator to create animated items - разделитель для создания анимированных элементов из нескольких изображений.
• Path to Documents folder - указать путь до папки документов студии.

"Script" - настройка редактора скриптов.

• Tab size — количество пробелов, которые появятся по нажатию кнопки "Tab".

View​

Help​

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

Параметр	Значение
	Вернуть отмененное действие в графическом редакторе.
	Вернуть отмененное действие в графическом редакторе.
	Открыть проект.
	Сохранить текущий проект.
	Все связи, используемые в проекте.
	Настройка проекта.

Панель вкладок проектов​

Параметр	Значение
	Создать новый проект
	Переместить вкладку проекта влево
	При удержании постепенно перемещает проект до крайней позиции
	Переместить вкладку проекта вправо
	При удержании постепенно перемещает проект до крайней позиции

HOTKEYS.Горячие клавиши​

Hotkeys. Горячие клавиши - инструмент для быстрого доступа к различным возможностям студии.

• Ctrl + N - новый проект.

• Ctrl + O - открыть проект.

• Ctrl + F4 - закрыть проект.

• Ctrl + Shift + F4 - закрыть все проекты.

• Ctrl + S - сохранить проект.

• Ctrl + Shift + S - сохранить проект как…

• Ctrl + Z - отменить действие.

• Ctrl + Shift + Z - повторить действие.

• ЛКМ - выбрать элемент.

• Ctrl + ЛКМ - выделить несколько объектов.

• ПКМ - перейти к свойствам элемента.

• Ctrl + C - копировать объект (группу объектов).

• Ctrl + X - вырезать объект (группу объектов).

• Ctrl + V - вставить объект (группу объектов).

• Ctrl + A - выделить все объекты на странице.

• СКМ - закрыть вкладку (при клике по вкладке проекта или скрипта).

• F2 - открывает окно редактирования текста текущего элемента (также изменение имени элементов в дереве проекта и дереве драйверов).

• F5 - запустить Эмулятор.

Деревья элементов​

• ← - свернуть текущую ветвь дерева, скрывая дочерние элементы.​
• - (Минус) - свернуть текущую ветвь дерева, скрывая дочерние элементы.​
• → - развернуть текущую ветвь дерева, показывая дочерние элементы.​
• + (Плюс) - развернуть текущую ветвь дерева, показывая дочерние элементы.​
• • • развернуть все дочерние элементы текущего элемента.​
• Page Up - переместить курсор вверх на одну страницу.
• Page Down - переместить курсор вниз на одну страницу.
• Home - переместить курсор к первому элементу верхнего уровня.​
• End - переместить курсор к последнему элементу верхнего уровня.​

Рабочая область (Workspace)​

• Ctrl + G - сгруппировать выделенные элементы.

• Ctrl + Shift + G - разгруппировать выделенные элементы.

• Alt + G - включить / выключить отображение сетки в рабочей зоне.

• Space

  • При выделении графического элемента, переключает состояния текущего элемента (по кругу).
  • При выделении на Workspace, вызов инструмента Hand для перемещения по рабочей области.

• Page Up, Page Down - переключает состояния текущего элемента (предыдущее, следующее).

• Shift + Home - выделить текст до маркера.

• Shift + End to select - выделить весь текст после маркера.

• Shift + Left arrow - выделить один символ до маркера.

• Shift + Right arrow - выделить один символ до маркера.

• Shift + ЛКМ + Move - клонировать объект на странице.

• Клавиши ← ↑ → ↓ - перемещение выбранного объекта по рабочей зоне (на 1 пиксель).

• Ctrl + клавиши ← ↑ → ↓ - перемещение выбранного объекта по рабочей зоне (на 10 пикселей).

• Shift + клавиши ← ↑ → ↓ - увеличение/уменьшение размера выбранного объекта (на 1 пиксель).

• Alt + ЛКМ - выделение объекта на заднем плане.

• Ctrl + Home - перемещение графического элемента вперёд (на передний план)

• Ctrl + End - перемещение графического элемента назад (на задний план)

• Ctrl + Page Up - перемещение графического элемента ближе (увеличить масштаб)

• Ctrl + Page Down - перемещение графического элемента дальше (уменьшить масштаб)

• Ctrl + Scroll - увеличение / уменьшение размера рабочей области.

• Hold L - нарисовать надпись в рабочей области.

• Hold B - нарисовать кнопку в рабочей области.

• Ctrl + + - увеличить масштаб проекта.

• Ctrl + - - уменьшить масштаб проекта.

• Ctrl + 0 - установить масштаб проекта по умолчанию.

• Ctrl + 1 - установить максимально возможный масштаб для выбранной страницы / попапа (всплывающего окна).

• Scroll - прокрутка по вертикали.

• Alt + Scroll - прокрутка по горизонтали.

Редактор скриптов (Script Editor)​

• Ctrl + Shift + F - открытие окно поиска по всем скриптам в проекте.
• Ctrl + Scroll - увеличение / уменьшение размера рабочей области редактора скриптов.
• Ctrl + Home - перемещение в начало документа.
• Ctrl + End - перемещение в конец документа.
• Shift + Scroll - быстрая прокрутка по вертикали.
• Alt + Scroll - быстрая прокрутка по горизонтали.
• Двойной ЛКМ - выделение слова в фокусе.
• Тройной ЛКМ - выделение строки в фокусе.

Эмулятор/iRidium App для Windows​

• F4 - открыть лог Эмулятора/iRidium App для Windows.
• F8 - открыть настройки Эмулятора/iRidium App для Windows.