Post on 30-Dec-2015
transcript
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 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
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
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
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
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 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 .