Transcript No Slide Title

Web@aGlance
Product
Training
Web 102
Links, Tables, Forms and Charts
Copyright 2000 eMation
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.
Copyright 2000 eMation
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
Copyright 2000 eMation
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
Copyright 2000 eMation
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>
Copyright 2000 eMation
HTML - JavaScript
• <SCRIPT LANGUAGE=“JavaScript”>
• function dostuff() {
• arg = open.Window (“”, “New_Win”, “”); }
• </SCRIPT>
• <form>
• <input type = “Submit” Value = “New
Values” onclick = “dostuff();”>
• </form>
Copyright 2000 eMation
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>
Copyright 2000 eMation
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>
Copyright 2000 eMation
Hot Link Wizard
 Creates hyperlinks
 Especially useful for
timeless content
(what’s the level
right now?)
 Output not intended
for user interaction
at runtime.
Copyright 2000 eMation
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
Copyright 2000 eMation
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
Copyright 2000 eMation
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.
Copyright 2000 eMation
Charting - Basic
Capabilities
 Charts are time-based (Currently, not xy 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
Copyright 2000 eMation
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
Copyright 2000 eMation
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
Copyright 2000 eMation
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)
Copyright 2000 eMation
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
Copyright 2000 eMation
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
Copyright 2000 eMation
Chartlet Method Selection
Chart
Type
tags, attrs,
dsNames,
dsUnits,
dsServers
Y
dsMethod
Bar
Chart
Y
PollTable
Interval
History
Y
GetHistory
dsStartTimes,
dsSampleCounts,
dsIntervals
Use script for relative
time. Now-x, and
either count or interval.
Strip
Chart
Y
Monitor
dsChartWidth
Can disable prefetch if
no history available
MinMax
Average
Y
GetHistory
As Interval History, plus
minmax_GranInterval
Actual
History
GetHistEvent
time parameters
dsStartTimes,
dsEndTimes,
dsSampleCounts
Comments
Sample Count is a
max: No values are
returned later than End
Time.
How set polling rate?
Set once only?
Copyright 2000 eMation
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().
Copyright 2000 eMation
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
Copyright 2000 eMation
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
Copyright 2000 eMation
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”>
Copyright 2000 eMation
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
Copyright 2000 eMation
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
Copyright 2000 eMation
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)
Copyright 2000 eMation
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.
Copyright 2000 eMation
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
Copyright 2000 eMation
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
Copyright 2000 eMation
Server Administration
Copyright 2000 eMation
After W@aG Installation
Copyright 2000 eMation
FrontPage Users
Copyright 2000 eMation
 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.
Copyright 2000 eMation
 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.
Copyright 2000 eMation
Kinks & Hints
Before you create a new
Web using FrontPage, ensure
that your root directory is not
set for Execute access. If
it is, IIS will not allow files
to be written its subdirectories.
FrontPage, attempting to write
into http://localhost/NewWeb,
will fail.
In general, even script access
should be restricted to a few
directories, like cgi-bin
.
Copyright 2000 eMation