Welcome to the VizEx View HTML5 Evaluation page

VizEx View HTML5 is a Javascript library that enables viewing of CGM files in any HTML5 compatible browser.
To get started with your evaluation of this technology, read this document first for an overview: Getting_Started_VizEx_View_HTML5.pdf

Javascript API reference documentation

Examples:

Following are links to sample HTML5 code that use the VizEx View Javascript library to display CGM files. For testing purposes, the Javascript libray (VizExView.js) is located on the cgmlarson.com web server as are the CGM files refered to in these tests.

Simple: A single HTML page that illustrates how to reference the VizEx View Javascript library and set the CGM file source. Once the CGM files is displayed, the mouse wheel can be used to zoom in or out. To pan the image, press and hold left mouse button while moving the pointer; release button to end pan. This behavior is true for all of the tests.

Basic CGM file viewer: This test is a single HTML page that illustrates how to contstruct a basic CGM file viewer with toolbar and connect toolbar buttons to functions in VizEx View Javascript library. There are 2 open buttons, the first to open files on local compter and the other to open a file via HTTP from a URL. After a CGM file is loaded use the toolbar to scale, zoom and pan the image.

Illustrated Part Assemblies with links: A more ellaborate test that has 2 divs. The div on the left containing a list of illustrations and links to corresponding CGM files. When a link in this div is clicked, a CGM file is loaded into a second div on the right. This test also illustrates how to use event listener to receive clicks on CGM hotspots and get the hotspot name attribute which in this case represents a drawing name to load.

HTML Table and CGM Interaction: An example that demonstrates interaction between an HTML table and CGM hostpots. It is also serves as an example of how to use GoogleApis icons to build a toolbar.

Multiple CGMs on a HTML page: This example show how multiple CGMs can be displayed on single HTML page by using multiple canvas elements.

Add new canvas: Example of adding a new 'div', a new 'canvas', and then associating the canvas with a WebCGMDocument.

Apply XML Companion file : example of applying an XCF to change the default internal English screentips to German.

WebCGM 2.0 Test Suite The WebCGM 2.0 Test Suite, a collection of HTML pages and corresponding CGM files designed by CGM Open to test WebCGM 2.0 compliant CGM viewers. These HTMLs have been modified to use VizEx View Javascript library. The original HTMLs were written to load a CGM viewer ActiveX control with an OBJECT element. In these modified HTMLs, the OBJECT tag has been replaced with the HTML5 canvas element along with script to load the VizEx View Javascript library and set src to load the appropiate CGM.

Dynamic library loading example of dymnaically loading Javascript library and creating canvas on the fly

Update History:

18-Apr-2020

- Improve Chinese font matching

19-Feb-2020

- fix Internet Explorer issue

13-Feb-2020

- fixed failure when resizing canvas
- fixed failure on certain CGMs with protection regions
- increased Hotspot outline thickness to be more visible
- optimized loading time for CGM with very large number of elements
- optimized ellipses that are actually circles
- *** This version has known problem with Internet Explorer. Others okay, i.e. Chrome, Edge, Firefox and Safari

9-Oct-2019

- added rotate image to internal toolbar
- added getOrientation / setOrientation to API to allow user to rotate image
- added "orient" keyword to <canvas..> tag to allow user to specify initial rotation
- printCanvas can be overriden by user function to add watermark and/or footnote
- fixed rendering bug - polygon sets edges should not be drawn when visibilibty off


26-Jul-2019

- multi-line screen tips
- screen tips are now displayed in "screenfont" which maps by default to 1st font in the CGM "Font List". This allows users to alias "screenfont"
via Settings.cfg to a multi-byte character mapping like Chinese, Japanese or Korean
- "print canvas" function added to internal toolbar; developer can also envoke via API webCgmPicture function printCanvas()
- "download PNG" function added to internal toolbar; developer can also envoke via API webCgmPicture function downLoadCanvas2PNG()
- "Simple" html example toolbar now shows the internal "downLoadCanvas2PNG" and "printCanvas" buttons

11-Feb-2019

- correct missing short lines on certain cgm
- PNGs with transparent(alpha) background display solid black
- cell and tile array bug fixes

28-June-2018

- Fix IE crash when running on localhost domain.
- Add getView() to API
- Add image file type detection when extension is indeterminant.
- Add support for CGM CompoundLine primitive.

29-Mar-2018

- Optimized highlighting performance.
- Added clearHighlight method to webCGMAppStruct class.
- Bug fix for PNG images with 0 DPI.

05-Jan-2018

- Optimized 1 bit per pixel raster image rendering time for both CGM (embedded raster) and TIFF files.
This optimzation is most evident in in Internet Explorer and Edge browsers.

16-Oct-2017

- Signifcant reduction in rendering time most noticalble in Internet Explorer and Edge browsers,
some CGM files showed as much as 10 fold speed up in IE.

3 Oct 2017

- The Javascript library (VizExView.js) can be loaded dynamically
- The Javascript library can be loaded before canvas(s) are defined
- Speed up for same color small vector group (bundled GL calls)
- Reduced footprint by 15%
- New example, dymnaically loads Javascript library and creates canvas on the fly

28 July 2017

- Automatically detect file type for supported types- CGM, BMP, GIF,JPG, PNG or TIF
- Add support for MouseOver and MouseOut event
- Associate WebCGMDocument with a canvas after initial page is loaded
- Improve image smoothing when images require down-sampling
- New example, adding a new 'div', a new 'canvas', and then associating the canvas with a WebCGMDocument

- New example, applying an XCF to change the default internal English screentips to German
NOTE: 1) the setMapping() and setZoomPanMode() functions have been moved from the WebCGMDocument to the WebCGMPicture
NOTE: 2) zoom in and zoom out (in the examples) is now done via the standard WebCGM DOM API calls.
    The setZoomFactor() function is no longer available.

3 April 2017

- Added image formats (JPG, PNG, TIFF)
- Added touch support for mobile devices

2 March 2017

- Support multiple CGM files on single HTML page
- Added canvas attributes, src and toolbar

16 December 2016

- Improved line quality
- Support for embedded WebCGM linkuri and IRI fragments, multiple links

17 November 2016

- Optimized curved line drawing
- Speed up thick line drawing

13 October 2016

- Optimized CGM loading and rendering
- Improved highlighting to minimize redraw time

7 March 2016

- Change mouse wheel behavior to scroll in Pan mode and zoom in/out when in Zoom mode
- Add pinch zoom for mobile browsers

09 Jan 2016

- Enabled browser print option
- Correct display when resizing - added resize to API
- Speed up - removed internal debug print
- Added user (via HTML) specified Setting,cfg file - allowing font mapping
- Added user (via HTML) specified additional fonts files
- Added exception handling for fonts
- Added exception handling for "undefined" objects

30 Oct 2015- A new version of "VizExVew.js" was published with more complete API.

The method 'getAppStructureByClick()' has been replaced with the use of the 'webCGMEvent' object. Previously the event handler was either associated with an HTML element or with the the 'webCGMDocument', in either case the argument passed to it was a HTML DOM event. Now the event handler must be associated with the 'webCGMDocument' and a 'webCGMEvent' is passed to it. The 'getTarget()' method is used to retrieve the 'webCGMAppStruct' object associated with the action.

There is now a compressed version "VizExVew.jsz" that loads much faster and will more likely cache in the browser than the uncompressed version. Note if "VizExVew.jsz" is placed on your your server create a .htaccess file in the base directory with the contents: AddEncoding gzip .jsz AddType text/javascript .jsz This will cause the server to tell the browser that any .jsz files are gzip'd javascript. This reduces the transmit size from ~18Mb to ~3.5Mb.

Previous version: