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

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

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

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

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

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

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

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

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

• Подробная информация о типах элементов описана в статье "Типы графических элементов, поведение в интерфейсе".

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

• Type (тип элемента) - определяет количество состояний и значения, которые элемент может отправлять;

• Feedback (обратная связь) - определяет, будет элемент реагировать сменой состояний на нажатия пользователя, на получение значения от оборудования, или вообще не будет менять свое состояние;

• Hit (факт нажатия) - определяет область и характер нажатия на элемент;

• Visible (отображение) - скрыть / отобразить элемент на странице;

• Active (активность) - сделать кнопку активной / не активной. Кнопка перестает реагировать на нажатия и отображается в серых оттенках.

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

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

• 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. - выравнивание текста на элементе.

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

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

Иконка	Описание
	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).
Страница или окно, созданное в дереве проекта, появляется в рабочей области редактора.

	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​

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) — выравнивание относительно элемента

Другое​

• Show item in tree — отображение в дереве
• Show coordinate axes in schemes — оси координат
• 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 backup folder
• Delete current backup
• Clear backup folder

Project style​

Fonts​

• Page, Window, Item, Label

Page​

• Цвет
• Границы
• Выравнивание текста

Window​

• Цвет
• Границы
• Выравнивание текста

Default button text​

• Create manually
• Create from command
• Driver name + Command name
• Command name

States​

• Цвет элемента
• Границы
• Выравнивание

File operations​

• Separator to create animated items
• Path to Documents folder

Script​

• Tab size — размер табуляции

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.