HOOPS Publish can be used view interactive 3D PDF documents in a browser using standard web technologies without the help of any plug-ins.
This section first addresses how to export a PDF file so it could be viewed inside a browser, followed by a chapter on how to customize our web experience.
No plugin required
Support 3D PDF interactivity
- Other Hoops Publish features such as BOM Tables, Carousels are fully supported.
The generated document can be viewed using:
- Google Chrome 69+
- Safari 11.1+
- Firefox 60+
More specifically, your browser must be able to support:
- JS ECMA
classdefinition and inheritance
- strict mode
You may want to check your browser compatibility using this link.
Web export API
The file pc3DTemplateFile in this example is a file that will be used as a template for generating HTML files for each 3D annotation in your PDF. It is provided in the HOOPS Publish package.
3 kinds of outputs are available that can be chosen by the m_eHtmlOutputMode variable. Each have their own way to be viewed inside a web browser to fill different needs.
- kA3DWebOnline : The solution for client/server integration and request for best performances
- kA3DWebOfflineSingleFile : The easy way to give a pdf exported to someone.
- kA3DWebOfflineWithDependencies : Some middle ground between the two before. No need of a client/server integration, can be easily distributed as long as anyone has some files already setup on their device.
In client/server mode (kA3DWebOnline), the call to the function delivers one XML file and one HTML file per 3D stream in your PDF document.
The XML file is the entry point of all. It represents your PDF document. The XML and HTML files will be parsed and displayed in the browser by a client web viewer that we provide as part of HOOPS Publish. See the samples directory in the package download: samples\publish\publishhtml\htmlforserver .
To help test this functionality, we have provided a simple HTTP server that can be launched by clicking on samples\publish\publishhtml\htmlforserver\exportpdftohtml\start_server.bat .
Once the server is launched, open the following URL in your browser: localhost:11180/viewer.html?sample=sample_DemoDataModel . You can load your own 3D PDF converted into HTML by updating the sample querystring parameter with the XML file name describing your document without the .xml file extension : localhost:11180/viewer.html?sample=XmlFilenameWithoutExtension .
Be sure to properly URL-encode 'XmlFilenameWithoutExtension'. For instance, there are no spaces in a URL, so any space character in your file name must be replaced by "%20" (without the quotes) for a space character. See https://www.w3schools.com/tags/ref_urlencode.asp for more information about URL encoding.
By default, the viewer of a 3D annotation will display a toolbar and a panel will display the model tree and views. You can hide them by adding the following to your querystring:
- &modeltree=none to hide the panel with the model tree and views.
- &toolbar=none to hide the toolbar.
- &viewNav=show to show a floating widget helping the user to navigate from one view to another.
viewer.html can load any generated XML file; to change the file you're viewing, simply change the query string "sample=AnotherXmlFilenameWithoutExtension" in the URL with the new file name.
If you want to integrate this viewer into a larger website, note that the folder where viewer.html is located must be set as a root for all files in it. This will allow you to drop any XML/HTML generated files into the 'PdfContent' folder at any depth in the subfolders. To view an XML file in a subfolder of 'PdfContent', just change the querystring to "sample=SubFolder/XmlFilenameWithoutExtension" in the URL.
Please note, viewer.html can be customized to include your own content or logo. If you need to further customize the 3D viewer component, you might consider using HOOPS Communicator or The HOOPS Web platform. Please contact us for more information.
Integrate into an existing website
The sample contains the file
viewer.html which is the entry point of our demo. The file is readable and a good starting point for those who want to integrate this solution into an existing website. The file contains a script section that checks some compatibility with web browsers, and load the XML document (which is your PDF export), retrieve the content and call
xmlDocument is the xml string.
HTTP Server Configuration
- Use your own one like Apache HTTP, NodeJS, Python...
- The configuration must enable XML file transfer.
- No specific port/protocol are required.
- All included files are compatible with HTTPS protocol to manage security.
Also, to optimize network bandwith, it could be good to enable gzip compression for all files contained in PdfContent folder.
Single HTML file - Standalone
For single HTML standalone file output (kA3DWebOfflineSingleFile), when calling A3DConvertPDFToWebFormat, you should fill the A3DRWParamsExportHtmlData data structure with new parameters. The call to the function delivers one HTML file that could be read anywhere if you havbe a compatible browser.
You must create a A3DRWHtmlOfflineData data structure and set it with the parameter m_pHtmlOfflineData.
This structure contains two additional fields :
- m_pcPathToHtmlViewerFile is mandatory. You must indicate the viewer file to use. This file is the entry point of our web solution and can be found in the sample directory. Please refer to previous section for how to find it.
- m_uiOptionFlags is a set of options you may want to enable amongst kA3DWebOfflineShow3DToolbar, kA3DWebOfflineShow3DModelView and kA3DWebOfflineShowViewNavigation. These options are detailed in the previous section.
One of the main advantages of this mode is to enable offline viewing of the PDF. Additional benefits include, for instance, simplified cache management on mobile devices.
Single HTML file - Distributed
For this single distributed file output (kA3DWebOfflineWithDependencies), you should also fill m_pHtmlOfflineData with the same elements.
The changes from a standalone file lie in how the file is read from the browser. This is not a standalone file as it requires js and css folders to be in the same folder as the file. Those folders are part of the sample we deliver in samples\publish\publishhtml\htmlforserver\exportpdftohtml\rootspan>.
There are two benefits for using this export :
- The HTML file generated will be slightly shorter than from a standalone file as js and css files won't be part of it.
- The file will also be loaded slightly faster as jss and css files could be loaded by the browser in parallel.
However the main downside is, if you distribute this file, the one who reads it should have the js and css files on their device as well.