No Slide Title
Download
Report
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