Day 1 Live Training

Day 1 Live Training
JMobile Basic Training

Learn the fundamentals of JMobile and create your first project while completing interactive
examples. This segment covers the basics:
• Introduction to JMobile (4) • Widgets (51)

• Using the HMI (18) • Pages (69)
• Protocols (42) • Events (75)
• Tags (44) • Javascript (82)
• Properties (48) • Custom Widgets (92)
©2020 EXOR International S.p.A. All rights reserved

JMobile Basic Training Exercises
1. Create and Download Your First Project (21) 7. Testing More Widgets (74)
2. Adding Protocols and Tags (47) 8. Using Events (78)
3. Data Links, Formulas, and Live Tags (57) 9. Adding Page Navigation (80)
4. Using the Formula Bar (59) 10. Grid Layout (81)
5. Testing Widgets (71) 11. Basic JavaScript (91)
6. Utilizing a Template page (73) 12. Creating a Custom Widget (102)

Introduction to JMobile
• What is JMobile? (5)
• JMobile installation and licensing (6)
• The JMobile Studio IDE (7)
• Creating a New Project (16)
• Using the Simulator (17)

What is JMobile?
• JMobile is an HMI software platform developed by Exor.
• JMobile is a suite of software components that provides a
complete solution for connecting equipment and visualizing
data on all modern Exor HMIs:
• eX700
• eXWare
• JSmart
• eSmart
• eTOP500/600
• JMobile suite includes:
• JMobile Studio: programming software for development
• JMobile Runtime PC: HMI engine for industrial PCs
• JMobile Client: application for remotely connecting to the HMI

JMobile Installation and Licensing
• JMobile Suite can be downloaded here: https://www.exorint.com/en/jmobile-download
• JMobile Studio and JMobile Runtime PC are fully functional for 30 day trials without a license.
• A JMobile Studio license:
• Never expires
• Is valid for a single computer
• Allows for JMobile HMI Run Time to be installed on any number of HMIs
• Allows JMobile Studio to run on a virtual machine
• A JMobile Runtime PC license:
• Allows JMobile Runtime PC to be used on a PC

The JMobile Studio IDE
The
ProjectView
pane displays
the page
directory as well
as the project
configuration
elements (e.g.
tags, alarms,
reports,
scheduled
events).

The Properties
pane displays
the properties
and associated
actions of the
selected object.
When no widget
object is
selected, it will
display the page
properties.

The page canvas is the area where pages are created and modified
Graphical editing tools can be found above the page canvas

The Javascript editor is below the page canvas, expandable by clicking “Script”
The Widget
Gallery is
nested on the
right. Page
elements can be
clicked and
dragged from
the widget
gallery onto the
page. Widgets
are organized
into categories
and
subcategories.

The
ObjectView is
nested on the
left. It shows a
tree view of
all widget
objects on the
page. Clicking
on a widget
from the list
will select it
and display its
properties.

The Tag Cross
Reference is
nested on the
left. It shows
all datalinks
throughout the
project. The
tag cross
reference can
be organized
by tag or by
location.

ProjectValidator is nested at the bottom. It helps ensure web page functionality is supported on
©2020 EXOR International S.p.A. All rights reserved widgets placed on web or unified pages. Click “Validate” to run the diagnostic.

Creating a New Project

1
Click the “New “ icon or click “File” -> “New” to create a new project.
2 3 4

Name the project, select a location Select the HMI that will be used, so the Choose the project template to create page
project will have the correct page categories. Unified pages can be accessed
to save it, and click “Next”.
through HMI or Web. Native and Web or
resolution. Select an orientation for the
Custom allow you to create different pages
screen and then click “Next”. for each category.

Using the Simulator
The project can run in the simulator

allowing a
preview of the project. The simulator can also
connect to the PLC via serial or Ethernet, for
true online simulation.

Using the HMI
• Installing JMobile Runtime (19)
• Download to Target and Manage Target (20)
• The Context Menu (22)
• Update Packages (23)
• System Settings (24)
• BSP Updates (41)

Installing JMobile Runtime
• On bootup out of the box, the HMI will not have
runtime and will load into an “Empty boot
sequence” screen.
• JMobile Runtime must be installed on the HMI,
which can be done in two different ways:
• Download to Target from JMobile Studio while
connected to the HMI. This is how projects are
usually downloaded during development, but on
download to an HMI without JMobile Runtime, the
user will be prompted to download it.
• Update package generated from JMobile studio,
installed on the HMI through USB stick.
• When connected to a network or PC, the DHCP
IP Address should show at the bottom of the
screen.

Download to Target and Manage Target
1 3
Click the icon on the toolbar or go to Run > Go to Run > Manage Target to access the HMI. Runtime
Download to Target to open the above dialog. From provides options for uploading projects residing on an
the JMobile Studio, all devices on the network are HMI, managing Runtime, and creating an update package.
visible. Select your target and download the project. The Board tab provides access to additional system
components of the HMI.
Exercise 1.1: Create and Download Your First Project
The goal of this exercise is simply to create a new project with no content and download it to the HMI.
Feel free to refer back to the previous slides (noted in the parenthesis for help).
1. Create a new project. (16)

2. Connect to the HMI and download the project. (20)
It may take a few minutes to install the runtime, then the HMI should reboot and show the JMobile
project. If the JMobile project is empty then the HMI will just show a white screen.

The Context Menu
• Touch and hold anywhere on the screen (while a
JMobile project is loaded) to view the context
menu.
• The context menu is used to access various
settings and functions on the HMI, we will
explore a few in the coming slides.
• Keep in mind that this “touch and hold” macro
can be disabled to prevent operators from
accidentally opening the context menu. Instead,
it can be set to be opened by pressing a button in
the JMobile project.

Update Packages
1 3 Copy the UpdatePackage zip file into a USB stick and
insert the USP stick into the HMI.
2 4
Create the Update

Package in the
desired directory.
Open the Context Menu and click “Update”. Wait for the
system to locate the update or browse for it at the location
/mnt/usbmemory. Click “Next” and apply the update.

System Settings
There are 2 ways to access the HMI System settings:
• To access them on the HMI, open the context • From a connected browsing device, go to the
menu and select “Show system settings”. URL: https://IPADDRESS/machine_config where
IPADDRESS is the HMI’s IP address. See the
example below:

System Settings: Overview
• The Language tab can be used to change the system language between English, Italian, German,
Chinese, and French. Keep in mind that this will not change the HMI project language, only the
language of the context menu and system settings.
• The System tab shows some build and memory information.
• The Logs tab can be used to extract diagnostic logs.
• The Date & Time tab allows the system time and time zone to be set. NTP can be used to
automatically set the time if connected to a network, otherwise it can be set manually.
• The Plugins tab can be used to manage any applied HMI plugin modules
• The Display tab can be used to change system brightness, backlight, orientation, and color
• The Restart tab allows for the unit to be restarted into the Config OS
• System username and password can be changed at the Authentication tab

System Settings: Network
• The Network Interfaces tab is used to toggle
DHCP on and off. When turned off, IP addresses
can be assigned manually to any of the ethernet
ports.
• The “Restore” button can be used to reset all
Network Interfaces and DNS settings to default

System Settings: Services: Autorun Scripts
Allows a script file “autoexec.sh” in the USB stick to run when inserted. This type of file is used for
automatic BSP updates.

System Settings: Services: Avahi Daemon
• Enables programs to publish and discover
services and hosts running on a local network.
When enabled, the HMI can be reached using the
device’s Avahi hostname in addition to the IP
address.
• Avahi Daemon service runs on UDP port 5353.

System Settings: Services: Bridge/Switch Service
• Allows for multiple ethernet interfaces to be bridged and thereby share the same IP address.
• Bridge Service creates a Linux-based layer-2 Network Bridge between two or more network
interfaces. If both WAN and endpoint devices are attached to such a bridge, the two networks will be
physically joined and endpoints will be available as if they were directly connected to the WAN.

System Settings: Services: Cloud Service
Configure Corvina Cloud 1 to remotely access the HMI as a gateway device (covered thoroughly in the
Corvina Cloud 1 training segment).

System Settings: Services: DHCP Server
• Enabled: enables the DHCP server on the selected
interfaces
• Start IP and End IP: IP addresses distributed by
the DHCP Server
• Gateway: the gateway address
• Netmask: the provided netmask
• DNS Server: the DNS server address
• Lease Time: the time until the obtained address
will expire. Default is 86400 seconds (one day).
Acceptable values are from 60 seconds to 864000
seconds (10 days)

System Settings: Services: Fast Boot and Show Loading Bar During Boot
• Fast Boot enables the HMI to boot up as fast as possible. It will forgo showing diagnostic information
and load only minimum necessary features to run the HMI application. Other services are loaded
afterwards.
• The loading bar can be hidden during bootup if desired.

System Settings: Services: Firewall Service
When enabled, only connections matching the
defined rules are allowed.

System Settings: Services: Router Service
This service uses IP Forwarding and Network Access Translation to share the connection from WAN to
LAN ports. This allows endpoint devices to be remotely accessed via the gateway when using Corvina
Cloud 1.

System Settings: Services: NAT
1:1 NAT, create alias IP on WLAN and forward all packets (or given port range) with that destination IP
to another device attached to a LAN.

System Settings: Services: Port Forwarding
Incoming TCP packets requests can be redirected from WLAN interface from one address and port
number combination to another combination.

System Settings: Services: SMNP Server
• SMNP is a network protocol that allows for management of network infrastructures.
• It is commonly used to monitor network devices as switches, routers, etc connected to a LAN network.
• When SMNP service is enabled, an SMNP manager can retrieve information from the HMI device
using the SMNP protocol. Currently there are not propriety MIBs available. Only the standard public
community MIBs are available in read only mode.
• The SMNP server runs on UDP port 161.

System Settings: Services: SSH Server
• SSH Service provides remote login to the HMI using the secure shell protocol.
• On PC, an SSH Client such as PuTTY can be used to access the HMI.
• This service must be enabled to allow the use of FTP.
• The SSH server funs on TCP port 22.

System Settings: Services: VNC Service
• VNC Service allows remote access to the HMI display. A VNC client can be used to view and control
the HMI.
• The VNC server listens for connections on TCP port 5900 by default.
• The option to allow multiple clients to connect simultaneously can be enabled.
• View only restricts using the client to control the HMI.
• Authentication can be enabled.
• This service must be enabled to use the VNC application in Corvina Cloud 1.

System Settings: Management
• The Config OS and Main OS interfaces show the BSP version and can be used to apply a manual BSP
update.
• Settings and Data can be imported/exported/cleared here.
• The splash image (by default is the JMobile logo shown when the HMI is booting up) can be changed
here.
• Working in this area is a critical operation and, when not done correctly, may cause product
damages requiring service of the product. Contact technical support for assistance when
attempting to perform these functions.

BSP Updates
• Occasionally a new BSP version will become available and will enable some new HMI system
features and services.
• The HMI BSP version can be viewed in the Management tab of the System Settings. The last three
digits of the Config OS and Main OS version numbers show the BSP version number.
• BSP updates can be downloaded here: https://www.exorint.com/en/panel-bsp

• Automatic BSP updates can be applied simply be extracting the downloaded zip file into the root of a
USB stick and inserting the USB stick into the HMI. An update will initiate automatically.
• Make sure to apply the correct update for your HMI model. Contact technical support with any
questions or doubts about applying the update.

Protocols
• Protocols are used to tell JMobile what devices it will connect with.
• JMobile supports up to 4 unique protocols and can also accommodate a PLC network (multiple PLCs
of the same type) within a single protocol.
• Virtual, or internal, protocols can be used to access internal data. These do not count towards the 4
protocol limit.
• The Variables protocol can be used to create virtual tags that are not used with other devices.
• The System Variables protocol can be used to access internal tags like system time and brightness, plugin modules,
create retentive variables, and more.
• Most protocols are selected and then configured to work with a specific PLC model.
• A few generic protocols like Modbus are available in JMobile. These protocols work with any PLC
model that support that protocol.
• More generic protocols are available to JMobile through Codesys.

2
Adding a Protocol Click the plus butt
to add a
1
communication
protocol.
3 4
Click the Configure the
dropdown protocol and
arrow to view click “OK”.
and select a
protocol.
5
Double click on Repeat to add
“Protocols” in multiple
ProjectView to open protocols.
the Protocols tab.
Tags
• Tags tell JMobile what data points or variables to reference.
• A tag must belong to a protocol in JMobile. An internal tag can be created in the Variables protocol.
• Tags can be created manually or imported from a file exported by the PLC software.

2
Select the protocol for
the tags to be created
Creating Tags in. Click the “+” sign
to create a new tag.
1
3 4
Click the tag’s name to change it. Double

click in any other column to reopen the
tag configuration dialog. The tag
configuration dialog will only appear
automatically for the first tag in each
protocol.
When the first tag is created, the tag
Double click on “Tags” configuration dialog will open.
in ProjectView to open Define the data type and addressing
the Tags tab. and click “OK”.
Importing Tags
1 3
Find the file
containing
the tag
dictionary
and click
“Open”.
Select the protocol for the tags to be imported. Click the 4

“>]” (Import Dictionary) icon to import a dictionary.
2
Select the importer
type. Each protocol
will have unique
import formats to
choose from. Tags from the imported dictionary are grayed. Double
click a tag to add it to the project or select multiple tags
©2020 EXOR International S.p.A. All rights reserved and click the Import Tags icon to add them all.
Exercise 1.2: Adding Protocols and Tags
The goal of this exercise is simply to add some protocols and tags to the HMI project. Feel free to refer
back to the previous slides (noted in the parenthesis for help).
1. Add the following protocols. Make up IP addresses and port numbers or leave as default where
necessary: (43)
• Variables
• System Variables (Retentive Memory)
• Ethernet IP (Logix 5000)
• Modbus TCP
2. Add the tags shown on the right. (45)
3. Import the Ethernet IP tags using the Main_plc.L5X file. (46)

Properties
• Properties are used to modify the elements of items in JMobile.
• Properties exist at the Widget, Page, and Project level.
• Most properties can have their values represented by a tag. A tag can be assigned to a property by
setting a data link.

Properties
1 2
When no widget is selected, the page By default, only commonly
properties will be shown on the right used properties like Value and
side under “Properties”. Click a Color are shown. Click the
widget to show the widget’s “Show Advanced Properties”
properties here, and click in empty icon to show the additional
space to return to the page properties. properties of the page or
widget.
3
Click the “Expand All” and “Collapse
All” buttons to reveal or hide
additional fields. This can also be
done by clicking the “+” or “-” signs
to the left of a field.

Project Properties
1 2
Click on Project properties in the

ProjectView to see properties at the All Properties with the +
project level. sign can be assigned a tag
and controlled by Internal
or PLC variables.
Widgets
• Items or objects that are added to the page or project are called Widgets in JMobile.
• JMobile has a large library of these premade widgets that can easily be dragged and dropped into and
around the project.
• Widgets are very customizable and the user is even able to create their own custom widgets to add to
JMobile.
• Most programming in JMobile is done by either linking tags to the properties of these widgets or by
triggering events off of the widgets.

Widgets
• The Widget Gallery (53) • Lights (62)
• Text and Numeric Widgets (54) • The Color Palette (63)
• Setting a Data Link (55) • Graphs, Meters, and Switches (64)
• Live Tags (56) • Combo Box (65)
• Formulas (58) • Grouping Widgets (66)
• Message Fields (60) • Grid Layout (67)
• Buttons (61) • Images (68)

The Widget Gallery
1 2 Click on a different category to
On the right side of the screen, roll the
mouse over “Widget Gallery”. The change it and view its subcategories.
Widget Gallery contains many Add a widget to the project by
different types of widgets (for clicking and dragging it onto the page.
example, “Basic”). Underneath the
open widget type are subcategories
(for example, “Text/Numeric”) click
on the subcategory to change it.

Text and Numeric Widgets
1 2
In the Widget Gallery Edit the label text by
under “Basic” and clicking in the “Text”
“Text/Numeric”, add a field and changing it.
Label Widget and a
numeric field widget
(showing “99999”).
3
The text can also be
changed by double
clicking the widget,
which will open a
text editor window.

3
Setting a Data Link

1 2
After linking the tag, the

widget’s access type can be
edited as a property.
4
With the field widget selected,

click the “+” icon to link a tag
to the field’s value property, Select a tag to link to the widget. The
doing so will open the tag access type can be set to Read Only,
Read/Write, or Write Only. Select Tags can also be linked by clicking
explorer dialog. the “a” icon and typing the name of
“Read/Write” and click “OK”.
the tag rather than finding it in the
tag explorer.
Live Tags
1
Live tags can be used to embed the value of a tag into text within JMobile. Double click on a label widget to open the
text editor.
2
Add a live tag by entering the name of the tag into
the text body between rectangular brackets [ ].
Check the box to “Enable Live Tags” and then click
“OK” when finished.

Exercise 1.3: Setting Data Links and Live Tags
The goals of this exercise are to practice adding widgets and data links, setting properties, and to learn to
use live tags. Feel free to refer back to the previous slides (noted in the parenthesis for help) and
remember to simulate or download to the HMI to check your work.
1. Add three field widgets and link tags “Int1”, “Int2”, and “Int3” to their “Value” properties with R/W
access. (54, 55)
2. On the field linked to “Int3”, link its “Min” and “Max” properties to “Int1” and “Int2”. (49, 55)
3. Add a field widget and link tag “Float1” to its “Value” property with R/W access and show two
decimal digits (49, 54, 55)
4. Add a field widget and link tag “Str” to its “Value” property with R/W access and change the
number format to “None” (49, 54, 55)
5. Add labels for all fields and use live tags to display “Min” and “Max” for the field linked to “Int3”
(54, 56)
Formulas
1 2
Click “Formula db” to
access a list of useful
functions. Scroll over a
function for its
description and
argument parameters.
Numeric fields do not have to display a tag directly; they User formulas that
can display the result of an expression containing one or have been saved will
more tags. Click “Insert formula” at the bottom of the tag appear here.
explorer.
3 4
Enter the formula into the formula bar. Double click on a tag to insert it or type it
Click the check icon to
using the syntax $(‘TagName’). Mathematical operators (+,-,*,/,%) bitwise operators
confirm the formula, or the
(&,|,~,<<,>>,etc.) and logical operators (&&,||,!,==,<,>,etc.) can be used. A full list of
“X” icon to delete it if
operators can be found in the User’s Manual.
©2020 EXOR International S.p.A. All rights reserved necessary.
Exercise 1.4: The Formula Bar
The goal of this exercise is to explore the depth of what can be done using the formula bar. Feel free to
refer back to the previous slides (noted in the parenthesis for help) and remember to simulate or
download to the HMI to check your work.
1. Add a field widget with a Max() formula to show the larger of the tags “Int1” and “Int2” (54, 58)
2. Add a field widget with a mathematical formula to show the product of the tags “Int1” and “Int2”
(54, 58)
3. Add a field widget to show the length of the tag “Str” (54, 58)
4. Add label widgets with live tags enabled next to each of the above fields. Use the live tags to show
the formulas with their current values. For example: ([Int1] x [Int2]). (54, 56)

Using Message Fields
The Message Field Widget will display a
1 2 certain message depending on the widget’s
In the Widget
current value. Click the “+” icon in the
Gallery under
“Messages” property to open the
“Basic” and
“Message Text” dialog where the
“Text/Numeric”,
messages can be edited.
add a Message
Field widget.
In the “Message Text” dialog, change the
3 message corresponding to an index to the text
that should be displayed when the data linked
tag is equal to the index value. When the
“Contiguous Index” field is checked, indexes
will only be added in numeric order;
unchecking this field allows for index
numbers to be skipped. Click “OK” when
finished. Then, data link the corresponding
tag to the Message Field Widget.
2
Data link a Boolean tag to the button’s
Buttons “Value” property. By default, the button
will be set to “momentary”, which means
1 that the value of the tag will be set to 0
In the Widget
Gallery under and will change to 1 while it is pressed
“Buttons”, find and and held. When the button is released the
add any button tag value will return to 0.
widget to the
project.
3
Click in the “Click Type” property to change
the button to a “maintained” type. When a
maintained button is pressed and released, it
retains its value; it remains in the pressed
state and the tag’s value is set to 1 until it is
pressed again and it returns to a resting state
and the value changes back to 0.

Lights
1 2
In the Widget Configure the light by data linking the tag that
Gallery under should be displayed. Then, the colors that the light
“Lights”, find and shows are defined by clicking the “+” icon in the
add any light “Color” property. When the “+” icon is clicked,
widget to the the “Color List” dialog will appear.
project.
Colors are configured the same way as 4
3 messages. Use the “+” and “-” icons to
add or remove a color. Choose a color
to appear for the corresponding index
value by clicking the white square and
selecting a color from the dialog, then
click “OK”. When finished defining
colors, click “OK” to close the “Color
List” dialog.
2
The Color Palette
1
Similar to lights,
the fill colors of
other widgets can
be determined by a
tag’s value. Create
a data link on the
fill color to open
the color palette First select a tag. Use the “+” and “-” icons to add or remove a
section of the tag color or use the dropdown box on the right to select from
explorer. previously used color schemes. Clicka color to change it or click
the “X” icon to make it transparent.
3 The “Tag Value” corresponding to an added color will default to
the next sequential integer, starting at 0. Double click on the
value to change it. Colors can be mapped to single values, lists of
values (X, Y, Z), a range of values (X-Z), or a combination
thereof, as shown here.
2 The minimum and maximum values for
Graphs, Meters, and Switches the meter can be changed either by
entering the number or by attaching a
1 data link to the “Min” and “Max”
In the Widget Gallery under
“Meters”, many different gauges, properties. The “Value” property must
values, and scales are organized by have a tag data linked to it so that the
type. The different types are meter will change its value to show the
aesthetically different but function value of the tag.
very similarly.
Knobs and switches
3 4 function like maintained
In the Widget Gallery under buttons, although they
“Switches”, knobs, sliders, can have more than two
and switches can be added states. Slider
to the project. Knobs and configuration is similar to
switches have discreet that of meters—a data
values while sliders’ values link, minimum, and
range from the set maximum control the
minimum to the set value and range.
maximum.
2
In the “List” property, use the “+” to
add/remove messages. This allows for
Combo Box selection fields to be added to the combo
box.
1
In the Widget
Gallery under
“Controls”,
there is a
3
Combo Box Click the “+” to add a selection and edit
widget the “String List” field to define the text.
available. This The “Index” field is the corresponding
is a good tool value that will be linked to the “Index”
for allowing property. Click “OK” when finished.
the user to
select
something 4
Link a tag to the “Index” property by
from a long or
clicking the “+”. This tag will be linked to
variable list of
the value of the index field (set in step 3)
options.
as it is selected by the user.

Grouping Widgets
1 2
With the widgets selected, right click

Select several widgets by Ctrl + clicking
anywhere on the page and click Group from
or dragging a selection box over them.
the context menu.
Grid Layout
1 2
In the Widget Double click the grid to edit it.
Gallery under When it editing mode, left click
“Basic” and one of the arrows to resize the
“Tables”, find grid. Right click one of the
the “Grid layout” arrows to add, remove, or
widget. This is rearrange a column or row. Add
used to organize widgets directly from the widget
widgets in a gallery or paste them into the
uniform grid. grid to apply them to the widget.

Images
1 2
In the Widget Gallery under
“Basic”, and “Images”, add the
single “Image” widget.
Click the “…” icon in the “Image Path” property to

browse the computer for an image to upload.
3
The “MultistateImage” widget can be used
to display different images based on the
linked tag value. Click the “+” icon in the
“Images” property to add images. Link a
tag to the “Value” property to control the
displayed image or set the “Animation”
property to “true” to automatically cycle
through them.

Pages
• Pages are used to organize what widgets are loaded and what a user is able to see at a given time.
• Pages can be deployed for the HMI, web, or both.
• Dialogs (pop ups) are treated as pages that are loaded on top of a page, they can be modal or non-
modal.
• A user can only interact with an active modal dialog. The main page cannot be interacted with until the modal
dialog has been closed. There can only be one active modal dialog at a time.
• A non-modal dialog allows the user to interact with the main page or other non-modal dialogs while it is active.
• Template Pages are used to add fixed widgets or designs to many pages.
• Page navigation is handled with Events.

Adding a Page or Dialog
1 2
Under Double click on the page name to view that page
“ProjectView”, in the page canvas.
right click on the
category where the
page should be
created (like 3
“Normal” or Right click on a page to remove,
“Dialog”) and rename, duplicate, or move it in
select “Insert New the page list. The home page can
Page” to create a also be set in this way; the home
new page. page is the page that loads when
the HMI project boots up.

Exercise 1.5: Testing Widgets
The goal of this exercise is to test a few common widgets. Feel free to refer back to the previous slides
(noted in the parenthesis for help) and remember to simulate or download to the HMI to check your work.
1. Add a new page and set it to be the home page. Complete the below on the new page. (70)
2. Add two buttons and two lights. Match each light to a button and group them. (61, 62, 66)
3. Change the colors of both widgets in one of the groups and change the button click type of one button
so there is one momentary button and one maintained button. (49, 61)
4. Attach the “Value” property of the momentary button to the tag “Bool1” and the maintained button to
the tag “Bool2”. (55)
5. Add a gauge and slider and group them. Attach the “Value” property of both to element 0 of the tag
“ByteArray”. (55, 64)
6. Add a bargraph and slider and group them. Attach the “Value” property of both to element 1 of the tag
“ByteArray”. (55, 64)
4
Creating and Using a Template Page

1 3
Under
“ProjectView”,
right click on Under “Properties”
“Templates” and change the “Template”
select “Insert New property from “none” to
Template Page” to the name of the template.
create a new
template page. Add some widgets to your template page (above).
They will show in a page that uses that template (below).
5
2 Notice that the widgets that are part of
Name the the template will appear behind widgets
new that are part of the page. Template
template widgets can only be edited on the
page and template page.
click “OK”.
Exercise 1.6: Utilizing a Template Page
The goal of this exercise is to add a generic template page to use across the project. Feel free to refer back
to the previous slides (noted in the parenthesis for help) and remember to simulate or download to the HMI
to check your work.
1. Create a template page. Complete the below on the template page. (72)
2. Add an image widget to display a logo in the top left. (68)
3. Add a timedate widget in the upper right. This widget is found in Basic -> Controls. (53)
4. Add a field and link it to the system tag “Current page”. In the tag explorer, click the “System” radio
button and expand “Server” to find “Current page”. (55)
5. Add a button in the bottom right corner with the text “Menu”. Later this will be used for page
navigation. (61).
6. Go back to the other pages and add this as the template page. Do this for all future pages in the project.
(72)
Exercise 1.7: Testing More Widgets
The goal of this exercise is to test a few more common widgets. Feel free to refer back to the previous slides
1. Add a new page, set it to be the home page, and apply the template to it. Complete the below on the
new page. (70, 72)
2. Add a message field and a knob. Attach the “Value” property of both to element 3 of the tag
“ByteArray”. (55, 60, 64)
3. Change the labels and messages to “zero”, “one”, “two”, and “three”, and set the maximum values of
both to be four. (50)
4. Add a combo box and a multistate image. Attach the “Value” property of both to element 4 of the tag
“ByteArray”. (55, 65, 68)
5. Add your own images to the multistate image widget and change the combo box list labels to
appropriate names for them. (65, 68)

Events
• Events are used to trigger actions in JMobile.
• An event usually occurs when a button is pressed, when a value changes, or when a page is loaded.
• On an event, an action or list of actions can be executed to perform some function(s).

Adding an Event
1
Add an event by clicking the “+” icon in the row corresponding to the desired
trigger. Some examples are OnMouseClick of a button, OnActivate of a page,
and OnDataUpdate of a field.
The Action List can

2 3 execute multiple
Select and configure the
desired action to execute from actions in order
the list of available actions. It from this single
will then be added to the event. Use the “+”
Action List on the left side of and “-” to
the dialog. add/remove actions
and the arrows to
reorder them. Click
“OK” when
finished.
Tag Actions
Tag Action Description
DataTransfer Copy the value of the source tag into the destination tag
ToggleBit Set the value of the bit at the given index of the tag to its
opposite
SetBit Set the value of the bit at the given index of the tag to 1
ResetBit Set the value of the bit at the given index of the tag to 0
WriteTag Set the value of the tag to the given value
StepTag Increment the tag by the step value

Exercise 1.8: Using Events
The goal of this exercise is to test a few common actions. Feel free to refer back to the previous slides
1. Add a new page, set it to be the home page, and apply the template to it. Complete the below on the
new page. (70, 72)
2. Add a button with an OnMouseHold action to “Restart” the HMI/simulator. The “Restart” action is
found under the “System” category in the action list. (61, 76)
3. Add a field and attach its “Value” property to the “Short” tag. (54, 55)
4. Write a value to the tag when the page loads using the WriteTag action OnActivate. (76, 77)
5. Add two buttons that have “+” and “-” icons. When adding the button from the widget gallery, click the
blue “i” icon and select the icons from the “Math” category. (61)
6. Add StepTag actions to each of the buttons OnMouseClick to increment and decrement the “Short” tag.
(76, 77)
Page Actions
Page Action Description

LoadPage Load the given page
HomePage Return to the home page
PrevPage Load the preceding page in the page list
NextPage Load the next page in the page list
LastVisitedPage Load the page that was previously loaded
ShowDialog Show the given dialog page
CloseDialog Close either a given, selected, or all dialog pages

Exercise 1.9: Adding Page Navigation
The goal of this exercise is to test add page navigation to the project. Feel free to refer back to the
previous slides (noted in the parenthesis for help) and remember to simulate or download to the HMI to
check your work.
1. Add a new dialog page. This will be used for page navigation and will be called from the unused
button on the template page. (70)
2. Add a button with a home icon and assign the HomePage action to it OnMouseClick. (61, 76, 79)
3. Add two buttons with arrows and assign the PrevPage and NextPage actions to them OnMouseClick
(61, 76, 79)
4. On the template page, assign the ShowDialog action to the corner button OnMouseClick to make it
show the newly created dialog page. (76, 79)

Exercise 1.10: Grid Layout
The goal of this exercise is to learn to use the Grid layout widget to organize data displays. Feel free to
refer back to the previous slides (noted in the parenthesis for help) and remember to simulate or
download to the HMI to check your work.
1. Add a new page and apply the template to it. Complete the below on the new page. (70, 72)
2. Add a Grid layout widget with two columns and six rows. (67)
3. Insert labels and fields into the grid to display the elements of an array with their corresponding
indexes. (54, 55, 67)
4. Increase the minimum height of each row to make the grid scrollable. (67)

JavaScript
JavaScript can be added to JMobile to program supplemental functionality into a project.
• Executing JavaScript (83)

• JavaScript Variables (84)
• JavaScript Syntax Errors (85)
• Project Level Functions (86)
• Page Level Functions (87)
• JavaScript and Static Optimization (88)
• The alert() Function (89)

Executing JavaScript
1 2
Javascript can be executed as a standard action, When the Javascript action is created, a function block is
executed on button press, on data update, or by automatically created in the script editor, the function block will
any other event trigger type. be executed by the event trigger. The script editor is found at the
bottom of the screen below the page editor.
3
To access tags in Javascript, use:
project.getTag(“TagName”) to obtain the tag value

and project.setTag(“TagName”, var) to assign a value to the tag
JavaScript Variables
Variables in Javascript are dynamically typed.
In the above example, the variable “mytag” is not

declared with a data type, it will take on the data
type of whatever value is assigned to it. In this
case, it will take on the data type of the tag
“StringTag” (which is a string).

JavaScript Syntax Errors
Unlike some other programming languages, the user will not receive any
feedback at runtime if there is a syntax error.
Instead, if a function contains a syntax error then none of the code in the
function will execute.

Project Level Functions
Some common project level functions include:
Project level functions can be
added using the identifier project.getTag() retrieve the value of a tag
“project.” before the name of project.setTag() assign a value to a tag
the function. The script editor project.beginDataEntry() open data input stream, useful for initiating barcode scan
will assist the user by project.launchApp() launch another application to run concurrently with JMobile,
showing available functions such as Chromium or bash
after “project.” is entered. project.loadPage() change the active page
project.showDialog() load a dialog page
Executing actions such as loadPage() or showDialog() can be useful to launch with

Javascript in order to dynamically load a page or dialog (that is defined by a
variable)

Page Level Functions
Page level functions can be Some common page level functions include:
added using the identifier
“page.” before the name of page.getWidget() obtain a reference to a given widget
the function. The script editor page.setTimeout() execute a function on a delay
will assist the user by
showing available functions The setTimeout function must be written with a function as its
after “page.” is entered. argument, which it will execute on the given delay. In the below
example, the project.setTag function will be executed following a three
second delay.

JavaScript and Static Optimization
1 2
To modify the properties of
a widget this way, set the
Static Optimization property
of the widget to dynamic.
This allows widget
properties to change during
runtime.
By referencing the widget, properties like

size, position, and font can be directly
referenced and modified.

The alert() Function
The alert() function can be used to display a simple text dialog.

While not as practically useful as a dialog page, alerts are very useful for debugging during development.
To use the alert dialog for debugging, display the value of a tag at a relevant point in the script.

Exercise 1.11: Basic JavaScript
The goal of this exercise is to understand how JavaScript interacts with JMobile by adding a basic
JavaScript function. Feel free to refer back to the previous slides (noted in the parenthesis for help) and
1. Open the page that was created in Exercise 1.8. (76)

2. Add another button to the page. Assign the JavaScript action to the new button OnMouseClick. (61,
76, 83)
3. Use this script to set the “Short” tag to be its opposite (in other words, negate it). Try to write the
script first, then refer to the next slide for the solution. (83, 84)

Exercise 1.11: Basic JavaScript
The script below will set the tag “Short” to be its opposite.
The first line obtains the value of the tag and stores it in a variable.
The second line writes the value back into the tag after multiplying it by -1 to negate it.

Custom Widgets
Custom Widgets allow users to create widgets that can be added to the Widget Gallery.
• Grouping Widgets (66)

• Converting a Widget Group to a Custom Widget (93)
• The Widget Catalog – Properties (94)
• The Widget Catalog – Categories and Aliased Properties (95)
• The Widget Catalog – Parameters (96)
• Adding JavaScript to a Custom Widget (97)
• Custom Widget JavaScript Syntax (98)
• Inheritance (99)
• Adding a Custom Widget to a User Gallery (100)
• Exporting and Importing a Gallery (101)
Converting a Widget Group to a Custom Widget
1 2
With a widget group selected, right click The widget catalog shows where custom widgets are used in the
anywhere on the page and click Convert To project and the exposed properties of the selected widget. Name the
Widget. widget and click save to create a custom widget.
The Widget Catalog - Properties
1 2
When creating a custom widget, you can select Check the boxes next to properties of the widgets within the
specific properties of the widget to expose to the custom widget that you wish to expose. Clicking on a piece of
user. These properties will appear in the properties the custom widget on the right side will jump to that widget’s
pane when the widget is selected. Click the circle properties. Click Ok when finished to add the selected
icon to add properties. properties.
The Widget Catalog – Categories and Aliased Properties
1 2 3
If two or more properties will always be the

Custom widget properties can be Click and drag properties over same (always linked to the same tag) they
organized into categories. Click the the category to add them to it. can be combined using aliased properties.
folder icon to add a Category to the Add additional aliased properties by
properties list. Double click to clicking the “+” icon.
rename the category.
The Widget Catalog - Parameters
1 2 3
When linking tags, use the syntax $

{ParameterID} to reference the
parameter. Type in or link the
parameter to replace all instances of
Parameters are convenient when Rename the parameter and enter the
the reference.
structured tags are used. A parameter parameter ID. This will be the string
is a reference to an element within a used when referencing the parameter
tag name (e.g. container name). from other widget property datalinks.
Click the $ icon to add a parameter.
Adding JavaScript to a Custom Widget
1 2
Widget level JavaScript
functions can be triggered
by events within the
widget. Add a JavaScript
action to an event. The
Double click on the custom widget to
file property should read
show lock icon near the top right
<local group scope>.
corner. Click it to edit the widget’s
embedded JavaScript.
3
Edit the script at the bottom of the page.
Note the use of the “this” operator to allow
for multiple instances of the same widget.
The “wgt” keyword is used to reference
the widget itself.

Custom Widget JavaScript Syntax
this.BtnStd1_btn_onMouseClick = function(me,eventInfo)
//get project or page level widgets {
var SysPrpMgr = project.getWidget("_SysPropMgr"); //button click event script
var data = page.getWidget("field1"); }

//get subwidgets this.myFunction = function()
this.msg = wgt.getWidget(wgt.id + ".msgtext1"); {
this.btn = wgt.getWidget(wgt.id + ".BtnStd1");
//custom function script
}
//get subwidget property
var visible = this.msg.getProperty("visibility"); this.onActivate = function()
var BtnVal = this.btn.value; {
//do this on activation of the widget
//set subwidget property wgt.getWidget(wgt.id+ ".BtnStd1").setProperty("disabled", false);
this.msg.setProperty("visibility", true); this.myFunction();
this.btn.value = 1; }
this.onActivate(); //initializing function - executed when the page is
The “this” keyword is used so multiple instances of the loading
same custom widget can coexist on a page. The syntax
wgt.getWidget is used to reference a subwidget. “wgt.id”
refers to the ID property of the custom widget
(GroupWgt1 by default).
Inheritance
1 2
Select the inheritance from the dropdown menu Change the version to update the widget without affecting prior
to share changes made to an instance of the versions. When a custom widget is modified, the changes will
widget. Inheritance can be graphic, logical be propagated to all other custom widgets that share the same
(embedded JavaScript), or both. version and inheritance configuration.
4
Adding a Custom Widget to a User Gallery

1 2
At the
bottom of Name the
the widget gallery and
gallery, click OK.
open the
User
Widgets
category. 3
Click the + The custom widget is now saved in
icon to add the user widget gallery. Drag and
a custom drop the widget onto a page as you
widget would any other widget. Click the
gallery. paper & pencil icon to edit the
custom gallery. Repeat Step 3 to add
additional widgets.
Copy and paste the custom widget into
the gallery page. Save the gallery.
Exporting and Importing a Gallery
1 2
All user galleries are saved in the JMobile suite > To import a gallery into JMobile, simply copy the
user gallery folder. These folders can be shared gallery subfolder into the main user gallery
with other JMobile users. folder.

Exercise 1.12: Creating a Custom Widget
The goal of this exercise is to create a custom widget. Feel free to refer back to the previous slides
(noted in the parenthesis for help) and remember to simulate or download to the HMI to check your
work.
2. Add a shape (under “Basic” -> “Shapes”), button, label, and message field to a page and group
them. Set the message text to “Off” and “On”. (53, 54, 60, 61, 66)
3. Convert the group into a custom widget. (93)
4. Expose the properties of the custom widget and organize them into categories. (94, 95)
5. Copy the custom widget to a user gallery. (100)

JMobile Advanced Training
Take the next step with JMobile by learning these advanced features:
• Alarms (104)
• Scheduler (109)
• Recipes (113)
• User Security (117)

The Alarms Editor 2
Click the white box
1 to edit a parameter.
Assign a tag and a
trigger type to each
alarm. Alarms can be
triggered by a bit or
Double click on Alarms (in the
when its tag’s value
Config folder of ProjectView) to
falls outside a range,
open the alarms configuration editor.
deviates from a
Use the “+” and “-” icons to add or
value, or equals a
remove alarms.
value.
Check “Enable” to make the alarm active. Check

3 “Ack” to require acknowledgment in order to 4
Add a message to
clear the alarm from the active alarm widget.
each alarm to be
Check “Reset” along with Ack to require an
displayed in the
additional press of the reset button to clear an
alarm widget.
active acknowledged alarm.
2
The Alarms Editor

1
Click the white box under “Events” to open an

alarm’s event editor. Select the conditions under
which an alarm event is logged or printed, when the
active alarm widget is updated, and when the alarm
Click the white box under “Action” to edit alarm actions. action is executed.
Actions can be executed on an alarm event (e.g. when it is
triggered) or when the user action button in the active alarms
widget is pressed. Use the “+” and “-” icons to add or remove *A full list and description of alarm properties can
actions. be found under User’s Manual > Alarms > Alarms
Editor*
The Active Alarms Widget
1 2
Drag and drop an active alarms widget from the

Widget Gallery (Basic > Alarms) onto a page. The
active alarms widget will display alarms and allow Click the “+” icon next to the “Columns” property to
operators to acknowledge, reset, or enable/disable open the Table Column Editor. Add or remove
them. columns to the active alarms widget.

The Alarms History Widget 2
1
Open the Events Buffer tab to view
and edit the alarm buffer. By default,
AlarmBuffer1 will hold the enabled
alarm events. Edit the buffer’s size and
storage location or add another buffer
of type “Alarms” if needed.
Drag and drop an alarms history widget from the Widget
Gallery (Basic > Alarms) onto a page. The alarms history
widget will display data from the alarm event buffer.
4
Change the buffer that is
3 Change the buffer displayed in the “Events
where an individual Buffer” property of the alarms
alarm’s events are history widget.
stored in the alarms
configuration editor.
Exercise 1.13: Alarms
The goal of this exercise is to learn to how to configure alarms and interact with them at runtime using
the active alarm widget. Feel free to refer back to the previous slides (noted in the parenthesis for help)
and remember to simulate or download to the HMI to check your work.
1. Create the following three alarms, using a Boolean tag for Alarm1 and an int tag for Alarm2 and
Alarm3. Alarm1 should have a ShowMessage action, and Alarm2 should include the live tag in the
description using [ ] notation. (104, 105)
3. Add the active alarms widget with Ack/Reset buttons to the page. (106)
4. Add a button linked to "Bool1" and a slider linked to "Int4" to test the alarms. (61, 64)
Click the dropdown arrow to
Scheduler 2 select the schedule type.
1
Schedules can be executed at
set times (Recurring) or on an
interval (HighResolution).
3
Click the white box under the “Action”
property to add actions that will be
performed on the schedule. Click “+”
and “-” to add or remove actions like
Double click on “Scheduler” in you would for a button event, for
“ProjectView” to open the Scheduler tab. example. “Priority” determines which
Click “+” to add a schedule. actions are performed first when two
or more schedules occur at the same
time.

Scheduler 2 Recurring schedules require more in depth
configuration. The “Type” field sets the scale of
1
the recursion. “Mode” allows schedules to be
executed relative to sunset or sunrise, or
randomly during an interval. Set a Boolean tag
as “Condition” for the schedule. The schedule
will only be executed if the condition is true. If
no condition is selected the schedule will always
For HighResolution be executed.
schedules, the “Schedule”
property contains only the
3
interval field in The fields on the right will be editable based on the type and
milliseconds. Edit how mode selected. Choose the date, day of week, and time that the
often the schedule will schedule will be executed. If the schedule is being executed
execute. relative to sunrise or sunset, set the location where the HMI is
located. Instructions for adding a location not available by
default can be found in User’s Manual > Scheduler >
Configuring location for schedules.
The Scheduler Widget
Drag and drop a scheduler widget from the Widget
1 Gallery (Basic > Scheduler) onto a page. The
scheduler widget will display the scheduled events and
allow for runtime enabling and editing.
2
Click the “+” next to the “Name” property to open the
schedule list. Click the “+” icon in the schedule list to
add a schedule to the widget and select the schedule
from the “Scheduler Item” dropdown box. Click the “+
++” icon to add all schedules to the list.
*Note: HighResolution schedules cannot be displayed

in the scheduler widget*

Exercise 1.14: Scheduler
The goal of this exercise is to set up some scheduled actions. Feel free to refer back to the previous
slides (noted in the parenthesis for help) and remember to simulate or download to the HMI to check
your work.
1. Create the following schedules. (109, 110)
• Schedule 1: execute on startup only. Attach a WriteTag action to initialize the "Str" tag.
• Schedule 2: execute daily at a time in the near future (for testing). Attach a ShowMessage action.
• Schedule 3: high resolution schedule executed every 100ms. Attach a StepTag action to increment
"Int3" by 1.
Recipes
1 2 Double click on a
To create a recipe, right
click on “Recipes” (in recipe to open the
the Config folder of recipe editor. Add
ProjectView) and select elements to the recipe
“Insert Recipe”. using the “+” icon and
attach a tag to each
element.
3
Each set contains unique associated values for each
element of the recipe. In the Properties pane, define
how many sets the recipe will hold and name each
set. The “Recipe Name” can also be changed here,
or by right clicking on the recipe in the ProjectView
Recipes folder. Once sets are added, define the
values of their elements in the element table.

Recipe Widgets and Actions 2
1 Drag and drop a recipe set

widget or recipe menu widget
from the Widget Gallery (Basic
> Recipes) onto a page. The
recipe set (top) is assigned to a
specific recipe in its “Recipe
Name” property. The recipe
menu (bottom) allows for
recipe selection in the upper
combo box and set selection in The “Download” and “Upload” button are included in the
the lower combo box. Use this widgets. Downloading writes the values of the current
widget if the project contains recipe’s elements to the corresponding tags. Uploading
multiple recipes. sets the current recipe’s elements to the tag values. These
and other recipe actions can be assigned to button or page
events, scheduled, etc. They can be found in the Action
List under “Recipe”.
Recipe Fields
Double click on a numeric field to open the tag
explorer. At the top, select “Recipe” as the
source. There are many options for displaying
recipe data in a field. Display the name or value
of a certain recipe element an element of the
current recipe selected in the recipe widget.
Make the field Read/Write to allow for recipe
editing at runtime.

Exercise 1.15: Recipes
The goal of this exercise is to create a recipe and utilize its functionality by using the recipe set menu
widget. Feel free to refer back to the previous slides (noted in the parenthesis for help) and remember to
simulate or download to the HMI to check your work.
1. Create a recipe with 5 sets and 3 elements – an int element, a float element, and a string element.
Fill the recipe with appropriate values for each data type. (113)
3. Add a recipe selection widget, a button, and a grid layout widget to the page. (53, 114)
4. In the grid layout, add 2 columns of 3 data fields. (67)
5. Link the left column to the Current Recipe > Current Selected Set > Element Values. Link the right
column directly to the corresponding tags and make all datalinks R/W. (115)
6. Assign your recipe to the "Recipe Name" property of the recipe set menu. (114)
7. Attach a ResetRecipe action to the button's OnMouseClick event. (114)
2
User Security
1 Expand Security and double click on
User Groups or Users to edit the
respective field. Individual users In the User Groups tab, click the “+” icon to
must be members of a user group. add a new user group. Double click the name
User groups are used to define the of the group to change the name. It is also
permissions of users that are possible to assign a different home page to
members of the group. each different user group.
In the Uses tab, click the “+” icon to add a new user. Double click the name of the user to
change the name. This interface can also be used to change the default user (the user that
is logged in when the HMI is turned on), the user’s password (which is encrypted),
specifications for password length and criteria, and a few other settings.

User Security • Log Out: The active user is logged out and a new user must
log in
• Switch User: A new user can log in, or click “back” to
resume activity as the current user
• Reset Password: Select a user and change its password back
to its original value
• Add User: Create a new user during runtime
• Delete User: Delete a user during runtime
• Edit User: Change user settings or permissions during
runtime
• Delete UM Dynamic File: Delete all changes made to users
during runtime and restore user settings to their original
To change users or access user information values
during runtime, add a user management • Export Users: Export the UM Dynamic File
action. Triggering one of these actions will • Import Users: Import and apply a UM Dynamic File
change the page to open a premade template • Change Password: Select a user and change its password
page. during runtime

User Security
User permissions can be implemented using one of two methods. The following method is
recommended for assigning user permissions to one or only a few widgets.
1 2
Change the permission settings for the widget. Use Hide

to completely remove the widget from the page (for that
Right click on the widget which should have its user group) or Read Only to make it so the widget can be
permissions edited. Select Security Settings and seen but not used.
click on the user group that the permissions will be
edited for.
User Security
User permissions can be implemented using one of two methods. The following method is
recommended for assigning user permissions to all widgets or a large number of widgets at once.
1 2
Select any widget in the right
column to edit the user
group’s permissions for it.
Use Hide to completely
remove the widget from the
In the User Groups tab, click the white square in the page (for that user group) or
Authorization Settings cell of the group that will Read Only to make it so the
have its permissions edited. widget can be seen but not
used.

Exercise 1.16: User Security
The goal of this exercise is to modify security settings in order to tailor users' access to JMobile widgets
and actions. Feel free to refer back to the previous slides (noted in the parenthesis for help) and
1. Create a user in the "guest" user group and set a password. (117)
3. Add two fields to the page and link them to the "This Client User-Name" and "This Client Group-
Name" system variables. (55)
4. Add a button to the page and attach a ShowMessage action to its OnMouseClick event. Copy and
paste the button twice to create three instances of the same widget. (76)

Exercise 1.16: User Security (cont.)
5. Right click to open the guest security settings on each button: (118)
• Button 1: set the action permission to "Not Allowed"
• Button 2: set the widget permission to "Read Only"
• Button 3: set the widget permission to "Hide"
6. Add a fourth button to the page and attach a LogOut action to its OnMouseClick event. (76)

Day 1 Live Training

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Day 1 Live Training

Uploaded by

Copyright:

Available Formats

Day 1 Live Training

JMobile Basic Training

• Introduction to JMobile (4) • Widgets (51)

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

Graphical editing tools can be found above the page canvas

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

Creating a New Project

Using the Simulator

The project can run in the simulator

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

1. Create a new project. (16)

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

Create the Update

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

• BSP updates can be downloaded here: https://www.exorint.com/en/panel-bsp

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

Click the tag’s name to change it. Double

Select the protocol for the tags to be imported. Click the 4

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

Click on Project properties in the

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

Setting a Data Link

After linking the tag, the

With the field widget selected,

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

©2020 EXOR International S.p.A. All rights reserved

To access tags in Javascript, use:

project.getTag(“TagName”) to obtain the tag value

The alert() function can be used to display a simple text dialog.