• iRidium studio 2019

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

В iRidium studio, редактор графических интерфейсов доступен при создании панельного проекта: File > New > New panel project . Панельный проект - это интерфейс визуализации для i3 pro.

К инструментам визуализации относятся:

• РАБОЧАЯ ЗОНА . Показывает, как будет выглядеть страница, попап и графический элемент при запуске в i3 pro. В рабочей области можно выбрать графический элемент, а также вариант внешнего вида (State) элемента для просмотра и редактирования при помощи панелей свойств;
• PROJECT . Список старниц и попапов, которые есть в интерфейсе визуалиацзии. Обеспечивает преключение объектов, отображаемых в рабочей зоне и отображение их свойств;
• PROGRAMMING . Действия, которые выполняет графический объект в i3 pro при нажатии на него. Элементы могут управлять как внутренней логикой интерфейса визуализации, так и отправлять/отображать данные, полученные от оборудования;
• IMAGES . Галерея объектов интерфейса, которые можно использовать в визуализации, и изображения, которые уже добавлены в интерфейс;
• CAMERAS . Архив настоек для популярных моделей IP-камер и ссылки на IP-камеры, которые уже добавлены в интерфейс;
• SOUNDS . Архив аудио-файлов, которые можно воспроизводить в интерфейсе а также файлы, которые уже добавлены в интерфейс;

RESOURCES . Список изображений, звуков и шрифтов, которые добавлены в проект.

РАБОЧАЯ ЗОНА. Отображение интерфейса​

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

В рабочей зоне доступны:

1. Выбор / рисование графических элементов:

2. Переключение между инструментами возможно при помощи кнопок Выбор (Select) и Рисование (Draw) в левой панели инструментов, а также через меню правой кнопки мыши.

3. Зажмите клавишу "D" на клавиатуре, чтобы быстро перевести курсор в режим "Рисования"; он автоматически вернется в режим Выбора при отпускании клавиши. В свойствах инструмента Рисование на левой боковой панели можно выбрать, какой тип элемента рисовать. Ctrl+D – переключить инструмент на Draw.

4. Зажмите клавишу "L" на клавиатуре, чтобы быстро перевести курсор в режим "Рисование лейбла" - это элемент с 1 вариантом внешнего вида (состоянием), и прозрачным фоном, удобный для создания текстовых блоков.

5. режимы выбора элементов.

6. по одному элементы можно выбирать кликом левой клавиши мыши.

7. несколько элементов можно выбрать областью курсора: при выделении областью слева-направо, будут выбраны все элементы, которые попали в область курсора полностью, или частично. При выделении справа-налево, будут выбраны элементы, которые попали в область полностью.

8. Перемещение объектов :

9. используйте курсор и стрелки на клавиатуре.

10. зажмите клавишу Ctrl и используйте стрелки, чтобы перемещать объект с кратным шагом (х10)

11. Меню правой кнопки мыши:

12. Переключение между инструментом Выбор и Рисование.

13. Copy, Clone, Paste, Cut, Delete - копирование, клонирование, вставка, "вырезание", удаление элемента

14. Add / Delete - меню быстрого добавления на объекты (и удаления):

15. Image - картинка, фоновое изображение.

16. Icon - дополнительное изображение-иконка, можно управлять её положением на объекте.

17. Chameleon - растровое изображение с управляемым цветом.

18. Воспроизведение звуков при нажатии.

19. Ссылки на IP-камеры и изображения из сети, которые замещают Image.

20. Вызовы ссылок.

21. Вызовы скриптовых функций - активация сценариев, написанных на JavaScript, см. окно [JS] Script.

22. Управление положением объекта относительно других (Z-order).

23. Lock / Unlock - запрет перемещения объекта в редакторе применим к графическому элементу или окну-попапу

24. Hide / Show - скрытие объекта в рабочей зоне для просмотра лежащих ниже слоев. Действует только на режим просмотра в редакторе (при запуске приложения, объект будет отображаться. Чтобы сделать объект невидимым и неактивным в i3 pro, используйте свойство Visible в настройках объекта).

25. Edit - изменить элемент:

26. Make transparent - сделать фон элемента прозрачным,

27. Resize to fit image - изменить высоту и ширину элемента в соответствии с размером изображения.

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

29. Выбрать состояние. Оно отобразится в рабочей зоне, а его настройки - в свойствах объекта.

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

31. Добавить/удалить состояние - можно только у элементов с типом Multistate. Элементы других типов имеют фиксированное число состояний, которое определяет их поведение при нажатии или отображении данных. Тип элемента можно сменить в настройках элемента (панель Object Properties, панель быстрого доступа к свойствам).

32. Включить режим "ALL STATES" - в котором изменения, внесенные в свойства состояния, будут применены ко всем состояниям элемента. Помогает быстро настроить свойства, одинаковые для всех состояний. Чтобы прекратить редактирование в режиме "ALL STATES", нажмите на клавишу повторно.

33. Управление слоями Icon (Иконка) и Text (Текст) у графических объектов:

34. Кликните на объект, затем на его иконку или текстовое поле - появится дополнительная рамка вокруг соответствующего слоя. Теперь его можно перемещать при помощи мыши или стрелок. В панели свойств редактора отображаются параметры выбранного слоя.

35. Двойной клик по активному (выбранному) слою Text открывает окно быстрого ввода текста.

36. Двойной клик по активному (выбранному) слою Icon открывает галерею проекта, откуда можно выбрать новое изображение-иконку на замену текущей.

37. Копирование / вставка элементов.
    С помощью горячих клавиш Ctrl+C (копирование) и Ctrl+V (вставка) вы можете:

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

39. Копировать изображения из внешних источников (проводник, Skype, браузер и тд.) и вставлять их в рабочую область или в галерею проекта. Поддерживаемые форматы изображений: PNG, JPG, GIF, SVG. При вставке изображения формата GIF - в рабочей области создается Multistate button со всеми необходимыми состояниями элемента, при вставке изображений других форматов - в рабочей области создается элемент Label, который имеет одно состояние. Размер элемента устанавливается автоматически в соответствии с размером изображения.

• Полное описание рабочей области и её настройки в статье "Обзор на iRidium Studio 2019".

PROJECT. Страницы и окна​

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

Чтобы открыть в рабочей области страницу, и редактировать ее, используйте панель "PROJECT (Project structure)".

Функции боковой панели Project:

1. Режим просмотра "Pages and Popups" .
2. Навигация по страницам и окнам-попапам проекта.
3. Добавление, удаление, клонирование страниц, попапов и папок.
4. Просмотр списка элементов на выбранной странице.
5. Управление относительным положением страниц и графических элементов в дереве проекта (перетягиванием или с помощью стрелок). Положение графических элементов в дереве проекта напрямую влияет на очерёдность отображения элементов на странице.
6. Переход к настройкам проекта.
7. Управление настройками объекта (страницы, попапа, элемента) выбранного в рабочей зоне.
8. General. Основные настройки: размещение, размер, тип элемента и поведении при нажатии и получении данных.
9. State. Параметры варианта внешнего вида (состояния), которое сейчас выбрано у объекта: цвета, изображения, текст и др.
10. Режим просмотра "Popup Groups" - управление группами взаимоисключающих попапов (автоматическое закрытие попапа при вызове другого попапа из той же группы).

PROGRAMMING. Действия при нажатии​

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

Выберите объект в рабочей зоне и откройте вкладку PROGRAMMING, чтобы посмотреть: когда, и какие действия он будет выполнять:

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

События:

• Press - отправка команд в момент прикосновения к кнопке;
• Release - отправка команд в момент отпускания кнопки;
• Hold - циклическая отправка команд, пока элемент удерживают;
• End Of Hold - однократная отправка команд при отпускании кнопки, если её до этого удерживали;
• Move - отправка команд при перемещении ползунка или джойстика;
• Select - выбор пункта и подпункта в элементе List (скриптовый список). Доступ через List API;
• Enter - нажатие клавиши Enter в элементе Edit Box;
• Change - событие ввода символа в элемент Edit Box. Доступ через GUI API;
• Lost Focus - событие, которое генерирует любой элемент, вне зависимости от типа и условий, в момент отпускания. Событие означает потерю элементом фокуса (активности). Событие доступно для обработки только через GUI API;
• Gestures - жесты (свайпы). Жест обрабатывает только страница (нельзя настроить жест для окна или области на элементе). Жест может начаться на самой странице, графическом элементе или в окне, но будет передан родительской странице - сработают команды, настроенные для страницы. Исключение: элементы Level, Joystic, List и Static List, которые обрабатывают событие Move вместо жестов.

Контекстный переход​

Вкладка Programming позволяет быстро перейти к задействованному в макросе или связи элементу и переключить на него фокус. Для этого в контекстном меню связи или макроса, при наличии связанного элемента, выберите опцию “Перейти к (имя элемента)”

При этом произойдёт следующее:

• Откроется/переключится вкладка, на которой находится выбранный для перехода элемент (например скрипт, графический элемент, звук или токен)
• Фокус установится на этот элемент (где это возможно)*
  
  *Исключениями являются вкладки…
• Системные токены — фокусируется вкладка “Системные токены”, связанный токен не фокусируется
• Редактор скриптов — фокусируется вкладка “Редактор скриптов” и файл скрипта, в котором записана вызываемая функция; фокус на строку функции не ставится.
  
  * * В контекстном меню для переходов к связанным элементам используются иконки, введённые с Адаптивным режимом вкладки Programming. Включать адаптивный режим для работы переходов не обязательно!

Адаптивный режим программинга​

Режим Adaptation of "Programming" tab можно включить в окне Настройки Studio

Внешний вид вкладки в адаптивном режиме​

При включении режима Adaptation of "Programming" tab, окно программинг принимает новые свойства:

1. Появляются цветовые маркеры:

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

2. Изменяется формат записи информации в строке

• Уходят указатели на категорию объекта в тегах: UI, Driver, Token, Tag, Command
• Связи отображаются в последовательности: Источник > Приёмник.
• Мелким шрифтом под именем невыделенных элементов, КУ, КОС и тегов указана дополнительная информация:
• • у КУ и КОС - имя драйвера или имя нетворка и подустройтва (HDL Buspro Network)
• • у элементов - полный путь к нему (Popup 1.Item 3.State 2),
• • у выделенных элементов с указанием свойства одного из состояний - состояние элемента (State 1 / State 2)
• • у токенов - тип (Tokens / System / HDL Buspro Network).
• Убраны из макросов указание на объект и действие:
• значение из объекта
• текст
• число
• данные
• звук

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

3. В связи с другим графическим элементом - рядом отображается иконка этого элемента

4. По наведению курсором мыши на строку макроса / связи - появляется подсказка с полным именем и расположением объекта.

Инструкция : как отправлять команды и отображать данные >>>.

• Мастер проект находится в бета версии и не рекомендован к использованию.

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

Добейтесь желаемого внешнего вида и поведения в исходном разрешении проекта: [original]. После этого можно открыть другие разрешения и внести изменения в них - если потребуется. Например, сместите объекты так, чтобы они занимали всю рабочую область, или скорректируйте размер шрифта.

Если у объекта в не-оригинальном разрешении изменить свойства, они будут отмечены оранжевым цветом и будут действовать только на это разрешение:

Общие правки всегда нужно вносить в основное разрешение, до того, как начнете править дополнительные. Чтобы сбросить уникальные параметры, используйте меню правкой кнопки мыши: Delete > All Changes .

В Эмуляторе будет запущено то разрешение проекта, которое сейчас выбрано в редакторе.

Чтобы скомпилировать одно из разрешений в запускаемый файл для i3 pro, используйте "Save project in X*Y resolution" в меню правкой кнопки мыши у требуемого разрешения:

-->

IMAGES. Галерея объектов интерфейса и изображений​

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

В галерее могут храниться:

1. простые изображения в виде объектов с 1 состоянием,
2. кнопки с двумя состояниями,
3. анимированные кнопки,
4. уровни с двумя состояниями,
5. уровни с множеством состояний,
6. группы графических элементов,
7. страницы и окна проектов.

Галерея делится на следующие разделы:

1. Backgrounds - фоны в стиле iOS или Android;
   
2. Examples of items - примеры графических элементов (кнопок, уровней, триггерной кнопки и др.);
   
3. Examples of templates - наборы элементов (шаблонов) для управления светом, климатическим оборудованием, системой безопасности и другие;
   
4. Icons - наборы шрифтовых иконок и иконок в формате png. Шрифтовые иконки - это символ текстового поля, который преобразуется в изображение благодаря специально созданным шрифтам. Иконки-шрифты можно не опасаясь увеличить в размере без потери качества изображения. Все шрифтовые иконки в галереи объединены в группы (Arrows, Battery, Blinds и др.). Иконки формата png в галереи есть с 2D и 3D эффектом, разделены на группы по разрешению изображения;
   
5. Metro Style - набор инструментов для создания интерфейса в стиле Metro.
   Пример готового интерфейса указан ниже.

Metro Style разбит на несколько папок, которые включают в себя:

• 1 Ready interfaces - примеры готовых интерфейсов,
• 2 Icons - иконки интерфейса,
• 3 Templates - шаблоны кнопок, страниц и окон-попапов интерфейса,
• 4 Screensavers - пример скринсейвера.

6. iOS White Style - набор инструментов для создания интерфейса в стиле iOS White.
   Пример готового интерфейса указан ниже.

iOS White Style разбит на несколько папок, которые включают в себя:

• 1 Ready interfaces - примеры готовых интерфейсов,
• 2 Icons - иконки интерфейса,
• 3 Templates - шаблоны кнопок, страниц и окон-попапов интерфейса.

7. iOS Black Style - набор инструментов для создания интерфейса в стиле iOS Black.
   Пример готового интерфейса указан ниже.

iOS Black Style разбит на несколько папок, которые включают в себя:

• 1 Ready interfaces - примеры готовых интерфейсов,
• 2 Icons - иконки интерфейса,
• 3 Templates - шаблоны кнопок, страниц и окон-попапов интерфейса.

CAMERAS. Архив IP-камер​

Архив камер - это хранилище ссылок на видео-потоки с IP-камер, которые можно использовать в интерфейсе.

Режимы просмотра:

1. Gallery cameras - общий архив типичных сслок на популярные модели IP-камер. Вы может добавить в архив свои ссылки.
2. Project cameras - ссылки на IP-камеры, которые вы добавляли в интерфейс визуализации. Удалить не используемые ссылки из проекта можно при помощи инструмента "Неиспользуемые ресурсы" (Unused resources) на верхней панели инструментов редактора, вкладка Images.

Как настроить ссылку на видео-поток с IP-камеры >>>

SOUNDS. Архив аудио-файлов​

Архив аудио-файлов - это хранилище звуков, которые можно воспроизводить в интерфейсе. Прослушать звук можно, дважды кликнув на него в галерее.

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

• 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

RESOURCES. Ресурсы проекта​

К ресурсам проекта относятся все изображения, звуки, шрифты и анимация, которые были использованы в проекте.

Images​

Изображения, используемые в проекте.

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

Sounds​

Аудио файлы, используемые в проекте.

Меню ПКМ:

Fonts​

Шрифты, используемые в проекте.

Добавление собственных шрифтов в студию​

• iRidium Studio поддерживает только шрифты формата "ttf", "ttc", "otf".

1. Добавьте файл шрифта в папку \iRidium pro documents\Studio\Gallery2019\Fonts расположенную в папке пользователя Documents(C:\Users\UserName\Documents) .

C:\Users\UserName\Documents\iRidium pro documents\Studio\Gallery2019\Fonts

2. Выберите добавленный шрифт в списке шрифтов:

Animation​

Создайте комплект эффектов анимации, которые вы хотите использовать в инетфрейсе, и привязывайте их к попапам в панели Анимация:

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

• Type - способ анимирования попапа
• • Fade - "выцветание" - попап меняет степень прозрачности
• • Rotate - "кручение" - попап движется, вращаясь вокруг центральной оси
• • • Angle - на какой угол будет повернут попап в момент начала движения
• • Slide - "появление" - попап выдвигается по прямой траектории
• • • Type of appearance - направление и точка начала движения попапа (из-за края, из-за себя)
• • Scale - "расширение" - попап увеличивает или уменьшает свои координаты Х и Y от нуля до заданных
• • • X scale - коэффициент расширения попапа по горизонтали в момент начала движения
• • • Y scale - коэффициент расширения попапа по вертикали в момент начала движения
• • TV Scan - "панорама" - попап появляется через изменение координаты Y от нуля до заданной
• Duration (мс) - время выполнения эффекта
• Delay (мс) - задержка перед началом выполнения эффекта
• Tweener - определяет скорость и траекторию движения попапа