Copyright 2000 eMation Web@aGlance Product Training Web 102 Links, Tables, Forms and Charts

Copyright 2000 eMation

Web@aGlance Product

Training

Web 102Links, Tables, Forms and Charts


Topics

HTML (with a little help from some friendly Wizards)• Tables, Forms, and (client-side) Scripting

Charting• Chart Types. Charting features.• Chart layout & configurable properties.• Scripting the Chartlet.


Wizards

Four Wizards available to generate Client-side HTML (scripting).

Integrated with FrontPage or can be used standalone.

Output from Wizards can be further edited and modified for ultimate flexibility


Web 102: What’s HTML?

Client-side Script is used to respond locally to Browser events; e.g., button press

Script has access to values from input controls (form.ctrlname)

Programs can do local validation before submitting to Web server backend, or set properties & invoke methods of client-side objects


HTML <Applet>

<applet code=“AAGHistGraph.class”• codebase="http:/aagweb/Classes/”

name=“Fred”• align="baseline” width="400" height="361" • archive="/aagweb/Classes/aaggraph.zip">• cabbase="/aagweb/Classes/aaggraph.cab"• <param name=”dsMethods"

value=”History">• <param name=“tags”

value=”lic04”,”tic04”> </applet>


HTML - JavaScript

• <SCRIPT LANGUAGE=“JavaScript”>• function dostuff() {

• arg = open.Window (“”, “New_Win”, “”); }

• </SCRIPT>• <form>• <input type = “Submit” Value = “New

Values” onclick = “dostuff();”>• </form>


Forms & Tables

<form name="F1"> <table BORDER="1"> <tr ALIGN="LEFT"> <td><font SIZE="5">Tags</font></td> <td><font SIZE="5">Attrs</font></td> <td><font SIZE="5">Start Time</font></td> <td><font SIZE="5">Interval</font></td> <td><font SIZE="5">Samples</font></td> </tr> </table>

NB: No Action or Method properties in the <form>. <table> is enclosed in <form></form>


Buttons & Forms

<table> <tr ALIGN="LEFT"> <td> <input TYPE="button"

ONCLICK="buttonClick1(document.C1,document.F1)" VALUE="Refresh">

</td> <td> <input TYPE="button"

ONCLICK="exportClick1(document.C1,document.F1)" VALUE="Display Data Table">

</td> </table> </form>


Hot Link Wizard

Creates hyperlinks Especially useful for

timeless content (what’s the level right now?)

Output not intended for user interaction at runtime.


Lab 1

Use standalone HotLink Wizard Build three hyperlinks that can be included

in a document, slide show, or email message.

Each link should do one of the three:• Produce a table w/bar chart of Reactor 4 current

levels• Produce a table w/chart of actual Reactor 4

temperatures for last 24 hours• Produce a chart of the daily yields (YIELD.PV) for

the last 30 days from Reactor 4


Form Wizard

Returns a table of values and optionally charts them

Provide default parameter values or provide total freedom with range of choices

Lets you give exactly the amount of flexibility a class of users require


Lab 2

Using the Form Wizard… Build an HTML page to allow a user to

compare the Levels of Reactor 4 against their Setpoints (Targets).

Limit the user to LIC04 and LIC05 But remain flexible on the amount of

data to display (start time, interval, samples)

If time allows, experiment with Actual vs. Interval data.


Charting - Basic Capabilities

Charts are time-based (Currently, not x-y plots or SPC)

Real time or historical data Built-in UI for operating within the

selection External, html form-based UI to change

selection or export it to Excel, clip board


Real Time Strip Chart

Sampled data, not continuous like chart recorder

“Time span” determines the chart width “Interval” advises the Data Source on

sampling interval Pre-fetch overcomes browser

limitations if points are historized


Real Time Bar Chart

Useful for comparing magnitudes of a range of variables in Real Time

Snap Shot and polled update modes Optional pseudo 3D effect Row major and column major views Extensive fine tuning of bar size, gaps,

margins, label locations


Plotting Historical Data

Actual History, as stored. Determine exact time of change, see gaps...

Interval history, as interpolated. Compare multiple tags during the same period

Multiple time periods for batch-batch, shift-shift, day-day comparisons

Statistics calculated by data source, part of server personality, or by Chartlet(MinMaxAverage)


Chartlet Features Eight Pens, potentially from 8 servers. Fixed scaling to detect unusual events Use autoscaling for maximum dynamic range,

multi-y for comparing shapes Multiple server for unit-unit compar-isons.

Multiple times for batch-batch. Pan & zoom with bounding box, buttons Mouse Tracker for value or delta at locations Primary and secondary y-axes available


Chartlet features (cont.)

Line chart with lines only or points only. Per pen data markers.

Bar, pen, grid, rubberband colors; chart, plot, axes, legend background colors and fonts characteristics are all selectable

Axes, bar labels, legend, and tracker font characteristics are all selectable

Properties documented online, and are viewable in FrontPage object browser


Chartlet Method Selection

ChartType

tags, attrs,dsNames,dsUnits,dsServers

dsMethod time parameters Comments

ActualHistory

Y GetHistEvent dsStartTimes,dsEndTimes,dsSampleCounts

Sample Count is amax: No values arereturned later than EndTime.

BarChart

Y PollTable How set polling rate?Set once only?

IntervalHistory

Y GetHistory dsStartTimes,dsSampleCounts,dsIntervals

Use script for relativetime. Now-x, andeither count or interval.

StripChart

Y Monitor dsChartWidth Can disable prefetch ifno history available

MinMaxAverage

Y GetHistory As Interval History, plusminmax_GranInterval


Chartlet at RunTime

refresh(), after changing data selection, tells the chartlet to repaint its window

exporter(), tells the Web server to replace the current page with an HTML table, or Excel, or with tab-delimited data

stopstripchart() freezes the stripchart A limited number of chartlet properties

are scriptable in the current product release, or use undocumented set().


Chartlet Time

Web@aGlance absolute time syntax: Now -15m, today, yesterday, Friday, Thursday+8h

Converted to universal time by the chartlet (beware queries across time zones)

Translated according to server personalities


Charting Wizard

Only reports the data in graphical format

Has additional features to construct simple trend viewer

Chart is more immediate than Forms method.

Can export data to Excel or other Mime types.

Can edit Chart Applet and JavaScript functions for additional customization.

In FrontPage Applet can be easily resized and controls moved around


After the Wizard is finished...

The chartlet properties can be viewed in the FrontPage Object Browser (dblclick)

The chartlet size can be varied by dragging

The (form) table can be adjusted, and controls moved around (within reason)

If you change the default values of controls, you must also change that <param> tag, or add a <body onLoad=“event handler”>


Charting Lab

Use the ChartWiz to Create • A strip chart with fixed and hidden

parameters• A bar chart with multi select for tag choices• An Actual History with radio buttons and

Export to Excel capability• An Interval History that lets you compare

any two days of the week


Building a Web with FrontPage

FrontPage Explorer enables creation & management of Web layout, hyperlinks

FrontPage Editor enables manipulation of a single HTML page at a time, with little skill at HTML required.

Web@aGlance Wizards simplify the preparation of requests for process information from the Automation Server


Designing Your Web

Determine Content - Each Page is an App Structure for Navigation Ease

• Minimize number of clicks required

Page layout affects usability• Navigation aids• Common “look and feel”

• Too few options often better than too many Security regime

• User Authentication, Access Control, Data Protection (Encryption)


Building a Web with FP2K

FrontPage Explorer enables creation & mgmt of Web layout & whiteboarding

Manages navigation & hyperlinks FrontPage Editor enables manipulation

of a single HTML page at a time Web@aGlance Wizards prepare

requests for process info thru Automation Server

No programming. No HTML.


Installation

Development usually on Personal Web services from the NT 4.0 Option Pack, published to IIS

The Web server should be installed and running, then install FrontPage and the FrontPage Server extensions.

Finally, install Web@aGlance Designer Edition on your development system, and/or

Web@aGlance Server Edition on your WNT AS system with IIS


Security Administration

Administer your Web via Mgmt Console• Start.Programs.NT4.0 Option Pack.Personal Web

Services.Internet Services Manager

Not via Front Page Tools.Security.Permissions


Server Administration


After W@aG Installation


FrontPage Users


If the Web server is a Windows NT Server running IIS (Internet Information Services), users and groups are set up and maintained in Windows NT, and cannot be created in FrontPage. You select the users and groups for your webs from these Windows NT accounts. Access to webs is then determined by the user's logon account (user name and password). When the user performs an action that requires permission, the web server requests a user name and password, and then FrontPage sends the user name and password that the user is currently logged in with.


Note Because FrontPage security is based on ACLs (access control lists), in order to enforce security, your webs must be hosted on an NTFS partition rather than a FAT partition.


Kinks & Hints

Before you create a newWeb using FrontPage, ensurethat your root directory is not set for Execute access. Ifit is, IIS will not allow files to be written its subdirectories.

FrontPage, attempting to writeinto http://localhost/NewWeb,will fail.

In general, even script accessshould be restricted to a fewdirectories, like cgi-bin .

Documents

Copyright 2000 eMation Web@aGlance Product Training Web 102 Links, Tables, Forms and Charts