Presenter Don Larson – CEO
ModeratorDavid Manock
Larson Technology WorkshopVizEx View HTML5
February 15th 2017
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.comCopyright Larson Software Technology (c) 2017
Agenda
www.cgmlarson.comCopyright 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
www.cgmlarson.comCopyright 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
Background (1) - Overview
www.cgmlarson.comCopyright Larson Software Technology (c) 2017
Computer Graphics MetafileISO (International Organization for Standardization) standard for vector and composite vector/raster picture definition since 1987.
HyperText Markup LanguageCornerstone of the W3C's open web platform; a framework designed to foster innovation and develop full potential of the web
Web Graphics LibraryA JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins.
www.cgmlarson.comCopyright 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
www.cgmlarson.comCopyright 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
www.cgmlarson.comCopyright 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
www.cgmlarson.comCopyright 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
www.cgmlarson.comCopyright 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
www.cgmlarson.comCopyright 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
www.cgmlarson.comCopyright Larson Software Technology (c) 2017
VizEx View HTML5
Live Demo
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.comCopyright Larson Software Technology (c) 2017
Migrating ActiveX to HTML5ActiveX 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 requiredwww.cgmlarson.com
Copyright Larson Software Technology (c) 2017
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"
Text and Graphic Linking
www.cgmlarson.comCopyright 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 } }
• VizEx View HTML5 Evaluation page• http://cgmlarson.com/VizEx_View_HTML5_Tests.html
• Getting started document• API Document• Live Examples
Getting Started
www.cgmlarson.comCopyright Larson Software Technology (c) 2017
www.cgmlarson.comCopyright 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
www.cgmlarson.comCopyright 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
www.cgmlarson.comCopyright 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, 2017Follow Us