2019 VizEx View HTML5 Workshop

Workshop Webinar
The VizEx View HTML5
Workshop Webinar
Presenters
Don Larson – CEO
David Manock – VP Sales & Marketing
Welcome
The Webinar will begin shortly

Webinar: Housekeeping
• All attendees will be muted for the duration of the Webinar
• If you experience problems when joining the webinar please
use the questions function to communicate
• Computer Audio is the recommended option
• We have some product data sheets available in the Handouts
section, drag and drop to download, at anytime
• Post questions during the webinar using the panel
• Questions will be answered following the main presentation
or by email
www.cgmlarson.com
Copyright Larson Software Technology (c) 2019

Agenda
www.cgmlarson.com
• Company Overview
• Introduction
• Background Information
• Technology Introduction
• VizEx View HTML5 Demonstration
• Implementation of the Technology
• Code samples
• Supporting Documentation (SDK)
• Resources
• Evaluation Program
• Q&A session and Closing remarks

www.cgmlarson.com
Larson Software Technology
• Based in Houston, Texas, USA
• Founded in 1984, graphic technology experts for 30 years
• We develop powerful, innovative graphics software and
toolkits, based on open standards
• Promoted CGM usage, by providing a free CGM & TIFF
viewer, replaced by a subscription version available online
• The Larson online store opened last week, the address:
• www.cgmlarson.com/store
• Developer of the first HTML5 CGM viewer, no plug in!
• Member of the CGM Open Foundation
• Larson technology simplifies the graphics workflow for
Technical Publications Professionals, Engineers,
Geologists, and Geophysicists
• www.cgmlarson.com

www.cgmlarson.com
Introduction
• The display in a web environment of CGM graphics has always relied on
a plug-in technology
• Larson recognized most popular browsers were dropping support for
plug-ins
• This strategy would force the market to explore alternative technologies and
formats
• Larson decided to research and develop a technology with the ability to
display CGM graphics without the requirement for a plug-in
• BENEFIT: retain a CGM graphics archive, maintaining quality and
functionality (hotspots)
• Mitigate the risk of converting files to another format, and in some cases
migrating to a new technology

Background (1) - Overview
www.cgmlarson.com
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.

www.cgmlarson.com
Background (2) – CGM
• 2D Open Graphics format
• Non-Proprietary
• Managed by the CGM Open Foundation
• www.cgmopen.org
• The CGM format first appeared in the 1980’s
• The format was initially well supported by many software solutions
• W3C (World Wide Web Consortium)
• WebCGM profile developed specifically for web delivery
• http://www.w3.org/Graphics/WebCGM/
• Profile adopted by the S1000D specification
• Commercial aircraft publications
• Automotive, transportation in general

www.cgmlarson.com
Background (3) – 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

www.cgmlarson.com
Background (4) – 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
• WebGL 2.0 will provide additional performance benefits

www.cgmlarson.com
• Plug-in weaknesses
• Had to be installed on the target computer
• Strongly criticized for creating security issues
• In some organizations, they would require IT accreditation
• Browser Support
• Only Internet Explorer still supports ActiveX
• The Microsoft Edge browser – support was dropped
• Good indication the technology will be phased out
• Chrome blocked plug-ins in 2016
• Firefox still supports plug-ins
• Future strategy unknown
• A CGM viewing solution with no reliance on a plug-in will be beneficial
Background (5) – Why are plugins going away

www.cgmlarson.com
• Larson is always searching and investigating methods of
improving our technology
• WebAssembly 1.0 is an open standard, managed by the
W3C consortium
• https://www.w3.org/community/webassembly/
• Wasm provides the capability to have native WebGL,
resulting in improved performance and a smaller footprint
• We are currently testing the Wasm technology with the
objective of replacing the javascript version
• Wasm provides support for all the major browsers,
including Chrome, Firefox, Safari and Edge
• You can learn more at https://webassembly.org/
Background (6) – WebAssembly (Wasm)

www.cgmlarson.com
• The first CGM Viewer where no plug-in is required on the target device
• *Device and platform independence*
• 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 the JavaScript API
• Supports all versions of CGM
• Including S1000D and ATA iSpec 2200 profiles
• Quality rendering of CGM graphics
• Fast rendering of CGM graphics
• Full support for interactive CGM graphics e.g. hotspots
Introducing - VizEx View HTML5

www.cgmlarson.com
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

www.cgmlarson.com
• Optimized CGM loading and rendering, 10 fold performance increase in IE and Edge
browsers
• Substantial performance increase with embedded raster
• Support for raster formats: TIFF, JPG, BMP, PNG, GIF
• Automatically detects supported file types
• Text Search is possible through toolbar
• Display multiple CGM images on single web page
• Support for XCF, XML companion file
• Javascript Library footprint reduced by 15% - faster download time
• Investigating Wasm to reduce footprint even more
• API enhanced
• New functions added, customer driven
• Javascript library (VizExView.js) loaded dynamically
• Can be loaded as a background process
Main Features - VizEx View HTML5

www.cgmlarson.com
VizEx View HTML5
Live Demo

Implementation (1) - How it works Infrastructure
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

Implementation (2) - <canvas> element
www.cgmlarson.com
• The HTML5 <canvas> element is used to draw graphics, on the fly
• The <canvas> element is only a container for graphics
• JavaScript must be used to draw the graphics

Implementation (3) - Migrating from 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> www.cgmlarson.com
ActiveX has to be installed on the target computer
No installation required

Implementation (4) - 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
src="images/Open.png"

Implementation (5) Text and Graphic Linking
www.cgmlarson.com
JAVASCRIPT – Mouse Over Event Handler
function changeStyle(evt) {
for (var i = 1; i <= 9; i++) {
var tr = document.getElementById("rect_" + i);
tr.style.backgroundColor = '';
}
var id = evt.getTarget().getApsId();
id = id.replace("hot00", "");
var tr = document.getElementById("rect_" + id);
if (tr) {
tr.style.backgroundColor = '#FFDD4C';

Implementation (6) Text and Graphic Linking
www.cgmlarson.com
JAVASCRIPT
function pointText(id) {
var apObj = cgmPic.getAppStructureById(id);
if (apObj) {
var list = apObj.toNodeList();
cgmPic.highlight(list, 'new');
}
else {
cgmPic.clearHighlight();
HTML
<tr id="rect_4" onmouseover="this.className='over'" onmouseout="this.className='out'">
<td>4</td>
<td><a href="javascript:pointText('hot004')"><span id="s4">Washer</span></a></td>
<td>1</td>
<td>XM-13-1.6-J7</td>
<td>XXXXX</td>

• 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

www.cgmlarson.com
• The benefits of the new technology are significant:
• CGM Archive preserved
• Full CGM support
• S1000D and ATA iSpec 2200 compliant
• Fast and quality rendering
• No Plug-in required
• No software installation required
• Configurable toolbar, offering full control over look and feel
The Benefits

Q&A
www.cgmlarson.com

www.cgmlarson.com
• The new Larson technology has changed the way CGM files are
displayed on the web and IETM/P’s
• ActiveX plug-in no longer required
• IT departments will be your friend
• Join the evaluation program and become part of the
Evolution of CGM Viewing
Final remarks

www.cgmlarson.com
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
• AIA Tech Data Workshop – April 29th – May 2nd
• Huntsville, Alabama, USA
Follow Us

2019 VizEx View HTML5 Workshop

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 2019 VizEx View HTML5 Workshop

Similar to 2019 VizEx View HTML5 Workshop (20)

More from Larson Software Technology

More from Larson Software Technology (18)

Recently uploaded

Recently uploaded (20)

2019 VizEx View HTML5 Workshop