i4scada SmartEditor Visual Structure
Browse this article for insight into 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 that 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.
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.
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 on the project page. The same functionality can be accessed by double-clicking on an extension on the project page.
SmartEditor Properties panel
SmartEditor Properties dialog
SmartEditor Publish tool
The Home section of the ribbon menu hosts the Publish button, which is used to build the project and deploy it to IIS. Once clicked, the Publish Web Site windows provide the available options for publishing, like the IIS folder which will host the website, the URL used to access it and the pages to be published.
SmartEditor Publish to Web Site
Important
i4scada SmartEditor must be opened with Administrative privileges in order to be able to publish the website 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