JSDoc: Home

Welcome to the "VizEx View HTML5" Javascript API reference documentation

Description:

VizEx View HTML5 (VizExView.js) is a Javascript library for viewing CGM and TIFF files in any HTML5 compatible browser. The WebCGM API is designed after the WebCGM 2.1 DOM. All of the concepts remain the same as well as the classes, methods and properties. In this API, the methods all have the save exact names, parameters and functionality as the WebCGM DOM. Property names are also the same except that they are Javascript functions and take the form of getXxx and setXxx. For example the WebCGMPicture width property is accessed in this API in the WebCGMPicture class by getWidth(). For full background information on WebCGM and the WebCGM DOM refer to the WebCGM 2.1 specification

Using the VizExView.js Library:

To incorporate the Library in an HTML page, add the following script to your HTML page in which you wish to display a CGM file at the bottom just before the closing </body> tag.

<script type="text/javascript" src="http://www.cgmlarson.com/demos/jsViewer/VizExView.js"></script>

Note that this URL loads the javascript library (VizExView.js) from the cgmlarson.com server. If VizExView.js is located on a different server, change the src URL accordingly.

Next add a <canvas> element in the HTML <body> to contain a CGM picture. The src specfies the URL of the CGM file to be loaded into this canvas. The optional toolbar attribute is used configure the toolbar to on (default) or off. In the case where multiple canvas elements are used on a html page, each CGM picture can have a toolbar. The onclick is set to ignore to prevent user clicks while the CGM is loading. The onload specfies a javascript function to be executed once the CGM is loaded. Event listners may added in the onload function, to enable interacting with the CGM through the API once the CGM is loaded. In the case where the src is not specified, the onload event will not occur. For example:

   <canvas id="cgm" class="WebCGMDocument" src="examples/ALLELM01.cgm" toolbar="on" 
               style="width:450px;height:345px;" onclick="ignore();" onload="onload()"</canvas>

And finally the onload function to interact with a CGM file once it has been loaded into a window created by the <canvas> element.

  <script>
     function onload()
     {
        // get handle to the WebCGM API
        var cgmDoc = document.getElementById('cgm').getWebCGMDocument();

        // add code here to interact with the CGM via the API, for example, add eventlistener to get
        //    mouse clicks on hotspots
        cgmDoc.addEventListener("click", handleClick);
        //
        // It is possible to also load new CGM files into the same canvas window with setSrc() in the API.
 }
  </script>

To see these code fragments all work together try this example: Simple.html and then view source.

Module global var names

These are Module var names that can be used to set internal parameters after the VizExView.js Library is loaded and prior to execution.

Setting global Module paramaters is deprecated begining with version 11.0 build 10615 that supports multiple canvas elements. The "src" attribute on canvas element or the setSrc method in API are recommended instead for that purpose. This change was required to permit multiple canvas elements.

src: set the URL to be loaded as CGM document. This can be used as alternative to calling the API method setSrc.

example: src: "http://cgmlarson.com/demos/jsViewer/examples/ALLELM01.cgm"

srcFile: sets a local FileObject which can be used to specify the local file path. This can be used as alternative to
calling the API method setLocalSrc.

example: srcFile: Object.create(File)

addFonts: set the URL(s) of additional TTF font file(s) to be used for text rendering. Use semi-colon ';' to separate font files names.

example: addFonts: "fonts/arialuni.ttf;fonts/courier.ttf"

license: set the URL of the license file, default is "VizExView.lic in root directory"

example: licnse: "mylicense.txt"

settings: set the URL of a settings file"

example: settings: "settings.cfg"

toolbar: control default toolbar; on (1) or off (0)"

example: toolar: "0"