DataViews for Windows Version 2.0

Transcription

1 DataViews for Windows Version 2.0

2 Introduction GE Fanuc DataViews Headquarters 47 Pleasant Street Northampton, MA U.S.A. Telephone:(413) FAX:(413) web: GE Fanuc DataViews Japan Sales Office 16 Parale Mitsui Bldg 8 Higashida-cho Kawasaki-ku, Kawasaki Kanagawa, , Japan. Telephone: FAX: dv-japan@dvcorp.com web: GE Fanuc DataViews U.K. Sales Office Unit 1, Mill Square Featherstone Road Wolverton Mill South Miton Keynes, MK12 5BZ United Kingdom Telephone: FAX: duncan.stewart@gefanuceur.ge.com web: Copyrights and Trademarks Copyright 2000 GE Fanuc DataViews All Rights Reserved. This manual is subject to copyright protection. No portion of the contents of this book may be reproduced in any form or by any means without prior written consent from GE Fanuc DataViews. DataViews, DV-Tools, and DV-Draw are registered trademarks of GE Fanuc DataViews. DVX-Designer is a trademarks of GE Fanuc DataViews. All other trademarks are acknowledged as the property of their respective owners. August 1999 Software Release Version 2.0 Document Number Document Revision C

3 iii DataViews Visual Basic Tutorial Guide Table of Contents Introduction...v How This Manual is Organized... vi Chapter 1: Getting Started in DV-Draw...1 Preparing a Directory... 4 Creating Objects... 5 Applying Dynamics Using the Palette Using Data Using Graphs Using Rules Running the Interface Chapter 2: Deploying Your View in a Visual Basic Application...27 Overview of the DataViews Visual Basic Tutorial Adding Data Objects to the View Getting Started in Visual Basic Editing the Properties of the DVPlayer Control Manipulating Objects Displayed in the DVPlayer Control For More Information... 48

4

5 v Introduction Intro DataViews is a powerful development tool that lets you create complex applications for monitoring and controlling live data processes. DataViews provides several tools for developing applications from beginning to end. These tools include: DV-Draw Editor With the DV-Draw editor, you can create detailed drawings for your application. You can create custom objects, save them to a palette, and use the palette to create instances of these objects. Custom objects can include dynamics and embedded bitmaps. Some DataViews objects are inherently dynamic, such as graphs, and you can add dynamic behavior to other objects. You can connect dynamics to various kinds of data, including ODBC databases and custom data sources. You can add rules to manage view navigation, to overlay other views or objects from other views, to pop up objects from other views, and to control data values and run speed. With multiple views, these rules let you construct a working interface right in the DV-Draw editor. DVPlayer ActiveX Control The DVPlayer ActiveX control lets you deploy an application in a Visual Basic, Visual C++, or web-based application without advanced programming. DataViews Type Library The DataViews type library is a COM object library that makes view management and object manipulation available to Visual Basic programmers. This tutorial demonstrates how to create and run a dynamic interface in DV-Draw, and how to deploy the interface in the DVPlayer ActiveX Control using Visual Basic. The tutorial does not demonstrate all possible features or capabilities of the product, but leads you through basic procedures for building and deploying an interface. The remaining documentation provided with your release describes all DV-Draw and API features in detail.

6 vi DataViews Visual Basic Tutorial Guide How This Manual is Organized This document contains the following chapters: Chapter 1: Getting Started in DV-Draw This chapter demonstrates some basic techniques used to create views in DV-Draw, and illustrates some of the editor s significant features. You will create a view containing three gauges and a graph to display capacity, temperature, and pressure data about a processing tank. You will learn to use rules to go to another view, provided in the release. The second view displays a picture of the tank, three gauges, and buttons to let you correct dangerous levels of capacity, temperature, or pressure. By the end of the chapter, you will have a working interface. Chapter 2: Deploying Views in a Visual Basic Application This chapter demonstrates how to take the interface you created in the first chapter and deploy it in a Visual Basic application using ActiveX technology.

7 Table of Contents 1 Chapter 1 1 Getting Started in DV-Draw 1 Preparing a Directory... 4 Creating Objects... 5 Applying Dynamics Using the Palette Using Data Using Graphs Using Rules Running the Interface... 24

8

9 3 Chapter 1 1 Getting Started in DV-Draw 1 This chapter demonstrates some basic techniques used to create views in DV-Draw, and illustrates some of the editor s significant features. By the end of the chapter, you will have created a view containing three gauges, each displaying different data, and a graph. These objects will display capacity, temperature, and pressure data about a processing tank: Youwilllearntouserulestogotoanotherview,whichisprovidedintherelease.The second view displays a picture of the tank, the same gauges you create in your own view, and buttons to let you correct dangerous levels of capacity, temperature, or pressure:

10 4 DataViews Visual Basic Tutorial Guide The tutorial material that follows this chapter will demonstrate how to deploy these views as a working application. Preparing a Directory Before starting this tutorial exercise, you may want to set up a special directory for your views. The name does not matter. After creating a directory where you want it, go to the <dataviews>\dvtutorial\chapter1 directory. This directory contains the following files: capacity.dat gauge.sd inflow.dat overlays.v pressure.dat

11 Chapter 1: Getting Started in DV-Draw 5 tank.v temperature.dat top.v To follow the instructions in this tutorial to create your own views, copy all of these files to your working directory except gauge.sd and top.v. Later, you might want to compare your versions of gauge.sd and top.v to the versions provided with the product. Creating Objects Saving Views In this section of the tutorial, you will create three objects and edit their properties. These objects will later be used together as a subdrawing. Be sure to save your view often. The first time you save the view, pull down the File Menu and select Save As. Enter any view name of your choice and click on OK. After that, you can pull down the File Menu and select Save, or just click on the Save button in the standard toolbar. This tutorial does not tell you when to save, although it points out times when saving would be a particularly good idea. PreparingtoDraw 1. Start DV-Draw. Select DV-Draw in the Start menu or double-click on the DV-Draw executable in Explorer. 2. Turn on the grid. Pull down the View Menu, select Grid, and select Display Grid. If the grid is difficult to see, you can change the grid point color. To change the grid color, pull down the Edit Menu and select Preferences. In the Grid Settings area of the Preferences dialog, click on the Edit button next to the current grid color and use the color palette that appears to select a new color. click on OK to close the dialog. 3. Turn on snap. Pull down the View Menu, select Grid, and select Snap.

12 6 DataViews Visual Basic Tutorial Guide Creating an Object 1. Create a closed polygon in the shape of an arrow. Use the polygon button,, in the object toolbar. When you are finished selecting points, double-click. Polygons let you add and delete control points. To add points: 1. Select the object. 2. Pull down the Object Menu and toggle the Handles option to Reshape. 3. Place the cursor on a control point near where you want to add points. 4. Press <a> to add points after the point the cursor is on, or press <i>, to insert points before thepointthecursorison. The line where you want to add points disappears. You can add points in the resulting gap. 5. After adding new points, double click. A new line or curve segment closes the remaining gap. To delete a point: 1. Select the object. 2. Pull down the Object Menu and toggle the Handles option to Reshape.

13 Chapter 1: Getting Started in DV-Draw 7 3. Place the cursor on the point to be deleted and press <x>. The selected point disappears, and a new line or curve segment closes the gap. These keyboard commands are not case-sensitive. Displaying the Object Properties Dialog You can change most attributes of an object using the Object Properties dialog. There are various ways to display the Object Properties dialog. Double-clicking: 1. Double-click on the object. The Object Properties dialog appears. Using the context menu: 1. Select the object. 2. Click right. The context menu appears. 3. Select Properties. The Object Properties dialog appears. Using the Main Menu: 1. Select the object. 2. Pull down the Object Menu from the Main Menu. 3. Select Properties. The Object Properties dialog appears. You can also select Dynamics to go directly to the Dynamic tab, Rules to go directly to the Rules tab, or the color palettebuttontogodirectlytothecolortab. Setting Object Attributes 1. Name the object Arrow. Double-click on the polygon to display the Object Properties dialog. Enter Arrow in the name field.

14 8 DataViews Visual Basic Tutorial Guide 2. Change the line width to 3. On the Color tab of the Object Properties dialog, pull down the Line Width menu and select 3. An alternative is to click twice on the Line Width button in the toolbar,, to cycle to line width Change the fill status to foreground with background. On the Color tab of the Object Properties dialog, pull down the Fill Style menu and select Fill: FG; Edge: BG. An alternative is to pull down the Fill Style menu in the Attributes toolbar and select Fill: FG; Edge: BG. 4. Change the foreground color to yellow. On the Color tab of the Object Properties dialog, click on the FG square next to the color palette, then select yellow in the palette. The index number below the palette should be Change the background color to dark yellow. On the Color tab of the Object Properties dialog, click on the BG square next to the color palette, then select a dark yellow in the palette. Use the dark yellow with an index number of Click on the X in the upper right corner of the dialog to close it. The Arrow should now resemble the following figure. Creating Another Object 1. Create a polygon object around the arrow in the shape of an octagon. 2. Move the Octagon behind the Arrow. Close the Object Properties dialog. Click on the Back button,, or pull

15 Chapter 1: Getting Started in DV-Draw 9 down the Object Menu and select Reorder, then Send to Back. Setting Its Attributes 1. Name the object Octagon. Open the Object Properties dialog. Double-click on the polygon to display the Object Properties dialog. Enter Octagon in the name field. 2. Change the line width to Change the fill status to Fill: FG; Edge: BG. 4. Change the foreground color to blue (index 33). 5. Change the background color to dark blue (index 50). You will not see the arrow as shown below until you deselect the octagon. Creating a Text Object 1. Create a true type text object that says Data Value. Use the true type text button,, in the object toolbar. When you are finished, press <Esc> or click with the left mouse button.

16 10 DataViews Visual Basic Tutorial Guide 2. Change the foreground color to dark blue (index 50). 3. Make the text bold. Click on the bold button, Properties dialog., in the toolbar or on the Text tab of the Object 4. Change the font to Arial. Pull down the font list in the toolbar or on the Text tab of the Object Properties dialog and select Arial. 5. Change the size to 20. Pull down the font size in the toolbar or on the Text tab of the Object Properties dialog and select Name the text object Data Value. Enter Data Value in the name field of the Object Properties dialog. Arranging the Objects Since we are going to use this view as a subdrawing, it is useful to arrange the objects in the center of the view. This will ensure that the subdrawing appears where we expect it to later. 1. Center the Arrow and Octagon vertically. Select the Arrow and Octagon. You can select both by clicking on one, then Shift-clicking on the other. Click on the Align Middle button in the toolbar,, or pull down the Object Menu and select Align, then Align Middle. 2. Position the text object below the Arrow and Octagon.

17 Chapter 1: Getting Started in DV-Draw Center the objects horizontally. Select all three objects, then either click on the Align Center button, pull down the Object Menu and select Align, then Align Center., or 4. Size the objects. If you have made large shapes, select the Arrow and Octagon and shrink them to the size you would like your gauges to appear. To shrink the objects, click on the Shrink button,, in the Transform toolbar. You may need to click on it more than once. Our gauge occupies a screen area of about 2 x2 at 130% zoom. You should not need to change the size of the text object but you may want to adjust its distance from the octagon if you change the size of the octagon. 5. Turn off the grid. The objects in your view should now resemble the following figure: This is a good time to save your view, before you proceed to adding dynamics. Applying Dynamics In this section, you will apply dynamics to each of the three objects in your view. When you finish, the arrow will rotate and change colors when the data value crosses certain thresholds, and the text object will display the current data value. Applying Blink Dynamics to the Arrow 1. Select the Arrow. 2. Go to the Dynamic tab of the Object Properties dialog.

18 12 DataViews Visual Basic Tutorial Guide 3. Apply blink dynamics. Scroll down through the list of dynamic attributes to find Blink. Click in the check box to turn blink dynamics on. 4. Select a variable. When the Data Browser appears, there is only one data source and one data variable in the list. The Data Browser displays all data sources and data variables in the view. Data sources provide data to your objects via data variables. Select the default.dat:var1 variable and click on OK. 5. Create blinking thresholds. Click on the ellipsis button next to Edit Threshold to display the threshold editor. Use the slider or enter numbers in the threshold value field to create thresholds at 0.7 and 0.9. Click on Add after setting each value. 6. Select a data variable to control the middle threshold value. Select in the middle threshold area. Toggle the Use Data Variable setting. When the Data Browser appears, click on the New Variable button. This adds Var:2. Select Var:2 and click on OK. 7. Select a data variable to control the top threshold value. Select in the top threshold area. Toggle the Use Data Variable setting. When the Data Browser appears, click on the New Variable button. This adds Var:3. Select Var:3 and click on OK. 8. Assign blinking colors. For the lowest threshold, keep the blink setting of No Blink. Make the normal foreground color yellow (index 11) and the normal background color dark yellow (index 91) to match the colors of the object in its static state. For the middle threshold, keep the blink setting of No Blink. Make the normal foreground color orange (index 9) and the normal background color dark orange (index 89).

19 Chapter 1: Getting Started in DV-Draw 13 Running the View For the highest threshold, click in the threshold area and toggle the blink setting to Blink. Make the normal foreground color red (index 7) and the normal background color dark red (index 71). Make the blink foreground color dark red (index 55) and the blink background color darker red (index 87). Set the period to 500. This is a good time to run the view. The arrow should change colors at irregular intervals. Because default.dat is random data, there will be no pattern to the changes, and the arrow may not be in the blinking state long enough to see all the colors involved. To run the view, use the buttons in the Run toolbar: Start: Starts running the view. Slower: Makes the view run more slowly. Faster: Makes the view run more quickly. Stop: Stops the run. Applying Rotation Dynamics to the Arrow 1. Apply Rotation dynamics. Display the Object Properties dialog for the Arrow and go to the Dynamic tab. Scroll down through the list of dynamic attributes to find Rotate. Click in the check box to turn rotation on. 2. Select a variable. Select default.dat:var1 and click on OK. 3. Set the out range. Double-click on the out range minimum value and change it from 0 to 90. Double-click on the out range maximum value and change it from 360 to -90. This will make the arrow sweep in a counter-clockwise direction through only the upper half of the Octagon. 4. Change the Erase Method to Redraw Immediate.

20 14 DataViews Visual Basic Tutorial Guide Applying Text Dynamics to the Data Label 1. Select the Data Label. 2. Go to the Dynamic tab of the Object Properties dialog. 3. Apply Text dynamics. 1. Scroll down through the list of dynamic attributes to find Text. Click in the check box to turn text dynamics on. 2. Select a variable. Select default.dat:var1 and click on OK. Run the view again to see the rotation and text dynamics in action. See Running the View. Preparing the Data Variables for Mapping In order to use the dynamics in this subdrawing to display different data when you use it in another view, the data variable must be public so you can map it to a different variable in another view. 1. Pull down the Edit Menu and select Data Variables. The Data Browser appears. 2. Select Var:1. This displays the settings for the data variable. 3. Change the Scope from Private to Public. 4. Repeat for Var:2 and Var:3. Using the Palette In this section, you will: addatabtothepalette add objects to the new tab as a new item create a new view create multiple instances of the palette item in the new view

21 Chapter 1: Getting Started in DV-Draw 15 Adding a Tab to the Palette 1. Right click in the palette to display the palette context menu. 2. Select Add Tab. A new tab appears in the palette immediately. The default name is New Tab. 3. Go to the new tab. You may have to scroll sideways through the tabs to find the new tab. Click on the new tab to select it. 4. Right click to display the context menu again and select Rename Tab. In the dialog that appears, change the name to Tutorial. Adding Objects to the Palette Do this with the Tutorial tab showing in the Palette. 1. Select all three objects. Click and drag a marquee around all the objects, or pull down the Edit Menu and select Select All. 2. Clickrightandselect AddtoPalette. A new item appears in the Tutorial tab of the palette. The name is assigned by DV-Draw.

22 16 DataViews Visual Basic Tutorial Guide 3. Change the item s name to gauge.sd. Click once on the name of the new item in the palette, then click on the name again to make it editable. Edit the name exactly as you would edit the name of a file in the Explorer window. Note that the name must end in.sd. Note that when you select the object in the palette, the dynamics are active in the palette preview window. This is a good time to save your view. Creating Objects from the Palette 1. Create a new view. Pull down the File Menu and select New. 2. Create an object from the palette. Click on gauge.sd then drag it into the new view. A gauge.sd object appears in the view. 3. Repeat step 2 twice to make two more objects. Arrange the gauges side by side.

23 Chapter 1: Getting Started in DV-Draw Align the objects to their vertical centers. Select all three objects and click on the Align Middle button,. 5. Name the objects. Name the left gauge.sd object Capacity Gauge. Name the center one Temperature Gauge. Name the right one Pressure Gauge. 6. Turn on the dynamics. For each object, go to the Subdrawing tab of the Object Properties dialog and turn on the Dynamics Enabled toggle. 7. Save the view as top.v. This is an interesting time to run the view. All three objects should now be dynamic, and behaving in exactly the same manner. See Running the View. Using Data In this section, you will apply different data variables to the three gauges to demonstrate how you can use multiple instances of the same palette object to display different data. Note that this tutorial does not demonstrate the use of ODBC databases or custom data sources. For instructions on using these features, see the on-line DV-Draw Help Topics.

24 18 DataViews Visual Basic Tutorial Guide Editing Data We have created three subdrawing objects in this view. They are intended to display capacity, temperature, and pressure data. Your tutorial directory should already contain the data files, capacity.dat, temperature.dat, andpressure.dat, copied from the <dataviews>\dvtutorial\chapter1 directory, as instructed in Preparing a Directory.In order to use this data, we must add these three data sources to this view. The data sources are provided with your product as files in <dataviews>\dvtutorials\chapter1. 1. Display the Data Browser. Pull down the Edit Menu and select Data Variables to display the Data Browser. 2. Add three File data sources. The current data source type is probably File. If it isn t, pull down the New Data Source option menu and select File. Click three times on the Add New Data Source button,. Three new data sources appear in the data source list. 3. Rename the new data sources. Select the first new data source s name in the list. In the File Origin field on the right, change the name from default.dat to capacity.dat. Name the second new data source temperature.dat. Name the third new data source pressure.dat. 4. Add a data variable to each data source. Select capacity.dat and click on the Add Variable button,. Repeat for temperature.dat and pressure.dat. Each data source should now have one variable. 5. Rename the new data variables. Select the variable name under capacity.dat.inthenamefieldontheright, change the name to capacity. Change the variable name under temperature.dat to temperature. Change the variable name under pressure.dat to pressure.

25 Chapter 1: Getting Started in DV-Draw 19 Mapping Data Variables Mapping lets you replace the data from the subdrawing view with data from the current view, where the subdrawing object is. 1. Select the Capacity Gauge. 2. Go to the Subdrawing tab of the Object Properties dialog. The Variable Mapping area should list Var:1, Var:2,andVar:3 in the Subdrawing Data Variable column. 3. Select Var:1. 4. Pull down the Mapping Type option menu and select Map to Variable. This displays the Data Source List. 5. Select the capacity variable, then click on OK. The Variable Mapping area now shows that Var:1 is mapped to capacity for this gauge. 6. Select Var:2. 7. Pull down the Mapping Type option menu and select Map to Constant. 8. Enter.8 in the Is Mapped To column. 9. Select Var: Pull down the Mapping Type option menu and select Map to Constant. 11. Enter.6 in the Is Mapped To column.

26 20 DataViews Visual Basic Tutorial Guide 12. Repeat this procedure for the Temperature Gauge and the Pressure Gauge. For the Temperature Gauge, map Var:1 to the temperature variable, Var:2 to a constant value of.9, and Var:3 to a constant value of.95. For the Pressure Gauge, map Var:1 to the pressure variable, Var:2 to a constant value of.7, and Var:3 to a constant value of.85. Now when you run the view, the three objects should display different data values. See Running the View. Note that the capacity threshold values cause the gauge to display the red value most of the time. In order to make this gauge work as expected, turning red when the capacity level is too low, you must create a different version of the gauge.sd file with different colors in the thresholds. The release includes a gauge_capacity.sd file. Try changing the subdrawing to use this file. Then map Var:2 to.6 and Var:3 to.5. Using Graphs We ll add a graph to the view to display the data in a different way. PreparingtoAddaGraph You may have to move your arrow gauges to make room for the graph in the upper part of the view. Move the objects to the bottom of the view. Creating a Graph 1. Click on the graph button,, in the object toolbar.

27 Chapter 1: Getting Started in DV-Draw Click and drag in the drawing area to select points to define the rectangular area of the graph. Make the graph fill most of the upper portion of the view. Editing the Graph 1. Double-click on the graph to display the Object Properties dialog. 2. Name the graph graph. 3. Click on More Properties to display the Graph Editor. 4. Give the graph a title. On the Basic tab, enter Boiler Statistics in the title Field. Click on Apply. 5. Change the graph type to a Strip Chart. On the Types tab, scroll through the list and select the Strip Chart icon:

28 22 DataViews Visual Basic Tutorial Guide Clickon Apply. 6. Change the number of samples. On the XAxis tab, change the number of samples to 40. Click on Apply. Adding Data to the Graph We want the graph to display the capacity, temperature, and pressure variables. 1. Go to the Variables tab of the Graph Editor. 2. Click on the variable button,. This displays the Data Source List. 3. Select capacity, then click on OK. 4. Repeat to add temperature and pressure. 5. Pull down the list of variables assigned to the graph: 6. Select default.dat:var:1. Note that the variable number might be different on your machine. 7. Click on the Delete button,, to remove this variable from the graph. 8. Clickon Apply. Now when you run the graph, it displays our three data variables. If the lines are difficult to see, you can change their color: 1. Go to the Variables tab of the Graph Editor.

29 Chapter 1: Getting Started in DV-Draw With the current variable selected, click on the color threshold button,. This displays the Color Threshold Editor. The threshold area reflects the variable s current color. 3. Clickinthethresholdarea. 4. Select a better color from the color palette. 5. Click on the X in the upper right corner of the threshold editor to close it. 6. Click on Apply or OK to close the Graph Editor. Using Rules Editing Rules In this section, we will add a rule to swap to another view. Rules provide display management, letting you change views, overlay views, and overlay or pop up objects, as well as letting you affect variables and objects in the view. This section refers to a view you have not created, but is provided with the release. Your directory should already contain the view called tank.v, copiedfromthe <dataviews>\dvtutorial\chapter1 directory. We will use a rule to go to this view. We will attach the rule to the view so that going to the other view is not associated with a click on any specific object, but with a click on the background of the view. 1. Double-click in the view area. 2. Go to the Rules tab of the View Properties dialog. 3. Click on the Create a New Rule button. This adds one rule to the list of rules for this view. The first field is the Event field. The default event is Mouse Pick. The second field is the Condition field. The default condition is Always. We will keep the default values in these two fields so that the rule will be executed any time the user clicks in the view.

30 24 DataViews Visual Basic Tutorial Guide 4. Pull down the list of Actions. 5. Select Go to View. This displays a field for the view name. 6. Specify the tank view. Click on the ellipsis button to the right of the view name field and select tank.v. Click on Open. Be sure to save your view now. The top.v view you have created, together with the files provided in the product, can now work together as a functioning interface. Before running the view again, be sure your directory includes the files listed in Preparing a Directory,andreadRunning the Interface. Running the Interface You can now run your interface by running top.v and accessing the rules in this view and the tank.v view. Before running the view, be sure your directory includes the files listed in Preparing a Directory. To run the interface: 1. Run the top.v view. See Running the View. 2. Click anywhere in the view background. This goes to tank.v.

31 Chapter 1: Getting Started in DV-Draw 25 The following steps show the options available in the tank.v view. The order in which they are listed do not indicate any order in which you must perform them. The rules used to make changes in the interface are described here. You may want to open tank.v and examine the rules for yourself. Click on the Fill button to overlay a stream of fluid running into the tank. This button has two rules. One clears any overlays, and the other overlays the fill object from the overlays.v view. Click on the Release button to overlay a steam vent releasing steam from the tank. This button has two rules. One clears any overlays, and the other overlays the steam object from the overlays.v view. Click on the Cool Down button to clear either overlay. This button has only one rule, which clears any overlays.

32 26 DataViews Visual Basic Tutorial Guide Click on the Return button to return to top.v. This button has only one rule, to return to thepreviousview. The center object of the tank has fill up dynamics using the capacity.dat:capacity data variable. This view contains no other dynamics. The fill and steam objects are provided in the overlays.v view, shown below. The fill object has fill down dynamics. The view has no other dynamics. The steam object is an included subdrawing. Conclusion This chapter demonstrates many common DV-Draw techniques. For detailed instructions on all DV-Draw procedures, see the on-line DV-Draw help.

33 Table of Contents 27 Chapter 2 2 Deploying Your View in a Visual Basic Application 2 Overview of the DataViews Visual Basic Tutorial Adding Data Objects to the View Adding a Data Variable to the Graph Object Getting Started in Visual Basic Adding the DVPlayer Control to the Visual Basic Project Adding the DataViews Type Library to the Visual Basic Project Editing the Properties of the DVPlayer Control Loading the View into the Control Updating Data in the Control Manipulating Objects Displayed in the DVPlayer Control Changing the Object Properties Changing the Number of Data Iterations Changing the Object Type Stopping/Restarting View Dynamics Displaying the Zoom/Pan Control Panel Connecting Data to the Application Handling Events Off of the DVPlayer Control Testing the Example For More Information... 48

34

35 29 Chapter 2 2 Deploying Views in a Visual Basic Application 2 In the previous chapter, you learned how to use DV-Draw to create graphical DataViews views containing data-driven dynamic objects. In this chapter, you learn how to take your work in DV-Draw and deploy it in a Visual Basic application using ActiveX technology. This chapter discusses using the DataViews DVPlayer ActiveX control in the Microsoft Visual Basic 6.0 programming environment. The DVPlayer ActiveX control lets you add DataViews views to a Visual Basic application without using DataViews code. To do this, you program DataViews applications through the control s events, properties, and methods using Visual Basic. The code for the application we develop in this chapter can be found in the <dataviews>\dvtutorials\chapter2 directory. Instead of stepping through this tutorial and building the application, you can open up the Chapter2.vbp project file in Visual Basic, then view the code and run the executable. This chapter illustrates the steps required to build a Visual Basic project using the DVPlayer ActiveX control. It contains the following sections: Overview of the DataViews Visual Basic Tutorial Presents an overview of the components of the tutorial example. Getting Started in Visual Basic Describes how to create a new project in Visual Basic and how to set up your Visual Basic environment so that the DVPlayer ActiveX control is available to your application. Editing the Properties of the DVPlayer Control Provides a brief description of the DVPlayer control properties and how to edit the properties using the Property pages dialog. Manipulating Objects Displayed in the DVPlayer Control Describes how to add several MFC controls, and the appropriate code, in order to provide user interaction with the view.

36 30 DataViews Visual Basic Tutorial Guide Overview of the DataViews Visual Basic Tutorial This tutorial demonstrates the use of the DVPlayer ActiveX control in a Visual Basic project. This section introduces this example and discusses points of interest. The following figure shows the completed application. the application consists of a Visual Basic form that contains the DVPlayer control and several standard controls such as text boxes, push buttons and radio buttons. This application displays a DataViews view file using the DVPlayer control. The view file is the view created in the Getting Started in DV-Draw chapter. It contains a graph object and three custom objects representing dials. The other controls in the application allow you to change the graph s title, the number of data iterations, and the graph type. You can also stop and restart the updating of the graph s data as well as display the DVPlayer control s zoom/pan dialog.

37 Chapter 2: Deploying Views in a Visual Basic Application 31 The code and view files for the application that we develop in this tutorial can be found in the <dataviews>\dvtutorials\chapter2 directory. Instead of stepping through this tutorial and building the application, you can open up the Chapter2.vbp project file in Visual Basic, then view the code and run the executable. Adding Data Objects to the View Before we describe how to create a Visual Basic application that uses DataViews views, we need to make somemodifications to thetop.v view created in the Getting Started in DV-Draw chapter of this tutorial. In this tutorial, we want to connect a standard slider control in the Visual Basic application to data being displayed in the view. We will add an horizontal slider control to the Visual Basic application form later in this chapter. First, we use DV-Draw to add a memory data source to the view developed in the Getting Started in DV-Draw chapter for the slider to use. In this way, we can incorporate the DataViews view into an Visual Basic application and demonstrate connecting data in the view to controls embedded in the application. Adding a Data Variable to the Graph Object In this tutorial, we want to be able to manipulate a slider control in the Visual Basic application and see data changing in the graph. To do this, we use the DV-Draw editor to add a data source and data variable to the graph that the slider will ultimately use to control data values in the graph. 1. Open the Graph Properties dialog. With the top.v view loaded, double-click the graph in DV-Draw to display the Graph Properties dialog. 2. Open the Graph Editor dialog. Select More Properties... in the General tab to display the Graph Editor dialog. 3. Create a memory data source. Select the Variables tab of the Graph Editor dialog. In the Variables section of the tab, add a new data variable by selecting. This displays the Data Selection for Graphs dialog.

38 32 DataViews Visual Basic Tutorial Guide The slider control requires a memory data source. Create a new memory data source for the graph by selecting Memory from the New Data Source combo box and clicking. This create a default memory data source called default.mem. 4. Create a memory data variable. Select to add a new variable to the memory data source. Choose the Edit>> button and change the data variable name from its default value to read slider. The new data source and data variable should appear along with the other graph variables as in the following figure: New memory data source and data variable Dismiss the Data Selection for Graphs dialog with your changes by clicking OK. In the Graph Editor, click OK to add the new data variable to the graph and dismiss the dialog. Close any other open dialogs when you are finished and save the view file.

39 Chapter 2: Deploying Views in a Visual Basic Application 33 Getting Started in Visual Basic A Visual Basic project consists of one or more forms with one or more controls on each form. You insert controls into forms by clicking on the appropriate control in the tool palette and placing it on the form. When you bring up a new project, a variety of default controls is provided. Before you can place the DVPlayer ActiveX control on a form, you must add it to this palette. 1. Start Visual Basic. Select the Visual Basic option from the Start menu or from Windows Explorer where Visual Basic is installed. Visual Basic opens and then displays the New Project dialog. 2. Start a new project in Visual Basic. Select the Standard EXE option under the New tab of the New Project dialog. Click Open to have Visual Basic display an empty form. 3. Resize the empty form To create a usable form for this tutorial, we need to enlarge the empty form Form1. In the Visual Basic Properties Window for the selected form, change the Width property to pixels and the Height property to 7500 pixels. 4. Change the Caption on the form. Set the Caption property of the form to read DataViews Visual Basic Tutorial. 5. Save the form. Save the form in Visual Basic by selecting the Save Form1.frm option under the File menu. This brings up a file selection dialog. Choose a separate working directory from where DataViews is installed to avoid overwriting any supplied projects, and save the form using its default name Form1.frm. 6. Save the Visual Basic project. Save your work in Visual Basic by selecting the Save Project As... option under the File menu. Locate your working directory and save your work as Chapter2.vbp.

40 34 DataViews Visual Basic Tutorial Guide Adding the DVPlayer Control to the Visual Basic Project To begin working with the DVPlayer ActiveX control in Visual Basic, you need to add the component to your project. 1. Add the DVPlayer control to your tool palette. Pull down the Project menu and select Components. The Components dialog appears. On the Controls tab, turn on the DataViews Player Control Library check box. Click on OK. Now the DataViews DVPlayer Control is available on the tool palette and is represented by the DV icon,. 2. Add the DVPlayer control to your project. Click on the DV icon,, then click and drag in your form to specify the bounding rectangle for the control. Make the control cover a little over half of the form, as shown in the following figure:

41 Chapter 2: Deploying Views in a Visual Basic Application 35 Adding the DataViews Type Library to the Visual Basic Project This tutorial requires you to use various DataViews objects that are displayed in the DVPlayer ActiveX control. To gain access to the DataViews objects in Visual Basic, you need to add the DataViews Type Library to your Visual Basic project s list of references. 1. Display the References Dialog. Select the References... option under the Project menu in Visual Basic to display the References dialog. The dialog displays a list of libraries and controls available on your system. 2. Select the DataViews Type Library. Click the check box next to DataViews Type Library to add the library to your Visual Basic project. Select the OK button to set the reference and dismiss the dialog. Editing the Properties of the DVPlayer Control This tutorial discusses a few of the DVPlayer control properties, including: View File Read Data On Update There are many other useful properties on the control. You can view and edit the properties using the Visual Basic Properties Window. Alternatively, you can use the DVPlayer control s own Property Pages dialog.

42 36 DataViews Visual Basic Tutorial Guide To display the control s property pages, perform the following steps: 1. Select the DVPlayer control in the Visual Basic Editor. 2. Display the DVPlayer Property Pages dialog. With the control selected, right-click with the mouse to display the context menu. Select the Properties... option to display the DVPlayer control s properties dialog. Using this dialog, you can set many useful properties on the DVPlayer control, such as the view file, to display various data update properties, click events, web URLs, etc. For more information about the DVPlayer control and its properties, see the DataViews Visual Basic Application Developer s Guide and the DataViews on-line documentation.

43 Chapter 2: Deploying Views in a Visual Basic Application 37 Loading the View into the Control By default, the DVPlayer control displays the DataViews logo found in the logo.v view file. To change this file, perform the following steps: 1. Select a DataViews view file. Under the General tab of the DVPlayer Property Pages dialog, select the ellipsis button,, by the View File text box. Browse through your file system until you find a DataViews view file to load into the DVPlayer control. For the purposes of this tutorial, select the <dataviews>\dvtutorials\chapter2\top.v file. 2. Set the View File Property. Select the Apply button to set the new view file. The new view is displayed in the control. Updating Data in the Control The DVPlayer control includes properties relating to data and display dynamics. The view file we work with in this tutorial includes a graph with dynamic data. We would like the graph in the view to constantly read its data and display new values. In order to do this,we need to turn on the Read Data On Update flag on the DVPlayer control. To change this property, perform the following steps: 1. Enable the DVPlayer control to read data. Under the Update tab of the DVPlayer Property Pages dialog, select the Read Data On Update option. 2. Set the Read Data On Update property. Select the Apply button to set the property. The graph now displays its data while in the control. Manipulating Objects Displayed in the DVPlayer Control With the DVPlayer control in the Visual Basic form, you can now add other controls to your form that act upon various characteristics of the objects in the DataViews views displayed by the control.

44 38 DataViews Visual Basic Tutorial Guide In this tutorial, we will add the following functionality: Enter/edit the title for the graph displayed in the control. Change the number of data iterations displayed in the graph. Toggle between two different graph types. Stop/restart graph dynamics. Display a dialog that lets you zoom/pan within the control. Handle a simple event off of the DVPlayer control. Changing the Object Properties 1. Add a TextBox control to the form. Select the TextBox control on the control palette in Visual Basic. Click and drag in the form, to the right of the DVPlayer control, to set the text box control s position and size. Change the Text property on the TextBox control. Replace the default text Text1 with Enter new graph title here: Also, change the control s Name property from its default Text1 to Graph_Title_Field. 2. Add a Label control to the form. Select the Label control on the control palette in Visual Basic. Click and drag in the form, above the TextBox, to set the text label control s position and size. Change the Caption property on the Label control. Replace the default text Labe1l with Graph Title: 3. Add code to allow for the graph title to change. Double click on the TextBox control to display the Visual Basic code editor. Add code to your Graph_Title_Field_Change() event procedure so that it appears as follows: Private Sub Graph_Title_Field_Change() Dim graph As DVGraph Set graph = DVPlayerCtrl1.View.Objects("graph") graph.title = Graph_Title_Field.Text End Sub After initializing a variable called graph as an object of type DVGraph, the code obtains the object named graph from within the view object displayed by the DVPlayer control. The final line assigns the Title property of the

45 Chapter 2: Deploying Views in a Visual Basic Application 39 DVGraph object to the information set in the Text property of the Graph_Title_Field text box control. That means that when the user enters or changes text in the text field, the information is displayed in the graph as the graph title. Changing the Number of Data Iterations 1. Add another TextBox control to the form. Change the Text property on the TextBox control and replace the default text with a numerical value of 100. Also, change the control s Name property from its default Text1 to Num_Data_Field. 2. Add another Label control to the form. Change the Caption property on the Label control. Replace the default text with Number of Data Iterations: 3. Add a CommandButton control to the form. Select the CommandButton control on the control palette in Visual Basic. Click and drag in the form, to the right of the new text box, to set the command button control s position and size. Change the Caption property on the CommandButton control to read Apply. Change the Name property of the control to read Apply_Data. 4. Add code to apply the number of data iterations to the graph. Double click on the CommandButton control to display the Visual Basic code editor. Add code to your Apply_Data_Click() event procedure so that it appears as follows: Private Sub Apply_Data_Click() Dim graph As DVGraph Set graph = DVPlayerCtrl1.View.Objects("graph") graph.numslots = Num_Data_Field.Text End Sub Again, a graph variable of type DVGraph is initialized and the object named graph is obtained from within the view object displayed by the DVPlayer control. The final line assigns the NumSlots property of the DVGraph object to the numerical information set in the Text property of the Num_Data_Field text

46 40 DataViews Visual Basic Tutorial Guide box control. That means that when the user enters or changes a number in the text field and selects the Apply button, the number of data iterations changes in the displayed view. Changing the Object Type 1. Add two OptionButton controls to the form. Select the OptionButton control on the control palette in Visual Basic. Click and drag in the form, to the right of the DVPlayer control, to set the option button control s position and size. Repeat the procedure to add a second option button control below the first. Change their Caption properties so that the Option1 control has a Caption property of Bar Graph while the Option2 control has a Caption property of Strip Graph. 2. Add code to swap between graph types. Double click on the Option1 control and code to your Option1_Click() event procedure so that it appears as follows: Private Sub Option1_Click() Dim graph As DVGraph Set graph = DVPlayerCtrl1.View.Objects("graph") graph.graphtype = dvgtbar End Sub This code is similar to the code for the other controls we have placed in the form. The graph object properties are accessed through the DVPlayer control. In this procedure, the GraphType property on the DVGraph object is assigned a new value: that of a bar graph. When a user selects this option in the Visual Basic application, the graph displayed by the control will change from a strip graph to a bar graph. In order to allow the user to revert to the original graph type, we added code to the Option2_Click() event procedure as follows: Private Sub Option2_Click() Dim graph As DVGraph Set graph = DVPlayerCtrl1.View.Objects("graph") graph.graphtype = dvgtstrip End Sub

47 Chapter 2: Deploying Views in a Visual Basic Application 41 Here the graph type is assigned to be a strip graph, which was its original type. The dvgtstrip and dvgtbar assignments represent enumerated types that DataViews and the DVPlayer control can interpret internally as different types of graphs. For more information concerning DataViews COM objects, such as DVGraph, and DataViews enumerated types, see the DataViews Visual Basic Reference Manual. Stopping/Restarting View Dynamics 1. Add two CommandButton controls to the form. Select the CommandButton control on the control palette in Visual Basic. Click and drag in the form, to the right of the DVPlayer control, to set the command button control s position and size. Repeat the procedure to add a second command button control below the first. Change their Caption properties so that the Command1 control has a Caption property of Start Dynamics while the Command2 control has a Caption property of Stop Dynamics. Also, change the Name properties so that the Command1 control has a Name property of Start_Dynamics while the Command2 control has a Name property of Stop_Dynamics. In addition, set the Enabled property on the Start_Dynamics button to False. This will disable the button when the application begins since dynamics in the view already has been activated when we set the Read Data On Update property on the DVPlayer control. 2. Addcodetostartandstopdynamics. Double click on the Start_Dynamics control and insert code into your Start_Dynamics_Click() event procedure as follows: Private Sub Start_Dynamics_Click() DVPlayerCtrl1.AutoUpdate = True Stop_Dynamics.Enabled = True Start_Dynamics.Enabled = False End Sub

48 42 DataViews Visual Basic Tutorial Guide This code turns on the DVPlayer control s ability to automatically update objects by setting the AutoUpdate boolean flag to TRUE. The Stop Dynamics button is enabled and the Start Dynamics button is disabled. Double click on the Stop_Dynamics control and insert code into your Stop_Dynamics_Click() event procedure as follows: Private Sub Stop_Dynamics_Click() DVPlayerCtrl1.AutoUpdate = False Start_Dynamics.Enabled = True Stop_Dynamics.Enabled = False End Sub This code turns off the DVPlayer control s ability to automatically update objects by setting the AutoUpdate boolean flag to FALSE. The Start Dynamics button is enabled and the Stop Dynamics button is disabled. Displaying the Zoom/Pan Control Panel 1. Add another CommandButton control to the form. Select another CommandButton control on the control palette in Visual Basic. Change its Caption property to Show Control Panel. Also, change the Name property so that the Command1 control has a Name property of Show_Control_Panel. 2. Add code to display the zoom/pan control panel. Double click on the Show_Control_Panel control and insert code into your Show_Control_Panel_Click() event procedure as follows: Private Sub Show_Control_Panel_Click() DVPlayerCtrl1.ShowControlPanel End Sub This code displays the DVPlayer Control Panel dialog. The dialog consists of several buttons that allow you to incrementally pan and zoom across the view displayed by the DVPlayer control.