cadalyst
AutoCAD

CAD Clinic: Writing Apps with the DWP Viewer Control, Part 3

14 Apr, 2005 By: Mike Tuersley Cadalyst

Use DWF Viewer Control with HTML to publish DWF files to the web


What more could I possibly write about the DWF Viewer Control [EV for short]? Well, I missed a whole development segment - the HTML'ers. So this month, let's take a look at how to add the EV control to a standard HTML page for an intranet or the Internet. Because HTML is a whole different programming topic, I'll limit this article to a simple Web page. Before the e-mails start flying at me, remember this is an over-simplified explanation of HTML programming.

First Step
To begin, I'm going to keep it simple and just use Windows' NotePad to generate my Web page. You can use any ASCII or HTML editor. Once I open NotePad, I'll begin by adding some basic HTML code to signify that this is a Web page: 

<html>
  <head>
    <title> HTML DWF Viewer Sample</title>
  </head>
  <body>

  </body>
</html>

That's all there is to it. As a brief explanation, HTML is more of a writing style than a programming language. Every object used to define a page must start and end with a "tag." A tag is a code word surrounded by "< >" and the ending tag is identical to the starting tag except the code word is prefaced with a forward slash "/". With this in mind, this example has:

  • The HTML tag designates this document as an HTML document.
  • The Head and Title tags are used to add the title to the Web browser interface.
  • The Body tag indicates what will reside within the space of the Web browser.
Now, the most important step is to save the file. If you're using NotePad, you need to pay close attention to the save dialog box. In the File Name space, enter the name of the HTML file; I will use DWF_TEST.HTM as my name. Next, make sure that the Save As Type option is set to All Files (figure 1), otherwise NotePad saves the file as DWF_TEST.HTM.TXT.

figure
Figure 1. Select All Files in Notepad to save the file as an HTML document.

Now that the file is saved, you can open it in your Internet browser. It should appear as a blank page but have the title in the browser's title bar at the top.

Adding the DWF Viewer Control
The next step in this little project is to add the EV control. While it's very simple to do, some forethought is required. The easiest way to add the control is to consult the DWF API Guide available free from Autodesk.

After downloading and opening the Help file, it's only a matter of copy/pasting the correct code. The forethought lies in how you wish to access the control itself. There are three options:

  1. Referencing it from the Autodesk Web site - the user is prompted to download or install the viewer if the viewer is not already installed on the local machine
  2. Referencing it from the local hard drive - the browser assumes it is already installed on the local machine
  3. Referencing a viewer version number - the user is prompted to install a new version if it's not at or above the specified build version number.
For this example, I'm assuming that the EV control is installed locally. Within the DWF API Help file under "Embedding Autodesk DWF Viewer in an HTML File," are the HTML lines required to use the EV control in one of the three scenarios above. Here is the code from the help file that I need to use to attach the EV control: 

<object id = "DwfViewer"
      classid = "clsid:A662DA7E-CCB7-4743-B71A-D817F6D575DF">
  <param name = "Src" value="C:\_Projectss\Dwfs\Wilhome.dwf">
</object>

The critical part is specifying the class ID of the EV control. While there are a couple of ways to find the number, it's easiest to use it right out of the help file. Also in this code, the EV control is referenced via the Object ID as DWFViewer (this will come in handy later on), and the SRC parameter is the file to load.

Try saving the file and viewing it again in your Web browser. As long as you instruct the control to open a valid file in the SRC parameter statement, the EV control should now be visible. If you omitted a valid file name, then the page will still be blank; declaring an invalid file name should create an error when opening the page. When specifying the file name, the full path needs to be included unless the DWF is located in the same directory as the HTML file.

Tip: Once the HTML file is open in your Web browser, leave it open. As you make changes to the HTML file, save the file and then select the Refresh button in the Web browser.

figure
Figure 2. The document should appear in your Web browser.

Adding VBScript Coding
From this point, I can add code to perform many of the operations that I've done in the last two DWF articles. While I have the choice of using VBScript or JavaScript, I tend to stick with VB-based scripting - I prefer to keep the java in my coffee cup.

If you've never done VBScripting in an HTML page, it's really easy and should be familiar to you based on your experiences with VBA or VB6.

To initialize VBScript, I just place a SCRIPT tag in the HTML page like so: 

<script language="vbscript">
/--- code to go here ---
</script>

<html>?

Notice that it must be placed before the HTML tag. Let's add some code to the HTML. To do so, we need to add two items. First is the code, and second is an object to run the code from the Web page. Because this example is supposed to be simple, all our code will run from hyperlinks. The first function I'm going to add is one to display the Views dialog box to the user. For this example, I added a view for each room to the Wilhome drawing (found in your AutoCAD Samples directory or included in the source code for this article). The function will look like this: 

<script language="vbscript">

  'Calls the VIEWS dialog'
  function SetView
    call DwfViewer.Viewer.ExecuteCommand("VIEWS")
  end function

</script>

And the hyperlink will look like this: 

<a href="vbscript:SetView">
Select View
</a>

Here the Object ID specified in the EV control is used by the scripting as the reference. The VBscript function, SetView, is called by the hyperlink tag <a>. <a> has two components: the script to execute and the text that appears on the Web page. A quick save, toggle to Internet Explorer, refresh, and the Web page should look like Figure 3 after clicking on the Select View hyperlink:

figure
Figure 3. SetView adjusts the EV control to display the specified view.

Wrapping It Up
You can specify more load parameters for the EV control so the HTML code could look like this: 

<object 
  id = "DwfViewer" 
  classid = "clsid:A662DA7E-CCB7-4743-B71A-D817F6D575DF"
  width = "75.0%" 
  height = "60.0%">
  <param name="BackColor" value=8421376>
  <param name="Page" value=1>
  <param name="PaperVisible" value=false>
  <param name="Src" value="Wilhome.dwf">
  <param name="ToolbarVisible" value=true>
  <param name="UserInterfaceEnabled" value=true>
  <param name="View" value="Breakfast Nook">
</object>

Now the control is loaded so that:

  • Its height and width are percentages of the web page's size.
  • The control's BackColor is a shade of reddish brown.
  • The first page is loaded if it's a multi-page DWF [ignored if not].
  • The paper outline is not shown.
  • Toolbars and UserInterface [right-click menu] are enabled.

How easy was that? With a little bit of HTML knowledge and a copy of the DWF API Guide, you're on your way to developing DWF-enabled Web pages!

Kick It Up A Notch!
If you're interested in learning more about creating your own Web pages, I recommend going to your local library and checking out a copy of Creating Web Pages with HTML Simplified from maranGraphics [ISBN: 0-7645-6067-0].

If you're interested in learning more about VBScript and/or JavaScript, search the Internet for an abundance of tutorials/code sites or look for books at the library.

About the Author: Mike Tuersley


More News and Resources from Cadalyst Partners

For Mold Designers! Cadalyst has an area of our site focused on technologies and resources specific to the mold design professional. Sponsored by Siemens NX.  Visit the Equipped Mold Designer here!


For Architects! Cadalyst has an area of our site focused on technologies and resources specific to the building design professional. Sponsored by HP.  Visit the Equipped Architect here!