Материал из for iRidium developers
Перейти к: навигация, поиск
Эта страница является переводом страницы Editor Tools. Перевод выполнен на 100%.

Other languages:
English • ‎Nederlands • ‎русский

training:
online webinars

Each iRidium project consists of the graphic part (pages, popups, buttons, images, animation, video-stream and control items) and the driver part (commands, equipment status channels, scripts on the basis of JS Guide). These parts communicate constantly. They define project work scenarios by their settings. Creation of an iRidium project begins with setting up of its graphic part.

The graphic part of the project (design) can be received in one of the following ways:

  1. Download a ready GUI template from the "Downloads" section of the iRidium mobile web site. It will allow you to save time and not to create a GUI from scratch.
  2. Buy a GUI template in the BUY section of the the iRidium mobile web site (for integrators only). In order to do that you are required to go through the procedure of Full registration in the My account section.
  3. Create a design yourself in iRidium Studio.


New iRidium Projects

After opening iRidium Studio the first thing you do is creating a new project or opening a ready project. A new project can be created with the help of the button on Tool Box, Ctrl+N or through the menu File > New Project

Editor window menu new project.png


New projects:

Editor window new project.png

File > New > New Panel Project

  • Project Name - the name of a new project
  • Target Device - the type of the device on which the project will be launched (defines the project resolution). Select "Custom" to input the resolution manually *Landscape Widht / Landscape Height - the resolution of the landscape page in pixels
  • Page Name - the name of the first page of the new project
  • Orientation - the orientation of the start page (Portrait/Landscape)


After creating a new project you will see the window of its settings:


Click n the page name in the project tree to start editing:

GUIfirstPage.png


Switch between creation and selection of graphic items on the page with the help of the following tools:

Icon Select.png Select – to select a graphic item
Icon Draw Item.png Draw Item - to create a graphic item

Tools for fast creation of interfaces are int he section



Interface structure

Interface Components

  • Pages - the project basis. They serve to place graphic items. Popups can be opened only over a page.
    • there must be at least one page in the project
    • pages can be either vertical or horizontal
    • pages support the auto-turn function (horizontal/vertical switch when turning the control panel with the accelerometer). In order to perform the auto-turn function there should be 2 similar pages with different orientations.
    • all project pages have the same size. It is defined by the project resolution.
    • pages cannot appear with animation effects or be transparent or semi-transparent
    • only one project page can be opened at a time (opening of a new page closes the previous page and its popups)
  • Popups - areas of arbitrary size for placing graphic items.
    • having popups in the project is not obligatory
    • popups cannot be horizontal or vertical
    • popups close at auto-turn of a page or at opening of another page
    • popups can have any size, opacity and position on the page
    • there can be any number of popups on one page
  • Buttons for swiching between pages and popups
    • you can use any graphic item for that
    • the buttom starts to control the project when you assign the "Flip" command to it
    • the button can control pages, popups and equipment together
  • Buttons to control equipment
    • you can use any graphic item for that
    • button settings define the values to be sent to equipment
    • the button can control pages, popups and equipment together
  • Items of interface design
    • you can use any graphic item for that
    • the button can be made inactive - it will not react on pressings


Interface Organization

  • Interfaces on the basis of pages

When creating an interface on the basis of Pages, without Popups, you can use the advantage of the turning design which switches the vertical and horizontal views automatically. When working with pages you can use the "Prev Page" command (previous page)without indication of the page name you want to return to.

At the same time an interface on the basis of pages does not allow you to use the universal interface parts: you will have to duplicate the menu items for each new page. That is why changes of the main menu can require update of ech project page.

  • Interfaces on the basis of 1 page and popups

Such interface allows you to create a navigation menu on one project page and keep it open when project popups are displayed without covering the menu. You can create additional pages. An interface on on the basis of 1 main page and popups cannot be a turning one as popups do not support orientation changes and cannot turn with the page.



Graphic Items

Graphic items – interface objects located on iRidium project pages or popups. They are buttons, levels, icons, design items, background and animated images, other specific types of items.

After creating a new iRidium project you will see the start page where you can start work with graphic items.



Draw Item

Use the Draw Item tool in Tool Box to create a template of a graphic item. On the basis of the template you can set up any item with any properties:

Editor window menu draw item.png


The item template has 2 states (on/off) and the Button type by default. Such Button will change its state to the opposite at pressing and return to the initial state at releasing the graphic item.


Graphic item states

To create or delete a state of a graphic item and to switch states use Object Properties > States:

Editor window Object Properties States.png
Icon Current State.png Current State - the selected state of the graphic item
Icon Prev State.png Prev State - open the previous state
Icon Next State.png Next State - open the next state
Icon Add State.png Add State - add one more state
Icon Delete State.png Delete State - delete the selected state




Types of graphic items

In iRidium projects you can operate the following types of graphic items:

Button Sending fixed values; displaying received data
Level Sending values from the preset range with the help of the slider; displaying the current value with the slider position
Trigger Button Switching between two fixed values indicated when setting the button
Up/Down Button
Increasing or decreasing the value by the preset step within the preset range. The range and step of increment/decrement are indicated in the button settings
Multistate Button Sending fixed values and receiving data accompanied by animation at pressing/state change
Multistate Level Sending and receiving values in the preset range where each value or group of values has a separate image
Edit Box Input of data strings to be sent to the bus
Joystick Control of RGB with the help of the Color Picker object
Static List (Static List) Scrolling the list of popups with gestures



Button


It is a graphic item with 1 or 2 states. Buttons depending on settings can be fixed or not. Each pressing on Button initiates sending of the same set of commands assigned to it.


1 Create a variable were a number or string has to be written. Set it up as it is shown in the instructions.

2 Create a button and set it up as follows (see all settings):

UImakeAbutton.png
Type Button
Feedback Reaction of the item on user pressings and receiving data from equipment
  • Momentary - the button sends values but does not display feedback
  • Channel - the button sends values and displays feedback
  • None - the button does not visually react on pressings or receiving of feedback
  • Invert Channel - the button sends values and dispalys feedback inversely (false - on, true - off)

3 Drag the variable on the button and indicate the following in the dialog window:

UIdragCommand.png
Action Send Number - write numbers in the variable. You can switch to Send String for sending ASCII strings
Event for Action Interface events connected to the button. When the event are activated the indicated value will be written in the variable
  • Press - send on pressing
  • Release - send on releasing the button
  • Hold - send in cycles on holding the button
  • Move - it does not work with Button


You can use several events together. For example, send [ 100 ] on pressing and [ 0 ] on releasing.

Value Values for writing in the variable. The button sends the same value written in Value
Add a feedback channel (Create a feedback channel) Tick this if you want the button not only to write values in the variable but also change its state when receiving data from tthe variable. The received value will affect the button state (on/off) and it can be displayed in the button text field.

4 Now the variable is connected to the button. You can see all relations in OBJECT PROPERTIES > Programming

example
DOWNLOAD


Use feedback to display values on items as numbers :

  1. input a template in the item text field
  2. drag Feedback on the item, "In Value":


LIST OF TEMPLATES

Template Function Template Function
$V the integer part of the current value $P the current value of Level in percentage of maximum
$F1 - 5 value with a floating point
From 1 to 5 - number of symbols after a point
$H the upper Level value
$S current Item state number $A current Level value minus the lower Level value
$R the Level range (the upper value minus the lower value) $L the lower Level value
$X the current value in the HEX type $$ the "dollar" symbol

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


Level


Pressing on the level or moving of the slider sends to the variable the value corresponding to the current slider position.

1 Create a variable which has to be regulated. Set it up as it is shown in the instructions.

2 Create a level and set it up as follows (see all settings):

UImakeAlevel.png
Type Level
Feedback the level reaction on user's pressings and receiving data from equipment
  • Channel - to send values and display feedback (the slider moves when receiving data)
Min / Max the limits of level regulation: they define the value range in which the slider moves
Invert Range to swap the top and bottom level parts. i.e. the regulation from 0 to 100 will be performed not from the bottom upwards (when the level is vertical) but from top downwards.

3 Drag the variable to the level, indicate in the dialog window:

UIdragCommandToLevel.png
Action Send Token - to send to the variable Value, taken as the current slider position in the Min...Max range
Event for Action the event interface connected to the button. When the event is activated the indicated value will be written in the variable
  • Press - to send Value on pressings
  • Release - to send Value on releasing
  • Move - to send all intermediate Values when moving the slider.
    add Delay (100) before commands for the Move event to avoid overload of equipment (with the Delay command Move will work once in 100 ms)



You can use all three events together.

Add a feedback channel (Create a feedback channel) Tick it for the slider to move in accordance with the actual variable state

4 Now the variable is connected to the level. You can see all relations in OBJECT PROPERTIES > Programming

example
DOWNLOAD


Use feedback to display values on items as numbers :

  1. input a template in the item text field
  2. drag Feedback on the item, "In Value":


LIST OF TEMPLATES

Template Function Template Function
$V the integer part of the current value $P the current value of Level in percentage of maximum
$F1 - 5 value with a floating point
From 1 to 5 - number of symbols after a point
$H the upper Level value
$S current Item state number $A current Level value minus the lower Level value
$R the Level range (the upper value minus the lower value) $L the lower Level value
$X the current value in the HEX type $$ the "dollar" symbol

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



Multistate Button


Each pressing on the button initiates sending of commands signed to it. The animated button works with commands the same way as a standard one but when pressing on it (or receiving feedback) the animation is played at changing the state.


1 Create a variable were a number or string has to be written. Set it up as it is shown in the instructions.

2 Create an animated button, create the required number of states - frames, set up images for frames, text or other, button settings (see all settings):

UImakeAnMSbutton.png
Type Multistate Button
Feedback reaction of the button on user's pressings and receiving data from equipment
  • Momentary – the animation is performed when clicking on the button. When releasing the button the animation will be played backwards. Repeat: True - the animation will not stop until the button is released
  • On – the animation is played when the project is being launched. Repeat: True - the animation will not stop while the project works (endless cycle)
  • Blink / Channel – the animation is played when receiving any non-zero value from equipment. Repeat: True - the animation will not stop until zero is received
Time Up / Time Down (tenths of a second) speed of playing the animation from the first to the last frame and back
Repeat endless repetition of the animation when the item is in the active state

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

UIdragCommand.png
Action Send Number - записать в переменную число. Можно переключить на Send String для отпарвки ASCII строки
Event for Action Событие интерфейса, связанное с кнопкой. При возникновении события, в переменную будет записано указанное значение
  • Press - отправить по нажатию на кнопку
  • Release - отправить при отпускании кнопки
  • Hold - отправлять в цикле по удержанию



Одновременно можно использовать несколько событий. Например, отправть [ 100 ] по нажатию и [ 0 ] по отпусканию.

Value Значение для записи в переменную. Кнопка отправляет всегда одно и то же, записанное в Value значение
Add a feedback channel (Create a feedback channel) Поставьте эту галочку, если нужно, чтобы кнопка не только записала значение в переменную, но и изменила состояние при получении данных из этой же переменной. Полученное значение будет влиять на состояние кнопки (вкл/выкл) и воспроизведение анимации

4 Now the variable is connected to the button. You can see all relations in OBJECT PROPERTIES > Programming

example
DOWNLOAD



Multistate Level


A graphic item with more than 2 states. Clicking on the level sends to the variable the value corresponding to the current position of the slider. But there is no actual slider. Instead of it the level shows one of the States - the one which corresponds to the selected value or the value range. Each State of the animated level can be assigned an image, text, color.


1 Create a variable which has to be regulated. Set it up as it is shown in the instructions.

2 Create and set up Multistate Level (see all settings):

Editor examples of Multistate Level 1.png
Type Multistate Level
Feedback the reaction of the level on user's pressings and data received from equipment
  • Momentary - the item states are changed only on pressing
  • Channel - the states are changed on pressings and when receiving data
Min / Max the range for level regulation: they define the value range in which the level works
Invert Range it swaps the top and bottom level parts, i.e. the frame change will be performed from the last one to the first

3 Drag the variable on the level, in the dialog window for assigning variables indicate:

UIdragCommandToLevel.png
Action Send Token - send to the variable Value taken as the current slider position in the range Min...Max
Event for Action the interface event connected to the button. When the event is activated the indicated value will be written in the variable
  • Press - send Value on pressing
  • Release - send Value on releasing
  • Move - send all intermediate Values when moving the slider.
    Add Delay (100) before the command for the Move event not to overload equipment (with the Delay command, Move will be activated once in 100 ms)



You can use all three events together.

Add a feedback channel (Create a feedback channel) Tick this as you need to change the level state in correspondence with the actual variable state

4 Now the variable is connected to the level. You can see all relations in OBJECT PROPERTIES > Programming

example
DOWNLOAD



List


A graphic item which is used for working with equipment directly. It enables forming the list of items (based on a general template), changing the number of articles and information in them, performing actions by clicking on items. Filling in of inertial lists is performed in iRidium Script, see List API.

You can use inertial lists for creating lists of songs, films and folders received from remote sources.


1 With the help of Java Script form the set of data from which the inertial list has to be built (for example, lists of songs and singers). Use List API to fill in the list

2 Create an item - List and set it up as follows (see all settings):

Editor examples of List.png
Type List
Feedback the reaction of level on user's pressings and receiving data from equipment
  • Channel - sends values and displays feedback (the slider moves when receiving data)
Feedback affects the list base but not items on it. Usually it is not used
List Template the popup which will be a template for creating list items
List Items the list items which will be created by default (on the basis of the template). You can create any number of items and set different text for them. Commands are formed with the help of List API
Resistance the degree of list resistance
Scroll Bar to show/hide the scroll bar

3 With the help ofList API relate list items to commands to equipment

example
DOWNLOAD



Up/Down Button


A graphic item has 2 states. At that each clicking changes the current value by "Up/Down Value", but within the "Max/Min Value" range. The calculated value is sent by the variable: thus the step increment/decrement of the variable is implemented. It is required to have feedback from the variable in real time to work with the item.


1 Create a variable which has to be incremented/decremented. Set it up as it is shown in the instructions.

2 Create a level and set it up as follows (see all settings):

Editor window Object Properties General Up Down.png
Type Up/Down Button
Feedback Reaction of the level on user's clickings and receiving data from equipment
  • Momentary - the button has to be clicked visually right away, it does not display feedback visually
Up/Down Value the increment/decrement step (it can be more or less than zero)
Min/Max Value the increment/decrement limits (minimum limit for decrement and maximum limit for increment)
Hold Value the increment/decrement step when the Hold event is activated. Commands for controlling equipment can be assigned using both Press and Hold - then the value will be incremented/decremented when you hold the button pressed
Hold Time time of holding the button for the Hold event to be activated
Repeat Time frequency of repeating the On Hold events

3 Drag the variable on the button and in the dialog window indicate:

Editor drag to UDB.png
Action Send Token - send to the variable Value calculated as a sum of the current values and the increment step
Event for Action The interface event connected to the button. When the event is activated the calculated increment value will be written in the variable
  • Press - send on pressing
  • Hold - increment the value with the indicated frequency on holding



You can use two events at a time.

Add a feedback channel (Create a feedback channel) Tick this field as it is required for the increment to be calculated in accordance with the actual variable state

4 Now the variable is connected to the level. You can see all relations in OBJECT PROPERTIES > Programming

example
DOWNLOAD



Trigger Button


Trigger switch with the help of the "Trigger Button" item allows to send 2 values indicated in Trigger Value 1 and Trigger Value 2 alternately. When there is feedback the trigger automatically takes the respective value and sends the value opposite to the current one on pressing. The trigger cannot be set up for working with 3 and more values.


1 Create a variable which has to be switched between 2 values. Set it up as it is shown in the instructions.

2 Create a button and set it up as follows (see all item settings):

UImakeAtriggerButton.png
Type Trigger Button
Feedback Reaction on pressings and receiving data from equipment
  • Channel - switches the value and displays feedback (other types are not used)
Trigger Value 1 / Trigger Value 2 the values which will be sent alternately when clicking the button, they depend on the variable type

3 Drag the variable on the trigger, in the dialog window indicate:

UIdragCommandToTrigger.png
Action Send Token - send to the variable Value indicated in the graphic item properties (Trigger Value 1 or Value 2 depending on the current trigger state)
Event for Action An interface event connected to the button. When the event is activated the indicated value will be sent to the variable
  • Press - send on press
  • Release - send on release



For Trigger button you can use only one event at a time

Add a feedback channel (Create a feedback channel) Tick this field as it is required for the button to know its current value and change it when receiving data from the variable and on clicking.

4 Now the variable is connected to the trigger. You can see all relations in OBJECT PROPERTIES > Programming

example
DOWNLOAD


Radio Buttons

Radio Button - 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 Trigger Button. The task of Radio Buttons: to send to the variables values from different buttons from which you can select only one.

Settings and behavior of Radio Button depend on the variable you work with. You can find several examples below.


Variant 1 Radio Buttons for controlling one variable with the possibility to receive feedback. Values are written in one variable: equipment returns the current state of this variable.

  1. Set up the Trigger Button items (see the image) in a number equal to the number of Radio Buttons. In the fieldsTrigger Value 1 and 2 indicate the same values corresponding to those which have to be sent to the controlled variable by each button
  2. Drag the command for controlling the variable on all Radio Buttons. Select the Press or Release events for sending, tick Add A Feedback Channel to display the variable status


RadioButtons-MainSettings.png
RadioButtons-DragCommand.png

the set up button will go to State 2 only when the variable takes the value indicated in Trigger Value 1 and 2


Variant 2 Radio Buttons for controlling variables with possibility to receive feedback. ON/OFF values are written in different variables; equipment returns the current state of these variables. The variables are not synchronized by automation equipment for working in the Radio Buttons mode (inactive modes on the side of iRidium have to be off)

  1. Set up the items Type: Trigger Button, Feedback: Channel, indicate Trigger Value 1 = inactive, Trigger Value 2 = the variable active state (for example 0/1, 0/100)
  2. Drag the commands for controlling the variables on graphic items. By the example of the first item of the group:
    1. Send zeros to all variables in the Radion Buttons group to deactivate the current active mode. In order to do that select Action: Send Number in the dialog window for command sending
    2. Add Delay(50) ms through the macros editor of the Press event to give equipment time to deactivate the active mode
    3. Drag the command for controlling the variable corresponding to Radio Button on the item. Leave Action: Send Token. Value on the Press (or Release) event, tick Add a Feedback Channel


RadioButtons-MainSettings-Septd.png
RadioButtons-DragCommand-Septd.png

If the equipment working modes are synchronized on the automation equipment side (when activating one of the modes the rest are automatically deactivated) you do not need to send zeros to the deactivated variables. Execute only article 2.3 of the settings.


Edit Box


It is an item for inputting data from keyboards. The input data are assigned to an item from where they can be "taken" - sent to equipment or processed in the script.


1 Create an item and set it up as follows (see all settings):

Editor window Object Properties Programming EditBoxSetup.png
Type Edit Box
Feedback Reaction on pressings
  • Momentary - the input area is highlighted when in focus

2 Edit Box items can be related to variables directly or via scripts

Editor window Object Properties Programming Edit Box show.png

When clicking on the Edit Box item execute the command for keyboard opening:

  • Object Properties > Programming > Press > «Show Keyboard [keyboard_type]»


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


Example of work:

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


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

Editor window Object Properties Programming Edit Box hide.png
Editor window Object Properties Programming Edit Box Clean.png



Virtual Key


It is an item for creating user keyboards. You can create a keyboard of any type and configuration in your iRidium project.


1 Create an item and set it up as follows (see all settings):

Editor window Object Properties General Virlual Key.png
Type Virtual key
Feedback Reaction on pressings
  • Momentary - for keys responsible for input of separate symbols
  • Channel - for keys which there is a possibility to change registers



To switch the layout use the project variables which stores the number - the current key state. Assign the variable using “In Value” to change the register.

Key Action Key event
  • Insert Text – input of the symbol indicated in the text field of the key. Write one letter or figure in the text field and it will be sent by the key
  • Enter, Up, Down, Left, … – commands of the Windows OS keyboard


The virtual key sends the value in the active input field (Edit Box). If you did not create Edit Box the value will not be written anywhere.

example
DOWNLOAD



Joystick


It is a graphic item with 1 state. It has X and Y coordinates - the current position of the Joystick cursor. The range for moving the cursor is limited by the minimum and maximum values. It is also possible to receive the color under the cursor for RGB control.


1 Create an item and set it up as follows (see all settings):

Editor window Object Properties General Joystick.png
Type Joystick
Feedback the reaction on events
  • Momentary – the cursor is moved by the user
MinX ... MaxX / MinY ... MaxY the range for moving by the X and Y coordinates
InvertX / InvertY the minimum and maximum values by the X and Y coordinates swap locations

2 Joystick can be related to the variable directly or via scripts. Usually the script for receiving the color under the cursor and sending the color components to the RGB strip control channels is used

example
DOWNLOAD


Color Picker

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

  • Red, Green, Blue - three channels for controlling the LED strip color. Decrease of brightness is performed by decreasing brightness of separate channels.
  • Red, Green, Blue, Alpha - four channels for controlling the LED strip color and brightness


Variant 1 Control RGB strips with the help of three (four) Level items.


You create 3 (4) Unsigned 8-bit (Subtupe: VALUE) variables in the project. The variables are controlled in the range 0...255, value increase in the channel corresponds to the increase brightness of the respective color.

LEVEL

Pressing on the level or moving of the slider sends to the variable the value corresponding to the current slider position.

1 Create a variable which has to be regulated. Set it up as it is shown in the instructions.

2 Create a level and set it up as follows (see all settings):

UImakeAlevel.png
Type Level
Feedback the level reaction on user's pressings and receiving data from equipment
  • Channel - to send values and display feedback (the slider moves when receiving data)
Min / Max the limits of level regulation: they define the value range in which the slider moves
Invert Range to swap the top and bottom level parts. i.e. the regulation from 0 to 100 will be performed not from the bottom upwards (when the level is vertical) but from top downwards.

3 Drag the variable to the level, indicate in the dialog window:

UIdragCommandToLevel.png
Action Send Token - to send to the variable Value, taken as the current slider position in the Min...Max range
Event for Action the event interface connected to the button. When the event is activated the indicated value will be written in the variable
  • Press - to send Value on pressings
  • Release - to send Value on releasing
  • Move - to send all intermediate Values when moving the slider.
    add Delay (100) before commands for the Move event to avoid overload of equipment (with the Delay command Move will work once in 100 ms)



You can use all three events together.

Add a feedback channel (Create a feedback channel) Tick it for the slider to move in accordance with the actual variable state

4 Now the variable is connected to the level. You can see all relations in OBJECT PROPERTIES > Programming


Variant 2 Control of RGB strips with the help of palette


You can use any colored item as a palette - you will be able to send commands of setting up the selected color to equipment by moving a finger on the item.

It requires adding a special script - RGB libraries - in your project. The script has to be added only once. Then you will be able to use it to control RGB strips of any built-in iRidium drivers.

2.1 Create a palette and auxiliary items. You can use any colored image as a palette.

  • Set up the palette like Joystick with the range 0...100 for Х and Y coordinates
  • Set up an inactive item Button which will display the color selected on the palette
  • If it is required set up active Button items which will change the strip brightness step-by-step
RGBPalette.png

2.2 Download the file RGB_Library.js

This file enables color control with the help of JavaScript. Add the file in your visualization project: open the project in iRidium Studio, click Icon Scripts.png, select the item ( + ) "Add Script From File"

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

Describe the palette and the item for displaying the 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"
         )

The extended version has buttons for controlling brightness:

Palette, displaying the color and the button +/- for controlling 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"
         )


In the description indicate where the palette is and to what equipment it sends data:

  • IR.GetDevice("Driver") - the name of the diver to which you will send RGB commands. Copy the driver name in PROJECT DEVICE PANEL
  • "Channel Red", "Channel Green", "Channel Blue" - the names of the variables (Commands) which are responsible for control of red, green and blue color components. Copy the names in PROJECT DEVICE PANEL. The Commands names have to be the same as the names of Feedbacks from where information about the current color of the RGB strip comes.
    HDL-Buspro, Domintell - they have a special way of writing names. For them you need to indicate <the device name in the network>:<the channel name>, for example "Dimmer in Bedroom:Channel 1"
  • 255 - the maximum brightness value for each color. For the majority of equipment brightness is regulated in the range from 0 to 255 but there are drivers which control color brightness in the range 0...100 (for example, HDL). For HDL-Buspro indicate value 100 for this property.
  • IR.GetItem("Page 1").GetItem("Item Color Picker 1") - the page name ("Page 1") and the item on it ("Item Color Picker 1") which you will use as a palette
  • IR.GetItem("Page 1").GetItem("Item Display 1") - the page name ("Page 1") and the item on it ("Item Display 1") which you will use for displaying the color selected on the palette
  • IR.GetItem("Page 1").GetItem("Up 1") - the page name ("Page 1") and the item on it ("Up 1") which will increase brightness of the selected color on pressing
  • IR.GetItem("Page 1").GetItem("Down 1") - the page name ("Page 1") and the item on it ("Down 1") which will decrease brightness of the selected color on pressing
  • 10 - the value on which brightness of the selected color will increase/decrease when clicking Up and Down


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

Errors which can appear at incorrect palette description are displayed in the log window (F4)


Static List (List of Popups)


It is a graphic item inside which you can scroll popups. it is used for creating menus controlled with the help of gestures.

1 Create an item and set it up as follows (see all settings):

Editor window Object Properties General Static list.png
Type Joystick
Popups List the list of popups: open the settings window and select the popups to be displayed on the list
Direction the vertical or horizontal list
Resistance (%) the degree of list resistance
Pull Up Type / Time the type of animation at list scrolling / (ms) the speed of list scrolling
List Type the way of "sticking" popups to the edges of the base list item: to the center, to the left edge, to both edges . It is used when the size of popups in the list is different from the base item.

Command to equipment are assigned to graphic items on the popups of the list.

example
DOWNLOAD



Project pages and popups

A project must have at least one page. It defines the size of the project workspace. Popups are additional areas for placing graphic items. Popups are always opened over a page.


New Pages, New Popups

Projects consist of Pages and Popups:

  • Page - the basis for placing graphic items.
    • there must be at least one page in the project
    • pages can be either vertical or horizontal
    • pages support the auto-turn function (horizontal/vertical switch when turning the control panel with the accelerometer). In order to perform the auto-turn function there should be 2 similar pages with different orientations.
    • all project pages have the same size. They define the size of the project workspace.
    • pages cannot appear with animation effects or be transparent or semi-transparent
    • only one project page can be opened at a time (opening of a new page closes the previous page and its popups)
  • Popup - the auxiliary project object for placing graphic items.
    • having popups in the project is not obligatory
    • popups cannot be horizontal or vertical (its coordinates are fixed)
    • popups can have any size, opacity and position on the page
    • there can be any number of popups on one page
    • popups close at auto-turn of the page


Create a page (popup):

Editor menu project add page.png
  • Add Page – to add a page
  • Add Popup Page – to add a popup
  • Add Folder – to create a folder of pages and popups
  • Change View - to change the view of the pages tree for work with Popup Groups

Page (popup) settings:

Editor menu project setup pageORpopup.png
  • A new page
    • Name - the name
    • Landscape/Portrait - horizontal/vertical
  • A new popup
    • Name - the name
    • Left and Top - the shift relative to the left upper corner of the page (in pixels)
    • Width and Height - the width and height (in pixels)



Auto-turn of Pages

When creating a new pape you can select the orientation and then change it.

GUI Page orientation Settings.png
  • Name - the page name
  • Alternate View - the page with the opposite orientation view which will be displayed automatically instead of the current one when you turn the control panel (if the panel has an accelerometer)


When creating a design with auto-turn, use Pages only, not Popups. It is recommended because at auto-turn of a page all previously opened popups will be closed, use JavaScript API



Preliminary view of Popups on Pages

Set up the preview in the right-click menu on the open project page or popup.

Editor right click page view popap.png



Switching Between Pages and Popups

Commands for controlling pages and popups can be executed on activation of events:

  • Pressings on graphic items
  • Gestures on pages/popups

The commands are formed in the window for creation macros for pages, popups and graphic items:

Editor examples of macros on press.png


List of commands:

Flip (commands for switching pages)
Show Page (Page name) Open a page (only 1 page can be opened at a time). Indicate the name of the page which has to be open in the command properties
Prev Page show the previous project page
Show Popup (Popup name) Show a popup (multiple popups can be shown at a time). Indicate the name of the popup which has to be open in the command properties
Hide Popup (Popup name) Parameter – the name of the hidden popup
Toggle Popup (Popup name) Show if it is hidden and hide if it is shown. Indicate the name of the popup to be hidden in the command properties
Hide Group (Group name) Hide all popups in Popups group (see below)
Hide Popups On Page (Page name) Hide all popups on the page (page name)
Hide All Popups Hide all popups opened in the project at the moment

Collectively, the buttons containing navigation commands form the system for navigation between pages and popups of iRidium project.

The commands are executed with the help of gestures. Select the page in 'Projects Overview', go to 'Object Properties – Programming – Gesture'.



Popup Group

In the tree of pages you can create Folders to group pages and popups. It does not affect the project work. But you can also create Popup Groups by right-clicking on a project or popup:

Popup Group is a set of popups which cannot be opened together. The popups added in one group become mutex. If you open one popup and then another, the first popup will be automatically closed.

Popup groups are convenient for project navigation. You do not need to monitor if unused popups are closed as it is done automatically.

GUI Popup Group Altern.png


The Hide Group command hides any opened popup of the group:

GUI Popup Group Altern 1.png


You can hide the Group with script command: IR.HideGroup("Group")


Project Start Page

When launching an iRidium project only one page and an unlimited number of popups can be shown.

Select the start page in Project Properties:

Editor window menu project properties.png
  • Page – the name of the page to be opened at the iRidium project launch (only one);
  • Popups – the list of popups to be opened at the project launch over the start page. The popups will be opened one by one, in the preset order.

StartUp in project settings:

Editor window project properties startup.png



Project Screensaver

step 1 Create a screensaver page

step 2 Set up the "back" button to return to the project, the "Prev Page" command:

Editor screensaver page with items.png

step 3 Select the screensaver page in Project Properties:

Editor window project properties screensaver.png

ScreenSaver - the screensaver screen:

  • On/Off – to turn on/off the project screensaver
  • Page – the page to be used as the screensaver
  • Interval (sec) – the project idle time after which the screensaver will be opened



Password for Opening Pages (Popups)

Use the system of passwords when setting up pages and popups.

Editor object properties password number.png
Passwords are asigned to graphic items:
  • None – no password, free access (by default)
  • 1 … 4 – the password number defining the access level (from the 1st to the 4th)

Open the project settings to setup the passwords corresponding to their numbers (1-4):

Editor object properties password number inSudio.png

The application requests the password automatically when you press the protected button. All the commands assigned to the button are executed only after entering the correct password. If the password is not selected in project properties it will not be required.

The passwords can be changed in iRidium Cloud (see the project settings), in iRidium Transfer and via the System settings of application:

Editor object properties password number cloud.png
Editor object properties password number transfer.png

with JavaScript API you are able to use the method that allows to use the system passwords with any actions (not only when press on buttons):



Scaling of Pages and Items

To change the project resolution, for example from 2048х1536 to 1024x768, indicate the required resolution in the project properties. At that it is recommended to change resolution from higher to lower to avoid image degradation in the project.

ResolutionChange InProject.png

After saving the project with the new resolution two dialog windows will appear:

1. Confirm scaling

ResolutionChange ConfirmResize.png
  • "Ok" - confirms changes of the project resolution
  • "Cancel" - the project remains the initial resolution, no changes will be applied


2. Select if you need to change the size of popups and graphic items of the project

ResolutionChange ChooseResizeType.png
  • "Yes" - sizes of popups and graphic items of the project will be scaled in proportion to the new sizes of pages
  • "No" - sizes of popups and graphic items of the project will remain the same, only sizes of project pages will be changed


3. Save the scaled project to secure the changes.

After the saving the project can be edited or merged with other projects.


Aspects of scaling:

If in the project with new resolution side proportions differ from the initial ones, then the project can look too stretched or shrunk.

You can improve its appearance by changing the resolution in 2 stages: first change the project without changing proportions. In order to do that take the final height of the project and calculate the width which will allow you to keep its initial proportions. Confirm that you want to change sizes of project items and popups.

Now the project can be given the final proportions. In order to do that change only its width. Do not change the sizes of project items and popups.

Now you have the project of the required resolution and its items keep their initial proportions. In the right area there is empty space or on the contrary not all items can be fitted on the page. You can arrange the items again.


Processing of Pressings and Gestures

Types of Events

Communication of the end-user with the control panel interface - it is a sequence of events at which interface commands have to be executed or canceled.

Pressing on the screen, releasing the screen, moving an item - these are different event on which the graphic interface can react.

Pages, popups, graphic items, list items - they support different set of events and thus have different rules of command sending.

GUI Events And Gestures.png

Brief description:

  • Press - command sending on pressing the button
  • Release - command sending on releasing the button
  • Hold - cyclic command sending when you hold the button
  • End Of Hold - single command sending when releasing the button, it it was held before that
  • Move - command sending when moving the slider of Level or Joystick


  • Select - selection of an item and subitem in List. Control of the event is available in JavaScript: List API


  • Change - input of a symbol or command in Edit Box. More information is available in JavaScript: GUI API
  • Enter - clicking on the Enter button in Edit Box


  • Lost Focus - the event generated by any item at release. The event means the item lost its focus (inactive). The event is available for processing only in JavaScript: GUI API


  • Gestures - gestures setting up is possible only in the Page properties. A gesture can be on the page, on a graphic item or popup. It will be automatically transferred to the parent page - commands set up for the page will be executed. Exceptions: Level, Joystick, List and Static List which process the Move event disabling gestures
download the example on use of gestures >>


Events available for different object types:

Page

  • Press
  • Release
  • Gestures:
    • Swipe Left
    • Swipe Right
    • Swipe Up
    • Swipe Down
    • Pinch In
    • Pinch Out
    • Double Tap

Popup
  • -

Button
  • Press
  • Release
  • Hold
  • End of Hold

Level
  • Press
  • Release
  • Move

Multistate Button
  • Press
  • Release
  • Hold
  • End of Hold

Multistate Level

  • Press
  • Release
  • Move

List

Up/Down Button

  • Press
  • Release
  • Hold
  • End of Hold

Trigger Button
  • Press
  • Release
  • Hold
  • End of Hold

Edit Box
Virtual key
  • Press
  • Release

Joystick

  • Press
  • Release
  • Move

Static List
  • Press
  • Release

Linear Trend
  • -

Pie Chart
  • -

Bar Chart
  • -


Work Principles of Interface Events

On pages and popups which are not parts of Static List and List buttons behave as follows:

  1. short pressing on an item generate the events Press > Release
  2. long pressing on an item generate the events Press > Hold > End Of Hold
  3. moving of the Level and Joystick slider generate the events Press > Move > Release
  4. release of any item generate the Lost Focus event


Graphic items in List and Static List are different as their work can be disturbed by list scrolling. The scrolling can start on the popup and the graphic item which stops command execution:

  1. the start of scrolling deactivates the Release event. So at short pressing with moving, only the Press > scrolling event of the button will work
  2. in the beginning of list scrolling (moving of the cursor/finger) Hold stops working and End Of Hold is generated: Press > Hold > scrolling > End Of Hold
  3. release of any item generate the Lost Focus event


Recommendations on implementing interface scenes:

  • If the button works on a standard page, comamnds should be assigned to the Press event, if it works on a list - to the Release evetn
  • If the button has to execute different commands on short and long pressing, assign the "short" command to Release, and the "long" one to End Of Hold
  • If you need to send a pulse (first 1, then 0) by short pressing, there are two ways of doing that:
    • assign sending of 1 to Press and sending of 0 to Release. It will allow you to regulate the length of the pulse by the time you hold the button. But you cannot use this way in lists as moving of lists will cancel the Release event
    • assign both commands: 1 and 0 to Release, set up Delay between them. The pulse will have fixed length and work correctly in lists

Macros Editor

It is a window for setting up commands which have to be executed when pressing on graphic items.

The list of interface events and gestures to which iRidium reacts


The set of commands which can be performed on activating an interface event can be different. That is why in this section only commands and ways of macros creation (sequences of several commands) are described.


Select a graphic item and open Macros Editor in the window Object Properties > Programming. Depending on the item type a different set of events is available.

Strings of macros are executed in a sequential order, from top to bottom:

Editor examples of macros on press.png



Commands in Macros Editor:

Flip (commands for switching pages)
Show Page (Page name) Open a page (only 1 page can be opened at a time). Indicate the name of the page which has to be open in the command properties
Prev Page show the previous project page
Show Popup (Popup name) Show a popup (multiple popups can be shown at a time). Indicate the name of the popup which has to be open in the command properties
Hide Popup (Popup name) Parameter – the name of the hidden popup
Toggle Popup (Popup name) Show if it is hidden and hide if it is shown. Indicate the name of the popup to be hidden in the command properties
Hide Group (Group name) Hide all popups in Popups group (see below)
Hide Popups On Page (Page name) Hide all popups on the page (page name)
Hide All Popups Hide all popups opened in the project at the moment


Sound (control of sounds)
Play Sample to play the audio file
Stop Sample to stop playing the audio file
Stop Slot (the slot number) to stop playing the audio file on the first slot
Stop All Sounds to stop playing all sounds in the project
Send To Driver (sending data to the driver)
Send Number to send a decimal number (the DEC format)
Send Text to send a data string (the ASCII format)
Send Data to send binary data (BIN format)
Send Token to send data extracted from the properties of the graphic item (Value, coordinates, size, etc. – variable values defined by the object properties).
Send To Token (sending data to the project variable (token))
Send Number to send a decimal number (the DEC format)
Send Text to send a text (the ASCII format)
Send Token to send data extracted from the properties of the graphic item (Value, coordinates, size, etc. – variable values defined by the object properties).
Other (остальные команды)
Delay (ms) to set up a delay between commands of the macro (at random)
Script Call (the function name) to refer to the iRidium Script function by its name
Show Keyboard (the keyboard type) to show the virtual keyboard of the control panel
Hide Keyboard to hide the virtual keyboard of the control panel
Minimize to minimize iRidium App on the control panel
Execute (the command) to execute a standard OS command, for example:
Exit to close iRidium App on the control panel (only for Windows and Android OS)


Commands to control macros:

GUI Editor macros window.png
Wiki Macros 1.png to delete the selected macro
Wiki Macros 2.png to move the selected macro one position up
Wiki Macros 3.png to move the selected macro one position down
Wiki Macros 4.png to clone the selected macro
Wiki Macros 5.png to delete the group of macros
Wiki Macros 6.png save the group of macros in Project Gallery - Macros


Saving macros:

  1. Create a command sequence and click the "Save" button
  2. Name the new macro command, click ОК
  3. Open "GALLERY" > "Project Gallery" > "Macros". You can drag it directly on an item or on the Programming window to assigne it to some other event besides Press


Wiki Macros 7.png


Creating relations:
Besides macro commands set up in the properties of separate interface objects (buttons, pages, popups) there are general project macro commands which can be set up in the All Relations window. Here you can create relations for sending data from one interface object to another:


Icon All Relations.png - open the All Relations window

Editor window feedback relation.png
for example, with the help of the value received from the Level slider of Item 1 you can change the coordinate of Item 2. Properties of graphic items, pages, popups, channels and tokens (global variables) can be related in the project.



Graphic and Sound Galleries

iRidium Galleries are tools for storing background images, buttons , levels, sets of several items or projects, sounds and macro commands.



Graphic Galleries

Graphic gallery in Studio (Gallery > Graphics)
it is a storage of interface objects which can be used when creating projects. The following items can be stored in the gallery:

  • simple images presented by objects with 1 state
  • buttons with 2 states
  • animated buttons
  • levels with 2 states
  • levels with multiple states
  • groups of graphic items
  • project pages and popups
Editor window Gallery Graphics.png


Project gallery (Gallery > Project Gallery)
it is a storage of images which are already used in your iRidium project. It does not contain complex objects. It operates with separate images the objects consist of.



Sound Galleries

Sound gallery in Studio (Gallery > Sounds)
it is a library of audio files for your visualization projects. They are played at event activation (pressing on an item, releasing it, etc.). Assigning of sounds to graphic items is made by the DragDrop method. Then the sounds are displayed in the Programming tab of the Object Properties window:

Editor window Gallery Project Sounds.png

When clicking on [...] in the Programming tab the macros editor will open:

Editor window Sound macros.png
  • Play Sample - to play the audio file (indicate the name)
  • Play System Sample - to play the standard system sound (select one out of two available)
  • Stop Sample - to stop playing of the audio file (indicate the name)
  • Stop Slot - to stop playing of the particular slot (from 1 to 32)
  • Stop All Sounds - to stop playing of all sounds

Double-clicking on the audio file string opens playback settings:

Editor window Sound settings.png
  • Sound - the audio file name;
  • Slot - the number of the playing slot for the audio file (it is required when grouping audio files in streams). In total there can be 32 slots with unlimited number of audio files in each slot. By default it is indicated "Slot 0" (a new playing channel is formed without a slot);
  • Volume - the volume for playing the audio file;
  • Loop - it activates (True) or deactivates (False) repetition of playing the audio file


Supported audio-formats:

mp3 (with fixed and variable bitrate)
wav with the following codecs:
PСM (sound depth - 8 or 16 bit, sampling frequency- from 8 to 96 kHz)
IMA ADPCM (sound depth - 8 or 16 bit, sampling frequency- from 8 to 96 kHz)
MS ADPCM (sound depth - 8 or 16 bit, sampling frequency- from 8 to 96 kHz)
GSM (sampling frequency 8 kHz, sound depth 16 bit)
MS GSM (sampling frequency 8 kHz, sound depth 16 bit)
mu-Law (sampling frequency 8 kHz, sound depth 16 bit)
A-Law (sampling frequency 8 kHz, sound depth 16 bit)
OGG


Project Gallery (Gallery > Project Gallery)
it contains only the sounds used in the iRidium project.



Working with Images


Background Images

Editor window Gallery put image.png

Use the “Put Image To Page Background” command in the right-click menu to make an image the page/popup background. This command does not work for complex Gallery objects.
You can also select the page background in Object Properties > States, the Image property


Main Images, Icons

Editor window Gallery add as image.png

A button can display 2 images at a time:

  • Image - the base image
  • Icon - the icon over Image



Select how the image will be used when dragging it on the button (see more information about Chameleon Image below)

Settings of images and icons in the States tab:

Editor window Object Properties change image.png

You can change images and icons in object properties, States:

  • Image – a main image
  • Icon – an icon image (placed over the main one)
  • Chameleon Image - an image in the PNG format which, when assigned to the button, uses the button colors of its filling and border to define the colors inside the image.
  • Icon Align – the way of aligning the icon relatively to the item sides
  • Image Aligh – the way of aligning the main image relatively to the item sides



The States tab refers to Project Gallery where the images which are already used in the project are stored.


Chameleon Image

Chameleon Image is an image without the fixed color. By changing the color of the button and its border you change the color of Chameleon Image. When using Chameleon Images with custom palettes they allow you to create a large number of color schemes for one template and also highlighting, glowing, the shadow and depth effects.

Chameleon image is an image in the PNG format consisting of four color channels (alpha, red, green and blue: ARGB). The colors are processed as follows:

Editor Chameleon Image.png
  • Alpha - the item form
  • Red - the area which will be filled with the item filling color
  • Green - the area which will be filled with the item border color
  • Blue - it is not used



In order to distinguish transparency correctly save your PNG file in RGB colors (32-bit).


Example of setting up the color scheme of Chameleon Image and the results:

Editor examples of Chameleon Image.png
Editor examples of Chameleon Image result.png



Execute: URL Schemes

URL scheme - in is an indicator to the resource which can be activated by iRidium commands. With the help of URL schemes you can start applications, open links in the browser, open mail agents, make calls, send SMS.

There are different URL schemes for different OS. Consider the type of the operating system in which the project will work when you select the commands.


Activation from iRidium

In iRidium you can create a button which open a third-party application or link in the browser. Examples of commands which can be executed in different OS:

AppCallFromUI.png

Hyperlinks:

  • Execute(http://iridiummobile.net)


Windows files and applications:

  • Execute(c:\Program Files\iRidium.exe)


the screen keyboard (Windows):

  • Execute(osk)


Make a call, write an SMS:

  • Execute(tel:+123456789)
  • Execute(sms:+123456789)


Send an e-mail:

  • Execute(mailto:test@example.com)


Start the app:

  • Execute(videos://)
  • Execute(music://)


iOS 8 and iOS 9 Settings app (there is no solution for iOS 10 yet):


i3 pro settings on iOS 9-10:

  • Execute(app-settings://)


URL schemes for iOS and Android are not identical

some applications cannot be launched as the developer did not provide such possibility!


Activation from JavaScript

Create a JavaScript file in the script editor of iRidium Studio for commands to be executed on clicking the button or activating and event in the system.

IR.Execute("http://iridiummobile.net");

You can see more information about working with JavaScript in JS Guide.



Activating iRidium from other applications


URL schemes of starting i3 pro can be activated from the browser or mail agent similarly to hyperlinks to network resources. Use the commands:

  • i3pro://
the command for application activation (open or maximize). Works in the browser of iOS/Android devices with i3 pro. it can be executed as a hyperlink in the browser, mail agent or another application
  • i3pro://script?data1&data2
the command of application activation at the script activation
the data string which will be sent to the script, in the query property. IR.AddListener(IR.EVENT_RECIEVE_SCHEME,0,function(query, source) {}); - the listener which has to be created in your iRidium project to receive data from URL schemes


Example:


A URL scheme in a third-party application, browser:

i3pro://script?Page1

The handler of the URL scheme in iRidium:

IR.AddListener(IR.EVENT_RECIEVE_SCHEME,0,function(query, source) 
{
   if (query == "Page1")   
      IR.ShowPage("Page 1");
});



Visualization Effects

iRidium supports animation of pressings on items, frame animation of items, animation at page/popup opening and special iRidium Script libraries.


Animation at popup opening

In popup properties Object Properties > General indicate the animation effects which will be used at popup opening/closing:

Editor Object Properties popap effects.png


  • Lifetime (ms) – popup lifetime. After this time the popup will be automatically closed.
  • Effects – the effects of opening and closing the popup. You can use a custom combination of effects.
    • Fade - the popup changes the level of its opacity
    • Rotate - the popup moves rotating around the main axes
    • Slide - the popup slides from the side of the screen or "from itself"
    • Scale - the popup increases or decreases its Х and Y coordinates from 0 to the preset one
    • TV Scan - the popup appears after changing the Y coordinate from 0 to the preset one

Settings of effects:

  • Duration (ms) - the duration of effect performance
  • Delay (ms) - the delay before the effect activation
  • Tween - the direction in which the popup moves when opening or closing



Pressing Effect

To create a visual effect on pressing, use different images for the item active and inactive states:

Editor effect of pushing on button.png

The item states changes on pressing, if you select "Feedback: Momentary" in its settings.
The item states changes when receiving feedback when you select "Feedback: Channel".



«Fast Effects»

It is a tool for automatic creation of animation effects on the basis of the first (inactive) button state.

Add an image in the project and press on the «Fast effect» button in Tool Box. In the properties of the modified state indicate:

  • Offset of the image relative to the initial position
  • Transparency of the new state (the item alpha channel)
  • The font color and size for the new state


Editor Rapid effect on button.png
Editor Rapid effect on button action.png



Frame Animation

To create an item which animation cycle runs all the time:

  1. Create an item with the Multistate Button type and states containing animation frames
  2. The animation must run in cycles Repeat: True
  3. The feedback type Feedback: On will provide sequential cyclic display of the animation frames


Editor examples of create animation logo.png

To create an item which animation cycle starts running when receiving a non-zero value (logical one):

  1. Create an item with the Multistate Button type and states containing animation frames
  2. The animation must run in cycles Repeat: True
  3. Select the feedback type Feedback: Blink


Editor examples of create animation element.png


To create an item which animation cycle starts running at user pressings:

  1. Create an item with the Multistate Button type and states containing animation frames
  2. The animation must run in cycles Repeat: True
  3. Select the feedback type Feedback: Momentary


Editor examples of create animation button.png



Project Optimization

Editor Delete Unused Files menu.png

Use the Delete Unused Files option to delete images which were added in the project but are not actually used.

Such images lengthen the time of upload and increase the project size. The frequent reason for appearance of such images is item scaling as the copies of images in the new size are created at that.

Make sure your project does not have unused files before uploading it on your control panels:



Project Merge

Use the video-instruction to learn how to merge your project with a ready Script module (with its own graphic and driver parts) or any other project fast and easy: