Эта страница является
переводом страницы
IRidium studio 2019 Navigation. Перевод выполнен на 100%.
Navigation in interface: flipping pages and popups
How to flip pages and popups in i3 pro interface; details and limits od pages and popups. Examples of interface navigation.
Pages and popups: purposes and peculiarities
Page is the basis of an interface. When a new interface is created, you get one page to place graphic items on it. Later on you can add other pages and popups to the interface. Peculiarities of working with a page:
- Page size is equal to the resolution you selected when you created the project;
- A page, figurativelly speaking, covers the "empty space" that contains no interface and does not proccess a user's presses, that's why:
- Pages can't appear with animation effects, can't be transparent or semi-transparent;
- A page can't be closed, it can only be changed to another one;
- At each moment of time only one page can be seen;
- When a page is changed all opened popups are closed;
- If "Previous page" command is selected, a page is opened with popups that were open on it before a page was changed;
- Vertical and horizontal pages can be created and set as "alternative". In this case the pages will substitute one another when a tablet or a smartphone is turned. Opening popups when the screen is turned can be with the help of script. That's why "turning" interfaces are usually based only on pages with a miminal number of popups that do not depend on the current position of the screen (they are always opened in the same place - top left corner of the screen).
A popup is a window with graphical items that can be opened on any place of a page. Most projects are made on the basis of one page and numerous popups, as the location, transparency and animation of a popup can be edited, and numerous popups can be opened at the same time. The disadvantage is that it is impossible to work with Auto rotation function, as popups do not have different appearances for differnent screen orientation.
- a popup can't be horizontal or vertical;
- a popup is automatically closed if a page is auto-rotated, when another page is opened;
- a popup can have any size and transparency, it can be opened on any place of a page;
- a popup can have hide and show animation;
- numerous popups can be opened on one page;
- popups "can't be pressed through", that is you can't create a popup through which a user can press a page item or a popup located on a lower level;
- popups can be united into "mitially exclusive" groups of popups: When a popup from a group is opened, a popup from the same group that is already opne is closed;
- "Hide Group (name)" command closes any open popup from the given group of popups.
Creating a page. Creating a popup
Tools to create pages and popups are located in the left corner of the PROJECT panel:
- Creating a page. Settings:
- Name - name of a page,
- Orientation - lanscape or portrait orientation on a smartphone/tablet (choose landscape for PC).
- Creating a popup. Settings:
- Name - name of a popup,
- Left, Top - location on a page: indent from the top left corner of a page on the Х (Left) and Y (Top) axes,
- Width, Heigth - width and height of a popup,
- Draw - draw a popup on a page with a cursor (define the size and location of a popup visually),
Settings of pages and popups (General)
General settings of pages and popups are available in the General tab of the Project window:
Settings of pages:
- Name - the name of a page,
- Orientation - the orientation of a page (landscape, portrait),
- Alternate View - a page with the other orientation, that will automatically appear instead of the current one when a panel is turned (if a panel has a position sensor). You'll find a detailed description of this setting in the Auto-turn of a page section.
Setting of popups:
- Name - the name of a popup,
- X/Y - popup location on a page by the X and Y axes,
- Width / Height - width / height of a popup,
- Lifetime - time (ms) after which the popup the popup will be automatically closed,
- Drag - activation of popup movement on the page,
- Modal - blocking clicking on items outside the popup,
- Top - display the popup on top of other windows,
- Show Effect - сreate\add popup appearing effect,
- Hide Effect - сreate\add popup hiding effect.
Read more about creating effects for appearing and hiding popups here.
Interface Organization
Variants of interface organization:
- One page and popups
The most popular way of orgnaizing an interface. A page is used as a "basis" where the background image and items are located, they are seen almost all the time (project name, connection status, date, time, etc.). All control itmes are located on popups that appear one after another if required. Navigation by popups makes interface behavior more predictable. It allows to use transparency and hide/show animation;
- Several pages and popups
The difference from the previous variant is that you can use an additional page as a screensaver or a menu, from which you can come back automatically and return all popups opened previously. To do it, use the Previous page command;
- Only pages
An interface without popups allows to use advantages of page auto-rotation, when a interface automatically switches between a landscape and a portrait view when a device with i3 pro is rotated. But it is rarely used in practice, as there is a necessity to repeat items on pages, as a result the price of editting increases.
Here is an example of "iOS style: Smart home" free interface (iridi.com > Downloads > GUIS > iOS Style for Smart Home), and its structure:
- There is only one page in the interface. Popups are opened on it;
- Popups make up the navigation menu of the project. Popups contain contain buttons that open and hide popups;
- Popups have items to control equipment. They are split into folders by rooms.
Project Start Page
When iRidium project is lainched, only 1 page and any number of popus are opened.
Choose the start page in Project settings (Start tab):
- Start page – the name of a page that must be opened when iRidium project is launched (only one page);
- Popups on the start page – a list of popups that must be opened at project start. Popups will be opened one after another.
Flipping pages and popups
Any grapical item that processes a press can flip pages and control popups. But in most cases Buttons and sometimes Trigger Buttons are used for navigation in an interface.
Controlling pages and popups is done with the help of "navigation commands" - Actions, that must be added to Press or Release events in the PROGRAMMING panel of the properties of a graphical item:
Commands to navigate in the interface:
- Show page [page name] - show a page (instead of the current one). All popups are closed;
- Show previous page - show a previous page. If popups were opened on the previous page, they are shown together with a page;
- Show popup [popup name] - show a popup. You can set coordinates of Top and Left for a popup to show in a specific place, or you can leave them empty. In this case a popup appears in a place with initial coordinates;
- Hide popup [popup name] - hide a popup;
- Toggle popup [popup name] - toggle a popup (show if it is hidden, hide, if it is shown). Enter a popup name in the parameters of a toggle command. You can set coordinates of Top and Left for a popup to show in a specific place, or you can leave them empty. In this case a popup appears in a place with initial coordinates;
- Hide group [name of group] - if an opened popup is included in a Group, hide it;
- Hide popups on page [page name] - hide all popups on a selected page;
- Hide all popups - hide all popups opened in the project. If this command is followed by Show previous page popups, popups on the previous page are not restored! Keep this in mind, when planning an interface.
Auto-turn of a Page
When a page is created you can select a page with the other orientation for auto-turn of a project.
- Name - the name of a page,
- Orientation - the orientation of a page (landscape, portrait),
- Alternate View - a page with the other orientation, that will automatically appear instead of the current one when a panel is turned (if a panel has a position sensor).
A design with an auto-turn must consist only of pages. This recommendation is caused by the fact that all opened popups are closed when a page changes its orientation automatically. Use JavaScript API to open required popups when a page changes its orientation automatically.
Preview of a Popup on a page
Pre-view of popups on a page allows to display the final position of popups of a selected page and to place them with respect to page items.
Set the pre-view of popups in the PROJECT tad by clicking the right mouse button on the free area of a page or a popup:
Select the popups you want to display on the preview page:
Popup Group
You can create Folders to group pages and popups in the tree of pages. It does not affect the project work.
But you can also create Popup Groups by clicking the right mouse button on a project or popup:
Popup Group - a set of popups that must never be opened at the same time. Popups that are added to one group become mutually exculsive. If one popup from the group is opened, and another popup from the same group is opened, the first one is closed automatically.
Popup groups can be useful to simplify the navigation of a project. They allow not to keep track of the fact that unrequired popups are really closed, as they are closed automatically.
You can move popups between groups. To move a group of popups select the required popups with the help of combinations of keys Ctrl + Left mouse button or Shift + Left mouse button and drag'n'drop them in the required folder.
Hide popup group command is used to hide any opend popup of a group:
A popup group can be hidden with the help of scripts: IR.HideGroup("Group")
Project Screensaver
A screensaver is a page that appers on the screen of a control panel when a panel is not touched for a period of time set by us. There can be a script to process password or an animation script, etc. on the screensaver page.
The use of a dark background of the screensaver page allows to prolong the life term of the display of the control panel.
step 1 Create a screensaver page
step 2 Set the "Back" button to return to the project with the help of the "Show previous page" command:
step 3 Choose the screensaver page in the Project settings.
Setting parameters:
- Show screensaver - turn on screensaver;
- Delay - time is seconds after which the screensaver is activated if the project is not touched;
- Show page - the screensaver will show a selected page (screensaver);
- Landscape screensaver - choice of the landscape orientation of the screensaver page;
- Portrait screensaver - choice of the portrait orientation of the screensaver page;
- Start script - start a script function when the screensaver is activated.
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.
