i4designer Knowledgebase

The global actions area

Abstract

The i4designer global actions area allows the user with possibility to switch between a set of global operations each serving to different purposes.

Located vertically at the left side of the Designer page, the global actions area provides the user with possibility to switch between the following views:

The Settings menu

The global actions toolbar allows the user with possibility to enter the project settings panel, by clicking the Settings menu.

Warning

Based on the current project platform, the contents of the project settings panel will be accordingly adjusted. For more details about the particularities provided by each i4designer platform, please refer to the Designer platforms articles.

In the Settings panel the user is provided with a set of general information about the Project such as Project name and Project platform. Further on, the user can manage the Project deployment screen size, by manually filling in the Width and Height values. The screen width and height will be reflected on both design and run-time.

Settings_menu.jpg

The Settings menu and panel

The Builds menu

By clicking the Builds menu of the global actions toolbar, the Builds panel is opened. In this view, the user can trigger a build, using the designated button. In this view the last build will be always displayed, allowing the user to organise further actions:

  • Refresh the builds view in order to get the latest version of the project build;

    Refresh_the_builds_view.jpg
  • Download the last build in order quickly obtain the project build;

    Download_button.jpg

    Tip

    For more details about the build download please refer to the dedicated article.

  • Publish the last build over FTP in order to quickly publish your project through FTP;

    Publish_over_FTP.jpg

    Tip

    For more details about the FTP publish method please refer to the dedicated article.

  • Automatic publish in order to quickly publish your i4connected project;

    Automatic_publish.jpg

    Note

    Projects created on the i4connected platform provide the user with an additional deployment method which automatically publishes the project to the i4connected server. For more details, please refer to the Automatic publish article.

The Pages menu

In order to manage a Project page structure the user can click the Pages menu. In the Pages panel the currently available structure is displayed.

Pages_menu.jpg

The Pages menu and panel

By hovering the Project pages folder the user is provided with possibility to add new pages and new folders. In this view, the user can organise the following operations:

  • Add file - by clicking this button a new file is added to the project structure, having a system generated name.

    Add_page_button.jpg

    Add file button

  • Add folder - by clicking this button a new folder is added under the first listed file in the project structure, having a system generated name.

    Add_folder.jpg

    The Add folder button

Further on the listed pages can be updated, as follows:

  • by clicking the Set startup page option the user can change the default project page.

    Set_startup_page.jpg

    Tip

    The default project page (or the Index page) is highlighted with a green light and the Set startup page button is not available for it.

    Default_page.jpg
  • by clicking the Rename page option the user can update the page name.

    Rename_page.jpg
  • to duplicate a page the user can click the Copy button

    Copy.jpg
  • redundant pages can be deleted by clicking the Remove button.

    Delete_button.jpg
  • by clicking the Set startup page button, the user can change the default project page.

    Set_startup_page.jpg
  • to change the position of a page in the hierarchy the user can drag and drop pages to a folder.

    Drag_and_drop.jpg
The Navigations menu

Besides complex page structures, the i4designer supports advanced page navigation structures that are easily managed under the Navigations menu.

Navigation_menu.jpg

The Navigations menu

The Navigations panel displays the main navigation node that will support the structure. When hovered, the Add file and Add folder options are displayed.

  • Add file creates a new navigation file with a system generated name, that can be later on updated.

    Add_file.jpg

    The Add file button

  • Add folder creates a new navigation folder with a system generated name, that can be later on updated.

    Add_folder.jpg

    The Add folder button

Both, the Navigation files and folders provide the user with a set of actions:

  • Navigation file allows the user with possibility to Set startup page, Rename, Copy and Delete. Additionally the user can use the drag and drop function in order to move a navigation file to a folder.

    Navigation_file.jpg

    Navigation file actions

  • Navigation folder allows the user with possibility to Rename, Add file, Add folder and Delete. Further on, the user can drag and drop a navigation folder in order to change its position.

    Folder_actions.jpg

    Navigation folder actions

Further more, by clicking on a Navigation File, the Navigation page is opened.

File_Navigation_page.jpg

The File Navigation page

The Navigation page is structured as follows:

  • The Navigation Tree panel displays the pages structure available for the current i4designer Project.

    Navigation_tree.jpg

    The Navigation Tree panel

    The toolbar of the Navigation Tree panel, features the following actions:

    • The Add page button Add_page_button.jpg allows the user to create new pages for the Navigation structure

    • The Synchronize to project button Synchroize_to_project_button.jpg allows the user to synchronise the navigation structure to the current project page structure. As soon as the synchronize button is clicked the pages of the project are set as navigation pages.

    • The Collapse all button Collapse_all_Navigation.jpg allows the user to collapse the navigation tree.

    • The Expand all button Expand_all.jpg allows the user expand the navigation tree.

    Each sub-file in the Navigation tree allows the user to add further subordinated pages or to remove them by means of the Add page and Delete page buttons.

    Add_and_Delete_page.jpg

    The Add page and Delete page buttons

    The pages position in the navigation structure can be manually adjusted by means of drag-and-drop drag_button.jpg.

    Drag_and_Drop.jpg

    Adjust page position by dragging and dropping it on the desired structure level

    By clicking on a Navigation page, in the Navigation Tree, the Navigation Properties panel is opened at the left side of the screen. In this view, the user can define the following settings:

    Navigation_Page_properties.jpg

    The Navigation page properties

    • Navigation - allows the user with possibility to customise the navigation behaviour by indicating if the navigation link is internal or external, by setting the Target element and by inputting the navigation page URL.

    • Info - allows the user to customise the Navigation page name and add a tooltip for it.

    • Appearance - allows the user with possibility to fully customise the Navigation bar colors.

    • Icon - allow the user with possibility to upload an image to be persisted in the Navigation bar, or to select one from the predefined list of icons. Additionally, the user can personalise the icon color, using the provided color picker tool.

  • The Navigation Preview panel displays in real-time a preview of the navigation bar that the user can achieve.

    Navigation_Preview.jpg

    The Navigation Preview panel

    Hence, the Navigation Preview panel will always reflect the Navigation Tree, allowing the user to select between:

    • a horizontal view

      Horizontal.jpg
    • a vertical view

      Vertical_view.jpg
The Content menu

The Content manager is a storage location for all the project files of type .jpg, .jpeg, .png. By clicking the Content menu, the Content panel is opened allowing the user to manage the list of project images.

Content_manager.jpg

The Content Manager

Important

The Content manager does NOT allow the user with possibility to upload new files. In this view, the user can edit file names, delete or copy existing files and distribute them in folders.

New projects feature an empty content manager that gets populated as user uploads new images to the project.

New_content_manager.jpg

Example of an empty Content Manager

By hovering the default "content" folder the user is allowed to create new folders by clicking the Add folder button.

Add_folder_button.jpg

Add folder button

Each content folder features the following actions:

New_folder.jpg
NewSubfolder.jpg

Content folder and sub-folder

  • Change folder position by means of drag and drop;

  • Rename folder;

  • Add a new sub-folder;

  • Delete folder.

The Content manager panel is populated with new files as the user uploads files to the i4designer project. Each file features the following actions:

File.jpg

Content file

  • Change file position or add it to a folder, by means of drag and drop;

  • Rename file;

  • Copy file;

    Note

    When copying a file, the resulting copy will inherit the source file name along with the "Copy_" suffix.

    Copy.jpg

    Example of copied file

  • Delete file.

The Deployments menu

By clicking the Deployments menu, the Deployments page is opened.

Derployments_page.jpg

The Deployments menu

This view is structured as follows:

  • the Deployments contextual menus

    • The FTP configuration panel, where the user needs to set up the needed FTP settings required by the Publish over FTP deployment.

      FTP_configuration_panel.jpg

      The FTP configuration panel

      Tip

      For more details on how to configure the FTP settings, please check the designated article.

    • The Build profile panel, where the user can set up the build profile settings.

      Build_profile.jpg

      The Build profile panel

  • the Deployments page

    • The Profiles panel, where the user can see the list of Build profiles. The listed Build profiles can be used to trigger a new project build, can be removed or set as default.

      Profiles_page.jpg

      The Build configuration panel

    • The Builds panel where the user can download a build, chose to publish it over FTP or automatically publish it.

      Additionally, in this view, the user can delete redundant builds.

      Builds_page.jpg

      The Builds panel

    Tip

    For more details about the Deployments page, please refer to the Project Deployment article.

The Signals configuration menu

By clicking the Signal configuration menu, the Signal operations panel is opened.

The Signal operations panel displays the Signal import or Signal synchronise options, automatically adjusted on basis of the project platform:

  • i4SCADA Signal operations panel allows the user with possibility to import Signals via an XML file. The import file can be either dragged from the local machine and dropped in the Signal import panel, or manually uploaded.

    Signal_operations.jpg

    i4SCADA Signal import

  • i4connected Signal operations panel provides the user with possibility to directly synchronise the project signals from a preconfigured i4connected database.

    Get_i4connected_signals.jpg

    i4connected Signals synchronisation

The uploaded Signals will be listed in the Signal Configuration page.

Signla_configuration_panel.jpg

The Signal configuration page

Each column of the Signal Configuration table features a simple filtering mechanism allowing the user to easily establish the availability of a Signal.

FIlter_signas.jpg

Filter signals

At the bottom left side of the Signals table the user can use the Page rows drop-down selector to chose the amount of rows displayed by the table. The user can chose to display 10, 25, 30 or 50 rows.

Number_of_page_items.jpg

Page rows drop-down selector

The user can navigate from one Signals page to another by using the toggle switch buttons displayed at the bottom right side of the table.

Page_spring.jpg

The page switch buttons

A more detailed view upon the Project Signals can be accessed by clicking the Properties editor contextual option, or by double clicking on a specific listed signal. The Properties editor menu opens the Signal Simulation panel, providing the user with possibility to manage the following Signal simulation properties.

Signal_simulation_properties.jpg

The Signal Simulation panel

  • max - the highest Signal value, used by the i4designer controls at design-time.

  • min - the lowest Signal value, used by the i4designer controls at design-time.

  • name - the name of the Signal, used by the i4designer controls at design-time.

  • precision - the number of the digits after the decimal point

  • simulation type - can be selected from the drop-down list choosing between:

    Important

    These simulation patterns are ONLY applied in simulation mode. After publishing a project, the online signals behaviour will be applied.

    Simulation_Type.jpg
    • Linear - returns values that are ranged between the Min / Max interval.

    • Sinusoidal - returns amplitude values, randomly selecting the start point value from the Min / Max interval.

    • Constant - returns a value that remains constant throughout the simulation. The value is randomly selected from the Min/ Max interval.

    • Random - returns randomly generated values ranged between the Min / Max interval.

    • Bit - returns either value 0, or 1.

    • Logarithmic - returns values by raising them to a power randomly selected from the Min / Max interval. It is usually used for a signal providing high gain for low-level signals and progressively lower gain for higher signal levels.

    • Pow2 - returns values by randomly selecting values from the Min / Max interval and exponents for the next power of 2 higher than the randomly selected value.

    • ModuloLinear - returns values that are ranged between 0 and the defined precision point, if precision is higher than 0. Otherwise the value will be 0.

The Assets management menu

By clicking the Assets management menu the Assets management page is opened. When opening the Assets management page for the first time the Assets Ligbrary will be displayed as empty.

Empty_assetz_management_page.jpg

The Assets management

Tip

The i4designer Assets are reusable states definitions.

One or multiple Assets form an Assets Library.

The Add asset button Add_asests.jpg allows the user to create a new Asset. New State assets are listed in the States panel.

State_assets_list.jpg

State assets library

By selecting a listed State asset, the Properties panel is automatically expanded at the left side of the Library.

Assets_properties.jpg

The Assets properties panel

In this view, the user can start configuring the following parameters:

Category

Property

Description

States

Current states

An Asset can have multiple states, each carrying their own set of properties.

The user can add states, by clicking the Add new state button.

Further more, the following actions are available for each state:

  • Move up move_up.jpg

  • Move down move_down.jpg

  • Clone state clone_state.jpg

  • Remove state remove_state.jpg

State# Condition rule

The rule to be met in order for the extension to enter the state. The signal names must be always surrounded by percentage (%) characters, followed by logical operators and the Signal value.

For example: %Setpoint 1% != 0

The Condition rule can be either manually typed in or generated, using the State editor. The State editor can be opened by clicking the Expand array list button. This way, the user can easily generate a Condition rule, as follows:

  • Signal name - allows the user to select a Signal name for the Condition rule.

  • Comparator - allows the user to select the logical operator to construct the Condition rule.

  • Signal value - allows the user to add the Signal value, used to trigger the state condition.

Condition_rule.jpg

State# CSS class name

The style of the icon for the current state. The CSS class name selection can be done by choosing from the drop-down list values: none, normal, danger, hand, writing and running.

CSS_class_name.jpg

State# Symbolic text

The language-agnostic text (which is automatically translated) displayed by the extension.

Symbolic_text.jpg

State# Is visible

Sets the component visibility when the state evaluation passed.

Is_visible.jpg

State# Is enabled

Sets the component accessibility when the state evolution passed.

Is_enabled.jpg

State# Foreground

Sets the foreground color of the button. Applying this property will override the default css class.

Foreground.jpg

State# Background

Sets the background color of the button. Applying this property will override the default css class.

Background.jpg

State# Animation Class

Sets the component animation class when the state evolution passed. The user can select the animation class from the drop-down list options: Fade in, Fade out or Blink.

Animation_class.jpg

Common

Name

The name of the new State asset, which will be available under the States management page and in the

Name.jpg

In order to delete an Assets Library the user can click the Remove button Remove_asset_button.jpg. To proceed with the Assets Library deletion the user needs to confim the operation by clicking the option Yes, in the pop-up dialog.

Remove_all_assets.jpg

Delete all Assets in the Library

As soon as the deletion was processed a confirmation toast message is displayed at the bottom of the screen.

Delete_asset_toast.jpg

Successful Asset deletion operation - Toast message

The listed State assets can also be managed independently as follows:

  • The Clone state button allow the user to create a clone of the selected State asset, along with all its parameters.

    Clone_state.jpg

    The Clone state option

  • The Remove button allows the user to delete redundat State assets. To confirm the deletion operation the user needs to select the Yes option in the pop-up dialog.

    Delete_selected_asset.jpg

    The Delete State asset confirmation dialog

    A successful operation is confirmed by means of the toast message "Delete state asset successfully".

As earlier indicated, Assets defined under the Assets management page can be uploaded and reused as Components States

Note

As earlier indicated, Assets defined under the Assets management page can be uploaded and reused as Components States.

Load_from_assets.jpg

Deletion confirmation pop-up