Home

078-0422-01A_i.LON Vision 2.0 User's Guide

1. Copying and Pasting Objects in i LON Vision esses Copying i LON Vision ODjeCtS cccccesecccceesesceeeceeeeeceeeseeeeeeeeseeeeeeess Adding i LON Vision Objects to a Layer eeeeesessees Adding i LON Vision Objects to a Table ssssssse Adding Images to a Layer eeessseeseeeeeeeeenneeennen nnn Adding a New Image to a Layer Object sssssss Moving an Existing Image to a Layer Object Securing Custom SmartServer Web Pages ccccccssesceeeeseeeeeeseseeeeeeeens Using an External Web Publishing Tool sees Troubleshooting Custom Web Page Designs sess LON MUERE Tid gore O c o Pec S TP E Custom Web Page Requirements sese General Object Requirements eeeeeeesssseseseseseeeeeeenenn nennen Object Specific Properties nimeisha a aaa i a Show Value Properties sestimsiaciei ni ea a a aa a a aE Text Field Properties essere Text Area Properties cccccccssseecceeseeeceeeseeceeseessegeeeceeseesseseeessaeees Combo Box Properties ioi otto oen rox te eaa a asse ees Preface Image Swapper Properties sseeeseeeessseeeeenne nennen 205 Radio Buttons Properties ccc
2. Creating Custom SmartServer Web Pages value m myDp UCPTvalue 0 get value m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m_myDp UCPTvalue 0 set value m_sso Write m_myDp var m myDp Var m sso argObj sso var m domObj argObj domOb j foereate buttons to write to DP value var m incrementButton m domObj appendChild document createElement V button var m decrementButton m domObj appendChild document createElement V button var breakl m domObj appendChild document createElement br add text and click events to buttons m incrementButton innerHTML Up m decrementButton innerHTML Down m incrementButton attachEvent onclick handlelncrement m decrementButton attachEvent onclick handleDecrement create text area reading DP value var m textarea m domObj appendChild document createElement textarea var break2 m domObj appendChild document createElement br create span reading DP name var m span m domObj appendChild document createElement span by EchelonTop Echelon provide Simple Add Subtract Example document Custom JavaScript Example Writing Structured Data Points with Presets The following JavaScript class demonstrates how to write formatted and preset values to a structured data point as whole in a custom JavaScript object This JavaScript class creates five buttons that you can use to set the value of a SNVT switch
3. 5 Optionally you can modify the Width and Height properties to adjust the size of the individual items in the vertical menu For example the Width property is set to 250 and the Height property is set to 500 for the vertical menu displayed in step 7 6 Add menu and submenu items following steps 6 10 in the previous section Adding a Tree to the Sidebar Frame Note If you add submenu items to a vertical frame you need to verify that the width of the Sidebar frame is equal to or greater than the Width property of the vertical menu To change the width of the sidebar frame browse to your home page Click Edit on the Editor toolbar or click the Layout tab click Format select Frameset set the appropriate width of the Sidebar frame in the Frameset dialog click OK and then click the Publish button or click the Browse tab For example the Sidebar frame in the Frameset object is set to 250 equal to the width of the vertical menu for the vertical menu displayed in step 9 7 Click OK The vertical menu is added to the left side of the sidebar frame 152 Creating Custom SmartServer Web Pages Read Write Objects 8 Click Publish on the Editor toolbar click the Browse tab or click File and then click Publish to save the current draft of your sidebar frame 9 Youcan test your vertical menu by clicking an item in the menu or expanding an item and then clicking one of the submenu items and verifying that correct destination We
4. ECHELON i LLON Vision 2 0 User s Guide cm WE 5 078 0422 01A Echelon LON LONWORKS LonTalk Neuron LONMARK 3120 3150 LNS LonMaker and the Echelon logo are trademarks of Echelon Corporation registered in the United States and other countries LonPoint and LonSupport are trademarks of Echelon Corporation Other brand and product names are trademarks or registered trademarks of their respective holders Neuron Chips LonPoint Modules and other OEM Products were not designed for use in equipment or systems which involve danger to human health or safety or a risk of property damage and Echelon assumes no responsibility or liability for use of the Neuron Chips or LonPoint Modules in such applications Parts manufactured by vendors other than Echelon and referenced in this document have been described for illustrative purposes only and may not have been tested by Echelon It is the responsibility of the customer to determine the suitability of these parts for each application ECHELON MAKES NO REPRESENTATION WARRANTY OR CONDITION OF ANY KIND EXPRESS IMPLIED STATUTORY OR OTHERWISE OR IN ANY COMMUNICATION WITH YOU INCLUDING BUT NOT LIMITED TO ANY IMPLIED WARRANTIES OF MERCHANTABILITY SATISFACTORY QUALITY FITNESS FOR ANY PARTICULAR PURPOSE NONINFRINGEMENT AND THEIR EQUIVALENTS No part of this publication may be reproduced stored in a retrieval system or transmitted in any form or by any
5. Menu Button 3 The Link dialog opens 1 LON Vision Object Left Width Top Height Z Index Presentation Om oS Oem OCOC C Ow gt Link Name Substitution Values 4 Inthe Presentation box select the type of Link object that the user will click to open the Web page you specify in the Destination property You have the following three choices e Icon Click Choose to open the Select File dialog browse to the root images app folder on the SmartServer flash disk and then select an image corresponding with the configuration Web page to be opened from the link Note All of the images for the SmartServer s built in applications use the following naming convention 8000010128000000 4 UFPT lt application gt gif e Button Enter the text to be displayed in a button that has the following appearance e Text Enter text to be displayed in a hyperlink Text Advanced SmartServer 2 0 Web Page Topics Follow steps 8 12 in the previous section Linking to a Configuration Web Page from a Navigation Object to select the htm file representing the desired configuration Web to be opened from the link select the application instance to be used and select the language English German French or other language used by the configuration Web page Click OK to return to the Link dialog and then click OK to return to your custom Web page _4 LON Vision PS 5 File Edit View Insert Format Table Help 5
6. button add break var breakl m domObj appendChild document createElement br add text and click events to buttons IW JOrrtButbLonmsrpmunerHLIMDh e OLE mn OnB ttoncrnnerzimrMI e vom m OftrButton attaohkbvenrt onclrick handleOtt m OnButton attachEvent onclick handleOn create span reading DP name var m spanName m domO bj appendChild document createElement span var DP value text m domObj appendChild document createTextNode create span reading DP value var m spanValue m domObj appendChild document createElement span Er EchelonTop Echelon provide SetValues field document Using Custom Arguments You can define custom arguments in your JavaScript code and then specify values for them with the Custom JavaScript object This feature lets you create reusable Custom JavaScript objects For example you can define upper and lower limit arguments in your JavaScript code and then define values for those limits with the Custom JavaScript object When the data point value reaches one of the limits you could for example change the color of the text in the Custom JavaScript object The upper and lower limits may depend on the data point type a specific network condition or other scenario To use custom arguments in your JavaScript code follow these steps 1 In your JavaScript code create a reference to argObj customArgs in the constructor and define some
7. rage The Message Box Menu Button 4 The Page Title dialog opens 1 LON Vision Object 5 Optionally you can modify the size and position of the Page Title object by setting the Layer properties 6 Click OK By default a Page Title object with the name Welcome to e4 is positioned in the upper left hand corner of the menu frame unless you specified its position with the Left and Top ILON Vision 2 0 User s Guide 137 properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page It is recommended that you place the Page Title object below the menu bar 7 LON Vision 5 File Edit View Insert Format Table Help 4 Q QE o Jea IX E Y gt G http 10 2 124 165 user Custom Menu htm v sag Back Reload Stop Home EE Choose New Publish Discard Ue M cas XL ALB E a 2AM Browse P Layout Read Write Objec W elcome to e4 7 Click Publish on the Editor toolbar Ln click the Browse tab or click File and then click Publish A page title named Menu appears on the menu frame t Adobe Contribute CS3 Menu fe fe x File Edit View Bookmarks Insert Format Table Help iG Edit Page New Back gt stop C Refresh H Home Pages s Address http 10 2 124 111 user Custom Menu htm v Go EP Choose READ WRITE OBJECTS APPLICATION OBJECTS Menu A
8. Creating Custom SmartServer Web Pages Max Age Set the maximum period of time in seconds that the value of the data point is cached before the Check Box object receives updated values This enables you to control the amount of traffic that is generated on a specific channel by the object The SmartServer compares the Max Age value of the Check Box object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is Write Priority Assign the priority the Check Box object has for writing updated values to the data point This value may range from 0 to 255 highest to lowest priority The priority you specify must be equal to or higher than the priority used by the last application that updated the data p
9. var break2 m domObj appendChild document createElement br read DP priority var DP value text m domObj appendChild document createTextNode Priority var m text3 m domObj appendChild document createElement text var break3 m domObj appendChild document createElement br by EchelonTop Echelon provide Show DataPoint Properties Example document Custom JavaScript Example Reading and Writing Data Points The following JavaScript class demonstrates how to read and write data point values in a custom JavaScript object This JavaScript class creates two buttons that you can use to increment and decrement the value stored in a data point It also creates a text area that displays the current value stored in the data points and a span that displays the name of the data point Note You can use this object on any scalar data point or field within a structured data point that is of an integral or floating point type Net LONALON App VirtPb temp f function Simple Add Subtract Example argOb j this update function type item if type Dp_Data m textarea innerHTML item UCPTvalue 0 get m span innerHTML item UCPTname get m myDp item j j var handlelncrement function evt value m myDp UCPTvalue 0 get valuett m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m_myDp UCPTvalue 0 set value m_sso Write m_myDp var handleDecrement function evt
10. 0 1 AUS EIN 000 100 01 000 10001 Event Wiederherstellung unterdr cken G ltiger Zeitraum des Ereigniskalenders G ltiger Zeitraum des Zeitschaltprogramms Startdatum 2000 v Jan v 1 v Startdatum 2000 v Jan v1 v Enddatum 2037 v Dez v 31 v Enddatum 2037 v Dez v 31 v Linking to a Configuration Web Page from a Link Object You can use an i LON Vision Link object to link to a built in SmartServer configuration Web page To add the link follow these steps 1 Verify that you have instantiated the application to which you are linking This means that if you want to link to a Scheduler s Configuration Web page you must have already added a Scheduler 187 188 functional block to the SmartServer s internal automated system device 1 LON App iLON SmartServer 2 0 1 or other user defined name 2 Click Insert and then select Link 7 LON Vision M File Edit view BMGS Format Table Help 7 HTML Elements E amp ef X E http f10 2 124 165 user myCustomjLink htm vi Sd 5 Back Show Value Choose New Publish Discard E a we Text Field qe g A Text Area 3 X Browse FY Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object ea ay Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box
11. Clearing this check box means that you must position the Text Field object as you would any other HTML object This may be useful if you want to place the Text Field object in a table You can set the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to objects it overlaps with with 1 the default being in the back and higher values being in front When positioning the Text Field object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects Creating Custom SmartServer Web Pages Max Age Precision Write Priority ILON Vision 2 0 User s Guide Set the maximum period of time in seconds that the value of the data point is cached before the Text Field object receives updated values This enables you to control the amount of traffic that is generated on a specific channel by the object The SmartServer compares
12. Click Format and then click Page Title Properties The Page Properties dialog opens LON Vision Page Properties EJ b In the Page Title box enter a descriptive page title and then click OK c In the Poll Interval box set how frequently in seconds that all the 7 LON Vision objects in your custom Web page poll the SmartServer s internal data server for data point updates If you do not specify a poll rate the default poll rate is 1 second Note You can set the frequency in which individual i LON Vision objects poll their specified data points by setting the Max Age property in the object s respective properties dialog d Click OK You can begin editing your custom SmartServer 2 0 Web page by adding i LON Vision objects to it as described in the next section Step 3 Adding i LON Vision Objects To add i LON Vision objects to your custom SmartServer 2 0 Web page follow these steps 14 Quick Start Exercise A 1 Click Edit on the Editor toolbar 4 or click the Layout tab 2 Click Insert and then select Image Swapper 7 LON Vision File Edit View BOSS Format Table Help HTML Elements k ie amp 3i X S http 10 2 124 165 user Custom CustomWebPage htm v e Show Value Choose New Publish Discard n Text Field a i A Text Area dX Browse P Layo Combo Box Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View
13. Explorer and FireFox Web browsers i LON Vision 2 0 features quicker Web page creation as you can switch between the edit and publish views of your Web pages without long delays This means that you can create or edit a custom Web page and instantly see the results when you publish it i LON Vision 2 0 functions similarly to 1 LON Vision 1 0 You create or edit a custom Web page insert objects and edit their properties design the custom Web page and then publish it Adding a navigation system with frameset menu and sidebar objects is also the same Whats New in 1 LON Vision 2 0 The i LON Vision objects available to you in 7 LON Vision 2 0 are the same The SVG object formerly referred to as the Slider object does include several new sliders and gauges In addition the SVG object includes a new option for setting a specific range such as 68 to 74 Fahrenheit 20 to 23 3 Celsius which is displayed on the SVG object The property dialogs in i LON Vision 2 0 include faster data point selection and local presets To select data points you now expand the network channel device functional block objects in a familiar SmartServer tree view and then select the desired target data point All i LON Vision read write objects now include an option for creating local presets which are presets that can be used for that object instance This enables you to use a field in a structured data point for any i LON Vision object now including the image swap
14. Images Preset Value Image lt defaulk gt OFF 0 00 images swibchDownofF gif On 100 0 1 images switchFrontUpOn gif 4 Inthe Name property enter placeholders and default values for portions of the real or alias data point name to be replaced with substitution tags In this example placeholders are used to replace the indexes in the names of the functional block and data point within the complete data point name The specified default values are 1 This means that the Web page will display the value of the Net LONALON App Digital Output 1 nvoClaValueFb_1 data point when opened from a link not using substitution tags Note The placeholder name must start with a letter and it can be any length consisting of letters numbers or the underscore character ILON Vision 2 0 User s Guide 165 1 LON Vision Object Image Swapper Layer Left Width Top Height Z Index Data Point put x 1Hnviclavalue Jx 1 9 Real Alias Prog Format 0000000000000000 0 5N T_switch Feedback Settings write Priority Po Use local presets Switchable Force round to preset Images Preset Value Image lt defaulk gt OFF 0 00 images swibchDownofF gif On 100 0 1 images switchFrontUpOn gif Click OK to return to the Layout tab Repeat steps 2 4 to add objects for other data points to be represented in your custom SmartServer 2 0 Web page or to add different objects for the same data point Click Publish
15. The Select Box object will display the value of the specified Feedback data point as updated values are being written to the data point specified in the Data Point field the data point you selected in step 4 If you use the Select Box object to write a value to the Data Point the object will be disabled temporarily until the specified Feedback data point receives the data point update Note The Feedback data point you select should be bound to the Data Point via device hardware a LONWORKS connection or a Web connection 7 Optionally configure the following properties of the Select Box object ILON Vision 2 0 User s Guide 75 Layer Max Age By default the Layer check box is selected This means that the Select Box object is embedded in a Layer object which lets you freely move the Select Box object in your custom Web page Clearing this check box means that you must position the Select Box object as you would any other HTML object This may be useful if you want to place the Select Box object in a table You can set the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the obj
16. pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix o The virtual data points on the 1 LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page Creating Custom SmartServer Web Pages e Expand the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure f Click OK to return to the Data Point Properties dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Format property is updated to show the format description of the selected data point The format description consists
17. 0 Web Page Topics 5 LLON Vision 2 0 API This chapter describes the programming interface used by i LON Vision objects ILON Vision 2 0 User s Guide 201 Introduction This chapter provides the programming interface for the 1 LON Vision objects You can use this API to edit custom SmartServer 2 0 Web pages with any third party Web publishing tool This chapter provides the requirements for SmartServer 2 0 Web pages general properties required by all of the i LON Vision objects and specific properties required by the various 7 LON Vision objects Custom Web Page Requirements All HTML pages including i LON Vision objects require the following code snippet embedded in a SCRIPT element lt DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN html head meta http equiv Content Type content text html charset utf 8 lt title gt Examples lt title gt lt script type text javascript src scripts echelon EchelonInit js gt lt script gt lt head gt lt html gt General Object Requirements The following table lists the parameters required by all i LON Vision objects elon_type The type of 1 LON Vision object for example textfield image or radio The following table lists the elon_type for each 1 LON Vision object Object Type elon_type Show Value showvalue Text Field textfield Text Area textarea Combo Box combo Image Swapper image Radio Buttons radio Select Box select Check Box ch
18. 2 1 Digital Output 1 E zi nviclavalue 1 E SMVT switch value I nvaclavalueFb 1 3 nciClaLocation_1 3 nciclaInverk 1 Hee BH d The Name and Format boxes of the Data Point property in the Image Swapper dialog are updated to reflect the selected data point I LON Vision 2 0 User s Guide 17 1 LON Vision Object Image Swapper Layer Data Point Mame Met LOMJILOM App Digital Output 1 nsiclavalue 1 Real Alias Prog Format 0000000000000000 0 5NYT_ switch state Const Fields Seleck Feedback Settings write Priority Po Use local presets Switchable Force round to preset Images Preset Value Image z default gt OFF 0 0 ON 100 01 5 Verify that the Switchable check box is selected This enables the switch graphic to be changed when clicked Clicking the switch writes an updated value to the data point and it changes the switch graphic displayed based on the new data point value 6 Create local presets to be used by the image swapper object for the Net LON ALON App Digital Output 1 nviClaValue_1 state data point To do this follow these steps a Select the Use Local Presets check box and then click Edit The Local Presets dialog opens b Create local ON and OFF presets for the data point e Inthe Preset box enter ON in the Value box enter 1 and then click Save e Inthe Preset box enter OFF in the Value box enter 0 and then click S
19. 2 0 Programming Tools included on the 1 LON SmartServer 2 0 DVD or using the full version on the 1 LON SmartServer 2 0 Programming Tools included on the i LON SmartServer 2 0 Programming Tools DVD For more information on ordering the 1 LON SmartServer 2 0 Programming Tools DVD contact your Echelon sales representative For more information on localizing the language of the SmartServer Web pages see the i LON SmartServer 2 0 Programming Tools User s Guide 6 Select one or more Alarm Notifier functional blocks to be used for the for the Alarm Notifier object ILON Vision 2 0 User s Guide 119 e To select one Alarm Notifier functional block click that Alarm Notifier functional block in the Available box under Items and then click the left arrow to move it into the Selected box e To select multiple Alarm Notifier functional blocks you can individually move Alarm Notifier functional blocks from the Available box to the Selected box using the left arrow you can click one Alarm Notifier functional block hold down CTRL click all other Alarm Notifier functional blocks to be used and then click the left arrow or you can click one Alarm Notifier functional block hold down SHIFT click another Alarm Notifier functional block to select the entire range of Alarm Notifier functional blocks and then click the left arrow To update the list of available Alarm Notifiers click Refresh 7 Click OK The Alarm Notifier object is added to your cu
20. Note If you want your navigation system to use just a menu bar in the menu frame you can skip step 3 Conversely if you want your navigation system to use just a navigation pane in the sidebar frame you can skip step 2 however you still may want to add other objects to the menu frame such a page title error message box submit and back menu buttons and graphics Creating a Home Page You can create a home page for your Web design that users will see when they initially access your custom Web pages You can create your home page in two ways The first method is to create a new Web page that will be your home page design it and then format the Frameset object in it The second method is to create a new Web page that uses an Echelon frameset template which already includes the Frameset object and then insert your company s images and logos in the appropriate placeholders in the template The Frameset object lets you apply a single menu and or a single navigation pane to all your custom SmartServer 2 0 Web pages Once you format the Frameset object in your home page your home page will appear in the application frame in the center of the index htm Web page that is automatically created by the Frameset object Manually Creating the Home Page To create your home page manually follow these steps cj 1 Click the New button on the Editor toolbar 2 or click File and then click New Page The Select Folder dialog opens 124 Creating Cust
21. POW VICW iu hohe ue eot teo tiu Dm eie LOU 108 DDatabog MIOW sesst xadikiucuasesiusadosaqds tei tice nive tig rani ductae ten abc diens 113 leg 115 Alarm B olii MN 118 Ghanging the Pade Titles oo haan aie uq dern RD toss dus 120 Setting the Poll Rate ri tee tone rudes a Revenus 120 Adding Link Gej eje cr ee ee 121 Adding a Navigation System to your Web Design 124 Greating a Horne Page teret Rene m aces nu iocus med us 124 ILON Vision 2 0 User s Guide Manually Creating the Home Page cccccseeeeeeeeseeeeeeeeeaeeeeeeeeees Using an Echelon Frameset Template to Create the Home FAG Cite cele EE Designing the Menu Frame eese nee nennen Opening the Menu Nimi FIG opibus cire nodus er agas beo tes Adding a Menu Bar to the Menu Frame sssss Adding a Page Title to the Menu Frame Adding a Message Box to the Menu Frame Adding Menu Buttons to the Menu Frame Adding Graphics to the Menu Frame eeeeeesseees Designing the Sidebar Frame cccccccceceeecssesseeceeeeeeeeseeseeeeeeeeeaaaeeees Opening the Sidebar htm File eeeeeeeeseseeeeessss Adding a Tree to the Sidebar Frame ssssuus Adding a Verti
22. Page You can link your custom SmartServer 2 0 Web page to your SmartServer s home page To do this follow these steps 1 Click the Choose button amp on the Editor toolbar The Select File dialog opens 2 Click the index htm file on the SmartServer flash disk 24 Quick Start Exercise LLON Vision Select File e e LLON SmartServer E 9 102 124 155 coniguraln senie images J nl G scripts O styles O user 3 O Custom gt images e CustamWebPage hkm E Frameset htm E home htm E index htm e Menu htm E Sidebar htm demo O echelon L3 mycustom 3 shared 3 WSDL Click OK Your SmartServer s home page should appear in the browser 4 Enter the user name and password for logging in to your SmartServer if prompted The default user name and password are ilon A 5 Click Edit on the Editor toolbar Zh or click the Layout tab to begin editing your SmartServer s home page 6 Create a button that will the link to your custom SmartServer 2 0 Web page following these steps a Click the ATU Page button after the e in Page and then press ENTER A new button is added directly below the ATU Page button ILON Vision 2 0 User s Guide 25 7 LON Vision T File Edit View Insert Format Table Help by e A amp http 10 2 124 165 index htm e Q x Back Forward Reload Stop Home Choose New Publish Discard i 2 e A B I U i S AX Browse 9 Layout
23. Pentium III 1 3 GHz or faster if running Echelon Enterprise Services 2 0 50 to 530 megabytes MB free hard disk space plus the minimum Windows requirements for the selected version of Windows o The i LON Vision 2 0 software requires 44 MB of free space o Ifyou install Echelon Enterprise Services 2 0 from the i LON SmartServer 2 0 DVD you need an additional 270 MB of free space Echelon Enterprise Services 2 0 is required for monitoring and controlling the data points of external devices with custom SmartServer 2 0 Web pages If you are running Echelon Enterprise Services 2 0 LNS Turbo Editions 3 25 or later must be installed on the LNS Server computer See the Echelon Enterprise Services 2 0 User s Guide for more information on installing Echelon Enterprise Services 2 0 and LNS Server Service Pack 5 from the i LON SmartServer 2 0 DVD o Ifyou install Adobe Reader 9 1 from the i LON SmartServer 2 0 DVD you need an additional 204 MB of free space You need Adobe Reader or another PDF viewer to view the i LON Vision 2 0 documentation Note Windows Vista testing for i LON Vision 2 0 has been performed on computers that have a minimum of 2 GB of RAM For complete Windows Vista requirements refer to www microsoft com windows windows vista get system requirements aspx Y ou can use Microsoft s Vista Upgrade Advisor to determine upgrade requirements for a particular computer To download this tool go to the Microsoft Web site at www m
24. Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Image Swapper dialog opens ILON Vision 2 0 User s Guide 1 LON Vision Object Data Point Formats Const Fie Feedback Settings write Priority Po Use local presets Edit Switchable _ Force round to preset Images Preset Value Image 4 Select the nviClaValue 1 data point of the first relay output on the SmartServer Digital Output 1 following these steps a Inthe Data Point property click Select The Select Data Points dialog opens b Verify that the Show Hidden Items check box is selected By default all of the SmartServer s functional blocks are hidden in the SmartServer tree c Expand the network expand the channel on which SmartServer is attached expand the SmartServer internal automated systems device expand the Digital Output 1 functional block expand the nviClaValue 1 data point and then select the state field Net LON ILON App Digital Output 1 nviClaValue 1 state by default Click OK 16 Quick Start Exercise 1 LON Vision Select Data Point Show Hidden Items Addressing Real Alias Prog Selected Net LON iLON 4pp Digital Output Web Server 31 Web Server 32 Web Server 33 Web Server 34 Web Server 35 Web Server 36 Web Server 37 Web Server 38 Web Server 39 4 virtFb K Digital Input 1 K Digital Input
25. Se aL AIB a 33x Browse P Layout 2 A Layer object is added to the upper left hand corner of the menu frame 3 Move the Layer object to an empty space in the Layout tab to simplify your Web design To do this click the Layer and then move the mouse pointer over the move icon on the upper left side of the object s layer so that the mouse pointer becomes a move tool amp Click the move icon so that the Layer becomes red and then drag the Layer to the desired location _ 7 LON Vision M File Edit View Insert Format Table Help H bj z CF X i 4 T my v e A Y lt http 10 2 124 165 user myCustom MoveImage htm v 3 d 8 Back Forward Reload Stop Home AIL Choose New Publish Discard LE XE M cat pL ALLE os an P X Browse P Layout AE EEN eee ace m o IN NetLONALON App Digital Output l nviClaVahue 1 4 Cutand paste the image into the Layer object To do this right click the image select Cut on the shortcut menu right click anywhere in the Layer and then click CTRL V on the shortcut menu The image appears in the Layer object 196 Advanced SmartServer 2 0 Web Page Topics _ 7 LON Vision File Edit View Insert Format Table Help Z re 1 E Te C i E v ay Y b e A Y 4 http 10 2 124 165 user myCustom MoveImage htm v L ei Q X 5 Back Forward Reload Stop Home Choose New Publish Discard t f Jul I iw 2 t A B Ts U P Browse
26. SmartServer or on another SmartServer To set the destination follow these steps i Inthe URL box under Destination enter the URL of the destination Web page or click Choose to open the Select File dialog browse to the htm file of the destination Web page click the htm file and then click OK ii Inthe Target box you can select how the destination Web page is opened By default the destination Web page is opened in the application frame appFrame with the frameset preserved This enables your custom Web pages to appear in the application frame in the center of the frameset You can select one of the other following options e Select menuFrame to open the destination Web page in the menu frame with the frameset preserved e Select sidebarFrame to open the destination Web page in the sidebar frame with the frameset preserved e Select copyrightFrame to open the destination Web page in the copyright frame with the frameset preserved e Select blank from the pull down list to open the destination Web page in a new window e Select top from the pull down list to open the destination Web page in the current window but replace the frameset if used e Select the Open in Popup check box to open the Web page in a pop up dialog If you select this check box specify the dimensions of the pop up dialog This check box is cleared by default e If you are using data point substitution tags to re use a single Web page for monitor
27. configuring the object how to do this Note This example uses four objects two image swapper objects that represent a light and a switch and two custom JavaScript objects that display the names values statuses and priorities of the switch and the lamp These objects are used to monitor and control the nviClaValue and nvoClaValueFb data points of the Digital Output 1 and Digital Output 2 relays on the SmartServer device In this example placeholders and substitution tags are used on the names of the functional blocks and data points within the complete data point names network device functional blockldata point In the previous two story four room example the placeholders and substitution tags were used on the names of the devices within the complete data point names 3 Select a data point to be monitored and controlled by the object To do this click Select select a data point in the Select Data Point dialog and then click OK to return the object s dialog The Name property is updated with the real or alias name of the selected data point Advanced SmartServer 2 0 Web Page Topics 1 LON Vision Object Image Swapper Layer Left Width Top Height Z Index Data Point Mame f Met LOM ILON App Digital Output 1 nviclavalue 1 Real Alias Prog Iu Format 0000000000000000 0 SN T_switch ield Select Feedback Settings Write Priority Po Use local presets Edit Switchable Force round to preset
28. day to be shown in the weekly or yearly calendar Set this property to one of the following values 0 Sunday This is the default 1 Monday 2 Tuesday 3 Wednesday 4 Thursday S Friday 6 Saturday 207 Alam Notifier Properties 208 elon show week boolean elon max cols integer elon max rows integer If you set elon type to SCHEDULER YEAR specify whether week numbers are shown on the yearly calendar TRUE or hidden FALSE If you set elon type to SCHEDULER YEAR select the maximum number of months displayed on the calendar at one time 1 3 The months are displayed contiguously over the specified number of columns The default is 3 columns which is also the maximum If you set elon type to SCHEDULER YEAR select the maximum number of rows displayed on the calendar at one time The default is 4 rows The Alarm Notifier object is either a log that that lists all currently active alarms reported by the SmartServer a log that lists all active and cleared alarms recorded by the SmartServer or an e mail message to be sent to a technician maintenance company or other personnel notifying them of an alarm condition The following table lists the properties of the Alarm Notifier object elon name elon type The key to a specific Alarm Notifier instance Specify the UCPTname property of the alarm notifier s functional block in the following format network channel device functional block Set this prope
29. default the Layer check box is selected This means that the Text Area object is embedded in a Layer object which lets you freely move the Text Area object in your custom Web page Clearing this check box means that you must position the Text Area object as you would any other HTML object This may be useful 1f you want to place the Text Area object in a table You can set the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to objects it overlaps with with 1 the default being in the back and higher values being in front When positioning the Text Area object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects Creating Custom SmartServer Web Pages Max Age Precision Write Priority ILON Vision 2 0 User s Guide Set the maximum period of time in seconds that the value of the data point is cached be
30. follow these steps Al 1 Click Edit on the Editor toolbar elt or click the Layout tab 2 Click Insert and then select Text Area ILON Vision 2 0 User s Guide 49 3 LON Vision H File Edit View MGSISE Format Table Help 7 HTML Elements 1 c amp 3 i E http j10 2 124 165 user Custom v d 5 Back ard Show Value Choose New Publish Discard e x Text Field a 3 t X Browse P Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Text Area dialog opens 1 LON Vision Object Data Point Feedback Settings Precision o e Write Priority YY Columns o o Editable Insert O Top Bottom F Show presets Force round to preset F Show unit Use local presets 4 Select the data point to be monitored by the Text Area object following these steps a Inthe Data Point property click Select The Select Data Points dialog opens b To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigati
31. following network hierarchy lt network gt lt channel gt lt device gt lt functional block data point This is the default e Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix o The virtual data points on the i LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page d Expand the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure
32. for the data point Using a SNVT temp f data point for example you can change the format to US SI or US Diff or append one of these formats to the data point name if no format is specified 5 Optionally if you selected a field within a structured data point you can set constant values to be written to one to all of the other fields in the data point automatically when a value is written to the selected field This ensures that the other field or fields in the structured data point are set to specific values whenever the Select Box object is used on the selected field Using a SNVT switch data point for example you can have SNVT switch state be set to 1 each time a value is written to SNVT switch value To set constant values for the other fields in a structured data point follow these steps f Click Const Fields The Constant Fields dialog opens g The data point field you selected in step 4 is marked as dynamic h Click the data point field to be set to a constant value i Inthe Value field set the constant value to be written to the data point field selected in step d j Click Save k Repeat steps c e for any other fields in the structured data point to be set to constant values l Click OK to return to the Select Box dialog 6 Optionally you can specify a feedback data point To do this you click Select in the Feedback property and select the feedback data point in the Data Points dialog following step 4
33. have the data point locked again the priority returns to the value you specified e The lower priority application or object specifies a priority that is equal to or higher than the one you specified for the SVG Object For more information on using priorities see Using Data Point Priorities later in this chapter Select this check box to display the data point s unit string 1f enabled and defined This check box is cleared by default meaning that the unit string is not displayed You can enable disable and edit the unit string defined for a data point on its Configure Data Points Web page on the SmartServer You can access this Web page from the built in SmartServer Web interface by clicking General and then clicking the data point in the SmartServer tree By default the Unit String check box in the Configure Data Points Web page is selected meaning that the unit string can be displayed on your custom Web pages You can edit the unit string and the revised unit string will appear in your custom Web pages You can clear the Unit String check box to disable the appearance of the unit string on your custom Web pages 10 Click OK The SVG Object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer option drag the layer containing the object to the desired
34. if you selected a field within a structured data point you can set constant values to be written to one to all of the other fields in the data point automatically when a value is written to the selected field This ensures that the other field or fields in the structured data point are set to specific values whenever the Radio Buttons object is used on the selected field Using a SNVT switch data point for example you can have SNVT switch state be set to 1 each time a value is written to SNVT switch value To set constant values for the other fields in a structured data point follow these steps a Click Const Fields The Constant Fields dialog opens b The data point field you selected in step 4 is marked as dynamic c Click the data point field to be set to a constant value d Inthe Value field set the constant value to be written to the data point field selected in step d Click Save f Repeat steps c e for any other fields in the structured data point to be set to constant values g Click OK to return to the Radio Buttons dialog Optionally you can specify a feedback data point To do this you click Select in the Feedback property and select the feedback data point in the Data Points dialog following step 4 The Radio Buttons object will display the value of the specified Feedback data point as updated values are being written to the data point specified in the Data Point field the data point you selected in step 4
35. internal data server polls the data point and returns the updated value to the object regardless how current the data point is Creating Custom SmartServer Web Pages Write Priority Assign the priority the Select Box object has for writing updated values to the data point This value may range from 0 to 255 highest to lowest priority The priority you specify must be equal to or higher than the priority used by the last application that updated the data point If you set a priority that is less than priority used by the last application that updated the data point a red hand icon 77 appears to the left of the data point when you publish your custom Web page You will need to edit the page and enter a higher priority in this dialog to be able to write to the data point If you set a priority that is equal to or higher than that assigned to the last application or object that updated the data point a green hand icon amp appears to the left of the data point Other applications or objects can write to the data point when one of the following events occurs e The user clicks the green hand icon to unlock the data point temporarily reset the Select Box object s priority to 255 so that lower priority applications or objects can write to the data point When the user enters an updated value in the text field the Select Box object will have the data point locked again the priority returns to the value you specified e The lower prio
36. m_domObj appendChild document createTextNode create span reading DP value var m spanValue m domObj appendChild document createElement span Ly EchelonTop Echelon provide SetValues structure document Custom JavaScript Example Writing Enumerated Data Points The following JavaScript class demonstrates how to write formatted values to an enumerated data point in a custom JavaScript object This JavaScript class creates two buttons that you can use to set the value of a SNVT hvac mode data point and a span that displays the name of the data point and the current value stored init Observe that the UCPTvalue index LonFormat property is set to 0000000000000000 0 SNVT hvac mode in order to write to the enumerated SNVT hvac mode data point Also observe that enumerated values to be written to the data point are written as strings Net LON ALON App VirtFb hvac mode HVAC COOL function SetValues enumeration argObj this update function type item ILON Vision 2 0 User s Guide 99 if type Dp Data m spanvalue rnnerHrML item UCPTvalue 0 get m spanName innerHTML item UCPTname get m myDp item var handleHeat function setHeat m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m myDp UCPTvalue 0 LonFormat set 0000000000000000 0 SNVT hvac mode m myDp UCPTvalue 0 set HVAC HEAT m sso Write m myDp var handleCool function setAC m
37. me Cd i E M tg e A E http 10 2 124 165 user myCustomjLink htm v i lt Q X 5 Back Reload Stop Home Choose New Publish Discard peal Oe eee ly ws ee OUR pr a 3X Browse 4 Layout Click Publish on the Editor toolbar eI click the Browse tab or click File and then click Publish to publish your custom Web page Click the link in the your custom Web page to verify the SmartServer configuration Web page opens in the destination Web page and appears in the specified language Copying and Pasting Objects in 1 LON Vision You can create new i LON Vision objects by copying and pasting an existing object This speeds up the process of creating multiple copies of a particular object You can also remove an i LON Vision object from its current layer and paste it to another layer or to a table You can also cut and paste an image to a Layer and cut and paste into You may also find these techniques useful when moving objects on your Web page Copying i LON Vision Objects You can create new i LON Vision objects by copying an existing object To do this follow these steps L Click the i LON Vision object to be copied and then click the move icon on the upper left side of the object s layer so that a red box appears around the object indicating that you have selected the object s Layer If the box surrounding in the object is black you have selected the object instead of the Layer 4 7 LON Vision 5 File Edit View Insert
38. means electronic mechanical photocopying recording or otherwise without the prior written permission of Echelon Corporation Printed in the United States of America Copyright 1997 2009 by Echelon Corporation Echelon Corporation www echelon com Preface Table of Contents mii lpic e C M evetenteeesth vi milio e T A vii Audiente PER TOO E TEE vii Hardware Requirements ccccccccccseseccceeseeeceessceceeeseeecesececsauseestegseeensaseeeees vil ILLON SmartServer 2 0 DOCUMENTALION cccceeeeeceeeeeeeeceeeeeeeeeeeeeeeeeeeeeeas vii COS TO NN UTE m EP viii For More Information and Technical SuUppott ccccccsseeeeeeeeeseeeeeseaeeeeees Ix Using the i LON Vision 2 0 Online Help Files IX Viewing the i LON Vision 2 0 REadMe ccccccccsseeeeeeseeeseeeeesseeeeeeeeeas IX Using Technical SUDDOLELad ird nu en ee ix DAT ROGUGCIION II 1 NAL OOUIG UG tm t 2 What s New in i LON Vision 2 0 cccccccseecceeceseceecaeeesseeseeeseeeeeesaeeeeeeaaes 2 i LON Vision 2 0 Compatibility with i LON Vision 1 0 2 Installing Echelon i LON Vision 2 0 Software eeeeeeesssssss 3 2 Quick Slart Exercise 15 cacuipaacst cse vu occu gau E AV Chan cud cLENa DU UEM ERR CAS PE ABE 9 lnigeelle o pe ec 10 Step 1 Creating a Web Site Connec
39. myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m myDp UCPTvalue 0 LonFormat set 0000000000000000 0 SNVT hvac mode in dmnyDp UCPIVvalueljO0 l set BnvAC COOL m sso Write m myDp var m mMmyDp7 var m sso argObj sso var m domObj argObj domObj create buttons to write to DP value var m ACButton m domObj appenaChild document createElement button var m HeatButton m domObj appenaChild document createElement button add break var breakl m domObj appendChild document createElement br add text and click events to buttons m ACButton innerHTML AC m HeatButton innerHTML Heat m ACB Lttorn atutachEvent onclLick handlecoolys m HestButton stteschBEventt t oncelrck JdhondleHeat create span reading DP name var m spanName m domObj appendChild document createElement span var DP value text m domObj appendChild document createTextNode create span reading DP value 100 Creating Custom SmartServer Web Pages var m spanValue m domObj appendChild document createElement span y EchelonTop Echelon provide SetValues enumeration document Custom JavaScript Example Writing Data Point Fields Not Integer or Float The following JavaScript class demonstrates how to write formatted values to a data point field that is not of an integral or floating point type in a custom JavaScript object This JavaScript class creates
40. object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to objects it overlaps with with 1 the default being in the back and higher values being in front When positioning the Combo Box object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects Creating Custom SmartServer Web Pages Max Age Precision ILON Vision 2 0 User s Guide Set the maximum period of time in seconds that the value of the data point is cached before the Combo Box object receives updated values This enables you to control the amount of traffic that is generated on a specific channel by the object The SmartServer compares the Max Age value of the Combo Box object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the
41. of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US_Diff or append one of these formats to the data point name if no format is specified 1 LON Vision Data Point Properties Data Point Mame Met LOMJILOM App Digital Output 1 nsiclavalue 1 Real Alias Prog Format 00 00000000000000 0 SNYT_ switch Select Settings g Optionally if you selected a field within a structured data point you can set constant values to be written to one to all of the other fields in the data point automatically when a value is written to the selected field This ensures that the other field or fields in the structured data point are set to specific values whenever the SVG Box object is used on the selected field Using a SNVT_switch data point for example you can have SNVT_switch state be set to 1 each time a value is written to SNVT_switch value To set constant values for the other fields in a structured data point follow these steps i Click Const Fields The Constant Fields dialog opens ii The data point field you selected in step 4 is marked as dynamic ii Click the data point field to be set to a constant value iv In the Value field set the constan
42. on the Editor toolbar Lu click the Browse tab click the Browse tab or click File and then click Publish to save the current draft of your custom SmartServer 2 0 Web page Specifying Substitution Tags 166 Once you have added placeholder values to the data points of the read write objects on a custom Web page you can specify the data points to be displayed when the Web page opens To do this you create links to the custom Web page from a menu in the menu frame and or a navigation pane in the sidebar frame and you specify the substitution tags to replace the placeholder values in the data point name To create the links and specify the substitution tags follow these steps l If you have not already implemented the i LON Vision frameset in your Web design add the Frameset object to your new custom SmartServer 2 0 Web page Make sure you select the Sidebar and or Menu check boxes See Adding a Navigation System to your Web Design in Chapter 3 for more information on how to do this Advanced SmartServer 2 0 Web Page Topics 2 Open the Sidebar htm file or Menu htm file that was created when you added the Frameset object to your home page See Adding a Navigation System to your Web Design in Chapter 3 for more information on how to do this Note This example uses a navigation pane in the sidebar frame to list the rooms represented by the new custom SmartServer 2 0 Web page 3 Click Edit on the Editor toolbar i or click the Layout ta
43. opens 1 LON Vision Object 4 Optionally you can modify the size and position of the Message Box object by setting the corresponding properties 5 Click OK By default a Message Box object with the name Loading Page is positioned in the menu frame directly below the Page Title object unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page It is recommended that you place the Message Box Edit object below the menu bar and the Page Title object if added 3 LON Vision z File Edit view Insert Format Table Help b x 7 z http 10 2 124 165 user myCustom Menu htm i MEM E amp Ff Q X Back ad Reload Stop Home Choose New Publish Discard ST cas put ALB rp uU Y X Browse Z Layout a hind lin tm Read Write Objects pplication Objects Nelcome to e4 Loadin page 6 Click Publish on the Editor toolbar Ln click the Browse tab or click File and then click Publish to save the current draft of your menu frame ILON Vision 2 0 User s Guide 139 Adding Menu Buttonsto the Menu Frame You can add submit and back menu buttons to all your custom Web pages by adding the Menu Buttons object to the menu frame The user can use the Submit button to save changes made to a custom Web page and they can click the Back b
44. page You will need to edit the page and enter a higher priority in this dialog to be able to write to the data point If you set a priority that is equal to or higher than that assigned to the last application or object that updated the data point a green hand icon amp appears to the left of the data point Other applications or objects can write to the data point when one of the following events occurs e The user clicks the green hand icon to unlock the data point temporarily reset the Combo Box object s priority to 255 so that lower priority applications or objects can write to the data point When the user enters an updated value in the text field the Combo Box object will have the data point locked again the priority returns to the value you specified e The lower priority application or object specifies a priority that is equal to or higher than the one you specified for the Combo Box object For more information on using priorities see Using Data Point Priorities in Chapter 4 Enter the width of the combo box in pixels By default the width of the Combo Box object is set to fit the preset or enumerated value with the longest name Select this check box to display the data point s global presets if defined instead of its raw value This check box is cleared by default meaning that the raw value of the data point is displayed A preset is a string that represents a specific raw value for a data point A global pre
45. priority switch object if it 1s either bound to a different data point on the garden light or it has a higher priority than the high priority image swapper switch object for writing to the nvoClsValue data point NVL nvoClsValue 1 NVL_nvoClsVahge_1 Garden Light NVL nvoClsValue 1 NVL nvoClsValue 1 Scenario 3 Priorities Used with Intemal Devices i LON Vison Objects and Extemal Devices If you want to connect an external switch device to the garden light and implement priorities on it you would need to bind the data points of the external switch to the nvoClsValue data point on the Advanced SmartServer 2 0 Web Page Topics SmartServer If the external switch was directly connected to the garden light it could toggle the light regardless of prior any high priority objects or applications This is also true if you want the Scheduler to subordinate the high priority image swapper switch object In this case the Scheduler must use the same data point the nvoClsValue data point on the SmartServer s Digital Input to access the data point on the garden light In addition the Scheduler must have a lower priority than the high priority image swapper switch object in this scenario mi NVL_nwClsValueFb NVL_nvoCls Value Garden Light Using Data Point Substitution Tags You can use data point substitution tags to create i LON Vision read write objects that can be used to moni
46. s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is Precision Enter the number of significant decimal digits with which a data point value is expressed For example a data point value of 32 568 1s rounded to 32 6 rounded to the tenth digit if the precision is 1 and it is rounded to 32 57 rounded to the hundredth digit if the precision is 2 The default and maximum precision are both 3 meaning the decimal values are rounded to the thousandth digit Show Presets Select this check box to display the data point s global presets if defined instead of its raw value This check box is cleared by default meaning that the raw value of the data point 1s displayed A preset is a string that represents a specific raw value for a data point A global preset is a preset that is defined in the data point s configuration Global presets are available in all instances of all applicable i LON Vision objects You ca
47. side you can enter text strings for the keys in the default language which is English lg nisExample properties properties D O O O O O OOo ditor For ResaurceBundle nlsExample praoperties properties Default Temperature metes Bode Bnew OOOO i Click the New tab at the bottom of the ResourceBundle Editor view to create the properties file and translate the keys in a different language The New Properties File dialog opens 178 Advanced SmartServer 2 0 Web Page Topics ig COMMON properties praperties Editor for ResourceGundle COMMON properties properties E New properties file Choose or type a Locale L JL IL Lang Country Variant 5 Properties P Default P German P French P New j In the Choose or Type Locale box select the language and desired version if different regional varieties are available for the language to which your custom SmartServer 2 0 Web page is to be translated lg nlsExample properties properties editor For ResourceBundle nisExample properties dd properties New properties file Choose or type a Locale TA Froperties P Default E Mew k The Lang and Country if used properties are filled in Optionally you can enter a Variant to further categorize the selected language This is useful if you want to create different transl
48. structured data point and you want to represent the current value of the field using a simple meaningful string instead of a raw value You cannot select the Show Presets check box to use global presets for a field within a structured data point 8 Click OK The Text Area object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 9 Click Publish on the Editor toolbar click File and then click Publish or click the Browse tab to publish your custom Web page Combo Box The Combo Box object 9 is a combo box that displays the current value of a scalar data point an enumerated data point or a field within a structured data point The user can write to the data point or field by entering a value in the text box or selecting one of the presets defined for the data ILON Vision 2 0 User s Guide 55 point from the attached list box To add a Combo Box object to your custom SmartServer 2 0 Web page follow these steps HTML Elements m E a amp 3 GE http 10 2 124 165 user Custom v nd Show Value Choose New Publish Discard 2 G Text Field Text Area hi m Image Swapper Radio Buttons Select Box
49. support Free e mail support is available or you can purchase phone support from Echelon or an Echelon support partner See www echelon com support for more information on Echelon support and training services You can also view free online training or enroll in training classes at Echelon or an Echelon training center to learn more about developing devices You can find additional information about device development training at www echelon com training ILON Vision 2 0 User s Guide You can obtain technical support via phone fax or e mail from your closest Echelon support center The contact information is as follows check www echelon com support for updates to this information The Americas English Echelon Corporation Japanese Attn Customer Support 550 Meridian Avenue San Jose CA 95126 Phone toll free 1 800 258 4LON 258 4566 Phone 1 408 938 5200 Fax 1 408 790 3801 lonsupport echelon com Europe English Echelon Europe Ltd German Suite 12 French Building 6 Italian Croxley Green Business Park Hatters Lane Watford Hertfordshire WD18 8YH United Kingdom Phone 44 0 1923 430200 Fax 44 0 1923 430300 lonsupport echelon co uk Japan Japanese Echelon Japan Holland Hills Mori Tower 18F 5 11 2 Toranomon Minato ku Tokyo 105 0001 Japan Phone 81 3 5733 3320 Fax 81 3 5733 3321 lonsupport echelon co jp China Chinese Echelon Greater China English Rm 1007 1008 IBM Tower Pacific Century Place 2A Gong Ti Be
50. the Max Age value of the Text Field object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is Enter the number of significant decimal digits with which a data point value is expressed For example a data point value of 32 568 is rounded to 32 6 rounded to the tenth digit if the precision is 1 and it is rounded to 32 57 rounded to the hundredth digit 1f the precision is 2 The default and maximum precision are both 3 meaning the decimal values are rounded to the thousandth digit Assign the priority the Text Field object has for writing updated values to the data point This value may range from 0 to 255 highest to lowest priority The priority you specify must be equal to or higher th
51. the default e Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The ILON Vision 2 0 User s Guide 63 64 Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix o The virtual data points on the i LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page d Expand the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure e Click OK to return to the Image Swapper dialog The Name property is updated
52. the frameset preserved by default Otherwise the destination Web page is opened in a new window You can select one of the other following options e Select menuFrame to open the destination Web page in the menu frame with the frameset preserved This option is only available if you are adding the Link object to a page in the frameset e Select sidebarFrame to open the destination Web page in the sidebar frame with the frameset preserved e Select copyrightFrame to open the destination Web page in the copyright frame with the frameset preserved e Select blank from the pull down list to open the destination Web page in a new window e Select top from the pull down list to open the destination Web page in the current window but replace the frameset if used e Select the Open in Popup check box to open the Web page in a pop up dialog If you select this check box specify the dimensions of the pop up dialog This check box is cleared by default 5 Optionally you can click Name Substitution Values to open the Data Point Name Substitution Values dialog In this dialog you can specify the data points to be displayed when the Web page specified by the Link object opens To do this you enter the substitution tags to replace the placeholder values in the data point name See Using Data Point Substitution Tags later in this chapter for more information 6 Click OK The Link object is added to your custom SmartServer 2 0 Web page
53. the i LON SmartServer 2 0 DVD or using the full version on the 7 LON SmartServer 2 0 Programming Tools included on the 7 LON SmartServer 2 0 Programming Tools DVD For more information on ordering the i LON SmartServer 2 0 Programming Tools DVD contact your Echelon sales representative See the i LON SmartServer 2 0 Programming Tools User s Guide for more information on localizing the language of the SmartServer products Show Object Names Displays the names of data points directly below i LON Vision objects in the Layout views of your custom SmartServer 2 0 Web pages This is useful for identifying the data point associated with a given i LON Vision object Object names are displayed in the following format network device functional block data point This check box is selected by default You can clear this check box to hide the name of the data point name in the Browse view This may be useful if you are creating complex layouts where data point names interfere with the page layout editor Note The data point name does not appear below the i LON Vision object in the Browse view for your published custom SmartServer 2 0 Web page ILON Vision 2 0 User s Guide 31 4 Show Layers Displays the green layer boxes surrounding i LON Vision objects in the Layout views of your custom SmartServer 2 0 Web pages This check box is selected by default Show Hidden Items Displays all the network objects in the SmartServer tree within the 7 L
54. the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure Click OK to return to the Show Value dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Format property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US Diff or append one of these formats to the data point name if no format is specified Optionally configure the following properties of the Show Value object Layer By default the Layer check box is selected This means that the Show Value object is embedded in a Layer object which lets you freely move the Show Value object in your custom Web page Clearing this check box means that you must position the Show Value object as you would any other HTML object This may be useful if you want to place the Show Value object in a table You can s
55. the text field can display You should make sure that the text field is large enough to display the potential values that could be assigned to the selected data point Select whether the data point value is aligned to the Left or Right side of the text field Select this check box to display the data point s global presets if defined instead of its raw value This check box is cleared by default meaning that the raw value of the data point 1s displayed A preset is a string that represents a specific raw value for a data point A global preset is a preset that is defined in the data point s configuration Global presets are available in all instances of all applicable 7 LON Vision objects You can add edit and delete global presets for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The options for presets are located at the bottom of the Web page Notes To use a preset for a field within a structured data point select the Use Local Presets check box click Edit and create presets for the field The Show Presets option is incompatible with the fields of structured data points If you selected a data point field in step 4 selecting this option resets the data point to the entire structure Rounds the raw value of the data
56. the upload them back to your SmartServer when you use these tools The API for the i LON Vision objects is provided in Chapter 5 i LON Vision 2 0 API to help you edit your Web pages with an external tool such as these In addition to a text view Adobe Dreamweaver includes a similar layout view as i LON Vision 2 0 that lets you implement advanced layout techniques Note If you are editing your custom Web pages with an external editor and i LON Vision 2 0 concurrently you must remember to reload your custom Web pages in 7 LON Vision 2 0 after editing and saving them with an external Web design tool After you reload your custom Web pages you can edit them with 7 LON Vision 2 0 Troubleshooting Custom Web Page Designs This section describes some of the problems that you could encounter when creating your custom Web pages I modified my Web page but I don t see the changes when I open it with my Web browser This could be due to cached pages being displayed by Internet Explorer To correct this with Internet Explorer select Internet Options from Internet Explorer s Tools menu The Internet Options window appears Click the Delete Files buttons Then click the refresh button on the Internet Explorer tool bar to refresh the screen I linked all of my Web pages from the SmartServer s home page but I can t get to my custom Web pages If you added the frameset object to your Web pages you need to link to the index htm file in your web use
57. the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer option drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page Repeat steps 2 6 to create additional NLS Text objects TEMPERATURE z x Ke M uidlddudunil ing n vu on o oo0cooononGoc oO N W o a0 0 hdd bitin RO pii WD NevLONALON App VirtFostemp US J NVL zeiClaVabue 1 Click Publish on the Editor toolbar click the Browse tab or click File and then click Publish Note Your custom SmartServer 2 0 Web page will not function until the text string for the NLS Text object is in the appropriate properties files in the web user lt Custom gt nls folder on the SmartServer flash disk You will create the nls folder and the properties file and in the next step Create the nls folder and the properties files for your custom SmartServer 2 0 Web page with the 1 LON SmartServer 2 0 Programming Tools To do this follow these steps a Install the demo version of the 1 LON SmartServer 2 0 Programming Tools on the i LON SmartServer 2 0 DVD or the full version on the 1 LON SmartServer 2 0 Programming Tools DVD See the i LON SmartServer 2 0 User s Guide for more information on installing the demo version See the i LON SmartServer 2 0 Programming Tools User s Guide for more information on installing the full v
58. to be linked to e Click Choose to open the Select File dialog select the Web page and then click OK e Click Browse and then browse to the Web page Select the Open in Popup check box to open the Web page in a pop up dialog and then select the dimensions of the pop up dialog This check box is cleared by default Click OK The Show Value object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page Creating Custom SmartServer Web Pages 7 Click Publish on the Editor toolbar click File and then click Publish or click the Browse tab to publish your custom Web page Text Field The Text Field object 0 00 is a text box that displays the current value of a scalar data point an enumerated data point or a field within a structured data point The user can write to the data point or field by entering a new value in the text box To add a Text Field object to your custom SmartServer 2 0 Web page follow these steps f 1 Click Edit on the Editor toolbar elt or click the Layout tab 2 Click Insert and then select Text Field _ 7 LON Vision M File Edit view AGES Format Table Help 7 HTML Elements LA e em d i Q http
59. under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix o The virtual data points on the 1 LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page Expand the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure Click OK to return to the Data Point Properties dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point gt The Format property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US_Diff or append one of these formats to the data point name if no format is specified 1 LON Vision Data Point Properties Data Point Mame Met LOMJILOM App
60. you selected a field within a structured data point click the Use Local Presets check box and then click Edit to open the Local Presets dialog and create presets for this individual Image Swapper object This check box is cleared by default meaning that local presets are not used A local preset is a preset that applies to a specific instance of an i LON Vision object Local presets are especially useful if you selected a field within a structured data point and you want to represent the current value of the field using a simple meaningful string instead of a raw value Note You can add edit and delete global presets for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The options for presets are located at the bottom of the Web page If you create global presets while the Image Swapper dialog is open you can click Refresh to make them available in the in the Images box If you select the Use Local Presets check box the global presets defined for the data point 1f any are cleared from the Images box To re display the global presets click Refresh Specify the image to be displayed for each preset defined for the data point To do this follow these steps Creating Custom SmartServer Web Pages a Click the preset name in the I
61. 0 In this case a Manual Override icon 7 will appear to the left of the Combo Box object indicating that the object currently has the highest priority for writing values to the data point Only objects or applications with a priority of 230 or higher may write values to that data point In addition a Locked icon will appear _ to the left of the data point value in the Data Point View object and the object is disabled This means that Data Point View object and all other objects and applications with a priority lower than 230 cannot write to the data point until the Combo Box object s lock on the data point is released The user can release the lock an i LON Vision object or application has on a data point by clicking the Manual Override icon This temporarily resets the object s priority to 255 the default value and it causes the SmartServer to notify all other objects and applications in which the subject data point is registered The next highest priority application or object will then assume the priority for writing values to the data point Prionty Level Example The following example demonstrates how priorities can be used to control write access to a data point In the following scenario three users are controlling the lighting in a conference room using three separate Web interfaces The Web interfaces all use a Combo Box object to read and write to a data point in the lighting system that turns the lights on an
62. 0 Web page If your localized SmartServer custom Web page will be accessed via a Link object follow the steps described in Linking to a Configuration Web Page from a Link Object 12 If your default and localized SmartServer custom Web pages will not be accessed via a link from the Navigation or Link object they can be opened using the following addresses e Default custom Web page http lt SmartServer IP address gt user lt Custom gt lt Page gt htm Temperature e Localized custom Web page http lt SmartServer IP address user Custom Page htm elon lang language REGION _variant gt 182 Advanced SmartServer 2 0 Web Page Topics Temperatura Estado de Alarma Opening SmartServer Applic ations from Custom Web Pages You can open the configuration Web pages of the SmartServer s built in applications for example Alarm Notifier Digital Input Scheduler Type Translator from your custom SmartServer 2 0 Web pages To do this you add a new item to a Navigation object tree or menu or you create a Link object You then link the item or Link object to the application s htm file in the root web user echelon folder on your SmartServer s flash disk select an application instance to be opened when the link is clicked and specify the language English German French or other language used by the configuration Web page If your Web design uses a frameset you will typically add the link to an item in
63. 000 0 SNVT switch m myDp UCPTvalue 0 set 75 0 1 m sso Write m myDp var handleOn function setOn m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 use preset to write to DP m myDp UCPTvalue 0 set ON m sso Write m myDp var m myDp var m sso argObj sso var m domObj argObj domOb j Creating Custom SmartServer Web Pages create buttons to write to DP value var m OffButton m domObj appendaChild document createElement button var m LowButton m domObj appendaChild document createElement button var m MediumButton m domObj appendChild document createElement button var m HighButton m domObj appendaChild document createElement button var m OnButton m domObj appendChild document createElement button add break var breakl m domObj appenaChild document createElement br add text and click events to buttons m OffButton innerHTML Off m LowButton innerHTML Low m MediumButton innerHTML Medium m HighButton innerHTML High m OnButton innerHTML On m OffButton attachEvent onclick handleOff m LowButton attachEvent onclick handleLow m MediumButton attachEvent onclick handleMedium m HighButton attachEvent onclick handleHigh m_OnButton attachEvent onclick handleOn create span reading DP name var m spanName m domObj appendChild document createElement span var DP value text
64. 1 LON SmartServer ECHELON configuration amp service English vj dmi if Programmable run custom C amp C applications and drivers Direct LNS interface to view and use the LNS database Standalone mode can manage up to 200 PL amp 64 FT devices without gt gt e an LNS database Network management using the SmartServer Web pages IPv6 Support Improved security HTTPS Cross Browser Support Create trend graphs using the configuration Web pages or i LON Vision Localize configuration pages to any language 64MB of Flash and RAM FHTRGRMK eee em Demonstrations i LON Vision 2 0 Features Resources e Demonstrations e Integrated Design e iL ON SmartServer Community e ATU Page e Quick Access to all Network and e i LON SmartServer amp i LON 100 System Values Developer and Integrator Center e Mo cost solution e i LON SmartServer eTraining b Click Insert point to HTML Elements and then select Link The Link Properties dialog opens c Inthe Enter Text box to Display for the Link box enter Custom Web Page d Inthe Link Location box enter user Custom CustomWebPage htm or click Choose and then browse to the file in the Select File dialog Link Properties Link Text Enter text to display Far the link Custom Web Page Link Location Enter a web page location or select a Named Anchor ar Heading From the popup list User rt ustom usbam WebPage e Click OK A Custom Web Page lin
65. 10 2 124 165fuser Custom v lt 4 8 Back Show Value Choose New Publish Discard T8 zt Text Field i 7 g A Text Area Yd Browse FY Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript a 99 H M n hihi Navigation Page Title Message Box Menu Button 3 The Text Field dialog opens ILON Vision 2 0 User s Guide 43 44 i LOM Vision Object Data Point Feedback Settings Write Priority 1 Size Align left vi Show presets Show unit Use local presets 4 Select the data point to be monitored by the Text Field object following these steps a Inthe Data Point property click Select The Select Data Points dialog opens b To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigation pane c Select the method for searching for the data point to be monitored You have two choices Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel g
66. 16 5 Value dynamic b The data point field you selected in step 4 is marked as dynamic c Click the data point field to be set to a constant value d In the Value field set the constant value to be written to the data point field selected in step d ILON Vision 2 0 User s Guide 45 46 e Click Save f Repeat steps c e for any other fields in the structured data point to be set to constant values g Click OK to return to the Text Field dialog Optionally you can specify a feedback data point To do this you click Select in the Feedback property and select the feedback data point in the Data Points dialog following step 4 The Text Field object will display the value of the specified Feedback data point as updated values are being written to the data point specified in the Data Point field the data point you selected in step 4 If you use the Text Field object to write a value to the Data Point the object will be disabled temporarily until the specified Feedback data point receives the data point update Note The Feedback data point you select should be bound to the Data Point via device hardware a LONWORKS connection or a Web connection Optionally configure the following properties of the Text Field object Layer By default the Layer check box is selected This means that the Text Field object is embedded in a Layer object which lets you freely move the Text Field object in your custom Web page
67. 2 0 Programming Tools DVD For more information on ordering the 1 LON SmartServer 2 0 Programming Tools DVD contact your Echelon sales representative To use the NLS Text object and create a custom SmartServer 2 0 Web page in multiple languages follow these steps f 1 Click Edit on the Editor toolbar elt or click the Layout tab 2 Click Insert and then select NLS Text 172 Advanced SmartServer 2 0 Web Page Topics 7 LON Vision z Fie Edit view EISE Format Table Help 7 HTML Elements 3 cf X i http 10 2 124 165 user myCustom vi ad 5 Back Show Value Choose New Publish Discard Y Text Field i A I P Text Area P Browse P Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier lin LL jh Custom JavaScript Navigation Page Title Message Box Menu Button 3 The NLS Text dialog opens 1 LON Vision Object NLS Text Layer Left width Top Height Z Index Settings 4 Optionally configure the Layer properties of the NLS Text object By default the Layer check box is selected This means that the NLS Text object is embedded in a Layer object which lets you freely move the NLS Text object in your custom Web page Clearing this check box means that you must position the NLS Text object as you would any other HTML object This may
68. 2 0 User s Guide 135 1 LON Vision Object Layer Left Width Top Height Z Index C Tree Default Language Engish Addressing Menu Orientation Horizontal Vertical Presentation C55 Class MainMenu MainMenuRoot Entries amp root E Read Write Objects Edit p Image Swapper JavaScript SWG Object Move Up Delete E Application Objects B 7 EEUU Scheduler L Data Logger Data Point vie gt 8 Tocreate third to fifth level submenus repeat steps 5 7 In this process you click a submenu item click Add to add a menu item below it click the third level submenu item click Edit to edit the third level submenu item and repeat the process for each new submenu level to be created in the menu hierarchy Note You can select a menu item in the list and click Move Up or Move Down to change the order the menu items in each menu are listed To remove a menu item and its submenus click the menu item and then click Delete 9 Click OK The menu bar is added to the top of the menu frame 10 Click Publish on the Editor toolbar Ln click the Browse tab or click File and then click Publish to save the current draft of your menu frame 11 You can test your menu bar by clicking a menu item or clicking a menu item and then clicking one of the submenu items and verifying that correct destination Web page opens 136 Creating Custom SmartServer Web P
69. 3 Digital Control Digital Net LON Lamp 2 3 Digital Output Digital Room 4 Net LON Switch_2_4 Digital Control Digital Net LON Lamp 2 4 Digital Output Digital 163 To implement substitution tags in this scenario you could create a new Web page and add two i LON Vision read write objects representing the switch and lamp devices After you select the data point to be represented by the i LON Vision read write object you modify the name of the selected data point by adding placeholders to it Placeholders represent portions of the data point name that are to be specified by a substitution tag For example in the above example you could select the data point for the switch device in Room 1 on the first floor which would be Net LON Switch_1_1 Digital Control Digital You could use placeholders to change the data point name to Net LON Switch floor 1j room 1 Digital Control Digital Note that in this example a default value has been specified in the placeholder You must specify the default value in the placeholder or an error will occur and you will not be able to add the read write object to your custom Web page The placeholder name must start with a letter and it can be any length consisting of letters numbers or the underscore character You could then add submenu items to the navigation pane in the sidebar frame representing the floors and rooms in the building When you add the submenu items for the rooms you create links to you
70. 4 is marked as dynamic c Click the data point field to be set to a constant value d Inthe Value field set the constant value to be written to the data point field selected in step d Creating Custom SmartServer Web Pages e Click Save f Repeat steps c e for any other fields in the structured data point to be set to constant values g Click OK to return to the SVG Object dialog Optionally you can specify a feedback data point To do this you click Select in the Feedback property and select the feedback data point in the Data Points dialog following step 4 The SVG Object will display the value of the specified Feedback data point as updated values are being written to the data point specified in the Data Point field the data point you selected in step 4 If you use the SVG Object to write a value to the Data Point the object will be disabled temporarily until the specified Feedback data point receives the data point update Note The Feedback data point you select should be bound to the Data Point via device hardware a LONWORKS connection or a Web connection Set the Minimum and Maximum values on a continuous range of possible values that the SVG Object can represent To write to data points without scaling their raw values you can set the minimum to 0 and the maximum to 100 This is useful for data points or fields within a structured data point that have valid ranges between 0 100 such as the value field in
71. 9 XX Browse A Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link T Data Point view Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Data Point View dialog opens 108 Creating Custom SmartServer Web Pages 1 LON Vision Object Data Point View Layer Left Width 200 Top Height 300 Z Index Presentation Show Grid Default Language English wi Minimum Maximum Data Points 4 Inthe Layout property under Presentation select the elements of the View Data Points Web page to be added to your custom Web page You have the following three choices e Graph A trend graph that plots selected data points over a user specified interval e Table A log that lists the format current value and status of the selected data points With the combo box included in this element the user can write to a data point or a field within the data point by entering a value or selecting one of the presets or enumerations defined for the data point e Graph and Table Displays the data point trend graph and the log The trend graph is displayed on top of the log The user can point to one of the data points listed in the log or click its line on the trend graph to highlight the updates recorded for that data point on the trend graph and show its corresponding
72. AX Browse P Layout c M M m 8 Click Publish on the Editor toolbar click the Browse tab or click File and then click Publish to verify that the images appear as desired in your custom Web page 7 LON Vision L File Edt View le Help M x Y ly e A Y http 10 2 124 165 user myCustom MoveImage htm i 5 Back Forward Reload Stop Home Choose HN o s sS B 198 Advanced SmartServer 2 0 Web Page Topics Sec uring Custom SmartServer Web Pages You can use the i LON Server Web Server Parameters utility to create security settings that will requires users to provide a user name and password each time they access the files stored in the custom directory you created for your custom SmartServer 2 0 Web pages For more information on the i LON Server Web Server Parameters utility see Appendix C of the i LON SmartServer 2 0 User s Guide Using an Extemal Web Publishing Tool You can use a third party Web design tool to enhance your Web design layout perform ad hoc editing implement cascading style sheets and insert Flash objects into your Web pages Echelon has tested the following tools on Web pages designed with 7 LON Vision 2 0 Adobe Dreamweaver UltraEdit and CuteFTP All of these tools let you directly access the custom Web pages on your SmartServer s flash disk via FTP and edit them in a text view you do not need to manually download your Web pages to your computer edit them and
73. Box SVG Object Link Data Point View Data Log View Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Scheduler dialog opens 1 LON Vision Object Scheduler Layer Left Width Top Height Z Index Instance NetiLON LON App scheduler O v Presentation Type O week Year Usage View Config Year Start Week Start Show Week Number Max number of columns Max number of rows Default Language English 4 Inthe Instance property under Scheduler select the Scheduler functional block on the SmartServer to be used for the Scheduler object To update the list of available Schedulers click Refresh 5 Inthe Type property select the type of calendar to be added to your custom Web page You have the following two choices e Week A weekly calendar listing the events to be executed normally without exceptions each day The user can click a day to view or configure the daily schedule This option provides the functionality of the Scheduler Daily Schedules Web page e Year A yearly calendar highlighting the dates in which exceptions to the daily schedule are to be executed The user can view and configure the schedule for any date This option provides the functionality of the Scheduler Exceptions Schedules Web page Creating Custom SmartServer Web Pages 6 Inthe Usage property select the functi
74. By default the object 1s positioned in the upper left hand corner of your Web page unless you specified its ILON Vision 2 0 User s Guide 123 position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 7 Click Publish on the Editor toolbar Ln click the Browse tab or click File and then click Publish to save the current draft of your custom SmartServer 2 0 Web page Adding a Navigation System to your Web Design You can add a navigation system to your Web design so that users can easily move through your custom Web pages Adding a navigation system entails doing the following 1 Creating a home page for your Web design and formatting the Frameset object in it You can do this manually or you can create a new Web page that uses an Echelon frameset template The Echelon frameset templates include the Frameset object and they have editable regions in the menu sidebar and copyright frames that show you where to insert your company s text and images 2 Designing the menu frame This entails adding one or all of the following navigation objects to the menu frame menu bar page title message box menu buttons and graphics 3 Designing the sidebar frame This entails adding a navigation pane to the sidebar frame 4 Designing the copyright frame This entails modifying the copyright notice in the copyright frame
75. Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Combo Box dialog opens 1 LON Vision Object Left Width Top Height Z Index Data Point Feedback Settings Precision o Write Priority f Size 1 pixels Show presets Force round Eo preset Show unit Use local presets 4 Select the data point to be monitored and controlled by the Combo Box object following these Steps a Inthe Data Point property click Select The Select Data Points dialog opens Creating Custom SmartServer Web Pages b To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigation pane c Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block data point This is the default e Alias Name Data points are alphabetized by their alias names which correspond to their loca
76. Choose New Publish Discard E JN e A B 7 U PAX Browse P Layout Y x Net LONALON App Digital Output 39 L nviClaValue 1 10 Click the image so that a move icon and a solid black box appear on top and around the image respectively ILON Vision 2 0 User s Guide 21 22 i 7 LON Vision M File Edit View Insert Format Table Help i Y by e A Y Iz http 10 2 124 165 user Custom CustomWebPage htm ow 4 Q X 5 Back Forward Reload Stop Home dm 2 A B Ts U PAX Browse A Layout 9 ILONA5LON App Digital Output DP im7iClaVahe 1 Choose New Publish Discard 11 Move the mouse pointer over the move icon on the upper left side of the object s layer so that the mouse pointer becomes a move tool amp Click the move icon so that the box becomes red which indicates that the layer has been selected 7 LON Vision M File Edit View Insert Format Table Help Y j by e A Y Iz http 10 2 124 165 user Custom CustomWebPage htm SW 8 Back Forward Reload Stop Home uat ak ALB Sp a y S P X Browse P Layout P JlAviclaVahe 1 12 Drag the layer to the middle of the window Choose New Publish Discard Quick Start Exercise 7 LON Vision 5 File Edit View Insert Format Table Help T Y E Y http 10 2 124 165 user Custom CustomWebPage htm v j X 8 Back Reload Stop Home Choose New Publish Discard jJ gt A Bs Us aaa JAX Browse A Layout W
77. D is displayed Show Unit Select this check box to display the data point s unit string Gf enabled and defined This check box is cleared by default meaning that the unit string is not displayed You can enable disable and edit the unit string defined for a data point on its Configure Data Points Web page on the SmartServer You can access this Web page from the built in SmartServer Web interface by clicking General and then clicking the data point in the SmartServer tree By default the Unit String check box in the Configure Data Points Web page is selected meaning that the unit string can be displayed on your custom Web pages You can edit the unit string and the revised unit string will appear in your custom Web pages You can clear the Unit String check box to disable the appearance of the unit string on your custom Web pages Use Local Presets Select this check box and click Edit to open the Local Presets dialog and create presets for this individual Combo Box object This check box is cleared by default meaning that local presets are not used A local preset is a preset that applies to a specific instance of an i LON Vision object Local presets are especially useful if you selected a field within a structured data point and you want to represent the current value of the field using a simple meaningful string instead of a raw value You cannot select the Show Presets check box to use global presets for a field within a stru
78. Digital Output 1 nviclavalue 1 Real Alias Prog Format 00 00000000000000 0 SNYT_switch Select Settings Optionally if you selected a field within a structured data point you can set constant values to be written to one to all of the other fields in the data point automatically when a value is written to the selected field This ensures that the other field or fields in the structured data point are set to specific values whenever the SVG Box object is used on the selected field Creating Custom SmartServer Web Pages ILON Vision 2 0 User s Guide Using a SNVT switch data point for example you can have SNVT switch state be set to 1 each time a value is written to SNVT switch value To set constant values for the other fields in a structured data point follow these steps i Click Const Fields The Constant Fields dialog opens ii The data point field you selected in step 4 is marked as dynamic i Click the data point field to be set to a constant value iv In the Value field set the constant value to be written to the data point field selected in step d v Click Save vi Repeat steps iii v for any other fields in the structured data point to be set to constant values vii Click OK to return to the Select Box dialog Optionally in the Max Age property you can set the maximum period of time in seconds that the value of the data point is cached before the Data Point View object receives updated
79. EE E hitp 10 2 124 165 user Custom i e ej Q x E a 9 g Back Forward Show Value m Text Field We vx Text Area 2AM Browse FY Layo Combo Box Image Swapper Radio Buttons Select Box Check Box S G Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Choose New Publish Discard hi Navigation Page Title Message Box Menu Button 3 The SVG Object dialog opens 1 LON Vision Object SVG object Layer Data Point Feedback Settings Read only Precision Ys Write Priority Ys Minimum n Maximum 100 Show unit Presentation E HorizontalSlider v 4 Select the data point to be monitored by the SVG Object following these steps a Inthe Data Point property click Select The Select Data Points dialog opens ILON Vision 2 0 User s Guide 83 84 b To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigation pane c Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the
80. File Edit view EISE Format Table Help HTML Elements gt i j X i V http 10 2 124 165 user myCustom Sidebar htm v 3 7 5 Back Show Value Choose New Publish Discard ish Text Field E E n Zz es Text Area a 9 P Browse FY Layot Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Page Title Message Box Menu Button 2 The Navigation dialog opens ILON Vision 2 0 User s Guide 145 146 1 LON Vision Object Layer Left Width Top Height Z Index Tree d Auto Tree Default Language Engish Addressing C Menu Orientation Presentation Entries e rook Under Settings you can select the Auto Tree check box to append the factory navigation pane below your custom tree By default you will be able to right click the LAN icon and add host devices to the LAN such as remote SmartServers LNS Servers WebBinder Target Servers e mail SMTP servers and time SNTP servers right click the SmartServer icon to access all of the SmartServer setup Web pages and create remote connections This check box is cleared by default If you selected the Auto Tree check box in step 3 select the language from the Default Language list in which the following objects are displayed the SmartServer s setup config
81. Format Table Help Y bj e A Y http 10 2 124 165 user myCustom v e ej Q X E Back Reload Stop Home Choose New Publish Discard T 2 s5 A amp IB 7 Uls amp a 5 2X Browse A Layout ILON Vision 2 0 User s Guide 189 2 Click Edit and then click Copy or press CTRL C 3 Click an empty space in the Layout tab 4 Click Edit and then click Paste or press CTRL V The copy of the object is created and it appears diagonally to the lower left of the source object 3 EON Vision t File Edit View Insert Format Table Help amp Y by e A Y g http 10 2 124 165 user myCustom v e Ej Q x H Back Reload Stop Home C Choose New Publish Discard JM cusa ATH y PAX Browse A Layout 2 E M lii LL TIT ON OFF WS NLONWEON App Digital Output 79 Net LONALON App Digital Output mviClaVahie_1 5 Click the copy and then click the move icon on the object s layer and drag the layer containing the copied object to an empty space in the Layout tab 3 LON Vision M File Edit view Insert Format Table Help V i e A Y http 10 2 124 165 user myCustom v 3 ej Q X 5 Back Reload Stop Home Choose New Publish Discard jN AJR 7 Ula as PAX Browse 4 Layout ON OFF Net LONALON App Digital Output J l nviClaVahe_l 6 Edit the copy to change the selected data point and configure the object properties To do this either double click the object right click the obj
82. Generated by ResourceBundle Editor http eclipse ALARM Estado de larma TEMPERATURE Temperatural lili ey Properties IP Default IP Spanish E Mew Tip Save your language localization project frequently to safeguard your data from a power outage or other failure To save your language localization project click File and then click Save ILON Vision 2 0 User s Guide 181 10 Copy the nls folder which contains the properties file you created in step 9 to the SmartServer To do this follow these steps a Browse to the LonWorks iLON Development eclipse workspace fpm folder on your computer b Use FTP to access the root web user echelon lt Custom gt folder on the flash disk of your SmartServer c Copy the nls folder in the LonWorks iLON Development eclipse workspace fpm folder on your computer to the root web user echelon lt Custom gt folder on the SmartServer flash disk Note The nls folder must be copied to the same directory on the SmartServer in which the target custom SmartServer 2 0 Web page is stored 11 If your localized SmartServer custom Web page will be accessed via a Navigation object sidebar or menu follow steps 2 9 and steps 11 17 in Linking to a Configuration Web Page from a Navigation Object Note that in step 8 you browse to the root web user echelon lt Custom gt folder on the SmartServer flash disk and then select the htm file representing your custom SmartServer 2
83. If you use the Radio Buttons object to write a value to the Data Point the Creating Custom SmartServer Web Pages object will be disabled temporarily until the specified Feedback data point receives the data point update Note The Feedback data point you select should be bound to the Data Point via device hardware a LONWORKS connection or a Web connection 7 Optionally configure the following properties of the Radio Buttons object Layer Max Age ILON Vision 2 0 User s Guide By default the Layer check box is selected This means that the Radio Buttons object is embedded in a Layer object which lets you freely move the Radio Buttons object in your custom Web page Clearing this check box means that you must position the Radio Buttons object as you would any other HTML object This may be useful if you want to place the Radio Buttons object in a table You can set the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to o
84. Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to objects it overlaps with with 1 the default being in the back and higher values being in front When positioning the SVG Object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects Set the maximum period of time in seconds that the value of the data point is cached before the SVG Object receives updated values This enables you to control the amount of traffic that is generated on a specific channel by the object The SmartServer compares the Max Age value of the SVG Object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server return
85. ON Vision object property dialogs including those objects that are currently hidden in the navigation pane on the built in SmartServer Web interface This check box is cleared by default meaning that you can only select those objects that are currently shown in the navigation pane on the built in SmartServer Web interface Confirm Publish Opens a dialog each time you attempt to publish a custom SmartServer 2 0 Web page asking you to confirm that the changes made to your custom SmartServer 2 0 Web pages are to be published This check box is cleared by default meaning that you can publish your custom SmartServer 2 0 Web pages without having to confirm changes External Browser Displays the current external Web browser used for previewing your custom SmartServer Web Pages The default external Web browser is Internet Explorer To select a different Web browser click Browse and then browse to and select the desired Web browser For example browse to and select C Program Files Mozilla FirefoxMirefox exe to set Firefox as your external Web browser To preview your custom SmartServer Web Pages in an external Web browser click View and then click Open in External Browser Click OK to save your changes Upgrading Custom Web Pages to SmartServer 2 0 Pages You can use 1 LON Vision 2 0 to automatically upgrade all existing custom Web pages within a folder on your SmartServer flash disk to the SmartServer 2 0 custom Web page format This in
86. P Layout 2 Y Te T SER eee 5 Re size the Layer object containing the image and then move the Layer to the desired position within the custom Web page 6 Tooverlap the Layer containing the image with other Layers click the Layer so that a black box and move icon appear on the Layer box click the move icon so that a red box appears around the Layer and then right click the Layer and select Advanced Properties on the shortcut menu In the Advanced Property Editor dialog click the Inline tab click the Z index property modify the Z index property and then click OK e Increase the Z index to place the selected Layer above other Layers for example set the Z index to 2 e Decrease the Z index to place the selected Layer below other Layers for example set the Z index to 1 Advanced Property Editor Current attributes For cDIY HTML Attributes Inline Style JavaScript Events Property Value position absolute 109px 24px 37px 28 px z index Click on an item above to edit its value Property Value ILON Vision 2 0 User s Guide 197 7 If you overlapped the Layer containing the image it appears above or below the other Layers on your Web page 4 7 LON Vision T File Edit View Insert Format Table Help v Y E eo A gt amp hittp 10 2 124 165 user myCustom Movelmage htm vl e Back Forward Reload Stop Home j Choose New Publish Discard EL m ue pt MIB F P
87. Point Name Net LONALON App Digital Output 1 maClaValue 1 Object Priority 240 Priority 255 Technician Page 0 0 0 v Data Point Name Net LONALON App Digital Output 1 nmviClaValue 1 Object Priority 230 Priority 255 When To Use Priority Levels This section describes three scenarios involving custom SmartServer 2 0 Web pages The first is an example where it is not necessary to use priority levels and the second and third provide examples where using priorities would be useful Scenario 1 No Priorities Used with Intemal Devicesand LON Vision Objects In this scenario a Scheduler with only one priority level and no schedule exceptions controls a light in a garden There is also a hardware switch outside the house that is connected to one of the Digital Inputs on the SmartServer and there is an image swapper object on a custom SmartServer 2 0 Web page The switch and the image swapper can both be used to control the light This scenario does not require priorities because all three objects are connected to the same data point on the garden light The Scheduler and the hardware switch are directly bound to the Digital input data point of the garden light device The image swapper controls the nvoClsValue data point on the Digital Input to which the hardware switch is connected and as previously described the nvoClsValue data point is bound to the Digital input data point on the garden light If a more complex Scheduler t
88. Viewing Data Points section in Chapter 8 Data Logging Data Log View The Data Log View object is a log that lists the data point updates recorded by a specific Data Logger on the SmartServer To use this object there must be one or more configured Data Loggers on your SmartServer See Chapter 7 of the i LON SmartServer 2 0 User s Guide for more information on adding and configuring a Data Logger using the SmartServer s built in Web pages To add a Data Log View object to your custom SmartServer 2 0 Web page follow these steps A 1 Click Edit on the Editor toolbar di or click the Layout tab 2 Click Insert and then select Data Log View 3 LON Vision 5 File Edit view MOS Format Table Help 7 HTML Elements a a cp X i E http 10 2 124 165 user Custom v e ad 8 Back Show Value Choose New Publish Discard A Text Field i Ei E Text Area a 9 PAX Browse A Layot Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Data Log View dialog opens ILON Vision 2 0 User s Guide 113 1 LOM Vision Object ad Data Log View Layer Left Width 200 Top Height 300 Z Index Presentation Lavaut Graph and table v Show Grid Default Language English Minimum Maximu
89. Vision graphics lamp folder on your computer choose a graphic of a lamp in the ON state and then click Select This graphic will be displayed when the Digital Output is enabled 14 Click OK to return to your custom Web page The lamp image you selected appears in the upper left hand corner of the Web page 15 Click the image so that a move icon and a solid black box appear on top and around the image respectively Click the move icon so that the box becomes red which indicates that the layer has been selected and then drag the layer to the middle of the window ILON Vision 2 0 User s Guide 23 _ 7 LON Vision t File Edit View Insert Format Table Help 022 Ja 7 Q 8 Back Reload Stop Choose New Publish Discard i gi A BTU E an 9 ty PAX Browse 9 Layout at Net LONALON App Digital Output aera EP I LAvviClaVale Wet LONALON App Digital Output el nvoClaValueFb_1 16 Click Publish on the Editor toolbar S click File and then click Publish or click the Browse tab to publish your custom Web page A dialog appears prompting you to confirm that you want to publish the changes you have made to your custom Web page 1 LON Vision Publish the changes Ask next time 17 Clear the Ask Next Time check box to prevent this dialog from appearing each time you try to publish a custom Web page Click Yes to publish your custom Web page Step 4 Linking a Custom Web Page to the SmartServer Home
90. Web page format When all the files have been converted click OK to close the Converting dialog 10 Verify that all data point names functional block indexes links and other objects are accurate Note You can manually upgrade custom e3 Web pages to the SmartServer 2 0 format one by one by simply opening editing and then publishing them instead of using the Convert Folder to Actual Format option If you are manually upgrading custom e3 Web pages you also need to manually convert the index htm and start htm files To do this open the Menu htm file in your Custom e3 directory click Format and then click Frameset The Frameset dialog opens and the settings in the Start htm file are loaded Click OK The data in the Start htm file is converted to the SmartServer 2 0 format The converted data is then transferred to the frameset htm file and the Start htm page is deleted The index htm file is also converted into the SmartServer format Adding i LON Vision Objects to your Custom Web Pages You can add 7 LON Vision objects to your custom Web pages for monitoring and controlling the data points on your SmartServer You can generally group the 7 LON Vision objects into the following categories Data Point Read Write objects Data point read write objects are simple tools for controlling and monitoring data points Controlling data points with these objects typically entails one click or a simple text entry You can also use these objects to m
91. Web pages by placing them in 7 LON Vision Layer objects This may be useful because when you add images to your custom Web pages they are added to the main layer of the Web pages and thus are difficult to move You can create a new Layer object and add a new image to it or you can move an existing image to a Layer object by cutting and pasting the image into the Layer The following sections describe how to add an image to a Layer using both of these methods Adding a New Image to a LayerObject To add an image to a Layer object follow these steps 1 Click Insert point to HTML Elements and then select Layer A Layer object is added to the upper left hand corner of Layout tab 3 LON Vision M File Edit View Insert Format Table Help lt lt Y Gj e A Y z http 10 2 124 165 user myCustom v ee ej Q X i Back Reload Stop Home Choose New Publish Discard 2 A BT U B aaa 2AM Browse Z Layout 2 Move the Layer object to an empty space in the Layout tab to simplify your Web design To do this click the Layer and then move the mouse pointer over the move icon on the upper left side of the object s layer so that the mouse pointer becomes a move tool amp Click the move icon so that the Layer becomes red and then drag the Layer to the desired location 3 Once you have moved the Layer click anywhere in the Layer so that the solid black box appears around the Layer 4 Click Insert point to HTML Elements and th
92. a Navigation object Navigation objects include the tree view in the Sidebar htm frame or the menu in the Menu htm frame If your Web design does not use a frameset typically you will add the link to a Link object however you can add it to an item in a Navigation object which should be located on your home page Linking to a Configuration Web Page from a Navigation Object You can link an item in a Navigation object to a built in SmartServer configuration Web page To add the link follow these steps 1 Verify that you have instantiated the application to which you are linking This means that if you want to link to a Scheduler s Configuration Web page you must have already added a Scheduler functional block to the SmartServer s internal automated system device 1 LON App iLON SmartServer 2 0 1 or other user defined name 2 If your Web design includes the Frameset object browse to the index htm Web page and then Click Edit on the Editor toolbar or click the Layout tab The Select Frame dialog opens Select the frame containing the desired Navigation object or the frame in which you want to add a new Navigation object the sidebar htm frame or the menu htm frame ILON Vision 2 0 User s Guide 183 184 _i LON Vision Y by e A M http 10 2 124 165 user myCustom index htm m ej f 5 Back Reload Home Choose New jg s SB 7 MX Browse 2 Layout Select Frame menuFrame http 10 2 124 165 user myC E sidebarFram
93. a SNVT switch data point In the Presentation property select the type of slider to be used Horizontal Slider the default Horizontal Slider 3D Knob Knob 3D Vertical Slider Vertical Slider 3D Gauge vuMeter The horizontal and vertical sliders are ideal for controlling lighting levels the knobs and vuMeter are ideal for controlling power levels the thermometer is ideal for controlling temperature setpoints and monitoring temperatures An image of the selected SVG Object appears in the Presentation box ILON Vision 2 0 User s Guide 85 86 i LON Vision Object E SVG object v L Jc zo m x 20 H B Index Thermo meter c Refresh Help 9 Optionally configure the following properties of the SVG Object Creating Custom SmartServer Web Pages Layer Max Age ILON Vision 2 0 User s Guide By default the Layer check box is selected This means that the SVG Object is embedded in a Layer object which lets you freely move the SVG Object in your custom Web page Clearing this check box means that you must position the SVG Object as you would any other HTML object This may be useful if you want to place the SVG Object in a table You can set the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the
94. a object has for writing updated values to the data point This value may range from 0 to 255 highest to lowest priority The priority you specify must be equal to or higher than the priority used by the last application that updated the data point If you set a priority that is less than priority used by the last application that updated the data point a red hand icon 72 appears to the left of the data point when you publish your custom Web page You will need to edit the page and enter a higher priority in this dialog to be able to write to the data point If you set a priority that is equal to or higher than that assigned to the last application or object that updated the data point a green hand icon 4 appears to the left of the data point Lower priority applications or objects can write to the data point when one of the following events occurs e The user clicks the green hand icon to unlock the data point temporarily reset the Text Area object s priority to 255 so that lower priority applications or objects can write to the data point When the user enters an updated value in the text field the Text Area object will have the data point locked again the priority returns to the value you specified e The lower priority application or object specifies a priority that is equal to or higher than the one you specified for the Text Area 53 Rows Cols Editable Insert Show Presets object For more information
95. adjust the amount of LAN WAN traffic that is generated by the custom SmartServer 2 0 Web page To change the poll rate used by a custom SmartServer 2 0 Web page follow these steps 1 Click Format and then click Page Title Properties The Page Properties dialog opens 120 Creating Custom SmartServer Web Pages 1 LOM Vision Page Properties Ed 2 Inthe Poll Interval box set how frequently in seconds that all the i LON Vision objects in your custom Web page poll the SmartServer s internal data server for data point updates If you do not specify a poll rate the default poll rate is 1 second Note You can set the frequency in which individual i LON Vision objects poll their specified data points by setting the Max Age property in the object s respective properties dialog 3 Click OK Adding Link Objects You can use the Link object to create an icon button or text that the user can click to access another Web page including a custom SmartServer Web on your local SmartServer or on another SmartServer To add a Link object to your custom SmartServer 2 0 Web page follow these steps A 1 Click Edit on the Editor toolbar elt or click the Layout tab 2 Click Insert and then select Link 7 LON Vision M File Edit view BGS Format Table Help H HTML Elements e F X M http 10 2 124 165 user myCustom Link htm Vv d 8 Back Show Value Choose New Publish Discard T Text Field i g 4 Te
96. ages 7 LON Vision 5 File Edit View Format Table Help vr Y E A Y E http 10 2 124 165 user Custom Menu htm 7 sl de ej if X 5 Back srd Reload Stop Home Choose New Edit a e e mm dee aput IH T MX Browse A Layout Read Write Objects Application Objects Image Swapper f JavaScript SVG Object You can read the following subsections to add a page title message box menu buttons and images to the menu frame in which your menu bar resides Adding a Page Title to the Menu Frame You can display page titles in all your custom Web pages by adding the Page Title object to the menu frame To add the Page Title object to the menu frame follow these steps 1 Name the page title as described in Changing the Page Title earlier in this chapter 2 In the Menu htm page Click Edit on the Editor toolbar c 3 Click Insert and then select Page Title 3 EON Vision File Edit View BOSS Format Table Help M HTML Elements a cH X 2 M http 10 2 124 165 user Custom Menu htm i Q 5 Back sd Show Value Choose New Publish Discard LN m Text Field Sd A L i Text Area any P Browse Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Application Objects Navigation
97. aligned vertically by default so that the first preset is on the top and each subsequent preset is lined up underneath but you can also align the buttons horizontally The following table lists the properties of the Radio Buttons object elon max length int The maximum number of radio buttons If you omit this property or the value specified is larger than the total number of presets or enumerations a single radio button with text label is built for each preset or enumeration CIORCIBHROL TOI Specifies whether the buttons are aligned vertically TRUE or horizontally FALSE Select Box Properties The Select Box object displays the current data point value as a preset in a read only text box if one is defined for the value If no preset is defined for the value the text box is blank The user can write to the data point or field by selecting a preset or enumeration from the attached list box The Select Box has no object specific properties ILON Vision 2 0 User s Guide 205 Check Box Properties The Check Box object displays a check box that represents the first preset defined for the data point when checked and the second preset defined for the data point when cleared The user can write to the data point by selecting or clearing the check box If the data point is set to a value not defined by a preset the check box is cleared The following table lists the properties of the Check Box object value def name checked string T
98. alog opens 168 1 LON Vision Object a Navigation Layer Left Width Top Height Z Index Default Language English Addressing Menu Orientation Horizontal Vertical Presentation C55 Class MainMenu MainMenuRoot Entries e rook cj WB Building BEDS UE New Item e New Item 2 Delete Move Down uk In then Icon property click Choose to open the Select File dialog select an image to represent the room and then click OK This example uses the House gif image in the web user demo images folder In the Label property enter a descriptive location For this example enter Room 1 for the first submenu item and enter Room 2 for the second submenu item Advanced SmartServer 2 0 Web Page Topics c Under Link select the custom SmartServer 2 0 Web page to be opened when the user clicks the submenu item To do this do one of the following 1 Inthe URL box under Destination enter the URL of the destination Web page or click Choose to open the Select File dialog browse to the htm file of the destination Web page click the htm file and then click OK li Inthe Target box you can select how the destination Web page is opened By default the destination Web page is opened in the application frame appFrame with the frameset preserved This enables your custom Web pages to appear in the application frame in the center of the frameset You can select one
99. amed lt CustomJavascriptClass gt js 4 Copy the lt CustomJavascriptClass gt js file to the web scripts iLonVisionExtensions folder on the SmartServer flash disk or to a subfolder in that directory l 5 Click Edit on the Editor toolbar di or click the Layout tab 6 Click Insert and then select Custom JavaScript 3 EON Vision 5 File Edit view I E Format Table Help HTML Elements a E pem d X E M E http 10 2 124 165 user Custom v E i Back Show Value Choose New Publish Discard E TE Text Field l i s d md Text Area a 9 PAX Browse P Layot Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 7 The Custom JavaScript dialog opens Creating Custom SmartServer Web Pages 1 LON Vision Object Custom JavaScript Layer Left Width Top Height Z Index Script E iLonvisionExtensions EchelonDecreaseE xample Data Points Max Age Custom Arqs 8 Inthe Script property select your lt CustomJavascriptClass gt js file 9 Select the data points to be monitored and controlled by the Custom JavaScript object following these steps a Click Add The Data Point Properties dialog opens 1 LON Vision Data Point Properties Data Point Settings b C
100. an the priority used by the last application that updated the data point If you set a priority that 1s less than priority used by the last application that updated the data point a red hand icon 72 appears to the left of the data point when you publish your custom Web page You will need to edit the page and enter a higher priority in this dialog to be able to write to the data point If you set a priority that is equal to or higher than that assigned to the last application or object that updated the data point a green hand icon 4 appears to the left of the data point Lower priority applications or objects can write to the data point when one of the following events occurs e The user clicks the green hand icon to unlock the data point temporarily reset the Text Field object s priority to 255 so that lower priority applications or objects can write to the data point When the user enters an updated value in the text field the Text Field object will have the data point locked again the priority returns to the value you specified e The lower priority application or object specifies a priority that is equal to or higher than the one you specified for the Text Field 47 Size Max Length Align Show Presets Force Round to Preset object For more information on using priorities see Using Data Point Priorities in Chapter 4 Enter the size of the text field in pixels Enter the maximum number of characters that
101. and then click Publish or click the Browse tab to publish your custom Web page Radio Buttons The Radio Buttons object provides radio buttons for each preset or enumerated value defined for a scalar data point or each enumerated value defined for a field within a structured data point The current value stored in the data point is indicated by the button that is selected The user can write to the data point by selecting one of the buttons To add a Radio Buttons object to your custom SmartServer 2 0 Web page follow these steps A 1 Click Edit on the Editor toolbar amp or click the Layout tab 2 Click Insert and then select Radio Buttons Creating Custom SmartServer Web Pages MS i LON Vision File Edt view BOSS Format Table Help 5 HTML Elements E amp j X z Y i http 10 2 124 165 user Custom v 7 B Back j Show Value Choose New Publish Discard Mi E Text Field m g x m Text Area a 9 amp X Browse P Layo Combo Box Image Swapper Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Radio Buttons dialog opens 1 LON Vision Object Data Point Feedback Settings Orientation Horizontal Vertical Use local presets Ed 4 Select the data point to be monitored by the Radio B
102. and you can select Deutsch German or Francais French You can localize this object and all the SmartServer Web pages into any one byte or two byte character language using either the demo version of the i LON SmartServer 2 0 Programming Tools included on the 1 LON SmartServer 2 0 DVD or using the full version on the 1 LON SmartServer 2 0 Programming Tools included on the i LON SmartServer 2 0 Programming Tools 140 Creating Custom SmartServer Web Pages DVD For more information on ordering the 1 LON SmartServer 2 0 Programming Tools DVD contact your Echelon sales representative For more information on localizing the language of the SmartServer Web pages see the i LON SmartServer 2 0 Programming Tools User s Guide 7 Click OK A Menu Button object is added to the left side of the menu frame unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 8 Repeat steps 2 7 to add the other button type Submit or Back to your menu frame Vertically align the buttons 7 LON Vision 5 File Edit View Insert Format Table Help 502 E i V s 5 Y Ss http 10 2 124 165 user myCustom Menu htm v 2 X E Back Reload Stop Home Choose New Publish Discard JM lot MIB P U a PAX Browse A Layout Read Write Objec 9 Click Publish on the Editor toolbar Ln click the Brows
103. ata point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General button above the navigation pane on the left side of the SmartServer Web interface and then click the data ILON Vision 2 0 User s Guide 65 8 point in the navigation pane The options for presets are located at the bottom of the Web page Optionally configure the following properties of the Image Swapper object Layer Max Age By default the Layer check box is selected This means that the Image Swapper object is embedded in a Layer object which lets you freely move the Image Swapper object in your custom Web page Clearing this check box means that you must position the Image Swapper object as you would any other HTML object This may be useful if you want to place the Image Swapper object in a table You can set the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to objects it overlaps with with 1 th
104. ations of the same language with the same regional version ILON Vision 2 0 User s Guide 179 180 ll nlsExample properties properties X LT ditor For ResaurceBundle nlsExample properties praperties New properties file Choose ar type a Locale Lang Country variant P Properties P Default E Mew 1 Click Create C C nlsExample es properties properties Eclipse SDK File Edit Refactor Navigate Search Project FPM Run Window Help T SP jj em rx E d gt ij 63 coy Gr sc Q Q 99 4 ue Ei Ay cict Fie CIC Projects 23 Navigator B To nisExample_es properties properties X Be Outline 25 E 7 Editor For ResourceBundle nlsExample amp es properties properties E S nis BB Default H fi ALARM P nlsExample properties ei TEMPERATURE P nlsExample es properties ALARM ei TEMPERATI LonMark Resource View 25 Spanish Server IP Address 10 2 124 53 amp amp 10 2 124 53 SEE Properties P Default P Spanish F New Problems 23 Console Properties D errors 0 warnings 0 infos Description Resource m Anew Page language REGION variant properties file is added to the C C Projects view and this file appears in the ResourceBundle Editor view In addition a box marked with the language you selected is added to the bottom
105. ave 18 Quick Start Exercise i LOM Vision Local Presets Preset OFF OM lt a new preset gt c Click OK to return to the Image Swapper dialog 7 Select the image to represent the nviClaValue 1 state data point when it is OFF following these steps a Inthe Images list in the lower part of the Image Swapper dialog select OFF and then click Select The Select File dialog opens b Browse to the Desktop C LonWorks iLON iLonVision graphics switch folder click a graphic of a switch in the OFF position and then click OK This graphic will be displayed when the data point is set to OFF and the Digital Output is disabled Because the Switchable check box is selected you can click the graphic to enable the Digital Output from your custom SmartServer 2 0 Web page This example uses the switchDownOff gif graphic ILON Vision 2 0 User s Guide 19 1 LON Vision Object Image Swapper Layer Data Point Mame Met LOMJILOM App Digital Output 1 nviclavalue 1 Real Alias Prog Format 0000000000000000 0 SNYT_switch state Const Fields Feedback Settings Switchable Force round to preset Images Preset Value Image z default gt ON 1 OFF CiiLonWorks Lanvisionlaraphics switch switchbownOff af o M Select Delete Move Up Note 7 LON Vision 2 0 includes switch graphics that are based on both European and American switches 8 Select the image to represent the nviClaValue 1 sta
106. ayer to the desired location Once you have moved the Layer click anywhere in the Layer so that the solid black box appears around the Layer Click Insert point to HTML Elements and then select Image The Image Properties dialog opens Click Choose to open the Select File dialog browse to and select the desired image and then click OK to return to the Image Properties dialog This example uses the Standard jpg image in the web user demo images folder on your SmartServer flash disk Image Properties Location Dimensions Appearance Link Image Location fuser fdemosimages Standard jpg Image Preview Actual Size Width 890 Height 57 Advanced Edit 6 Click OK to return to the Layout view The selected image appears in the Layer Creating Custom SmartServer Web Pages 4 LON Vision EE M Fille Edit View Insert Format Table Help e R i e X M kay e A gt amp http 10 2 124 165 user myCustom Menu htm v Zj 5 Back Forward Reload Stop Home Choose New Publish Discard JM gt ALB IU PAX Browse A Layout POwERED Bv amp ECHELON LU hull hil M Read Write Objects 1 Application Objects 7 Optionally you can re size the Layer to fit the image 8 Click the move icon so that the box becomes red and then drag the Layer to the desired location within the Menu frame CER 7 LON Vision A File Edit View Insert Format Table Help v
107. b If you have not added a Navigation object menu or tree to the frame you opened click Insert select Navigation and select the appropriate object for the frame you opened Menu for the menu frame Tree for the sidebar frame in the Navigation dialog 4 Create an item in the menu or tree representing a building or a floor and two submenu items that represent rooms in the building or on the floor To do this click the root icon and then click Add and then click the New Item and click Add twice 1 LON Vision Object Layer Left Width Top Height Z Index Tree d Auto Tree Default Language Engish Addressing O Menu Orientation Presentation Entries amp root L e Mew Item e Mew Item 2 pete uk 5 Configure the New Item subtree To do this click the New Item subtree and then click Edit The Navigation Subtree dialog opens a In then Icon property select an image to represent the building or floor This example uses the House gif image in the web user demo images folder b In the Label property enter a descriptive name such as Building or Floor ILON Vision 2 0 User s Guide 167 C 1 LON Vision Object Navigation Subtree Presentation Icon luser demoJfimages Hour Choose Label Building Click OK to return the Navigation dialog 6 Configure the submenu items For each submenu item click the item and then click Edit The Navigation Link di
108. b page opens onon S ECHELON MENERESECN WI ERECTO m E l2 J Back READ WRITE OBJECTS APPLICATION OBJECTS You can use these custom Web nanac to c3mnla the read write Zb Data Point View I provided home Application Objects o Data Logger View ion toolkit EJ Scheduler Building D DP Substitution Combo Box D DP Substitution Show Value gt DP Substituiton Building Example Designing the Copynght Frame Once you have created your home page and formatted the Frameset object you can open the Copyright htm file and modify the default copyright notice in the frame Opening the Copynght htm File To open the Copyright htm file that was created when you added the Frameset object to your home page and published your home page follow these steps 1 Click Choose on the Editor toolbar The Select File dialog opens ILON Vision 2 0 User s Guide 153 2 Browse to the root web lt Custom gt directory on the SmartServer flash disk 3 Select the Copyright htm file and then click OK to return to the Browse tab A 4 Click Edit on the Editor toolbar fi or click the Layout tab Alternatively you can open the Copyright htm file from the index htm file that was created when you formatted the Frameset object on your home page and published your home page To do this follow these steps 1 Click Choose on the Editor toolbar jm The Select File dialog opens 2 Browse to the root web lt C
109. be assigned to the data point you have selected elon align string Specify Left or Right to align the data point value in the text field Text Area Properties The Text Area is the same as the Text Field object but it allows multiple lines The following table lists the properties of the Text Area object rows HTML attribute The number of rows of in the text area Each row displays the value of the data point after a recent update For example if you specify 5 the text area displays the last five values written to the data point cols HTML attribute The maximum number of characters the text field can display You should make sure this is large enough to display the values that could be assigned to the data point you have selected elon prepend boolean Specify whether the most recent data point updates are listed at the top elon append boolean elon prepend TRUE or the bottom elon append TRUE of the text area The default is bottom 204 I LON Vision 2 0 API Combo Box Properties The Combo Box displays the current data point value either as a preset if defined for the data point or as a raw value in the text box and it lists the presets defined for the data point in the attached list box You can write to the data point or field by entering a value in the text box or selecting one of the presets defined for the data point from the list box The following table lists the properties of the Combo Box object elon si
110. be useful if you want to place the NLS Text object in a table You can set the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to objects it overlaps with with 1 the default being in the back and higher values being in front When positioning the NLS Text object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects 5 In the Key property enter a descriptive placeholder that identifies the type of text string to be provided This placeholder will be replaced with the text string that you provide for it in the properties file ILON Vision 2 0 User s Guide 173 174 1 LON Vision Object NLS Text Layer Left Width 200 Top Height 300 Z Index Settings Kev TEMPERATURE bal Click OK The NLS Text object is added to your custom SmartServer 2 0 Web page By default the object is positioned in
111. bjects it overlaps with with 1 the default being in the back and higher values being in front When positioning the Radio Buttons object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects Set the maximum period of time in seconds that the value of the data point is cached before the Radio Buttons object receives updated values This enables you to control the amount of traffic that is generated on a specific channel by the object The SmartServer compares the Max Age value of the Radio Buttons object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is 71 72 Wri
112. by e e Y E http 10 2 124 165 user myCustom Menu htm v e 4 Q x 8 Back Forward Reload Stop Home Choose New Publish Discard a uL ALR I U a 9 5 28 Browse Layout powerep By S ECHELON z Application Objects 9 Repeat steps 1 8 to add additional images to the menu frame 10 Click Publish on the Editor toolbar S click the Browse tab or click File and then click Publish to save the current draft of your menu frame The images you added appear in the menu frame Designing the Sidebar Frame Once you have created your home page and formatted the Frameset object you can open the Sidebar htm file and then design the sidebar frame by adding the Navigation object tree or vertical menu to it The tree object provides a hierarchal list of items and subitems that the user can click to open custom Web pages The vertical menu provides one or more buttons that the user can click to open custom Web pages ILON Vision 2 0 User s Guide 143 144 Opening the Sidebar htm File To open the Sidebar htm file that was created when you added the Frameset object to your home page and published your home page follow these steps Click Choose on the Editor toolbar I The Select File dialog opens L 2 Browse to the root web lt Custom gt directory on the SmartServer flash disk 3 Select the Sidebar htm file and then click OK to return to the Browse tab 4 Click Edit on the Editor toolbar cdi or click the Layou
113. cal Menu to the Sidebar Frame Designing the Copyright Frame cccccccsssssesesceeeeseseeseeeeeeeeeseaeeeeees Opening the Copyright htm File eeeeseeeeseeeeeene Changing the Copyright Message eeeeeeeeeeeeenne Advanced SmartServer 2 0 Web Page Topics Data Point Status and Priority ICONS 2c i ien Ae ete eo uec iuh Using DatadPolntErorllles zrec nna oai sitom Pos ai ded bo aes HOLY Level EXSImIpIO us sexessibe ea la tanat aa ipa cuubcamatel intem ascet d camions Rod ra cu When To Use Priority Levels c csscccccccsseseeeeceesseceseeseeeeesseaeeeess Scenario 1 No Priorities Used with Internal Devices and PEON VISION OD OCIS sa naa N ra Scenario 2 Priorities Used with Internal Devices and WEG MISIOMODICCIS os EE OT Scenario 3 Priorities Used with Internal Devices I LON Vision Objects and External Devices Using Data Point Substitution Tags eeeeeeeseeeeeeeeeeeeee Adding Placeholder Values to a Data Point Name Specifying Substitution TaS assa A A Using Me NLS TEX ODC nrm eet ud ea M pc d Dr ia Eb per p es Opening SmartServer Applications from Custom Web Pagges Linking to a Configuration Web Page from a Navigation Object Linking to a Configuration Web Page from a Link Object
114. cated near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix o The virtual data points on the 1 LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page Creating Custom SmartServer Web Pages d Expand the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure e Click OK to return to the Select Box dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Format property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used
115. ccseeeeceeecseseeeeeeeaeeeeeeeseeeeeeeeeseeneeeneeeas 205 Select Box Properties hcnni a e 205 Gheck Box Properties eise tese testa xsn a aint ied 206 Custom JavaScript Properties ccccccccssesseececeeeeeeeeeeeeeeeesseaeseeeeeeees 206 Data Point View Properties cccccccsseeeeceesseeceeeseeeseseessenseesseseeeens 206 Data Log View Properties ccccccceccsseeeeceesseeceeseeesesseecsasseesseseeeees 206 Scheduler Propero Sanssi e e a e 207 Alarm Notifier Properties cccccccsssceceseeeeeeeeseeeeseeeeeseseeessaseesesaeess 208 ILON Vision 2 0 User s Guide Vi Preface i LON Vision 2 0 is a standalone Web publishing tool that you can use to create custom Web pages for monitoring and controlling the data points on your SmartServer 2 0 Preface Purpose This document describes how to create custom Web pages for monitoring and controlling LONWORKS networks and other control networks Audience This guide is intended for system designers and integrators with an understanding of control networks Hardware Requirements Requirements for the running the 7 LON Vision 2 0 software are listed below Microsoft Windows Vista or Microsoft Windows XP Echelon recommends that you install the latest service pack available from Microsoft for your version of Windows Intel amp Pentium III 600MHz processor or faster and meeting the minimum Windows requirements for the selected version of Windows
116. cludes all custom SmartServer 1 0 Web pages previously built with 1 LON Vision 1 0 and Contribute CS3 CS4 and custom i LON e3 Internet Server Web pages previously built with 1 LON Vision 1 0 and Contribute 3 0 3 1 CS3 CS4 Upgrading SmartServer 1 0 Web Pages to SmartServer 2 0 Pages To automatically upgrade all existing custom SmartServer 1 0 Web pages within a folder on your SmartServer flash disk to the SmartServer 2 0 format follow these steps d 2 3 5 Click File and then click Convert Folder to Actual Format The Select Folder dialog opens Select the folder on your SmartServer containing the custom SmartServer 1 0 Web pages to be upgraded and then click OK The Converting dialog opens and the custom Web pages in the selected folder are upgraded to the SmartServer 2 0 Web page format When all the files have been converted click OK to close the Converting dialog Upgrading e3 Web Pages to SmartServer 2 0 Pages To automatically upgrade all existing custom 7 LON e3 Internet Server Web pages within a folder on your SmartServer flash disk to the SmartServer 2 0 format follow these steps 32 Creating Custom SmartServer Web Pages 9 Follow the steps described in Migrating an e3 Network Configuration to the SmartServer in Chapter 3 of the i LON SmartServer 2 0 User s Guide to perform the following tasks a Copy the root config and root ItConfig folders on the flash disk of your i LON 100 e3 server to the SmartSer
117. create edit and delete exceptions to the daily schedule create separate schedules for individual days and change the days for which a daily schedule is applicable and create and edit exception groups In addition the user can click a date in the yearly calendar to open the Configure yyyy mm dd dialog The user can then add edit and delete the events scheduled for that date For more information on using exception schedules and creating events for them see the Creating the Exception Schedule section in Chapter 7 Scheduling 7 If you selected Year in step 5 select the method used to determine which week in January is labeled week 1 under the Wk column You have the following three options e ISO Week is based on ISO 8601 This is the default e Week of Jan Ist The week containing January 1 is labeled Week 1 e First Full Week The first week in January containing seven dates that all fall in the month is labeled Week 1 8 Inthe Week Start property select the first day to be shown in the weekly or yearly calendar The default first day of the week is Sunday 9 If you selected Year in step 5 and you do want week numbers to be shown on the yearly calendar clear the Show Week Number check box This check box is selected by default 10 If you selected Year in step 5 select the maximum number of months displayed on the calendar at one time by adjusting the Max Number of Columns and Max Number of Rows properties By default th
118. ctured data point 8 Click OK The Combo Box object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 9 Click Publish on the Editor toolbar click File and then click Publish or click the Browse tab to publish your custom Web page Image Swapper You can use the Image Swapper object to add dynamic images representing the presets defined for the data point When the data point is set to the value defined for the preset name the image specified for that data point preset appears on the Web page Optionally you can configure the Image Swapper object so that the user can write to the data point by clicking the image on the Web page To add an Image Swapper object es to your custom SmartServer 2 0 Web page follow these steps ILON Vision 2 0 User s Guide 61 1 Click Edit on the Editor toolbar 4 or click the Layout tab 2 Click Insert and then select Image Swapper t Adobe Contribute CS3 Image Swapper htm File Edit View Bookmarks Insert Format Table Help Z9 Publish 5 Send for Review H Save for Later Discard Draft Normal v Default Font 16 v B 7 lt ilon EX Properties x Link Image Tab
119. d enter the name of the custom argument This case sensitive name must match the name you specified for the custom argument in your custom JavaScript class js file ILON Vision 2 0 User s Guide 103 104 b C d e In the Value field set a valid value to be associated with the specified key Click Save The key value pair is added to the box iLon Object Custom Argument Values ky S a new key To create additional key value pairs for the remaining custom arguments in your JavaScript code click a new key and then repeat steps a c Using the previous example you would create values for the UPPER LIMIT and LOWER LIMIT custom arguments iLon Object Custom Argument Values UPPER LIMIT 78 LOWER LIMIT BS Click OK to return to the Custom JavaScript dialog Creating Custom SmartServer Web Pages The complete custom argument example creates two buttons that you can use to increment and decrement the value stored in a data point It creates text that displays the current value stored in the data point text that displays the data point format and a span that displays the name of the data point The value and format of the data point are colored differently based on whether the data point has exceeded the upper or lower limits specified by the custom arguments For a SNVT temp f US data point the UPPPER LIMIT custom argument has been defined as 78 F and the LOWER LIMIT custom argument ha
120. d off The three users are as follows ILON Vision 2 0 User s Guide 159 e Aconference room user that has a Web page to control the lighting in the conference room where they are The Combo Box object in the user s Web page has a priority of 240 e A caretaker that has a Web interface for centrally controlling the lighting in all the conference rooms in the building The Combo Box object in the caretaker s Web page has a priority of 240 e A technician that has a Web interface for turning the lights on and off in the conference rooms The Combo Box object in the technician s Web page has a priority of 230 It has the highest priority because the technician needs to make sure that the electricity is not switched on when working on the lights Initially the lights are turned on in the conference room all the Combo Box objects on the users respective Web pages have write access to the data point and the priority assigned to the data point is 255 the default User Page 100 0 1 v Data Point Name Net LONALON App Digital Output 1 miClaValue 1 Object Priority 240 Priority 255 Caretaker Page 100 0 1 v Data Point Name Net L ONALON App Digital Output 1 miClaValue 1 Object Priority 240 Priority 255 Technician Page 100 0 1 v Data Point Name Net L ONALON App Digital Output 1 maiClaValue 1 Object Priority 230 Priority 255 The technician turns the lights off in the conference room using the Combo Box object on their W
121. d then click the data point in the navigation pane The options for presets are located at the bottom of the Web page Optionally configure the following properties of the Check Box object Layer By default the Layer check box is selected This means that the Check Box object is embedded in a Layer object which lets you freely move the Check Box object in your custom Web page Clearing this check box means that you must position the Check Box object as you would any other HTML object This may be useful if you want to place the Check Box object in a table You can set the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to objects it overlaps with with 1 the default being in the back and higher values being in front When positioning the Check Box object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects
122. data point and a span that displays the name of the data point and the current value stored in it Observe that the UCPTvalue index LonFormat property is set to 540000000000000000 0 SN VT switch in order to write to the SNVT switch point as a single entity Also observe that the structured values to be written to the data point are written as strings Net LONALON App Digital Output l nviClaValue 1 750 1 function SetValues struct argOb j ILON Vision 2 0 User s Guide 97 this update function type item if type Dp_Data m spanValue innerHTML item UCPTvalue 0 get m spanName innerHTML item UCPTname get m myDp item var handleOff function setOff m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 use preset to write to DP m myDp UCPTvalue 0 set OFF m sso Write m myDp var handleLow function setLow i m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m myDp UCPTvalue 0 LonFormat set 0000000000000000 0 SNVT switch m myDp UCPTvalue 0 set 25 0 1 m sso Write m myDp var handleMedium function setMedium m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m myDp UCPTvalue 0 LonFormat set 0Q000000000000000 0 SNVT switch m myDp UCPTvalue 0 set 50 0 1 m sso Write m myDp var handleHigh function setHigh m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m myDp UCPTvalue 0 LonFormat set 0000000000000
123. dding a Message Boxto the Menu Frame You can add message boxes to all your custom Web pages by adding the Message Box object to the menu frame The message box displays error and warning messages related to the custom Web page The error or warning is signified by an alarm bell and an informative message describing the error or warning For errors the alarm bell and message text are red for warnings they are orange The user can click the alarm bell to display an error log This log lists all the errors and warning that have occurred since the user opened the custom Web page or refreshed the browser To add the Message Box object to the menu frame follow these steps f 1 Inthe Menu htm page click Edit on the Editor toolbar amp or click the Layout tab 2 Click Insert and then select Message Box 138 Creating Custom SmartServer Web Pages 7 LON Vision H Fie Edit view OSS Format Table Help i HTML Elements 3 3 j X i V i http 10 2 124 165 user myCustom Menu htm v Sd 8 Back ard Show Value Choose New Publish Discard x Text Field im Zz LAs Text Area amp X Browse P Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript 2 hi Navigation Page Title Message Box Menu Button 3 The Message Box Edit dialog
124. descriptive placeholder for the customArgs property of the reference The following code sample demonstrates how to use custom arguments in your JavaScript code In this example the value and format of the data point are colored differently based on whether the data point value has exceeded the upper and lower limits specified by the custom arguments function CustomArgsExample argOb j this update function type item if type Dp_Data M span cnnermrMLb zte em UCPIDamesgetit m_text innerHTML item UCPTvalue 0 get m textl format innerHTML item UCPTvalue 0 Unit get m myDp item Creating Custom SmartServer Web Pages if m text innerHTML m myArgs UPPER LIMIT m_text style color red m textl format style color red else ar m text innerHTML m myArgs LOWER LIMIT m_text style color blue m textl format style color blue else m text style color green m Textil toOrmat s ty le color green j var m myArgs argObj customArgs 2 Create a new custom JavaScript object and select the data point to be monitored and controlled by it following steps 5 9 in the previous Custom JavaScript Object section 3 Click Edit in the Custom Args box 4 The Custom Argument Values dialog opens iLon Object Custom Argument Values E3 LLL LuxJ a new key 5 Create values for the custom arguments following these steps a Inthe Key fiel
125. dit Web pages from an i LON SmartServer To edit a Web page follow these steps 1 Browse to the Web page 2 Clickthe Edit button or click the Layout tab Create a New Web Page To create a new Web page click the New button gual English 10 Quick Start Exercise 2 Inthe language box at the bottom left hand corner select the language to be used for the SmartServer Web interface You can use 1 LON Vision 2 0 in English the default German and French 3 Click Manage Connections in the Sites pane on the left side or click File and then click Site Manager The Site Manager dialog opens 1 LON Vision Site Manager LLON Address Comment a Cem C 4 Click New Site The Edit Site dialog opens 1 LON Vision Edit Site LLON Address Comment HTTP Port leave empty for default HTTP User DOO O HTTP Password FTF Port eave empty For default o O FTF User FTF Password 5 Enter the following information i LON Address Enter the IPv4 address of your SmartServer Comment Optionally enter a description of the SmartServer or any other text HTTP Port If you are using an HTTP port on the SmartServer for serving SOAP and WebDAV requests other than the default port 80 enter the port HTTP User Enter the user name for logging in to your SmartServer via HTTP The default user name is ilon HTTP Password Enter the password for logging in to your SmartServer via HTTP The default user nam
126. e http 10 2 124 165 user m appFrame http 10 2 124 165 user myCu copyrightFrame http 10 2 124 165 userJ E o Read Write Objects 9 Q Application Objects amp Building amp amp DP Substitution Combo Box DP Substitution Show Value amp Z DP Substituiton Building Examp EJ Scheduler E If your Web design does not use a frameset you can browse to the Web page containing the desired Navigation object or the frame in which you want to add a new Navigation object typically your home page and then click Edit on the Editor toolbar or click the Layout tab If the frame or Web page already has the desired Navigation object either double click the Navigation object right click the object and then click Object Properties on the shortcut menu or click the Navigation object click Edit and then click Object Properties If the Web page does not have the Navigation object click Insert and then select Navigation In the Navigation dialog select the type of Navigation object you are creating Tree the default or Menu In the Navigation dialog click the root icon and then click Add A New Item is added below the root icon Click the New Item and then click Edit The Navigation Link dialog opens In the Icon property under Presentation add an icon corresponding to the built in application to which the item links To do this click Choose to open the Select File dialog browse to the root imag
127. e Click OK to return to the SVG Object dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Format property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US Diff or append one of these formats to the data point name if no format is specified Optionally if you selected a field within a structured data point you can set constant values to be written to one to all of the other fields in the data point automatically when a value is written to the selected field This ensures that the other field or fields in the structured data point are set to specific values whenever the SVG Object is used on the selected field Using a SNVT switch data point for example you can have SNVT switch state be set to 1 each time a value is written to SNVT switch value To set constant values for the other fields in a structured data point follow these steps a Click Const Fields The Constant Fields dialog opens b The data point field you selected in step
128. e and then click Publish to save the current draft of the copyright frame 4 Optionally you can link a legal notice to your copyright To do this create a new Web page for your legal notice In the copyright frame highlight your copyright text click Insert point to HTML Elements and then click Link 5 In the Link Location property click Choose to open the Select File dialog Browse to and select the Web page containing your legal notice Web page and then click OK Link Properties Link Text 2009 Echelon Corporation Link Location Enter a web page location or select a Named Anchor ar Heading From the popup list egalMatice htm URL is relative to page location Target Advanced Edit 6 Click Publish on the Editor toolbar Ln click the Browse tab or click File and then click Publish 7 Click your copyright in the copyright frame at the bottom of the index htm Web page to verify that your legal notice appears in the application frame ILON Vision 2 0 User s Guide 155 READ WRITE OBJECTS APPLICATION OBJECTS i LON SmartServer Custom Web Pages Q Read Write Objects MAc TE Loge tes Q Application Objects 92007 Echelon Corporation Echelon LON LONWORKS Digital Home LonBuilder LonManager LNS LonTalk LonUsers Neuron 3120 3150 NodeBuilder LonPoint i LON LonMark the LonMark Logo and the Echelon logo are trademarks of Echelon Corporation registered in the United States and other countrie
129. e calendar displays 12 months using 3 columns and 4 rows Months are displayed contiguously over the specified number of columns The maximum number of columns that can be displayed in the yearly calendar is 3 11 In the Default Language property select the language in which the property headers on the Scheduler object are displayed The default language is English and you can select Deutsch German or Francais French You can localize this object and all the SmartServer Web pages into any one byte or two byte character language using either the demo version of the i LON SmartServer 2 0 Programming Tools included on the 1 LON SmartServer 2 0 DVD or using the full version on the 1 LON SmartServer 2 0 Programming Tools included on the i LON SmartServer 2 0 Programming Tools DVD For more information on ordering the 1 LON SmartServer 2 0 Programming Tools DVD contact your Echelon sales representative ILON Vision 2 0 User s Guide 117 For more information on localizing the language of the SmartServer Web pages see the i LON SmartServer 2 0 Programming Tools User s Guide 12 Click OK The Scheduler object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties Drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 13 Click Publish on the Editor to
130. e default being in the back and higher values being in front When positioning the Image Swapper object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects Set the maximum period of time in seconds that the value of the data point is cached before the Image Swapper object receives updated values This enables you to control the amount of traffic that is generated on a specific channel by the object The SmartServer compares the Max Age value of the Image Swapper object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is Creating Custom SmartServer Web Pages Write Pri
131. e is ilon ILON Vision 2 0 User s Guide 11 FTP Port If you are using an FTP port on the SmartServer other than the default port 21 enter the port FTP User Enter the user name for logging in to your SmartServer via FTP The default user name is ilon FTP Password Enter the password for logging in to your SmartServer via FTP The default user name is ilon 1 LON Vision Edit Site i LOM Address Comment HTTP Part leave empty For default FEE FTP Port leave empty For default Ps FTP Password _ 7 LON Vision L File Edt View Help 2302 LEET M S gt aboutiillonvision v FaN E Forward Reload Stop Home Choose New E e y WES OW oM enne uso gH i Wb s x AJB I A E E S ES a Sin Browse Lycee i LON Vision Browse to a Web Site Sites You can use i L ON Vision 2 0 to browse to any Web page To browse to a Web page do one of the following e 102 124 179 e Click a link to navigate to a VVeb page e Enter a URL into the Address bar e Select a page from the browse history Edit a Web Page You can edit Web pages from an i LON SmartServer To edit a Web page follow these steps 1 Browse to the Web page 2 Clickthe Edit button or click the Layout tab Create a New Web Page To create a new Web page click the New button die English v Step 2 Creating a Custom SmartServer Web Page To create a new custom SmartServer 2 0 Web page follow these steps F 1 Click t
132. e tab or click File and then click Publish to save the current draft of your menu frame The Submit and or Back buttons appear in your menu frame 7 LON Vision 5 File Edit View Help 10 TEE E Y sy Y http 10 2 124 165 user myCustom Menu htm v 2 d a 5 Back Reload Stop Home Choose New Edit dca AK Browse 2 Layout Read Write Objects Application Objects i LON SmartServer 2 0 Custom Web Pages Adding Graphicsto the Menu Frame You can customize the appearance of the menu frame by adding graphics to it You can add a company logo background images representing your industry and other images and they will appear in the menu frame of all your custom Web pages Before you add an image to your menu frame you should add a Layer object and insert the image into the Layer object so that you easily move the image to the desired position within the menu frame To add images to the menu frame follow these steps 1 Click Insert point to HTML Elements and then select Layer A Layer object is added to the upper left hand corner of Layout tab 2 Move the Layer object to an empty space in the Layout tab to simplify your Web design To do this click the Layer and then move the mouse pointer over the move icon on the upper left side of ILON Vision 2 0 User s Guide 141 142 the object s layer so that the mouse pointer becomes a move tool Click the move icon so that the Layer becomes red and then drag the L
133. e the read write and Room 1 application objects provided by the esie i LON Vision toolkit 9 Test your data point substitution tags To do this click or expand the Building or Floor menu item and then click the Room 1 and Room 2 submenu items Observe that clicking the switch graphic in Room toggles the Digital Output relay and lights and turns off the Digital Output 1 LED and that clicking the switch graphic in Room 2 toggles the Digital Output 2 relay and lights and turns off the Digital Output 2 LED powerep BY S ECHELON READ WRITE OBJECTS APPLICATION OBJECTS Data Point Substitution Example Image Swapper Read Write Objects Q Application Objects Data Point Name Net LLONALON App Digital Output 1 nmviClaValue 1 Building Value 100 0 1 Room 1 Status AL NO CONDITION Room 2 Priority 255 Data Point Name Net LON ALON App Digital Output l nvoClaValueFb 1 Value 100 0 1 Status AL NO CONDITION Priority 255 ILON Vision 2 0 User s Guide 171 powerep BY ECHELON hs A N X READ WRITE OBJECTS APPLICATION OBJECTS Data Point Substitution Example Image Swapper Read Write Objects amp amp Application Objects Building Room 1 Room 2 Data Point Name Net LONALON App Digital Output 2 nviClaValue 2 Value 0 0 0 Status AL NO CONDITION Priority 255 Value 0 0 0 Status AL NO CONDITION Prio
134. eb page As a result a Manual Override icon appears next to the Combo Box object in the technician s Web page indicating it has write priority to the data point Locked icons appear next to the objects in the user and caretaker Web pages and the objects are disabled This means that the conference room user and the caretaker no longer have write access to the lighting The priority currently assigned to the data point is 230 User Page 2 n Data Point Name NetLONALON App Digital Output 1 nviClaValue 1 Object Priority 240 Priority 230 Caretaker Page 2 Data Point Name Net LONALON App Digtal Output 1 maClaValue 1 Object Priority 240 Priority 230 Technician Page 2 00 v Data Point Name NetLLONALON App Digital Output 1 maClaValue 1 Object Priority 230 Priority 230 The technician clicks the Manual Override icon 77 next to the Combo Box object on their Web page to release its lock on the data point The Combo Box objects in the Web pages of the conference room user and the caretaker are enabled and the Lock icons no longer appear next to them This means that the conference room user and the caretaker once again have write access to the lighting The priority assigned to the data point is reset to 255 the default 160 Advanced SmartServer 2 0 Web Page Topics User Page 0 0 0 v Data Point Name Net LONALON App Digital Output 1 nviClaValue 1 Object Priority 240 Priority 255 Caretaker Page 0 0 0 v Data
135. eckbox SVG Object svgcontrol Custom JavaScript generic Data Point View ViewDataPoints Data Log View UFPTdataLogger View Scheduler SCHEDULER YEAR or SCHEDULER WEEK Alarm Notifier UFPTalarmNotifier Summary View or UFPTalarmNotifier History View i LON Vision 2 0 API elon name The key to a specific data point or application instance elon alias name l l l z m For data points you can provide elon name and specify the data point s UCPTname property network channel device functional blockldata point or you can provide elon alias name and provide the data point s alias name You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page For application instances Scheduler Data Logger or Alarm Notifier you can provide elon name and specify the functional block s UCPTname property network channel device functional block elon name arr If the object is able to display multiple data points the data points are defined inside an elon name arr array This array contains either an array of strings or an array of objects if parameters are required for each data point elon feedback name All objects providing a user int
136. ect instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to objects it overlaps with with 1 the default being in the back and higher values being in front When positioning the Select Box object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects Set the maximum period of time in seconds that the value of the data point is cached before the Select Box object receives updated values This enables you to control the amount of traffic that is generated on a specific channel by the object e The SmartServer compares the Max Age value of the Select Box object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s
137. ect and then click Object Properties on the shortcut menu or click the object click Edit and then click Object Properties Adding i LON Vision Objects to a Layer You can move an i LON Vision objects to a different Layer This may be useful if you want to place and align multiple objects in the same Layer To do this follow these steps 1 Click the LON Vision object to be moved so that the object is highlighted blue 190 Advanced SmartServer 2 0 Web Page Topics 7 LON Vision M File Edit View Insert Format Table Help M E e A Y z http 10 2 124 165 user myCustom v E ej Q X 8 Back Reload Stop Home Choose New Publish Discard N z A B 7 i GD 2AM Browse P Layout 2 Click Edit and then click Cut or press CTRL X Delete the Layer previously containing the object being moved 4 Click the destination object and then click any space inside the Layer green box if layers are displayed below the object blue box if layers are selected 7 LON Vision H File Edit View Insert Format Table Help by A amp httpi 10 2 124 165 user myCustom Oo g amp EA Q X 5 Back Reload Stop Home Choose New Publish Discard jJW 4 e AIB 7 U GCE 2x Browse A Layout w hil m Mi ON OFF Net LONALON App Digital Output Note To display layers in the Layout tab click File and then click Preferences In the Preferences dialog select the Show Layers check box and then c
138. en select Image The Image Properties dialog opens ILON Vision 2 0 User s Guide 193 5 Click Choose to open the Select File dialog browse to and select the desired image and then click OK to return to the Image Properties dialog Image Properties Location Dimensions Appearance Link Image Location limages iLOM smartserver gif Don t use alternate text Image Preview Actual Size ON Sinantsenver width 247 Height 40 Advanced Edit 6 Click OK to return to the Layout view The selected image appears in the Layer LLON Vision t File Edit View Insert Format Table Help i bj x A gt E http j10 2 124 165 user myCustom 5 Back Reload Stop Home Im 2 ABZ U i 9 PAX Browse P Layout LON SmartServer Choose New Publish Discard lini li m wi 7 Re size the Layer object containing the image and then move the Layer to the desired position within the custom Web page 8 Tooverlap the Layer containing the image with other Layers click the Layer so that a black box and move icon appear on the Layer box click the move icon so that a red box appears around the Layer and then right click the Layer and select Advanced Properties on the shortcut menu In the Advanced Property Editor dialog click the Inline tab click the Z index property modify the Z index property and then click OK 194 Advanced SmartServer 2 0 Web Page Topics Advanced Property Editor Current attr
139. ently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Creating Custom SmartServer Web Pages Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigation pane c Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block data point This is the default e Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with
140. erface to a single data point or one of its elon feedback alias name fields offer the optional parameter elon feedback name or elon feedback alias name respectively If you provide this parameter the object displays data from the data point specified as a feedback while changes are written to the data point given in elon name or elon alias name respectively You should only specify a feedback data point if it is bound to the data point specified in elon name or elon alias name via device hardware a LONWORKS connection or a Web connection After you write to the data point the object is disabled until its feedback data point reports a change elon lang string For all application objects Data Point View Data Logger View Scheduler or Alarm Notifier specify the language in which the object is displayed The default language is English en and you can enter German de French fr or the language code corresponding to the one byte or two byte character language to which you have translated the application object You can perform language localization for the application objects using either the demo version of the 7 LON SmartServer 2 0 Programming Tools included on the 7 LON SmartServer 2 0 DVD or using the full version on the i LON SmartServer 2 0 Programming Tools included on the i LON SmartServer 2 0 Programming Tools DVD For more information on ordering the 7 LON SmartServer 2 0 Programming Tools DVD contact your Echel
141. ersion Advanced SmartServer 2 0 Web Page Topics b Start the i LON SmartServer 2 0 Programming Tool To do this click Start point to Programs point to Echelon i LON SmartServer 2 0 Programming Tools and then click i LON SmartServer 2 0 Programming Tools The i LON SmartServer 2 0 Programming Tool opens c Create anew nls project To do this click File point to New and then click Project The New Project dialog opens Click Next In the Project Name box enter nls and then click Finish An nls folder is added to the C C Projects view This means that an nls folder has been created in the LonWorks iLON Development eclipse workspace fpm folder on your computer This is where the properties files that you will create will be stored Chee E M Navigator d Create a properties file for your custom SmartServer 2 0 Web page To do this right click the nls folder point to New and then click File The New File dialog opens In the File name box enter the file name of your custom SmartServer 2 0 Web page for example nlsExample and then append the properties extension to the name for example nlsExample properties Click Finish ILON Vision 2 0 User s Guide 175 File Create a new File resource Enter or select the parent Folder nls File name nlsExample properties e A properties file is added under the nls folder in the C C Projects view and the ResourceBundle Editor view opens This means that a p
142. es see Using Data Point Priorities later in this chapter Switchable By default a user can click the image to change the data point s value You can clear this check box if the value of the selected data point is to be monitored only The value written to the data point when the image is clicked depends on the order that the presets are listed in the Images List box The SmartServer will proceed through the list from top to bottom each time the image is clicked Consider a data point that has the following five presets listed in order OFF ON HOLIDAY WEEKEND CLOSED If the data point is set to OFF and a user clicks the image it will be set to ON which is the next value in the list If the user clicks it again it will be set to HOLIDAY If the user clicks it again it will be set to WEKEND and then CLOSED and so on When it reaches the bottom of the list the SmartServer will start over from the top ILON Vision 2 0 User s Guide 67 68 10 Force Round to Preset Default Click Rounds the raw value of the data point to the value of the nearest preset defined for the data point so that the preset is displayed on your custom Web page Consider a SNVT temp p data point which has the following presets defined for it OCCUPIED 69 8 UNOCCUPIED 60 8 STANDBY 19 994 If the raw value of the SNVT_temp_p data point is 30 STANDBY is displayed on your custom Web page If the raw value of the data point is 45 UNOCCUPIED is d
143. es tree folder on the SmartServer flash disk and then select the appropriate image Note All of the images for the SmartServer s built in applications use the following naming convention 8000010128000000 4 UFPT application gif In the Label property enter the name for the item for example Scheduler or Alarm Generator In the Link box click Choose to open the Select File dialog browse to the root web user Echelon folder on the SmartServer flash disk and then select the htm file representing the configuration Web page of the desired built in application Note AII of the htm files for the SmartServer s built in applications use the following naming convention 8000010128000000 4 UFPT lt application gt _Cfg htm Do not modify the appFrame text listed in the URL property This enables the configuration Web page to appear in the application frame in the center of the Frameset object Advanced SmartServer 2 0 Web Page Topics 1 LON Vision Object Navigation Link Presentation Label Scheduler CS ees Link URL fuser fechelon s000010126000000 4 UFPTscheduler_CFg htm Mame Substitution values 9 Click Name Substitution Values The Substitutions dialog opens 1 LON Vision Substitutions Mame elon scheduler cal name elon language elon scheduler name za new placeholder gt Page Title Scheduler 10 Click the elon application name placeholder enter the full name network path of the d
144. esired application instance and then click Save For example if you want to open Scheduler 0 on the iLON App device which is located on the LON channel in a network named Net enter Net LON ILONApp Scheduler 0 Tip To enter the application s name quickly go to the SmartServer Web interface click the application s functional block in the SmartServer tree copy the name listed in the Name property at the top of the Web page paste it in the Value box and then click Save ILON Vision 2 0 User s Guide 185 186 11 12 13 14 15 1 LON Vision Substitutions Mame elon scheduler name Value MeE LOMJILOM App Scheduler O Mame Status elon_language elon scheduler name MeklLOMJILON App Sched elon scheduler cal not defined za new placeholder gt Page Title Scheduler By default the application s configuration Web page will appear in English en To select German de French fr or another language click elon_language enter that language s country code language REGION _variant and then click Save For example to specify German enter de If you translated the application s configuration Web page into Spanish enter es You can localize the SmartServer s built in configuration Web pages into any one byte or two byte character language To do this you translate the properties file in the root web nls echelon folder on the SmartServer flash disk using either the demo
145. espond to their locations in the navigation pane 6 Click the root icon and then click Add for each subtree to be added to the navigation pane A New Item menu item is underneath the root icon for each subtree you create For example to create a navigation pane with two subtrees click the root icon and then click Add twice i LOM Vision Object Layer Left Width Top Height Z Index Tree F Auto Tree Default Language Engish Addressing O Menu Orientation Presentation Entries amp root d Mew Item e Mew Item 2 7 Configure each subtree following these steps a Click the New Item subtree and then click Edit The Navigation Link dialog opens ILON Vision 2 0 User s Guide 147 148 1 LON Vision Object Navigation Link Presentation Link Mame Substitution values In the Icon property under Presentation you can add an icon that will replace the default icon amp that appears to the left of the item in the navigation pane To do this click Choose to open the Select File dialog browse to the Desktop C LonWorks iLON iLonVision graphics lt category gt folder on your computer or the root web images or root web user demo images folders on your SmartServer flash disk click the desired image and then click OK In the Label property enter the name for the menu item If you do not plan on adding any branches to the current subtree select the Web page t
146. et 0000000000000000 0 SNVT switch m myDp UCPTvalue 0 set 0 0 0 ILON Vision 2 0 User s Guide 89 e Enumerated data points for examplee5SNVT hvac mode and enumerated fields within structured data points for example SNVT scene function m myDp UCPTvalue 0 LonFormat set 0000000000000000 0 SNVI hvac mode m myDp UCPTvalue 0 set HVAC COOL m myDp UCPTvalue 0 LonFormat set 40000000000000000 0 SNVT scene function m myDp UCPTvalue 0 set SC RECALL e Fields within structured data points that are not of a floating point or integral type for example SNVT_switch state m myDp UCPTvalue 0 LonFormat set OO00000000000000 0 SNVI_switch state m_myDp UCPTvalue 0 set 0 The subsections after these steps provide simple JavaScript code examples that demonstrate how to set the UCPTvalue index LonFormat property and write values to these data point types 2 If you plan on writing to data point properties implement the following code in your JavaScript class Custom Soap Server Object required to write to DPs ar GOD sso Write Liem Tip The subsections after these steps provide simple JavaScript code examples that you can use to help familiarize yourself with the process of creating custom JavaScript objects You can also look at the examples in the web scripts iLon VisionExtensions folder on your SmartServer flash disk 3 Store this class in a file n
147. et htm Frameset Layout Menu Height 100 Sidebar Default Page Width 180 URL Sidebar htm Copyright Notice Hecht 8 In the Poll Interval box set how frequently in seconds that the 7 LON Vision objects in the custom SmartServer 2 0 Web pages within the frameset poll the SmartServer s internal data server for data point updates If you do not specify a poll rate the default poll rate is 1 second You can use this property to adjust the amount of LAN WAN traffic that is generated by your custom SmartServer 2 0 Web pages 9 Inthe Default Page property enter the URL of your home page or click Choose select your home page in the Select File dialog and then click OK 126 Creating Custom SmartServer Web Pages LLON Vision Select File E g 10 2 124 1865 images amp ols G scripts 3 styles O user zl Custom gt images e AlarmhMatifier htm E CustamWebPage hkm E DataLogView hkm e Frameset htm E index htm E Menu htm du Shawvalue htm e Sidebar htm demo echelon 3 myCustom Abort 10 By default frames for a menu sidebar copyright notice and application custom Web page will be added to all your custom Web pages i LON 100 Internet Server Microsoft Internet Explores 4 BR fie Edt yew Favorites Joos Heb a Ac eh g g Qe x im fn ae iy Fovornes EST zl P a 35 en Adress dE htto 10 3 124 32 jumer jeden dex hir Puser Dr edeno vi Bic ins Header me
148. et LONALON App Digtal Output BD inviCla ahe_1 13 Add a lamp graphic to your custom Web page following these steps a Click Insert and then select Image Swapper b Inthe Data Point property click Select The Select Data Points dialog opens c Select the Net LON i LON App Digital Output 1 nvoClaValueFB_1 state data point ps Click OK to return to the Image Swapper dialog e Clear the Switchable check box This is because the lamp graphic is not used to write values to the nvoClaValueFB 1 state data point instead it 1s reading the value of the data point f Select the Use Local Presets check box and then click Edit The Local Presets dialog opens g Create local ON and OFF presets for the Net LON i LON App Digital Output 1 nvoClaValueFB_1 state data point e Inthe Preset box enter ON in the Value box enter 1 and then click Save e Inthe Preset box enter OFF in the Value box enter 0 and then click Save e Click OK to return to the Image Swapper dialog h Inthe Images list select OFF and then click Select The Select File dialog opens i Browse to the Desktop C LonWorks iLON iLonVision graphics lamp folder on your computer choose a graphic of a lamp in the OFF state and then click Select This graphic will be displayed when the Digital Output is disabled j In the Images list select ON and then click Select The Select File dialog opens k Browse to the Desktop C LonWorks iLON iLon
149. et the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property determines the object s background depth compared to objects it overlaps with with 1 the default being in the back and higher values being in front When positioning the Show Value object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects Creating Custom SmartServer Web Pages Max Age Set the maximum period of time in seconds that the value of the data point is cached before the Show Value object receives updated values This enables you to control the amount of traffic that is generated on a specific channel by the object The SmartServer compares the Max Age value of the Show Value object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer
150. etermines the object s background depth compared to objects it overlaps with with 1 the default being in the back and higher values being in front When positioning the Link object consider the space required for menu page title or sidebar objects that you may want to add to your Web page This will help prevent you from accidentally overlapping objects 122 Creating Custom SmartServer Web Pages Presentation Select the type of Link object that the user will click to open the Web page you specify in the Destination property You have the following three choices e Icon Select a graphic from your computer or your SmartServer To select a graphic click Choose to open the Select File dialog browse to and select the desired image and then click OK to return to the Link dialog e Button Enter the text to be displayed in a button that has the following appearance e Text Enter text to be displayed in a hyperlink Text Link Select the Web page to be opened when the user clicks the Link object by doing the following 1 Inthe URL box enter the URL of the destination Web page or click Choose to open the Select File dialog browse to the htm file of the destination Web page click the htm file and then click OK 2 Inthe Target box you can select how the destination Web page is opened If you are adding the Link object to a page in the frameset the destination Web page 1s opened in the application frame appFrame with
151. f the pop up dialog This check box is cleared by default Creating Custom SmartServer Web Pages e If you are using data point substitution tags to re use a single Web page for monitoring and controlling multiple data points click Name Substitution Values In the Substitutions dialog click a placeholder enter a value for the placeholder in the Value box click Save and then click to return to the Navigation Link dialog See Using Data Point Substitution Tags in chapter 4 for more information f Click OK to return to the Navigation dialog g Repeat steps a f for each subtree The following graphic demonstrates a navigation pane with two subtrees that have been configured i LOM Vision Object Layer Left Width Top Height Z Index Tree d Auto Tree Default Language Engish Addressing C Menu Orientation Presentation Entries e root Q Read write Objects e Application Objects 8 Tocreate branches for a subtree click the subtree and then click Add A New Item is added underneath the subtree For example to create a subtree with three branches click the subtree and then click Add three times ILON Vision 2 0 User s Guide 149 150 10 11 1 LON Vision Object Layer Left Width Top Height Z Index Tree d Auto Tree Default Language Addressing C Menu Orientation Presentation Entries e rook ae Qe Read write Objects Edit e Mew Item e Mew I
152. folder on the SmartServer flash disk You can then customize the Web pages in the template to fit your needs 128 Creating Custom SmartServer Web Pages Designing the Menu Frame Once you have created your home page and formatted the Frameset object you can open the Menu htm file and then design the menu frame by adding navigation objects to it You will typically add a Navigation menu object and you may add the Page Title Message Box and Menu Buttons objects and graphics for example background images and company logos The following describes each of the navigation objects you can add to the menu frame e Navigation Menu Displays a menu bar with menu and submenu items that the user can click to open custom Web pages e Page Title Displays a page title based on the file name of the custom Web page e Message box Displays error and warning messages related to your custom Web pages e Menu buttons Displays a Submit button that the user can click to save changes made to a custom Web page and or a Back button that the user can click to return to the previous Web page e Graphics such as a background images and company logos The objects you add to the menu frame will automatically be applied to all your custom Web pages This means that you do not have to add and configure separate navigation objects in the menu frame for each of your custom Web pages Opening the Menu htm File To open the Menu htm file that was created when yo
153. fore the Text Area object receives updated values This enables you to control the amount of traffic that is generated on a specific channel by the object The SmartServer compares the Max Age value of the Text Area object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is Enter the number of significant decimal digits with which a data point value is expressed For example a data point value of 32 568 1s rounded to 32 6 rounded to the tenth digit if the precision is 1 and it is rounded to 32 57 rounded to the hundredth digit 1f the precision is 2 The default and maximum precision are both 3 meaning the decimal values are rounded to the thousandth digit Assign the priority the Text Are
154. formation on using data point priorities Using Data Point Priorties Every i LON Vision object and SmartServer application that writes values to a data point must specify a priority The priority is a value between O highest priority and 255 lowest priority the default that determines whether the object or application can write values to the data point e Ifan object or application has a priority that is equal or higher than the one currently assigned to the data point it can write values to the data point e If an object or application has a priority that is lower than the one currently assigned to the data point the object is locked out The object cannot write to the data point until either 1 you give it a revised priority that is equal to or higher than the current data point priority or 2 the user resets the priority of the higher priority object or application by clicking the Manual Override icon 77 next to the object application The priority currently assigned to a data point is the one used by the last object or application that updated the data point This means that when an object or application writes a value to a data point it also updates the priority assigned to the data point For example if a Data Point View object with a priority of 240 writes to the data point the data point s priority becomes 240 If a Combo Box object with a priority of 230 then writes to the data point the data point s priority becomes 23
155. gation pane c Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block data point This is the default e Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix ILON Vision 2 0 User s Guide 39 J o The virtual data points on the i LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page Expand
156. hapter 8 Data Logging Scheduler You can use the Scheduler object to create a weekly calendar that lists the events to be executed regularly each day the week or a yearly calendar highlighting the days in which exceptions to the daily schedule are to be executed The user can click the weekly calendar to view and configure the events regularly scheduled for that day and they can click a date in the yearly calendar to view and configure all the events scheduled for that day including exceptions to the daily schedule You can disable the configuration functionality so that the user can only view the weekly or yearly calendar To use this object there must be one or more configured Schedulers on your SmartServer See Chapter 8 of the i LON SmartServer 2 0 User s Guide for more information on adding and configuring a Scheduler using the SmartServer s built in Web pages To add a Scheduler object to your custom SmartServer 2 0 Web page follow these steps A 1 Click Edit on the Editor toolbar i or click the Layout tab ILON Vision 2 0 User s Guide 115 116 2 Click Insert and then select Scheduler 3 LON Vision M File Edit View MGSZISE Format Table Help H E HTML Elements 3 X m Y http 10 2 124 165 user Custom v 3 sd 8 Back Show Value Choose New Publish Discard F Text Field ACA d g Ad Text Area M 9 PAG Browse F Layol Combo Box Image Swapper Radio Buttons Select Box Check
157. hat has priorities is used it should use a data point other than the Digital input data point on the garden light Because priorities are not implemented in the external light device a fan in connection from different data points ensures that user requests are not blocked by higher priority scheduler requests The Scheduler hardware switch and custom Web page all have equal write access to the light and all three can update the data point at any time ILON Vision 2 0 User s Guide 161 162 NVL nvwClsValueFb Garden Light NVL_nvoCls Value Scenario 2 Priorities Used with Intemal Devices and LON Vision Objects If you want an image swapper switch object that can override the hardware switch you can implement priorities With a high priority image swapper switch object you could turn on the light and the light will stay on regardless if the hardware switch or the low priority image swapper object turns the light off The high priority image swapper switch object has an identical user interface to the low priority one used in the previous section but it is assigned a higher priority When you toggle the high priority switch object and turn the light on the Manual Override icon appears next to the object on the Web page This means that the low priority switch object and the hardware switch are disabled until you release the high priority switch object s lock on the data point The Scheduler could still overwrite the high
158. he New button on the Editor toolbar 2 or click File and then click New Page The Select Folder dialog opens 12 Quick Start Exercise LLON Vision Select Folder 5 H m ES 1D 2 124 165 2 Expand the SmartServer icon expand and click the user folder you must create the new folder in the root web user directory on the SmartServer flash disk and then click the New Folder icon to create the directory for your custom SmartServer 2 0 Web page LLON Vision Select Folder E ES 10 2 124 165 E images 73 nls scripts O styles 3 The New Folder dialog opens Enter the name for the folder where all the custom SmartServer 2 0 Web pages for a given Web design will be stored For this example enter Custom Click OK ILON Vision 2 0 User s Guide 13 k 8 i L N Vision New Folder Folder Mame Click the custom SmartServer 2 0 Web page folder you created in step 3 and then click OK Click Publish on the Editor toolbar click the Browse tab or click File and then click Publish The Publish As dialog opens In the File Name property enter the name of the htm file one word with no spaces For this example enter CustomWebPage Click OK 1 LON Vision Publish As 102 124 212 Folder fuser Custom File Name CustomWwebPage m Optionally you change the title of your custom SmartServer 2 0 Web page and the poll rate of the objects in your custom Web page following these steps a
159. he preset specified for the checked state value def name unchecked string The preset specified for the cleared state Custom J avaSc ript Properties The Custom JavaScript object is a generic object that lets you read and write to a data point s value state name priority format description and unit string When your Custom JavaScript object is initialized the Echelon library starts polling the selected data point and passes the data point to the update method in your Custom JavaScript object if any of the data point properties change See Custom JavaScript Object in Chapter 3 for how to create a Custom JavaScript object The following table lists the properties of the Custom JavaScript object elon_javascript_class string The name of the JavaScript class implementing your custom JavaScript object relative to the root web scripts folder on the SmartServer flash disk do not include the js extension Data Point View Properties The Data Point View object includes a log that displays the current values and states of the selected data points a trend graph that charts the data point values over a specified interval and combo boxes for writing values to the data points You can use the Data Point View object to monitor chart and control selected data points The following table lists the properties of the Data Point View object elon_layout string Set this property to either graph trend graph table log or graphtable f
160. hese custom SmartServer 2 0 Web pages to sample the read write and application objects provided by ZLON Vision 2 0 g 15 Click Publish on the Editor toolbar S click the Browse tab or click File and then click Publish This publishes your home page and additionally creates the following files provided that you did not clear the check box for the respective frame in step 11 e index htm This is the Web page users will initially see when they enter your Web design Your home page will appear in the application frame in the center of this Web page You do not need to modify this Web page e Menu htm You can add a menu bar page title message box menu buttons images and graphics to this frame This frame will appear at the top of all your custom Web pages e Sidebar htm You can add a navigation pane to this frame This frame will appear in the left side of all your custom Web pages e Copyright htm You can add a copyright notice to this frame This frame will appear at the bottom of all your custom Web pages Using an Echelon Frameset Template to Create the Home Page You can create your home page using an Echelon frameset template The template includes a Home htm file as well as the frameset files index htm Menu htm Sidebar htm and Copyright htm To use an Echelon frameset template copy a template folder in the LonWorksNLon100NunsupportedNLonVision Templates directory on your computer to the root web user
161. i Lu Chaoyang District Beijing 100027 China Phone 86 10 6539 3750 Fax 86 10 6539 3754 lonsupport echelon com cn Other Regions English Phone 1 408 938 5200 Japanese Fax 1 408 328 3801 lonsupport echelon com Preface 1 Intoduction This chapter introduces 7 LON Vision 2 0 summarizes the new features in i LON Vision 2 0 describes the compatibility of i LON Vision 2 0 with 7 LON Vision 1 0 and describes how to install the i LON Vision 2 0 software ILON Vision 2 0 User s Guide Introduction You can use i LON Vision 2 0 to create custom Web pages for monitoring and controlling the data points on your SmartServer 2 0 without any knowledge of HTML JavaScript or Web programming The 7 LON Vision 2 0 toolkit provides many objects that you can use to read and write values to data points including basic read write objects SVG objects for example sliders gauges and thermometers application objects that expose some of the SmartServer s built in applications to your end users and a custom JavaScript object for implementing your own custom objects You can use i LON Vision 2 0 to create new custom Web pages and edit existing custom Web pages previously built with i LON Vision 1 0 and Adobe Contribute CS3 CS4 i LON Vision 2 0 is a standalone Web publishing tool so you do not have to purchase Contribute or any other Web publishing software to use it Custom Web pages created with 7 LON Vision 2 0 support both Internet
162. ibutes For lt DIV gt HTML Attributes Inline Style JavaScript Events Property Value absolute ZOpx eUpx 3n px 4 3px 2 Click on an item above En edit its value Property Value e Increase the Z index to place the selected Layer above other Layers for example set the Z index to 2 e Decrease the Z index to place the selected Layer below other Layers for example set the Z index to 1 9 Click Publish on the Editor toolbar LN click the Browse tab or click File and then click Publish to verify that the images appear as desired in your custom Web page 7 LON Vision 5 File Edit view le Help 102 ge S s s ay sj gt E http 10 2 124 165 user myCustom MoveImage htm v Ej d A 8 Back Forward Reload Stop Home Choose New Edit iM 2 HAK Browse 2 Layout I LON SmartServer v Moving an Existing Image to a LayerObject If you need to move an existing image on your custom Web page to a layer you can cut and paste the image into a Layer object To do this follow these steps 1 Click Insert point to HTML Elements and then select Layer A Layer object is added to the upper left hand corner of Layout tab ILON Vision 2 0 User s Guide 195 _ 7 LON Vision z File Edit View Insert Format Table Help M Go f 2 9 OQ z aX E v Y gt G htp 10 2 124 165 user myCustom MoveImage htm v ud H Back Forward Reload Stop Home T Choose Mew Publish Discard E
163. ick Insert and then select Show Value 7 LON Vision x File Edit view BMGS Format Table Help z amp HTML Elements X http 10 2 124 165 user Custom v 3 d 8 Back Show Value Choose New Publish Discard TM S E Text Field d 7 A Text Area PAX Browse F Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Show Value dialog opens ILON Vision 2 0 User s Guide 37 1 LON Vision Object Data Point Settings Show presets Force round to preset Show unit EI Use local presets Edit Link 4 Select the data point to be monitored by the Show Value object following these steps a Inthe Data Point property click Select The Select Data Points dialog opens Creating Custom SmartServer Web Pages 1 LON Vision Select Data Point Addressing Rea Alias Prog is Met c ES virtch E LON s iL App m 4j witFb b To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navi
164. icrosoft com windows windows vista get upgrade advisor aspx DVD ROM drive 1024x768 or higher resolution display with at least 256 colors Mouse or compatible pointing device If you are running Echelon Enterprise Services 2 0 on your computer LNS Turbo Editions 3 25 or later is required Microsoft Internet Explorer 7 or higher or Mozilla Firefox LLON SmartServer 2 0 Documentation The documentation for the SmartServer is provided as Adobe Acrobat PDF files and online help files The PDF file for this document is installed in the Echelon i LON Vision SmartServer 2 0 program ILON Vision 2 0 User s Guide vii folder when you install the i LON Vision 2 0 software You can also download the latest SmartServer documentation including the latest version of this guide from Echelon s Website at www echelon com support documentation manuals cis This user s guide the online help files and the following documents comprise the SmartServer documentation suite i LON SmartServer 2 0 User s Guide Describes how to configure the SmartServer and use its applications to manage control networks Echelon Enterprise Services 2 0 User s Guide Describes how to use the LNS Proxy Web service to manage LNS networks and how to use the 7 LON AdminServer to rapidly and automatically deploy and install LONWORKS networks I LON SmartServer 2 0 Power Line Repeating Network Management Guide Describes how to install a PL 20 repeating network and how to
165. igns For example you can create multiple custom Web pages that are linked via a menu or a navigation pane and you can use a number of different objects to monitor and control your data points To create the simple custom SmartServer 2 0 Web page you perform the following steps 1 Create a Website connection between i LON Vision 2 0 and your SmartServer 2 Create a new custom SmartServer 2 0 Web page 3 Add i LON Vision objects to your custom SmartServer 2 0 Web page 4 Link your custom SmartServer 2 0 Web page to your SmartServer home page Step 1 Creating a Web Site Connection To create a Web site connection between 1 LON Vision 2 0 and your SmartServer follow these steps 1 Start i LON Vision 2 0 To do this click Start point to Programs point to Echelon i LON Vision SmartServer 2 0 and then click i LON Vision SmartServer 2 0 i LON Vision 2 0 opens 3 LON Vision 5 File Edit View Help 4 Of Q F y aboutiilonvision v 2 Reload Stop Home Choose New gqpeer cc Sa AME Nui NECEM mm SEP SSN pues UU EO r 4s AIR 7 Uv E E S H amp zd elu ID R X 3 Bb HN M Browse 9 i LON Vision Browse to a Web Site Sites You can use i L ON Vision 2 0 to browse to any Web page To browse to a Web page do one of the following e Click a link to navigate to a Yeb page c e Enter a URL into the Address bar jMenage connections e Select a page from the browse history Edit a Web Page You can e
166. ilt in applications Click OK to return to your frame Sidebar htm or Menu htm or custom Web page Advanced SmartServer 2 0 Web Page Topics ILON Vision 2 0 User s Guide t Adobe Contribute CS3 Sidebar htm File Edit View Bookmarks Insert Format Table Help ES Publish 3 Send for Review H Save for Later Discard Draft ilon Properties x Link Image Table Table R Normal wDefautFont vil vi B Z A 2 Pe Scheduler English Scheduler German 16 Click Publish on the Editor toolbar pupish click the Browse tab or click File and then click Publish to publish your frame or custom Web page 17 Click the links in the navigation object to verify the SmartServer configuration Web page opens in the application frame or destination Web page and appears in the specified language Name NetworkExample Channel 1 iLON100 1 Scheduler 6 Scheduler English Scheduler German Description Real Time Clock 05 22 0 1 AUS EIN 000 10001 000 10001 00 11 C Suppress Event Recovery Event Calendar Effective Period Event Scheduler Effective Period Start Date 2000 v Jan v 1 v Start Date 2000 v Jan v v Stop Date 2037 v Dec v 31 v Stop Date 2037 v Dec v Name NetworkExample Channel 1 iLON100 1 Scheduler 6 Scheduler English Scheduler German Beschreibung 05 22
167. ing and controlling multiple data points click Name Substitution Values In the Substitutions dialog click a placeholder enter a value for the placeholder in the Value box click Save and then click to return to the Navigation Link dialog See Using Data Point Substitution Tags later in this chapter for more information f Click OK to return to the Navigation dialog g Repeat steps a f for each New Item menu item listed under the Level 1column The following graphic demonstrates a menu bar with two menu items that have been configured ILON Vision 2 0 User s Guide 133 134 6 1 LON Vision Object Navigation Layer Left Width Top Height Z Index C Tree Iree Default Language English Addressing Menu Orientation Horizontal Vertical Presentation C55 Class MainMenu MainMenuRoot Entries E e rook e Read Write Objects e Application Objects Creating Custom SmartServer Web Pages To create submenu items for a menu item click a menu item then click Add A New Item submenu item is added underneath the menu item For example to create a menu item with three submenu items click the menu item and then click Add three times 1 LON Vision Object E e Read Write Objects e New Item i 5 e Mew Item 2 Delete e Mew Item 3 Application Object e pplication Objects per CS j 7 Configure each submenu item as described in step 5 ILON Vision
168. int by selecting or clearing the check box SVG Object Slider gauge knob or thermometer 0 10 20 30 40 50 60 70 80 90 100 representing the value of a data point pe be or a field within a structured data point as a percentage The user can write to the data point or field by adjusting the slider or knob object Custom JavaScript code that can be used Data Point Name NetLONALON App VitFb temp f Custom JavaScript ds Value 85 F to implement specialized dynamic objects fes AL ata CONDITION that get and set data point properties Priority 220 including the name value unit string format description status and priority of a data point Creating Custom SmartServer Web Pages Show Value You can use the Show Value object 0 00 to display the value of a data point the value of an enumerated data point or a field within a structured data point You can use the Show Value object to create a simple monitoring application For example you could use it to monitor a building with multiple floors You can create a Web page containing a table with rows for each floor on the building In each row you can display the values of the data points used to monitor the conditions on that floor including the temperature occupancy state and any other desired settings To add a Show Value object to your custom SmartServer 2 0 Web page follow these steps d 1 Click Edit on the Editor toolbar el or click the Layout tab 2 Cl
169. iorities see Using Data Point Priorities in Chapter 4 Orientation Select how the radio buttons are aligned You have the following two choices e Horizontal The radio buttons are aligned horizontally in a single row Note that you must widen the Layer object to fit all the radio buttons that will be displayed in the row e Vertical The radio buttons are aligned vertically in a single column Use Local Presets Select this check box and click Edit to open the Local Presets dialog and create presets for this individual Radio Buttons object This check box is cleared by default meaning that local presets are not used A local preset is a preset that applies to a specific instance of an 7 LON Vision object Local presets are especially useful if you selected a field within a structured data point and you want to represent the current value of the field using a simple meaningful string instead of a raw value Note You can add edit and delete presets for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General button above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The options for presets are located at the bottom of the Web page Click OK The Radio Buttons object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web
170. isplayed You can use this property to create a Range Image Swapper For example you can show five states for a damper closed 0 1 33 34 66 67 99 and full open 100 using five graphics and seven presets You would use a close graphic for 0 a low volume graphic for 1 and 17 a medium volume graphic for 50 a high volume graphic for 83 and 99 and a full open graphic for 100 You can add edit and delete presets for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General button above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The options for presets are located at the bottom of the Web page Specifies the value to be written to the data point and corresponding graphic to be displayed when the user clicks the default image The default image is displayed when the current value stored in the data point does not correspond to any of the presets defined it Click OK The Image Swapper object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page Click Publish on the Editor toolbar La click File
171. j Repeat steps a h for each data point to be monitored and controlled with the Custom JavaScript dialog object Click Edit to edit the maximum age property of a data point change the selected field of a structured data point or change the selected data point altogether Click Delete to remove the data point from the Data Points box If you created custom arguments in your JavaScript code click Edit in the Custom Args box to enter values for them in the Custom Argument Values dialog See Using Custom Arguments later in this section for more information Click OK The Custom JavaScript object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer option drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page Click Publish on the Editor toolbar S click File and then click Publish or click the Browse tab to publish your custom Web page The Echelon library starts polling the selected data points and passes them to the update method in your Custom JavaScript object if any of their properties change Creating Custom SmartServer Web Pages Custom JavaScript Example Reading Data Points The following JavaScript class demonstrates how to read data point properties in a custom JavaScript object This JavaScript class creates fou
172. k OK to return to the Data Point View dialog The name of the selected data point field 1f selected for a structured data point and the Max Age property if set 1s listed in the Data Points box i LOM Vision Object Data Point View Layer Left Width 200 Top Height 300 Z Index Presentation Show Grid Default Language English Minimum Maximum Data Points Mame Max Age NetiLON LON 4pp Digital Output 1 nviClavalue 1 1 j Repeat steps a i for each data point to be monitored and controlled with the Data Point View object Click Edit to put a placeholder in the data point name edit the maximum age property of the data point change the selected field of the data point 1f a structured data point or change the selected data point altogether Click Delete to remove the data point from the Data Points box Click OK The Data Point View object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties Drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page Creating Custom SmartServer Web Pages 10 Click Publish on the Editor toolbar Le click File and then click Publish or click the Browse tab to publish your custom Web page For information on using the graph and table in the Data Point View object see the
173. k appears on the new button 26 Quick Start Exercise 7 LON Vision File Edit View Insert Format Table Help bs bj e A E http 10 2 124 165findex htm v 8 A Q x Back Forward Reload Stop Home Choose New Publish Discard jJW X amp J BI U Eje 3 B dX Browse P Layout 1 LON SmartServer ECHELON configuration amp service English v Programmable run custom C amp C applications and drivers Direct LNS interface to view and use the LNS database f Standalone mode can manage up to 200 PL amp 64 FT devices without eet 7 an LNS database Network management using the SmartServer Web pages IPv6 Support Improved security HTTPS Cross Browser Support Create trend graphs using the configuration Web pages or i LON Vision Localize configuration pages to any language 64MB of Flash and RAM VSFHEEHRRAR eee em Demonstrations i LON Vision 2 0 Features Resources e Demonstrations e Integrated Design e LON SmartServer Community e ATU Page e Quick Access to all Network and e ILON SmartServer amp i LON 100 e Custom Web Page System Values Developer and Integrator Center e Mo cost solution e i LON SmartSerer eTraining 7 Click Publish on the Editor toolbar puis click File and then click Publish or click the Browse tab to publish your custom Web page 8 Test the link to your custom Web page by clicking the Custom Web Page button Your custom Web page sh
174. le EK Table Row lif e dy Cin Layer 1 z Show Value Text Field Text Area Combo Box Radio Buttons Select Box Check Box Slider Link Data Point view Data Log View Scheduler Alarm Notifier Custom JavaScript Frameset Page Properties Navigation Page Title Message Box Menu Buttons 3 The Image Swapper dialog opens Creating Custom SmartServer Web Pages 1 LON Vision Object Data Point Feedback Settings write Priority Po Use local presets Switchable _ Force round to preset Images Preset Value Image 4 Select the data point to be monitored by the Image Swapper object following these steps a Inthe Data Point property click Select The Select Data Points dialog opens b To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigation pane c Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block gt lt data point gt This is
175. lick OK 5 Prepare to place the cut object above or below the current object in the destination Layer e To place the object being moved above the current object in the destination Layer press ENTER multiple times to provide sufficient space for all the objects in the Layer and then click the current object and drag it downwards within the Layer Click anywhere above the current object e To place the object being moved below the current object in the destination Layer press ENTER multiple times to provide sufficient space for all the objects in the Layer 6 Click Edit and then click Paste or press CTRL V The object is pasted to the destination Layer ILON Vision 2 0 User s Guide 191 7 LON Vision M File Edit View Insert Format Table Help amp Y Y e A M http 10 2 124 165 user myCustom 3 Back Reload Stop Home Choose New Publish Discard i e AI B 7 U HAK Browse A Layout lil li m ON OFF Net LONALON App Digital Output 7 Click Publish on the Editor toolbar click the Browse tab or click File and then click Publish to verify that the objects are positioned as desired in the Layer 3 LON Vision 5 File Edit View le Help 806 s T 2 S http 10 2 124 165 user myCustom MovelImage htm mJ 8 Back Reload Stop Home Choose New SW 9 a MX Browse 9 Layout 100 0 1 Adding 1 LON Vision Objects to a Table You can cut an i LON Vision object and
176. lick Select The Select Data Point dialog opens c To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden ILON Vision 2 0 User s Guide 91 92 Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigation pane Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block data point This is the default e Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed
177. lider Combo Box Val Adding a Menu Barto the Menu Frame You can add a menu bar to all your custom Web pages by adding the Navigation menu object to the menu frame The user can then click the menu and submenu items in the menu bar to open your custom Web pages To add a menu bar to your custom Web pages follow these steps 1 Click Insert and then select Navigation LON Vision H File Edit view BGS Format Table Help M HTML Elements gt c Y lt http 10 2 124 165 user Custom Menu htm v 3 Zj Q 8 Back F rd Show Value Choose New Publish Discard vi Text Field a 3 EE io g A Text Area PAX Browse P Layo Combo Box Image Swapper Radio Buttons Select Box Check Box S G Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript hi m Navigation Page Title Message Box Menu Button 2 The Navigation dialog opens 3 Select the Menu option and then select the Horizontal option 130 Creating Custom SmartServer Web Pages 1 LON Vision Object Navigation Layer Left Width Top Height Z Index C Tree AuEn Tree Default Language English Addressing Orientation Horizontal Vertical Presentation Entries 4 Click the root icon and then click Add for each menu item to be added to the menu bar A New Item menu item is
178. ll LNS Server Service Pack 5 from the 1 LON SmartServer 2 0 DVD See Chapter 1 of the Echelon Enterprise Services 2 0 User s Guide for more information 2 AddanLNS Server to the LAN that contains the LNS network database in which the device is stored See Adding an LNS Server to the LAN in Chapter 3 for more information 3 Expand the LNS Server icon and then enter the User Name and Password for logging in to the LNS Server via the Echelon Enterprise Services You initially specified the user name and password in the Echelon Enterprise Services installer If you forgot the user name and password you can right click the Echelon Enterprise Services tray icon in the Notification Area of your computer and then click Options on the shortcut menu 4 Inthe LNS tree expand the LNS network database channel device and functional block containing the network variable to be copied to the local SmartServer right click the network variable and then select Create External NV on the shortcut menu To copy multiple network variables click one and then either hold down CTRL and click all others to be copied or hold down SHIFT and select another to select the entire range right click one of the selected network variables and then click Create External NV on the shortcut menu Note If you have one or more remote SmartServers on the LAN the Create External NV option is not available in the shortcut menu of the network variable in the LNS tree Instead
179. log and create presets for this individual Text Field object This check box is cleared by default meaning that local presets are not used A local preset is a preset that applies to a specific instance of an i LON Vision object Local presets are especially useful if you selected a field within a structured data point and you want to represent the current value of the field using a simple meaningful string instead of a raw value You cannot select the Show Presets check box to use global presets for a field within a structured data point 8 Click OK The Text Field object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 9 Click Publish on the Editor toolbar La click File and then click Publish or click the Browse tab to publish your custom Web page Text Area 0 0 0 al The Text Area object oe Y is a text box that lists the most recent values assigned to a scalar data point an enumerated data point or a field within a structured data point Optionally you can configure this object to allow a user to write to the data point or field by entering a new value in the text area To add a Text Area object to your custom SmartServer 2 0 Web page
180. m Instance FT5000 EvB Channel 1 iLOM SmartServer 1 Data Lagger Device 1_LightSensor v Data Points Available Selecked FT5000 EvB Channel 1 iL ON SmartSer In the Layout property under Presentation select the elements of the Data Logger View Web page to be added to your custom Web page You have the following three choices e Graph A trend graph that plots selected data points over a user specified interval e Table A log that lists in descending chronological order the data point updates recorded by the selected data logger For each data point update recorded the log displays the time of the update the data point value at the time of the update the unit string of the data point and the status of the data point at the time of the update e Graph and Table Displays the data point trend graph and the log The trend graph is displayed on top of the log Note For multiple data points to be scaled accurately on the trend graph at the same time they must have the same Unit String property You can add a unit string to a data point or edit the one defined for it in the Configure Data Points Web page on the SmartServer You can access this Web page from the built in SmartServer Web interface by clicking General and then clicking the data point in the SmartServer tree on the left side of the Web interface If you selected Graph or Graph and Table in step 4 you can add grid lines to the chart by selecting the Show Grid check bo
181. m SmartServer 2 0 Web pages for a given Web design must be stored in the same folder under the root web user directory on the SmartServer flash disk 5 Add i LON Vision objects to your custom SmartServer 2 0 Web pages You can add read write objects such as a combo box image swapper and Custom JavaScript and you can application objects such as a scheduler data point graph and data logger 6 Add a navigation system to your Web design You do this by creating a home page adding the i LON Vision frameset to your home page and then designing the menu sidebar and copyright frames This step is optional but it is highly recommended if you have multiple Web pages in your Web design 7 Link your Web design to your SmartServer home page For more information on how to do this see Step 4 Linking a Custom Web Page to the SmartServer Home Page in the quick start exercise in the previous chapter The following sections describe how to perform steps 2 3 5 and 6 Configuring i LON Vision 2 0 Preferences Before you begin creating your custom SmartServer 2 0 Web pages you can configure your Web page development environment You can set the language for the user interface select whether the names of data points are displayed below i LON Vision objects in the Layout view by default select whether the layer boxes surrounding i LON Vision objects are displayed in the Layout view by default select whether all the network objects in the SmartSer
182. mages box b Click Select to open the Select File dialog browse to the Desktop C LonWorks iLON iLonVision graphics lt category gt folder on your computer or the root web images and root web user demo images folders on your SmartServer flash disk click the desired image and then click OK The selected image appears in the Images box i LOM Vision Object Image Swapper Layer Data Point Mame myNetwork Channel 1 iLON SmartServer 1 Digital Output 2 1 9 Real Alias Prog Format 0000000000000000 0 5N T_switch Feedback Settings write Priority Po Use local presets Switchable Force round to preset Images Preset Value Image default gt OFF 0 00 images swibchFrontDaovwinOfF gif ON 100 01 Select Move Down c Optionally you can define a default image to be displayed when the value stored in the data point does not correspond to any of the presets defined for it To do this click lt default gt in the Images box and follow step b to select a default image d To change the image assigned to a preset select the preset from the Images box and click Select to associate a new image with the preset To remove an image from a preset so that it has no graphics associated with it select the preset from the Images box and click Delete To change the order of the presets click Up or Down To refresh the list of presets displayed click Refresh Note You can add edit and delete presets for a d
183. martServer 2 0 setup application does not launch immediately click Start on the taskbar and then and click Run Browse to the setup exe file in the root directory of the 1 LON SmartServer 2 0 DVD and click Open The Echelon i LON SmartServer 2 0 main menu opens I gt Echelon i LON SmartServer 2 0 LLON SmartServer 2 0 SO 3 Click Install Products The Install Products dialog opens ILON Vision 2 0 User s Guide 3 Echelon i LON SmartServer 2 0 Install Products ECHELON Please choose an application to install from one of the options on the right Echelon i LON SmartServer 2 0 Software p Echelon i LON SmartServer 2 0 Programming Tools Demo o Echelon i LON SmartServer 2 0 Enterprise Services o Echelon i LON Vision SmartServer 2 0 4 Echelon NodeBuilder Resource Editor o Echelon LNS Server Service Pack 5 Required for running Echelon Enterprise Services Echelon LonMaker 3 1 SP 3 Update 2 m Click here for more information Microsoft Internet Explorer 8 Adobe Reader 9 o Adobe SVG Viewer 3 03 o 4 Click Echelon i LON Vision SmartServer 2 0 The i LON Vision 2 0 Software installer opens ie Echelon i L OM Vision SmartServer 2 0 InstallShield Wizard Welcome to the InstallShield Wizard for l LON Echelon 1 LON vision SmartServer 7 0 The Install5hield R Wizard will install Echelon LLON Vision Smartserver 2 0 on vour computer To continue click Next WARNING This program is protected by copyrigh
184. n 3 The Alarm Notifier dialog opens 118 Creating Custom SmartServer Web Pages i LOM Vision Object Alarm Notifier Layer Left Width Top Height Z Index Presentation Type Summary View O History View Default Language English v Items Available Selected NetiLON LON App Alarm Motifier 0 4 Inthe Type property under Presentation select the item to be added to your custom Web page You have the following two choices e Summary View A log that that lists all currently active alarms reported by the SmartServer The user can use this log to acknowledge and clear active alarms This option provides the functionality of the Alarm Notifier Summary Web page e History View A log that lists all active and cleared alarms recorded by the SmartServer The user can use this object to view a historical list of alarms This option provides the functionality of the Alarm Notifier History Web page For information on using the Alarm Notifier Summary Web page and the Alarm Notifier History Web page see Chapter 6 Alarming 5 In the Default Language property select the language in which the property headers on the Alarm Notifier object are displayed The default language is English and you can select Deutsch German or Francais French You can localize this object and all the SmartServer Web pages into any one byte or two byte character language using either the demo version of the 1 LON SmartServer
185. n add edit and delete global presets for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The options for presets are located at the bottom of the Web page Notes To use a preset for a field within a structured data point select the Use Local Presets check box click Edit and create presets for the field The Show Presets option is incompatible with the fields of structured data points If you selected a data point field in step 4 selecting this option resets the data point to the entire structure ILON Vision 2 0 User s Guide 41 42 Force Round to Preset Show Unit Use Local Presets Link Rounds the raw value of the data point to the raw value of the nearest preset defined for the data point so that the preset is displayed on your custom Web page This property is only available if the Show Presets check box is selected Consider a SNVT temp p data point which has the following presets defined for it OCCUPIED 69 8 UNOCCUPIED 60 8 STANDBY 19 994 If the raw value of the SNVT temp p data point is 30 STANDBY is displayed on your custom Web page If the raw value of the data point is 45 UNOCCUPIED is displayed Select this check box to display the data point s unit string 1f enabled and defined This check b
186. network channel device functional block Set this property to one of the following values e SCHEDULER YEAR A yearly calendar highlighting the days in which exceptions to the daily schedule are to be executed e SCHEDULER WEEK A weekly calendar that lists the events to be executed regularly each day the week Set this property to one of the following values e view The user can click a date in the yearly calendar to open the View lt yyyy mm dd gt dialog The user can then view the schedule for that date which lists the events in both the daily and exception schedules as they are programmed to be executed e config The user can create separate schedules for individual days and change the days for which a daily schedule is applicable The user can also click a day in the weekly schedule to open the Configure Daily Schedules dialog The user can use this dialog to add edit and delete the events planned for a given set of days weekdays weekend days or other alignment If you set elon type to SCHEDULER YEAR select the method used to determine which week in January is labeled week 1 under the Wk column Set this property to one of the following values e O ISO Week 1 is based on ISO 8601 This is the default e l WeekofJan 1 The week containing January 1 is labeled Week 1 e 2 First Full Week The first week in January containing seven dates that all fall in the month is labeled Week 1 Specify the first
187. ng presets defined for it OCCUPIED 69 8 UNOCCUPIED 60 8 STANDBY 19 994 If the raw value of the SNVT_temp_p data point is 30 STANDBY is displayed on your custom Web page If the raw value of the data point is 45 UNOCCUPIED is displayed Show Unit Select this check box to display the data point s unit string Gf enabled and defined This check box is cleared by default meaning that the unit string is not displayed You can enable disable and edit the unit string defined for a data point on its Configure Data Points Web page on the SmartServer You can access this Web page from the built in SmartServer Web interface by clicking General and then clicking the data point in the SmartServer tree By default the Unit String check box in the Configure Data Points Web page is selected meaning that the unit string can be displayed on your custom Web pages You can edit the unit string and the revised unit string will appear in your custom Web pages You can clear the Unit String check box to disable the appearance of the unit string on your custom Web pages Use Local Presets Select this check box and click Edit to open the Local Presets dialog and create presets for this individual Text Field object This check box is cleared by default meaning that local presets are not used A local preset is a preset that applies to a specific instance of an i LON Vision object Local presets are especially useful if you selected a field within a
188. nnected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix o The virtual data points on the 1 LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page d Expand the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure e Click OK to return to the Radio Buttons dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Format property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US Diff or append one of these formats to the data point name if no format is specified Optionally
189. not used A local preset is a preset that applies to a specific instance of an 7 LON Vision object Local presets are especially useful if you selected a field within a structured data point and you want to represent the current value of the field using a simple meaningful string instead of a raw value 8 Click OK The Check Box object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 9 Click Publish on the Editor toolbar Ln click File and then click Publish or click the Browse tab to publish your custom Web page SVG Object You can use the SVG Object to add a horizontal or vertical slider gauge knob meter or thermometer representing the value of a data point or the field of a structured data point as a percentage The user can write to the data point or field by adjusting the object The SVG Object is ideal for controlling light and power levels The following graphic illustrates the SVG object that you insert in your custom Web pages SVG Objects Thermometer 2 Click Insert and then select SVG Object Creating Custom SmartServer Web Pages 3 LON Vision File Edit view BOSS Format Table Help EI M
190. nu htm Menu Bar Page Title Message Box and Menu Buttons Main Window lt Custom Web pages gt htm This is where your new web pages go Copyright Statement Copyright htm 11 Clear the check boxes for any of the frames you do not want to use for your custom Web pages For example if you plan on only using a menu bar for your navigation system you can clear the Sidebar check box Note The settings in the Frameset dialog will not be saved if the folder to which you are adding the home page does not already exist ILON Vision 2 0 User s Guide 127 12 Optionally you can adjust the height of the menu and copyright frames and the width of the sidebar frame using their respective Height and Width properties 13 Click OK to return to return to your home page 14 Optionally add any images or text to your home page The images and text you add will be placed in the application frame in the center of the initial Web page index htm that users will see they open your Web design For example you can add the building gif image in the root web images folder on your SmartServer flash disk and text summarizing the functionality provided by your custom Web pages 3 EON Vision 5 File Edit view Insert Format Table Help S ef i xX Y W e A Y http 10 2 124 165 user Custom home htm v Ez Q X 5 Back Reload Stop Home Choose New Publish Discard 2 A B 7 Ul 0 HAX Browse 4 Layout D You can use t
191. o be opened when the user clicks the item This can be a built in SmartServer configuration Web page or a custom SmartServer Web page on your local SmartServer or on another SmartServer To set the destination follow these steps i Inthe URL box under Destination enter the URL of the destination Web page or click Choose to open the Select File dialog browse to the htm file of the destination Web page click the htm file and then click OK ii In the Target box you can select how the destination Web page is opened By default the destination Web page 1s opened in the application frame appFrame with the frameset preserved This enables your custom Web pages to appear in the application frame in the center of the frameset You can select one of the other following options e Select menuFrame to open the destination Web page in the menu frame with the frameset preserved e Select sidebarFrame to open the destination Web page in the sidebar frame with the frameset preserved e Select copyrightFrame to open the destination Web page in the copyright frame with the frameset preserved e Select blank from the pull down list to open the destination Web page in a new window e Select top from the pull down list to open the destination Web page in the current window but replace the frameset 1f used e Select the Open in Popup check box to open the Web page in a pop up dialog If you select this check box specify the dimensions o
192. o return to the Text Field dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Format property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US Diff or append one of these formats to the data point name if no format is specified 5 Optionally if you selected a field within a structured data point you can set constant values to be written to one to all of the other fields in the data point automatically when a value is written to the selected field This ensures that the other field or fields in the structured data point are set to specific values whenever the Text Field object is used on the selected field Using a SNVT switch data point for example you can have SNVT switch state be set to 1 each time a value is written to SNVT switch value To set constant values for the other fields in a structured data point follow these steps a Click Const Fields The Constant Fields dialog opens 1 LON Vision Constant Fields 10 2 124
193. of the SmartServer Web pages see the i LON SmartServer 2 0 Programming Tools User s Guide In the Minimum and Maximum properties set the minimum and maximum values displayed on the y axis of the trend graph if you selected Graph or Graph and Table in step 4 Select the data point to be monitored by the Data Point View object following these steps a Click Add The Data Point Properties dialog opens 1 LON Vision Data Point Properties Data Point Settings b Click Select The Select Data Point dialog opens c To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigation pane d Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block gt lt data point gt This is the default e Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web
194. of the other following options e Select menuFrame to open the destination Web page in the menu frame with the frameset preserved e Select sidebarFrame to open the destination Web page in the sidebar frame with the frameset preserved e Select copyrightFrame to open the destination Web page in the copyright frame with the frameset preserved e Select blank from the pull down list to open the destination Web page in a new window e Select top from the pull down list to open the destination Web page in the current window but replace the frameset if used e Select the Open in Popup check box to open the Web page in a pop up dialog If you select this check box specify the dimensions of the pop up dialog This check box is cleared by default 1 LON Vision Object Navigation Link Presentation Icon fuser fdemofimages House gif Label Building Link d Click Name Substitution Values The Substitutions dialog opens i Click the placeholder you specified in step 4 of the previous section ii Inthe Value box enter the value to replace the placeholder For this example enter 1 for the first submenu item Room 1 and enter 2 for the second submenu item Room 2 iii Click Save e When the Room llink is clicked the Net LONALON App Digital Output x nviClaValue_ x data point in the switch image swapper object points to the Net LON ALON App Digital Output 1 nviClaValue_1 data point and the Net LON ALON Ap
195. of the right frame of the ResourceBundle Editor view Note that all the properties listed in the left frame are marked with warning symbols indicating that the property has not yet been translated Once you enter a translation for a property the warning symbol is removed n Translate each key listed in the left frame You can do the translation from the Properties tab recommended or from your language s tab Advanced SmartServer 2 0 Web Page Topics e To translate the properties from the Properties tab click each property listed in the left frame and enter a translation in your language box in the right pane one by one fa nlsExample_es properties properties X b Editor For ResourceBundle nlsExample amp s properties properties Default Spanish Estado de Alarma LB sponsh Ei New You can comment out the text in a translation by selecting the checkbox amp in the upper right side of the language box You can switch to your language s property tab by clicking the arrow gt on the upper right hand corner of your language box e To translate the properties from your language s tab first copy the Default English translation and paste it into your language s tab You can begin translating the properties listed in your language s tab Ig nisExample_es properties properties X ditor For ResaurceBundle nlsExample e amp s properties properties
196. oint If you set a priority that is less than priority used by the last application that updated the data point a red hand icon 77 appears to the left of the data point when you publish your custom Web page You will need to edit the page and enter a higher priority in this dialog to be able to write to the data point If you set a priority that is equal to or higher than that assigned to the last application or object that updated the data point a green hand icon appears to the left of the data point Other applications or objects can write to the data point when one of the following events occurs e The user clicks the green hand icon to unlock the data point temporarily reset the Check Box object s priority to 255 so that lower priority applications or objects can write to the data point When the user enters an updated value in the text field the Check Box object will have the data point locked again the priority returns to the value you specified e The lower priority application or object specifies a priority that is equal to or higher than the one you specified for the Check Box object For more information on using priorities see Using Data Point Priorities in Chapter 4 ILON Vision 2 0 User s Guide 81 82 Use Local Presets Select this check box and click Edit to open the Local Presets dialog and create presets for this individual Check Box object This check box is cleared by default meaning that local presets are
197. olbar S click File and then click Publish or click the Browse tab to publish your custom Web page Alarm Notifier You can use the Alarm Notifier object to create the following items a log that that lists all currently active alarms reported by the SmartServer a log that lists all active and cleared alarms recorded by the SmartServer or an e mail message to be sent to a technician maintenance company or other personnel notifying them of an alarm condition To use this object there must be one or more configured Alarm Notifiers on your SmartServer See Chapter 6 of the 7 LON SmartServer 2 0 User s Guide for more information on adding and configuring an Alarm Notifier using the SmartServer s built in Web pages To add an Alarm Notifier object to your custom SmartServer 2 0 Web page follow these steps A 1 Click Edit on the Editor toolbar el or click the Layout tab 2 Click Insert and then select Alarm Notifier 7 LON Vision 5 File Edit View BOSS Format Table Help M HTML Elements of i http 10 2 124 165 user Custom v qe S X 5 Back Show Value Choose New Publish Discard E Text Field j A As Text Area od E E XX Browse P Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SvG Object Link Data Point View Data Log View Scheduler falar Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Butto
198. om SmartServer Web Pages LLON Vision Select Folder E 10 2 124 185 images J nl G scripts 3 styles O user O Custom images O demo 3 echelon 3 myCustom 3 shared 3 WSDL 2 Select the folder where your home page will be stored and then click OK 3 Click Publish on the Editor toolbar click the Browse tab or click File and then click Publish The Publish As dialog opens 4 Inthe File Name property enter the name of your home page s htm file one word with no spaces and then click OK For this example the file name is home 1 LON Vision Publish As 10 2 124 165 Folder File Name Note The default page title is based on this file name You can edit the page title for the Web page as described in Changing the Page Title earlier in this chapter 6 Click Format and then select Frameset ILON Vision 2 0 User s Guide 125 7 LON Vision z File Edit View Insert MDE Table Help 8 S w Size gt 124 165 user Customfhome htm v m Sd Q 8 Back F rd Reload Text Style Choose New Publish Discard m a A Text Color 3 o a pravena ra P Browse P Layout Discontinue Text Styles Discontinue Link Increase Indent Align Advanced Properties Page Colors and Background Page Title and Properties Frameset 7 The Frameset dialog opens 1 LON Vision Frameset 10 2 124 165 Settings Frameset URL Frames
199. on box that the user can use to display the data recorded over a specific time range 9 Inthe Instance box select the Data Logger functional block on the SmartServer to be used for the Data Log View object By default the first Data Logger instance created on the SmartServer is selected Once you select a Data Logger functional block all the data points added to that data logger are listed in the Selected box under Data Points To update the list of available Data Loggers click Refresh 10 Optionally you can hide data points that you do not want charted and or listed in the Data Log View object To do this click the data point in the Selected box and then click the left arrow to move the data point into the Available box You can show hidden data points by clicking them in the Available box and then clicking the right arrow to move them back to the Selected box 11 Click OK The Data Log View object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties Drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 12 Click Publish on the Editor toolbar ra click File and then click Publish or click the Browse tab to publish your custom Web page For information on using the graph and table in the Data Log View object see the Viewing Data Logs section in C
200. on pane Creating Custom SmartServer Web Pages c Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block data point This is the default e Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix o The virtual data points on the i LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page d Expand
201. on sales representative For more information on localizing the language of the SmartServer Web pages see the i LON SmartServer 2 0 Programming Tools User s Guide ILON Vision 2 0 User s Guide 203 Object Specific Properties The following sections provide the proprieties required by the various i LON Vision objects Show Value Properties The Show Value object is a simple read only control displays the current data point value either as a preset 1f defined for the data point or as a raw value The following table lists the properties of the Show Value object Link A Show Value object may serve as a clickable link if you define href and target HTML attributes You can open the link in a pop up dialog by setting target to popup and setting the popup width and popup height properties Text Field Properties The Text Field object is a simple read write text box that displays the current data point value either as a preset 1f defined for the data point or as a raw value You can update the data point by typing a valid value and pressing ENTER The following table lists the properties of the Text Field object elon size int The number of characters to display in the control If you not specify this property the size is set to number of characters in the largest preset name elon max length int The maximum number of characters the text field can display You should make sure this is large enough to display the values that could
202. on using priorities see Using Data Point Priorities later in this chapter Enter the number of rows in the text area Each row will display the value of the data point after an update For example if you enter 10 the text area would display the last 10 values assigned to the data point Once the text area has received an amount of updates matching the number of rows you specified older values are deleted to enable newer values to be logged The default number of rows is 5 Enter the number of characters to be displayed in each row You should enter enough characters to fit the values that may be assigned to the data point If you do not enter enough characters the text area will include a scroll bar the user can use to see the whole value The default number of columns is 10 Select this check box to enable users to write values to the data point in the text area If the check box is selected the user can write a value with the text area by changing the most recently displayed value and then clicking outside the text area Once the user enters a value in the text box the entered value is placed in a separate group apart from the logged values and a scroll bar is added to the text area The user can use this scroll bar to view logged and entered values Specify whether the most recent data point updates are listed at the Top or Bottom of the text area The default is Bottom Select this check box to display the data point s global pre
203. onality provided by the Scheduler object You have the following two choices e View If you selected Week in step 5 the user can click a day in the weekly calendar to open the View Daily Schedules dialog The user can then view the regular schedule for that day without exceptions which includes only the events in the daily schedule If you selected Year in step 5 the user can click a date in the yearly calendar to open the View lt yyyy mm dd gt dialog The user can then view the schedule for that date which lists the events in both the daily and exception schedules as they are programmed to be executed Dates in which the regular daily schedule is to be executed without any exceptions are highlighted grey in the calendar dates in which there are exceptions to the daily schedule are highlighted light blue e Config If you selected Week in step 5 the user can create separate schedules for individual days and change the days for which a daily schedule is applicable The user can also click a day in the weekly schedule to open the Configure Daily Schedules dialog The user can use this dialog to add edit and delete the events planned for a given set of days weekdays weekend days or other alignment For more information on defining the daily schedule and creating events for it see the Creating Daily Schedules section in Chapter 7 Scheduling If you selected Year in step 5 the user can right click anywhere in the yearly calendar to
204. onitor data points as they indicate the current value stored in the data point Data point read write objects include the Show Value Text Field Text Area Combo Box Image Swapper Radio Buttons Select Box Check Box Slider and Custom JavaScript objects ILON Vision 2 0 User s Guide 33 e Application objects Application objects represent the embedded applications on the SmartServer that you can expose through your custom Web pages Application objects include the Scheduler Data Point View Data Log View and Alarm Notifier e Link Object A link object is an icon button or text that has hyperlink that the user can click to access another Web page including a custom SmartServer Web on your local SmartServer or on another SmartServer Adding Data Points of External Devices If you plan on monitoring and controlling the data points of external devices that are managed with the LonMaker tool LNS tree or another LNS application you must first copy the data points from the LNS tree to the local SmartServer tree Once you add the data points to the SmartServer tree you can create i LON Vision objects that to monitor and control them To copy data points from the LNS tree to the SmartServer tree follow these steps Install the Echelon Enterprise Services from the i LON SmartServer 2 0 DVD See Chapter 1 of the Echelon Enterprise Services 2 0 User s Guide for more information If you installed Echelon Enterprise Services SR2 you must insta
205. ool to create or edit custom SmartServer 2 0 Web pages stored on a SmartServer 2 0 2 Creating Custom SmartServer Web Pages e You can use Adobe Dreamweaver CS4 Contribute CS3 or CS4 without i LON Vision 1 0 or any other Web publishing tool to manually create and edit custom SmartServer 2 0 Web pages Chapter 5 includes the API for the i LON Vision objects so that you can use any Web publishing tool to create and edit SmartServer 2 0 Web pages Note A SmartServer 2 0 refers to a SmartServer running the Release 4 03 firmware or higher SmartServer 1 0 refers to a SmartServer running the Release 4 4 01 or 4 02 firmware You can use the Setup System Info Web page to view the version of the current firmware on your SmartServer To open this Web page right click the SmartServer icon in the navigation pane on the left side of the SmartServer Web interface point to Setup and then click System Info on the shortcut menu Installing Echelon 1 LON Vision 2 0 Software To install the i LON Vision 2 0 software follow these steps 1 Insert the 7 LON SmartServer 2 0 DVD into your DVD ROM drive If your computer does not have a DVD ROM insert the i LON SmartServer 2 0 DVD on a network accessible computer that has a DVD ROM and copy the files on the DVD to a shared network drive You can then copy the i LON SmartServer 2 0 files from the shared drive to your computer and install the various i LON SmartServer 2 0 products 2 Ifthe LON S
206. or both the log and trend graph elon_show_grid boolean If you set elon_layout string to graph or graphtable specify whether the trend graph displays a grid in the background Data Log View Properties 206 The Data Log View object is a log that lists the data point updates recorded by a specific Data Logger on the SmartServer The following table lists the properties of the Data Log View object elon_name The key to a specific Data Logger instance Specify the UCPTname property of the data logger s functional block in the following format network channel device functional block elon_layout string Set this property to either graph trend graph table log or graphtable for both the log and trend graph elon_show_grid boolean If you set elon_layout string to graph or graphtable specify whether the trend graph displays a grid in the background i LON Vision 2 0 API Scheduler Properties The Scheduler object is a weekly calendar that lists the events to be executed regularly each day the week or a yearly calendar highlighting the days in which exceptions to the daily schedule are to be executed The following table lists the properties of the Scheduler object elon name elon type elon usage elon year start elon week start 0 6 ILON Vision 2 0 User s Guide The key to a specific Scheduler instance Specify the UCPTname property of the scheduler s functional block in the following format
207. ority Assign the priority the Image Swapper object has for writing updated values to the data point This value may range from 0 to 255 highest to lowest priority The priority you specify must be equal to or higher than the priority used by the last application that updated the data point If you set a priority that is less than priority used by the last application that updated the data point a red hand icon 77 appears to the left of the data point when you publish your custom Web page You will need to edit the page and enter a higher priority in this dialog to be able to write to the data point If you set a priority that is equal to or higher than that assigned to the last application or object that updated the data point a green hand icon amp appears to the left of the data point Other applications or objects can write to the data point when one of the following events occurs e The user clicks the green hand icon to unlock the data point temporarily reset the Image Swapper object s priority to 255 so that lower priority applications or objects can write to the data point When the user enters an updated value in the text field the Image Swapper object will have the data point locked again the priority returns to the value you specified e The lower priority application or object specifies a priority that is equal to or higher than the one you specified for the Image Swapper object For more information on using prioriti
208. ould open in the 7 LON Vision 2 0 browser 7 LON Vision 5 File Edt view ble Help TD y O Qan LEET i M Sj Y http 10 2 124 165 user Custom CustomWebPage htm v Zj l a 5 Back Forward Reload Stop Home Choose New Edit Discard m 2 s MAX Browse 2 Layout 9 Click the switch icon to enable and disable Digital Output 1 When you click the switch icon observe that the lamp icon turns on and off indicating the current state of Digital Output 1 In addition you can observer that the Output 1 LED on the SmartServer hardware lights and turns off when you click the switch icon Note You can re design the SmartServer s factory home page including adding your own buttons that link to your custom Web pages by editing the index htm file in the root web folder If you re design the SmartServer home page you must preserve the Configuration amp Service and Login buttons at the top of the page ILON Vision 2 0 User s Guide 27 28 Quick Start Exercise 3 Creating Custom SmartServer 2 0 Web Pages This chapter describes how to create simple custom SmartServer 2 0 Web pages and more complex Web designs that include a navigation system It describes how to upgrade existing custom Web pages to SmartServer 2 0 Web pages It describes how to add i7 LON Vision objects to your custom Web pages and design a navigation system for your Web design ILON Vision 2 0 User s Guide 29 Introduction You can c
209. ox is cleared by default meaning that the unit string is not displayed You can enable disable and edit the unit string defined for a data point on its Configure Data Points Web page on the SmartServer You can access this Web page from the built in SmartServer Web interface by clicking General and then clicking the data point in the SmartServer tree By default the Unit String check box in the Configure Data Points Web page is selected meaning that the unit string can be displayed on your custom Web pages You can edit the unit string and the revised unit string will appear in your custom Web pages You can clear the Unit String check box to disable the appearance of the unit string on your custom Web pages Select this check box and click Edit to open the Local Presets dialog and create presets for this individual Show Value object This check box is cleared by default meaning that local presets are not used A local preset is a preset that applies to a specific instance of an 7 LON Vision object Local presets are especially useful if you selected a field within a structured data point and you want to represent the current value of the field using a simple meaningful string instead of a raw value You cannot select the Show Presets check box to use global presets for a field within a structured data point You can link this object to another Web page by doing one of the following e Inthe URL box enter the URL of the Web page
210. p Digital Output x nvoClaValueFb_ x in the lamp image ILON Vision 2 0 User s Guide 169 swapper object points to the Net LON ILON App Digital Output 1 nvoClaValueFb_1 data point 1 LON Vision Substitutions Mame x Status za new placeholder gt e When the Room 2 link is clicked the Net LONALON App Digital Output x nviClaValue_ x data point in the switch image swapper object points to the Net LON ILON App Digital Output 2 nviClaValue_2 data point and the Net LON ILON App Digital Output x nvoClaValueFb_ x in the lamp image swapper object points to the Net LON ILON App Digital Output 2 nvoClaValueFb_2 data point 1 LON Vision Substitutions Value 2 170 Advanced SmartServer 2 0 Web Page Topics iv Optionally in the Page Background property click From PC or From iLON to add a background image to the Web page that appears when the link to the room is clicked v Click OK to return to the Navigation Link dialog e Click OK to return to the Navigation dialog 7 Click OK to return to the Layout tab 8 Click Publish on the Editor toolbar click the Browse tab click the Browse tab or click File and then click Publish to save the current draft of your custom SmartServer 2 0 Web page powerep BY SS ECHELON READ WRITE OBJECTS APPLICATION OBJECTS i LON SmartServer Custom Web Pages amp Read Write Objects g Aptcatibo Objects You can use these custom Web pages Building to sampl
211. page unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page Creating Custom SmartServer Web Pages 9 Click Publish on the Editor toolbar Le click File and then click Publish or click the Browse tab to publish your custom Web page Select Box The Select Box object is a drop down combo box that displays the current value of a scalar data point enumerated data point or a field within a structured data point The user can write to the data point or field by selecting a preset or enumeration from the attached list box To add a Select Box object to your custom SmartServer 2 0 Web page follow these steps A 1 Click Edit on the Editor toolbar elt or click the Layout tab 2 Click Insert and then select Select Box 7 LON Vision t File Edit view BGS Format Table Help M HTML Elements i m ee a X ji lt lt X http 10 2 124 165 user Custom v tud 5 Back Show Value Choose New Publish Discard 2 G we Text Field 7 A Text Area XAK Browse P Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript If m LU Navigation Page Title Message Box Menu Button 3 The Select Bo
212. paste into a table This may be useful if the layers containing the 7 LON Vision objects are affecting the desired Web page design To add ani LON Vision object to a table follow these steps 1 Click the 7 LON Vision object to be moved so that the object is highlighted blue 2 Click Edit and then click Cut or press CTRL X 3 Delete the Layer previously containing the object being moved 4 Click the destination table row 5 Click Edit and then click Paste or press CTRL V The object is pasted to the destination table row 6 Repeat steps 1 6 for additional i LON Vision objects to be placed in the table 7 LON Vision M File Edit View Insert Format Table Help 1049 i X Sj SE http 10 2 124 165 user myCustom MoveImage htm 8 Back Reload Stop Home y Choose New Publish Discard i 2 AIB I E a 0 2X Browse P Layout ON OFF Net LONALON App Digital Output l nviClaVahe_1 192 Advanced SmartServer 2 0 Web Page Topics 7 Click Publish on the Editor toolbar click the Browse tab or click File and then click Publish to verify that the objects are positioned as desired in the table 7 LON Vision 5 File Edit view Help T 85062 Qu i M i Y http 10 2 124 165 user myCustom MoveImage htm v d A a i Back Reload Stop Home Choose New Edit we ox MX Browse 2 Layout 100 0 1 Adding Images to a Layer You can freely move the images added to your custom
213. per check box and show value objects The API for the i LON Vision objects are now documented so that you can use any Web publishing tool to create and edit SmartServer 2 0 Web pages LLON Vision 2 0 Compatbility with i LON Vision 1 0 The following summarizes i LON Vision 2 0 compatibility with 1 LON Vision 1 0 e You can install both LON Vision 2 0 and i LON Vision 1 0 on the same computer In this case you use i LON Vision 2 0 to create custom SmartServer 2 0 Web pages and you use 7 LON Vision 1 0 with Contribute CS3 CS4 to create custom Web pages for the SmartServer 1 0 and 7 LON e3 Internet Server The tools remain independent so installing i LON Vision 2 0 does not add any of the new features described in this section to i LON Vision 1 0 e You can use i LON Vision 2 0 to automatically upgrade all existing custom Web pages to the SmartServer 2 0 format This includes all custom SmartServer 1 0 Web pages previously built with i LON Vision 1 0 and Contribute CS3 CS4 and custom i LON e3 Internet Server Web pages previously built with LON Vision 1 0 and Contribute 3 0 3 1 CS3 CS4 See Upgrading Custom Web Pages to SmartServer 2 0 Pages in Chapter 3 for more information e You can use i LON Vision 2 0 to create or edit custom SmartServer 2 0 Web pages stored on a SmartServer 2 0 You cannot use 1 LON Vision 2 0 to create or edit custom SmartServer 1 0 Web pages stored on a SmartServer 1 0 Conversely you cannot use the 7 LON Vision 1 0 t
214. point The user can write to the data point or a field by entering a value or a preset Scrolling text box that logs the values assigned to a data point or to a field within a structured data point By default the user can read and write to data points with this object but you can make this object read only Combo box that displays the current value of a data point or a field within a structured data point The user can write to the data point or field by entering a value or selecting a preset from the list Dynamic images representing data point presets By default the user can read and write to data points with this object but you can make this object read only Radio buttons for reading and writing to a data point or an enumerated field within a structured data point The user can write to the data point or enumerated field by selecting a button representing a data point preset or enumeration Drop down combo box that displays the current value of a data point or an enumerated field within a structured data point The user can write to the data point or enumerated field by selecting a preset or enumeration from the list Check box representing the first preset defined for the data point when checked and representing the second preset defined for the data point when cleared The user can ILON Vision 2 0 User s Guide Graphic 35 i LON Vision Read Write Description Graphic Object write to the data po
215. point to the raw value of the nearest preset defined for the data point so that the preset is displayed on your custom Web page This property is only available if the Show Presets check box is selected Consider a SNVT_temp_p data point which has the following presets defined for it OCCUPIED 69 8 UNOCCUPIED 60 8 STANDBY 19 994 If the raw value of the SNVT_temp_p data point is 30 STANDBY is displayed on your custom Web page If the raw value of the data point is 45 UNOCCUPIED is displayed Creating Custom SmartServer Web Pages Show Unit Select this check box to display the data point s unit string 1f enabled and defined This check box is cleared by default meaning that the unit string is not displayed You can enable disable and edit the unit string defined for a data point on its Configure Data Points Web page on the SmartServer You can access this Web page from the built in SmartServer Web interface by clicking General and then clicking the data point in the SmartServer tree By default the Unit String check box in the Configure Data Points Web page is selected meaning that the unit string can be displayed on your custom Web pages You can edit the unit string and the revised unit string will appear in your custom Web pages You can clear the Unit String check box to disable the appearance of the unit string on your custom Web pages Use Local Presets Select this check box and click Edit to open the Local Presets dia
216. position on your custom SmartServer 2 0 Web page Notes When you publish a custom SmartServer Web page that includes an SVG object the SVG object and its image svg and gif files are copied from the C LonWorks ALON iLonVision extensions 53D26F30 C12B 11DD 9FAE D50A1AG6FO0FEF chrome content custom svgcontrol folder on your computer to the root web images iLon VisionExtensions folder on the SmartServer flash disk Creating Custom SmartServer Web Pages e If you want to implement an updated SVG object in an existing custom SmartServer Web page you need to delete the SVG object s svg and gif files from the root web images iLonVisionExtensions folder on the SmartServer flash disk open the Web pages containing the existing SVG object double click the SVG object select the updated SVG object in the Presentation property in the SVG dialog and then publish your Web page 11 Click Publish on the Editor toolbar e click File and then click Publish or click the Browse tab to publish your custom Web page Custom J avaScript Object You can write JavaScript code to implement specialized dynamic objects that can read and write to data point properties The properties that you can get and set include the value state name priority format description and unit string of a data point You can use the Custom JavaScript object to create objects ranging from simple read write objects to intricate flash presentations To create a Custom JavaSc
217. provided by the application objets LON Vision toolkit Data Point View f Data Logger View Scheduler 13 You can test your navigation pane by clicking an item in the tree or expanding an item and then clicking one of the submenu items and verifying that correct destination Web page opens powerep BY S ECHELON ET AME TAI i HB andi Back READ WRITE OBJECTS APPLICATION OBJECTS Custom JavaScript Examples E Read write Objects u Ed Image Swapper 84 1 JavaScript Slider N TAE et LONALON App VirtFb t f Q Application Objects Data Point View 3 Data Logger view E Scheduler Data Point Name Net LON ALON App VirtFb temp f Value 84 F Status AL_ALM CONDITION Priority 255 Adding a Vertical Menu to the Sidebar Frame You can add a vertical menu to all your custom Web pages by adding the Navigation menu object to the sidebar frame The user can then click the items in the vertical menu to open your custom Web pages To add a vertical menu to your custom Web pages follow these steps 1 Click Insert and then select Navigation 2 The Navigation dialog opens 3 Click the Menu option 4 In the Orientation property under Menu select Vertical ILON Vision 2 0 User s Guide 151 1 LON Vision Object Layer Left Width Top Height Z Index O Tree Default Language Engish Addressing Menu Presentation Entries root
218. r lt Custom gt folder and not to any of your custom Web pages After I ve accessed my custom Web pages I cannot use Internet Explorer s Back button to go back to my SmartServer s home page You can get back to your SmartServer s home page by using the Back button pull down and selecting i LON from the list You can avoid this problem completely by using a Frameset Properties object on the main Web page or by have your custom Web page start in a new Web browser window I do not see anything on my first custom Web page Look at the properties of the Frameset object from the Sidebar htm Menu htm or Copyright htm pages and make sure that you have selected a default Web page I copied my custom Web page directory into a new directory with FTP but I cannot see any of my new changes ILON Vision 2 0 User s Guide 199 You copied the files but all the links are for the old directory You need to change any link that that has your custom Web page directory included in the path Also check your Sidebar htm and Menu htm links I added an image to my Web page but I cannot move it around This image is not an 7 LON Vision object so it was added to the Web page main layer You need to move the image from the main layer to an i LON Vision layer object You can do this by adding an i LON Vision Layer object selecting the image and cutting it CTL X and then selecting the new Layer and pasting the image CTL V 200 Advanced SmartServer 2
219. r new Web page and you specify the value substitution tag to be used to replace the floor and room placeholders when the Web page is opened For example when you create the menu item for Floor 2 Room 3 you would enter 2 for the floor placeholder and 3 for the room placeholder When the user clicks the menu item for Floor 2 Room 3 your new Web page will open and it will display the current switch and lamp values for Floor 2 Room 3 Using data point substitution tags to create a Web page that can be re used to monitor and control multiple data points entails doing the following 1 Adding placeholder values to the names of the data points to be monitored and controlled by the read write objects on a custom Web page 2 Specifying substitution tags for the placeholder values on a navigation object menu or tree in the menu or sidebar frame Adding Placeholder Values to a Data Point Name 164 To add placeholder values to a data point name follow these steps 1 Create a new custom SmartServer 2 0 Web page See Step 2 Creating a Custom SmartServer Web Page in the quick start exercise in Chapter 2 for more information on how to do this d 2 Click Edit on the Editor toolbar amp or click the Layout tab click Insert and then select an i LON Vision read write object to represent a data point that exists in specific areas within a given system See Adding Data Point Read Write Objects in Chapter 3 for more information on the
220. r text objects that display the name value and unit string status and priority of the data point respectively Note You can use this object on any data point type Data Point Name Net LONALON App VirtFb temp f Value 85 F Status AL ALM CONDITION Priority 220 function Show DataPoint Properties Example argObj this update function type item if type Dp_Data m textO innerHTML item UCPTname get m textl innerHTML item UCPTvalue 0 get m textl format innerHTML item UCPTvalue 0 Unit get m text2 innerHTML item UCPTpointStatus get m text3 innerHTML item UCPTpriority get j var m domObj argObj domObj read DP Name var DP name text m domObj appendChild document createTextNode Data Point Name EDI var m textO m domObj appendChild document createElement text var break0 m domObj appendChild document createElement br read DP value and unit string var DP value text m domObj appendChild document createTextNode Value var m textl m domObj appendChild document createElement text var m textl format m domObj appendChild document createElement text var breakl m domObj appendChild document createElement br read DP status var DP status text m domObj appendChild document createTextNode Status ILON Vision 2 0 User s Guide 95 96 var m text2 m domObj appendChild document createElement text
221. reate simple custom SmartServer 2 0 Web pages as demonstrated in the quick start exercise in the previous chapter You can also create more complex Web designs featuring more intricate i LON Vision objects for monitoring and controlling the data points on your SmartServer such as Custom JavaScript objects schedulers data loggers data point graphs and alarm notifiers In addition you can implement a navigation system in your Web design by adding menus and navigation panes to your Web pages You can create simple to complex custom SmartServer 2 0 Web pages following these steps 1 Create a Website connection between 1 LON Vision 2 0 and your SmartServer For more information on how to do this see Step 1 Creating a Web Site Connection in the quick start exercise in the previous chapter 2 Configure i LON Vision 2 0 preferences You can set the language for user interface select whether the data point names and layers are displayed in the Layout view select whether all network objects are displayed in the data point selection dialog and select the default Web browser 3 If you plan on using existing custom SmartServer 1 0 or i LON e3 Server Web pages on your SmartServer 2 0 upgrade them to the SmartServer 2 0 format 4 Create one or more custom SmartServer 2 0 Web pages For more information on how to do this see Step 2 Creating a Custom SmartServer Web Page in the quick start exercise in the previous chapter Note that all your custo
222. right click the network variable in the LNS tree select Copy External NV on the shortcut menu right click any object in the network tree of the target SmartServer and then click Paste External on the shortcut menu Adding Data Point Read Write Objects Data point read write objects are simple tools for monitoring and controlling data points Controlling data points with these objects typically entails one click or a simple text entry You can also use these objects to monitor data points as they indicate the current value stored in the data point The following table lists summarizes and demonstrates the data point read and write objects that you can add to your custom Web pages The right column shows how each object will appear on your published Web page when it is monitoring and controlling a SNVT switch data point Note that each object will appear slightly different when you are editing the Web page For example the data point name will be displayed below the object when you edit the Web page but not after the Web page has been published i LON Vision Read Write Description Graphic Object 34 Creating Custom SmartServer Web Pages i LON Vision Read Write Object Show Value Text Field Check Box Description Text that displays the value of a data point or a field within a structured data point This object is read only Text box for reading and writing to a data point or a field within a structured data
223. ript object you do the following l Write your HTML JavaScript code In your code you must implement the following JavaScript class which enables updates to the specified data point property to be passed your custom object function CustomJavascriptClass argObj public method that handles SOAP objects this update function type item if type Dp Data get DP property m domObj innerHTML item UCPT lt DP property gt get you can get and set these DP properties from item UCPTname UCPTvalue index UCPTvalue index LonFormat UCPTvalue index Unit UCPTpriority UCPTpointStatus constructor that instantiates your JavaScript class and specifies the DOM object to which it belongs var m_domObj argObj domOb j Py EchelonTop Echelon provide lt CustomJavascriptClass gt document Note You must set the UCPTvalue index LonFormat property to the appropriate SNVT UNVT SCPT or UCPT if you are writing formatted values to certain data point types In addition the formatted values must be written as strings to those data point types If you are using presets to write to the data points you do not need to set this property The data point types requiring the LonFormat property are as follows e Structured data points for example SNVT switch For example if you are writing 100 0 1 toa SNVT switch data point you must set this property m myDp UCPTvalue 0 LonFormat s
224. rity 255 a a Data Point Name Net LON LON App Digital Output 2 nvoClaValueFb 2 In general you can test your data point substitution tags following these steps 1 Write unique values to the data points using the View Data Points Web page in the built in SmartServer Web pages 2 Browse to your root web lt Custom gt index htm file 3 Click the menu items or submenu items in your menu or tree that link to your custom SmartServer 2 0 Web page using data point substitution tags 4 Verify that the values displayed correspond to those specified in step a Using the NLS Text Object You can use the NLS Text object and the 1 LON SmartServer 2 0 Programming Tools to translate a custom SmartServer 2 0 Web page into multiple languages The NLS Text object provides a single user defined key that you can associate with multiple text strings in different languages These text strings are saved in properties files corresponding to the custom Web page and their respective languages for example page properties page de properties page es properties and so on The properties files must be stored in an nls folder in the same directory as the custom SmartServer 2 0 Web page You can create the properties files using either the demo version of the 1 LON SmartServer 2 0 Programming Tools included on the i LON SmartServer 2 0 DVD or using the full version on the 1 LON SmartServer 2 0 Programming Tools included on the i LON SmartServer
225. rity application or object specifies a priority that is equal to or higher than the one you specified for the Select Box object For more information on using priorities see Using Data Point Priorities in Chapter 4 Width Optionally you can enter the width of the select box in pixels By default the width of the Select Box object is set to fit the preset or enumerated value with the longest name Height Enter the height of the Select Box object in pixels The default height is 1 Use Local Presets Select this check box and click Edit to open the Local Presets dialog and create presets for this individual Select Box object This check box is cleared by default meaning that local presets are not used A local preset is a preset that applies to a specific instance of an i LON Vision object Local presets are especially useful if you selected a field within a structured data point and you want to represent the current value of the field using a simple meaningful string instead of a raw value 8 Click OK The Select Box object is added to your custom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties If you selected the Layer check box drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 9 Click Publish on the Editor toolbar S click File and then click Publi
226. rmat property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US Diff or append one of these formats to the data point name if no format is specified 5 Optionally if you selected a field within a structured data point you can set constant values to be written to one to all of the other fields in the data point automatically when a value is written to the selected field This ensures that the other field or fields in the structured data point are set to specific values whenever the Combo Box object is used on the selected field Using a SNVT switch data point for example you can have SNVT switch state be set to 1 each time a value is written to SNVT switch value To set constant values for the other fields in a structured data point follow these steps a Click Const Fields The Constant Fields dialog opens b The data point field you selected in step 4 is marked as dynamic c Click the data point field to be set to a constant value d In the Value field set the constant value to be written to the data point field selected in step d ILON Vision 2 0 User
227. roperties file has been added to the LonWorksuLON DevelopmentveclipseWorkspace fpmWls folder on your computer 176 Advanced SmartServer 2 0 Web Page Topics C C nlsExample properties properties Eclipse SDK File Edit Refactor Navigate Search Project FPM Run Window Help Si DB 63 d 3 5 O Q Ov iG it s FY T cict O jy nisExample properties properties P3 B Outline x2 Bd Default nlsExample properties LonMark Resource View 3 d Server IP Address 10 2 124 53 amp 10 2 124 53 Add jy Properties P Default F New ai Problems 23 Console Properties o errors 0 warnings 0 infos Description Resource On nls nisExample properties f Inthe bottom left hand corner of the ResourceBundle Editor view enter the key you created for the NLS Text object in step 5 and then click Add Repeat this step for all NLS Text objects you created in your custom SmartServer 2 0 Web page lla nlsExample praperties properties X ditor For ResourceBundle nlsExample properties properkies Default Emm ITE ADEL LP RATL g The keys are added to the list of keys ILON Vision 2 0 User s Guide 177 ll nlsExample properties properties X Default a ALARM TEMPERATURE Droes Beant Bnew OOOO h In the Default frame on the right
228. rs Co only For me Jonathan Duval 7 Enter your name and company name in the appropriate fields The name and company may be entered automatically based on the user currently logged on and whether other Echelon products are installed on your computer Click Next The Destination Folder window opens ILON Vision 2 0 User s Guide Echelon i LON Vision SmartServer 2 0 InstallShield Wizard fx Destination Folder M L L O N Click Next bo install to this Folder or click Change to install to a different ier Install Echelon i LON Vision SmarkServer z 0 to Ci bonworkstiLaniLanVisianl Cancel 8 By default the i LON Vision 2 0 software will be installed in the C LonWorks i_LON iLon Vision directory or it will be installed in the C Program Files LonWorks iLON iLon Vision directory if you have not previously installed any Echelon or LONMARK products You can click Change to select a different destination folder Click Next The Ready to Install window opens i Echelon i LON Vision SmartServer 2 0 InstallShield Wizard E3 Ready to Install the Program T LO N The wizard is ready to begin installation l Click Install to begin Ehe installation IF vau want to review or change any of your installation settings click Back Click Cancel to exit the wizard 9 Click Install to begin the 7 LON Vision 2 0 software installation 10 After the LON Vision 2 0 software has been installed a window appears stating
229. rty to one of the following values e UFPTalarmNotifier Summary View A log that that lists all currently active alarms reported by the SmartServer The user can use this log to acknowledge and clear active alarms This option provides the functionality of the Alarm Notifier Summary factory Web page e UFPTalarmNotifier History View A log that lists all active and cleared alarms recorded by the SmartServer The user can use this object to view a historical list of alarms This option provides the functionality of the Alarm Notifier History factory Web page i LON Vision 2 0 API CCHELON www echelon com
230. s Bringing the Internet to Life LonWorld99 LonWorld2000 LonLink LonResponse LONews LonSupport and LonMaker are trademarks of Echelon Corporation Other marks and words belong to their respective companies 156 Creating Custom SmartServer Web Pages 4 Advanced SmartServer 2 0 Web Page Topics This chapter describes how to use data point priorities how to use data point substitution tags translate custom SmartServer 2 0 Web pages into different languages and open the SmartServer s built in applications from custom SmartServer 2 0 Web pages ILON Vision 2 0 User s Guide 157 Data Point Status and Pnornty Icons The i LON Vision read write and application objects described in Chapter 3 have status and priority icons that appear when the data point is in a specific state A status icon appears when the data point is offline in a warning or alarm condition or has a configuration error A priority icon appears when the data point is manual override mode or is locked The following table describes each of these icons and the status they indicate Configuration The data point has an error For example the data point has Bug an invalid value or its name no longer exists ax Offline The object cannot communicate with the data point This may occur if the following happens e The object fails to read or write to the data point e The heartbeat defined for the data point elapses before the value of the data point is propagated o
231. s Guide 57 58 e Click Save f Repeat steps c e for any other fields in the structured data point to be set to constant values Click OK to return to the Combo Box dialog Optionally you can specify a feedback data point To do this you click Select in the Feedback property and select the feedback data point in the Data Points dialog following steps 4b 4d The Combo Box object will display the value of the specified Feedback data point as updated values are being written to the data point specified in the Data Point field the data point you selected in step 4 If you use the Combo Box object to write a value to the Data Point the object will be disabled temporarily until the specified Feedback data point receives the data point update Note The Feedback data point you select should be bound to the Data Point via device hardware a LONWORKS connection or a Web connection Optionally configure the following properties of the Combo Box object Layer By default the Layer check box is selected This means that the Combo Box object is embedded in a Layer object which lets you freely move the Combo Box object in your custom Web page Clearing this check box means that you must position the Combo Box object as you would any other HTML object This may be useful if you want to place the Combo Box object in a table You can set the following properties to position and size the object e The Left and Top properties determine the
232. s a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is 87 88 Write Priority Show Unit Assign the priority the SVG Object has for writing updated values to the data point This value may range from 0 to 255 highest to lowest priority The priority you specify must be equal to or higher than the priority used by the last application that updated the data point If you set a priority that is less than priority used by the last application that updated the data point a red hand icon 77 appears to the left of the data point when you publish your custom Web page You will need to edit the page and enter a higher priority in this dialog to be able to write to the data point If you set a priority that is equal to or higher than that assigned to the last application or object that updated the data point a green hand icon amp appears to the left of the data point Other applications or objects can write to the data point when one of the following events occurs e The user clicks the green hand icon to unlock the data point temporarily reset the SVG Object s priority to 255 so that lower priority applications or objects can write to the data point When the user enters an updated value in the text field the SVG Object will
233. s been defined as 68 F in the Custom Argument Values dialog Data Point Name Net LONALON App VitFb temp f US Value 79 F Data Point Name Net LONALON App VirtFb temp f US Value 72 F Value 67 F function CustomArgExample argObj this update function type item if type Dp_Data i span csnnerHrML xtem UCPIname get m text innerHTML item UCPTvalue 0 get m textl format innerHTML item UCPTvalue 0 Unit get m myDp item create upper limit arg and set text to red if m text innerHTML m myArgs UPPER LIMIT m_text style color red m textl format style color red create lower limit arg and set text to yellow else if m_text innerHTML lt m_myArgs LOWER_LIMIT m_text style color orange m textl format style color orange else NL OCOML SEVIG GOLOr green HN textil Tormal style color Green ILON Vision 2 0 User s Guide 105 var handleIncrement function evt value m myDp UCPTvalue 0 get value t t m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m_myDp UCPTvalue 0 set value m sso Write m myDp var handleDecrement function evt value m myDp UCPTvalue 0 get Value i m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m_myDp UCPTvalue 0 set value m sso Write m myDp var m myArgs argObj customArgs var m myDp var m sso argObj sso var m domObj argObj domObj llereate b
234. scaling on the y axis of the graph Note For multiple data points to be scaled accurately on the trend graph at the same time they must have the same Unit String property You can add a unit string to a data point or edit the one defined for it in the Configure Data Points Web page on the SmartServer You can access this Web page from the built in SmartServer Web interface by clicking General and then clicking the data point in the SmartServer tree on the left side of the Web interface 5 If you selected Graph or Graph and Table in step 4 you can add grid lines to the chart by selecting the Show Grid check box This check box is cleared by default 6 Inthe Default Language property select the language in which the property headers on the Data Point View object are displayed The default language is English and you can select Deutsch German or Francais French ILON Vision 2 0 User s Guide 109 110 You can localize this object and all the SmartServer 2 0 Web pages into any one byte or two byte character language using either the demo version of the i LON SmartServer 2 0 Programming Tools included on the 7 LON SmartServer 2 0 DVD or using the full version on the i LON SmartServer 2 0 Programming Tools included on the i LON SmartServer 2 0 Programming Tools DVD For more information on ordering the i LON SmartServer 2 0 Programming Tools DVD contact your Echelon sales representative For more information on localizing the language
235. set is a preset that 1s defined in the data point s configuration Global presets are available in all instances of all applicable 7 LON Vision objects You can add edit and delete global presets for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The options for presets are located at the bottom of the Web page Notes To use a preset for a field within a structured data point select the Use Local Presets check box click Edit and create presets for the field The Show Presets option is incompatible with the fields of structured data points If you selected a data point field in step 4 selecting this option resets the data point to the entire structure Creating Custom SmartServer Web Pages Force Round to Rounds the raw value of the data point to the raw value of the nearest Preset preset defined for the data point so that the preset is displayed on your custom Web page This property is only available if the Show Presets check box is selected Consider a SNVT temp p data point which has the following presets defined for it OCCUPIED 69 8 UNOCCUPIED 60 8 STANDBY 19 994 If the raw value of the SNVT_temp_p data point is 30 STANDBY is displayed on your custom Web page If the raw value of the data point is 45 UNOCCUPIE
236. sets if defined instead of its raw value This check box is cleared by default meaning that the raw value of the data point is displayed A preset is a string that represents a specific raw value for a data point A global preset is a preset that 1s defined in the data point s configuration Global presets are available in all instances of all applicable i LON Vision objects You can add edit and delete global presets for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The options for presets are located at the bottom of the Web page Notes To use a preset for a field within a structured data point select the Use Local Presets check box click Edit and create presets for the field The Show Presets option is incompatible with the fields of structured data points If you selected a data point field in step 4 selecting this option resets the data point to the entire structure Creating Custom SmartServer Web Pages Force Round to Rounds the raw value of the data point to the raw value of the nearest Preset preset defined for the data point so that the preset is displayed on your custom Web page This property is only available if the Show Presets check box is selected Consider a SNVT temp p data point which has the followi
237. sh or click the Browse tab to publish your custom Web page Check Box The Check Box object is a check box that represents the first preset defined for the data point when checked and representing the second preset defined for the data point when cleared The user can ILON Vision 2 0 User s Guide Y write to the data point by selecting or clearing the check box To add a Check Box object to your custom SmartServer 2 0 Web page follow these steps 1 Click Edit on the Editor toolbar 4 or click the Layout tab 2 Click Insert and then select Check Box 3 LON Vision H File Edit View MGSISE Format Table Help HTML Elements i 2 E 3 E Gm http j 10 2 124 165 user Custom v Sd Show Value Choose New Publish Discard Text Field Text Area Combo Box Image Swapper Radio Buttons Select Box a 9 09 M m SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Check Box dialog opens 1 LON Vision Object Data Point Feedback Settings Write Priority Ys Use local presets Edit 4 Select the data point to be monitored by the Check Box object following these steps a Inthe Data Point property click Select The Select Data Points dialog opens b To view all the network objects on the SmartServer including those that are curr
238. sists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format e g SI metric or UE customary Optionally in the Name property you can enter placeholders and default values for portions o the complete real data point name to be replaced with substitution tags Using the nviClaValue data points on the SmartServer s digital relay outputs Net LON ILON amp pp Digital Output 1 nviClavalue 1 and Net LON ILON amp pp Digital Output 2 nviClavalue 2 for example you can insert placeholders and default values in place of the indexes in the functional block ar data point names within the complete data point name If you set the placeholder to x and the default value to 1 the data point name would be as follows Net LON iLON App Digital Output 1 e_ x 1 This means that sill ciem a e n mao ia a Em Viewing the i LON Vision 2 0 ReadMe The i LON Vision 2 0 ReadMe provides descriptions of known problems if any and their workarounds To view the i LON Vision 2 0 ReadMe click Start point to Programs point to Echelon i LON Vision SmartServer 2 0 and then select ii LON Vision SmartServer 2 0 ReadMe First You can also find additional information about the i LON SmartServer 2 0 online at www echelon com ilon Using Technical Support If you have technical questions that are not answered by this document the 7 LON Vision 2 0 online help or the i LON Vision 2 0 ReadMe document you can contact technical
239. stom SmartServer 2 0 Web page By default the object is positioned in the upper left hand corner of your Web page unless you specified its position with the Left and Top properties Drag the layer containing the object to the desired position on your custom SmartServer 2 0 Web page 14 Click Publish on the Editor toolbar S click File and then click Publish or click the Browse tab to publish your custom Web page Changing the Page Title By default the page title on a custom SmartServer 2 0 Web page is named after the htm file specified when you originally created the Web page You change the page title of your custom SmartServer 2 0 Web page To do this follow these steps 1 Click Format and then click Page Title Properties The Page Properties dialog opens 1 LOM Vision Page Properties E 2 Inthe Page Title box enter a descriptive page title and then click OK 3 Click OK 4 If you are using a navigation system that includes a menu frame you can the display page title in all your custom Web pages by adding the Page Title object to the menu frame See Adding a Page Title to the Menu Frame later in this chapter for how to do this Setting the Poll Rate The 7 LON Vision objects in your custom SmartServer 2 0 Web pages poll the SmartServer s internal data server for data point updates every 1 second by default You can change the poll rate used for all the i LON Vision objects in a given custom SmartServer 2 0 Web page to
240. t lt device gt lt functional block gt lt data point gt This is the default Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix Creating Custom SmartServer Web Pages o The virtual data points on the i LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page d Expand the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure e Click OK t
241. t law and international treaties 5 Read the information on the Welcome window and click Next The License Agreement window appears Creating Custom SmartServer Web Pages License Agreement Please read the Following license agreement carefully LLON SmartServer 2 0 Software License Agreement HOTICE This is a legal agreement between you rau Your and Echelon Corporation Echelon YOU MUST READ AND AGREE TO THE TERMS OF THIS SOFTWARE LICENSE AGREEMENT BEFORE ANY SOFTWARE CAM BE DOWNLOADED GR INSTALLED OR USED BY CLICKING OW THE ACCEPT BUTTON OF THIS SOFTWARE LICENSE AGREEMENT OR DOWNLOADING SOFTWARE OR INSTALLING SOFTWARE OR USING SOFTWARE TOU ARE AGREEING TO BE BOUND BY THE TERMS AND CONDITIONS OF THIS SOFTWARE LICENSE AGREEMENT IF YOU OO NOT AGREE WITH THE TERMS bul SAIS sCC GBIDATTT shbz SE TUTO C Os3DET SW AADC TOCERNIDZE AVS CORACKIT TLILERhlI rst I accept the terms in the license agreement CO Ida not accept the terms in the license agreement 6 Read the license agreement you can read a printed version of the license agreement in Appendix E of the i LON SmartServer 2 0 User s Guide If you agree with the terms click Accept the Terms and then click Next The Customer Information window appears Lustomer Information Please enter your information User Mame User Organization Echelon Install this application For Anyone who uses this computer all use
242. t tab Alternatively you can open the Sidebar htm file from the index htm file that was created when you added the Frameset object to your home page and published your home page To do this follow these Steps Click Choose on the Editor toolbar I The Select File dialog opens l 2 Browse to the root web lt Custom gt directory on the SmartServer flash disk 3 Select the index htm file and then click OK to return to the Browse tab 4 Click Edit on the Editor toolbar cgi or click the Layout tab The Select a Frame dialog opens 5 Click sidebarFrame which highlights the sidebar frame and then click OK 4 LON Vision T e 5 Back IN o SIBE 7 3x Browse A Layout 2 Reload Stop o Home Select Frame Y S http 10 2 124 165 user myCustom index htm 29 wW oZ Choose New Edit menuFrame http 10 2 124 165 user myC E sidebarFrame http 10 2 124 165fuser m appFrame http 10 2 124 165 user myCu copyrightFrame http 10 2 124 165 userJ Creating Custom SmartServer Web Pages Adding a Tree to the Sidebar Frame You can add a navigation pane to all your custom Web pages by adding the Navigation tree object to the sidebar frame The user can then click the items in the navigation pane to open your custom Web pages To add a navigation pane to your custom Web pages follow these steps 1 Click Insert and then select Navigation 7 LON Vision M
243. t to 1 each time a value is written to SNVT switch value To set constant values for the other fields in a structured data point follow these steps a Click Const Fields The Constant Fields dialog opens b The data point field you selected in step 4 is marked as dynamic c Click the data point field to be set to a constant value d Inthe Value field set the constant value to be written to the data point field selected in step d e Click Save f Repeat steps c e for any other fields in the structured data point to be set to constant values g Click OK to return to the Text Area dialog ILON Vision 2 0 User s Guide 51 52 Optionally you can specify a feedback data point To do this you click Select in the Feedback property and select the feedback data point in the Data Points dialog following steps 4b 4d The Text Area object will display the value of the specified Feedback data point as updated values are being written to the data point specified in the Data Point field the data point you selected in step 4 If you use the Text Area object to write a value to the Data Point the object will be disabled temporarily until the specified Feedback data point receives the data point update Note The Feedback data point you select should be bound to the Data Point via device hardware a LONWORKS connection or a Web connection Optionally configure the following properties of the Text Area object Layer By
244. t value to be written to the data point field selected in step d v Click Save vi Repeat steps iii v for any other fields in the structured data point to be set to constant values vii Click OK to return to the Select Box dialog h Optionally in the Max Age property you can set the maximum period of time in seconds that the value of the data point is cached before the Data Point View object receives updated values This enables you to control the amount of traffic that 1s generated on a specific channel by the object The SmartServer compares the Max Age value of the Data Point View object to the amount of time the data point value has been cached in its internal data server and then does the following ILON Vision 2 0 User s Guide 111 e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is i Clic
245. te Priority Assign the priority the Radio Buttons object has for writing updated values to the data point This value may range from 0 to 255 highest to lowest priority The priority you specify must be equal to or higher than the priority used by the last application that updated the data point If you set a priority that is less than priority used by the last application that updated the data point a red hand icon 72 appears to the left of the data point when you publish your custom Web page You will need to edit the page and enter a higher priority in this dialog to be able to write to the data point If you set a priority that is equal to or higher than that assigned to the last application or object that updated the data point a green hand icon amp appears to the left of the data point Other applications or objects can write to the data point when one of the following events occurs e The user clicks the green hand icon to unlock the data point temporarily reset the Radio Buttons object s priority to 255 so that lower priority applications or objects can write to the data point When the user enters an updated value in the text field the Radio Buttons object will have the data point locked again the priority returns to the value you specified e The lower priority application or object specifies a priority that is equal to or higher than the one you specified for the Radio Buttons object For more information on using pr
246. te a simple custom SmartServer 2 0 Web page that you can use to control and monitor a digital relay output on the SmartServer Creating Custom SmartServer 2 0 Web Pages Describes how to create simple custom SmartServer 2 0 Web pages and more complex Web designs that include a navigation system It describes how to upgrade existing custom Web pages to SmartServer 2 0 Web pages add i LON Vision objects to your custom Web pages and design a navigation system for your Web design Advanced SmartServer 2 0 Web Page Topics Describes how to use data point priorities how to use data point substitution tags translate custom SmartServer 2 0 Web pages into different languages and open the SmartServer s built in applications from custom SmartServer 2 0 Web pages Describes how to secure and troubleshoot custom SmartServer 2 0 Web pages i LON Vision 2 0 API Describes the programming interface for 1 LON Vision objects so that you can use any Web publishing tool to edit custom SmartServer 2 0 Web pages Preface For More Information and Technical Support If you need help using i LON Vision 2 0 you can use the online help files view the i LON Vision 2 0 ReadMe or read the 7 LON Vision 2 0 documentation If none of these sources answer your questions you can contact technical support if you have purchased support services from Echelon or an Echelon support partner Using the 1 LON Vision 2 0 Online Help Files If you need more information on ho
247. te data point when it is ON following these Steps a Inthe Images list select ON and then click Select The Select File dialog opens b Browse to the Desktop C LonWorks iLON iLonVision graphics switch folder click a graphic of a switch in the ON position and then click OK This graphic will be displayed on the Web page when the data point is set to ON and the Digital Output is enabled Because the Switchable check box is selected you can click the graphic to enable the Digital Output from your custom SmartServer 2 0 Web page This example uses the switchUpOn gif graphic 20 Quick Start Exercise 1 LON Vision Object Image Swapper Layer Data Point Mame Met LOMJILOM App Digital Output 1 nviclavalue 1 Real Alias Prog Format 0000000000000000 0 SNYT_switch state Const Fields Feedback Format Select Settings write Priority Po Use local presets Switchable _ Force round to preset Images Preset Value Image zt Lo mW DF ks iLo nvision 1 grap hics swite h ee ET pn 2 CHLonwWorkstiLonvision graphics switch switchDownOrF gif Select Delete Move Up Move Down 9 Click OK to return to your custom Web page The switch image you selected appears in the upper left hand corner of the Web page 7 LON Vision File Edit view Insert Format Table Help T ul g i E ej X E Y Gj e A Y http 10 2 124 165 user Custom CustomWebPage htm v 3 ed Q Back F rd Reload Stop Home
248. tem 2 Delete e Mew Item 3 Move e Application Objects Configure each branch as described in step 7 To create third to fifth level branches repeat steps 6 8 In this process you click a branch click Add to add a third level branch below it click the third level branch click Edit to edit the third level branch and repeat the process for each new branch level to be created in the tree hierarchy Note You can select an item in the list and click Move Up or Move Down to change the order in which the subtrees and branches are listed To remove a subtree and its branches click the subtree and then click Delete Click OK The navigation pane is added to the left side of the sidebar frame 7 LON Vision EE M File Edit View Insert Format Table Help me f per X amp Y by e A Y http 10 2 124 165 user myCustom Sidebar htm v e Q 5 Back ard Reload Stop Home Choose New Publish Discard uw E a e IB D U i G P Browse P Layout iE Read Write Objects Image Swapper f Jul m Sao JavaScript i SVG Objec SG combo Box Value IE 4 4pplication Objects Data Point View ez Data Logger View 3 Schedule Creating Custom SmartServer Web Pages READ WRITE OBJECTS APPLICATION OBJECTS i LON SmartServer Custom Web Pages Ei 9 Read write Objects You can use these custom Web pages Image Swapper 3 JavaScript to sample the read write and Slider application objects
249. that the installation has been completed successfully Creating Custom SmartServer Web Pages T Echelon i L OM Vision SmartServer 2 0 InstallShield Wizard i LON InstallShield Wizard Completed The InstallShield Wizard has successfully installed Echelon LLON Vision SmartServer 2 0 Click Finish to exit Ehe wizard Show the readme File 11 Click Finish and then read the 7 LON Vision 2 0 ReadMe document ILON Vision 2 0 User s Guide Creating Custom SmartServer Web Pages 2 Quic k Start Exerc ise This chapter describes how to create a simple custom SmartServer 2 0 Web page that you can use to control and monitor a digital relay output on the SmartServer ILON Vision 2 0 User s Guide 9 Introduction This chapter provides a quick start exercise that shows you how to create a simple custom SmartServer 2 0 Web page In this quick start exercise you will create a Web page that controls and monitors the first digital relay output on the SmartServer Digital Output 1 The Web page will include two objects an image swapper switch object that you can click to enable or disable Digital Output 1 by writing to its nviClaValue 1 input data point and an image swapper lamp object that indicates whether Digital Output 1 is ON or OFF by reading its nvoClaValueFB 1 data point After you have completed this quick start exercise read Chapter 3 Creating Custom SmartServer 2 0 Web Pages to learn how to create more complex Web des
250. the NVL prefix o The virtual data points on the i LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page d Expand the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure e Click OK to return to the Check Box dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Format property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US Diff or append one of these formats to the data point name if no format is specified 5 Optionally you can specify a feedback data point To do this you click Select in the Feedback property and select the feedback data point in the Data Points dialog following step 4 The Check Box object will displa
251. the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure e Click OK to return to the Text Area dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Format property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US Diff or append one of these formats to the data point name if no format is specified 5 Optionally if you selected a field within a structured data point you can set constant values to be written to one to all of the other fields in the data point automatically when a value is written to the selected field This ensures that the other field or fields in the structured data point are set to specific values whenever the Text Area object is used on the selected field Using a SNVT switch data point for example you can have SNVT switch state be se
252. tion eeeeeeseeeesessss 10 Step 2 Creating a Custom SmartServer Web Page 12 Step 3 Adding i LON Vision Objects ccccceeceeseeeeeeeeeeeaeeeeeeeeeeeeeeaas 14 otep 4 Linking a Custom Web Page to the SmartServer Home We E 24 3 Creating Custom SmartServer 2 0 Web Pages 29 lieet 30 Configuring i LON Vision 2 0 Preferences ccccccccssseeeeeeeeeeeeseeeeeeeeeeeseaes 30 Upgrading Custom Web Pages to SmartServer 2 0 Pages 32 Upgrading SmartServer 1 0 Web Pages to SmartServer 2 0 Pages 32 Upgrading e3 Web Pages to SmartServer 2 0 Pages 32 Adding i LON Vision Objects to your Custom Web Pages 33 Adding Data Point Read Write Objects eeseseseseessesssss 34 SNOW Values imita iustius usc dr a ee ee EI 37 I 2dlg 43 MGT AC T EU 49 COMBO BOX dsssilpstcam sb uan Durban axus cu qc MM dies q US 55 Image 9WaDDOL 2 p tis x eio a ERI oR tea BEnt d pep eaa a donu less Res e dps ee e 61 Rado BUON S onte tettoiuietto atiis eccle teseaiti s fer Mose te ele aaah 68 S12 5161 mo CENTRO UTE TP 73 Suede C T vans 71 SVEO ODEO EET TU UU TT 82 Gustotiidavaocript ODIGGL deinen idend eR atat 89 Adding Application Objets s caen osea eiii int ota actin 107 Data
253. tions in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices connected to the SmartServer that do not have default alias names are listed under the no alias icon o The data points on the i LON App Internal device under the LON channel are listed in the tree with the NVL prefix o The virtual data points on the i LON App System device are listed in the tree with the ILON System prefix Note Only select the Prog button if you are creating a custom FPM configuration Web page d Expand the network channel device and then the functional block of the data point to be monitored and then click the desired data point If the data point has a structured type you can expand the data point and select a field within the structure e Click OK to return to the Combo Box dialog The Name property is updated to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Fo
254. to show the name of the data point in the following format lt network gt lt channel gt lt device gt lt functional block gt lt data point The Format property is updated to show the format description of the selected data point The format description consists of the data point s program ID SNVT SCPT UNVT UCPT or built in data type and format for example SI metric or US customary If the data point supports multiple formats you can manually change the format used for the data point Using a SNVT temp f data point for example you can change the format to US SI or US Diff or append one of these formats to the data point name if no format is specified Optionally you can specify a feedback data point To do this you click Select in the Feedback property and select the feedback data point in the Data Points dialog following steps 4 The Image Swapper object will display the value of the specified Feedback data point as updated values are being written to the data point specified in the Data Point field the data point you selected in step 4 If you use the Image Swapper object to write a value to the Data Point the object will be disabled temporarily until the specified Feedback data point receives the data point update Note The Feedback data point you select should be bound to the Data Point via device hardware a LONWORKS connection or a Web connection If the data point does not have any presets defined for it or
255. tor and control multiple data points This gives you the ability to create a single Web page that can be re used for example to monitor and controls several floors in a building In this scenario information for the data points on a different floor could be displayed each time the Web page is opened based on the link used to access the Web page To use data point substitution tags the names of your data points in your system must share a common naming convention For example if you have a set of switches and lamps for all four rooms on each floor of a two story building the naming convention for the data points of the switch and lamp devices could be as follows Switch floor room and Lamp floor room Using this scenario as an example the real names of the switches and lamps in each floor would be as follows Room 1 Net LON Switch 1 I Digital Control Digital Net LON Lamp 1 I Digital Output Digital Room 2 Net LON Switch_1_2 Digital Control Digital Net LON Lamp_1_2 Digital Output Digital Room 3 Net LON Switch_1_3 Digital Control Digital Net LON Lamp_1_3 Digital Output Digital Room 4 Net LON Switch_1_4 Digital Control Digital Net LON Lamp_1_4 Digital Output Digital ILON Vision 2 0 User s Guide Room 1 Net LON Switch 2 I Digital Control Digital Net LON Lamp 2 l Digital Output Digital Room 2 Net LON Switch 2 2 Digital Control Digital Net LON Lamp 2 2 Digital Output Digital Room 3 Net LON Switch 2
256. two buttons that you can use to set the value of a SNVT switch state data point and a span that displays the name of the data point and the current value stored in it Observe that the UCPTvalue index LonFormat property is set to 0000000000000000 0 SNVT switch state in order to write to the state field of the SNVT switch data point Also observe that values to be written to the data point are written as strings Net LONALON App Digital Output l nviClaValue 1 0 function SetValues field argObj this update function type item if type Dp_Data m spanValue innerHTML item UCPTvalue 0 get mn spanName innerHIML atem UCPIname get m myDp item var handleOff function setOff m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m myDp UCPTvalue 0 LonFormat set 0000000000000000 0 SNVT switch state m myDp UCPTvalue 0 set 0 m sso Write m myDp var handleOn function setOn m myDp UCPTvalue splice 0 m myDp UCPTvalue length 1 m myDp UCPTvalue 0 LonFormat set OOO00000000000000 0 SNVT switch state m_myDp UCPTvalue 0 set 1 m sso Write m myDp var m myDp var m sso argObj sso var m domObj argObj domOb j create buttons to write to DP value var m OffButton m domObj appendChild document createElement button ILON Vision 2 0 User s Guide 101 102 var m OnButton m domObj appenaChild document createElement
257. u formatted the Frameset object on your home page and published your home page follow these steps 1 Click Choose on the Editor toolbar The Select File dialog opens 2 Browse to the root web lt Custom gt directory on the SmartServer flash disk 3 Select the Menu htm file and then click OK to return to the Browse tab A 4 Click Edit on the Editor toolbar amp or click the Layout tab Alternatively you can open the Menu htm file from the index htm file that was created when you formatted the Frameset object on your home page and published your home page To do this follow these steps 1 Click Choose on the Editor toolbar The Select File dialog opens 2 Browse to the root web lt Custom gt directory on the SmartServer flash disk 3 Select the index htm file and then click OK to return to the Browse tab A 4 Click Edit on the Editor toolbar amp or click the Layout tab The Select a Frame dialog opens 5 Click menuFrame which highlights the menu frame and then click OK ILON Vision 2 0 User s Guide 129 4 LON Vision DNE UE ne9242 10 c stomfndec ht ww H Back f ad Reload Stop Home Choose New Ue 4 Y dM atia S RE nd V X Browse P Layout Select Frame t menuFrame http 10 2 124 165 user myc 3 sidebarFrame http 10 2 124 165 user m E appFrame http 10 2 124 165 user myCu Image Swappef copyrightFrame http 10 2 124 165 user JavaScript S
258. ules dialog 1 A weekly calendar listing the events to be executed normally without exceptions each day of Scheduler Exception the week Schedules Web page and The user can view and configure Edit View Exception the daily schedule You can Date dialog disable the configuration functionality so that the user can only view the daily schedule A yearly calendar highlighting the dates in which exceptions to the daily schedule are to be executed The user can view and configure the schedule for any date You can disable the configuration functionality so that the user can only view the schedule for a given date Data Point View The Data Point View object includes a log that displays the current values and states of the selected data points a trend graph that charts the data point values over a specified interval and combo boxes for writing values to the data points The user can use this object to monitor chart and control selected data points To add a Data Point View object to your custom SmartServer 2 0 Web page follow these steps A 1 Click Edit on the Editor toolbar el or click the Layout tab 2 Click Insert and then select Data Point View _ 7 LON Vision H File Edit view EISE Format Table Help Y f c HTML Elements gt gg Q X i Y OL http 10 2 124 165 user Custom v E 5 Back Show Value Choose New Publish Discard we E F Text Field l E Zz NET Text Area 3
259. underneath the root icon for each menu item you create For example to create a menu bar with two menu items click the root icon and then click Add twice I LON Vision 2 0 User s Guide 131 1 LON Vision Object Navigation Layer Left Width Top Height Z Index C Tree Auto Tree Default Language Addressing Menu Orientation Horizontal Vertical Presentation Entries Seo Add e Mew Item F e Mew Item 24 Delete Move Up Move Down Cut 5 Configure each menu item following these steps a Click the New Item menu item and then click Edit The Navigation Link dialog opens 1 LON Vision Object Presentation Link Mame Substitution values 132 Creating Custom SmartServer Web Pages b Inthe Icon property under Presentation you can add an icon that will appear to the left of the item To do this click Choose to open the Select File dialog browse to the Desktop C LonWorks i_LON iLonVision graphics lt category gt folder on your computer or the root web images or root web user demo images folders on your SmartServer flash disk click the desired image and then click OK c Inthe Label property enter the name for the menu item d If you do not plan on adding any submenu items or branches to the current item select the Web page to be opened when the user clicks the item This can be a built in SmartServer configuration Web page or a custom SmartServer Web page on your local
260. updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is Enter the number of significant decimal digits with which a data point value is expressed For example a data point value of 32 568 1s rounded to 32 6 rounded to the tenth digit if the precision is 1 and it is rounded to 32 57 rounded to the hundredth digit 1f the precision is 2 The default and maximum precision are both 3 meaning the decimal values are rounded to the thousandth digit 99 60 Write Priority Size Show Presets Assign the priority the Combo Box object has for writing updated values to the data point This value may range from 0 to 255 highest to lowest priority The priority you specify must be equal to or higher than the priority used by the last application that updated the data point If you set a priority that is less than priority used by the last application that updated the data point a red hand icon 77 appears to the left of the data point when you publish your custom Web
261. uration and driver Web pages the General and Driver buttons directly above the navigation pane the message box directly above the General and Driver buttons the shortcut menus that you can access by right clicking an item in the tree and pop up dialogs The default language is English and you can select Deutsch German or Francais French You can localize this object and all the SmartServer Web pages into any one byte or two byte character language using either the demo version of the 1 LON SmartServer 2 0 Programming Tools included on the 1 LON SmartServer 2 0 DVD or using the full version on the 1 LON SmartServer 2 0 Programming Tools included on the i LON SmartServer 2 0 Programming Tools DVD For more information on ordering the 1 LON SmartServer 2 0 Programming Tools DVD contact your Echelon sales representative For more information on localizing the language of the SmartServer Web pages see the i LON SmartServer 2 0 Programming Tools User s Guide Creating Custom SmartServer Web Pages 5 If you selected the Auto Tree check box in step 3 select how data points are organized in the factory navigation pane You have two choices e Name The data points are organized in the navigation pane by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block gt lt data point This is the default e Alias Data points are alphabetized by their alias names which corr
262. use the SmartServer to prepare maintain monitor and control and connect the network i LON SmartServer 2 0 Programmer s Reference Describes how to configure the SmartServer using XML files and SOAP calls This allows you to create your own applications that you can use to configure the 7 LON I LON SmartServer 2 0 Programming Tools User s Guide Describes how to write custom embedded applications called Freely Programmable Modules FPMs and deploy them on the SmartServer FPMs let you implement custom functionality and tailor the SmartServer to meet your needs IL LON SmartServer 2 0 Hardware Guide Describes how to assemble mount and wire the SmartServer hardware i LON SmartServer 2 0 Quick Start Guide Contains all the information you will need to connect the SmartServer hardware install the 1 L ON SmartServer 2 0 software and configure the SmartServer using the SmartServer configuration Web pages IP 852 Channel User s Guide Describes how to configure an IP 852 channel with the Echelon LonWorks IP Configuration Server You will need this information if you plan to use the i LON as an IP 852 router Content This guide includes the following content viii Introduction Introduces i LON Vision 2 0 summarizes the new features in 1 LON Vision 2 0 describes the compatibility of 7 LON Vision 2 0 with 7 LON Vision 1 0 and describes how to install the LON Vision 2 0 software Quick Start Exercise Describes how to crea
263. ustom gt directory on the SmartServer flash disk 3 Select the index htm file and then click OK to return to the Browse tab A 4 Click Edit on the Editor toolbar elt or click the Layout tab The Select a Frame dialog opens 5 Click copyrightFrame which highlights the copyright frame and then click OK 4 LON Vision Y by e A M http 10 2 124 165 user myCustomfindex htm v 3 ej cl 5 Back Reload Stop Home Choose New Edit OW 2 XX Browse 2 Layout Select Frame menuFrame http 10 2 124 165Juser myC sidebarFrame http 10 2 124 165 user m io 2007 Echelon Corporation Changing the Copyright Message The default copyright message in the copyright frame is Powered by 1 LON Vision You can change the copyright message following these steps 1 Point to the Powered by i LON Vision text in the center of the Layout tab 154 Creating Custom SmartServer Web Pages Powered by iLON Vision 2 Delete the default Powered by i LON Vision text and then enter your company s copyright 7 LON Vision File Edit View Insert Format Table Help 809 are E Y sy Y http 10 2 124 165 user myCustom index htm v 8 Back f Reload Stop Home i Choose New Publish Discard zl A B 7 a 99 H c lit M 2AM Browse P Layout i kc 2009 Echelon Corporation 4 o gt m LI ES s 2 ll LLLL 3 Click Publish on the Editor toolbar click the Browse tab or click Fil
264. utton to return to the previous Web page To add the Menu Buttons object to the menu frame follow these steps 1 Inthe Menu htm page click Edit on the Editor toolbar a 2 Click Insert and then select Message Buttons 7 LON Vision L File Edit View BOSS Format Table Help f amp HTML Elements 1 ii Y http 10 2 124 165 user myCustom Menu htm 8 Back Show Value Choose New Publish Discard we m Text Field i g 4 Text Area X Browse FY Layot ComboBox Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Application Objects Navigation Page Title Message Box Menu Button 3 The Menu Buttons Edit dialog opens 1 LON Vision Object Menu Button Layer Left Width Top Height Z Index Presentation Type Submit Back Default Language English bul 4 Optionally you can modify the size and position of the Menu Buttons object by setting the Layer properties 5 Under Presentation select the type of button to create You have two choices Submit and Back The Submit button is used to save changes made to a custom Web page The Back button is used to return to the previous Web page 6 Inthe Default Language property select the language in which the menu button is displayed The default language is English
265. uttons object following these steps a Inthe Data Point property click Select The Select Data Points dialog opens b To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigation pane c Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block gt lt data point gt This is the default ILON Vision 2 0 User s Guide 69 70 e Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is located near the top of the Web page If you select this option the data points are listed in the SmartServer tree as follows o The data points of the external devices co
266. uttons to write to DP value var m incrementButton m domObj appendChild document createElement V button var m decrementButton m domObj appendChild document createElement V button var breakl m domObj appendChild document createElement br add text and click events to buttons m incrementButton innerHTML Up m decrementButton innerHTML Down ii XneremerntBubtten attachbventi oncelrck handlernerememt m decrementButton attachBbventi onclrick handleDecrement create span reading DP name var DP name text m domObj appendChild document createTextNode Data Point Name var m span m domObj appendChild document createElement span var break2 m domObj appendChild document createElement br create text reading DP value and format var DP value text m domObj appendChild document createTextNode Value var m text m domObj appendChild document createElement text 106 Creating Custom SmartServer Web Pages var m textl format m domObj appendChild document createElement text 3 EchelonTop Echelon provide CustomArgExample document Adding Application Objects Application objects represent the embedded scheduling alarming and data logging applications on the SmartServer Application objects include the Data Point View Data Log View Scheduler and Alarm Notifier You can expose these objects to provide users limited access to the SmartServer s
267. values This enables you to control the amount of traffic that is generated on a specific channel by the object The SmartServer compares the Max Age value of the Data Point View object to the amount of time the data point value has been cached in its internal data server and then does the following e If Max Age is less than the period of time the data point value has been cached the SmartServer s internal data server polls the data point and returns the updated value to the object e If Max Age is greater than the period of time the data point value has been cached the SmartServer s internal data server returns the cached value to the object e If Max Age is disabled the SmartServer s internal data server returns a cached value to the object regardless how old the data point is This is the default e If Max Age is set to 0 the SmartServer s internal data server polls the data point and returns the updated value to the object regardless how current the data point is Click OK to return to the Custom JavaScript dialog The name of the selected data point field if selected for a structured data point and the Max Age property if set 1s listed in the Data Points box 93 94 10 11 12 i LON Vision Object EJ Custom JavaScript Layer Script E iLonvisionExtensions EchelonDecreaseE xample b Data Points Mame Field Meti LOMN ILOM App Digibal Output 1 nviclavalue 1 value Custom Arqs Kev value
268. ver flash disk b Logically replace the 7 LON server in your LNS application with the SmartServer if operating the SmartServer in LNS mode LNS Auto or LNS Manual Make sure to select the ILON100 FTT V12 XIF or the ILON100 PLC V12 XIF when specifying the external interface definition to be loaded c Synchronize the internal SmartServer database to an LNS network database if operating the SmartServer in LNS mode LNS Auto or LNS Manual Copy all your custom e3 Web pages in the root web user lt Custom gt folder on the flash disk of your i LON 100 e3 server to the local drive of your computer a USB drive a floppy disk another removable media or a shared network drive with read write permissions Note Do not copy any of the factory e3 Web pages in the root web user echelon folder Do not copy any other folder under the root web directory Use FTP to copy your custom e3 Web pages to the root web user folder on your SmartServer flash disk Start i LON Vision 2 0 To do this click Start point to Programs point to Echelon i LON Vision SmartServer 2 0 and then click i LON Vision SmartServer 2 0 i LON Vision 2 0 opens Click File and then click Convert Folder to Actual Format The Select Folder dialog opens Select the folder on your SmartServer containing the custom e3 Web pages to be upgraded and then click OK The Converting dialog opens and the custom Web pages in the selected folder are upgraded to the SmartServer 2 0
269. ver the network A Web connection in which the data point is a member fails Warning The data point is in a warning or alarm condition These icons only appear if the data point is being monitored by an Alarm Generator You do not need to define a SNVT alarm or SNVT alarm 2 output data point in an Alarm Generator for these icons to work If an alarm is triggered the Alarm Generator automatically sets the status of the data point to the respective alarm condition and the status will be displayed via one of these icons See Chapter 6 Alarming in the i LON SmartServer 2 0 User s Guide for more information on setting the alarm conditions for a data point Manual Override The object is blocking other applications from writing values to the data point The user must click the icon to enable other objects and applications to write to the data point See the next section for more information on using data point priorities 158 Advanced SmartServer 2 0 Web Page Topics The object is locked out from writing values to the data point because another object or application has a higher priority In order for the object to write values to the data point either you must provide the object a revised priority that is equal to or higher than the one currently assigned to the data point or the user must reset the priority of the higher priority object or application by clicking the Manual Override icon See the next section for more in
270. ver tree are displayed within the data point selection dialog by default and select the default Web browser for previewing your custom SmartServer 2 0 Web pages To configure 7 LON Vision 2 0 follow these steps Click File and then click Preferences 30 Creating Custom SmartServer Web Pages 7 LON Vision SIME Edit View Insert Format Table Help Choose amp f X New Page http 10 2 124 165 user Custom v ud 1 Choose Mew Publish Discard Publish Publish As a Discard Convert Folder Content to Actual Format Site Manager Preferences Exit 2 The Preferences dialog opens 1 LON Vision Preferences Language English Show Object Names Show Layers Confirm Publish External Browser CiProgram Files Internet Explorerliexplore exe 3 Set the following i LON Vision 2 0 properties Language Set the language used for the i LON Vision 2 0 user interface including all menus property dialogs and error and warning messages i LON Vision 2 0 includes English the default German and French languages but you can work with 7 LON Vision 2 0 in any one byte or two byte character language by translating the properties file in the LonWorks iLON iLonVision extensions 53D26F30 C12B 11DD 9FA E D50A1A6FOFEF chrome content nls folder on your computer You can perform this language localization using either the demo version of the 7 LON SmartServer 2 0 Programming Tools included on
271. version of the 1 LON SmartServer 2 0 Programming Tools included on the 1 LON SmartServer 2 0 DVD or using the full version on the i LON SmartServer 2 0 Programming Tools included on the i LON SmartServer 2 0 Programming Tools DVD For more information on ordering the 1 LON SmartServer 2 0 Programming Tools DVD contact your Echelon sales representative For more information on localizing the language of the SmartServer Web pages see the i LON SmartServer 2 0 Programming Tools User s Guide Note You can create multiple links to the same application instance and have each link point to a configuration Web page that uses a different language For example you could create one item in the Navigation object link it the Scheduler configuration Web page specify an instance of the Scheduler application and specify that the configuration Web page use English You could then create a second item in the Navigation object link it the Scheduler configuration Web page specify the same instance of the Scheduler application as the previous item and specify that the configuration Web page use German Optionally you can overwrite the Page Title that will be added to the URL of the configuration Web page and you can overwrite the Page Background of the configuration Web page Click OK to return to the Navigation Link dialog click OK to return to the Navigation dialog Repeat steps 4 13 to create additional items that link to the SmartServer s bu
272. view and configuration Web pages 1 LON Vision Application Object SmartServer Embedded Application s Description Data Point View View Data Points Web page This object includes a log that displays the current values and states of the selected data points a trend graph that charts the data point values over a specified interval and combo boxes for writing values to the data points The user can use this object to monitor chart and control specified data points Data Log View Data Logger View Web page A log that lists the data point updates recorded by a specific data logger on the SmartServer Alarm Notifier Alarm Notifier Summary This object can be one of the following Web page 1 A log that that lists all currently Alarm Notifier History active alarms reported by the Web page SmartServer The user can use this object to acknowledge and clear Configure E mail dialog active alarms A log that lists all active and cleared alarms recorded by the SmartServer The user can use this object to view a historical list of alarms An e mail that the user can send to a recipient for example a technician or maintenance company notifying them of an alarm condition ILON Vision 2 0 User s Guide 107 i LON Vision Application Object SmartServer Embedded Application s Description Scheduler Scheduler Daily This object can be one of the following Schedules Web page and Edit View Daily Sched
273. w to use a particular i LON Vision 2 0 dialog you can click Help in the bottom right hand corner of the dialog to open a new window with context sensitive help for that dialog MEME i LON Vision Object x SVG Object c i LON Vision Help Layer Left 20 width 200 Top 20 Data Point 1 LO N S m artS erver powerep By amp ECHELON I Name Format i SVG Object Feedback You can use the SYG object to add a horizontal or vertical slider knob gauge or thermometer r representing the value of a data point or the field of a structured data point as a percentage The us Name can write to the data point or field by adjusting the slider or knob object The SVG object is ideal for controlling light and power levels To select a data point to be monitored and controlled by the SVG object and configure the S G object follow these steps Format Settings 1 Click Select to open the Select Data Point dialog and select the data point to be monitored Read only Max Age Precision Write Priority Minimum Maximum C Show unit Presentation X HorizontalSlider and controlled by the SVG object After selecting a data point the Name property is updated show the name of the data point in the following format network channel device J functional block data point The Format property is updated to show the format description of the selected data point The format description con
274. x This check box is cleared by default Creating Custom SmartServer Web Pages 6 Inthe Default Language property select the language in which the property headers on the Data Log View object are displayed The default language is English and you can select Deutsch German or Francais French You can localize this object and all the SmartServer Web pages into any one byte or two byte character language using either the demo version of the i LON SmartServer 2 0 Programming Tools included on the 1 LON SmartServer 2 0 DVD or using the full version on the 1 LON SmartServer 2 0 Programming Tools included on the i LON SmartServer 2 0 Programming Tools DVD For more information on ordering the 1 LON SmartServer 2 0 Programming Tools DVD contact your Echelon sales representative For more information on localizing the language of the SmartServer Web pages see the i LON SmartServer 2 0 Programming Tools User s Guide 7 Inthe Minimum and Maximum properties set the minimum and maximum values displayed on the y axis of the trend graph if you selected Graph or Graph and Table in step 4 8 Inthe Time Range property you can set the time range that is displayed on the trend graph if you selected Graph or Graph and Table in step 4 For example if you specify 10 minutes the trend graph will always display the data point updates recorded over the last 10 minutes If you do not specify a time range the trend graph will include a slider and a selecti
275. x dialog opens ILON Vision 2 0 User s Guide 73 1 LON Vision Object Data Point Feedback Settings Write Priority o 1 Use local presets 4 Select the data point to be monitored by the Select Box object following these steps In the Data Point property click Select The Select Data Points dialog opens b To view all the network objects on the SmartServer including those that are currently hidden in the navigation pane on the built in SmartServer Web interface select the Show Hidden Items check box By default this check box is cleared meaning that you can only select those objects that are currently shown on the navigation pane c Select the method for searching for the data point to be monitored You have two choices e Real Name The data points are organized in the SmartServer tree by their parent objects using the following network hierarchy lt network gt lt channel gt lt device gt lt functional block gt lt data point gt This is the default e Alias Name Data points are alphabetized by their alias names which correspond to their locations in the navigation pane You can add edit and enable disable alias names for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General option above the navigation pane on the left side of the SmartServer Web interface and then click the data point in the navigation pane The Alias Name property is lo
276. xt Area a HX Browse J Layo Combo Box Image Swapper Radio Buttons Select Box Check Box SVG Object Link Data Point View Data Log View Scheduler Alarm Notifier NLS Text Custom JavaScript Navigation Page Title Message Box Menu Button 3 The Link dialog opens ILON Vision 2 0 User s Guide 121 1 LON Vision Object Left Width Top Height Z Index Presentation Osea 00 Ow CS Link Name Substitution Values 4 Configure the following properties of the Link object Layer By default the Layer check box is selected This means that the Link object is embedded in a Layer object which lets you freely move the Link object in your custom Web page Clearing this check box means that you must position the Link object as you would any other HTML object This may be useful if you want to place the Link object in a table You can set the following properties to position and size the object e The Left and Top properties determine the object s position from the upper left hand corner of the Web page in pixels You can set these properties to position the object instead of dragging the Layer object containing it e The Width and the Height properties determine the size of the object in pixels You can set these properties to size the object instead of expanding and collapsing the Layer object containing it e The Z Index property d
277. y the value of the specified Feedback data point as updated values are being written to the data point specified in the Data Point field the data point you selected in step 4 If you use the Check Box object to write a value to the Data Point the object will be disabled temporarily until the specified Feedback data point receives the data point update Note The Feedback data point you select should be bound to the Data Point via device hardware a LONWORKS connection or a Web connection 6 Specify the presets to be written to the data point when the user selects and clears the check box If the data point has pre defined ON and OFF presets such as a SNVT switch data point you can skip this step To specify the presets for the data point follow these steps a Inthe Checked Value and Unchecked Value properties click Preset The Select Preset dialog opens ILON Vision 2 0 User s Guide 79 80 1 LON Vision Select Preset Data Point Met LON ILOM 4pp Digital Output 1 nviclavalue 1 b Select the preset to be written to the data point when the user selects the check box and then click OK to return to the Check Box dialog To update the list of available presets click Refresh Note You can add edit and delete presets for a data point from its Configure Data Points Web Page in the built in SmartServer Web pages To do this click the General button above the navigation pane on the left side of the SmartServer Web interface an
278. ze int The width of the box in pixels Image Swapper Properties The Image Swapper includes an array of images that are linked to the presets defined for the data point based on the order of the images For example the first preset is mapped to the first image the second preset is mapped to the second image and so on When you click an image the value defined by the next preset in the list is written to the data point and the image is toggled to the next in the list after the value has been read back The following table lists the properties of the Combo Box object elon img arr string A JavaScript like array XXX xxx yyy of links to GIFs JPGs PNGs and other image files to be linked to presets defined for the data point elon_default_img string The name of image to be displayed if the data point value is unknown or cannot be found in the preset list HOM SACI UT TENE FSTRUD The preset to be written to the data point if the default image is clicked Radio Buttons Properties The Radio Buttons object builds radio buttons for each preset or enumerated value defined for a data point and displays the name of the preset or enumeration to the right of the buttons The current data point value is indicated by which button is selected if the data point is not currently set to one of the presets or enumerations no button is selected The user can write to the data point by selecting one of the buttons The radio buttons are

078-0422-01A_i.LON Vision 2.0 User's Guide

Contents

Download Pdf Manuals

Related Search

Related Contents