Projects for control panels
This section describes work with iRidium Studio when creating graphic interfaces for control panels. Graphic interfaces can work with equipment directly or via iRidium Server.
Create a new project for your control panel:
iRidium Studio > File > New > New Panel Project
After starting iRidium Studio and creating of Panel Project you can see the workspace which consists of:
- Studio settings
drop-down lists from which you can go to the editor settings: File, Project, Tools, Help, View
- Drawing tools
tools for fast creation of graphic items. After selecting a style and indicating the scaling possibility, you can add buttons, levels and other objects in projects fast and easy.
- Project Overview
displays the structure of the project graphic part, enabling you to add new items to it (pages, popups, folders).
- Object Properties
the part of the Project Overview panel. It contains information about the selected object – a page, popup or graphic item.
the gallery of images and sounds which can be used at interface creation.
отображает внешний вид страницы или окна, выбранного в Project Overview. Здесь размещаем графические элементы для страниц и окон проекта, привязываем команды к элементам.
- База данных (Device Base)
хранилище встроенных драйверов (продуктов) iRidium. Включает инструменты создания драйверов для пользователей и дополнительные базы скриптовых драйверов.
- Дерево устройств (Project Device Panel)
отображает драйверы, которые используются в проекте и все их команды и каналы. Из дерева можно перетащить команды в рабочую зону (на элементы)
- Параметры устройств (Properties)
часть Project Device Panel, где настраиваются параметры драйвера, команды или канала, выбранного в дереве устройств проекта.
- GC Cloud (IR Database)
база ИК команд для использования с преобразователями Global Caché
Workspace - space for creating and positioning project graphic items.
Using Tool Box, you can set up Workspace scale, grid displaying, add or remove item states, switch between the item states and set up particular item properties:
|Select – select a graphic item выбрать|
|Draw Item - create a graphic item|
It is a convenient tool both for beginners and experienced users. It helps to create items and blocks of interface items fast, selecting them from the ready list of templates. The templates can be created in different styles and items added from them can be scaled.
The panel is located on the left side of iRidium Studio. Working with the panel includes three stages:
- style selection – to define how the item templates will be drawn
- scaling method selection – to add items in their initial size or scale them
- item template selection – depending on what item has to be created at the moment
When the tool is set up and selected, you can go to the editor workspace, on a project page or popup and start creating items the same way it is done with the standard tool for drawing buttons.
Ready designs for Studio
On the iRidium mobile web site you can download and buy ready visualization interfaces on the basis of which you can set up control of any iRidium supported equipment:
Information in Workspace
When working with the editor you can select which graphic item properties you want to display in Workspace. The selection is made in the dropdown list of the View Info button in Studio Tool Box:
Displaying Workspace items
- Select all – select all items on the page
- Unselect all – сunselect all items
- Name – display the name of graphic items in Workspace
- Frame – display the border of graphic items in Workspace
Tool Box contains buttons for activating editor tools and settings. It also includes the side buttons which activate Studio panels – the windows which can be hidden.
Show the current item state
|Загрузить на панель
Upload the GUI on control panels via Transfer
Settings of open projects
You can open the settings using one of the following ways:
Cпискок настроек открытого проекта:
- 1. Job Notes (information about the project)
- Customer/Order - the customer name, the order number
- Project Name - the project name
- Address - the address of the automation object
- Phone - the customer phone number
- Landscape Width/Height - the project resolution when displaying it in the Landscape (horizontal) mode (in pixels). The projects which have the Portrait orientation the size should be written as width/height for horizontal pages
- 2. Description (notes about the project, version history)
- 3. Wizard (fast creation of interfaces from ready pages)
it is used for creating a project from a standard set of ready pages. After adding the pages to the project it is necessary to link them by navigation commands to be able to go from one page to another.
- 4. Resize Project (settings of project scaling)
it is used when you change the resolution in the General tab of project settings. They affect the appearance of images and icons.
- 5. General (main project properties)
- Project Name - used when saving the project
- Target Device - the device you plan to launch your project on. It defies the GUI resolution.
- Landscape Width - the width of the horizontal project page. You should indicate the value for the horizontal page even if your project is vertical.
- Landscape Height - the height of the horizontal project page. You should indicate the value for the horizontal page even if your project is vertical.
- Password - the password for project opening and editing
- 6. StartUp (start settings)
- Page - indicate the page which will open after you start the project
- Popups - indicate the list of popups which should open over the start page. They will open one over another in the order you indicate.
- 7. App Settings (properties of the iRidium App application when working with the project)
- General - the settings used for all OS
- Sound On - to turn all sounds in the application on/off
- Clear Token - to clear/store data from Project Tokens when relaunching the application
- Scripts in Background Mode - not to stop work of scripts when the application works in the Background mode
- Scale Type [Proportional/FullSize/None] - he way of scaling the interface to the size of the control panel
- None – not to scale
- Proportional – to scale to the size of the panel saving the proportions
- Full Size – to scale to the size of the panel without saving the proportions
- Background Color - filling of the empty areas on the screen when the project proportions or resolution does not correspond to the size of the panel screen
- Windows/OS X - settings are used only on Windows/OS X
- Fullscreen - to launch the project in the full screen mode
- No Frame - to add/remove the application frame
- Always on top - to show above all popups
- Show cursor - to show/hide the cursor
- Custom position [X/Y] - to open the application window in the selected area of the screen
- 8. Screensaver
- Page - the name of any project which will be used as a screensaver
- Interval - the time (sec) during which the project should not be interacted with so the screensaver could open automatically
- 9. Remote Debugging see the application debugging for your OS
Change project size
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.
It is a tool for creating programs in the Java Script language using iRidium API - Java Script methods and evenr in iRidium. Programs created in such a way can control iRidium project interfaces, project drivers. It also can help you to create custom drivers.
Project clearing tool
The Delete Unused Files tool - fast deletion of 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 doesn’t have unused files before uploading it on your control panels:
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
In order to use it, select several items on the page and align them in one of the ways you see in the drop-down list.The items will be aligned relative to their sides or middle.
Select one or several items, align them using one of the ways from the drop-down list. All items will be moved to the page side or middle depending on the selected way of alignment.
Select several items which approximately form one vertical or horizontal line. For the vertical line, select the vertical interval, for the horizntal line - horizontal. The space between the items will be equal, the side groups will not change their position.
Select one or several items. Align the text - it will affect ALL states of the items.
Select one or several items. Use the Specified Size tool for the size of the selected items to become: 32х32, 64х64, 96х96, 128х128, 256х256
Table of special symbols
It is convenient for use when working with icon fonts: select the required symbol, copy it and paste into the item text field.
For the symbol to be displayed the same way as in the table, select the same font in the settings of the graphic item.
Control of item states
Select a graphic item in Workspace. It contains from 1 to several states which can be controlled with the help of Tool Box or via the tab Object Properties > States
|Current State. The active (displayed at the moment) state of the graphic item|
|Prev State. Go to the previous item state|
|Next State. Go to the next item state|
|Add State. Add an item state|
|Delete State. Delete the item state|
Object Properties > States
The "Undo" and "Redo" commands work only in the Workspace window and only for graphic items. Changes of object properties or states (color, text, image...) cannot be undone/redone with these commands.
Graphic items, pages, popups, equipment channels and tokens can be related in the project and communicate. You can see all relations in the All Relations window. Here you can also add "a relation" to send data from one object to another:
- for example, with the help of the value received from the slider of Item 1 you can change the coordinate of Item 2.
Uploading on control panels
When clicking on the button for the first time, iRidium Tranfser will open (if it was closed) and offer to select the control panel for uploading the graphic interface opened in the editor:
Click OK to start the upload.
For the list of panels not to be empty, click on the Panel Search button in iRidium Transfer beforehand.
Project Overview enables creation of new Pages and Popups. It is opened with the help of the button on the left side editor panel.
The page or popup selected in Project Overview will appear in Workspace.
|Tools of the right-click menu:|
|Add Page/Popup page – to create a page/popup|
|Delete Page/Popup – to delete a page/popup|
|Copy Page/Popup – to copy a page/popup|
|Add Item To Gallery – to add the selected page in Gallery|
|View Popup – to show one of the project popups on the selected page|
|Add Folder – to add a new folder|
To program behavior of interface items and their communication with equipment use different types of graphic items.
General (size and position)
General properties of interface objects for all iRidium items by the example of Button:
- Name – the graphic item name, set at random
- Left / Top – the item position on the page (left and top indent in pixels)
- Width / Height – the height and width of the graphic item in pixels
- Active – the item activity (reaction on events)
- True – the item is active (sends commands, receives data)
- False – the item is inactive: it is blocked for pressings and does not send commands (the inactive item becomes black and white when working with the client, this tag can be affected while the project is working on the control panel)
- Visible - the item visibility when launching the project on the control panel
- True – the item is visible
- False – the item is invisible (the tag can be affected while working with the project with the help of scripts or the Relations events)
Specifics - unique item properties defined by its type:
- Type – the graphic item type. It is selected depending on the required item behavior.
- Feedback – the way the item displays data received from the equipment
- None – user’s pressings do not affect neither the item state nor events in the system
- Momentary – data received from the equipment do not affect the item state. The item changes its state to the opposite one at pressing.
- Channel – the item state is defined by data received from the equipment. Any data can be sent by the sending event but the item will change its state only when it receives the corresponding non-zero value from the equipment.
- Invert Channel – when receiving the zero value from the equipment the item changes its state to active, when receiving a non-zero value it takes the inactive state. There is no reaction on user’s pressings (works similarly to Channel)
- On and Blink – special types of feedback used for work with Multistate Button (see description of Multistate Button)
- Hit (for Button) – the way of processing pressings on the graphic item
- Active touch – to fixate pressings on any non-transparent area of the item. The Press event on transparent part will not be processed (it will affect the item below)
- Bounding Box – to fixate pressings on any area of the item, including non-transparent
- Pass Through – not to fixate pressings on the item at all. The pressings will pass through and can be fixated on the item which is under the current one.
- Hit (for Level) – the way of processing pressings on the graphic item
- Active – to process all pressings on the item
- Display Only – not to process any pressings on the item. The item only displays data received from the controlled equipment.
- Active Centering - to fixate single pressings. The slider returns to the center of the scale after its releasing.
- Drag – the scale position changes only when dragging the slider from the current position to the required one. Single pressings are not processed.
- Drag Centering – the scale position changes only when dragging the slider. The slider always moves from the scale center and returns to the center when releasing it.
- Password Number – the number of the password which will be required when pressing on the graphic item.If the password is entered correctly all actions assigned to the item (going to the protected page, sending commands to equipment, etc.) will be performed. Passwords are set in the settings of i3 pro on control panels or in the project settings in iRidium Transfer.
Programming (commands to equipment)
Settings for communication between graphic items and controlled equipment similar for all interface items used by iRidium:
Relations, Press, Release, Hold, Move – he interface events. By activating these events you can send commands and display feedback. Command creation is performed by dragging them from and Project Device Panel in the Macros editor.
- Relations – it displays relations of the item with channels of drivers and other interface items
- Press – the list of commands to be activated when pressing on the graphic item
- Release – the list of commands to be activated when releasing the graphic item
- Hold – the list of commands to be activated in cycle when holding the item
- Move – it is used for Level and Multistate Level. It receives and sends to the equipment all intermediate positions taken by Level when moving the slider. It is used for gradual regulation. To substitute Move, use Press+Release.
Appearance of graphic items is set up in the States tab. Here you can set up properties similar for all states and unique properties of each state:
All States – the properties which define the appearance of all states of the graphic item
State 1…n – the properties unique for each state
- Color – the color of the image filling
- Color Alpha Channel – the degree of opacity of the item background
- Opacity – the degree of opacity of the whole item
- Text – the field for inputting text on the item
- Font – the font used for inputting text on the item. Requirements to specific fonts (Arabic, hieroglyphic symbols) besides the recommendation to use Arial Unicode MS:
- 1. The font format: ТТF (ТТС is not supported)
- 2. The font should include all necessary hieroglyphs or symbols
- 3. The font should support Unicode
- Text Color – the color of the text on the item
- Text Align – the way of aligning the text relatively to the item sides
- Text Effect – the text effects (select from the list) and color of the effects
- Word Wrap – the word wrap when the line is longer than the width of the item
Images and Borders:
- Border – the item border, selected from the list
- Border Color – the color of the border
- Image – the main item image
- Icon – the icon image (placed on top of the main image)
- Image Align – the way of aligning the main image relatively to the item sides
- Icon Align – the way of aligning the icon relatively to the item sides
- Chameleon Image – an image in the PNG format which uses the colors of the filling and the border to define the colors inside the image. In other words it is an image which can change its colors in the process of working with the project.
- Draw Order - an order of displaying item layers (background, image, icon, text, border)
Stretch And Filtration
- Image Stretch – stretching the main image to the item size
- Icon Stretch – stretching the icon to the item size
- Chameleon Stretch – stretching the chameleon image to the item size
- Image Filtration – selecting the way of image filtration at stretching
- Icon Filtration – selecting the way of icon filtration at stretching
- Chameleon Filtration – selecting the way of chameleon image filtration at stretching
To create or delete states of graphic items and move fast from one state to another, use the tools of the editor top panel:
To create or delete a state of a graphic item and to switch states use Object Properties > States:
Gallery can contain:
- graphic items (with several states)
- item groups
- object groups and attached scripts
- project pages/popups
- visualization projects
- links to IP cameras
Gallery is divided into Gallery and Project Gallery. Project Gallery contains only the objects used in the project.
Setting up of dynamic images (links to IP cameras) is performed in the Project Gallery tab, the Dynamic Images section.
Importing objects in Gallery
Use the import tool which is available in the right-click mouse menu:
- Import File – the import of a separate image. The import has to be performed into the opened folder.
- Import Folder – the import of a folder with images. The import is made into the Gallery root.
For creating objects with several states use the divider of group operations. Separate object states - images with the same name, divider and the state number after it - are united in one object at import.
image_1.png, image_2.png, … , image_n.png
When importing agree to import with the divider.
The divider is underscore by default. But it can be changed in the menu Tools > Options > File Operating > Divider for file group operation: [ _ ].
Importing audio is available in the Sound tab.
- Import File – to import to the opened folder
- Import Folder – to import the folder in the root of the audio catalogue
- 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)
Saving iRidium projects in Gallery
Gallery allows you to store iRidium projects:
- Open your project in iRidium Studio
- Open the "Gallery" panel, then select the "Graphics" tab
- Create a new folder in the tree and select it with the mouse cursor
- Drag the project from Project Overview to the right part of the Gallery window
- In the Export window selct the project preview (*.png, *.jpg files) or just click "Ok"
- The project will be stored inGallery - Editor\Gallery\My Projects\ in the *.irgl format
It is a database of drivers, commands and script modules for controlling different equipment. All iRidium supported devices which you can use in your projects are stored here.
It is a tool for creating preset drivers, commands and channels on the basis of the AV & Custom Systems driver.
It is a professional tool which allows to set up control of any AV equipment, media server, converter or another device. More information in the data processing section.
Project Device Panel
It is a list of devices you want to control with the help of your iRidium project. Properties of connection to equipment, commands and channels of connection with equipment are set up here.
It is a list of system variables (for example, the current date and time) which can be used in projects. See more information about system tokens in the section iRidium Studio: data processing and system tokens
In this section you can create a list of project variables which store data (strings, numbers, arrays) during project work and between project launches. See more information about project tokens in the section iRidium Studio: data processing and system tokens
This tab stores all drivers added in your project.
Devices, commands, channels and tokens are set up in the Properties window.
Setting up of connection to equipment of commands, feedback channels and project tokens.
This window displays properties if the object selected in Project Device Tree (settings for connection to equipment – IP-address, port, specific equipment properties; properties of commands and status channels).
GC Cloud (IR Database)
GC Cloud is an online database of IR commands for the Global Cache driver.
Click "Update" to download the list of manufacturers and commands (connection to the Internet is required)
The database structure:
- Brands - equipment manufacturers п
- Device Types - equipment categories of the manufacturer
- Codesets & Commands - models and corresponding IR commands
Drag the folder with commands on the IR output of the Global Cache driver in your project. The commands are preset - you do not need to edit them:
Commands and folders can be moved from one IR output of GC modules to another by dragging.
Emulator - an application launched in iRidium Studio to test the project work.
Emulator work modes see in iRidium Studio > Tools > Options > Emulator:
- Client Fullscreen - start the Emulator in Full Screen mode (press Alt+F4 to Exit)
- Client Sound On - switch sound in app
- Show log at Emuator Start - open the log window automatically at Emulator start (you can also use F4)
- F4 - open the debug log
- F5 - launch Emulator
- F7 - open the app Menu to manage account and download projects from iRidium Cloud
- F8 - open the settings (password: 2007)
Full encryption of projects (saving in the protected format)
iRidium projects (*.irpz, *.sirpz) can be saved in the protected format which will not allow other parties to get access to project editing, its settings and resources (icons, sounds, images, equipment channels).
Protected projects (*.pirpz, '*.psirpz) cannot be opened in Studio but they can be uploaded on control panels where the application will automatically unpack and start the interface.
Project encryption is an irreversible process. Files saved in the *.pirpz format cannot be turned back to *.irpz or edited. They can be only uploaded on control panels. Encrypted projects are saved together with the original ones. You can edit original projects only.
There are also means for protecting data inside *.irpz projects which work without encrypting the whole project:
Encryption of script files
You can limit iRidium Script viewing and editing by assigning an access password to it:
Password for editing
In the settings of iRidium projects (*.irpz) you can set up the password which will be required at each opening of the project. Thus, the project saves the possibility to be edited. Keep in mind that it is possible to import images and script files (do not forget to encrypt them) from *.irpz projects.
we cannot give you acces to your project or script if you lost the password. Please, take care about keeping the password safe
- Ctrl + N - to create a new project
- Ctrl + O - to open the project
- Ctrl + F4 - to close the project
- Ctrl + S – to save the project
- Ctrl + Z – to undo the action
- Ctrl + Shift + Z – to redo the action
- LEFT MOUSE BUTTON – to select the item
- RIGHT MOUSE BUTTON – to go to the item properties
- Ctrl + C – to copy the object (the group of objects)
- Ctrl + X - to delete the object (the group of objects)
- Ctrl + V – to paste the object (the group of objects)
- Ctrl + A – to highlight all objects on the page
- Ctrl + G - to group all selected items
- Ctrl + H - to ungroup all selected items
- Alt + G - to activate/deactivate the current grid
- Ctrl + LEFT MOUSE BUTTON – to copy the selected object
- Shift + LEFT MOUSE BUTTON – to clone the object on the page
- ← ↑ → ↓ - to move the selected object in Workspace (by 1 pixel)
- Ctrl + ← ↑ → ↓ - to move the selected object in Workspace (by 10 pixels)
- Shift + ← ↑ → ↓ - to resize of the selected object (by 1 pixel)
- Alt + LEFT MOUSE BUTTON - to align the text inside the item with the help of the mouse (it is necessary to set up the graphic item properties Text Align = Absolute and fill in the Text field).
- F2 – to go to the text editing window - in the current state (State)
- Shift+F2 – to go to the text editing window with positioning - in the All States tab (changes the text in all states)
- F4 – to open the log of Emulator/iRidium App for Windows
- F5 – to run Emulator
- F8 – to open settings of Emulator/iRidium App for Windows
If the editor cannot be launched and writes "List index out of bounds (1)" – go to the register (Execute > regedit) and remove HKEY_CURRENT_USER\Software\iRidium mobile Ltd.\iRidium\2\GUI
If at project Emulation all fonts suddenly disappeared it is possible that you renamed or moved somewhere the initial project file. If you try to save such a file the fonts can be damaged. In this case you have to open the *.irpz project as a ZIP archive and delete the Fonts folder in the archive. At the next launch everything will be all right.
You opened one popup and the other one closed automatically. It is how Popup Groups work in the alternative tree of pages. Change the way of displaying the tree in the right upper corner of Project Overview
You created Static List but buttons cannot be pressed when scrolling it. Use the Release event instead of Press and try not to use Trigger Button.
The command from the Move event is sent too often. Add Delay(100) ms before it and the command will be sent once in 100 ms. You can also select another interval.
You wrote a text in the item but it is not shown. Check that you write the text in the required State of the item and the text color is not transparent (see Text Color > the slider to the right: 255). If the slider is in position 0 by default, open Tools > Options > Default Control Settings > color settings and move the slider of color transparency to position 255. The problem will be solved.
You output the value on the item but it is shown as 0.00000. Change the tag "In Text" when assigning to the graphic item to In Value. In the text field write $V or another template.
You assigned a command to the button and it doesn’t work. Make sure that the events Active Touch or Bounding Box are indicated in the button settings (General > Hit). If you indicated Pass Through – the button will be "transparent", non-clickable.
Commands available in the drop-down lists File Project Tools Help View
File > New > New Panel Project
|Open Profect||Open the saved project in the editor (*.irpz)|
|Save Project||Save the selected project (*.irpz)|
|Save Project As...||Save the project with another name|
|Close Project||Close the selected project|
|Close All Projects||Close all projects opened in the editor|
|Reopen||The list of recently opened projects. Click on the project to open it|
|Save Protect project||Save the protected project (*.pirpz), which can be uploaded on control panels but cannot be edited. The encrypted file is saved together with the original one. You cannot turn it back to *.irpz or edit. More|
|Import||Import to the opened project data from controller cofiguration files or other iRidium projects:
|Exit||Close the editor and all opened projects in it. You will be offered to save changes in the projects.|
|Languages||Select the language of the editor interface|
Main settings of iRidium GUI Editor:
The mode of work with Emulator ( with connection to equipment or without it) is set up in the Client License section
|Certificates||Generation of certificated for the application store (under development)|
|Default Panels Size||Return the standard positioning of editor windows and panels.|
|Editor Help||iRidium Studio user manual|
|Update Editor||Checking for editor updates. Updates change the editor and accompanying applications. The settings stay the same.|
|Send Bug Report||Send the repot about found bugs to the technical support portal|
|About||Information about the editor version|
|View||Contains the list of toolbar tabs and tools which have to be shown or hidden in the editor window|