VizEx View HTML5 is the first CGM viewer on the market that does not require a plug-in technology. There are many benefits associated with the technology from an IT and end-user perspective. We will provide an overview of the benefits during the event.

1. Presenter
Don Larson – CEO
Moderator
David Manock
Larson Technology Workshop
VizEx View HTML5
February 15th 2017

2. Webinar House Keeping
• All attendees will be on mute for the duration of the webinar
• VOIP is the recommended audio option
• Post comments or questions during webinar using Questions panel
• If you experience any technical issues, please use the Questions
Panel to communicate
• Handouts can be downloaded during the presentation
www.cgmlarson.com
Copyright Larson Software Technology (c) 2017

3. Agenda
www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
• Company Overview
• Technology Introduction
• VizEx View HTML5 Demonstration
• Implementation of the Product
• Code samples
• Supporting Documentation (SDK)
• Resources
• Evaluation Program
• Q&A session and Closing remarks

4. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
Larson Software Technology
• Based in Houston, Texas
• Founded in 1984, graphic technology experts for 30 years
• Develops powerful, innovative graphics software and
toolkits, based on open standards
• Promoting CGM Usage, by providing VizEx Reader a free
CGM and TIFF viewer
• Developer of the first HTML5 CGM viewer
• Member of the CGM Open Foundation
• Larson technology simplifies the graphics workflow for
Technical Publications Professionals, Engineers,
Geologists, and Geophysicists

5. Background (1) - Overview
www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
Computer Graphics Metafile
ISO (International Organization for Standardization) standard for
vector and composite vector/raster picture definition since 1987.
HyperText Markup Language
Cornerstone of the W3C's open web platform; a framework
designed to foster innovation and develop full potential of the
web
Web Graphics Library
A JavaScript API for rendering interactive 3D computer graphics and 2D
graphics within any compatible web browser without the use of plug-ins.

6. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
Background (2) – HTML5
• HyperText Markup Language (HTML) - Version 5.0
• Core technology of the Internet used for structuring and presenting content
on the World Wide Web
• W3C Recommendation
• Not owned, non-proprietary
• HTML5 adds many new syntactic features including:
• <video>, <audio> and <canvas> elements
• Additionally the integration of the SVG graphics format
• The new features are primarily designed to enable multimedia delivery
without using plug-ins
• Device-independent design to work on broad array of devices PCs,
smartphones and tablets
• Introduces several application programming interfaces (APIs) for complex web
applications

7. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
Background (3) – WebGL
• WebGL underpins the VizEx View HTML5 technology
• WebGL is a cross-platform, royalty-free web standard
• JavaScript API based on OpenGL for rendering interactive
3D and 2D graphics
• Designed and maintained by the non-profit Khronos Group
• Completely integrated into all the web standards of the
browser permitting GPU acceleration.
• No plug-in is required in a compatible web browser

8. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
• ActiveX weaknesses
• Has to be installed as an application on the target computer
• Strongly criticized for creating security issues
• In some organizations, IT accreditation is be required, cost!
• ActiveX Browser Support
• Microsoft Edge browser - Support dropped
• Good indication the technology will phased out
• Chrome blocked plugins in 2016
• Firefox still supports Plugins
• Future strategy unknown
• A solution without the reliance on a plug-in will be beneficial
ActiveX current status

9. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
• The first CGM Viewer where no plugin is required on target machine
• No requirement to install Viewer executable!
• Available as a Software Development Kit (SDK)
• Enables the integration of the CGM viewing solution
• e.g. in a browser based IETP/M
• Fully customizable via a JavaScript API
• Supports all versions of CGM
• Including S1000D and ATA iSpec 2200 specifications
• Quality rendering of CGM graphics
• Fast rendering of CGM graphics
• Full support for interactive CGM graphics e.g. hotspots
Introducing - VizEx View HTML5

10. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
Browser Support - VizEx View HTML5
• Chrome: Linux, Windows, Android…
• Firefox: Linux, Windows, Android…
• Internet Explorer 11: Windows 7 and 10
• Microsoft Edge: Windows 10
• Safari: iOS and OSX
• Opera: Windows, Linux, OSX

11. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
• Display multiple CGM images on single web page
• Improved on screen image rendering
• Optimized bezier curve and thick line drawing, solve IE Stability
• Optimized CGM loading and rendering
• Improved highlighting to minimize redraw time
• Support for embedded WebCGM linkuri and IRI fragments,
multiple links
• Mouse wheel behavior improved
• Added pinch zoom for mobile browsers
What's New - VizEx View HTML5

12. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
VizEx View HTML5
Live Demo

13. How it works
Data hosted for
evaluations on
cgmlarson.com
Desktop clients
(Windows, Linux,
Macs)
Tablets
(Android, iOS,
Windows)
Data hosted on
Internal Server
(html, cgms, images)
The Larson Technology is hosted on internal or web servers
Hosted Data:
VizExViewHTML5.js and License File
www.cgmlarson.com
Copyright Larson Software Technology (c) 2017

14. Migrating ActiveX to HTML5
ActiveX HTML code: <HTML>
<HEAD>
</HEAD>
<BODY>
<OBJECT TYPE=“image/cgm “ ID="cgm" WIDTH=“100%" HEIGHT=“800" >
<PARAM NAME="SRC" value="ALLELM01.cgm">
</OBJECT>
</BODY>
</HTML>
HTML5 code : <!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="cgm" width="100%" height=“800px"></canvas>
<script>
var Module = { canvas: document.getElementById('cgm') , src: ="ALLELM01.cgm"};
</script>
<script src="http://www.cgmlarson.com/demos/jsViewer/VizExView.js"></script>
</body>
</html>
* No changes to CGM is required
www.cgmlarson.com
Copyright Larson Software Technology (c) 2017

15. Customizing the Toolbar
<div class="toolbar" id="toolbar">
<img id="openfile" src="images/Open.png" alt="HTML5"
onclick="document.getElementById('fileInput').click()“ title="Open a CGM file from your local machine." />
<img id="opennetfile" src="images/Net_open.png" alt="HTML5"
onclick="Module.promptURLFile()“ title="Open a CGM file from the server" />
<img id="scale2fit" src="images/Scale_to_fit.png" alt="HTML5"
onclick="getWebCGMDocument().setMapping(0)“ title="Scale to fit." />
<img id="scale2width" src="images/Scale_to_width.png" alt="HTML5"
onclick="getWebCGMDocument().setMapping(1)“ title="Scale to width." />
<img id="scale2-100" src="images/Scale_to_100.png" alt="HTML5"
onclick="getWebCGMDocument().setMapping(3)“ title="Scale to actual size." />
<img id="zoommode" src="images/Zoom_mode.png" alt="HTML5"
onclick="getWebCGMDocument().setZoomPanMode(0)“ title="Zoom to selected rectangle." />
<img id="zoomin" src="images/Zoom_in.png" alt="HTML5"
onclick="getWebCGMDocument().setZoomPanMode(2)“ title="Zoom in." />
<img id="zoomout" src="images/Zoom_out.png" alt="HTML5"
onclick="getWebCGMDocument().setZoomPanMode(3)" title="Zoom out." />
<img id="panmode" src="images/Pan_mode.png" alt="HTML5"
onclick="getWebCGMDocument().setZoomPanMode(1)“ title="Pan zoomed image." />
<img id="toggleHots" src="images/Show_hotspots.png" alt="HTML5"
onclick="toggleHighlightsFunc()“ title="Toggle highlight on and off." />
<img id="about" src="images/About-trans.png" alt="HTML5"
onclick="Module.about()“ title="Information about VizEx View HTML5." />
</div>
www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
src="images/Open.png"

16. Text and Graphic Linking
www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
Add “mouseover” event listener in document onload:
function onload() {
var cgmDoc = getWebCGMDocument();
cgmDoc.addEventListener("mouseover", changeStyle);
}
Process “mouseover” event:
function changeStyle(evt) {
for (var i = 1; i <= 9; i++) { // clear highlighting all text items
var tr = document.getElementById("rect_" + i);
tr.style.backgroundColor = '';
}
var id = evt.getTarget().getApsId();
id = id.replace("hot00", ""); // get cgm callout id
var tr = document.getElementById("rect_" + id);
if (tr) {
tr.style.backgroundColor = '#FFDD4C'; // highlight corresponding text item
}
}

17. • VizEx View HTML5 Evaluation page
• http://cgmlarson.com/VizEx_View_HTML5_Tests.html
• Getting started document
• API Document
• Live Examples
Getting Started
www.cgmlarson.com
Copyright Larson Software Technology (c) 2017

18. Q&A
www.cgmlarson.com
Copyright Larson Software Technology (c) 2017

19. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
• The benefits of the new technology are significant:
• Full CGM support
• Fast and quality rendering
• No Plug-in required
• No software installation required
• Easily accessible
• Configurable toolbar offering full control over the graphic display
• S1000D and ATA iSpec 2200 compliant
The Benefits

20. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
• The new Larson technology will change the way CGM files are
displayed on the web and IETM/P’s
• ActiveX plug-in issues will be eliminated
• IT departments will be your friend
• Join the program and become part of the
Evolution of CGM Viewing
Q&A and Final remarks

21. www.cgmlarson.com
Copyright Larson Software Technology (c) 2017
Closing Information
Thank you for attending
• Supporting Information
• VizEx View - HTML5 Product Datasheet
• CGM Whitepaper - Edition 2.0
• S1000D Illustrations - Edition 2.0
• www.slideshare.com/donlarson1
• Upcoming Larson Events
• VizEx Edit Webinar
• ATA-S1000D User Forum, Amsterdam
June 12-14, 2017
Follow Us