Users Guide

Downloaded from - http://www.guardianalarms.net

 1997, Andover Controls Corporation All Rights Reserved

No part of this publication may be reproduced, read or stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without prior written permission of Andover Controls Corporation. Produced in the United States of America. Infinity is a trademark of Andover Controls Corporation. All other trademarks are the property of their respective owners. Infinity Web Server User Guide, Version: A August 1997 Andover Controls part number: 30-3001-683 The information in this document is furnished for informational purposes only, is subject to change without notice, and should not be construed as a commitment by Andover Controls Corporation. Andover Controls Corporation, assumes no liability for any errors or inaccuracies that may appear in this document.

Andover Controls Corporation 300 Brickstone Square Andover, MA 01810 (508) 470-0555 fax: (508) 470-0946

Andover Controls Corporation

Contents
Introduction .........................................................1
What is a Server? ............................................................ 1 What is HTML? .............................................................. 2 Do I Have to Be A Programmer?..................................... 2 System Requirements...................................................... 2

Basic Web Server Access .....................................3

Web Server Web Browser Connection ......................... 3 Browsers & Your Site ..................................................... 4 Expanding the Connection .............................................. 5

Communicating with the Server .........................7

IP Addresses ................................................................... 8 Associating a Name with an IP Address .......................... 8 CX and SX Web Server Sites .......................................... 9 Contacting the Server ............................................ 9 Home Screens....................................................... 10 Built-In List View Functions ................................ 11

Designing Your Own Pages ...............................13

URL Error Reporting .................................................... 13 Making HTML.............................................................. 14 Simple HTML Menu Page ............................................ 15 Web Function Basics..................................................... 16 Sample Home Custom Page .......................................... 17 Sample Setpoint Entry................................................... 19 Errors............................................................................ 22 Web Page Graphics....................................................... 23 Hyperlink Design .......................................................... 25 Security Concerns ......................................................... 26 Advanced Design .......................................................... 28

Infinity Web Server

Andover Controls Corporation

Introduction
Andover Controls prides itself on the access it provides to controlled points in a facility. This information has been available over the network through an OS/2-based SX 8000 workstation or directly from a particular controller via a text-based direct RS232 connection. In keeping with our long-standing commitment to furthering technology, another path for information has been added to our products. The Infinity Web Server option allows you to access critical information from operating controllers at your site or sites over the network using an industry standard viewer application.

What is a Server?
The server acts like the waiter in a restaurant. Ask the waiter for something and he fetches it for you. In the case of a communication Server, youre asking for information (i.e., point values, setpoints or lists). The server responds by sending you the data. There is a server of one sort in every CX controller. It provides information to an SX 8000 workstation or to an RS232 terminal when requested. The data retrieved is composed in a format compatible with either the SX 8000 (which can only be decoded by SX software) or as plain text sent to the RS232 terminal. In order to provide a lower cost and more universal method of retrieving and viewing your data, we have chosen to modify our server and make available an option that standardizes on the data viewers used by millions of people to retrieve information from the Internet. Theyre called Web Browsers. These Browsers operate on a number of platforms (PC, Macintosh, UNIX, etc.) and therefore free the customer from the OS/2 or proprietary hardware or software bounds. Browsers can be loaded onto inexpensive PCs located far away from the site without the cost of maintaining another SX 8000 license. This modified server formats the requested information into a language that Web Browsers can understand. This language is called HTML.

Infinity Web Server

What is HTML?
HTML is not really a language. It is a way of describing the format of information viewed on a computer or TV screen. These screens often include text, backgrounds, images, editable fields and buttons. HTML itself is a textual description of the screen to be displayed. An HTML file looks like a simple text file with many entries enclosed in brackets. Any data that you request from the Web server (i.e., point information) can be displayed on your screen (the Web Browser window) in as simple or complex a way as you could imagine. This provides you with the ability to customize the format of the displayed data. Want to show an image of the chiller being controlled in the background as its control points are displayed in the foreground? No problem. In fact, most of the information displays available on the SX 8000 can be formatted in HTML.

Do I Have to Be A Programmer?
No. HTML is not a programming language. Once you become familiar with HTMLs simple formatting rules, youll be creating screens in no time. For simple access to all the points in your system all you really need to know is how to create list views. Creating an HTML file takes spending a few minutes with a standard text-editor program. Even Microsoft Word or Notepad can be used! Well show you everything you need to know for simple access here in this manual. For more complex screens, you will be referred to a multitude of good resources.

System Requirements
There are two Infinity Web Server configurations available. One creates a server within your SX 8000 workstation. The other adds serving capability to a CX 9200 or CX 9400 series controller. The Infinity Web Server, CX version: A CX 9200 or 9400 Series controller with the Web Server option installed TCP/IP Network access to the controller A PC with TCP/IP Network access (to run the Browser application) Web Browser application (Microsoft Internet Explorer 3.0 or higher or others)

The Infinity Web Server, SX version: PC-Compatible computer (166 MHz Pentium minimum) SX 8000 with the Web Server option installed A PC with TCP/IP Network access (to run the Browser application) Web Browser application (Microsoft Internet Explorer 3.0 or higher or others)

Andover Controls Corporation

Basic Web Server Access

The Web Server is built-into the CX firmware or the SX 8000 software when you purchase the version. There is no specific hardware or software installation required other than normal setup for either of these products. When power is applied to your system, the Web Server starts-up and remains quietly running in the background transparent to other operations. While in the background, it is scanning for command requests that conform to a standard communications protocol used by Web Servers and Browsers. Commands sent to a CX controller or SX 8000 workstation can originate from many sources. These commands are sent in small chunks called packets. CX controllers receive commands via their Ethernet network connection (EnergyNet) or via any of their Comm Ports. SX workstations receive commands via Ethernet, Comm Port or from their local keyboards. All Web Server command and request traffic is handled over the Ethernet using a protocol called TCP/IP. At present, it is the only method of communicating between the Server and the Browser. Web Server Web Browser Connection The following illustration shows a simple Ethernet TCP/IP connection between a single CX 9400 controller and a PC running a Web Browser application:
PC with Web Browser CX Web Server

Ethernet Connection

This example is over simplified, however, it illustrates the basic concept of connection between the two entities. The CX could also be a CX 9200 as long as it has been modified for Web Server capabilities.

Infinity Web Server

Connection to the SX 8000-based Web Server is similar as illustrated below:

PC with Web Browser SX Web Server

Ethernet Connection

Browsers & Your Site The Ethernet connection that you attach your PC/Browser to is actually the EnergyNet that connects between all the CX controllers and SX 8000 workstations at your site. The Browser can reside anywhere you have an EnergyNet connection. In fact, you can have more than one Browser calling into your Web Server. Obviously, youve got to have at least one Web Server CX or SX 8000. You can have more than one.

PC with Web Browser

As mentioned, more than one Browser can be used at the same time. The Web Server option allows for 12 concurrent users on the network.

Andover Controls Corporation

Concurrent users means that we allow up to 12 users requesting a file or files simultaneously. In actual practice you may not have users acting in unison. Therefore, you could theoretically have more Browser stations than 12. When the maximum number is reached, the requesting user is sent a server busy message. In that case, you would wait a few seconds and try again. As it turns out, Web Browser applications have the ability to juggle multiple connections to the server simultaneously. These are used when you are downloading a file and want to view another. Upon installation, the Browser is usually set to allow four simultaneous connections. The number is user-definable and may be changed through the Options menu item. Most people dont use that many connections simultaneously. In fact, using a Browser with this Web Server would probably only use two at the most. However, these multiple connections must be taken into account when you are planning the number of Browser access stations for your site.

Expanding the Connection As mentioned before, communication between the Web Server and the Browser requires a TCP/IP Ethernet connection. However , the connection between the two need not always be a physical one. There are many products on the market that allow other types of entities to tie into an Ethernet network. Your network may be connected to the local telephone network through an Ethernet-to-telephone interface for remote access purposes. These interface connections are typically called Ethernet to PPP connections. A PPP connection allows regular telephone data modem traffic to access an Ethernet network.
Web Server PPP to- Ethernet Interface

Ethernet Connection

Proprietary Dial-Up with External PPP-to-Ethernet interface

Using such a device would allow access to your site via a standard telephone modem connection installed into your PC. Viewing site parameters from the comfort of your home is possible. Other devices provide wireless connections to expand your local area network into a wide area network. These include satellite links and other broadband techniques. The design of the Infinity Web Server does not preclude any of these systems as lone as the end result is an Ethernet TCP/IP connection. IMPORTANT Keep in mind that the extraneous network equipment discussed here is not supplied or supported by Andover Controls. The required a level of support is best left to the network companies that manufacture the units. If you are interested in expanding access to your Web Server through external interfaces, contact appropriate parties.

Infinity Web Server

After installation, make sure that the network is operating properly and that the controller is responding to its configuration. The documentation provided with the controller explains installation techniques. The Web Server does not help you setup or configure your system. It merely allows you to access points after everything is running.

Andover Controls Corporation

Communicating with the Server

A Web Browser application (i.e., Microsoft Internet Explorer) is used to communicate with the CX or SX-based Web Server. This application is not included with the Server! You must obtain it from another source. However, these Browsers are distributed freely by their manufacturers. We do not endorse any particular brand, however, internally we have qualified the Web Server to operate with Microsofts Internet Explorer. You can obtain the Browser application from various sources or directly from Microsoft at the following Internet Web address: http://microsoft.com/ie The Browser application must be operating to view the screens of information sent from the Server. The PC that is running the Browser application must also be connected somehow to the Ethernet EnergyNet of your site (either directly or indirectly). After installation, run the Web Browser application. Because these programs were designed to allow Internet access, the first time it is run it will be looking for an Internet site pre-programmed into its options settings. For the Internet Explorer application, this site is actually Microsofts own Web Server. If you are not connected to your site via the Internet, the Browser wont be able to communicate with the site and eventually an error message is displayed. Disregard the error. To access the Infinity Web Server, you must enter its network address into the editable field on the Browser screen labeled Address or URL: and press Enter. The Browser then transmits a request to this address for information.

The URL: or Address field is expecting a valid Uniform Resource Locator (a fancy name for an address). This address is actually a network identifier that describes the machine being used as the Web Server.

Infinity Web Server

IP Addresses

Each machine on the Ethernet network (the CX, SX workstation and the PC running the Browser) is identified by a unique network ID. This identification number consists of a series of hexadecimal digits that are assigned during manufacture that acts like a unique serial number. The TCP/IP communications protocol that is running over the Ethernet uses a different numbering scheme to identify each connected entity. During the network configuration process of a site, the network administrator assigns another number to each controller or workstation that corresponds to the Ethernet address. This TCP/IP identification number is called an IP Address. IP (Internet Protocol) addresses consist of four sets of decimal numbers separated by periods. An IP address might appear as shown below. The numbers change depending on your particular configuration. 172.16.153.166 Where as these numbers are assigned by a person, it is important that each set be unique. If there are two IP addresses that are the same on a network you are in for trouble. Whenever the Infinity Web Server communicates with another machine, it broadcasts the IP address of the machine it wants to talk to and then provides its own IP address so that the called machine knows where to direct its response. The IP address is used extensively from the Web Browser to view information from the server. It is important that you are familiar with the address of the controller or SX 8000 workstation used as your Infinity Web Server.

Associating a Name with an IP Address

Unfortunately, long sets of numbers can be confusing to remember. Your Network Administrator has the ability to associate a textual name with each numeric IP address for ease of use. Therefore, instead of identifying the CX controller with your Web Server as 172.16.153.166, you can simply call it Site1. In fact, if your system was set up with an SX 8000 workstation, you probably already have names associated with each controller. If not, it is a relatively simple task to assign a name by using a Nameserver application or directly by editing a file called an Hosts file that exists on the hard disk of each PC using a Browser. Some PCs may also have a file called LMhosts. Editing the Hosts & LMHosts Files The HOSTS and LMHOSTS files are located in the Windows directory of the machine that is running the Browser. These are text files and can be opened using the Notepad application. It is beyond the scope of this document to explain network administration, however, full instructions for associating a name with an IP address are provided in the header of a similar file called HOSTS.SAM or LMHOSTS.SAM that can be found at the same location. If you have both files, edit each of them. When you are finished editing, save the file as directed in the text and reboot your system.

Andover Controls Corporation

CX and SX Web Server Sites

When you enter the network IP address of a CX or SX Web Server into the Address or URL field of the Web Browser, it contacts the controller and receives information. When contact is made, you are connected to the server which is commonly referred to as a site. All addresses used with the Infinity Web Servers are composed of a combination of two or more parts. http://Servername The first part consists of the following text: http:// This identifier is standard for most Web addresses and is actually an acronym for hyper text transfer protocol. The colon and the two slash characters are necessary, dont forget them. The second part of the address is the IP address of the machine (CX controller or SX 8000 workstation) where the Web Server resides. As mentioned earlier, the IP address may be associated with a name for clarity. If your servers IP address/ name is Andover then the entry for your Address or URL is: http://Andover

Contacting the Server

Typing this combination into the Address or URL field of the Browser and pressing Enter causes the following sequence of events to occur: 1. The Browser matches the name entered with the list of IP addresses in the Hosts file to obtain the actual address.

2.

The Browser sends a message that it would like to communicate with the entity at that IP address (the Web Server).

3.

The Server acknowledges its presence to the Browser.

4.

The Browser requests a session with the Server.

5.

The Server sends an informational message that doubles as a user interface. It is sent in the form of an HTML text file that is decoded and displayed by the Browser.

Infinity Web Server

Home Screens

The Web Server includes a built-in screen written in HTML that is stored permanently in its memory. This screen is called the Home screen. Whenever you enter the basic IP address of the CX controller or the SX into the Browser, the Home screen is sent from the Server to the Browser and is displayed. The following is a representation of the built-in Web Server Home screen.

Screens displayed on Web Browsers are often referred to as pages. Each page is typically composed of text, images and backgrounds. Any one of these items can be used as an active button that can initiate some action. Browser text that is displayed in a contrasting color and often underlined acts like a control or menu item. When you move the mouse cursor over this kind of text or any active image or button it automatically changes to a pointing finger indicating that the item is a control. These items are commonly referred to as hyperlinks. On the Home page there is one hyperlinked menu item:

As the name implies, you can select reports (or pages) that are customized to your particular needs. When you move the mouse cursor over this text it automatically changes to a pointing finger. Clicking on the Custom Reports & Services text sends a message from the Browser to the Web Server requesting that a Plain English function called home be initiated. In this home function it is expected that there is some code that will initiate a custom report or perhaps display a menu page of some sort. To display a menu page on the Browser in response to the request, the home function must include some HTML coding describing the page. These HTML codes are sent back to the Browser using simple print statements from within the function. If you dont have a function called home in your system, clicking this option does nothing. You have to create this function.

10

Andover Controls Corporation

As explained, the Custom Reports & Services item is simply a method of accessing your custom HTML pages. These pages might be designed to show a particular combination of points. You might design a page that allows you to select from a number of other pages. For a complete description of how to create a home function and how to add HTML pages to any Plain English function, refer to the section entitled Designing Your Own Pages.

Built-In List View Functions

The SX 8000 based Web Server includes three built-in Plain English functions that can be called to display point information from the Browser without designing your own page. These functions allow you to view the following from the Browser: Pre constructed List Views Pre constructed Log Views Default List View of any object at any given path

List Views
You can display any saved list view using the SX 8000 Web Servers list view display function. Before calling this function youve got to: 1. 2. Create a list view including all the points you want displayed and their attributes. Save this list view and give it a name.

Important: When you create a list view for display by a Browser you must not include any user prompts. User prompts built into list views dont appear on the Browser. The will appear somewhere else (probably the SX 8000 screen) thus locking up the system. To display a list view from a Browser, enter the following Address or URL: http://Servername/listview/listviewname If your Server is called Andover and the listview is named TempInputs the list view URL is: http://Andover/listview/TempInputs Entering this address into the Address or URL field automatically builds an HTML display that is formatted into a table showing the listview you previously created. All the points and their current attribute values are displayed. This information is a static snap shot of the state of each item at the time of the report. You cannot change any of these values. The data is static. As their values change they will not be automatically updated on your screen. To view another snap shot youll have to click the Refresh button on the tool bar at the top of your Browser.

Infinity Web Server

11

Log Views
You can display any saved log view using the SX 8000 Web Servers log view display function. Before calling this function youve got to: 1. 2. Create a log view including all the items you want displayed. Save this log view and give it a name.

To display any log view from a Browser, enter the following Address or URL: http://Servername/logview/logviewname If your Server is called Andover and the logview is named OutputEvents the log view URL is: http://Andover/logview/OutputEvents Entering this address into the Address or URL field builds an HTML display that is formatted into a table showing the logview you previously created.

Default List Views

The SX 8000 Web Servers default list view is the display you would view if you double clicked on a classname in an SX 8000 tree view. To display the default view of a given path from a Browser, enter the following URL: http://Servername/listview/sitename/controller/Infinetctrlname/Classname If your Server is called Andover ,the sitename is named Building1, the CX or SX controller is named Floor1 , the Infinet controller called AHU1 and the classname is Inputs, the list view URL is: http://Andover/listview/Building1/Floor1/AHU1/Inputs Entering this address into the URL field builds an HTML display that is automatically formatted into a table showing the default listview for the class called Inputs. The class name must match the preset classnames as they appear in the SX 8000 tree display view.

Custom Pages
The power behind the Infinity Web Server is its ability to produce custom reports and user editable fields such as setpoint adjustments. These functions require you to produce HTML pages yourself to display the information. For a complete description of how to add HTML to your Plain English functions and create your own pages, refer to the section entitled Designing Your Own Pages.

12

Andover Controls Corporation

Designing Your Own Pages

Designing your own HTML pages for use with the Infinity Web Server is a three step process. 1. 2. 3. Create the HTML that defines the page. Convert the HTML into Plain English print statements. Load the Plain English function with the embedded HTML into the system.

There is one important concept to master before you construct your own Web Server pages. The Infinity Web Server sends these user created HTML pages to your Browser in response to a call to a Plain English function. You create a custom function and include HTML codes that serve as your user interface within that function. When the function is called, the Server machine (CX or SX 8000) operates on the Plain English commands and sends any output it generates to the Browser. Output statements are simple Plain English print statements. To display a page from the Custom Reports... item on the Home page of the CX or SX 8000, youll need to define a function called home and include an HTML page within that function (assuming you want it to communicate with a user). To directly display a custom page without having your users access the built-in home page, youve got to define a function including the HTML describing the page and save it under some descriptive name. Assuming you saved the function to your Web Server machine (CX or SX 8000), to display the page, enter the following URL: http:// Servername/functionname Where the Servername is the name of your Web Server and functionname is the name of the function that includes your page. Should you save the function to another location adjust the path accordingly.

URL Error Reporting

If a page doesnt exist at the URL or path entered, the Browser will report that the name entered doesnt seem to be responding. Should this happen, check the path entered and try again.

Infinity Web Server

13

Note: To quickly identify the functions that you create for HTML, we recommend that you follow a naming convention that distinguishes normal functions from the Web-based ones. Using a function name such as MainMenu.htm quickly identifies this function as one that produces HTML.

Making HTML

The simplest way to build a Plain English served page is to start with an HTML editor. HTML is called a markup language because it is intended to be used with plain text. It adds codes to the text. For example, to indicate that a section of text should be displayed in bold, the following codes are added: <STRONG> This is to be displayed in Bold. </STRONG> The HTML code <STRONG> indicates an emphasis should be added to all text following this command. When the </STRONG> code is encountered, it indicates that the Strong code is to be terminated. There are dozens of these codes. It is not the intent of this manual to teach you how to create pages in HTML. We can, however, recommend two excellent books on the subject. The following book is a great introduction to the language and may be all you need to get up speed creating your own custom pages: Dummies 101: HTML Deborah S. Ray & Eric J. Ray 1996, IDG Books Worldwide, Inc. ISBN: 0-7645-0032-5

Once youve mastered the basics, be sure to pick up a copy of the following book. It covers every aspect of the language and includes many tips to improve the display and speed of display of your pages: Teach Yourself Web Publishing with HTML 3.2 in 14 Days Laura Lemay 1996 Sams.net Publishing ISBN: 1-57521-096-7 Both of these books come with CD ROMs packed with shareware programs to edit and save HTML pages and to create Web-friendly graphic images. Microsofts Internet Explorer is available free from many sources. Although the version that it shipped with Windows 95 is an early one, you can download the latest version from the Microsoft Internet site (http://www.microsoft.com/ie/). The HTML editors included with the books are text based tools. They simply allow you to automatically add the HTML codes to your text page. Full graphical based editors exist that allow you to design the page much as you would in a page layout program. These editors write the HTML codes for you as you place text and objects on the screen. One that we at Andover Controls have had success with is Microsoft Front Page 97. There are many others and new ones are being introduced every day.

14

Andover Controls Corporation

Simple HTML Menu Page

A Basic HTML Page Before you define any Plain English functions you would design and test your HTML page. The simplest form of an HTML page that can be used with the Infinity Web Server follows: <HTML> <HEAD> <TITLE> Title of My Page </TITLE> </HEAD> <A HREF=http://Servername/page1name> Menu Item 1 </A> </HTML> This page displays as follows:

<HTML> Tag

Notice that the entire page is bracketed between <HTML> tags. This defines the boundaries of the HTML code. It tells the Browser to respond to everything sent between these tags is meant for display. The Heading tags <HEAD> include the Title tags. The title appears in the title area of the Browser window. Titles are recommended because your user can instantly identify the screen being presented. In the example the words Title of My Page would be replaced with the title of your page. The following code is the meat of the page. It is within this area that any control items are placed. The example includes a single hyperlink menu item called Menu Item 1 denoted by the HTML code: <A HREF=http://Servername/page1name> Menu Item 1 </A> This line of code displays the text: Menu Item 1. The Menu Item 1 text would be replaced with the text of your actual selection. Notice that in HTML, hyperlink menu items are not called hyper or menu at all. They are denoted by a single tag called an Anchor <A>. Information placed between the Anchor tags refer to the action to be initiated when the user clicks on the item. It also includes a description of what the selectable item is (graphic or text). To define this information the Anchor tag includes several attributes which are supplemental tags that define various aspects of the Anchor. The HREF attribute defines the action to be taken when this item is clicked.

<HEAD> Tag <TITLE> Tag

<A> Tag

Infinity Web Server

15

In our example, clicking on this item would direct the Browser to display an other HTML page located at the path specified in the HREF attribute. This page is defined aspage1name.htm. You would substitute a path to another page you created for this place holder just after the equals sign. Be sure to include quotation marks around the pathname. Other possible actions would be calls to Plain English functions. To add more selections to your text menu, simply duplicate this line and change the text accordingly.

Web Function Basics

The built-in HTML pages in both the CX and the SX 8000 Web Servers allow access to your custom pages. Clicking the Custom Reports and Services item on the main pages of these servers calls a function called home. The Web Server tells Plain English that all print statements are to be directed back to the source connection from where the function was called instead of the normal printer port. This gives the function the ability to serve the HTML code (which is plain text) back to the requesting Browser. Therefore, when the Browser calls for the home function to activate, all of homes output will be directed back to the Browser. Your function can include any Plain English code that it takes to perform the action you require. When it comes time to report something to the user or to request some action, HTML codes are used to communicate with the user. In order to embed HTML into your Plain English function it must be converted into the proper format. This process is straightforward and uncomplicated, however, as your page increases in complexity, the possibility of error increases. HTML code is added to your function using standard Print statements. The following HTML line: <HEAD> <TITLE> Title of My Page </TITLE> </HEAD> is then represented in your function as: P <HEAD> <TITLE> Title of My Page </TITLE> </HEAD> Add the P command denoting a Print statement before the line begins and bracket the entire HTML line with quotes. For HTML lines that include embedded quotes (like the Anchor tags) youve got to add the vertical bar | character before the embedded quote as shown below: <A HREF=|http://Servername/page1name|> Menu Item 1 </A> The vertical bar tells Plain English to ignore the following character. This way it wont confuse the embedded quote as an end of print statement.

16

Andover Controls Corporation

Sample Home Custom Page

The following is a sample home function. It displays an HTML page appropriately called Sample Custom Page and presents three text item choices that a user may select.

Because it uses built-in functions, this page works only with SX 8000 based Web Servers. The first item calls the built-in SX 8000 function to display a previously saved log view. The second item calls the built-in function for displaying the default list view of a class. The last item allows the user to read the current value of a setpoint and to change it to a different value. The following is the Plain English function in its entirety:
P "<HTML>" Print "<HEAD>" Print "<TITLE>INFINITY Web Server Sample Page</TITLE>" Print "</HEAD>" Print "<H1 align =center>Sample Custom Page</H1>" Print Print Print Print Print "<UL>" "<LI><A HREF=/logview/TodaysEventLog>Today's Access Events</A>" "<LI><A HREF=/listview/Points>List Of All Points</A>" "<LI><A HREF=/PE/WebSetSample>Change Temperature Setpoint</A>" "</UL>"

Print "" Print "</HTML>"

Note that we have alternately used the P and PRINT versions of the Print statement. Plain English allows both forms to be used. After the initial HTML headers, the meat of the code is presented.

Infinity Web Server

17

The first line displays a large title directly on the page.

Print "<H1 align =center>Sample Custom Page</H1>"

This title is defined as a Heading (Heading 1 to be exact <H1>). The text of the heading is included along with an attribute telling the Browser to center the heading ALIGN=CENTER. Headings are pre-defined in HTML and include many different sizes. The next line of code tells the Browser that the following lines constitute an unordered list. This is technical jargon for make the following lines bullet items. If you asked for an ordered list youd get numbered steps.
Print "<UL>"

Each of the following selections will be displayed with a leading bullet. The next three lines are the user selections. Each selection is now part of a bulleted list and is defined as a list item <LI>. They all include Anchor statements defining the text of the item and its action.
Print "<LI><A HREF=/logview/TodaysEventLog>Today's Access Events</A>" Print "<LI><A HREF=/listview/Points>List Of All Points</A>" Print "<LI><A HREF=/PE/WebSetSample>Change Temperature Setpoint</A>"

This first selection allows you to display a previously saved log view. It calls the built-in function called logview and references a previously saved logview of all access events that happened today. The logview was saved under the filename TodaysEventLog:
Print "<LI><A HREF=/logview/TodaysEventLog>Today's Access Events</A>"

The second item displays the default listview of the class: Points. This displays the listview of the Points class that you could see manually if you double clicked the Points icon in the SX 8000.
Print "<LI><A HREF=/listview/Schedule>List Of All Schedules At The Root</A>"

The third item calls a custom function called WebSetSample:

Print "<LI><A HREF=/PE/WebSetSample>Change Temperature Setpoint</A>"

The last two lines finish the function by providing the terminator code for the bullet list </UL> and the HTML terminator </HTML>.

18

Andover Controls Corporation

Sample Setpoint Entry

The last selection item on our custom page called a function named WebSetSample. The following is the WebSetSample function which includes its own HTML page. The function presents a page that displays the current value of a temperature setpoint and allows you to change the setting. This example provides you with some basic information that youll need to access any points in your system. The page displays as shown:

The Plain English code for the WebSetSample function is as follows:

P "<HTML>" Print "<HEAD>" Print "<TITLE>Accessing Points</TITLE>" Print "</HEAD>" Print "<H1 align =center>Sample Setpoint Page</H1>" Print "<basefont size = 4><strong>" Print "Enter a value:" Print "<FORM ACTION=|"http://Andover/PE/WebSetSample|" METHOD=|"POST|">" Print " <INPUT SIZE=16 TYPE=|"TEXT|" NAME=|"RoomSetPt1|" VALUE=|"" ;RoomSetPt1 ; "|">"; Print " <INPUT TYPE=|"SUBMIT|" VALUE=|"Enter|">" ; " <INPUT TYPE=|"RESET|" VALUE=|"Reset|">" Print "<P>" Print "<A HREF=/PE/Home>Back To Home Page</A>" Print "</form>" Print "</HTML>"

Although this example seems more complex than the sample custom page presented earlier it actually only adds some formatting that allows a user to enter values. This added formatting is called a form.

Infinity Web Server

19

Standard Page Stuff

The first part of the page presents the same basic page formatting commands that existed in the first custom page example:
P "<HTML>" Print "<HEAD>" Print "<TITLE>Accessing Points</TITLE>" Print "</HEAD>" Print "<H1 align =center>Sample Setpoint Page</H1>"

The titlebar displays the title Accessing Points and there is a large heading on the page titled Sample Setpoint Page. Nothing earth shattering here. Defining Text Just before the setpoint display, a text prompt to enter the new value is included:
Print "<basefont size = 4><strong>" Print "Enter a value:"

The first line introduces us to the concept of defining the size and style of a displayed typeface. The <basefont size> tag allows you to specify a number that indicates a relative font size. Usually this doesnt correlate to actual point sizes. The type style is defined by the <Strong> tag. Strong indicates Bold. The prompt itself Enter a value: is displayed in the relative size (4) and Bold typeface. Creating a Form The next line sets up the HTML Form that is used to display the point value and allow a number to be entered:

Think of a HTML form just as you would a paper form. It can include spaces where information is added. Before you can communicate directly with the server to exchange data about points, you must inform the Web Server that you will be transmitting data to it and you are expecting a reply from that data. The code to facilitate this communication is as follows:
Print "<FORM ACTION=|"http://Andover/PE/WebSetSample|" METHOD=|"POST|">"

The FORM command specifies that the following code is going to define the form. ACTION is an attribute that specifies the location or IP address of the Web Server. The METHOD attribute informs the server to POST the results. The IP address can be either an actual numeric IP or the name of your server. After entering data into your form youll be initiating a transfer of information from the form (Browser) to the Server. Any values to be displayed on the form are received through a similar transfer from the Server to the Browser.
FORM transfers Data

20

Andover Controls Corporation

Displaying and Setting a Point

Once youve indicated there will be a form on this page you can start adding user-editable controls. In this case we have included a text field where a numeric value of a point can be placed and a new value may be entered.
Print " <INPUT SIZE=16 TYPE=|"TEXT|" NAME=|"RoomSetPt1|" VALUE=|"" ;RoomSetPt1 ; "|">";

This code specifies that a text field be placed on the screen that will display up to sixteen characters (SIZE = 16). This field will accept input as well as long as they are textual entries (TYPE= |TEXT|). Note that in Plain English we have to include a vertical bar before using any quotation mark. This is because quotation marks are controls for Plain English. Placing a vertical bar before the mark tells the system to ignore the quote as a command and pass it as text. The vertical bar will not be sent to the Browser. The input field we have created for this sample is a temperature setpoint. You must define a string variable to hold the setpoint value. The name of the string variable holding the setpoint is then inserted into the command (NAME=| RoomSetPt1|) in this case the string variable is called RoomSetPt1. To display the current setpoint value, the text input field can display a default value before you enter data. To do this you set the VALUE attribute to the name of the string variable.

Refreshing the Displayed Value

An HTML page along with its displayed data is sent from the Plain English function to your Browser for display. Once that happens, the Server awaits some action from you. Therefore, the value displayed on your page is static. It is the value that existed at the moment you displayed the page. In the case of a setpoint value it is not that critical to have a real-time display of its value. However, if you want to display the temperature of the room in real time youve got to refresh that value periodically. There are two ways to accomplish this. The obvious way to refresh the value displayed is to manually refresh the page by loading it again. In fact, there is a Refresh button in the toolbar of the Browser. This method is a direct approach that you or your users would tire of quickly. There is an automatic method that can be employed providing your Browser supports its use. A new HTML tag has been introduced called <META> that can be configured to automatically load a page after a defined delay. If you include this in your page description and tell it to automatically load the same page again, it ends up reloading itself which therefore updates its displayed values.. In order to get a semireal time display of point information you must include this tag. The <META> tag is inserted into the <HEAD> section of the page. It includes an attribute, CONTENT=, that allows you to specify how many seconds to wait before the next refresh .and the name of the page to load. In our case the page is a call for the same function.

Infinity Web Server

21

Add the following line to your function:

P "<HTML>" Print "<HEAD>" Print <META HTTP-EQUIV=|REFRESH| CONTENT=|XX; URL=/PE/WebSetSample> Print "<TITLE>Accessing Points</TITLE>" Print "</HEAD>"

In the example shown, replace the XX with digits specifying the number of seconds (i.e., 10) to wait between displays. The URL is specified as a Plain English function called WebSetSample. This URL description is the page or function to load. Displaying Point Values If you are just interested in displaying a point value without allowing the user to change its value all you have to do is treat the point as a text variable. To add a line that simply displays the setpoint weve been using, include the following:
Print " <INPUT TYPE=|"TEXT|" NAME=|"RoomSetPt1|" VALUE=|" RoomSetPt1|"

Sending Data to the Server

After defining the area where you will enter the data you will need to specify a control that will actually send the new value to the server. Forms use a standard control for this purpose called a Submit button. You dont have to call it Submit but you do have to define this button for action to take place. The following code adds both a Submit control and a Reset control to allow the user to delete an entry before entering another.
Print " <INPUT TYPE=|"SUBMIT|" VALUE=|"Enter|">" ; " <INPUT TYPE=|"RESET|" VALUE=|"Reset|">"

Once all this code is entered you have a working example of entering data to change a setpoint. The same code can be used to change any editable point in the system

Errors

Should your page reference a point that has not been defined, an error page will be displayed informing you of the problem. A typical error page is shown below:

22

Andover Controls Corporation

Web Page Graphics

In real life it is assumed that you would endeavor to make your pages more visually appealing than this simple example.

A Word About Graphics You may add graphics to the background or as individual pictures within the page, but be aware that graphics are not embedded into the HTML code. They are treated as separate graphic image files and only their physical location is referenced in HTML. Codes exist to add the pathname where the graphic image file can be found. Because the files are referenced, graphic items must exist at the path depicted. You cant be moving these image files around unless you change the pathname in the HTML code. If the image file has been moved, the Browser probably wont notify you of an error. It simply wont show the graphic. The Infinity Web Server doesnt have the capability of serving the graphic files itself. The CX cant hold graphics in its internal memory and the SX 8000 OS/2 environment wont support our graphics. You will need a separate computer running a Web Server product to act as a graphic server. This server doesnt have to be elaborate. In fact, Microsofts Front Page comes with a product called Personal Server that can be used on a Windows-based computer. Web Graphic Formats Currently, Web Browsers can only display two types of graphic image files. These are the formats: GIF and JPEG. It is beyond the scope of this manual to explain the differences between the two other than to refer you to the books referenced at the beginning of this section. Be sure to pay close attention to any discussion of file size because image files can get large. Inserting a Graphic The simplest form of graphic you could use on your pages is to include the logo of your company. The home pages built-into the CX and SX 8000 Web Servers include the Infinity Webserver logo. The following is the line of the code that adds our logo to our page: <IMG SRC=weblogo.gif ALT=Infinity WebServer>

The IMG code indicates that an image is to be placed. The SRC attribute includes a path to a file called weblogo.gif that is located at the same path as the page. Therefore, only the filename of the image file is included. The Browser assumes it will find the file at the current path. The ALT attribute allows you to enter a textual description of the image that would be displayed if the Browser could not find the image file. Some Words About Image Placement HTML is a very basic environment. It displays text and images in the order they exist in the code. To have more control over the placement of items, consider building a table. Tables are described in both of the reference books mentioned.

Infinity Web Server

23

Storing Graphic Files Any image that is referenced on an HTML page must exist somewhere on your machine or on a network addressable machine. That means that you could store graphics at each user workstation, the NT file server or some other Windows or NTbased computer that can be reached through your network. However, keep in mind that the machine storing the graphics must be running a Web Server of its own. The following depicts the process the Web Browser goes through when displaying a page with referenced graphics:

CX Web Server

NT File Server

PC with Browser

HTML File

Web Server sends the HTML page to the Browser With a reference to a graphic stored on the NT Server

CX Web Server NT File Server

PC with Browser

Graphic File

PC with Browser

Web Browser reads graphic reference and requests the graphic file from the NT Server.
24 Andover Controls Corporation

HyperLink Design
Hyperlinks are those entities that act like launching platforms on your page. Clicking the item (text or a even a graphic) displays another page or invokes a Plain English function. Links on an HTML page used with the Infinity Web Server that have a corresponding Plain English function will call that function. Specifying a Text Link The graphical editors (i.e., Front Page) allow you to specify the destination of the link as a path entered into a dialog box. A text link that requests Display All Inputs calls a Plain English function called AllInputs would be stated as:
http://Andover/pe/AllInputs

Note the addition of the /pe/ item to the path. This indicates that the path is to a Plain English function instead of a straight path to another HTML page. If you are using a text editor to accomplish the HTML coding, the following would be required:
<A HREF=http://Andover/pe/AllInputs/> Display All Inputs </A>

The <A> keyword specifies a hypertext anchor, the HREF attribute calls out the path to follow when selected. On your Browser, the item Display All Inputs is written in a contrasting color to distinguish it from regular static text. Specifying a Graphic Link Just as you can use text items to act as hyperlinks, images can also act the same. The form of the statement is the same with the addition of the IMG code:
<A HREF=http://Andover/pe/AllInputs/> < IMG SRC=weblogo.gif > </A>

Everything between the <A> keywords specifies a hypertext anchor. This code makes the graphic of our logo into a hypertext button. Clicking the logo invokes the AllInputs function.

Infinity Web Server

25

Security Concerns
Security is always a concern when providing access to building control systems. The Web Server/HTML method of accessing our controllers have some inherent security problems. The main problem is that HTML is a text based solution. The text is not encrypted, therefore it is possible to hack into a line and view the text being transmitted if you know what youre doing. BrowserIP Without providing a full internal encryption system, we do provide a simple functionbased path to provide a limited amount of protection. This feature is in the form called BrowserIP. If you create a string variable called BrowserIP, any Browser that attempts to change the value of a point will have its network ID (IP Address) captured within the string. You can use this information with a simple IF...THEN logic statement to limit their access. Testing the captured ID against a list of known Browsers can result in a simple security system. The BrowserIP variable captures the IP address just prior to the functions operation and holds it until the function is completed. Therefore the Browser that called the function has had its IP address captured.

Challenge

A method of preventing others from guessing your password should they access the system using your computer is through something called a challenge. Unlike a password, the challenge represents a random entry that would be hard to duplicate without constant monitoring. In a challenge as you attempt to access the server it presents a number and an entry box. You are to manipulate that number through the use of a key to gain access. You might choose to multiply the number by your age or the birthday of someone you know. This manipulation calculation becomes the key. The server knows your key. Every time the person logs onto the system it presents a new random number. This method uses the BrowserIP variable to validate you as a registered user and the challenge to make sure that someone else isnt using your system. To create a challenge youll need the following: Random number generator that places its output into a Plain English string variable. An HTML page that displays the challenge random number (from the string variable created above) and includes an area where the user can enter the answer to the challenge. A Plain English function that maintains a table of BrowserIPs and keys. When the answer to the challenge is submitted to the function it must look up the user via the BrowserIP variable and perform the calculation listed in the key. It then must match its answer with that provided by the user.

26

Andover Controls Corporation

Password

The standard form of access protection is the use of a password. These can be useful, however, studies have shown that people tend to use the same password for everything. Therefore, knowing one gains access to all. We feel that passwords should be used along with the other methods discussed on this page. Providing password protection to your functions requires that you create a separate page with a text input area where a password would be entered. The entered text then needs to be checked against a list of known-good passwords. The first step in this process is to define a screen where a user might enter their name and password. Something like the following screen:

Although not complex, this would do the trick. It includes both user name and password fields. The Reset button clears both entries and the Enter button sends the two fields to the server for validation. The HTML code to create this page is shown below:
<HTML> <HEAD> <TITLE>Andover Controls Password Demo</TITLE> </HEAD> ' <body background = http://theserver/web_art/home_art.gif> " ' If you want background art, use a line similar to above <Pre> <H1 align =center>Andover Web Password Demo</H1> <basefont size = 4><strong> Please enter your user name and password below: <FORM ACTION="http://"Andover"/PE/Passvalidate" METHOD="POST"> User Name: ; ""> <INPUT SIZE=16 TYPE="TEXT" NAME="WebUser" VALUE="" ; WebUser

Password: <INPUT SIZE=16 TYPE="password" NAME="WebPassWord" VALUE="" ; WebPassWord ; "">

<INPUT TYPE="SUBMIT" VALUE="Enter"> </HTML>

<INPUT TYPE="RESET" VALUE="Reset">

This example uses the <PRE> tag which tells the Browser to use formatting literally from the document. Therefore, if you insert two blanks between lines, the page

Infinity Web Server

27

Technical Manuals Online! - http://www.tech-man.com

displays with two blanks between the lines. The <PRE> tag makes it easy to lay out a document such as this one. Like the Setpoint example, this page uses a Form action to capture data and send it on to the server. In this case the data is captured into two variables called WebUser and WebPassWord. The first is set up as a standard text entry field. The second field uses the Password setting of the Type attribute. In this field all entries are echoed as asterisks so that anyone watching over your shoulder cant read the password as typed. In applications where tighter security is required, you should endeavor to rename all your variables so that a password or user name variable wont be obvious. Some suggestions might be WebX instead of WebUser and WebY instead of WebPassWord. The variable data is sent to a function that maintains a table of users, passwords, and IP addresses. Upon execution, the function matches the WebUser name captured from the password page against the names in the table. If this matches properly, it then matches the WebPassWord variable against the password value stored in the table corresponding to the name. As a third check, it matches the IP address captured in the BrowserIP variable against that stored in the table as well. When all these items are correct, another entry in the table, log state, is activated indicating that the user is logged on. It also marks the time and date of the logon. A separate function monitors the log state variable and resets it after ten minutes of inactivity. The Plain English code to accomplish this password demo can be found on the Technical Support Department bulletin board.

Advanced Design
Obviously it is beyond the scope of this manual to investigate every method of designing pages for use with the Web Server. However, we can point you in the general direction of the information youll need to accomplish some tasks. To Design: Graphic panels with embedded values Alarm Displays with Interaction Selecting Points to Display Setting Points and Setpoints Check Into HTML: Tables & Frames Tables & Forms Forms Forms

The reference texts mentioned at the beginning of this manual include great examples of using all of the above entities. Just remember to include a string variable for every control you create for forms. More Examples The Andover Controls Technical Support Department maintains a bulletin board where other Web Server examples are stored. Feel free to download and study the examples to learn more about how to design your own site.

28

Andover Controls Corporation

30-3001-683

Infinity Web Server Users Guide Rev A