Эта страница является
переводом страницы
IRidium studio 2019 Item States. Перевод выполнен на 100%.
Appearance of Interface Items
Interface items are pages, popups and graphic items located on them, such as text, buttons, levels, joysticks, etc.
This section describes how to create appearance of pages and popups; how to set variants of appearance of a graphic item.
Appearance Features of Interface Items
Page
A page is a basic interface item, its basis. When a new interface is created you get one page to place graphic items. Then you can add other pages and popups to the interface.
Features of page appearance:
- The size of all interface pages is the same is the resolution you selected when you created the interface.
- A page, figurativelly speaking, covers "empty space" that contains no interface and it does not process presses of a user, that's why:
- pages can't appear with animation effects
- pages can't be transparent or semi-transparent
Inactive Zone of Interface
It is the "empty space" around pages that contains no interface, it appears if interface proportions does not fit the proportions of a device where i3 pro is launched.
Color of inactive zones can be changed in project settings: General > Color.
Popup
Popup is a window with graphic items that can be opened on any place of a page.
Features of popup appearance:
- can be of any size,
- can be transparent
- can be opened in any place on a page
- animation of hiding and showing can be used
Graphic Items
Graphic items in i3 pro interface can be pressed, and the presses mean that commands to equipment are sent. To display that an action (a button was pressed) and an event (a lamp waa turned on) happened the appearance of an item can be changed in the process of work.
Capability to change appearance is an important property of an item in i3 pro, that is realized by means of storing several variants of appearance, the so-called States of an item.
States of a Graphic Item
To create or delete a state of a graphic item and to switch between states use Project > States:
|
All States - edit all states of a graphic item.
|
|
Current State - edit the selected state of a graphic item.
|
|
Prev State - open the previous state.
|
|
Next State - open the next state.
|
|
Add State - add one state.
|
|
Delete State - delete the selected state.
|
Depending on the required behavior, (Type), the number of variants of appearance changes. For example:
- a simple Label has 1 variant of appearance = 1 state
It can be the name of a room or a display with temperature in the room;
- a Button has "turned on" and "turned off" variants = 2 states
This is a typical behavior of a button - it changes color when it is pressed and returns to the initial state when it is released;
- a Level has "filled" and "unfilled" variants = 2 states
These are all sorts of sliders that can be moved along a scale "filling" it;
- Items that have "Multistate" in their names can have any number of states for animation and to change their appearance according to a definite value of a parameter. Animation and progress bars refer here.
The number of states is displayed above the workspace of the editor when an item is selected. Select a state to edit its appearance.
You can change the order of the states. To do it drag'n'drop a state into a required position. The number of states depends on the type of the item and it determines its behavior (types of items are described further).
Settings of appearance of a selected state are displayed on the dynamic panel (below the workspace) in the States window that is part of the PROJECT side panel.
During interface work an item changes States according to its settings. Change of states can be caused by presses, data received from equipment or from tokens, commands from JavaScript.
Setting Appearance
The appearance of a page, a popup or a graphic item is defined by several parameters that go in layers in the order they are laid:
- Fill - filling with color
- Image, Chameleon image or IP-camera (can't be used semultaneously)
- Border - border line
- Text - text
- Icon - image icon
Layers can be moved relativelly to one another, but it is seldom used.
All properties that influence the appearance of an item can be found in PROJECT > State panel and in the fast access panel.
In fast access basic properties are grouped in 2 tabs:
- Images - control of images (image, control of emage, icon) and their settings
- Text - control of text and its settings
The States tab in the PROJECT panel shows all item proprties:
| States |
A state of an item that is edited:
- All states - editing all states,
- Off - editing the inactive state of a button,
- On - editing the active state of a button.
|
| Color |
The color of image filling.
|
| Color Alpha Channel |
Color saturation.
|
| Opacity |
Transparacny of the whole item.
|
| Text |
A fiend to add text to the item.
|
| FontFile |
A font that is used for text on the item. Requirements to specific fonts (Arabic, hieroglyphics), besides using Arial Unicode MS:
1. Font format: ТТF (ТТС is not supported);
2. The font must include all required hieroglyphs and symbols;
3. The font must support Unicode.
|
| Font Size |
The size of the font.
|
| Spacing |
Spaces between letters.
|
| LineSpacing |
Spaces between lines.
|
| Text Color |
The color of the text on the item.
|
| Text Align |
Aligning text to borders of the item.
|
| Text Padding Top / Left / Right / Bottom |
Text indent from borders of the item (top/ left/right/bottom).
|
| Text Effect |
Effects of text appearance (select from a list) + the color of effects (TextEffectColor).
|
| Word Wrap |
Word wrap if the text is longer than the item.
|
| Border |
The border of the item, it is selected from a list.
|
| Border Color |
The color of the item border.
|
| Image |
The main image of the item.
|
| Icon |
Image-icon (it is located on the main image).
|
| Image Align |
Aligning a image to borders of the item.
|
| Image Padding Top / Left / Right / Bottom |
Image indent from borders of the item (top/ left/right/bottom).
|
| Icon Align |
Aligning an icon to borders of the item.
|
| Icon Padding Top / Left / Right / Bottom |
Icon indent from borders of the item (top/ left/right/bottom).
|
| Chameleon |
An image in the PNG format that uses the color of the color of the button filling and border, when it is placed on a button to define the color inside the image. In other words, it's an image that can change its color during your work at the project.
|
| Draw Order |
The order of displaying item layers (background, image, icon, text, border).
|
| Image Stretch |
Stretching the main image to fit the size of the item.
|
| Icon Stretch |
Stretching the icon to fit the size of the item.
|
| Chameleon Stretch |
Stretching the chameleon image to fit the size of the item.
|
| Image Filtration |
Selection of image filtration when the image is stretched.
|
| Icon Filtration |
Selection of icon filtration when the icon is stretched.
|
| Chameleon Filtration |
Selection of filtration for a chameleon image when it is stretched.
|
| Blur Type |
Type of blurring:
- Default - blurring the item image,
- Background - blurring the background.
You can find a detailed description of the blurr effect here.
|
| Blur Depth |
The deapth of blurring (0-100).
|
Images
Image: basic and background
Image contains basic images of items and background images of pages and popups. They can be streched on an item and on a page. Basic image is located under an Icon as the background of an icon.
Ways to add an Image to an item/page/popup:
- Click right mouse button on an item, a popup or a page, select Add > Image
- Click "Images" button on the left tool panel to diplay image settings in the top tool panel for fast access. Select image in the image field and set its streching and location on an item.
- Select and set an image in the following panel: PROJECT > Properties > States > Image: [ ... ]
- Drag'n'drop an image on a graphic item or a page from the Gallery.
- Click “Put to page (popup) background” in the right mouse button of the Gallery to use an image as the background of a page or a popup (it does not work for complicated objects from the Gallery)
Image Settings :
- Image – image file
- Image align – aligning an image on an item (aligning an image to a corner, to the middle of a side, to the center of an item or concrete coordinates of the left top or an image with respect to an item can be entered)
- Image Padding Top / Left / Right / Bottom - image indent from item borders (top/ left/right/bottom);
- Image stretch - stretching on an item
- <none> - an image is displayed in its real size
- Proportional - an image is streched on the whole item and proportions are saved (empty lines may appear)
- Full size - an image is streched on the whole item and proportions are not saved (an image can be distorted)
- Image filtration - an algorithm to process an image that is used if Image stretch is on. Depending on the algorithm, an image, that is streched on an item, can look more "angular" or "blurred"
Image can't be used together with Chameleon Image or IP-camera. Only a chameleon image is displayed in this case, but the main image or an IP-camera is not displayed, as they are locatd on the same layer of the "background image".
Icon: icons
Icon is an icon-image that can be placed on the basic item images (Image, Chameleon Image), pages and popups. An icon can be moved on an item with a cursor, if you select an item and there is an Icon on it.
Special fonts are very often used instead of Icon. That is an icon on an item is not an image but a text symbol.
- it allows to change its size fast and without quality loss by simply changing the size of the font. iRidium has a lot of "icon" fonts in iRidium studio, see Fonts "IR_xxx".
Ways to add an Icon to an item/page/popup:
- Click right mouse button on an item, popup or a fage and select Add > Icon
- Select "Images" in the left tool bar to display fast access panel. Select an image in the Icon field and set its location on an item.
- Select an image and set it in the following panel: PROJECT > Properties > States > Icon: [ ... ]
- Drag'n'drop an image on a graphic ite, or a page from the Gallery.
Icon Settings:
- Icon – image file
- Icon align – aligning on an item (it can be aligned to a corner, the middle of a side or concrete coordinates can be set of the left top corner of the image with respect to an item)
- Icon Padding Top / Left / Right / Bottom - icon indent from item borders (top/ left/right/bottom);
- Icon stretch – streching on an item
- <none> – displayed in the original size
- Proportional – streching on the whole item, proportions are kept (empty stripes can appear)
- Full size – streching on the whole item, proportions are not kept, (an image can be distorted)
- Icon filtration – algorithm to process images that is used if Icon stretch is on. Depending on the algorith an image streched on an item can look more "edgy" or "blurred".
Chameleon Image
Chameleon Image - an image with an editable color, it allows to create numerous schemes for one template: gradient, glowing, shadow, depth, etc. Chameleon image uses a color selected as the color of the filling and the border of an item to change its own color (thus, filling and border itself are not displayed together with a chameleon image, and it can't be used together with an image).
Chameleon image is an image in the PNG format. It consists of four color channels (Opacity, red, green and blue: ARGB). The colors are processed as follows:
- Opacity sets borders of an item
- Red is area that will be filled with the color of the item Filling
- Green is area that is filled with the color of the item border
- Blue is not used.
For opacity to render correctly, save PNG file in RGB colors (32-bit).
Example of chameleon - an image is on the top, below are examples of its used as chameleon image:
Chameleon mage can't be used together with Image or IP-camera. A chameleon image is displayed in this case, but the main image or an IP-camera is not displayed, as they are locatd on the same layer of the "background image".
IP-cameras
IP-camera (or a dynamic image) is a stream video from the ner that can be displayed on an item. A link to an IP-camera is selected instead of an image of an item. An image from an IP-camera can be streched on an item, but we do not recommend it, as it creates "additional load" for the app, that's why it is better to broadcast a video stream in the required resolution. Besides a video stream, a link to an image from the local net or from the internet can be entered, if it is periodically updated.
Ways to add IP-cameras to an item/page/popup:
- Click right mouse button on an item, popup or a page and select Add > IP-Camera
- Drag'n'drop a camera on a graphic item from the CAMERAS panel (it is opened from the right tool bar)
- Click "Images" button on the left tool panel to diplay image settings in the top tool panel for fast access. Select image in the image field and set its streching and location on an item.
- Select and set an image in the following panel: PROJECT > Properties > States > Image: [ ... ]
Settings IP-camera:
IP-camera can't be used together with Chameleon Image or Image. Only a chameleon image is displayed in this case, but the main image or an IP-camera is not displayed, as they are located on the same layer of the "background image".
Text
Text is text that is part of any graphic item, it can also be added to a page or a popoup. A text block can be moved on an item with a cursor - select an item, then select text on it and drag the text with a mouse. Text is displayed within the borders of an item and can't do beyond them (it's cut).
Text is often used instead of an Icon. Special "icon" fonts allow to replace image-icon with a text simbol - it allows to change the size of an icon fast without quality loss, by simply changing the font size. iRidium provides numerous "icon" fonts in the iRidium studio, see fonts "IR_xxx":
Ways to add text to an item/page/popup:
- If there is text on an item, select the item and double click on the text to start editing
- If there is no text, click right mouse button on an item, popup or page and select Add > Text
- Enter text in item properties: PROJECT > Properties > States > Text: [ ]
- Enter text in the text fieild of fast access panel
- Open Char map and select simbols to enter in the text field (the method is very convenient to work with font icons)
- To add text to all states of a graphic item, click All states;
- When ESC seq(\r\n) checkbox is activated, a function to move the position of entering text by 1 line below becomes available when "\r\n" symbols are entered in the text field (analogue to the Enter key).
Text settings:
- Text is a block or a line of text. It supports wrapping when editing in the window mode
- Font file – a font file. A list of fonts contains standard fonts and special iRidium fonts. The studio does not upload fonts from the system automatically. To add your own font use the following manual;
- Font size – the size of the font;
- Spacing - spaces between letters;
- LineSpacing - spaces between lines;
- Bold, Italic – bold text or text in italics (if the font supports it)
- Text align – aligning with respect to an item (align text to the corner, to the center of an item, or set concrete coordinates of the top left corner of the text block with resoect to an item)
- Text Padding Top / Left / Right / Bottom - text indent from item borders (top/ left/right/bottom).
Depending of the type of Text Align "the main borders for align" are selected. For example, for top-left, left-center, top-center, center types of align, the main indents are left and top. For the other types of align, lines in the corresponding corners are a priority.
If the Word Wrap is on, it will work when text reaches the item indent. Depending on the type of align, text can exceed top and bottom limits.
- Text color – the color of text
- Word wrap – automated text wrapping, if the text exceeds the width of an item
- Text effect – "shadow" effect of the text, there are several variants of the shadow
- Effect color – the color of the"shadow"
- Show value in text – show a value received in Value in the text field. The format of display can be selected (an integer nubmer, the number of digits after a point). The selected dislpay template can be added to the text
Filling and Opacity
Fill is filling a graphic item with color. Fill is an RGB color with an Alpha channel, that is objects located on a lower level can be seen through the color of the fill. Only fill for pages does not support Alpha channel.
Opacity is a paramater determining the opacity of the whole item - all layers an item consists of (fill, image, text and border).
Setting the color and opacity is available next to the list of item states above the working area:
Border
Border allows to set the shape and the color of the border of a graphic item, a page or a popup. Border is added to the inner part of an item, without changing its size. Only the color of the border can be edited, its properties (width, rounding) can't be edited. They must be selected form a list of availble borders.
Setting a border is located next to setting color and opacity, above the workspace:
