Using Custom div Elements
If you are embedding DGLux5 files within your own already existing interface, you should follow these steps. These steps show you how to create your own custom <div>
element that holds a .dg5
file and how to cause that <div>
element to be loaded. This way you can quickly load multiple .dg5
files inside your existing HTML, even if those files are from different projects, and even if the projects have Project Dataflow.
There are five required steps:
- Define a default project.
- Remove the existing main
<div>
. - Define a custom
<div>
. - Add the
onDgViewerLoaded
function. - Cause the custom
<div>
elements to be loaded.
You can do all of this in viewer.html
.
Defining a Default Project
Custom <div>
elements will not work at all if you do not manually define some default project. The default project is the project that loads in the Viewer when no project name is specified in the URL query string.
To define a default project:
Include this code in the body of
viewer.html
:<input id="defaultproj" value="projectName" type="hidden">
- Replace
projectName
with the name of the project that you want to make default.
Removing the Main div
Your custom <div>
will not replace the main one if you don’t delete the main <div>
.
Delete this code in viewer.html
:
<div id="rootDiv" class="absolute" style="width: 100%; height: 100%;"> </div>
Adding a Custom div
Custom <div>
elements must be defined, either in HTML or with script. To add a custom <div>
in HTML:
- Replace
divName1
anddivName2
with the names of your custom<div>
elements. Add more<div>
elements as appropriate. Delete the second<div>
element in the example, if you don’t need it.
Adding the Function and Loading the divs
Finally, you must cause your custom <div>
or <div>
s to be loaded. One way to do this is by calling them in the onDgViewerLoaded
function. You can also call them any time after onDgViewerLoaded
.
To add onDgViewerLoaded
:
Copy this function and paste it at the end of the
script
ofviewer.html
:function onDgViewerLoaded() { window.postMessage({"dgViewerDiv":"divName1","dgPagePath":"pageName1.dg5"},"*") window.postMessage({"dgViewerDiv":"divName2","dgPagePath":"lib/test/pageName2.dg5"},"*"); }
- Replace
divName1
anddivName2
with the names of the custom<div>
elements that you defined. As appropriate, add more<div>
elements, or delete one of the two existing<div>
elements in the sample. - Replace
pageName1.dg5
andlib/test/pageName2.dg5
with the names, or names and project paths, of the.dg5
files that you want to load in these<div>
elements. In the example,pageName1.dg5
is loaded from the default project, andpageName2.dg5
is loaded from a project namedtest
that is located in thelib
directory.