Objectives

Operator Interface At the end of this section Participants will be able to:
(WebHMI)
Section 7  Create a custom user interface accessible from other devices,
including status indicators, inspection results, and interactive
controls to view and affect the vision application

Section 7 | Slide 2

In the seventh section of the In-Sight 3D Standard training we will focus on how to build an At the end of this section participants will be able to:
Operator Interface (HMIs, for Human-Machine Interfaces). Multiple pages can be built into  Create a custom user interface accessible from other devices, including status
the interface. These are implemented as web pages in the In-Sight Vision Suite. When the indicators, inspection results, and interactive controls to view and affect the vision
application is set to run the operator interface can be accessed via a browser. application

Web pages are used to create a Human Machine Interface (HMI) for your In-Sight vision
system while it is set to run. The HMI gives the operator the ability to visualize data
(images, graphics and/or data), and interact with the vision system.

When designing the HMI, it is important to consider what parameters should be

configurable, the level of interaction the operator will be responsible for, and the layout and
presentation of the interface. Also, to be considered is how the information will be
presented to users with different access levels (this will be explained later).

Section 7 | Slide 1 Section 7 | Slide 2

 WebPages Display the WebPage Editor

Main Page

Section 7 | Slide 3 Section 7 | Slide 4

WebPages allow you to create a Web browser-based Human Machine Interface (HMI) for 1. To display the Web Page Editor, select View  Web Pages to launch the Web Pages
operators to interact with the job while the In-Sight vision system is online. Browser.
2. Expand the Web Pages node to view the available WebPages.
The In-Sight L4000 adapter has two preconfigured WebPages to help you setup and 3. Double click on a WebPage to launch it with the WebPage Editor.
configure your job .

The Main Page is the startup web page of the job, containing the following WebPage
Elements:
 A Display 3D element, showing the current point cloud acquisitions.
 A Display element, showing the current 2D image acquisition.
 An HMI Filmstrip used to record, playback, and save job information while the job
is Online.

Section 7 | Slide 3 Section 7 | Slide 4

 WebPage Properties WebPage Editor – Toolbar

Delete Spacing Layering Align

Tools Tools Tools

Undo/ Standard Size Group Toggle

Redo Tools Tools Tools Grid

Section 7 | Slide 5 Section 7 | Slide 6

The WebPage Properties are used to control how the HMI UI is displayed (their size and The WebPage Toolbar allows single-click access to common actions such as aligning
position), its appearance, and whether it will be displayed on start-up. elements or bringing selected elements to the front. The toolbar actions are also accessible
To access the Properties – Right-click on the WebPage name in the Project Explorer. through the Edit Menu.

Section 7 | Slide 5 Section 7 | Slide 6

 WebPages WebPages

Add a New WebPage

Section 7 | Slide 7 Section 7 | Slide 8

A WebPage is used to build a single page of an HMI user interface, using the Web Page 3. A new WebPage displays.
Editor. The desired interactive elements are dragged and dropped onto the WebPage from
the WebPage Toolbox, and then bound to tags, or the element’s script points are used to A new WebPage is literally a blank canvas where users can create their Operator Interface.
write custom JavaScript code for the element. An example of an advanced WebPage design is shown later.

To add a WebPage:
1. Right-click on the WebPages heading.
2. Select New Web Page.

Section 7 | Slide 7 Section 7 | Slide 8

 Rename the WebPage WebPage Editor

3.
1.
4.

5.
2.

Section 7 | Slide 9 Section 7 | Slide 10

A best practice is to Rename your WebPage. This will make things easier as you add more The WebPage Editor is a modern WYSIWYG (What You See Is What You Get) user
WebPages to your application. interface (UI) editor used to create a WebPage, an interactive HMI UI for vision
applications.
To rename your WebPage:
1. Right-click on the WebPage to be renamed. The WebPage Toolbox contains a tree of HMI UI elements which can be dragged and
2. Select Rename. dropped into the WebPage.
3. Enter the new name in the Rename dialog box. Multiple elements on the WebPage can be selected by pressing the <Ctrl> key and
4. Click the Accept button. selecting the elements, or by clicking on an empty area of the WebPage and
5. The WebPage has been renamed. dragging the mouse over the desired elements.

The Properties window will populate with the selected element’s properties.
Most of the Properties of the elements can be bound to Tags, or incorporated into
expressions with the Expression Builder, which allows the values of the Properties to
be bound so that the values will be updated in real time when the project is in Run
Mode.

Section 7 | Slide 9 Section 7 | Slide 10

 WebPage Toolbox WebPage Toolbox

Status
Vision Controls and Displays

User Inputs

Data Display

Graphics

Section 7 | Slide 11 Section 7 | Slide 12

The Display control element is used to display the image processed by the configured The Status WebPage elements are used to insert HMI elements that graphically display the
vision application and allows you to interact with graphics and Control Functions in the status of either a Spreadsheet Editor cell (as long as its Tag is published), or another
Spreadsheet while the project is online. WebPage element.
The Display Data Editor WebPage element is used to display and interact with the
parameters of the Controls Functions in the spreadsheet. The Data Display WebPage elements are used to insert HMI elements that showcase read-
The Display 3D WebPage control element is used to display the 3D point cloud and the 3D only data, adds text to the job, inserts static images, or provides labels for the interactive
graphics of the job while Online on a web page. User Input WebPage elements.
The Filmstrip Image Viewer WebPage element displays the 2D images saved by This WebPage element category contains the following components:
the Filmstrip while the job is Online.  Data Table
The Recorded Image Viewer WebPage element is used to display the images  Formatted Label
stored in the specified subdirectory of the In-Sight ViDi IDE public file system.  Image
 Label
The User Input elements (also known as web page Controls) are used to insert interactive
The Graphics elements are used to insert ellipses, lines and/or rectangles onto a
HMI elements into the WebPage. These elements can be used to interact with the Controls
WebPage.
Functions in the Spreadsheet.
NOTE: All of the controls have the following Event handler script points – a few controls
elements have additional Event handler script points:
 On Mouse Enter
 On Mouse Leave
 On Mouse Move

Section 7 | Slide 11 Section 7 | Slide 12

 Creating an HMI Filmstrip

Section 7 | Slide 13 Section 7 | Slide 14

The HMI gives the operator the ability to visualize data (images, graphics and/or data) and The HMI gives the operator the ability to visualize data (images, graphics and/or data) and
interact with the vision system. When designing the HMI, it is important to consider what interact with the vision system. When designing the HMI, it is important to consider what
parameters should be configurable, the level of interaction that the operator will be parameters should be configurable, the level of interaction that the operator will be
responsible for, and the layout and presentation of the interface. responsible for, and the layout and presentation of the interface.

The Display control element is used to display the image processed by the configured The Display control element is used to display the image processed by the configured
vision application and allows you to interact with graphics and Control Functions in the vision application and allows you to interact with graphics and Control Functions in the
Spreadsheet while the project is in Run Mode. Spreadsheet while the project is in Run Mode.

The Display is included in the default WebPage (named Main) – it will be added to each The Display is included in the default WebPage (named Main) – it will be added to each
new WebPage that is added to the application. new WebPage that is added to the application.
To add a Display to a WebPage: To add a Display to a WebPage:
1. Select the Display from the WebPage Toolbox and drop it in the WebPage. 1. Select the Display from the WebPage Toolbox and drop it in the WebPage.

Section 7 | Slide 13 Section 7 | Slide 14

 3D Display / Display User Inputs
Button
Configuring a button to switch to a different WebPage.

PointCloudView

Configuring a button to run a Task.

GreyscaleView

Section 7 | Slide 15 Section 7 | Slide 16

The HMI gives the operator the ability to visualize data (images, graphics and/or data) and The Button control inserts a labeled push button control into the webpage. The button is
interact with the vision system. When designing the HMI, it is important to consider what used for such actions as jumping to another WebPage, causing a Task to run, as well as,
parameters should be configurable, the level of interaction that the operator will be interacting with region graphics.
responsible for, and the layout and presentation of the interface.
The Button properties include the Click Command property, which provides a pre-defined
The Display control element is used to display the image processed by the configured list of available actions to which to connect the press of the button. A click command is a
vision application and allows you to interact with graphics and Control Functions in the shortcut to create a response to an event without writing a script. If you want more control
Spreadsheet while the project is in Run Mode. over what happened when a button is clicked, then you should configure a script for the On
Clicked event.
The Display is included in the default WebPage (named Main) – it will be added to each
new WebPage that is added to the application. The Button has one additional event:
To add a Display to a WebPage: On Clicked (On Clicked is the most frequently used event).
1. Select the Display from the WebPage Toolbox and drop it in the WebPage.
The Click Command property can be associated with many Tasks interactions. The
examples shown above include:
 Tasks.InspectionTask.Run – used to execute a specified Task
 HMI.ShowPage – allows the user to navigate between WebPages

Section 7 | Slide 15 Section 7 | Slide 16

 User Inputs Properties User Inputs Properties

Button Button

Section 7 | Slide 17 Section 7 | Slide 18

Each WebPage is composed of different elements, which are dragged and dropped onto Each WebPage is composed of different elements, which are dragged and dropped onto
the WebPage from the WebPage Toolbox or from the Template Browser. Each element is the WebPage from the WebPage Toolbox or from the Template Browser. Each element is
configured by setting its properties. The element Properties are grouped into categories, configured by setting its properties. The element Properties are grouped into categories,
and the most commonly configured Properties are listed at the top, in the Frequently Used and the most commonly configured Properties are listed at the top, in the Frequently Used
section. section.

Once an element or multiple elements are added to the WebPage, the user can interact Once an element or multiple elements are added to the WebPage, the user can interact
with them by using either the WebPage toolbar or the WebPage element right-click menu. with them by using either the WebPage toolbar or the WebPage element right-click menu.
Simply select the element, then select an option. Simply select the element, then select an option.

NOTE: Multiple elements can be selected by either holding down the <Ctrl> key and clicking NOTE: Multiple elements can be selected by either holding down the <Ctrl> key and clicking
the desired elements or clicking on an empty area of the WebPage and dragging the the desired elements or clicking on an empty area of the WebPage and dragging the
mouse over the desired elements. mouse over the desired elements.

Section 7 | Slide 17 Section 7 | Slide 18

 User Inputs User Inputs

Check Box Check Box

Section 7 | Slide 19 Section 7 | Slide 20

The Check Box element contains an interactive checkbox and label beside the checkbox. The Check Box element contains an interactive checkbox and label beside the checkbox.
To configure the appearance and placement of the label, use the Properties in the Text To configure the appearance and placement of the label, use the Properties in the Text
section (the text padding property determines the amount of space between the checkbox section (the text padding property determines the amount of space between the checkbox
and the label). and the label).

The Checkbox also has three additional script points: The Checkbox also has three additional script points:
 On Changed  On Changed
 On Checked  On Checked
 On Unchecked  On Unchecked

Section 7 | Slide 19 Section 7 | Slide 20

 Data Display Graphics
Label
Ellipse

Section 7 | Slide 21 Section 7 | Slide 22

The Label is found under the Data Display section of the Toolbox. The Label inserts a The Ellipse is located under Graphics. Simply drag and drop the selected item from the
control for displaying text. It can be used for displaying information, such as, dynamic text toolbox and drop onto the WebPage.
(using tags) for displaying status as an example, labels for controls and instructions for
operators. It can also contain formatted text such as bold and underline and also bulleted The Ellipse graphic inserts an ellipse on to the WebPage. This can be used in conjunction
lists (using HTML5 commands). with the text box – as the words change from Pass to Fail, the background of the ellipse
can change colors from Green to Red.
The label has a number of additional events:
 On Mouse Down The ellipse and the text box will be used on the following slide to build Associations
 On Mouse Enter
 On Mouse Leave
 On Mouse Move
 On Mouse Up

Section 7 | Slide 21 Section 7 | Slide 22

 Associations Grid Lines

Section 7 | Slide 23 Section 7 | Slide 24

Associations are short-hand for an if-then-else statement that allows you to map one kind To help the user with the positioning and layout of the elements on the WebPage there is
of value to another. the option of adding grid lines to the WebPage.

In the example on the slide, the color and text associated with the Pass or Fail circle This is achieved by clicking the Toggle Grid button on the WebPage toolbar.
(ellipse) is changed when the Toggle Pass or Fail box is checked or unchecked. When the
box is checked the circle is Green and the text states Pass, and when it is un-checked the
circle is Red, and the text states Fail.

The Pass and Fail text was added in using a label. A label inserts a control for displaying
text. The association allows the text to change on a specific command.

Without using an Association, the user would have to write a script:

If(status is pass) apply green color to control
Else apply red color to control

Or, when there are multiple conditions:

If(tag is 1) apply color blue
ElseIf(tag is 2) apply color red
ElseIf(tag is 3) apply color black

The use of Associations allows this to be managed much more easily.

Section 7 | Slide 23 Section 7 | Slide 24

 One Click Creation of HMI Pages Templates

Section 7 | Slide 25 Section 7 | Slide 26

The Create a WebPage from Selected Cells option is used to select one or more cells in Templates are used to share components of a project. Parts of a project, either individual
the Spreadsheet and automatically create a WebPage with property bound WebPage elements, such as individual WebPage Elements or Spreadsheet Cells, or entire
elements, based on the selected cells and Control Functions in the Spreadsheet. With this components, such as an entire WebPage, can be exported as a project-independent
option, Tags and Input and Output pins will also automatically be generated and linked template file (.cdtx). This file can then be imported and used in the existing project or
together. another, separate project.

Follow these steps to create a WebPage with one click: Supported Template Elements:
1. Select the cell(s) containing the functions you want to expose on the WebPage Component Elements
and select Create a WebPage from Selected Cells  WebPage
2. A WebPage will be created, based on the selected cells and their cell types.
Individual Elements
NOTE: The minimum size of the created WebPage is the default WebPage size, 1024 X  WebPage Elements
768 pixels. However, the WebPage that is created will automatically be resized to fit the  Spreadsheet Cells
generated WebPage elements.
By default, In-Sight Vision Suite has a dedicated template directory, where you can export
and store your own template files. All template files stored in this directory are automatically
loaded when the application starts up.

Section 7 | Slide 25 Section 7 | Slide 26

 Export Template – Individual Elements Export Cells – Individual Elements

Web HMI Spreadsheet

Section 7 | Slide 27 Section 7 | Slide 28

The user can export individual elements or an entire Task or WebPage. To export an Individual Spreadsheet Component to a Template:
1. Select the element to export.
Individual Elements include: 2. Right Click and select Export Cells to Template.
 Tags 3. Fill in the details about the exported element.
 WebPage Elements 4. Press the Export button, the exported element will display in the Template
 Task Blocks Browser.
 Application Scripts
 Data Change Scripts
 User Scripts

Template files only hold references to dependent objects, and not the dependent objects
themselves. The user must either also export those dependent objects and import them at
the same time or relocate them after importing. Otherwise, after importing the template file,
it will not function correctly, and errors will be encountered.

To export an Individual HMI Component to a Template:

1. Select the element to export.
2. Right Click and select Export to Template.
3. Fill in the details about the exported element.
4. Press the Export button, the exported element will display in the Template
Browser.

Section 7 | Slide 27 Section 7 | Slide 28

 Export Template – Entire Components Import Templates

Component Element –
Right-Click

Section 7 | Slide 29 Section 7 | Slide 30

Component Elements include: There are two ways to import template files from the Template Browser, depending on the
 Task type of template file, individual element or component.
 WebPage
Individual Elements
To export Scripts, a Task, or a WebPage: Drag and drop the individual element to its corresponding location. For example, if
1. Select the Script, Task or WebPage in the Project Explorer. an individual Control, such as a button, is being imported, drag and drop the button
2. Right click the Script, Task or WebPage , and from the menu, select Export. onto a WebPage.
3. Fill in the details about the exported component in the Export dialog.
4. Press the Export button, the new exported component will display in the Component Elements
Template Browser. Either double-click the file in the Template Browser or select the file and right-click
and select Import from the menu.

NOTE: The user can also drag and drop component elements, however, because they only
have one location where they can be placed, the double-click and right-click options
automatically place them in their proper location.

Section 7 | Slide 29 Section 7 | Slide 30

 Tags Publish Tags
2.
1.

3.

Section 7 | Slide 31 Section 7 | Slide 32

The Tag Browser window displays all of the tags and $ functions currently registered in the If a specific spreadsheet cell is not listed in the Tag Browser, then you should check to
In-Sight ViDi IDE. Tags are named variables, and the data stored in a tag can be accessed make sure that it is published. Cells with published tags have blue triangles in the bottom
and shared throughout the application. The $ functions are system calls that are used to right corner in the Spreadsheet Editor.
invoke actions within the subsystems of the application.

If the Tag Browser is not visible, navigate to the View Menu and select Tags from the list.

If the cell does not have a published tag, you can publish them in three ways:
1. Use the Edit  Publish option. The Spreadsheet Editor then published the cell
with a default tag name.
2. Right-click the cell to open the context menu and select Publish. The
Spreadsheet Editor published the cell with a default tag name.
3. Rename the active cell in the Cell Name textbox of the Edit Toolbar. This method
not only published the cell, but also adds a custom tag name in the process.

The first and second methods are also available when multiple cells are selected. The third
method also works when multiple cells are selected, but only the first selected cell is
named and published in that case.

Section 7 | Slide 31 Section 7 | Slide 32

 Summary Skills Journal Lab Exercise

 A WebPage is used to build a single page of an HMI

User Interface
 When designing the HMI, it is important to consider Complete:
how the operators will interact with the system Section 7
Skills Journal
 A WebPage can quickly be created using the ‘1 click
feature’
 Templates are used to share components of a project,
such as controls, web pages, scripts and tasks

Section 7 | Slide 33 Section 7 | Slide 34

In this section we covered the following: Complete:

Skills Journal (image designed by pngtree)
 A WebPage is used to build a single page of an HMI User Interface Lab Exercise
 When designing the HMI, it is important to consider how the operators will
interact with the system
 A WebPage can quickly be created using the ‘1 click feature’
 Templates are used to share components of a project, such as controls, web
pages, scripts and tasks

Section 7 | Slide 33 Section 7 | Slide 34