JMobile Training Module2. JM v Module2 v04

Transcription

1 JMobile Training Module2 JM v Module2 v04

2 Module2 Contents Remote Access VNC JMobile Client JM4Web FTP Manage Target informations Javascript 2015 Exor International S.p.A. - All rights 2 reserved

3 Remote Access 2015 Exor International S.p.A. - All rights 3 reserved

4 Remote Access JMobile Client FTP Client etop500 panel JMobile Runtime Access to Flash content ActiveX for IE Fetch project Exchange live data JM4Web VNC Client Remote panel display 4

5 VNC vs Clients etop500 panel JMobile Client up to 3 connections ActiveX for IE VNC Client JM4Web 5

6 VNC 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 VNC client 6

7 JMobile Client 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 7

8 JMobile Client 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 8

9 JM4Web 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) 9

10 JM4Web 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 10

11 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 11

12 FTP 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!) 12

13 Manage Target informations 13

14 Manage Target informations 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) 14

15 Manage Target Runtime 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 15

16 Manage Target Runtime 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) Download System Files: allow to manually download Runtime configuration files 16

17 Manage Target Board 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 17

18 Javascript 18

19 Javascript introduction 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 19

20 Events You can add JavaScript in the following events: Widget Events i.e. buttons, fields Page Events System Events i.e. schedulers, alarms. 20

21 Objects JMobile Studio uses JavaScript objects to access the elements of the page. Each object is composed of properties and methods. Objects Widget Page Description The Widget class is the base class for all elements on the 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 together with flags marking quality of the value. 21

22 Project Objects 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"); 22

23 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); 23

24 Page Objects 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"); NOTE: this method is used in combination with widget objects 24

25 Widget 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 Examples: function btnstd8_onmouserelease(me) { var wgt = page.getwidget("rect1"); wgt.opacity = 0.5; } function btnstd8_onmouserelease(me) { var wgt = page.getwidget("rect1"); wgt.rotation = 45; } 25

26 Javascript examples 26

27 Javascript Training Demo We will see Javascript properties and function directly on a demo project (Ref. Training_JavaScript_v3) 27

28 Javascript debug To bebug javascript code we can enable debugger for single page When Javascript funciont is called, Debugger popup Useful using Simulator 28

29 Javascript Remote Debugger Debug of Javascript code can be done running on panel, remotly Full debugging functionality 29

30 Thank you!