JMobile Training Module2. JM v Module2 v04

JMobile Training Module2

JM v1.91.00.254 Module2 v04

• Remote Access

• VNC

• JMobile Client

• JM4Web

• FTP

• Manage Target informations

• Javascript

Remote Access

VNC vs Clients

• VNC Server can be “installed” on panel by:

1. activating VNC plug-in into “Project Properties”,

2. then performing an “update runtime”.

• Once installed on panel, it must be executed (at least one time)

• What to do:

• Configure a button into project with action

LaunchVNC

• On panel, click the button

• VNC Server options window will pop up

• Select Start and/or

configure autostart option

• Connect through

• What is:

• JMobile Client is an application included into JMobile Suite installer package

• Run only on Microsoft Windows OS machines

• How it works:

• Same application running on the panel will be loaded in the client window

• Acts as a remote client sharing local visualization with those Tag values maintained or updated by communication protocol

• Page currently viewed on JMobile Client is not the same currently viewed on Panel

• Access from JMobile Client is secured by “Force Remote Login” (enabled by default on 1.90 projects)

• Once launched, you need only to type-in panel address

JMobile Client

• JM4Web provides a new real-time interface to the panels using standard web technologies

• Run on HTML5 web browsers like:

IE 9+, Firefox 3.6+, Safari 5+, Chrome 6+, without any plug-in

• What to do:

• JM4Web pages (pages, template and dialogs) must be created under

“Web” section

• You can choose which kind of page

• Desktop: 1024x768

• Smartphone: 320x480

• Tablet: 1024x768 (same as Desktop)

• Widget Gallery for pages belong to Web, do not show “Unsupported Widgets”:

• Clocks • Trend/Graphs • Recipes • Scheduler • Alarms • Controls

• After page creation, we need to “Export Web Project”

• Then select which pages will be displayed for different

devices

JM4Web

• Finally project can be downloaded to Target

• To access web project: open a web browser pointing to the panel’s IP address

• By default admin/admin credentials can be used

or any other user defined into user management

• Note: Every change made on

web pages must involve

• A new “Export Web Project” action

• A new “Download to Target” operation

• All panels integrates and FTP server that can be used to get access to the internal flash disk data

• Any standard FTP Client

can be used

• FTP access in JM 1.90 is disabled

by default. Must be enabled into Group Authorization settings

• “Enable FTP authorization”

• “Root Folder” can be set as per needs

• Allowed only ONE

connection at a time

(pay attention on FileZilla!)

• Going to Run > Manage Target...

is possible to manage Target Device

• Manage Target has three

different tabs:

• Runtime: for all Runtime operations

• Board: for all Board/BSP operations

• License: Future use

(CODESYS v3 softPLC activation)

• There are two rows of buttons into Runtime tab:

• First row allow to manage projects currently loaded into target device:

• Once selected panel from IP panel list

• Is possible to Retrieve Projects

• And act as Project Manager accessible from Contextual Menu into panel

• Second row belongs to runtime operations

• Second row belongs to Runtime operations

• Once selected panel from IP panel list

• Update Runtime: allow to update panel runtime

(changes to Install Runtime if panel being detected without Runtime)

• Update Package: allow to create an Update Packate

(seen at Training Module1)

• Restart Target: allow to restart your HMI

• Target Setup: allow to change ports listened by Runtime

(defaults 80 and 21)

• Into Board tab is possible to manage all OS component in order to allow BSP updates via ethernet

• Same download order should be followed as per USB

update

• Is useful to replace panel splash screen image shown during power-up phase

• Splash screen image must be less than 500 KB

• Is useful also to retrieve OS components informations

• A JavaScript function is executed when an event occurs.

For example, a user can define a script for the OnMousePress

event.

• Evaluate carefully execution of JavaScript function at a given scan rate with a scheduled action.

This approach minimizes the overhead required to execute logic on the panel.

• JavaScript engine run at the client side.

Each client connected to the server side of JMobile Runtime (could be the client resident on panel, or a Windows Client on a PC) will run the same script, providing output results that depend by client

• You can add JavaScript in the following events:

• Widget Events i.e. buttons, fields

• Page Events

• System Events i.e. schedulers, alarms.

• JMobile Studio uses JavaScript objects to access the elements of the page. Each object is composed of properties and methods.

Objects

Objects Description

Widget The Widget class is the base class for all elements on the page

Page This object references the current HMI page. The page is the top-level object of the_screen Project This object defines the project widget. The project widget is used to retrieve data_{about the project such as tags, alarms, recipes, schedules and so on.}

Group A group is a logical element that is associated with a set of logical tags. It provides an_{interface to enable the uniform operation on a set of logically connected tags} State Class for holding state of a variable acquired from the controlled environment.Beside value itself, it contains the timestamp indicating when the value is collected

• Project Methods for pages: • nextPage project.nextPage(); • prevPage project.prevPage(); • homePage project.homePage(); • loadPage (PageName) project.loadPage("Page5.jmx"); • showDialog (DialogPageName) project.showDialog("Dialog.jmx");

Project Objects

• closeDialog

project.closeDialog();

• showMessage (MessageString)

project.showMessage("Hi This is test message");

• Project Methods for tags:

• object getTag( tagName, state, index) var state = new State();

var value = project.getTag("Tag1", state, 0);

• number setTag( tagName, tagValue, [index], [forceWrite] ) project.setTag("Tag1", val);

• Page Properties

• backgroundColor

page.backgroundColor = "rgb(128,0,0)";

• width

var middle_x = page.width/2;

• heigh

var middle_y = page.height/2;

• Page Method

• object getWidget(widgetName)

var my_button = page.getWidget("btnStd1");

Page Objects

• NOTE: When you change the properties of widgets with JavaScript you have to set the widget Static Optimization to Dynamic,

otherwise changes to properties will be ignored. You can find the option Static Optimization in the Advanced Properties.

• Widget Properties:

• value

• objectName (aka id)

• fill (aka color)

• visible, opacity

• x, y, width, height, rotation

Widget Objects

• We will see Javascript properties and function directly on a demo project

Javascript Training Demo

• To bebug javascript code we can enable debugger for single page

• When Javascript funciont is called, Debugger popup

• Useful using Simulator

Javascript Remote Debugger

• Debug of Javascript code can be done running on panel,

remotly