vizex view html5 workshop 2017

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

http://www.cgmlarson.com/

Agenda


• 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



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


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.



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



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


https://www.khronos.org/

https://www.khronos.org/


• 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



• 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



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



• 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



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



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


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


http://cgmlarson.com/VizEx_View_HTML5_Tests.html


Q&A




• 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



• 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



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


http://www.slideshare.com/donlarson1

https://www.linkedin.com/company/larson-software-technology

http://www.twitter.com/cgmlarson

http://www.slideshare.net/donlarson1

https://www.youtube.com/channel/UCp-oMoh-_mobVGpP459yMVA

https://plus.google.com/+Cgmlarsoncom/about?cfem=1
