This document describes the procedures and utilities for building real time Web based graphic screens under Visual Basic 6.0. These screens may be animated using real time data from a control system. Screens may be displayed on any workstation using a browser such as Microsoft Internet Explorer 5.5.

...

Expand

title	Adding Labels to the Form

A Label object will always be used for the non-changeable background text on a screen.

On the toolbox to the left, choose the label control.
Position the mouse where the object should be placed on the screen, hold down the left mouse button and drag to the desired size.
Naming the object is optional, but should start with lbl.
Set properties for label such as font, fore color, and back color.

For adding additional objects to the screen such as TelePro controls, refer to Section 6.5 [LINK] of this document

Expand

title	Saving the Project

Select the Menu option File, Save Project
Select the Menu option File, Save uc[name].ctl

...

Adding a Log Message Display

Expand

title	Adding a Text Box

Expand

title	Adding an Active Shape

Expand

title	Adding a Link Button

Expand

title	Adding Toggle Button

Expand

title	Adding a Bar Graph

Expand

title	Adding a Coverage Bar Graph

Expand

title	Adding a Trend Graph

Expand

title

Image Added

A tpriTextBox will always be used for data display and to input text.

Select the “uctpriTextBox” control and position it on your screen.
Below is a list of all the properties that are specifically used for the TpriTextBox control:

Property Name	Type	Default Value	Description
tAutoValidateMinMax	Boolean	False	Indicates whether or not the text box should try to validate user-entered data against the min/max values specified in the data dictionary
tBackReadOnlyColor	OLE_COLOR	White	Background color of read-only text box
tBackWriteDisplayColor	OLE_COLOR	&H0080FFFF& Light-yellow	Background color of editable text box while in display mode
tBackWriteEditColor	OLE_COLOR	&H0080C0FF& Light-orange	Background color of editable text box while in edit mode
tChanged	Boolean	False	Determines if user has edited the text box
tDataSource	Variant	Empty string ("")	This is the name of the host variable
tDisconnectedStr	String	“###”	Text in textbox when disconnected from the OPC server. May not be used if tDataSource = ""
tEnabled	Boolean	True	Enables the textbox on the screen
tFocusColor	OLE_COLOR	&H0000FF00& Green	Sets the color to outline the textbox when it is in focus
tFormat	Variant	Empty string ("")	Formats how the text is displayed
Tlocked	Boolean	False	Toggles between display and edit mode
tResetStr	String	“@@@”	String to be displayed when waiting for an update from OPC server
tResetToStr	Boolean	True	Determines whether to display the tResetStr string when waiting for an update
tText	String	Empty string ("")	Text displayed in textbox

Expand

title	Adding an Active Shape

Image Added

A tpriActiveShape will always be used to data display shapes.

Select the “ucTpriActiveShape” control and position it on your screen.
In the properties window for this object, edit the properties necessary for this shape.
Below is a list of all the properties that are specifically used for the tpriActiveShape control:

Property Name	Type	Default Value	Description
BackColor	OLE_COLOR	H000000FF (red)	Provides the "default" color for the shape (in the case that none of the bound conditions is true).
BorderColor	OLE_COLOR	Black	BorderColor for the shape. Remains the same at run time for any value.
BorderStyle	BorderStyleConstants 0 -Transparent 1 - Solid 2 - Dash 3 - Dot 4 - Dash-Dot 5 - Dash-Dot-Dot 6 - Inside solid	1	BorderStyle for the shape. Remains the same at run time for any value. May be changed at design time. The effect of setting the BorderStyle property depends on the setting of the BorderWidth property. If BorderWidth isn't 1 and BorderStyle isn't 0 or 6, BorderStyle is set to 1.
BorderWidth	Integer	1	BorderWidth for the shape. Remains the same at run time for any value.
FillColor	OLE_COLOR	Black	FillColor for the shape. Remains the same at run time for any value. Usually not used ("normal" FillStyle is transparent)
FillStyle	FillStyleConstants 0 - Solid 1 - Transparent 2 - Horizontal Line 3 - Vertical Line 4 - Upward Diagonal 5 - Downward Diagonal 6 - Cross 7 - Diagonal Cross	1	FillStyle for the shape. Remains the same at run time for any value.
Shape	ShapeConstants 0 - Rectangle 1 - Square 2 - Oval 3 - Circle 4 - Rounded Rectangle 5 - Rounded Square	0	Provides the different appearance of a shape. Remains the same at run time for any value.
Font	Font	MS Sans Serif/ Bold/ Size=12	Provides the font for any text shown inside the ActiveShape control. The text will be centered. If the font is changed, the height of the label area increases. Remains the same at run time for any value.
tNumTextLines	Variant ( >=1 and < 4)	1	Determines (with the font.size) the height of the ActiveShape label. Cannot be changed if the shape property is oval or circle.
tDataSource	Variant	Empty string ("")	This is the name of the host variable
tFormat	String	Empty string ("")	Reserved for "outside" use (probably OpcMgr).
tURL	String	Empty string ("")	Assigns a target web page to go to when object is clicked
tBlinkingPeriod	Variant	200	Provides the frequency of blinking (the number of milliseconds between the changes). Remains the same at run time for any value.
tBlinkShapeBackColor	OLE_COLOR	Black	The color of the "blind interval" of blinking. Affects the ActiveShape appearance only if the property txxTextBlinking = False and txxShapeBlinking = True (txx may be from t00 to t15). Remains the same at run time for any value.
tDisplayValue	Boolean	False	If the property is set to True, then the text label of the ActiveShape will show the Value instead of showing txxText
tDisconnectColor	OLE_COLOR	&H808080 (gray)	Color of Shape when disconnected from the OPC server. May not be used if tDataSource = ""
tValue	Variant		This property is responsible for the current presentation of the Active Shape
t00Text	String	Text	Text to show inside the ActiveShape if none of the conditions are true (the value is greater then any of the txxBoundValue)
t00TextColor	OLE_COLOR	Black	ForeColor for the text, if none of the conditions are true
t00TextBlinking	Boolean	False	If this property is True and t00ShapeBlinking is False, then the Text inside the control will blink with the period equal to tBlinkingPeriod (if none of the conditions are true).
t00ShapeBlinking	Boolean	False	If this property is True and t00TextBlinking is False, then the Shape will blink with the period equal to tBlinkingPeriod (if none of the conditions are true).
t01BoundValue	Variant		Right bound value for the interval # 1. If the Value < t01BoundValue ("<=" in the case of t01IncludeEquals = true), then all the t01 settings would be applied to the ActiveShape.
t01IncludeEquals	Boolean	False	If this property is True, then "<=" will be used in the comparison for the interval # 1 (versus "<" for the False)
t01Text	String	Empty string ("")	Text to show inside the ActiveShape if the Value is inside the interval # 1. If the tDisplayValue=True, then the actual value would be shown instead of t01Text
t01TextColor	OLE_COLOR	Black	ForeColor for the text if the Value is inside the interval # 1.
t01TextBlinking	Boolean	False	If true, then show the text blinking for the interval # 1.
t01ShapeColor	OLE_COLOR	Black	Color of the shape if the Value is inside the interval # 1.
t01ShapeBlinking	Boolean	False	If true, then show the shape blinking for the interval # 1.
t15BoundValue	Variant		Right bound value for the interval # 15. If the Value < t15BoundValue ("<=" in the case t15IncludeEquals = true), then all the t15 settings would be applied to the ActiveShape.
t15IncludeEquals	Boolean	False	If this property is True, then "<=" will be used in the comparison for the interval # 15 (versus "<" for the False)
t15Text	String	Empty string ("")	Text to show inside the ActiveShape if the Value is inside the interval # 15. If the tDisplayValue=True, then the actual value would be shown instead of t15Text
t15TextColor	OLE_COLOR	Black	ForeColor for the text if the Value is inside the interval # 15.
t15TextBlinking	Boolean	False	If true, then show the text blinking for the interval # 15.
t51ShapeColor	OLE_COLOR	Black	Color of the shape if the Value is inside the interval # 15.
t15ShapeBlinking	Boolean	False	If true, then show the shape blinking for the interval # 15.

Tips on using a tpriActiveShape

The following condition should be true:
t01BoundValue <= t02BoundValue <= ... <= t15BoundValue.

Thus all numbers would be divided into 1-16 intervals.

For any new value, the code running behind the control will sequentially verify the following conditions:

Code Block

Value < t01BoundValue    ( Value <= t01BoundValue, if   t01IncludeEquals = True )

Value < t02BoundValue    ( Value <= t02BoundValue, if   t02IncludeEquals = True )

... 

Value < t15BoundValue    ( Value <= t15BoundValue, if   t15IncludeEquals = True )

If any of the above becomes true, then the verification would be stopped, and ActiveShape control will have Color, Text, and blinking flags that are associated with this txxBoundValue.

If none of them is true, then:

ActiveShape will have color specified in the BackColor property
Text from the t00Text property (or actual value shown, if the tDisplayValue = True)
Blinking flags from t00TextBlinking and t00ShapeBlinking.

If any txxBoundValue is not set (empty), then the rest of the sequence would be ignored by the control.

Example: if t05BoundValue is empty and the value is greater then t04BoundValue, the "default" settings would be used even if the following were true:

Value < t07BoundValue

Expand

title	Adding a Link Button

Image Added

To add a tpriCmdButton object to an ActiveX screen, follow these steps.

Make sure the name is “ucTpriCmdButton” and select it.
While holding down the left mouse button, drag a box on the screen.
In the Properties window, type a name for your command button. The tpri default for command button begins with ‘tcb’; for example, a name could be “tcbOprMenu”.
To assign a target to the command button, scroll down in the Properties window to ‘tURL’. If the page you are linking to is in the same directory as your source page, then you don’t need ‘http://’. All you need is the name of the file and make sure it ends with ‘.asp’; for example the tURL could be “3OprMenu.asp”.
It is possible to link back to a screen by its relative calling order. For example “@BACK1” will call the previous screen. “@BACK3” will call 3 screens back. The tpriCmdButton also can link back to the previous menu screen whether it be last accessed 1 screen or 10 screens ago using “@MENU”.

Command buttons do not work when running the page from Visual Basic, so you will need to open Internet Explorer and type in the address where your .asp page is stored. For example: http://web.server/sys/MyScreen.asp

Expand

title	Adding Toggle Button

Image Added

To add a tpriToggleButton object to an ActiveX screen, follow these steps:

Make sure the name is “ucTpriToggleButton” and select it.
While holding down the left mouse button, drag a box on the screen.
In the Properties window, type a name for your link button. The tpri default for a toggle button begins with ‘ttg’; for example, a name could be “ttgLawrhd”.

Below is a list of all the properties that are specifically used for the tpriToggleButton:

Property Name	Type	Default value	Description
tColorDisconnected	OLE_COLOR	&H00404040& (Dark grey)	Color of button when disconnected from the OPC server.
tColorNonZero	OLE_COLOR	&H0000FF00& (vbGreen)	Color of button when value does not equal 0, which usually means true
tColorTransmitting	OLE_COLOR	&H00E0E0E0& (Light grey)	Color of button when clicked and waiting to get updated form host
tColorZero	OLE_COLOR	&H000000FF& (vbRed)	Color of button when value equals 0, which usually means false
tDataSource	Variant	Empty string ("")	This is the name of the host variable to change.
tIncrement	Integer	0	0 = toggle Boolean value Positive # = amount to increment by when clicked Negative # = amount to decrement by when clicked
tValue	Integer	0	Sets the value of the toggle button

Expand

title	Adding a Bar Graph

Image Added

To add a tpriBarGraph object to an ActiveX screen, follow these steps:

Under Project, Components (or ctrl+T) and select “tpriBarGraph”.
Make sure the name is “ucTpriBarGraph” and select it.
While holding down the left mouse button, drag a box on the screen.
In the Properties window, type in a name for your link button. The tpri default begins with ‘tbg’; for example, a name could be “tbgSprays”.

Below is a list of all the properties that are used to design the graph:

Property Name	Type	Default value	Description
Font	Font	MS Sans Serif, Regular, 12	Font for Bar Numbers. Recommended font is “small fonts” about size 7
tBackColor	OLE_COLOR	&H00000000& (Black)	The color of the background of the graph control.
tBarNumbersStyle	Integer	2	Option for bar number shown directly below bars. 0 - don't show numbers 1 - show numbers from 0 to (N- number of bars) For example: 0 to 30 for 31 bars 2 - show numbers from 1 to (number of) bars. For example: 1 to 31 for 31 bars
tBorderColor	OLE_COLOR	&H00FFFFFF& (White)	The color for the enclosing border box
tBorderVisible	Boolean	True	Option for displaying the enclosing border box
tBottomLineVisible	Boolean	False	Option for displaying the line above the Box Numbers (like X-axis)
tCenterLineVisible	Boolean	False	Option for displaying the Center line
tEngUnitBottom	Integer	-9999	Value at the bottom of the bar graph area in engineering units
tEngUnitCenterLine	Integer	-9999	Reference value: where the bars in the bar graph will ‘grow’ from. If the …
tEngUnitTop	Integer	-9999	Value at the top of the bar graph area in engineering units
tForeColor	OLE_COLOR	&H00FFFFFF& (White)	The color for Bar Numbers, BottomLine and CenterLine
tLeftBarDataSource	Variant	Empty string ("")	This is the name of the host variable to be graphed.
tLeftBarPercent	Integer	50	Percentage of the allotted space per line to take up
tLeftFillColor	OLE_COLOR	&H000000FF& (Red)	Color of the major graph (set of bars)
tNumBars	Integer	2	Number of bars that are to be graphed
tRightBarDataSource	Variant	Empty string ("")	This is the name of the host variable to be graphed.
tRightBarOffset	Integer	50	Amount that the left hand edge of the minor bars is to be shifted to the right
tRightBarPercent	Integer	50	Percentage of the allotted space per line to take up
tRightFillColor	OLE_COLOR	&H0000FFFF& (Yellow)	Color of the minor graph

Tips on using the tpriBarGraph

The (left and right) bar colors are chosen on the object properties.
When the bar graph control is first published, no bar data will be displayed
Each of the bars grow from the engineering unit centerline
The bars will not appear until after the first time the data has been received and passed (automatically or under program control with fSetLeftVals and fSetRightVals) to the tpriBarGraph control.
If a bar value is the equal to the centerline value, no bar will be drawn
If you associate (or pass directly) a variant with less elements than bars, the values will be assigned to the first bars from the left side of the bargraph
If you associate (or pass directly) a variant with more elements than bars, the first values of the variant will be assigned to the bars
The rectangular area allocated to the bar graph object is divided horizontally into ‘tNumBars’ equal BarSlot areas, where ‘tNumBars’ is the number of bars selected in the property box. Valid number of bars ranges from 1 to 60.
There are 2 interleaved groups of bars available on the control: Left and Right
The number of Left and Right bars is always the same.
The Left edge of each of the LeftBars always starts at the left edge of the BarSlot. The horizontal width of the LeftBars is LeftBarPercent of the BarSlot.
The left edge of each of the RightBars starts RightBarOffset percent into the BarSlot. The width of each of the RightBars is RightBarPercent of the BarSlot width.
If the values of tRightBarOffset and tRightBarPercent add up to be 100, the right edge of the right bar will extend to the left hand edge of the next bar interval. The two properties and the tLeftBarPercent can be played around with to maximize the readability of the graph.
Bar graph objects work when the page is run through VB or through IE.
Normally, the tpriBarGraph control will be automatically animated with the values of the data variable indicated in the tDataSource property. If this property is NULL, the animation could be accomplished by implementing code similar to the following example:

The demoBarGraph screen has the following Bar Graphs defined:

Code Block

 SBar1:
    31 bars,
    Left and Right bars
    Engineering units are -5000 to + 5000, bars grow from 0 (center)
 SBar2:
    21 bars,
    left bars only
    Engineering units are 0 to 100, bars grow from 0 (bottom)


An example code snippet on how to pass values to the control follows:

Private Sub Command1_Click()
   Dim Test1(31) As Variant
   Dim Test2(31) As Variant
   Dim Test3(31) As Variant
   Dim i As Integer
   
For i = 0 To 30
    Test1(i) = -5000# + (i * 330#)
    Test2(i) = 5000# - (i * 330#)
    Test3(i) = i * 3#
    Next i
   SBar1.fSetLeftVals Test1
   SBar1.fSetRightVals Test2
   SBar2.fSetLeftVals Test3
End Sub

Expand

title	Adding a Coverage Bar Graph

Image Added

A tpriCoverageBar control is a horizontal bar illustrating the location of a closed section within a wider region. Typically a tpriCoverageBar is tacked on below a bar graph to depict which bars are to be considered ‘valid’.

Make sure the name is “uctpriCoverageBar” and select it.
While holding down the left mouse button, drag a box on the screen, usually placed under a bar graph.
In the Properties window, type in a name for the coverage bar. The TPRI default begins with ‘tcg’; for example, a name could be “tcgSprays”.

Below is a list of all the properties that are used to design the graph:

Property Name	Type	Default value	Description
tColorData	OLE_COLOR	&H00FF0000& (blue)	Fore color of graph
tColorNoData	OLE_COLOR	&H00808080& (grey)	Back color of graph
tLeftData	Variant	-9999	This is the name of the host variable to be graphed on the left side.
tLeftEdge	Variant	-9999	Left edge bound value
tRightData	Variant	-9999	This is the name of the host variable to be graphed on the right side.
tRightEdge	Variant	-9999	Right edge bound value. Optionally set to SYSDATA.iFlatBarZones which stores the max number of flatness bar zones

Expand

title	Adding a Trend Graph

Image Added

A trend graph requires three objects:

tpriTrendCtrl – Sets up the trend variables to be graphed
tpriTrendCom – Configures communications with the OPC trend server
ProEssentials Graph – Graph component where the trend variable is graphed

Follow these steps to setup a trend graph on an ActiveX screen:

Under Project, Components (or ctrl+T)
Scroll to locate and select Gigasoft ProEssentials Graph v3
This item should now be in your toolbox.
Click the Pegoa icon and drag a box on the screen.
Image Added
Make sure the name is ”ucTpriTrendCtrl” and select it.
While holding down the left mouse button, drag a box near the Pegoa graph you want to associate the TrendCtrl to.

You may copy the Pegoa graph object once it is on the screen to setup as many graph objects as needed. When copying, click ‘Yes’ to create a control array.

The tpriTrendCom control is automatically placed in the corner of your screen.

The following table shows the proper default settings for the tpriTrendCom object.

Property Name	Type	Default Value	Description
tNewDataFromServerEveryMSec	Integer	1000	1000 = 1 second update from server
tNullValueIndicator	Integer	9999999	The value that will be substituted for null values in the data stream.
tRestartFlag	Boolean	False	This property indicates the status of a communication restart cycle.
tScanEnabled	Boolean	True	This property controls scanning of the Trend server.
tServerDataFreqPntPerSec	Integer	50	This should be set to match the Trend server that you are connecting to.
tTimeOutInterval	Integer	10000	10000 = 10 Seconds

The following list of Property setting is for the tpriTrendCtrl control.

Property Name	Type	Default value	Description
BackColor	OLE_COLOR	&H8000000F& (Gray)	This property identifies the color used as the background color for the object’s graphing area.
endTime	Integer	2140000000
ForeColor	OLE_COLOR	&H00FFFFFF& (White)	This property identifies the color used as the foreground color for the object’s graphing area. The grid lines and tick marks will be drawn in this color.
nDispVars	Integer	0	Number of variables to be trended.
PegTrend	Variant	Empty string ("")	Name of the associated ProEssentials graph
playbackMode	Integer	0
playSpeed	Integer	0
startTime	Integer	0
stepTime	Integer	0
TrendInfo	Option window		Click the button to bring up the Trend Setup window. From there, you can set the data-sources for the variables to be graphed and the colors and labels.
ttpPlayback	Integer	Empty string ("")
ttbAxisMax	Variant	Empty string ("")	If the value is fixed it should be set here. To allow the user to change this property during run-time, include a text input box in the design of the screen. Type the name of that textbox in this field. For example ‘ttbGraphMax’
ttbAxisMin	Variant	Empty string ("")	(see above)

Make sure you set a line color that is different than the background color.
At this point you should be able to run the screen and the graph will update.
The items list above should be all that is needed for a general-purpose display. Full details on all of the properties are available in the Gigasoft documentation.

Tips on using the Trend Graph

You only need one tpriTrendCom object on the page; it can handle multiple trend graphs.

For each ProEssentials Pegoa graph on the screen there needs to be an associated tpriTrendCtrl control.

If you are using the Pegoa graph for display only, you should set the TabStop property to False. This will take the object out of the tab sequence.

The tpriTrendCom object will generate X Axis timestamp labels and send them to the Pegoa graph. The user has the option to display or not display Xaxis timestamp labels. If Xaxis timestamp labels are to be used the ShowXAxis property controls this. Set ShowXAxis to PESA_ALL (0) = Grid, Grid Numbers and Axis Labels if you want to display the timestamp information.

If the graph has a user-definable Y-axis min and max, a trpiTextBox (use this one if the scaling values are to be stored in control program variables) or standard VB text box may be added to your screen to collect this information. The tYAxisMax and tYAxisMin properties allow this option. The tpriTrendGraph will check the values in your text box prior to each graph refresh cycle and if changed update the Y Axis scaling

Expand

title	Adding a Log Message Display

Image Added

A tpriLogMsg control is used to display messages posted to a specified LogMsg queue.

Make sure the name is “ucTpriLogMsg” and select it.
While holding down the left mouse button, drag a box on the screen.
In the Properties window, type in a name for the LogMsg box. The TPRI default begins with ‘tlm’; for example, a name could be “tlmOprMsg”.

Below is a list of all the properties that are used to customize the LogMsg box:

Property Name	Type	Default value	Description
LogMsgName	String	“LogMsg”	Name of desired queue from which to retrieve messages.
histStart	Long	32	This number indicates how many historical messages to retrieve upon startup before waiting for new messages to be queued.
histLength	Long	512	This is the maximum number of messages to store in the list box at any given time. Additional messages will cause the oldest entries to drop out of the top of the message box.

Error Handling

Expand

title	General Errors

The following is an overview of the VB error handling logic for ActiveX screen code. Including the following in your screen code will provide an orderly handling of VB errors if they should occur.

In the case of an unplanned VB error the program will present a Windows message box reporting the error condition. Then the program will shut down and close the browser.

Several standard lines of code are required for each screen. The IobjSafe.bas module is automatically included in your project. The ErrRpt Subroutine called by the error handler is included in this code. The following is automatically included at the start of your code.

Code Block

Option Explicit
Event GoToURL(Url As String)
Event ErrorTerminate()
Implements IObjectSafety

The following sample shows the base framework for a Sub or Function

Private Sub DemoSub() As Long)
Dim liTmp AS Integer

 

 On Error GoTo ErrorHandler             <- Set the location to branch to in case of error
 mbError = False                        <- Reset the error flag variable

‘ Start of your Code
‘ blah blah blah         
‘ End of your code

On Error GoTo 0

Turn off the error handler for this sub. This is important. If you omit this line it is possible that an error generated in some other section of the code will branch here and report the wrong failing program location.

Exit Sub

Exit (Note: If you have written a Function then change to Exit Function)

ErrorHandler:

The following is the general error handler. Based on the error number, the program will proceed. If your code may generate an error that is expected under normal operating conditions, then handle it here. If the error is not included in the list of Select statement Case numbers, then the code will call a general purpose reporting procedure.

Select Case Err.Number

Case 9

For example if error number 9 (Subscript out of range) is generated by a bad user data entry, then you may catch it here and respond.

MsgBox "The value you entered is not valid! Please check your input"

mbError = False

Case Else

ErrMsg ("DemoSub")

Update this text to indicate the Sub or Function name. The string will be included in the error message reporting.

You may also add any additional debug information.

End Select

If mbError Then

If mbError is true then the ActiveX code will call back to the browser via the ErrorTerminate event.

Code Block
RaiseEvent ErrorTerminate Else Resume Next

If you handled the error and would like to have the program continue, then set mbError to False.

End If

End Sub

...

Versions Compared

Old Version 2

New Version 3

Key

Tips on using a tpriActiveShape

Tips on using the tpriBarGraph

Tips on using the Trend Graph

Error Handling

Page Comparison

Versions Compared

Old Version 2

New Version 3

Key

Tips on using a tpriActiveShape

Tips on using the tpriBarGraph

Tips on using the Trend Graph

Error Handling