VizEx View HTML5 Workshop 2018

Workshop Webinar
The VizEx View HTML5
Workshop Webinar
Presenters
Don Larson – CEO
David Manock – VP Sales & Marketing
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) 2018

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, will be replaced by subscription option in 2019
• 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 CGM graphics format has always relied on a plug-in technology to
display in a web environment
• Larson recognized that the most popular browsers were dropping
support for plug-ins
• This would force the market to explore alternative technologies and formats
• Larson decided to research and develop a technology that will display
CGM graphics, no plug-in required
• The benefit; retain a CGM graphics archive, maintaining quality and
functionality
• 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
• 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 required, cost!
• ActiveX Browser Support
• Only Internet Explorer still supports ActiveX
• The 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
Background (5) - ActiveX current status

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

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
• Opera: Windows, Linux, OSX

www.cgmlarson.com
• Display multiple CGM images on single web page
• Create canvas’s on the fly for displaying CGM’s
• Optimized CGM loading and rendering, 10 fold performance increase in IE
and Edge browsers
• Substantial performance increase with embedded raster
• Support for raster formats: TIF, JPG, BMP, PNG, GIF
• Automatically detects supported file types
• Support for XCF, XML companion file
• Javascript Library footprint reduced by 15% - faster download time
• API enhanced
• New functions added, customer driven
• Javascript library (VizExView.js) loaded dynamically
• Can be loaded as a background process
What's New - VizEx View HTML5

www.cgmlarson.com
VizEx View HTML5
Live Demo

Implementation (1) - 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

Implementation (2) - 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 (3) - 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 (4) 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 (5) 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:
• Full CGM support
• S1000D and ATA iSpec 2200 compliant
• Fast and quality rendering
• No Plug-in required
• No software installation required
• Easily accessible
• Configurable toolbar offering full control over the graphic display
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 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
• VizEx Edit Webinar – November 14th
Follow Us

VizEx View HTML5 Workshop 2018

Recommended

Recommended

More Related Content

More from Larson Software Technology

More from Larson Software Technology (20)

Recently uploaded

Recently uploaded (20)

VizEx View HTML5 Workshop 2018