Logo Logo en
  • iRidi Pro
    Основные компоненты
    • Приложение i3 Pro
    • iRidi Pro Server
    • iRidi Studio
    • iRidium studio v. 1.3.8 (устаревшая версия)
    Java Script в iRidi
    • Руководство
    • Справочник
    • Примеры
    • JS драйвера
    другие
    • Личный Кабинет
    • iRidium Cloud
    • iRidium Transfer
    • Push-уведомления
    • Лучшая практика
    Лицензирование
    • Лицензирование и передача проекта
    • Оффлайн-лицензирование
    • Активация iRidi Pro Server
  • Продукты
    i3 lite
    • Приложение i3 lite
    • Регистрация и лицензирование
    • Сервер
    • Модули
    KNX Home Server
    • Приложение i3 KNX
    • KNX Home Server
    BUS77 HOME SERVER
    • Приложения Bus77 Home и Bus77 Lite
    • Bus77 Home Server
    Решения
    • BYOD - решение для гостиниц
    • Портал жителя - решение для МКД
    iRidi SCADA
    • iRidi SCADA
  • Bus77
    НАСТРОЙКА BUS77
    • Основы Bus77
    • Приложения Bus77 Home и Bus77 Lite
    • Работа с драйвером Bus77 в iRidi Studio
    • Настройка шины Bus77 в iRidi Studio
    ПРОТОКОЛ BUS77
    • Характеристики CAN (Bus77)
    • Описание протокола
    • Исходники на GitHub
    ОБОРУДОВАНИЕ BUS77
    • Каталог Bus77 Pro
    • Каталог Bus77 Lite
  • Поддерживаемое оборудование
    Драйверы
    • Список драйверов
    • ProAV драйвера
    • AV & Custom Systems
    • JS драйвера
    • Сторонние драйвера и фриланс
    Протоколы и интерфейсы
    • Голосовое управление
    • 1-Wire
    • BACnet IP
    • Bus77
    • KNX
    • KNX IP BAOS
    • Weinzierl kBerry
    • Microsoft Exchange
    • Modbus
    • MQTT
    • NFC
    • ODBC
    • Onvif
    • SIP
    • SNMP
    • Wake On Lan
    • Z-Wave
    • ZigBee
    Производители
    • AMX
    • AVCiT
    • Beckhoff ADS
    • Biamp Tesira
    • Bluesound
    • Casambi
    • BSS Harman
    • Clipsal
    • ControlArt 7Port
    • Crestron
    • DigiBird
    • Domintell
    • Duotecno
    • EIDE
    • EPSNET
    • Global Cache
    • HDL Buspro
    • Helvar
    • IEAST
    • INELS BUS
    • INELS Wireless
    • Intesis
    • Kleger
    • Kramer VIA
    • Kramer 3000
    • Larnitech
    • Legrand Netatmo
    • LG TV
    • Lutron
    • Lutron Homeworks QS
    • MyHome
    • Nest
    • Novastar
    • Panasоnic PTZ
    • Philips Dynalite
    • PJLink
    • Satel
    • SamsungTV
    • Sonos
    • Somfy
    • SpinetiX
    • Televic Conference
    • TIS
    • Tion
    • URRI
    • Velbus
    • Velocio
    • Vinteo
    • WyreStorm
    • WiiM
    • Xicato
    • Yamaha
    • ZONT
    • Z-Wave.me
    Протестированное оборудование
    • Панель HDL S57
    • Панель HDL S10
    • SIP-домофон
    • Akuvox
    • Arlight
    • Divus
    • QBic TD-1050 PRO
    • QBic TD-1060 Slim
    • QBic TD-1070
    • Sigur
    • Uni-Ubi
    • Velocio
  • Оборудование iRidi

    Серверы
    • HS Сервер
    • ProAV Control Processor Basic
    • ProAV Control Processor Advanced
    • Спецификация контроллеров UMC
    • Настройка контроллера UMC C2
    • Настройка контроллера UMC C3
    • Настройка контроллера HDL IntelliCenter 2 (UMC C4)
    Модули расширения
    • I-PX-RS1
    • I-PX-RS4
    • I-PX-IR3
    KNX
    • KNX Home Server
    • KNX IP Interface
    Панели управления
    • iRidium Panel 7
    • Touch Panel P3
    • Touch Panel P6
    • Touch Panel P8
    • Touch Panel P10
    • Tabletop Touch Panel 10
    • AV Remote Control
    ОБОРУДОВАНИЕ BUS77
    • Каталог Bus77 Pro
    • Каталог Bus77 Lite
    • Differences
iRidium mobile web-site
Содержание
    Инструменты‌
    • Сведения о странице
    • Постоянная ссылка
    • Версия для печати
    • Спецстраницы
    • Связанные правки
    • Ссылки сюда
    Login / Create Account
    Материал из for iRidium developers
    Перейти к: навигация, поиск
    Эта страница является переводом страницы IRidium studio 2019 Item types. Перевод выполнен на 100%.

  • iRidium studio 2019
  • Types of graphic items, item behavior in interface
  • Содержание

    • 1 Types of graphic items, behavior in interface
      • 1.1 Types and purpose of elements
      • 1.2 Creation of Graphic Items
        • 1.2.1 Drawing with the help of the "Draw" tool
      • 1.3 General Settings of Items
        • 1.3.1 Special Settings Defined by Item Type
      • 1.4 Button
        • 1.4.1 Parameters of Item
        • 1.4.2 Assigning to Equipment
        • 1.4.3 Operation Principles
      • 1.5 Label
        • 1.5.1 Item Parameters
        • 1.5.2 Assigning to Equipment
        • 1.5.3 Operation Principles
      • 1.6 Multistate Button (button with animation)
        • 1.6.1 Item Parameters
        • 1.6.2 Assigning to Equipment
        • 1.6.3 Operation Principles
      • 1.7 Trigger Button
        • 1.7.1 Item Parameters
        • 1.7.2 Assigning to Equipment
      • 1.8 Operation Principles
        • 1.8.1 Radio Buttons
      • 1.9 Up/Down Button (increase/decrease button)
        • 1.9.1 Item Parameters
        • 1.9.2 Assigning to Equipment
        • 1.9.3 Operation Principles
      • 1.10 Level
        • 1.10.1 Item Parameters
        • 1.10.2 Assigning to Equipment
        • 1.10.3 Operation Principles
      • 1.11 Multistate Level (level with animation)
        • 1.11.1 Item Parameters
        • 1.11.2 Assigning to Equipment
        • 1.11.3 Operation Principles
      • 1.12 Circular level
        • 1.12.1 Item Parameters
        • 1.12.2 Assigning to Equipment
        • 1.12.3 Operation Principles
        • 1.12.4 Modes of a circular level
      • 1.13 Multistate circular level (circular level with animation)
        • 1.13.1 Item Parameters
        • 1.13.2 Assigning to Equipment
      • 1.14 Operation Principles
      • 1.15 Joystick
        • 1.15.1 Item Parameters
        • 1.15.2 Assigning to Equipment
        • 1.15.3 Operation Principles
      • 1.16 Edit Box
        • 1.16.1 Item Parameters
        • 1.16.2 Assigning to Equipment
        • 1.16.3 Operation Principles
      • 1.17 TextArea
        • 1.17.1 Item Parameters
        • 1.17.2 Assigning to Equipment
        • 1.17.3 Operation Principles
      • 1.18 Virtual key
        • 1.18.1 Item Parameters
        • 1.18.2 Operation Principles

    Types of graphic items, behavior in interface

    A graphic item is a control or display object located on a page or a popup of a visualization interface. Graphic items include labels, buttons, levels, joysticks, etc.

    This section contains key information about graphic items, their creation and customization of item behavior by changing the item type and its basic parameters.


    Types and purpose of elements

    The basic i3 pro interface item is a button. Behavior and display of all the objects that you see (labels, separators, sliders and keys) are originally based on the behavior of a regular button with additional properties. The type of an item describes these properties:

    Button
    button
    A button is an item that can be pressed. It has 2 variants of appearance: "unpressed" (false) and "pressed" (true). A command can be sent with a button press. A value that will be sent must ne written in the command, It can be a number or a string.

    With some settings the "pressed" state of a button means that a user pressed the button, and when the button is released it will return to the "unpressed" state. With other settings a button will change its state to "pressed" if it gets any value from equipment that is different from zero. The change of states can be turned off, and a button can be used as a Label.

    Label
    label
    Label is an item that is not pressed. It has only 1 variant of appearance.

    A label can be used ad a display of data, a text block or as a decorative item, an icon, etc.

    Multistate Button
    button with animation
    A multistate button differs from a button by having numerous variants of appearance. When it is pressed, of when data are received, it, like a button, changes its state from the "unpressed" (first) state into the "pressed" (last) state, while changing it displays all its intermediary states. The process of changing from the first to the last states is stop-motion animation. Animation can be stopped in an intermediary state (use Multistate Level for it). With certain settings animation can be cycled and it will go on as long as any non-zero value is sent to a button or as long as an interface works.
    Trigger Button
    trigger button
    Trigger button is an item that can be pressed and it gets fixed in one of the two states: "turned off" (Value 1) and "turned on" (Value 2) at each press and it sends these values to equipment. When data are received a trigger changes its state to turned off if the received value agrees with Value 2
    This type of item will work correctly only if it has feedback about the current state of the controlled value (write Feedback from equipment in the Value of a Trigger Button, for it to calculate the value correctly).
    Up/Down Button
    increase/decrease button
    Up/Down button is an item that can be pressed, it has two states "unpressed" and "pressed". Its behavior is similar to a Button in appearance, but it is used to send to equipment values that are increased or decreased in comparison to the current value. With each press and Up/Down button takes the current value, changes it by a set value and sends it to equipment. Typical use: control of temperature +/- 1 degree and other tasks where a variable must be changed by a certain step.
    It's the only type of graphic item that won't work correctly if it does not have feedback about the current state of the controlled value (write Feedback in the Value of and Up/Down item for it to calculate the value correctly).
    Level
    a level with a sliding bar
    A level is an item with a moving sliding bar. It has two types of appearances: "unfilled" and "filled". A bar substitues one state with another one by moving along the level from end to end. Max and min values between which a sliding bar moves must be defined for a level. The position of a sliding bar determines a value that is sent to equipment (when a slider is moved with a cursor or finger) or a value that must be displayed when it comes from equipment. The movement of a slider is linear, for a circular motion there is Circular level item.
    Multistate Level
    level with animation
    A multistate level differs from a regular linear one in the number of variants of appearance that do not replace each other but are changed one after another when a slider is moved between Min and Max. A unique state may correspond to each value or range (if there are fewer states than values) The appearance of such a level may not differ from a button. For example, create a multi-state level with a range from 0 to 3 to display work modes of a fan. Add 4 states to it and add a pictogram of a mode to each state. When data are received the level will show a pictogram that corresponds to a value. Levels usually contain numerous states (corresponding to a range).
    Circular Level
    circular level
    Like a regular Level a Circular level can send/display values within a set range. But changes of value happen when a slider is moved circle-wise or within a sector.
    Multistate Circular Level
    circular level with animation
    Multistate circular level has properties of a circular level and a multistate one. It has numerous variants of appearance that change one another when a slider is moved circle-wise. A unique state can correspond to each value or range (if there are fewer states than values)
    Joystick
    joystick
    Joystick is a two-coordinate level that generates ValueX and ValueY when a cursor is moved in an area limited by ranges of X and Y axes. The important peculiar feature of a joystick is a capability to get the current value of the color under the cursor. If an image with a palette is placed on a joystick, when it is controlled, it returns the color under the cursor that can be split into RGB components and sent to RGB-dimmer.
    Edit Box
    edit box
    An edit box is a rectangular window where text can be entered and edited from the keyboard. An edit box has two states "non selected" and "selected" that is activated when a cursor stands in the edit box. The entered text can be sent by pressing Enter or by a separate button that takes a value from the edit box and sends it where it is required.

    TextArea
    a field to enter text

    Text area is a graphic item that is similar to an Edit Boх with a capability to enter text in several lines. The text is broken into lines by spaces. If the text exceeds the limits of the field, scrolling appears. The item can be scrolled with the help of a scroll bar or a swipe.
    This item has an improved Helper. When it is called the following modes appear without selection: Paste. Select, Select All. When it is called with selection the following modes appear: Paste, Copy, Cut.

    Virtual key
    virtual key
    A virtual key is an item to create a custom keyboard. You can create a keyboard of any kind and configuration based on a virtual key in iRidium project. A virtual key send a value to an active field to enter text (Edit Box or TextArea).
    List
    dynamically filled list
    A list is a scroll list that can be filled with numerous items, a popup is used as a template for these items. The contents of each item is filled from the script and can be changed in the process of project work. It's easy to work with a list via the script, but it does not support replacing items, adding items to the beginning or to the middle of the list (the whole contents must be updated).
    Static List
    list of popups
    A static list is an item to navigate in a project that allows to place numerous popups on one page and move between them with the help of gestures. A static list looks like a graphic item on a page or a popup. The settings of a static list include a list of used popups and their order. If a popup is in a static list, it can't be used independently or in another list (technical limit).
    Advanced List
    improved dynamically filled list
    An advanced list is also controlled via script. It works well with very many items and allows to add items to any position of the list, but it takes more time to learn to work with it.
    Picker
    picker
    A picker allows to scroll a list of items, change their number and information in them. A picker can be created only with the help of script: see. Picker API. The main use is setting date and time.
    Linear Trend
    linear trend
    A linear trend is a graph points, variabe values, on which are connected with a line. A linear trend can display graphs of changes of several variables within a set range of time and values. A linear trend gets data from iRidium server database of from an external SQL database (in case with an external database a script is required). i3 pro can't store its own database, that's why trends are available only when a server or an external database is used. Several parameters of a linear trend are available for editing via the script.
    Pie Chart
    pie chart
    A pie chart is divided into fragments (sectors) to illustrate a proportion. The length of the outer part of each sector corresponds to the value it represents. The chart is filled in from the script.
    Bar Chart
    bar chart
    A bar chart displays comparison of several values presented by rectangles, the height (length) of rectangles is equal to values they represent. The chart is filled in from the script.


    Creation of Graphic Items

    Creating a visual project is a process of drawing items and its programming on pages and popups.

    Drawing with the help of the "Draw" tool

    How to select a drawing tool:
    1 Select and Draw buttons are olocated in the side tool panel to switch between selecting and drawing items. Hold the Draw button to choose a type of item you will draw by default.
    2 The Select and Draw buttons are repeated in the menu of the right mouse button when you click in the workspace iRidium studio.
    3 Holding and a combination of keys:

    • Hold L - draw a label in the workspace.
    • Hold B - draw a button in the workspace.
    • D + Ctrl - press once to switch to drawing.
    • Esc - press once to switch to Select.

    Full list of Hotkeys review of iRidium Studio 2019.


    When a drawing tool is selected, the cursor in the work space of the editor looks like a cross. Left-click and stretch the area in the work space to draw an item of any size.

    Turn on the Select tool to finish drawing and return to the item selection mode in the work space.

    DrawItem.png

    A drawn item will have a standard appearance which can be changed in the Settings of iRidium studio: Tools> Options> Project style.

    General Settings of Items

    General settings are settings that are available to every item in the studio.

    Basically, item behavior is determined by its type but it reaction to pressing and receiving data and ability to change states are configured after selecting an item type.

    A type of item and its settings are available in the General tab of the Project window or on the dynamic panel of iRidium Studio:

    General1.png


    Name
    the name of an item
    The name of an item is a unique identifier of an object, when it calls an item via JavaScript or when macros are set in iRidium Studio.
    X / Y
    item coordinates
    X and Y coordinates of an item are calculated from the top left corner in pixels.
    Width / Height
    The width / height of an item
    The width and height of a graphic item in pixels.
    Type
    item type
    You already know this setting - an item type. It defines the number of states and values that an item can send. Select the item type that according to the description is the most suitable for your task
    Feedback
    feedback
    It defines if an item will react and "change its state", when it is pressed, when a value comes from equipment or it won't change its state at all.
    Change of state - is only a visual quality, an item with any Feedback will send commands and (or) change its value . Types of Feedback:
    • None - do not change the state either when an item is touched or when data from equipment are received
    • Momentary - change the state when the item is touched
      • if it is Button, Trigger Button, Up/Down Button, Multistate Button, "pressed" state is turned on when an item is touched. "Unpressed state" is turned on when an item is released. An item does not react to receiving data
      • other types of items have either one state or a more complicated structure that's why they ignore the Feedback property
    • Channel - change the state when data from equipment are received
      • If it's Button, Up/Down Button, Multistate Button, the "pressed" state is activated when a value different from zero comes.
      • If it's Trigger Button, states will change each other at each press, as a trigger changes Value every time. When data are received a trigger changes its state to a "turned on" one if the value is equal to its "Value 2".
    • Invert Channel - change the state when data from equipment are received but the logic of state change is inverted:
      • Button, Up/Down Button, Multistate Button change to "turned on" state when 0 is received and they are in the "turned off" state when any value but 0 comes
      • Trigger Button displays "turned on" state if "Value is 1", it displays "turned off" - if "Value 2"
    • On - an item changes to a turned on state the moment a project is launched. The "On" type of Multistate Button allows to play animation one time the moment the app is started (Loop animation: false) or to play animation in a cycle all the time the app works (Loop animation: true)
    • Blink - an items changes to a turned off state when any value but 0 comes
    Visible
    display an item
    Display of items is enabled by default. If you turn off the display, then when you start i3 pro, the item will be completely hidden. The display of an item can be controlled during the work of i3 pro through the Visible property
    Enable
    enable pressing
    If you disable pressings, the item will be blocked - it will stop responding to touch and sending commands configured in Programming. But it will continue to display data received from the equipment. The color of the blocked item changes - it is displayed in shades of grey
    Hit
    area and type of press
    By default all the area of an item is available to press (Bounding Box). Variants:
    • for buttons:
      • Bounding Box – an item processes a press on any area, including a transparent one
      • Pass Through – «transparent» for presses, presses on an item are not processed at all. Presses are processed by an item located a layer below. This item only displays values
      • Touch on Fill - presses on any non-transparent area of an item are processed. Presses on transparent area are not processed (they are processed by an object located a layer below)
    • for levels:
      • Bounding Box (earlier: Active) – all presses on a level are processed
      • Pass Through (earlier: Display Only) – «transparent» for presses, presses on an item are not processed. Presses are processed by an object a layer below. This item only displays values
      • Active Centering - only one-time presses are processed, a slider moves to the place where an item is pressed, and when it is released it comes back to the middle of the scale
      • Drag – a slider changes its position only when it is moved. One-time presses are not processed, dragging can start from any point of a level (see Drag Slider as an alternative to this type of press)
      • Drag Slider - works only when the slider is set as Custom (an image is used as a slider). The position of a custom slider is changed only when the slider itself is dragged! If a level is located on Static list, it helps to avoid false activation when a list is scrolled
      • Drag Centering – the position of a slider is changed only when it is dragged, the movement starts from the center of the scale, when a slider is released it comes back to the center of the scale
      • Touch on Fill - обрабатывается нажатие на любую непрозрачную область элемента. Нажатие на прозрачную область не обрабатывается (будет обработано объектом, находящимся слоем ниже).
    Tags
    tags
    Name to search for a graphic item or a group of items via the search line.


    Special Settings Defined by Item Type

    Special settings are settings of an item that do not refer to all other types of items and they give an item individual special behavior.


    Button


    Button is a graphic item that has 2 states. Each button press initiates sendinf one and the same commands, that are assigned to it. For example, a button can turn on light by sending "100" value to the channel, and another button can turn it off nu sending "0" value.


    Parameters of Item

    Button.png
    Type Button
    Feedback Reaction of a button to a press and getting data from equipment:
    • Momentary - a button switches on the on-state when it is pressed and returns to the off-state when it is released, it does not display feedback;
    • Channel - a button switches on the on-state when it is pressed and returns to the off-state when it is pressed again, it displays feedback;
    • None - visually a button does not react to pressed of getting feedback,
    • Invert Channel - a button switches to the off-state when it is pressed and it returns ti the on-state when it is pressed again, it displays feedback invertly (false - on, true - off).
    PasswordID You can select here 1 of 4 system passwords that a Button will ask when it is pressed. A button won't do commands assigned to it (PROGRAMMING), unless a password is entered. Passwords must be set in project settings.
    Hold Time Time (in ms.),during which a button must be held for the Hold event to work.
    Repeat time Repetiion period (in ms.), with which the Hold event will work all the time while a button is held


    Assigning to Equipment

    Drag'n'drop a variable onto a button and enter the following in the dialogue window:

    Button2.png
    Send to command Number - write a number in the variable. It can be switched to String to send an ASCII line.
    Event for Action An event in the interface connected with a button. When an event happens, a set value will be written in the variable:
    • When pressed - send when a button is pressed,
    • When released - send when a button is released,
    • When held - send in a cycle when a button is held,
    • After holding - send after end of hold.


    Several events can be used at a time. For example, send [ 100 ] by press and [ 0 ] by release.

    Value A value to write in the variable. A button always sends one and the same set value.
    Delay A delay with sending a value after an event is activated. If is required. activate a delay and set delay time in milliseconds.
    Assign feedback channel (Create a feedback channel) Put a tick here, if it is required for a button not only to write a value in the variable but also to change its state when receiving data from the same variable. The received value influences a button state (on/off) and can be displayed in its text field.

    Use feedback, to display a value on an item as a number:

    1. enter a template in the text field of an item,
    2. drag'n'drop Feedback on an item, "In Value":


    LIST OF TEMPLATES

    Template Function
    $V the integer part of the received value
    $F1 ... $F5 float value. From 1 to 5 - number of symbols after a point
    $F,1 ... $F,5 float value. From 1 to 5 - number of symbols after a comma
    $S current Item state number
    $X the value in the HEX type
    $$ the $ symbol
    $P (levels only) the current value in percentage of Level maximum
    $H (levels only) the upper Level value
    $A (levels only) the upper value minus the lower value of Level
    $L (levels only) the lower Level value
    $R (levels only) the Level range: the upper value minus the lower value


    A template is entered into the text field of a graphic Item and can be combined with other text or symbols (comments, units of measurement)

    • Download: templates of value output (0,7 Mb)


    Now a variable is assigned to a button. You can see all relations of a button in the Programming window.


    Operation Principles

    1. When a Button is pressed, it takes a value from the Value field set in a dialogue of assigning a variable, and sends it to equipment.
    For example, if "100" is entered in the Value field, when a button is pressed a dimmable lamp will be turned on to 100% brightness.
    2. When a button is pressed (held) it changes its state to the second one, and when a button is released, it returns to the first state. This behavior is typical for buttons of a smartphone keyboard.

    example
    DOWNLOAD



    Label


    Label is a graphic item that has one state. It works with commands like a regular button, but it does not display the fact of pressing it and it does not change its stare when feedback is received. For example, a label can be used as an inscription to an item (button, level, etc.) or a group of items.


    Item Parameters

    Label.png
    Type Label
    PasswordID You can choose here 1 of 4 system passwords that the label item will require when it is pressed. Label won't do commands assigned to it in (PROGRAMMING), unless a password is entered. The passwords themselves are set in project settings.
    Hold Time Time (in ms), during which a label must be held for the Hold event to work .
    Repeat time Time period (in ms.), in which the Hold event will work all the time while an item is held.


    Assigning to Equipment

    If you want to use a label as a button with one state, drag'n'drop a variable on a button and choose the following in the dialogue to assign a variable

    Label2.png
    Send to command Number - write a number in the variable. It can be switched to String to send an ASCII line.
    Event for Action An event in the interface connected with a button. When the event happens, the set value will be written in the variable:
    • When pressed - send when a button is pressed,
    • When released - send when a button is released,
    • When held - send in a cycle when a button is held,
    • After holding - send after the end of hold.


    Value A value to write in the variable. A button always sends one and the same value written in the Value field.
    Delay Delay in sending a value after an event is activated. If it is required, activate a delay and set the time of delay in milliseconds.
    Assign feedback channel (Create a feedback channel) Put a tick if it is required for a button not only to write a value in the variable but also to display values that come from equipment.

    Use feedback, to display a value on an item as a number:

    1. enter a template in the text field of an item,
    2. drag'n'drop Feedback on an item, "In Value":


    LIST OF TEMPLATES

    Template Function
    $V the integer part of the received value
    $F1 ... $F5 float value. From 1 to 5 - number of symbols after a point
    $F,1 ... $F,5 float value. From 1 to 5 - number of symbols after a comma
    $S current Item state number
    $X the value in the HEX type
    $$ the $ symbol
    $P (levels only) the current value in percentage of Level maximum
    $H (levels only) the upper Level value
    $A (levels only) the upper value minus the lower value of Level
    $L (levels only) the lower Level value
    $R (levels only) the Level range: the upper value minus the lower value


    A template is entered into the text field of a graphic Item and can be combined with other text or symbols (comments, units of measurement)

    • Download: templates of value output (0,7 Mb)

    Now a variable is assigned to a button. You can see all relations of a button in the Programming window.


    Operation Principles

    1. When a label is pressed, it does not change its state, but it takes a value from the value field set in the dialogue window of assigning a vriable, and sends it to equipment.
    2. An item can display values that come from equipment in the text format. For example, values of temperature or air humidity.



    Multistate Button (button with animation)

    Multistate Button is an animated button that works with commands just like a regular button. But when it is pressed (or when feedback is received) it plays animation. For example, an animated button can be used to draw attention to a button in an interface (blinks, display of slides right on a button).


    Item Parameters

    MB1.png
    Type Multistate Button
    Feedback Button reaction to a press by a user and to getting data from equipment:
    • None - no visual reaction to presses or getting feedback,
    • Momentary – animation starts when a button is pressed. When a button is released, animation is played in the reverse order.

    Repeat: True - animation won't stop till a button is released.

    • On – animation starts at the moment of project launch.

    Repeat: True - animation won't stop as long as a project is launched (endless cycle).

    • Blink / Channel – animation starts when any value but 0 comes from equipment.

    Repeat: True - animation won't stop unless 0 is received.

    • Invert Channel - animation starts when 0 is received from equipment.

    Repeat: True - animatios won't stop till a non-zero value is received.

    PasswordID Here you can choose one of 4 system passwords that a Button will ask when it is pressed. The button will not do commands assigned to it in (PROGRAMMING), until a password is entered. The passwords must be set in project settings.
    Time Up / Time Down (tenth of a second) the speed of playing animation from the first shot to the last one and backwards
    Repeat continuous repetition of animation when an item is in the active state.
    Hold Time period of time (in ms) during which a button must be held for the Hold event to work.
    Repeat time periodicity (in ms.), with wich the Hold event will work as long as a button is held.
    Default Value a default value that will be assigned to a button when the app is launched.


    Assigning to Equipment

    MB2.png
    Send to command Number - write a number in the variable. It can be switched to String to send an ASCII line.
    Event for Action An interface event connected with a button. When the event happens a set value will be written in the variable:
    • When pressed - send when a button is pressed,
    • When released - send when a button is released
    • When held - send in a cycle when a button is held,
    • After holding - send after the end of hold.


    Several events can be used simultaneously. For example, [ 100 ] can ne sent by press and [ 0 ] can be sent by release.

    Value A value to write in the variable. A button always sends the same value written in the Value field.
    Delay Delay before sending a value after an event is activated. If it is required, activate a dealy and set time in milliseconds.
    Assign feedback channel (Create a feedback channel) Put this tick if it is required for a button not only to write a value in the variable, but also to change its state when data are received from this variable. The received value will influence the state of a button (on/off) and play of animation.

    Now a variable is assigned to a button. You can see all relations of a button in the Programming window.


    Operation Principles

    1. In the (Feedback: On, Repeat: True) endless cycle a button will play animation changing its states with a set period of time (Time Up / Time Down).
    An example of such a button is blinks on a company logo.
    2. If a button is activated by holding it (Feedback: Momentary, Repeat: True) , the states will change one another as long as a button is held, and changes will stop when a button is released.
    For example, such a button can be used to, if they are closed / opened by holding a button.
    3. If a button is activated by getting non-zero values from equipment (Feedback: Blink / Channel, Repeat: True), changes of states will start when any non-zero value, for example, 1 comes from equipment and changes will stop if 0 is received
    Such a button can be used to display the speed of a fan.


    example
    DOWNLOAD




    Trigger Button


    Trigger Button is a button that sends 2 values set in Value 1 and Value 2 one after the other. If there is feedback, a trigger automatically displays a required state and send a value that is contrary to the current one when it is pressed. A trigger can't work with 3 or more values. An example of such a button is a button to turn on/off light, warm floors, a conditioner, etc.

    Item Parameters

    Trigger.png
    Type Trigger Button
    Feedback Reaction to being pressed and getting data from equipment:
    • None - no visual reaction to presses or getting feedback from equipment,
    • Channel - a button switches to the on state when it is pressed and returns to the off state when it is pressed a second time. It displays feedback,
    • Invert Channel - a button changes its state to the off one when it is pressed and returns to the on state when it is pressed on more time. It displays feedback in an inverted way (false - off, true - on).
    • Channel Only - the button switches to the on state only when the value from the feedback channel matches the value specified in Value 2. The button switches to the off state only when the value from the feedback channel matches the value specified in Value 1.
    UndefindedValueSet Button response to feedback values other than Value 1 and Value 2
    • None - does not change state
    • Off - changes state to Off
    • On - changes state to On
    Value 1 / Value 2 Values that are sent to a variable when a trigger is pressed.
    Default Value A default value that is assigned to a trigger when the app is launched.
    Hold Time period of time (in ms) during which a button must be held for the Hold event to work.
    Repeat time periodicity (in ms.), with which the Hold event will work as long as a button is held.
    Send Value By Sending a value when an event happens:
    • Send Value by Press - sending a value when a button is pressed,
    • Send Value by Release - sending a value when a button is released,
    • Send Value by Hold - sending a value when a button is held.

    Assigning to Equipment

    Drag'n'drop a variable onto a trigger and enter the following in the dialogue window:

    Trigger2.png
    Send to command Value from object - send to a variable a value taken from the graphic item (Trigger Value 1 or Value 2, depending on the current state of a trigger)
    Event for Action an event in the interface connected with a button. When the event happens happens, a set value will be sent to the variable:
    • When pressed - send when the item is pressed,
    • When released - send when the item is released,
    • When held - send in a cycle when the item is held,
    • After holding - send after end of hold.



    Only one event can be used for a trigger semultaneously.

    Assign feedback channel (Create a feedback channel) Put this tick as it is required for a trigger to know its state and change it when data from a variable are received and when it is pressed.

    Now a variable is assigned to a trigger. You can see all relations of the trigger in the Programming window.


    Operation Principles

    1. A button reads a value from a feedback channel of a variable and compares it to values in Value1 and Value2.
    2. If a value matches, the button changes its state to the corresponding one (Value1 = Off, Value2 = On). If there comes a value that is not entered in Value1/Value2, the buttons takes on a value set in DefaultValue.
    For example, Value1 = 0, Value2 = 1, the light is turned on and 1 comes to a feedback channel, the button changes it state to the On one.
    3. When aTrigger Button is pressed, it changes its state to the opposite one, and a value corresponding to this state (Value1 = Off, Value2 = On) is sent to equipment
    For example, when a button is pressed, 1 is sent to a channel, the light is turned on and the button changes its state to the On one.
    4. A button can be set like a Radio Button. In this case several Trigger Buttons are united by one logic. When one item from this group is pressed, all other items change their states to inactive ones.
    Such behavior of buttons can be seen when a flag is put to an item in a list.

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


    example
    DONWLOAD



    Radio Buttons

    A radio button is an interface item which allows to select one of the preset options. In iRidium Radio Buttons are not separated as an item type as they can be set up on the basis of a Trigger Button. The task of Radio Buttons is to send to variables values from different buttons from which you can select only one.

    Settings and behavior of a radio button depend on the equipment variable you work with. Here are several cases and examples of setting.

    variant 1 Radio buttons to control one variable with a capability to get feedback. Values are written in one variable; equipment returns the current state of this variable.

    1. Set as many Trigger Button items (see the image) as there are Radio Buttons. In the Trigger Value 1 and 2 fields enter identical values corresponding to those ones that each button must send to a controlled variable. In the Feedback field, specify Invert Channel.
    2. Drag'n'drop a command to control a variable on all Radio Buttons. Select the Press or Release events for sending, tick Add A Feedback Channel to display the status of the variable.


    RB1.png
    RB2.png

    the set button will change its state to State 2 only when the variable received a value entered in Value 1 or 2.

    variant 2 Radio buttons to control variables with a capability to get feedback. On/off values are written in differed variables; equipment returns the current state of these variables. Variables are nor synchronized with automation equipment to work in the radio buttons mode (inactive modes must be turned off by iRidium):

    1. Set items Type: Trigger Button, Feedback: Channel, enter Value 1 = inactive, Value 2 = active state of the variable (for example, 0/1, 0/100).
    2. Drag'n'drop commands to control variables on graphic items. Here is an example of the first item of the group:
      1. Send zero to all variables that are in the group of radio buttons to turn off the current active mode. To do it, choose the following in the dialogue to send a command Action: Send Number.
      2. Add a Delay(50) ms via the macros editor of Press event, to give equipment time to turn off the active mode.
      3. Drag'n'drop a control command that correspond to a radio button on a graphic item. Keep Action: Value from object. Value on event When pressed (or When released), put this tick (it's obligatory) Assign feedback channel.


    RB3.png
    RB4.png

    If modes of equipment work are synchronized by equipment (when one mode is on, the other modes are automatically turned off), you do not have to send zeros to the variables that are turned off. Do steps 2.3 of the settings.




    Up/Down Button (increase/decrease button)

    Up/Down button is used for a step by step change of variable values by at a set value when it is pressed or held. It works only if a device has a feedback channel. For example, the brightness of light can be increased/decreased by 15, when a button is pressed and by 25 when a button is held.

    Item Parameters

    UpDown1.png
    Type Up/Down Button
    Feedback Reaction of a button to being pressed by a user and to receiving data from equipment:
    • Momentary - a button changes its state to On when it is pressed, and it returns to the off state when it is released, It does not display feedback.
    • None - no visual reaction to presses or receiving feedback.
    Step Step of increasing / decreasing (can be more or less than zero).
    Limit The limit of increasing / decreasing (the min limit for a negative step, the max limit for a positive one).
    Hold Value The limit of increasing / decreasing when Hold event is activated. A command to control equipment can be assigned at the same time to Press and Hold, and a value will increase when a button is held.
    Send step by Work mode of a button meter:
    • Press - changes the meter by a button press irrespective of the event type;
    • Default - changes the meter depending on the event entred in the Programming window (only Press and Release).
    Hold time (ms) A period of time to hold a button for the Hold event to work.
    Repeat time (ms) The frequency of repetition of the Hold event.


    Assigning to Equipment

    Drag'n'drop a variable onto a button and enter the following in the dialogue window:

    UpDown2.png
    Send to command Value from object - send to a variable a value that is calculated as the sum of the current variable value and the step value.
    Event for Action An event in the interface connected with a button. When an event happens, a calculated value will be written in the variable:
    • When pressed - send when an item is pressed,
    • When released - send when an item is released,
    • When held - send in a cycle when an item is held,
    • After holding - send after the end of hold.



    Two events can be used simultaneously.

    Assign feedback channel (Create a feedback channel) Put this tick as it is required for the Value to be calculated according to the current state of the variable.

    Now a variable is assigned to an UP / Down button. You can see all relations of a button in the Programming window.

    Operation Principles

    1. When an Up/Down button is pressed, it takes a value from a feedback channel of the variable.
    For example, the lamp brightness is 45%, and the value in the channel is also 45.
    2. After it a value from the «UpDownStep» field is added to the value from the channel «UpDownStep».
    For example, it is «-10». 45 +«-10» = 35.
    3. The resulting value (35 in our example) is sent to a channel assigned to the button.
    4. When a button is held, a value from the «Up Down Hold Step» field is added to the value from the channel.
    For example, it is «-25». 45 +«-25» = 15.
    5. Is the value to send is large than the value in the «Up Down Limit» filed, a value from this field is sent. After is a button stops sending data until a value in the feedback channel changes.

    example
    DOWNLOAD



    Level

    Level is a graphic item with a slider. When a level is pressed or when a slider is moved along a level, the level send to a variable a number corresponding to the current position of a slider. For example, when a slider stops on the 25 value of a level, a dimmable lamp will turn on with 25% percent brightness.

    Works only if the device has a feedback channel.


    Item Parameters

    Level1.png
    Type Level
    Feedback Reaction of a level to being pressed by a user and to getting data from equipment:
    • Channel - a slider moves when data are received from a feedback channel of a variable or when it is moved manually.
    Min / Max Limits of a level: determine a range of values where a slider moves
    Direction Direction of a level:
    • Vertical - the slider of a level moves vertically,
    • Horizontal - the slider of a level moves horizontally.
    Range Type of values to send:
    • Integer - integer values,
    • Float - fraction values.
    Invert The upper and the lower part of a vertical level change places, thus, changing values from 0 to 100 will happen not from bottom to top, but from top to bottom.
    Slider1 Cursor Choice of a coursor for a level:
    • None - do not use a cursor,
    • Custom - use a cursor from a personal gallery
    • Choice of a cursor from standard ones in the list.
    Slider1 Cursor Color The color of a lever cursor .
    Slider1 Cursor Image Upload an image for a level cursor (only for Slider1 Cursor - Custom).
    Slider1 Cursor Scale Proportions to display a level cursor (only for Slider1 Cursor - Custom):
    • Proportional - set an image on a cursor proportionally to the size of a level,
    • None - set an image on a cursor saving the original size.


    Assigning to Equipment

    Drag'n'drop a variable onto a level and enter the following in the dialogue window:

    Level2.png
    Send to command Value from object - send to a variable a value take from the current position of a level slider in the range between Min...Max.
    Event for Action An event in the interface connected with the item. When the event happens, a set value is written in the variable:
    • When pressed - send a value when a slider is pressed,
    • When released - send a value when a slider is released,
    • When moved - send intermediate values when a slider is moved.
      Add the Delay command (100) before a command of the Move event, to decrease the load of equipment (with the Delay command, a Move event will work once in 100 ms).



    All three events can be used at the same time.

    Assign feedback channel (Create a feedback channel) Put this tick, as it is required for a level slider to move according to the current state of the variable

    Use feedback, to display a value on an item as a number:

    1. enter a template in the text field of an item,
    2. drag'n'drop Feedback on an item, "In Value":


    LIST OF TEMPLATES

    Template Function
    $V the integer part of the received value
    $F1 ... $F5 float value. From 1 to 5 - number of symbols after a point
    $F,1 ... $F,5 float value. From 1 to 5 - number of symbols after a comma
    $S current Item state number
    $X the value in the HEX type
    $$ the $ symbol
    $P (levels only) the current value in percentage of Level maximum
    $H (levels only) the upper Level value
    $A (levels only) the upper value minus the lower value of Level
    $L (levels only) the lower Level value
    $R (levels only) the Level range: the upper value minus the lower value


    A template is entered into the text field of a graphic Item and can be combined with other text or symbols (comments, units of measurement)

    • Download: templates of value output (0,7 Mb)



    Now a variable is assigned to a level. You can see all relations of the level in the Programming window.


    Operation Principles

    A level can be used both to control an item and to display values from a feedback channel. For example, when a slider is pressed or moved, a value from the level is sent to equipment. When a slider is set at 25, a dimmable lamp is switched on with 25% brightness. When a lamp is dimmed manually, a value comes to a feedback channel and it is displayed on a level.


    example
    DOWNLOAD




    Multistate Level (level with animation)


    Multistate Level is a graphic item that has more than 2 states. A press on a level sends to a variable a number that corresponds to the current position of the slider. But there is no level as it is. Instead of it a level displays one of its states that corresponds to the selected value or a range of values. Each state of a multistate level can have its own image, text, color. For example, such an image can be used to display the connection status of equipment (online, offline, waiting for connection).


    Item Parameters

    ML1.png
    Type Multistate Level
    Feedback Reaction of a level to being pressed by a user and to getting data from equipment:
    • Channel - states are changed when a multistate level is pressed and when data are received.
    Min / Max Limits of a level: determine a range of values within which a multistate level works.
    Direction Direction of a level:
    • Vertical - the slider of a level moves vertically,
    • Horizontal - the slider of a level moves horizontally.
    Invert The upper and the lower part of a vertical level change places, thus shots are changed from the last to the first one.


    Assigning to Equipment

    Drag'n'drop a variable on a level and enter the following in the dialogue tp assign a variable:

    ML2.png
    Send to command Value from object - send to a variable a value taken from the current position of the slide of alevle in the Min...Max range.
    Event for Action An event in the interface connected with the item. When the event happens, a set value is written in the variable:
    • When pressed - send a value when a slider is pressed,
    • When released - send a value when a slider is released,
    • When moved - send intermediate values when a slider is moved.

    Add the Delay command (100) before a command of the Move event, to decrease the load of equipment (with the Delaycommand, a Move event will work once in 100 ms).

    All three events can be used at the same time.

    Assign feedback channel (Create a feedback channel) Put this tick, as it is required for a level slider to move according to the current state of the variable.

    Now a variable is assigned to a level. You can see all relations of the level in the Programming window.


    Operation Principles

    1. A level take a vlue from a feedback channel of a variable and displays a state which number corresponds to the value of the variable.
    For example, a lamp is on with 45% brightness, a value in the feedback channel is 45 and the level display state 45.
    2. If the max number of level values is more than the number of states, a level considers the maximum as 100 % and displays a corresponding state. For example, a value receives values from 0 to 100, and the number of states is 50. When the value of 40 is received from the feedback channel of a aribale, the level displays State 20. 3. When the slider of a level is pressed or moved, a value from the level is sent to equipment.
    For example, by setting the slider of a level at 25, a dimmable lamp is turned on width 25% brightness.


    example
    DOWNLOAD


    Circular level

    Circular level is a type of levels where a slider moves clockwise or counterclockwise. When a slider is pressed or moved along a level it sends to the variable a value that corresponds to its current position. It works only if a device has a feedback channel. For example, when the value of 25 is set on a level, a dimmable lamp is tuned on with 25% brightness.

    Circular level00.png

    Item Parameters

    CircularLevel.png
    Type Circular Level
    Feedback Reaction of a level to user pressing and to getting data from equipment
    • Channel - sends a value and displays feedback (a slider moves when data are received)
    Level Mode Modes of a circular level:
    • Simple (with one slider and one active zone),
    • Double (with two sliders),
    • Triple (with three sliders),
    • Looped (endless).
    Level Min Angle / Level Max Angle Limits of the rotation angle of a slider in degrees: admissible values are from 0 to 360, the start and the direction of the rotation angle is 12 of a clock-face. You can set values for "Level Min Angle" / "Level Max Angle" equal to 0 and 360, in this case a circular level will rotate without angle limits.
    Min / Max Limits of changing the level value
    Invert Direction of level rotation:
    • False - clockwise,
    • True - counterclockwise.
    Range Type of range:
    • Integer - integer
    • Float - floating point
    Active Zone The size of an active zone in per cent from 0 to 100:
    • 100 - the whole squire of a circular level is an active zone,
    • 0 - no active zone, only the zone of a slider (sliders).
    DrawFullFirstState Displaying the inactive sector of a circular level:
    • False - a circular level is not displayed in the inactive sector,
    • True - a complete circular level is displayed (Empty state is displayed in the inactive sector).
    Slider1 Cursor Slider appearance
    Slider1 Cursor Color The color of a slider
    Slider1 Cursor Image Slider images are located in project gallery (a slider must be pointed to the top). This property is available when "Custom" is selected in the "Slider1" Cursor property.
    Slider1 Offset A slider image can be moved in pixels along the slider axis from the center of a circular level to its upper point. It is always a nonnegative value.
    Slider1 Cursor Scale Adjusting a slider image to the size of a circular level:
    • None - save the original size of an image,
    • Proportional - change the size of an image proportionally to the size of a circular level.


    Assigning to Equipment

    Drag'n'drop a variable onto a level and enter the following in the dialogue window:

    CircularLevel2.png
    Send to command Value from object - send to a variable a value taken as the current position of the level slider in the Min Value...Max Value range.
    Event for Action An event in the interface connected with the item. When the event happens, a set value is written in the variable:
    • When pressed - send a value when a slider is pressed,
    • When released - send a value when a slider is released,
    • When moved - send intermediate values when a slider is moved.

    Add the Delay command (100) before a command of the Move event, to decrease the load of equipment (with the Delay command, a Move event will work once in 100 ms).

    All three events can be used at the same time. .

    Assign feedback channel (Create a feedback channel) Put this tick, as it is required for a level slider to move according to the current state of the variable.

    Now a variable is assigned to a level. You can see all relations of the level in the Programming window.


    Operation Principles

    1. A level takes a value from the feedback channel of a variable.
    For example, a lamp is on with 45% brightness, and the value in the channel is also 45.

    2. When a slider is pressed or moved along the circular axis, a value from the level is sent to equipment.
    For example, if the slider of a level is set at 25, a dimmable lamp is turned on with 25% brightness.

    3. A circular slider has several modes:

    • Simple - a simple circular slider that can be used to control volume, light, etc.
    • Looped - an endless circular level.

    This level is convenient to use if an exact value must be set.
    For example, it can be used to set sound volume (values from 0 to 100 ), if the value is 60 music is quiet, when the value is 65, it is too loud, and 62 is the most suitable value. It can be difficult to set intermediary values on a simple circular level. In this case a endless level can be used.

    • Double - a level with two values.

    It can be used, for example, to set a temperature sensor. In this case one value is the set temperature of a sensor and the other value is the current temperature in the room. Heating will work until it reaches the set temperature.

    • Triple - a level with three values.

    An example of use is the same as an example for a double circular level. But in the triple mode 3 values can be set: min, max and current temperature.


    example
    DOWNLOAD

    Cl demo01.png
    Cl demo02.png
    Cl demo03.png
    Cl demo04.png
    Cl demo05.png
    Cl demo06.png


    Modes of a circular level

    Simple - a simple circular level can be used to control volume, brightness, etc.

    Circle slider01.png

    Looped - endless circular level
    This level is convenient to use if it is required to set an exact value. When this mode is chosen there appears “Changing Angle” property that sets the number of full turns to reach the max value.
    For example, it can be used to control volume (level values from 0 to 100). When the value is 60 music is quiet, and it is too loud when the value is 65, and 62 is the most suitable value. It can be difficult to set intermediary values on a simple level. In this case an endless level can be used.

    Circle slider02.gif

    To do it, select a required mode of a circular level and set required values (2 - one turn = 50, 4 - one turn = 25, etc.) in "Changing Angle". 62 value can be easily set this way.

    CircularLevel3.png

    Double - a level with two values.

    Circle slider04.png

    It can be used, for example, to set a temperature sensor. In this case one value is the set (required) temperature and the other value is the current temperature. And heating will stop working only when the current temperature reaches the required one.
    To set it, do the following:
    1 Set Double mode

    CircularLevel4.png

    2 Set Pass Through in the Hit parameter of one of the values of a slider for a user not to be able to control it. This value will display the current temperature.
    3 Create a script. In the given example a Modbus device is used.

    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 - a level with three values.

    Circle slider06.png

    An example of using this mode is the same as in th Double mode, but this mode allows to set 3 values: min, max and current temperature. Thus, heating will be turned on when the temperature is min and it will be turned off when the temperature is max. Thus, control of temperature is a room can be totally automated.
    Setting this mode is very similar to setting the Double mode.
    1 Set Triple mode
    2 Set Pass Through in the Hit parameter of one of the values of a slider for a user not to be able to control it. This value will display the current temperature.
    3 Create a script. In the given example a Modbus device is used.

    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 (circular level with animation)

    Multistate circular level is a circular level that has more than 2 states. Changes of level values (turns or rotations) send to a variable a number that corresponds to the current position of a slider. But there is no slider as it is. Instead of it, the level shows one of its States, the one that correspond to the chosed value or a range of values. Each state on an animated level can have its own image, text and color. This level can be used to display the temperature of a thermostat, the brightness of light, the level of sound volume, etc.


    Item Parameters

    MS CircularLevel1(1).png
    MS CircularLevel1(2).png
    Type Multistate Circular Level
    Feedback Reaction to being pressed by a user and getting data from equipment:
    • Channel - sends a value and displays feedback (a slider moves when data are received).
    LevelMode Modes of a multistate circular level:
    • Simple (with one slider and one active zone),
    • Double (with two sliders),
    • Triple (with three sliders),
    • Looped (endless).
    Level Min Angle / Level Max Angle Limits of the rotation angle of a slider in degrees: admissible values are from 0 to 360, the start and the direction of the rotation angle is 12 of a clock-face. You can set values for "Level Min Angle" / "Level Max Angle" equal to 0 and 360, in this case a circular level will rotate without angle limits.
    Min / Max Limits of changing the level value.
    Invert Direction of level rotation.
    • False - clockwise,
    • True - counterclockwise.
    Range Type of range:
    • Integer - integer,
    • Float - floating point,
    Active Zone The size of the active zone in per cent, from 0 to 100:
    • 100 - all the square of a circular level is an active zone,
    • 0 - no active zone, only the zone of a slider (sliders).
    DrawFullFirstState Displaying the inactive sector of a circular level:
    • False - a circular level is not displayed in the inactive sector,
    • True - a complete circular level is displayed (Empty state is displayed in an inactive sector).
    Slider1 Cursor Slider appearance.
    Slider1 Cursor Image The image of a slider in the project gallery (a slider must be displayed with a pointer upwards). This property is available when setting Custom value in Slider property.
    Slider1 Offset A slider image can be moved in pixels along the slider axis from the center of a circular levelr to its upper point. It is always a nonnegative value.
    Slider Cursor Scale Adjusting a slider image to the size of a circular level:
    • None - save the original size of an image,
    • Proportional - change the size of an image proportionally to the size of a circular level.


    Assigning to Equipment

    Drag'n'drop a variable onto a level and enter the following in the dialogue window:

    MS CircularLevel2.png
    Send to command Value from object - send to a variable a value taken as the current position of the slider in the Min Value...Max Value range.
    Event for Action An event in the interface connected with the level. When the event happens, a set value will be sent to the variable:
    • When pressed - send a value when the level is pressed,
    • When released - send a alue when the level is released,
    • When moved - send all intermediary values when the slider is moved.

    Add the Delay (100) command to the When moved event, not to overload the equipment (with the Delay command the When moved event will work once in 100 ms).

    All three events can be used simultaneously.

    Assign feedback channel (Create a feedback channel) Put this tick as it is required for the level slider to move according to the current state of the variable.

    Now a variable is assigned to a level. You can see all relations of the level in the Programming window.


    Operation Principles

    1. Multistate circular level takes a value from a feedback channel of a variable and displays a state which number corresponds to the value of this variable.
    For example, a lamp is on with 45% brightness, the value in the channel is also 45 and the level displays state 45.
    2. If the max number of level values is more than the number of states. a level considers the max value as 100 % and displays states according to it.
    For example. a level receives values from 0 to 100, and the number of states is 50. When the value of 40 is received from the feedback channel of a variable, the level will display State 20.
    3. When the slider of a level is pressed or moved, the value from the level is sent to equipment.
    For example, if the slider of a level is set at 25, a dimmable lamp is turned on with 25% brightness.



    Example:
    • Multistate Circular Level




    Joystick


    Joystick is a graphic item with a cursor that has 1 state. It has X and Y coordinates - the current position of a cursor. The range of cursor movement is limited by min nd max values. It allows to get the color under the cursor to control RGB lighting.


    Item Parameters

    Joystick.png
    Type Joystick
    Feedback reaction to events
    • Momentary – a cursor is moved by a user
    MinX ... MaxX / MinY ... MaxY movement range of a cursor along X and Y axes.
    Range Type of range
    • Integer - integer,
    • Float - floating point.
    InvertX / InvertY min and max on X and Y axes change their places.
    Slider1 Cursor Appearance of a cursor.
    Slider1 Cursor Color The color of a cursor.


    Assigning to Equipment

    A variable can be assigned to a joystick directly of via a script. It is usual to use a script to get the color under the cursor and to send components of a color to channels to control RGB strip.

    RGB LED strips are controlled with the help of DMX controllers and have one of the following configurations:

    • Red, Green, Blue - three channels to control the color of the LED strip. Brightness is decreased by decreasing brightness of separate color channels.
    • Red, Green, Blue, Alpha - four channels to control the color and brightness of LED strips.

    variant 1 Control RGB strip with the help of thee (four) items Level.


    3 (4) Unsigned 8-bit variables (Subtype: VALUE) are created in a project. The variables are controlled in the 0...255 range, Increase of value in a channel corresponds to the increase of brightness of the corresponding color.

    variant 2 Control RGB strip with the help of a palette.


    Any multi-colored item can be used as a palette. When a finger presses the this item a command is sent to equipment to set the chosen color.

    A script must be added from the RGB library to do it. A script is added only 1 time, later on it can be used to control RGB strips of any other built-in iRidium drivers.

    2.1 Create a palette and other required items. Any multi-colored image can be used as a palette.

    • Set the palette like a Joystick with 0...100 range along the Х and Y axes;
    • Set an inactive Button to display a color chosen on the palette;
    • If it is required set active Buttons to change the brightness of the strip by steps.
    ColorPicker.png

    2.2 Downloas the followinf file RGB_Library.js

    This file provides control of color with JavaScript. Add the file to your visualization project. To do it, open your project in iRidium Studio, and click Icon Scripts.png, select ( + ) "Add Script From File".

    2.3 Create an empty script file: ( + ) "New Script" to add a description of your RGB palette to it:

    Describe the palette and the item displaying a selected color in the script file:
    ///////// 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"
             )

    An advanced variant contains buttons to control brightness:

    A palette to display colors and +/- buttons to control brightness

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

    Write in the description where the palette is located and what equipment it sends data to:

    • IR.GetDevice("Driver") - the name of a driver where RGB commands will be sent. Copy the name from PROJECT DEVICE PANEL;
    • "Channel Red", "Channel Green", "Channel Blue" - names of variables (Commands), that control red, green and blue components of colors. Copy names from PROJECT DEVICE PANEL. Names of Commands must agree with the names of Feedbacks, where from data about the current color of RGB strip comes.
      HDL-Buspro, Domintell - has a unique way to write names. <name of device in the network>:<name of channel> must be written for them, for example "Dimmer in Bedroom:Channel 1";
    • 255 - the max value of brightness for each color. Brightness is controlled in the range from 0 to 255 for most equipment, but there are drivers that control brightness in the 0...100 range (for example, HDL). For HDL-Buspro enter 100 in this line of settings;
    • IR.GetItem("Page 1").GetItem("Item Color Picker 1") - the name of a page ("Page 1") and an item on it ("Item Color Picker 1") that will be used as a palette;
    • IR.GetItem("Page 1").GetItem("Item Display 1") - the name of a page ("Page 1") and anitem on it ("Item Display 1") that will be used to display a color selected on the palette;
    • IR.GetItem("Page 1").GetItem("Up 1") - the name of a page ("Page 1") and an item on it ("Up 1") that will increase the brightness of a selected color when it is pressed;
    • IR.GetItem("Page 1").GetItem("Down 1") - the name of a page ("Page 1") and an item on it ("Down 1") that will decrease the brightness of a selected color when it is pressed;
    • 10 - a value, by which brightness of a selected color will increase/decrease when Up and Down buttons are pressed.


    2.3 Click "OK" to save the palette description. Start the Emulator to test its work.

    Errors that may occur if a palette malfunctions are display in the log (F4).



    variant 3 Control an RGBW strip with the help of a palette and a level.


    Any colored item can be used as a palette - you'll send commands to equipment about setting a chosen color by touching any place of the item. Use a Level to control brightness.

    A script must be added from the RGBW library to do it. A script is added only 1 time, later on it can be used to control RGB strips of any other built-in iRidium drivers.

    3.1 Create a palette and other required items (a level, a button, etc.). Any multi-colored image can be used as a palette.

    • Set a pallete as a Joystick with a 0...100 (255) control range along Х and Y axes;
    • Set the Level to change brightness of light with a 0...100 (255) control range;
    • Set an inactive Button that will display a color chosen on the pallete;
    • If it is required, set inactive Buttons that will change the brightness of the strip by steps.
    RGBW.png

    3.2 Download the following file RGBW_Library.js

    This file provides control of color with JavaScript. Add the file to your visualization project. To do it, open your project in iRidium Studio, and click Icon Scripts.png, select ( + ) "Add Script From File".

    3.3 Create an empty script file: ( + ) "New Script" to add a description of your RGBW palette to it:

    Describe the palette and the item displaying a selected color in the script file:
    ///////// 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"
    );


    Write where the pallete is located and what equipment it sends commands to in the description:

    • IR.GetDevice("Driver") - the name of a driver to which RGBW commands are sent. Copy the name of the driver in the Devices > Name tab;
    • "Channel Red", "Channel Green", "Channel Blue", "Channel White" - names of variables (Commands), that are responsible for controlling red, green, blue and white (brightness) components of a color. Copy the names in the Device > Commands > Name tab. the names of Commands must be the same as the names of Feedbacks, where information about the current color of the RGBW strip comes.
      HDL-Buspro, Domintell and other drivers of the network type have a special way to write names. The have the following format <the name of a device in the network>:<the name of a channel>, for example, "Dimmer in Bedroom:Channel 1";
    • 255 - the max value of brightness for every color. Brightness is controlled in a range from 0 to 255 for most equipment, but there are drivers that control brightness in a 0...100 range (for example, HDL). Enter 100 in this setting for HDL-Buspro;
    • IR.GetItem("Page 1").GetItem("Item Color Picker 1") - the name of a page ("Page 1") and an item on it ("Item Color Picker 1") that will be used as a pallete;
    • IR.GetItem("Page 1").GetItem("Item Display 1") - the name of a page ("Page 1") и and and item on it ("Item Display 1") that will be used to display a color chosen on a pallete;
    • IR.GetItem("Page 1").GetItem("Slider Level 1") - the name of a page ("Page 1") and item on it ("Slider Level 1") that will control the brghtness of a chosen color when the value of a level changes;


    3.4 Click "OK" to save the palette description. Start the Emulator to test its work.

    Errors that may occur if a palette malfunctions are displayed in the log (F4).


    Operation Principles

    1. When the joystick is pressed or moved, a selected color is split into 3 basic ones: red, green and blue.
    For example, purple is a combination of blue and red.
    2. The received values are sent to 3 channels: Red, Green, Blue, and equipment turns on the color we chose.
    Тhus, light or lighting can be of any color within the color range of a palette.
    3. By uniting the 3 feedback channels, the current color can be shown on a display.


    example
    DOWNLOAD




    Edit Box


    Edit Box is an item to enter data from a keyboard. The entered data remain on the item and they can be "taken" - sent to equipment of processed by a script. An edit box is often used to enter a password or other data from a keyboard.


    Item Parameters

    EditBox.png
    Type Edit Box
    Feedback Reaction to being pressed
    • Momentary - an edit box is highlighted when it is focused on.
    Hold Time A period of time (in ms.), during which a button must be held for the Hold event to work.
    PasswordChar A symbol that visually replaced any text entered in EditBox. It is used to hide passwords. The initial text can be received from the .Text property.


    Assigning to Equipment

    An edit box can be assigned to a variable directly or via a script.

    EditBox2.png

    When an edit box is pressed, a command to open a keyboard is done:

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


    On activation of the Enter event send data from Edit Box to an item or a driver.


    Example of work:

    • Press - the virtual keyboard of a smart phone (tablet) is opened
    • Enter - the Edit Box item sends text as a command to a driver; closes the keyboard; clears the input area.


    To delete data you entered before, write an empty string in the Edit Box:

    EditBox3.png
    EditBox4.png


    Operation Principles

    1. When the Edit Box item is pressed, it becomes active.
    2. The font, its color and size can be set or the entered data can encrypted.
    For example, encypting is often used for passwords.
    3. A value entered in Edit Box is written it the variable when Enter is pressed on the keyboard. After a value is sent, automatic clearing of the edit box can be set or display of a message about an error.
    For example, when a wrong password is entered, the edit box is erase and there appears a message: "Wrong password, try again!".


    example
    DOWNLOAD



    TextArea


    TextArea is an item to enter text in several lines from the keyboard. It is an improved version of the Edit Box item to work with large texts. The item divides texts into lines by spaces or when Enter is pressed. Use a scroll bar for convenient navigation in the text. This item has an improved paste helper. When it is called without selection, there appear the following modes: Paste, Select, Select All. When it is called with selection, there appear the following modes: Paste, Copy, Cut. TextArea is often used for notes of editing large texts.


    Item Parameters

    TextArea2.png
    Type TextArea
    Feedback Reaction to being pressed
    • Momentary - the textarea is highlighted when it is focused on.
    Hold time A period of time (in ms.), which a button must be help for the Hold event to work.
    Repeat time Frequency of repetition of the Hold event
    PasswordChar A symbol that visually replaces all text entered in в TextArea. It is used to hide passwords. The initial text can be received from the .Text property.
    Tags Assign a tag to the item for more convenient search in the project tree. To find the tag enter its name in the Search line of the Project panel. All graphic items to which the tag is assigned to will be displayed.


    Assigning to Equipment

    A TextArea can be assigned to a variable directly or via a script.

    TextArea1.png TextArea3.png

    When a TextArea is pressed, a command to open a keyboard is done:

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

    Call "paste helper" by activating the Hold event:

    • Programming > Hold > Show paste helper.




    Program an additional button to send text to a variable .

    Example of work:

    • When the TextArea item is pressed a virtual keyboard of a smartpone (tablet) is opened,
    • When the "Save" button is pressed, the textarea sends text to the variable, closes the keyboard and clears the textarea.


    To delete area deleted earlier, write an empty string in the TextArea:

    TextArea4.png
    TextArea5.png


    Operation Principles

    1. When the TextArea is pressed, it becomes active.
    2. The font, its color and size can be set or the data can be totally encrypted.
    For example, encrypting of text is often used for passwords.
    3. When the left mouse button is pressed or held a paste helper window appears on the screen that helps to copy, cut or paste selected text. When it is called without selecting text, the following modes appear: Paste, Select, Select All. When it is caleld and text is selected the following modes appear: Paste, Copy, Cut.
    4. The item supports the following combinations of keyboads:

    • Ctrl+A - select all,
    • Ctrl+C - copy the selected text to the paste helper,
    • Ctrl+V - paste the text from the paste helper on an item,
    • Ctrl+X - cut selected text from an item to the paster helper,

    5. A value entered in the TextArea is written in the variable when a button programmed to do it is pressed in the graphic interface by the Press or Release event. After a value is sent, automatic clearing of the text field and a display of the error message can be set..
    For example, when the "Save" button is pressed, text is written in the project variable and the textarea is cleared for further entries.


    example
    DOWNLOAD




    Virtual key


    Virtual key is an item to create a custom keyboard. You can create a keyboard of any configuration in iRidium project on the basis of the virtual key.


    Item Parameters

    VK(1).png
    VK(2).png
    Type Virtual key
    Feedback Reaction to being pressed:
    • Momentary - for keys responsible for entering a separate symbol,
    • Channel - for keys that have a capability to change the register.



    To switch the keyboard layout, use a project variable, that stores a number - the current state of a key. Assign a variable “In Value” to change the register.

    Key Type The type of a key determines its behavior:
    • Normal – a key with 1 state (without register changes)
    • Trigger – a key with 2 states (for example, with a change of register of a keyboard layout)
    • Multistate – a key with several states (the number of states is set as required)
    Key Action An event of a key:
    • Insert Text – enter a symbol written in the text field of a key. Enter one letter or numeral in the text field and the key will send it
    • Enter, Up, Down, Left, … – commands of Windows OS keyboard

    The virtual key sends a value to the active Edit Box. If you did not create Edit Box the value will not be written anywhere.

    Operation Principles

    1. Each Virtual key can be set for a definite symbol or a function of a keyboard (Enter, Delete etc.).
    2. When a virtual key is pressed, a selected symbol is written in the active edit box.
    This principle is similar to a regular sensor keyboard based on Android or iOS, but a Virtual key allows to set the design of this keyboard to suit the design of the current project.


    example
    DOWNLOAD

    Источник — «https://dev.iridiummobile.net/index.php?title=IRidium_studio_2019_Item_types/en&oldid=148683»
    Категория:
    • Studio2019
    About us
    Company
    Team
    History
    Philosophy
    Rewards
    Partnership
    Our partner
    Partnership Programs
    Apply for partnership
    products
    iRidium pro
    iRidium lite
    iRidium gate
    iRidium server
    Loads
    iRidium pro
    iRidium lite
    Other version
    Marketing materials
    Support
    On-line courses/Video
    Recommended equipment
    Other version
    iRidium pro
    Documentation
    FAQ
    Forum
    iRidium lite
    Documentation
    Forum
    Projects
    Standart projects
    Smart buildings
    Smart house
    Special solution
    Find a dealer
    News
    Youtube
    Twitter
    VK
    Logo
    contact@iridi.com
    +7 (499) 322-73-29

    Privacy policy