VizEx View HTML5 Workshop

Presenter
Don Larson – CEO
Moderator
Dave Manock
Technology Workshop
VizEx View HTML5
February 23rd-25th 2016

Workshop - VizEx View – CGM HTML5
• The muting and unmuting of delegates will be supervised by the
the organizers
• Live questions will be taken in Q&A
• Please click the ‘Raise Hand’ button
• You can also Post questions during webinar using Questions panel
• If you experience problems when joining the webinar please
use the questions function to communicate
• VOIP is the recommended audio option
• Handouts can be downloaded during the presentation
• Audio Q&A sessions will be available during the presentation
www.cgmlarson.com
Copyright Larson Software Technology (c) 2016

Agenda
• Technology Introduction
• VizEx View HTML5 Demonstration
• Q&A
• Implementation of the Product
• Supporting Documentation (SDK)
• Resources
• Evaluation Program
• Final Q&A session and Closing remarks
www.cgmlarson.com

Background (1) - Overview
Computer Graphics Metafile
ISO (International Organization for Standardization) standard for
vector and composite vector/raster picture definition since 1987.
HyperText Markup Language
The cornerstone of the W3C's open web platform; a framework
designed to foster innovation and develop the full potential the
web has to offer.
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) – HTML5
• HyperText Markup Language (HTML)
• Core technology of the Internet used for structuring and presenting content
on the World Wide Web
• 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 (3) – WebGL
• JavaScript API 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 required in a compatible web browser
• WebGL is widely supported in modern browsers.
www.cgmlarson.com

• ActiveX weaknesses
• Has to be installed on the target computer
• Strongly criticized for security problems
• ActiveX Browser Support
• Microsoft Edge browser - Support dropped
• Good indication the technology will phased out
• Chrome and Firefox still support ActiveX
• Future strategy unknown
• A solution without the reliance on a plug-in will be beneficial
New Technology ActiveX alternative?
www.cgmlarson.com

VizEx View HTML5
Live Demo
www.cgmlarson.com

How it works
Code server
(VizExView.js and
License file)
Hosted for evaluations
on cgmlarson.com
Desktop clients
(Windows, Linux, Macs)
Tablets
(Android, iOS, Windows)
Document server
(html, cgms, images)

• VizEx View HTML5 Evaluation page
• Getting started document
• API Document
• Live Examples
Getting Started

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"></canvs>
<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

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>

Q&A
www.cgmlarson.com

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

• Join the program
• High Level - Candidate Criteria:
• Have a real-life application for technology implementation
• Possess the expertise to implement
• Designate Evaluation Contact person
• Provide product feedback
• Access to product developer
Join the Evaluation Program
www.cgmlarson.com

• The new Larson technology will change the way CGM files are
displayed on the web and IETP’s
• ActiveX plug-in issues will be eliminated
• IT departments will be your friend
• Apply for the program and become part of the
Evolution of CGM Viewing
Q&A and Final remarks
www.cgmlarson.com

Closing Information
Thank you for attending
• Supporting Information
• VizEx View - HTML5 Product Datasheet
• CGM Infographic
• www.slideshare.com/donlarson1
• Upcoming Larson Events
• Webinar March 30th 11am Eastern
• Previewing VizEdit Version 11.00
• New Drawing and CAD Import functions
• Registration opening soon Follow Us
www.cgmlarson.com

VizEx View HTML5 Workshop

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to VizEx View HTML5 Workshop

Similar to VizEx View HTML5 Workshop (20)

Recently uploaded

Recently uploaded (20)

VizEx View HTML5 Workshop