<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40"><head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><meta name=Generator content="Microsoft Word 15 (filtered medium)"><style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;}
.MsoChpDefault
{mso-style-type:export-only;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:199558338;
mso-list-type:hybrid;
mso-list-template-ids:1334497586 -1 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l0:level1
{mso-level-start-at:0;
mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Symbol;
mso-fareast-font-family:"Times New Roman";
mso-bidi-font-family:Calibri;}
@list l0:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:"Courier New";}
@list l0:level3
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Wingdings;}
@list l0:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Symbol;}
@list l0:level5
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:"Courier New";}
@list l0:level6
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Wingdings;}
@list l0:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Symbol;}
@list l0:level8
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:"Courier New";}
@list l0:level9
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-.25in;
font-family:Wingdings;}
@list l1
{mso-list-id:1885871744;
mso-list-type:hybrid;
mso-list-template-ids:-1281850172 -1 67698691 67698693 67698689 67698691 67698693 67698689 67698691 67698693;}
@list l1:level1
{mso-level-start-at:0;
mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:20.25pt;
text-indent:-.25in;
font-family:Symbol;
mso-fareast-font-family:"Times New Roman";
mso-bidi-font-family:Calibri;}
@list l1:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:56.25pt;
text-indent:-.25in;
font-family:"Courier New";}
@list l1:level3
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:92.25pt;
text-indent:-.25in;
font-family:Wingdings;}
@list l1:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:128.25pt;
text-indent:-.25in;
font-family:Symbol;}
@list l1:level5
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:164.25pt;
text-indent:-.25in;
font-family:"Courier New";}
@list l1:level6
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:200.25pt;
text-indent:-.25in;
font-family:Wingdings;}
@list l1:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:236.25pt;
text-indent:-.25in;
font-family:Symbol;}
@list l1:level8
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:272.25pt;
text-indent:-.25in;
font-family:"Courier New";}
@list l1:level9
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
margin-left:308.25pt;
text-indent:-.25in;
font-family:Wingdings;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
--></style></head><body lang=EN-US link=blue vlink="#954F72"><div class=WordSection1><p class=MsoNormal>Cobweb_dom, X3DOM experts, I need some help adding a child DOM scenegraph with prototypes to a parent DOM scenegraph after the primary scene has been loaded, and not before. I have an example of loading before the scene is loaded, and in a callback. If you have an example with Promises instead of callback nesting, that would be more ideal, the second $.getJSON() (child scenegraph) might finish before the first $.getJSON() (parent scenegraph) if I don’t use promises or callback nesting. Also, Promises would allow me to separate the parent loading somewhat from the child loading, and create separate functions. Also, X3DOM experts can provide an example with Promises as well. Meanwhile, I will be reading about Promises.</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Here is my example so far:</p><p class=MsoNormal><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/html/flipper.html">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/html/flipper.html</a><br><br>Viewable here:<o:p></o:p></p><p class=MsoNormal><a href="https://coderextreme.net/X3DJSONLD/src/main/html/flipper.html">https://coderextreme.net/X3DJSONLD/src/main/html/flipper.html</a><o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>The white Box is the subscene of the dolphin scene.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>The following related code is from <a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/loaderJQuery.js">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/loaderJQuery.js</a><o:p></o:p></p><p class=MsoNormal>and references code from:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/X3DJSONLD.js">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/X3DJSONLD.js</a><o:p></o:p></p><p class=MsoNormal>[ actually, I think the last two reference each other – naughty ]<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Data is here:<o:p></o:p></p><p class=MsoNormal>[ child scenegraph ]<o:p></o:p></p><p class=MsoNormal><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/data/abox.json">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/data/abox.json</a><o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>[ parent scenegraph ]<o:p></o:p></p><p class=MsoNormal><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/data/flipp.json">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/data/flipp.json</a><o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Cobweb doesn’t need the prototypeExpander or the flattener (well, it might have with prototypes in cobweb_dom, but I think the last release fixed that…haven’t checked—here is a good test for you!). This is a dual example, and I haven’t figured out how to conditionally run the prototypeExpander on only X3DOM code. Please test without the PrototypeExpander.js and Flattener.js included, and remove X3DOM, since it won’t work in that case. X3DOM folks can include the two JavaScript files which are here:<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/PrototypeExpander.js">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/PrototypeExpander.js</a><o:p></o:p></p><p class=MsoNormal><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/Flattener.js">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/Flattener.js</a><o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>You may provide your own appendInline (below) which doesn’t call loadSchema. That may be too complex of a download. That is, you probably don’t want to do all that JSON schema validation in your example. Try to keep my code close to what it is otherwise.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>And if you start supporting X3D JSON in your viewers, that would be even better!<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>John<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>/**<o:p></o:p></p><ul style='margin-top:0in' type=disc><li class=MsoListParagraph style='margin-left:-15.75pt;mso-list:l1 level1 lfo2'>Next is passed the element parameter<o:p></o:p></li><li class=MsoListParagraph style='margin-left:-15.75pt;mso-list:l1 level1 lfo2'>*/<o:p></o:p></li></ul><p class=MsoNormal>function appendInline(element, url, next) {<o:p></o:p></p><p class=MsoNormal> $.getJSON(url, function(json) {<o:p></o:p></p><p class=MsoNormal> if (typeof prototypeExpander === 'function') {<o:p></o:p></p><p class=MsoNormal> json = prototypeExpander(url, json, "");<o:p></o:p></p><p class=MsoNormal> } else {<o:p></o:p></p><p class=MsoNormal> console.error("Perhaps you need to include the PrototypeExpander.js?");<o:p></o:p></p><p class=MsoNormal> }<o:p></o:p></p><p class=MsoNormal> if (typeof flattener === 'function') {<o:p></o:p></p><p class=MsoNormal> json = flattener(json);<o:p></o:p></p><p class=MsoNormal> } else {<o:p></o:p></p><p class=MsoNormal> console.error("Perhaps you need to include the Flattener.js?");<o:p></o:p></p><p class=MsoNormal> }<o:p></o:p></p><p class=MsoNormal> // must validate here because we call an inner method.<o:p></o:p></p><p class=MsoNormal> loadSchema(json, url, doValidate, function() {<o:p></o:p></p><p class=MsoNormal> ConvertToX3DOM(json["X3D"]["Scene"], "Scene", element, url);<o:p></o:p></p><p class=MsoNormal> next(element);<o:p></o:p></p><p class=MsoNormal> }, function(e) {<o:p></o:p></p><p class=MsoNormal> console.error(e);<o:p></o:p></p><p class=MsoNormal> });<o:p></o:p></p><p class=MsoNormal> }).fail(function(jqXHR, textStatus, errorThrown) { alert('getJSON request failed! ' + textStatus + ' ' + errorThrown); });<o:p></o:p></p><p class=MsoNormal>}<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>/**<o:p></o:p></p><ul style='margin-top:0in' type=disc><li class=MsoListParagraph style='margin-left:0in;mso-list:l0 level1 lfo1'>Next is passed the selected element from selector<o:p></o:p></li><li class=MsoListParagraph style='margin-left:0in;mso-list:l0 level1 lfo1'>Selector is the CSS selector to append inline to.<o:p></o:p></li><li class=MsoListParagraph style='margin-left:0in;mso-list:l0 level1 lfo1'>*/<o:p></o:p></li></ul><p class=MsoNormal>function loadSubscene(selector, url, next) {<o:p></o:p></p><p class=MsoNormal> appendInline(document.querySelector(selector), url, next);<o:p></o:p></p><p class=MsoNormal>}<o:p></o:p></p></div></body></html>