Эта страница является переводом страницы IRidium studio 2019 UI editor. Перевод выполнен на 94%.

Содержание

1 Visualization tools

Visualization tools

are located in the side panels of the editor:
Workspace, Project, Programming, Images, Cameras, Sounds, Resources.

The editor of graphical interfaces is available when a new project is created: File > New > New panel project in the iRidium studio

There are the following visualization tools:

WORKSPACE shows what a page, a popup or a graphical item will look like when i3 pro is launched. Workspace allows to select a graphical item and a variant of its appearance (State) to view and edit with the help of properties panels;
PROJECT a list of pages and popups of a visualization interface. It provides switching between displaying objects in the workspace and displaying their properties;
PROGRAMMING - actions done by a graphical object in i3 pro when it is pressed. Items can control inside logic of a visualization interface, as well as, send/display values received from equipment;
IMAGES - a gallery of interface objects that can be used in a visualization interface. It also contains images that are already added to the interface;
CAMERAS - archive of settings for populaк models of IP-cameras and links to cameras that are already added to the interface;
SOUNDS - archive of audio-files that can be played in an interface. It also contains files that are already added to the interface.
RESOURCES. A list of images, sounds and fonts added to the project.

WORKSPACE. Interface Display

The main area of the graphical editor is workspace. Interface objects are displayed here. Interface objects include pages, popups and graphical items located on them. Select an item in the workspace to edit its properties:

The following is available in the workspace:

Select / draw a graphical item:
1. Switching between tools is possible with the help of Select and Draw buttons in the left tool panel and with the help of right mouse button.
2. Hold "D" key on the keyboard to switch the cursor into "Draw" mode. It automatically switches to Select mode when the key is released. You can select which item to draw in the properties of the Draw tool in the left side panel. Ctrl+D is a combination of key thet switched the cursor to Draw mode.
3. Hold "L" key on the keybord to switch the cursor to "Draw lable" mode. A lable is an item with 1 varian of appearance (1 state) and a transparent background, convenient to create text blocks
4. modes of item selection:
  1. one item can be selected with a click of left mouse button.
  2. several items can be selected with a cursor area: when items are selected with a cursor area from left to right all items that got in the cursor area partly or completelly are selected. If items are selected from right to left only items that got in the area completely are selected.
Moving objects
1. use a cursor and arrows on the keyboard.
2. hold Ctrl and use arrows to move an object by 10.
Menu of right mouse button:
1. Switching between Select and Draw.
2. Copy, Clone, Paste, Cut, Delete - copying, cloning, pasting cutting, deleting an item.
3. Add / Delete - menu to add items to objects fast and delete them:
  1. Image - a picture, a background image.
  2. Icon - an additional image-icon, its location on an object can be edited.
  3. Chameleon - a pixel image, its color can be edited.
  4. Playing sounds by press.
  5. Links to IP-cameras and images from the internet that substitute an Image.
  6. Calling links.
  7. Calling script functions - activation of routines, written in JavaScript, see [JS] Script window.
4. Control of object location with respect to other objects (Z-order).
5. Lock / Unlock - ban on moving a graphical item or a popup in the editor.
6. Hide / Show - hiding an object in the workspace to view layers below. It is active only in the view mode in the editor (when the app is launched, an object will be displayed. To make an onbject invisible and inactive in i3 pro, use Visible property in object settings)
7. Edit - edit item:
  1. Make transparent - make the item background transparent,
  2. Resize to fit image - change the height and width of an item to fit the image.
Controlling States.
A graphical item can have many variants of its appearance. They are called States, and each of them is set separately. Depending on events in the system (a press of a user, getting data from equipment), an item can change its states, thus change its appearance during work. States are controlled in the States panel located above the workspace. Available actions:
1. Select a state. It is displayed in the workspace and its settings are displayed in object properties.
2. Change states - to chage the "default" appearance (state) of an item, move a state with the help of a cursor.
3. Add/delete state - available only for Multistate items. Items of other types have a fixed number of states, that determine their behaviors by press or at data display. The type of an item can be set in Object Properties panel - a panel of fast access to properties.
4. Turn on "ALL STATES" mode - changes made in one state of an item in this editing mode are applied to all states of an item. It allows to change fast properties identical for all states. To stop editing in "ALL STATES" mode, click the button again.
Control of layers Icon and Text of graphical items:
1. Click on an object then on its icon or text field, an additional frame around the corresponding layer appears. Now it can be moved with the help of a cursor or arrows on the keyboard. Parameters of the selected layer are displayed in the editor properties panel.
2. Double-click on the active (selected) Text layer opens a window to enter text.
3. Double-click on the active (selected) Icon layer opens the project gallery where a new image-icon can be selected to replace the current one.
Copy / paste of items .
You can do the following with the help of Ctrl+C (copy) and Ctrl+V (paste) hotkeys:
1. Copy interface items and paste them on this or another page of a project or into another panel project.
2. Copy images from third-party sources (explorer, Skype, browser, etc.) and paste them in the workspace or the gallery. The following formats of images are supported: PNG, JPG, GIF, SVG. When an image in the GIF format is pasted, a Multistate button with all required states of an item is created in the workspace. When images in ither formats are pasted, a Label with one state is created in the workspace. The size of an item is set automaticaly, it is equal to the size of an image.

Full description of the workspace and its settings in the article "Overview on iRidium Studio 2019".

PROJECT. Pages and Popups

A visualization interface usually consists of a set of pages and popups, pages can be flipped by pressing interface objects - "navigation items", that open and close pages and popups.

Use the "PROJECT (Project structure)" panel to open a page in the workspace and edit it.

Functions of Project side panel:

"Pages and Popups" view mode.
1. Navigation by pages and popups of a project.
2. Adding, deleting, cloning pages, popups, folders.
3. Viewing a list of items on a selected page, control of item location.
4. Controlling the relative position of pages and graphic elements in the project tree (by dragging or using arrows). The position of graphic elements in the project tree directly affects the order in which elements are displayed on the page.
5. Project settings.
Controlling settings of an object (page, popup, item) selected in the workspace.
1. General. General settings: location, size, type of item and its behavior by press or when data are received.
2. State. Parameters of a variant of item appearance (state) selected now: color, image, text, etc.
"Popup Groups" view mode - controlling groups of mutually excluding popups (a popup is automatically closed, if another popup from the same group is opened).

PROGRAMMING. Actions when Pressed

There are graphic items on pages and popups of a visualization interface. They do certain actions when they are pressed or change their appearance when data are received from equipment. Item behavior depends on its settings, all commands that it sends are shown in the PROGRAMMING folder.

Select an item in the workspace and open the PROGRAMMING tab to see what actions and when it will do:

Press, release and move are different events, a graphical interface can react to. Pages, graphical items, list items support different sets of events, thus they follow different rules to send commands.

Events:

Press sends a command the moment a button is touched;
Release sends a command the moment a button is released;
Hold sends commands in a cycle as long as a button is held;
End Of Hold sends a command when a button is released after holding for a long time;
Move sends commands when a slider or a joystick is moved;
Select selects an item or a subitem in the List (script list) item. Access via List API;
Enter - pressing the Enter button in Edit Box item;
Change - an event of entering a simbol in the Edit Box item. Access via GUI API;
Lost Focus - an event generated by any item regardless of its type and conditions rhe moment an item is released. The event means that an item lost focus (activity). The event is available only via GUI API;
Gestures - gestures (swipes). Gestures are processed only by a page (a gesture can't be set for a popup or an area of an item). A gesture can begin on a page itself, on a graphical item or on a popup, but it is sent to the parent page, thus commands set for the page are done. Exception: Level, Joystick, List and Static List items that process Move instead of gestures.

Instruction: how to send commands and display data >>>.

IMAGES. Gallery of Interface Objects and Images

Gallery is a storage of images and objects that can be used in an interface.

Gallery can store:

simple images as objects with 1 state,
buttons with two states,
animated buttons,
levels with two states,
levels with numerous states,
groups of graphical items,
pages and popups of a project.

The Gallery consists of the following sections:
1. Backgrounds - backgrounds in iOS or Android style;
2. Examples of items - examples of graphic items (buttons, levels, triggers, etc.);
3. Examples of templates - sets of items (templates) to control light, climate equipment, security systems, etc.;
4. Icons - sets of font icons and icons in the .png format. A font icon is a symbol of the text field that is transformed into an image thanks to specially created fonts. Font icons can be enlarged withot any loss of the image quality. All font icons are united in groups in the gallery (Arrows, Battery, Blinds, etc.). The gallery contains png icons with a-2D and 3D effects. The images are divided into groups by the resolution of the image;
5. Metro Style is a set of tools to create interfaces in the Metro style.
An example of a ready interface is given below.

The Metro Style interface consists of several folders, that include:

1 Ready interfaces - examples of ready interfaces,
2 Icons - icons,
3 Templates - templates of buttons, pages and popups,
4 Screensavers - an example of a screensaver.

6. iOS White Style is a set of tools to create an interface in the iOS White style.
An example of a ready interface is given below.

The iOS White Style interface consists of several folders that include:

1 Ready interfaces - examples of ready interfaces,
2 Icons - icons,
3 Templates - templates of buttons, pages and popups.

7. iOS Black Style is a set of tools to create an interface in the iOS Black style.
An example of a ready interface is given below.

The iOS Black Style interface consists of several folders that include:

1 Ready interfaces - examples of ready interfaces,
2 Icons - icons,
3 Templates - templates of buttons, pages and popups.

CAMERAS. Archive of IP-cameras

Archive of cameras is a storage of links to audio streams from IP-cameras that can be used in an interface

View modes:

Gallery cameras is a general archive of typical links to popular models of IP-cameras. You can add your links to the archive.
Project cameras contains links to IP-cameras, what you added to the visualization interface. Unused links can be deleted from a project with the help of "Unused resources" tool on the tool bar of the editor in the Resources window.

How to set up a link to a video stream from an IP camera >>>

SOUNDS. Archive of Audio Files

Archive of audio files is a storage of sounds that can be played in an interface. A sound can be played double clicking on it in the gallery.

Supported audion formats:

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

RESOURCES. Project resources

Project resources include all images, sounds and fonts used in the project.

Images

Images used in the project.

- add a new image,

- delete a selected image,

- delete unused images from the project gallery.

When an image in the SVG format is imported, a window to set the size of the image appears on the screen. When you turn on proportional scaling you can change the size of an imaginh keeping its original proportions:

Sounds

Sounds used in the project.

- add a new sound file.

- delete a selected sound file.

- play a selected sound file.

- stop playing a sound.

- delete unused sound files from the project gallery.

The menu of the right mouse button:

Add audio file - upload a new audio file from the device (read more about the format of a file to upload in the Sounds) panel;
Rename - change the name of an audio file;
Delete - delete an audio file;
Show usage - show all connections of an audio file with graphic items;
Export Sound To Global Gallery - exposrt all project sounds to the globa; galley (Sounds panel). To move one audio file to the global gallery drag'n'drop a file from the Resources panel to the Sounds panel;
Copy / Paste - copy / paste an audio file from one project to another one.

Fonts

Fonts used in the project.

Adding Personal Fonts to the Studio

iRidium Studio supports fonts only of the following formats "ttf", "ttc", "otf".

1 Add a font file to \iRidium pro documents\Studio\Gallery2019\Fonts folder located in the Documents(C:\Users\UserName\Documents\) user folder.

C:\Users\UserName\Documents\iRidium pro documents\Studio\Gallery2019\Fonts

2 Select the added font in the list of fonts:

ANIMATION. Animating Popups

Create a set of animation effects that you want to use in the interface and assigne them to popups ing the Animation panel:

Seettings of effects:

Type - a type of popup animation:
- Fade - "fading" - a popup changes color.
- Rotate - "spinning" - a popup rotates around the central axis.
  - Angle - an angle to which a popup will be turned the moment movement starts.
- Slide - "appearing" - a popup appears moving directly.
  - Type of appearance - direction and the starting point of popup movement (from behind itself, from the side).
- Scale - "scaling" - a popup increases or decreases its Х and Y coordinates from 0 to the set ones.
  - X scale - a rate of popup horizontal increase at the moment of movement start.
  - Y scale - a rate of popup vertical increase at the moment of movement start.
- TV Scan - "panorama" - a popups appears by means of changing Y coordinate from 0 to the set one.
Duration (ms) - how long an effent is done.
Delay (ms) - delay before doing an effect.
Tweener - defines the speed and the path of popup movement.