JM4Web Users Manual
Contents
1. esses nennen nennen nennen nnn nnns 5 2 1 X o 5 2 2 El 5 2 3 Vleie E eg gei 5 SR Generating JMAWeb Pages sessi nennen nennen nnne nnns nena nnns nnns nnn 6 3 1 x dero auis o ico TORTE DOTT 6 31 1 Geelen TOM CK 6 3 1 2 Select Pages to Export EE 7 3 2 Setting JMAWeb Home Page nennen nennen nnn nnns 8 3 9 Start JMAWeb Export 9 Downloading the JM4Web broiect nnne 12 Running JM4AWeb from a Browser 14 JM4Web Re 16 6 1 Server DIS CODI GOL coy comer snccnsee sergenaenivensnaw tdt DUI USE chat NIS Du DER UFU mA Ou ehissdE nud 16 6 2 Juste AE en io DE 16 6 3 User Session Termmaton nennen nennen nnns 17 6 4 Non Active JMAWeb Droe 17 6 5 JMAWeb Version 19 6 6 JM4Web Logout 20 F JM4Web on WC e E 21 7 1 Widgets SUD OOM genee gege ege Seege SE 21 7 2 PCHOMS SUDDOT E 22 7 3 Tag Attachment Support esses eene nennen nennen nnn nnns 22 7 4 PoP OMS UDI ON eegene 22 75 Widget Events Support nennen nnns 23 7 6 Page Events Support cccccccccsssseceecssseeeeceeeeeceeeeseeeseeeesseasecesessaaeeeeeeseageeees 23 7 7 JavaScript AP Gupport nennen nnne nnne nnns 23 7 8 Templates Gupport nnne nnne nennen nnns 23 7 9 Keypad Support eee 23 7 10 Dialog Pages Support esssssssssssseseeenen nennen nennen nnn nnn nnn nnns 24 7 11 User Management Gupport nennen nennen nnne nnns 24 7 12 Maximum Concurrent User2. 6 4 Non Active JMAWeb Project You can be in a situation in which you may have a JM4Web page in your browser which is associated with a project that is no longer active in the panel In such a case you will get a confirmation box like the following through which you can redirect to the active project if you wish ptn0400 11 docx 01 08 2012 JM4Web User Manual 17 INTE A hy NAL Tech note This is not an active project now Redirecting to the active project 11 19 AM 7 26 2012 Figure 15 Redirect to active project confirmation screen You can choose whether they want to redirect to the active project or stay in the non active project If the you want to redirect to the active project then click on OK button and you ll be redirected to the current active project page Note This redirection is based on the assumption that the current active project has JM4Web pages in it If the user want stay in the non active project whatever actions they perform in the browser may not complete properly as the JMAWeb will not perform any server bound communications Your screen would look like the following which comes with the disconnected toolbar ptn0400 11 docx 01 08 2012 JM4Web User Manual 18 Living room v Lighting Climate Media Scenes Security 11 19AM 7 26 2012 a Pe 7 Figure 16 Inactive JM4Web project in browser 6 5 JM4Web Version The user can find the current JM4Web version he she
3. ptn0400 11 docx 01 08 2012 JM4Web User Manual 25
4. Climate Eig Security i i v M di i ETD E UserGroups LR Users Scenes Dictionaries an m DialogPages Beady Figure 3 Export Dialog JMAWeb supports 3 platform types Web Tablet and Phone The Web platform is intended for desktop web browsers the Tablet platform is intended for tablet devices and the Phone platform is intended for smart phone devices By providing multiple platforms users can create different pages for different platforms and more specifically provide different pages designed for different screen sizes For example you may want to create a set of smaller pages e g pages the size of a mobile phone screen in your project for smart phones whereas you will use full size pages for desktop web browsers and tablet ptn0400 11 docx 01 08 2012 JM4Web User Manual 7 X OR INTERNATIONAL ech note If you have created different pages for each platform the Export dialog allows you to select the pages that correspond to each platform If you have a single set of pages in your project simply click on the check boxes for each platform and the same page will be used for each platform 3 2 Setting JMAWeb Home Page The start page or home page of the JM4Web app defines the first page that is shown on the browser of each platform type The home page is important because it defines the starting point for your web application Pages that are shown after home page depend on the how the project is cr
5. Connections ssssssesnseeeeesetnrtrrreesrrrnrrrrreenrrnrrrnnee 24 8 Troubleshooting and EA 25 8 1 AOS Java Ee E 25 8 2 OWS OM SS 25 8 3 RSI FO oases desea nan E A N EE A doses aaderocwsacense E 25 ptn0400 11 docx 1 08 2012 JM4Web User Manual EXLUH INTERNATIONAL ech note 1 Getting Started with JM4Web JM4Web is an extension of the JMobile Suite that allows users to access JMobile projects from a remote PC a tablet or a mobile device With JMAWeb users can create a web project that connects to the panel and shows the same graphical display remotely as shown on the panel JM4Web projects are based on HTML5 technology which means no plug ins or external software is needed 1 1 Assumptions This document assumes that readers are familiar with the JMobile software suite More specifically the document is written such that the reader has knowledge about creating projects using JMobile Studio development environment This document also assumes that you have a basic understanding of how to operate the web browser for your mobile devices as well as setting up a connection to the target panel For example you may need WiFi capabilities if you want to work with iPad or other tablet to access the JM4Web pages on a panel 1 2 JMobile Studio Support In order to create a JMAWeb project you need JMobile Studio with JM4Web feature enabled You can determine whether the JM4Web feature is enable
6. which the new value can be inserted ptn0400 11 docx 01 08 2012 JM4Web User Manual 23 X OR INTERNATIONAL ech note After inserting the value the user can either press Enter key Enter key equivalent in touch devices or the user can click on the Save button shown below the text box to make the newly inserted value permanent Only meaningful numbers will be accepted during the save process Anything else will be ignored and will not result in a value change The user can cancel the data insertion at any point by clicking the Cancel button Figure 15 Numeric Entry 7 10 Dialog Pages Support JM4Web supports Dialog pages You can show them and close them based on the ShowDialog and CloseDialog macro actions However Dialog pages are not movable 7 11 User Management Support JMAWeb uses a login mechanism which will verify user credentials on the server The user name and password are based on the user credentials defined in the JMobile Studio User Management feature JMAWeb does not yet support individual security settings applied to widgets or pages 7 12 Maximum Concurrent User Connections The JMobile panel server supports three 3 concurrent connections at a time If you try to connect to the server from more than 3 remote browsers only the first 3 connects will be permitted ptn0400 11 docx 01 08 2012 JM4Web User Manual 24 EXLUH INTERNATIONAL ech note 8 Troubleshooting and FAQ 8 1 Enabl
7. 1 docx 01 08 2012 JM4Web User Manual 13 EXLUH INTERNATIONAL ech note 5 Running JMAWeb from a Browser After the successful download of JMobile project to your target device and the device is running your JM4Web pages are ready for access through a web browser from any device of your choice To run the project open the browser and type in the IP address of your HMI panel or the server which is running JM4Web Press the Enter key and you will see the JM4Web Login page User Name Password kenen Figure 11 JM4Web Login Page Enter the User Name and Password and click on Sign In button or hit the Enter key The User Name and Password are the same credentials that you have defined in your project using the User Management features of JMobile Studio If the correct credentials are entered you will be redirected to the Home page that you have selected during the page export An example of the home page is shown in the figure below ptn0400 11 docx 01 08 2012 JM4Web User Manual 14 X OR INTERNATIONAL ech note Mozilla Firefox o File Edit View History Bookmarks ScrapBook Tools Help e i eu 127 0 0 1 JMLite web Home html E AA Google p f Living room Figure 12 Example JM4Web Page At this point you can interact with the panel using the browser in the same way you interact with a panel when touching the panel screen For example you can click on buttons to change pages view i
8. INTERNATIONAL Tech note JM4Web Users Manual This document contains the information needed to use the web extension of JMobile EXOR International S p A Ptn0400 Ver 8 1 X LI H INTERNATIONAL ech note Copyright 2012 EXOR International S p A Verona Italy Subject to change without notice The information contained in this document is provided for informational purposes only While efforts were made to verify the accuracy of the information contained in this documentation it is provided as is without warranty of any kind Third party brands and names are the property of their respective owners Microsoft Win32 Windows Windows XP Windows Vista and Windows 7 Visual Studio are either registered trademarks or trademarks of the Microsoft group of companies Other products and company names mentioned herein may be the trademarks of their respective owners The example companies organizations products domain names e mail addresses logo people places and events depicted herein are fictitious No association with any real company organization product domain name e mail address logo person place or event is intended or should be inferred ptn0400 11 docx 1 08 2012 JM4Web User Manual 2 EXLUH INTERNATIONAL ech note Contents 1 Getting Started with UDM4We D nennen nennen nnns nnns nnns nnn 4 1 1 ASSUMP IONO EN 4 1 2 JMobile Studio Support dE 4 2 Supported Browsers Platforms
9. cannot be changed by attaching tag s to the Ul based properties of the widget e ColorPalette XForm works only with selected widgets including Buttons Images Bar Graphs e Ticks Labels and Scale widgets are not yet supported However if you set static optimization to static on ticks labels and scale widgets they may be available under certain conditions ptn0400 11 docx 01 08 2012 JM4Web User Manual 21 EXLUH INTER narionaL ech note Widget properties based tag attachment may not work on all properties supported by JMobile otudio Dialog pages in JM4Web support only modal dialogs Dialog pages in JM4Web do not support the runtime positioning and are not movable Round Bar Button widget is not supported in JM4Web JM4Web does not support user management features of widgets JM4Web does not support onDataUpdate event on Page Template Page Dialog Pages 7 2 Actions Support JM4Web currently supports the following JMobile actions HomePage LoadPage NextPage PrevPage LastVisitedPage Write Tag StepTag SetBit ToggleBit ShowDialog CloseDialog 7 3 Tag Attachment Support JM4Web supports Tag attachments on select widget s properties However JM4Web does not support tag attachment to values that change the range of a widget For example a tag attached toa Slider or Bar Graph s min or max property is not supported in JM4Web 7 4 XForms Support JM4Web supports the following XForm functio
10. d by clicking on File menu and check whether the Export Web Project menu item is enabled Normal text indicates that JM4Web is enabled Dimmed text indicated JM4Web is disabled If JM4Web is disabled please contact your distributor to obtain the correct JM4Web license Edit Run Format View Window Help EM Liu F Deutsch n X New Project 1 CAUsers Wohnhaus 7 2 C JMobile Slider2 Slider2 3 iHome GridContral 4 C JMobiles JMLite JMLite Reset and Restart Exit Figure 1 JMAWeb Support ptn0400 11 docx 1 08 2012 JM4Web User Manual A X OR INTERNATIONAL ech note 2 Supported Browsers Platforms 2 1 PC JM4Web works in all modern web browsers The following browsers have been tested for compatibility with JM4Web Mozilla Firefox 3 6 Microsoft Internet Explorer 9 Apple Safari 5 Google Chrome 6 Firefox e e 2 2 Tablets Google Chrome JMAWeb works in most tablet devices The following tablets have been tested for compatibility with JMAWeb e iOS 4 14 Mobile Safari e Android 2 14 Android Webkit m GS 11223015 2 3 Mobile Smart Phones JMAWeb works in most smart phone devices The following smart phone operating systems have been tested for compatibility with JM4Web e iOS 4 14 Mobile Safari e Android 2 14 Android Webkit m OS CINDROID ptn0400 11 docx 01 08 2012 JM4Web User Manual 5 X OR INTERNATIONAL Tlech note 3 Gen
11. e JavaScript JM4Web requires JavaScript to provide interactivity with the server and the user JM4Web will not work if JavaScript is disabled in your browser By default most browsers come with JavaScript enabled But if you have disabled JavaScript in the past please re enable JavaScript before accessing JM4Web pages 8 2 Browser Cache JM4Web include resources that change infrequently such as CSS files image files and JavaScript files These resources take time to download over the network which increases the time it takes to load the JM4Web page in your device browser Browser caching allows these resources to be saved by a browser and used without requesting it each time from the panel This results in faster loading of JM4Web pages For optimal JM4Web performance caching should be enabled in your browser By default the browser comes with caching enabled and you don t have to do anything with it unless the cache as been specifically disabled Note that JM4Web pages will work properly with disabled browser caching however resource loading will be slower compared normal cached operations 8 3 Using Proxy some users may be accessing the JM4Web through a proxy The proxies may control the number of parallel connections settings for the browser If the proxy controls the parallel connection settings then make sure that the max possible parallel connections max connections is set to a number greater than 5 and less than or equal to 10
12. eated and will determine how your project appears on each device For example if you have set of pages for a smart phone you can set the start page to a page that is sized for a mobile phone If this smart phone page is created such that it only loads other smart phone pages the user will only see smart phone pages when running on the smart phone JM4Web project To select the home page for each device click on the home icon next to the check box When the home page is selected for a given page you will see a full color home icon next to the page s check box in the dialog If a page is not the home page the home icon will be dimmed You can click on any dimmed home icon and the home page will be changed to the given page for that device As shown in the example figure below the page named Home is set as the home page for all 3 platforms If you want to change it to something else then click on the inactive home icon shown under the desired platform column For example to set the Web browser s home page to Lighting click on the inactive home icon on the Lighting page as shown by the red box in the figure Please select the files to export and the start page for each type Phone Tablet Page Name fe Home Lighting Code Rooms Climate Figure 4 Home Page Selection ptn0400 11 docx 01 08 2012 JM4Web User Manual 8 INTERNATIONAL Tlech note Please select the files to export and the start page for each type Web Pha
13. erating JMAWeb Pages You can use any of your existing JMobile projects or you can make a new project to start using JM4Web If you are working with an existing project any widgets and features can be used in JMobile Studio however not all features are currently available in JMAWeb f a feature is not enabled J4Web will still work correctly but the given feature will not be available See Chapter 7 for the list of supported features and limitations in JM4Web It is assumed that the reader already knows how to create a JMobile project so we will only discuss how to export the project for JM4Web Open or create your project in JMobile Studio and perform the steps described in the following sections to run you project in JM4Web 3 1 Exporting Pages 3 1 1 Export Menu Item You can export the currently loaded JMobile project by clicking on File gt Export Web Project menu item as shown below J HMI Studio JMLite i File Edit Run Format View Window Help H L New Ctrl N DAO MEE e Langi a JS Open Ctrl O aeee Close 7 E C A amp 100 e x Be amp ebe m i H Save Font Aharoni z A B 7 E SS d New Project EJ Save Project Ctrl S Save Project As C EN Home Close Project Export Web Project Reset and Restart Exit E 25 MultiLanguage j RB Screen Saver Ej t3 Security ig UserGroups bs A Users eh AuditTrail j Lx AuditTrail Ve ez Dict
14. ionaries j DialogPages Je Page Templates Ge Keypads Figure 2 Export Menu ltem ptn0400 11 docx 01 08 2012 JM4Web User Manual 6 X OR INTERNATIONAL ech note Note you need to perform the Export step after making any changes to your JMobile project The only way any changes are available in JM4Web is after the Export step and the project is downloaded to the panel 3 1 2 Select Pages to Export When exporting you have the option to select which pages you wish to export By default all project and dialog pages are selected for export You can click on the check boxes next to each page to enable disable the page export as shown below ial HMI Studio JMLite File Edit Run Format View Window Help ilc E EJ E oa iS 19 Bic ALi cans Si ProjectView H X iHome x o t Em ES dh Ww o Rg a 100 X TH rh A r Gs ee M8 Oe es il e E g JMLite l 2 cg JMLite O Font Aharon s RI E S PB Pages Lmil Home Home Living room ai Lighting i Q8 i J y az Code ele Dialog alog D EXE mp Be 4 Rooms d Bs 5 Climate Bop Media Please select the files to export and the start page for each type L Bi 7 Scenes Em Config Web Phone Tablet iie a Protocols u tat te Home ZE Tags 2 Trends Lighting AR Alarms v v wf Cod be 2 Events Buffer ee PER Scheduler Rooms gg MultiLanguage ff Screen Saver
15. lue will be updated in the JM4Web pages 6 2 Inactivity Timeout JM4Web will require you to re enter your login credentials if the browser has been inactive for several minutes If no activity has occurred for a set period of time which is 10 minutes the login screen will re appear and you need to enter your login credentials to continue operation This feature is provided ptn0400 11 docx 01 08 2012 JM4Web User Manual 16 X OR INTERNATIONAL ech note as a safety measure so that unauthorized users cannot operate JMobile if the remote device is not being actively used User Name Password kennen Figure 14 Inactivity Timer Login Screen 6 3 User Session Termination A user session termination completion can come either from server or based on the actions by the user At times the server may send a response to the client browser to perform the login process In such a case the user will be redirected to the login page The user will be redirected back to the last page they were in If the user clear the browser cache or browser cookies the server will ask for user login and they will be redirected to the login page After a successful login they will be redirected back to the page they were in last time Note If the user is in a dialog page during a page redirection to the login page then after the successful login the user will be redirect back to the page from which the user have opened the dialog page
16. me steps as you would to download a normal JMobile project the panel Both the JMobile panel project and JM4Web web project are downloaded at the same time To perform the download click on the Run gt Download To Target menu item as shown in the figure below Manage Target Start Simulator Bal Home Bli 2 Lighting zl E 3 Code CH ER 4 Rooms d Bi 5 Climate re E 6 Media B 7 Scenes GJ Config L8 Protocols Figure 8 Download To Target Menu You can also initiate the download process by clicking the Download To Target button in the JMobile Studio toolbar ptn0400 11 docx 01 08 2012 JM4Web User Manual 12 X OR INTERNATIONAL Tlech note File Edit Run Format View Window Help Es g 2 Lighting Blij 3 Code se E 4 Rooms ny Bi 5 Climate e ap Media It dis bk Figure 9 Download To Target Toolbar Button Once initiated the Download To Target dialog box will be shown If the target device s IP address is not set you can select the IP address from the dialog Next click on the Download button and the JMAWeb project will be downloaded to the target along with the normal JMobile project ge Figure 10 Download To Target Dialog After the download process is complete the Download dialog box will be removed and the JMobile project will be automatically stared on the panel The JM4Web project is now ready to be used ptn0400 1
17. nalities ptn0400 Scaling Offset ColorPalette Bitlndex 11 docx 01 08 2012 JMAWeb User Manual 22 EXLUH INTERNATIONAL ech note The ColorPalette functionality works for Buttons Image and Bar graphs widgets for Fill and Background Color properties 7 5 Widget Events Support JM4Web supports both macro actions and JavaScript actions for widgets Note You may find some limitations in the OnDataUpdate event in certain widgets especially with its initial level triggering due to page loading delays when running on a remote client 7 6 Page Events Support JMAWeb supports both macro actions and JavaScript actions for pages with the following limitations e Page OnDataUpdate event is not supported e Dialog page OnDataUpdate event is not supported e Template page OnDataUpdate event is not supported 7 7 JavaScript API Support Currently JM4Web supports a subset of the custom JavaScript API supported by JMobile Studio JM4Web currently supports the following JavaScript API e getlag e setlag e getProperty e setProperty e getWidget e getProject 7 8 Templates Support JM4Web works with pages that use templates 7 9 Keypad Support JMAWeb provides keypad support for Numeric widgets only In addition custom keypads are not supported Numeric widgets with a Read Write or Write mode will display the keyboard of the device The user can click on the Numeric widget and the widget will show a textbox in
18. ndicators and gauges drag slider handles to change values etc The JMAWeb project will manage all communications with the panel and you interact with the panel remotely ptn0400 11 docx 01 08 2012 JM4Web User Manual 15 X OR INTERNATIONAL Tlech note 6 JMAWeb Notes The following sections describe features of JM4Web that may appear when connecting remotely to a panel or target device 6 1 Server Disconnect Since JM4Web runs remotely from the panel it is possible for the server to disconnect from the browser for example if the server is stopped or the network cable is unplugged If JM4Web is disconnected a disconnect icon will appear in a toolbar on top of the JM4Web page as shown below Once the server is back online the red circle bar icon will be removed indicating normal communications with the panel Living room GR e T e T E lt by a f Im as 4 Ey C p iu d won Qu 3 e wi mo C uw Ta omy z e A vx D ET e gi I gt A 4 a 7 a ii ij dit ef d puo mmm o orem edi vae e T eg gt papi nn Lo Figure 13 Disconnect Icon Note that if the server is disconnected changes may still be made in JM4Web pages but it will not have an effect in the server For example if a button is pressed to change the tag value the tag value may appear changed on the client but will not be updated on the server Once the server connection is restored the server based va
19. ne Tablet fay as sg Home EI EI EI EI EI EI Lighting Ex IS S Code E Ex IS Rooms Ex ES EI Climate E pal E Media E E S Scenes Figure 5 Changing the Home Page Selection You can use this same process to designate a different Homepages for each of the 3 platform types 3 3 Start JM4Web Export After selecting the pages and a Home page for each platform click on OK Button to start the JM4Web page generation ptn0400 11 docx 01 08 2012 JM4Web User Manual 9 File Edit Run Format View Window Help ProjectView wr ch ZE dh wi JMLite j Sd Ba 1 Home li 2 Lighting j es Be 3 Code j bed Ba 4 Rooms j bon Be 5 Climate ae Media Ki Ba 7 Scenes Je Config E seh Protocols es Tags 25 MultiLanguage j RB Screen Saver Ob Security dQ UserGroups is A Users Je Recipes j zm e Dictionaries Je DialogPages Page Templates B Keypads E Ba Alphabet F Mobile Pages Q A A d 1009 Font Aharoni Living room Please select the files to export and the start page for each type Phone EI fav Tablet Page Name fe Home Lighting Code Rooms Climate Media Scenes ptn0400 11 docx 01 08 2012 JMAWeb User Manual Figure 6 Start Export 10 X OR INTERNATIONAL Tlech note Once the export is s
20. tarted JMobile Studio will show a progress bar that indicates the status of each page as it is processed If you have many pages in the project this process can take several minutes If you wish to cancel the export press on the Cancel button and the Export will cancel ia HMI Studio MUSS mm d File Edit Run Format View Window Help jy ProjedView m better ER AE Ww Q Q Q E Ae EISE JMLite E JMLite Hi O S Font Aharoni Cer Pages zg g Home 748 W 2 Lighting mmm 255 255 255 Bi 3 Code mere T e zr Ba 4 Rooms uL e Ba 5 Climate Rap Media Be 7 Scenes Progress Bar S Events Buffer FF Scheduler Q MultiLanguage i Screen Saver E t3 Security A UserGroups uA Users by AuditTrail EI AuditTrail Le Recipes Je Dictionaries Je DialogPages e Page Templates Ge Keypads Ready CAP NUM SCRLI Figure 7 Export Progress Dialog After the Export is complete the progress dialog will be removed and the JM4Web application is ready to be downloaded to the target ptn0400 11 docx 01 08 2012 JM4Web User Manual 11 EXLUH INTERNATIONAL ech note 4 Downloading the JMAWeb Project After exporting the JM4Web pages the next step is to download the project to the desired target The JMAWeb project is downloaded at the same time the normal JMobile project is downloaded To download JMAWeb to the panel you perform the sa
21. using by clicking on the information icon provided in the JM4Web login page ptn0400 11 docx 01 08 2012 JM4Web User Manual 19 INTERNATIONAL ech note User Name Password Figure 15 JM4Web Version Icon 6 6 JMAWeb Logout A logout request will be send to the server when you close the active JM4Web browser window tab automatically This will help to complete the user session in a meaningful manner ptn0400 11 docx 01 08 2012 JM4Web User Manual 20 EXLUH INTERNATIONAL ech note 7 JMAWeb Limitations JM4Web is currently in Beta status so not all JMobile features are supported in JM4Web For example JM4Web only supports a subset of widgets available in JMobile Studio The following sections define the items that are supported by JM4Web v0 8 Beta release 7 1 Widgets Support e Label e Multiline Text e Numeric Fields e Buttons e Hotspot Buttons e Horizontal Vertical Sliders e Gauge Needle e mages e Multistate Images e Indicators Lights e Date Time e Bar Graphs e Segmented Bar Graphs e Message widget e Knobs e Shapes There are some known issues that may experience while using JM4Web e Widget rotation is not supported e Not all custom fonts appear correctly in iPad devices e Horizontal Slider reverse mode is not yet supported e Vertical Slider reverse mode is not yet supported e Shape widgets are generated as images As a result the look and feel of the shape
Download Pdf Manuals
Related Search