• iRidium studio 2019

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

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

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

Типы и назначение элементов​

Базовый элемент интерфейса i3 pro - это кнопка. Все объекты, которые вы видите - надписи, разделители, ползунки и клавиши - это элементы, поведение и отображение которых, изначально, было основано на поведении обычной кнопки (Button), к которой добавлены дополнительные особенности. Тип элемента описывает эти особенности:

Создание графических элементов​

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

Рисование при помощи инструмента "Draw"​

Как выбрать инструмент рисования:

1. в левой боковой панели инструментов размещены кнопки Select и Draw для переключения с выбора элементов на рисование. Зажмите кнопку Draw, чтобы из списка выбрать тип элемента, который будете рисовать по-умолчанию.
2. кнопки Select и Draw продублированы в меню правой кнопки мыши при клике в рабочей зоне iRidium studio.
3. удержанием и сочетанием клавиш:

• Hold L - нарисовать надпись в рабочей области.
• Hold B - нарисовать кнопку в рабочей области.
• D + Ctrl - нажмите однократно, чтобы переключиться на рисование.
• Esc - нажмите однократно, чтобы переключиться на режим Select.

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

Включите инструмент Select, чтобы завершить рисование и вернуться к режиму выбора элементов в рабочей зоне.

Нарисованный элемент будет иметь стандартный внешний вид, изменить который можно в Настройках iRidium studio: Tools > Options > Project style .

Основные настройки элементов (General)​

Основные настройки - это настройки, доступные каждому элементу в студии.

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

Тип элемента и его настройки доступны на вкладке General окна Project или на динамической панели iRidium Studio:

Специфические настройки, определяемые типом элемента​

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

Button (кнопка)​

Button — это графический элемент из 2-х состояний. Каждое нажатие на кнопку инициирует отправку одних и тех же команд, заранее к ней привязанных. Например, одна кнопка может включать свет, отправляя в канал значение "100", а другая выключать, отправляя значение "0".

Параметры элемента​

Привязка к оборудованию​

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

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

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

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

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

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

Принципы работы​

1. При нажатии на Button, кнопка берет значение из поля Value, указанное в диалоге привязки переменной, и отправляет оборудованию. Например, если указать в поле Value значение "100", то при нажатию на кнопку, диммируемая лампа включится с яркость 100%.
2. Во время нажатия (удержания) кнопка принимает второе состояние, по отпусканию возвращается в первое. Такое поведение типично для кнопок клавиатуры смартфона.

Label (лейбл)​

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

Параметры элемента​

Привязка к оборудованию​

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

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

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

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

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

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

Принципы работы​

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

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

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

Параметры элемента​

Привязка к оборудованию​

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

Принципы работы​

1. В бесконечном цикле (Feedback: On, Repeat: True ) кнопка будет воспроизводить анимацию, сменяя свои состояния через заданный промежуток времени (Time Up / Time Down). Примером такой кнопки может служить анимация отблесков на логотипе компании.
2. Если настроить активацию кнопки по удержанию (Feedback: Momentary, Repeat: True) , то смена состояний кнопки будет повторяться пока мы нажимаем на неё и остановится когда отпустим. Например, такую кнопку можно использовать для анимирования жалюзи / штор, если открытие / закрытие происходит по удержанию кнопки.
3. Если настроить активацию кнопки по получению от оборудования не нулевых значений (Feedback: Blink / Channel, Repeat: True), то смена состояний кнопки начнется при получении от оборудования значения не равного "0", например 1, и остановится при получении нуля. Подобную кнопку можно использовать для отображения скорости вращения вентилятора.

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

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

Параметры элемента​

Привязка к оборудованию​

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

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

Принципы работы​

1. Кнопка считывает значение из канала обратной связи переменной (Feedback) и выполняет запрограммированное действие:

• None. Кнопка визуально не реагирует на нажатие.
• Channel. Кнопка переключается на состояние on при нажатии. При повторном нажатии - возвращается в состояние off.
• Invert Channel. Принцип инверсии действиям при Channel. Кнопка переключается на состояние off при нажатии. При повторном нажатии - возвращается в состояние on .
• Channel Only - кнопка переключается на состояние on только при совпадении значения из канала обратной связи со значением, указанным в Value 2. Кнопка переключается на состояние off только при совпадении значения из канала обратной связи со значением, указанным в Value 1. При содержании канала обратной связи, не совпадающем с Value 1/Value 2- кнопка принимает значение, указанное в Undefined Value.

2. Кнопку можно настроить как Radio Buttons. В этом случае мы объединяем несколько элементов Trigger Button под одной логикой. Нажимая на один из группы этих элементов, мы переводим все остальные элементы в неактивное состояние. Такое поведение кнопок часто можно увидеть при установке флажка одному из элементов списка.

Radio Buttons​

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

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

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

1. Настройте элементы Trigger Button (см. изображение) по числу радиокнопок. В полях Value 1 и Value 2 укажите одинаковые значения, соответствующие тем, что каждая кнопка должна отправлять управляемой переменной. В поле Feedback укажите Invert Channel.
2. Перетяните команду управления переменной на все радиокнопки. Выберите событие When pressed или When released для отправки, обязательно поставьте галочку Assign feedback channel для отображения статуса переменной.

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

1. Настройте элементы Type: Trigger Button, Feedback: Channel, укажите Value 1 = неактивное, Value 2 = активное состояние переменной (например 0/1, 0/100).
2. Перетяните команды управления переменными на графические элементы. На примере первого элемента группы:

• Отправьте нули во все переменные, которые входят в группу радиокнопок, чтобы отключить текущий активный режим. Для этого в диалоге отправки команды выберите Action: Send Number.
• Добавьте задержку Delay(50) мс через редактор макросов события Press, чтобы дать оборудованию время на отключение активного режима.
• Перетяните на элемент команду управления переменной, которая соответствует радиокнопке. Оставьте Action: Value from object. Value на событии When pressed (или When released), обязательно поставьте галочку Assign feedback channel.

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

Up/Down button — используется для последовательного изменения значения переменной устройства на фиксированную величину по нажатию или удержанию. Работает, только если у устройства есть канал обратной связи. Например, чтобы по каждому нажатию на кнопку увеличивать/уменьшать яркость света на 15, а по удержанию: на 25.

Параметры элемента​

Привязка к оборудованию​

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

Теперь переменная связана с Up / Down кнопками. Посмотреть все связи кнопки можно в окне Programming.

Принципы работы​

1. При нажатии Up/Down button, кнопка берет значение из канала обратной связи переменной. Например, лампа горит на 45%, и значение в канале тоже 45.
2. После этого прибавляется к значению из канала - значение из поля «UpDownStep». Например, он равен «-10». 45 +«-10» = 35.
3. Полученное значение (равное 35), отправляется в канал, привязанный к кнопке.
4. При удержании, к значению из канала прибавляется значение из поля «Up Down Hold Step». Например, он равен «-25». 45 +«-25» = 15.
5. Если отправляемое значение больше, чем значение в поле «Up Down Limit», то отправляется значение из этого поля. После этого кнопка перестает отправлять данные до тех пор, пока значение в канале обратной связи не изменится.

Level (уровень)​

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

Параметры элемента​

Привязка к оборудованию​

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

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

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

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

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

Теперь переменная связана с уровнем. Посмотреть все связи графического элемента можно в окне Programming.

Принципы работы​

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

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

Multistate Level - графический элемент более чем из 2 состояний. Нажатие на уровень отправляет в переменную число, соответствующее текущему положению ползунка. Но ползунка, как такового, нет. Вместо него уровень показывает один из State - состояние, которое соответствует выбранному значению или диапазону значений. Каждому State анимированного уровня можно присвоить свое изображение, текст, цвет. Например, такой уровень можно использовать для отображения состояния подключения к оборудованию (online, offline, waiting for connection и др.).

Параметры элемента​

Привязка к оборудованию​

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

Теперь переменная связана с уровнем. Посмотреть все связи графического элемента можно в окне Programming.

Принципы работы​

1. Уровень берет значение из канала обратной связи переменной и отображает состояние, номер которого совпадает со значением этой переменной. Например, лампа горит на 45%, значение в канале тоже 45, уровень отображает State 45.
2. Если максимальное количество значений уровня больше количества состояний, то уровень берет процентное соотношение значений и отображает соответственное состояние. Например, уровень принимает значения от 0 до 100, количество состояний 50. При получении значения 40 из канала обратной связи переменной - уровень отобразит State 20.
3. По нажатию или перемещению ползунка уровня - значение с уровня передается оборудованию. Например, установив уровень на 25, мы включаем диммируемую лампу с яркостью 25%.

Режимы кругового уровня​

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

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

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

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

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

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

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

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

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

2. Одному из значений слайдера в параметре Hit установить значение Pass Through чтобы в дальнейшем пользователь не мог им управлять. Данное значение будет отображать текущую температуру.

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. Одному из значений слайдера в параметре Hit установить значение Pass Through чтобы в дальнейшем пользователь не мог им управлять. Данное значение будет отображать текущую температуру.
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 (круговой уровень с анимацией)​

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

Параметры элемента​

Привязка к оборудованию​

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

Теперь переменная связана с уровнем. Посмотреть все связи графического элемента можно в окне Programming.

Принципы работы​

1. Multistate circular level берет значение из канала обратной связи переменной и отображает состояние, номер которого совпадает со значением этой переменной. Например, лампа горит на 45%, значение в канале тоже 45, уровень отображает State 45.
2. Если максимальное количество значений уровня больше количества состояний, то уровень берет процентное соотношение значений и отображает соответственное состояние. Например, уровень принимает значения от 0 до 100, количество состояний 50. При получении значения 40 из канала обратной связи переменной - уровень отобразит State 20.
3. По нажатию или перемещению ползунка уровня - значение с уровня передается оборудованию. Например, установив уровень на 25, мы включаем диммируемую лампу с яркостью 25%.

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

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

Параметры элемента​

Привязка к оборудованию​

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

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

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

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

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

вариант 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. Скопируйте имя драйвера на вкладке Devices > Name ;
• "Channel Red", "Channel Green", "Channel Blue" - имена переменных (Commands), которые отвечают за управление красной, зеленой, и синей составляющими цвета. Скопируйте имена на вкладке Device > Commands > Name . Имена Commands должны совпадать с именами Feedbacks, откуда приходит информация о текущем цвете RGB ленты.

• 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.4. Нажмите "ОК" чтобы сохранить описание палитры, запустите Эмулятор, чтобы проверить ее работу.

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

вариант 3. Управлять RGBW лентой с помощью палитры и левела.​

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

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

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

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

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

3.3. Создайте пустой файл скрипта: ( + ) "New Script", чтобы добавить в него описание вашей RGBW палитры: В файле скрипта опишите палитру и элемент для отображения выбранного цвета:

///////// Copy this function to make one more RGBW palette ///////
RGBW_player(
      "Driver",                                              // Driver in project
      "Channel Red",                                         // Name of Red Channel
      "Channel Green",                                       // Name of Green Channel 
      "Channel Blue",                                        // Name of Blue Channel
      "Channel White",                                       // Name of White Channel
      255,                                                   // Top limit for RGBW channel (100 or 255)
      IR.GetItem("Page 1").GetItem("Item Color Picker"),     // Item "Color Picker"
      IR.GetItem("Page 1").GetItem("Item White Level"),      // Item "White Level"
      /////// optional parameters for feedback color and white channel value ///////
       IR.GetItem("Page 1").GetItem("Color Display"),        // Item "Color Display"
       IR.GetItem("Page 1").GetItem("Item White Level")      // Item "White Display"
);

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

• IR.GetDevice("Driver") - имя драйвера, которому вы будете отправлять команды RGBW. Скопируйте имя драйвера на вкладке Devices > Name ;
• "Channel Red", "Channel Green", "Channel Blue", "Channel White" - имена переменных (Commands), которые отвечают за управление красной, зеленой, синей и белой (яркость) составляющими цвета. Скопируйте имена на вкладке Device > Commands > Name . Имена Commands должны совпадать с именами Feedbacks, откуда приходит информация о текущем цвете RGBW ленты.

• 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("Slider Level 1") - имя страницы ("Page 1") и элемента на ней ("Slider Level 1") который будет при изменении значения уровня регулировать яркость выбранного цвета;

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

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

Принципы работы​

1. По нажатию или перемещению ползунка джойстика - выбранный цвет делится на 3 основных: красный, зеленый и синий. Например, фиолетовый цвет это сочетание синего и красного.
2. Полученные значения отправляются соответственно в 3 канала: Red, Green, Blue, а на оборудование приходит тот цвет, который мы изначально выбирали. Таким образом, мы можем включить свет или подсветку в любом доступном цвете, ограниченным разнообразием палитры.
3. Объединив 3 канала обратной связи, мы можем отобразить текущее значение цвета на дисплее.

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

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

Параметры элемента​

Привязка к оборудованию​

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

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

• Programming > Press > «Show Keyboard [keyboard_type]».

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

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

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

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

Принципы работы​

1. По нажатию на элемент Edit Box, поле ввода становится активным.
2. Мы можем настроить шрифт, его цвет или размер, или полностью зашифровать вводимые данные. Например, шифровка вводимого текста часто используется для паролей.
3. Запись значения, введенного в Edit Box, в переменную происходит по нажатию Enter на клавиатуре. Так же после отправки значения мы можем настроить автоматическую очистку текстового поля или вывод ошибки. Например, при вводе неверного пароля - очищается текстовое поле и появляется ошибка: "Неверный пароль, повторите попытку снова!".

TextArea (поле ввода)​

TextArea - элемент для ввода многострочного текста с клавиатуры. Представляет собой более усовершенствованную версию элемента Edit Box для работы с большим текстом. Элемент переносит текст в конце строки по пробелу или нажатию клавиши Enter, для удобного перехода по тексту используйте полосу прокрутки (scroll bar). Данный элемент имеет улучшенный paste helper . При вызове без выделения появляются режимы: Paste, Select, Select All. При вызове с выделением появляются режимы: Paste, Copy, Cut. TextArea чаще всего используют для заметок или редактирования многострочного текста.

Параметры элемента​

| Type | TextArea | |---------------|-------------|---------------------------| | Feedback | Реакция на нажатие
* Momentary – поле ввода подсвечивается при получении фокуса | | Hold time | Время (в мс.), в течение которого нужно удерживать кнопку, чтобы сработало событие Hold | | Repeat time | Частота повторения событий Hold | | PasswordChar | Символ, на который будет визуально заменен любой текст, введенный в TextArea
Используется для скрытия введенных паролей. Получить исходный текст можно из свойства .Text | | Tags | Присвоить элементу тег для удобного поиска в дереве проекта
Для поиска укажите имя тега в поисковой строке панели Project; отобразятся все элементы с данным тегом |

Привязка к оборудованию​

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

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

• Programming > Press > «Show Keyboard [keyboard_type]».

По удержанию вызовите окно "paste helper":

• Programming > Hold > Show paste helper.

Запрограммируйте дополнительную кнопку на отправку текста в переменную .

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

• По нажатию на элемент TextArea - открывается виртуальная клавиатура смартфона (планшета);
• По нажатию кнопки "Сохранить" - поле ввода отправляет текст в переменную, закрывает клавиатуру, очищает поле ввода.

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

Принципы работы​

1. По нажатию на элемент TextArea, поле ввода становится активным.
2. Мы можем настроить шрифт, его цвет или размер, или полностью зашифровать вводимые данные. Например, шифровка вводимого текста часто используется для паролей.
3. По нажатию левой кнопки мыши или удержанию на экране появляется окно paste helper с помощью которого можно скопировать, вырезать или вставить выделенный текст. При вызове без выделения текста появляются режимы: Paste, Select, Select All. При вызове с выделением текста появляются режимы: Paste, Copy, Cut.
4. Элемент поддерживает сочетание клавиш:

• Ctrl+A - выделить всё,
• Ctrl+C - скопировать выделенное в буфер обмена,
• Ctrl+V - вставить текст из буфера на элемент,
• Ctrl+X - вырезать выделенный текст с элемента в буфер обмена,

5. Запись значения, введенного в TextArea, в переменную происходит по нажатию запрограммированной на это кнопки в графическом интерфейсе по событию Press или Release. Так же после отправки значения мы можем настроить автоматическую очистку текстового поля или вывод ошибки. Например, по нажатию кнопки "Сохранить", мы записываем текст в переменную проекта и очищаем поле ввода для дальнейших записей.

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

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

Параметры элемента​

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

Принципы работы​

1. Каждую клавишу Virtual key можно настроить на определенный символ или функцию клавиатуры (Enter, Delete и др.).
2. По нажатию на виртуальную клавишу, в активное текстовое поле запишется выбранный символ. Такой принцип работы полностью схож с обычной сенсорной клавиатурой на Android или iOS, но Virtual key позволяет настроить дизайн этой клавиатуры непосредственно под дизайн текущего проекта.