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.
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):
| 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 Tweener / Time
|
the type of animation at list scrolling / (ms) the speed of list scrolling
|
| Attach To
|
the way of "sticking" popups to the edges of the base list item:
- Center - the center of popups sticks to the central line of the list (centering). It does not suit of popups are wider (higer) than a list
- Stick Up - left (top) edges of popups stick to the left (top) border of a list
- Stick Up & Down - popup adges stick to list borders к (in the direction of scrolling). It suits large popups that can be opened "in parts"
- Columns - a list is filled in with columns of popups. Vertical: from left to right and from top to bottom. Horizontal: from bottom to top and from left to right
- No - a list without sticking to popup edges.
|
Command to equipment are assigned to graphic items on the popups of the list.
Trend
Linear Trend graphic items are used for building trends of variable changes in time.
Trends can be built in real time receiving information about variables directly from automation equipment. You can also use historic data together with the current variable values. The historic data can be stored only on iRidium server.
To save the history of changes set up saving of the variable in the server database. The setting is performed in the server project. When the variable is saved in the database, you can request the trend of its changes from i3 pro. The trend will unite the historic and actual data depending on the settings of the Linear Trend graphic item.
The setting of trend displaying is performed in the project for control panels.
1 Create the variable which has to be displayed on the trend. Set up the variable storing in the database in the iRidium server project.
The format of the data saving (Signed 32-bit, Float 64-bit) depends on the variable size. To save fractional values always use Float 64-bit.
You can save the variable with the selected frequency (Interval) or when changing it by more than the indicated value (Deadband).
2 Create a graphic item, select Type: Linear Trend. Drag one or several feedback channels for which you want to display the trend of changes on the item:
3 Go to the trend settings and describe its appearance:
- Trend - the main trend properties: work with the database, time range, main curve
- Range - trend time interval (axis X). When uploading a value from the database, it will show information for this time.
- Main Curve - select the main variable on the trend (it will be drawn brighter than the others)
- Background, Data View, Border - the design of the trend color scheme, see the example
- Cursor - under development
- General - the main time axis settings (axis Х)
- Visible Axis X - to display the time axis
- Position: Top - the time scale begins from the top, Down - from the bottom
- Line - the time scale settings
Major - axis and serif settings (scale)
Minor - additional serif settings (scale)
- Visible - to display the time scale
- Color - axis and serif color
- Depth - axis and serif width
- Interval - time interval on the time scale
- Serif - serif size on scale
- Count - the number of additional serifs on the scale
- Label - signing of the time scale (template, font, color, indent from axis)
- Text - signing of the time axis (text, font, color)
- General - the main value axis settings (axis Y)
- Visible Axis Y - to display the time axis
- Position: Left - the scale begins from the left, Right - from the right
- Range - range of values on the axis (from min to max)
- Auto scale - the axis automatically adjusts to the values coming from the database
- Min/Max - min/max axis value
The remaining settings are similar to the X axis.
- List of channels - the variables displayed on the trend and their individual settings (General, Axis X, Axis Y)
- Individual curve settings for multiple channels - the type of display, color and depth of each curve in the trend
- Color - curve color
- Type - the type of display:
- Dotted line - the curve is plotted as individual points
- Line - the curve is plotted as a solid line
- Square line - the curve is plotted as blocks
- Depth - curve width
- Setup Axis X and Y - enable individual axis settings for this curve (if disabled, the main axes of the trend will be displayed)
- Tag - the tag full name, it indicates to the driver and server variable from which data comes. It enables control of the variable via JavaScript
- Axis X, Axis Y - individual settings of the trend axes (similar to the settings of the main axes)
Trend examples:
Control the display of trends using a script
Filling in a Graph from a Script Array
A graph can be created not only on the basis of values from the database, but it can also be done manually, with the help of a script array.
To build such a graph, create a new graphic item - Linear Trend and a button to build a graph in the project.
Create a new script.
var l_oPage = IR.GetPage("Page 1");
var l_oTrend = l_oPage.GetItem("Item 1");
var L_oCurve = l_oTrend.GetCurve("test");
var l_aArray = [[0, 60], [1, 30], [2, 90], [ 3, 10], [4, 60], [5, 20], [ 6, 80]]; // an array, where values for the graph are filled in
IR.AddListener(IR.EVENT_ITEM_RELEASE, l_oPage.GetItem("Get_SCRIPT"), function(){
L_oCurve.SetData(l_aArray , 0, l_aArray.length);
});var l_aArray - an array, where values must be entered to build a trend.
The trend from the example, creatd with the help od script array
Filling in a Graph from an External Database
To get information from the external database, set connection of iRidium pro to the database via ODBC driver.
1 Create a server project.
2 Set connection to the database. To do it, add a new script to the server project.
IR.AddListener(IR.EVENT_START,0,function()
{
IR.SetTimeout(2000, function(){
var MySQL = new ODBC("root", "", "MySQLresurs"); // creating database connection object
if(MySQL == false)
{
IR.Log("Wrong connection");
}
else
{
IR.Log("Right connection");
}
var response = MySQL.Query("SELECT * FROM test");
if (response) // if connection is successful and answer exists
{
var rows = response.GetRows();
var columns = response.GetColumns();
var data = {}; // two-dimension array with query result
for (var i = 0; i < columns; i++) {
var colName = response.GetColumnName(i);
data[colName] = [];
for (var j = 0; j < rows; j++) {
data[colName][j] = response.GetRowValue(i, j);
}
}
response.Free(); // free memory of recordset (optional action for memory optimization)
IR.Log(JSON.Stringify(data));
IR.SetVariable("Server.Tags.Data",JSON.Stringify(data));
}
});
});3 Create a virtual tag via which data will be sent from the server project to the panel project.
4 Create a panel project.
5 Add Linear Trend to the project and set it.
6 Add a button, that requests data from the database by press.
7 Add a script to the panel project.
var l_oDevice = IR.GetDevice("iRidium Server");
var l_oPage = IR.GetPage("Page 1");
var l_oTrend = l_oPage.GetItem("Item 1");
var L_oCurve = l_oTrend.GetCurve("test");
var l_aArray = [];
IR.AddListener(IR.EVENT_ITEM_RELEASE, l_oPage.GetItem("Get_BD"), function(){
L_oCurve.SetData(l_aArray , 0, l_aArray.length);
});
IR.AddListener(IR.EVENT_TAG_CHANGE, l_oDevice ,function(m_sTag, m_sData){
if(m_sTag == "Data"){
l_aArray = [];
var m_oData = JSON.Parse(m_sData);
for(var Index in m_oData["X"]){
l_aArray[Index] = [m_oData["X"][Index], m_oData["Y"][Index]+0];
}
}
});
Line Chart
Line Chart is a graph of variable changes where dots - variable changes are connected with a line. Changes of several values can be displayed on a graph. Unlike the Linear Trend item, Line Chart has a feature of gesture control.
The chart displays values from the iRidium server database. Some Line Chart parameters are available for modification in the script.
i3 pro does not store its own database, so the charts display information received from iRidium server.
Setting up charts
- Setting up saving the history of changes in a feedback channel in the iRidium server database
- Setting up the display of history on the chart: creating Line Chart graphic items in the i3 pro interface and assigning to them several feedback channels which history will be displayed.
1. Save the history of a feedback channel in iRidium server database
A driver feedback channel or a virtual feedback channel can be written in the database.
To save the change history, configure the variable to be saved to the server database. You set up it in the server project. When the variable is saved to the database, its change chart can be requested from the i3 pro application. The chart will combine historical and current data depending on the settings of the Line Chart graphic item.
You set up the display of the chart in the project for the control panel.
Create a variable to be displayed on the chart. Set up saving the variable to the database in the iRidium Server project.
Parameters for saving data in the database:
- Persist – save the last value written in the variable and reproduce it after restarting the server before the drivers are initialized. With the help of this parameter values are loaded without abrupt "downs", but the fact of restarting or turning off the server is not fixed in the graph.
- Store In DB – turn on saving a variable in the database, select a data format
- None – saving in the database is turned off
- Signed 32bit – save as a signed integer number
- 'Float 64bit – save as a floating point number
- String UTF8 – save as a string
- Load On Start – write the last value of the variable from the database in the feedback channel when a server is launched
- DB Save Strategy – a strategy if saving data: select a type of event which is saved in the database:
- Deadband– saving when a variable changes at a value different from the prevous one by a set value or more.
- Deadband(value) – the minchange of a variable, that is written in the database.
In Deadband: 0 any value is written in the database and nothing is written if the same number comes to a value. But, if data are written as a string, they are saved every time, as strings are not compared.*
- Interval – saving periodically. Data are written with a set time interval.
- Interval (Value) – select an interval from 5 seconds to 1 hour, or enter it manually (Custom) in ms If String UTF8 is selected in Store In DB, data are saved once a minute, more frequent saving can't be set (Use Deadband strategy)
- Interval Value - a value of the interval (min 1);
- Interval Units - measure units;
- Forward value to - forwarding a value from one tag to another one(read more here);
Saving at an interval is convenient for variables that change the values smoothly and are quite inactive, for example, temperature and humidity of air.
Saving "at a change" is suitable for variables for which it is important not to miss the moment they are changed. For example, turning on/off the light, changing the speed of fan rotation can be saved in the database.
2. Display valuable history on a graph
1 Create a panel project from the server project or synchronize the current one.
2 Create Line Chart graphical item in the i3 pro interface and assign to it a server feedback channel, the history of which must be displayed:
Simple settings
Double click on an item opens appearance settings of a graph and each curve:
- Name – the name of a curve
- Tag – server variable from which a graph gets data to build a curve
- Line type – a type of a curve
- Solid line – dots of a curve are connected with lines, it's a solid line
- Dotted line – dots of a curve are connected with lines, it's a dashed line
- Square line – a curve is built in steps from a dot to a dot, the line is solid
- Width – the width of a line or a dot
- Line color – the color of a line
- Fill color - fill color of the area under the graph line
- Background color - the color of the graph area
- Text color - the color of data text located on the axes
- Grid color - the color of the grid
- Range – range of values on the time axis
- Auto-scaling – auto-scaling is set from the lower to the upper value of the curve on the interval
- Min ... Max (if Auto-scaling is on) – a fixed range to display data
- Advanced settings - it is used to switch modes of the window with settings
Advanced settings
Activate the “Advanced settings” checkbox to open detailed settings, which are divided into tabs:
1. Chart lines:
- Name – the name of a curve
- Tag – server variable from which a graph gets data to build a curve
- Line type – a type of a curve
- Solid line – dots of a curve are connected with lines, it's a solid line
- Dotted line – dots of a curve are connected with lines, it's a dashed line
- Square line – a curve is built in steps from a dot to a dot, the line is solid
- Width – the width of a line or a dot
- Line color – the color of a line
- Fill color - fill color of the area under the graph line
2. Chart area
- Chart background color - the color of the chart area
- Axis background color - the color of the area under the axes
- Show border - it enables display of the frame
- Width - the width of the frame line
- Color - the color of the frame
- Gesture control settings
- Scroll chart
- Zoom in/out chart
3. Grid lines
- Color - the color of the grid lines
- Width - the width of the grid lines
- Major gridlines - the main grid by the number of marks on the Y axis
- Minor gridlines - additional grid
- Number of additional lines
4. Horizontal axis
- Range – range of values on the time axis
- Position – location of the time axis: on the top or bottom of the graph
- Color – axis line color
- Width - the width of the axis lines
- Show axis - it activates the display of the axis, the Axis Name Settings and Time and Date Label Settings
- Axis name settings - settings for displaying and styling the axis name
- Show axis name - it activates the display of the name and its settings
- Time and Date Label Settings - settings for displaying and styling the time text
- Show time and date - it activates the display of time and date on the axis
5. Vertical axis:
- Auto-scaling – auto-scaling is set from the lower to the upper value of the curve on the interval
- Min ... Max (if Auto-scaling is on) – a fixed range to display data
- Position - location of the data axis: on the left or right of a graph
- Marks quantity - marks on a graph with a set interval (integer number)
- Axis name settings - settings for displaying and styling the axis name
- Show axis name - it activates the display of the name and its settings
- Settings of the axis value labels - settings for displaying and styling data text
Show time and date - it activates the display of time and date on the axis
Example:
https://drive.google.com/file/d/1aVJ9UOnORL2XsxN817QTyx9QvvNJKGn-/view?usp=drive_link
Circular level
Circular level is a type of level with a slider moving on a circular scale.
1 Create a variable to control. Set it as described in the manual.
2 Create a level and set it this way (see all settings):
| 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)
|
| Mode |
Modes of a circular level:
- Simple (with one slider and one active zone),
- Double (with two sliders),
- Triple (with three sliders),
- Looped (endless).
|
| Min Angle / Max Angle |
Limits of the slider rotation angle in degrees: admissible values are from 0 to 360, the start and the rotation direction is similar to hands of a clock. You can set Min Angle / Max Angle identical or equal to 0 and 360. In this case the circular level will rotate without angle limits.
|
| Min Value / Max Value |
Limits of changing the level value
|
| Invert Range |
Direction of level rotation:
- False - clockwise,
- True - counterclockwise.
|
| Range Type |
Type of range:
- Integer - integer
- Float - floating point
|
| Active Zone |
The size of the active zone in per cent from 0 to 100:
- 100 - the whole level is an active zone,
- 0 - no active zone, only the slider zone.
|
| DrawFullFirstState |
Displaying an inactive sector of a circular level:
- False - a circular level is not displayed in an inactive sector,
- True - a complete circular level is displayed (Empty state is displayed in an inactive sector).
|
| Slider |
Slider appearance
|
| Slider Color |
The color of a slider
|
| Slider 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.
|
| Slider Offset |
Shifting the slider image along the slider axis from the center to its upper point in pixels. It is always a nonnegative value.
|
| Slider Stretch |
Fitting the slider image to the size of a circular level
|
| Default Value |
Default value for this slider
|
3 Drag the variable on the level and indicate in the dialog:
| Action
|
Send Token - sent to the variable a Value taken as the current position of a slider in the range from Min Value to Max Value.
|
| Event for Action
|
An interface event connected with the button. When an event happens, the set value is written in the variable
- Press - send Value by press,
- Release - send Value by release,
- Move - send all intermediate values during slider movement.
Add Delay command (100) before a command by Move to decrease the equipment load (with Delay command, Move works no oftener than 100 times in a millisecond).
All three events can be used at the same time.
|
| Add a feedback channel
|
(Create a feedback channel) Put this tick as it is required that a sider move according to the current variable state.
|
4 Now the variable is connected to the level. You can see all relations in OBJECT PROPERTIES > Programming
Modes of circular level
Simple - a simple circular level can be used to control volume, light, etc.
Looped - endless circular level
A level is covenient to use if you want to sent an exact value. When this mode is selected, "Changing Angle" property appears that sets the maxumum number of a level turns required to get the maximum value.
Here is an example with volume settings (level values are between 0 and 100), when the value is 60, music is quiet, but when it is 65, it is very loud, 62 is the optimal value. There can be difficulties with setting in-between values on a simple circular level. In this case an endless level can be used.
To do it, select the required mode of a circular level and set in "Changing Angle" a required values (2 - 1 turn = 50, 4 - 1 turn = 25, etc.). 62 value can be easily set this way.
Double - level with two values
It can be used, for example, to set a temperature sensor. One value is temperature set in the sensor and the other value is the current temperature in the room. Heeting is on until the set temperature is exceeded by a maximum value, when it is reached, the heating is off.
To do it, make the following settings in the created level.
1 Set Double mode
2 Set Slider Hit parameter of one of the values as Display Only for the user not to be able to control it. This value displays 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 - level with three values
An example for this mode is the same as for Double mode. But in this mode 3 values can be set: minimum, maximum and current temperature in the room. Thus, heating is turned on when the minimal set temperature is reached, and it is off, when the maximum set temperature is reached.Thus, a required temperature in the room can be supported automatically.
Setting this mode is very similar to Double mode.
1 Set Triple mode
2 Set Slider Hit parameter of one of the values as Display Only for the user not to be able to control it. This value displays 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
A circular level with more than 2 states. Changing the level value (rotation) sends to the variable a 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 to control. Set it as described in the manual for the driver you use.
2 Create and set Multistate circular level, create a required number of states, each of which is responsible for the level display.
| Type |
Multistate 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)
|
| Mode |
Modes of a multistate circular level:
- Simple (with one slider and one active zone),
- Looped (endless).
|
| Min Angle / Max Angle |
Limits of the slider rotation angle in degrees: admissible values are from 0 to 360, the start and the rotation direction is similar to hands of a clock. You can set Min Angle / Max Angle identical or equal to 0 and 360. In this case the circular level will rotate without angle limits.
|
| Min Value / Max Value |
Limits of changing the level value
|
| Invert Range |
Direction of level rotation:
- False - clockwise,
- True - counterclockwise.
|
| Range Type |
Type of range:
- Integer - integer
- Float - floating point
|
| Active Zone |
The size of the active zone in per cent from 0 to 100:
- 100 - the whole level is an active zone,
- 0 - no active zone, only the slider zone.
|
| DrawFullFirstState |
Displaying an inactive sector of a circular level:
- False - a circular level is not displayed in an inactive sector,
- True - a complete circular level is displayed (Empty state is displayed in an inactive sector).
|
| Slider |
Slider appearance
|
| Slider 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.
|
| Slider Offset |
Shifting the slider image along the slider axis from the center to its upper point in pixels. It is always a nonnegative value.
|
| Slider Stretch |
Fitting the slider image to the size of a circular level
|
| Default Value |
Default value for this slider
|
Drag the variable on the level and indicate in the dialog:
| Action
|
Send Token - sent to the variable a Value taken as the current position of a slider in the range from Min Value to Max Value.
|
| Event for Action
|
An interface event connected with the button. When an event happens, the set value is written in the variable
- Press - send Value by press,
- Release - send Value by release,
- Move - send all intermediate values during slider movement.
Add Delay command (100) before a command by Move to decrease the equipment load (with Delay command, Move works no oftener than 100 times in a millisecond).
All three events can be used at the same time.
|
| Add a feedback channel
|
(Create a feedback channel) Put this tick as it is required that a sider move according to the current variable state.
|
4 Now the variable is connected to the level. You can see all relations in OBJECT PROPERTIES > Programming
Picker
Graphic item that can be created with the help of the script. It is notto work with equipment directly. It allows to form a list of items (based on the general template) to change the number of items and information in them. The main example of its use in projects is to set date and time.
- Create a new popup, a a template for a picker string.
- Form a set of data with the help of Java Script on the basis of which a picker is made of (for example, a list of dates and months).
Use Picker API to create and fill in the list
- Create graphical appearance pof your picker.
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):
- 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:
- 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.
- 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.
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:
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. Coordinates of Top and Left popup location can be changed by setting the Use checkbox:
|
| 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. Coordinates of Top and Left popup location can be changed by setting the Use checkbox:
|
| 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.
The Hide Group command hides any opened popup of the group:
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:
- 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:
Project Screensaver
step 1 Create a screensaver page
step 2 Set up the "back" button to return to the project, the "Prev Page" command:
step 3 Select a screensaver page in Project Properties:
ScreenSaver - a screensaver
- On/Off – turn on/off a screensaver in the project
- Interval (сек.) – an interval of ilde time of a project after which the screensaver appears
- Show Page - if it is on, in the set interval a screensaver page appears
- Landscape Page – a page that is used as a screensaver in the Landscape orientation of a project
- Portrait Page - a page that is used as a screensaver in the Portrait orientation of a project
- Start Script - if it is on, a script is executed
- Script Name on Start - the name of a function in the script
A script can be executed when a screensaver appers. For example, brightness of the screen can be reduced with the help of the following method IR.SetVariable.
Password for Opening Pages (Popups)
Use the system of passwords when setting up pages and popups.
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):
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 menu of application:
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):
You can also use the method to call the system function TouchID and use a fingerprint to unlock pages and popups.
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.
After saving the project with the new resolution two dialog windows will appear:
1. Confirm scaling
- "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
- "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.
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
Multistate Button
- Press
- Release
- Hold
- End of Hold
Multistate Level
List
Up/Down Button
- Press
- Release
- Hold
- End of Hold
Trigger Button
- Press
- Release
- Hold
- End of Hold
Edit Box
Virtual key
Joystick
Static List
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:
- short pressing on an item generate the events Press > Release
- long pressing on an item generate the events Press > Hold > End Of Hold
- moving of the Level and Joystick slider generate the events Press > Move > Release
- 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:
- the start of scrolling deactivates the Release event. So at short pressing with moving, only the Press > scrolling event of the button will work
- 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
- 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:
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. Coordinates of Top and Left popup location can be changed by setting the Use checkbox:
|
| 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. Coordinates of Top and Left popup location can be changed by setting the Use checkbox:
|
| 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:
|
to delete the selected macro
|
|
to move the selected macro one position up
|
|
to move the selected macro one position down
|
|
to clone the selected macro
|
|
to delete the group of macros
|
|
save the group of macros in Project Gallery - Macros
|
Saving macros:
- Create a command sequence and click the "Save" button
- Name the new macro command, click ОК
- 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
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:
- open the All Relations window
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.
Working with elements that caused Script Call
When using Script Call, you have the opportunity to access the properties of an element that uses the Script Call function.
Example.
Create a script function that will take the value of the Text property of the element that called the function, increment the value by one, and write it back. Running the function is tied to an element via Script Call
var a = 0;
function action () {
a + = 1;
this.Text = a; // Refer to the Text property of the element that called the function
};As a result, the function will change the value of the element that called it
[Download example]
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
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:
When clicking on [...] in the Programming tab the macros editor will open:
- 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:
- 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
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
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:
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:
- 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:
Dynamic Images
More: IP cameras and DVR.
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:
Hyperlinks:
Execute(http://iridiummobile.net)
Windows files and applications:
Execute(c:\Program Files\iRidium.exe)
the screen keyboard (Windows):
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 и iOS 9 (для iOS 10 решения пока нет):
i3 pro settings on iOS 9-10:
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:
- 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:
- 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:
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
Frame Animation
To create an item which animation cycle runs all the time:
- Create an item with the Multistate Button type and states containing animation frames
- The animation must run in cycles Repeat: True
- The feedback type Feedback: On will provide sequential cyclic display of the animation frames
To create an item which animation cycle starts running when receiving a non-zero value (logical one):
- Create an item with the Multistate Button type and states containing animation frames
- The animation must run in cycles Repeat: True
- Select the feedback type Feedback: Blink
To create an item which animation cycle starts running at user pressings:
- Create an item with the Multistate Button type and states containing animation frames
- The animation must run in cycles Repeat: True
- Select the feedback type Feedback: Momentary
Project Optimization
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:
