i4SCADA Knowledge Base

i4SCADA SmartEditor Visual Structure

Abstract

Browse this article for an insight towards the attractive and user-friendly Graphical User Interface of the i4SCADA SmartEditor.

As i4SCADA SmartEditor allows you to build complex and powerful HTML visualizations, first time users might be overwhelmed by the amount of details one would find in a complex visualization. The goal of this article is to introduce newcomers to our new visualization design tool in an easier manner, starting with the basics.

As a first step towards working with i4SCADA SmartEditor, open the application with Administrative privileges. This is an important step as without the Administrative privileges, SmartEditor will not be able to publish your project to Internet Information Services (IIS).

By default, a new project will be opened and ready to use. You can start working on this new project right away or save it with a meaningful name using the File > Save As... option.

SmartEditor Toolbox

The left-side panel named Toolbox is the place where all available extensions will be listed. The extensions are stored in categories which can be collapsed or expanded as needed. The Toolbox features a top mounded search box, allowing you to search for a specific extension by simply typing the extension's name. To use the found extension in your project, drag and drop it on the project’s page.

SmartEditor_Toolbox.jpg

Smart Editor Toolbox

Right-clicking in the Toolbox (at any location, even on a selected extension) will open the contextual menu, providing access to the following options:

  • Reset Toolbox - brings the panel to its default state

  • Customize Toolbox - opens the Customize Toolbox dialog, allowing the user to add or remove extensions and categories.

  • Enable List View - displays the extensions as a list instead of icons

  • Enable Search Box - displays the search box at the top of the panel

  • Collapse All Categories - closes all expanded nodes in the list

  • Expand All Categories - expands all collapsed nodes in the list

  • Extension Manager... - opens the Extension Manager window, allowing the user to edit the extensions displayed by the Toolbox and add new extensions in SmartEditor.

SmartEditor Site Manager

The right-side top panel, called Site Manager, is the place where all the project's pages are visible and can be managed. The user can use this panel to create new pages (both desktop and mobile) and manage their properties via the complex contextual menu.

SmartEditor_Site_Manager.jpg

Smart Editor Site Manager

SmartEditor Properties panel

The right-side bottom panel is the Properties panel. This is the place where all the properties of an extension are listed and can be edited, while the extension is selected in the project page. The same functionality can be accessed if double-clicking on an extension in the project page.

SmartEditor_Properties_panel.jpg

SmartEditor Properties panel

SmartEditor_Properties_dialog.jpg

SmartEditor Properties dialog

SmartEditor Publish tool

The Home section of the ribbon menu hosts the Publish button, which is used to building the project and deploying it to IIS. Once clicked, the Publish Web Site windows provides the available options for publishing, like the IIS folder which will host the web site, the URL used to access it and the pages to be published.

SmartEditor_Publish_to_Web_Site.jpg

SmartEditor Publish to Web Site

Important

i4SCADA SmartEditor must be opened with Administrative privileges in order to be able to publish the web site to a default IIS folder (on the C drive).

The next article will introduce you to the concept of extensions. Follow this link to learn more