<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:"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;}
.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:1148086266;
mso-list-template-ids:-1;}
@list l0:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level2
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level3
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:1.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level5
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level6
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:3.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level8
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l0:level9
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:4.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1
{mso-list-id:1841963124;
mso-list-template-ids:-1;}
@list l1:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level2
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:1.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level3
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:1.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:2.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level5
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:2.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level6
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:3.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:3.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level8
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:4.0in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
@list l1:level9
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:4.5in;
mso-level-number-position:left;
text-indent:-.25in;
mso-ansi-font-size:10.0pt;
font-family:Symbol;}
ol
{margin-bottom:0in;}
ul
{margin-bottom:0in;}
--></style></head><body lang=EN-US link=blue vlink="#954F72"><div class=WordSection1><p class=MsoNormal>Ideally, I’d like to specify a CSS querySelector and get an event if an element a querySelector refers to is loaded into DOM.</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Yeah, I can use a timeout or interval timer. Sucks!</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Is there an</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Element.addEventQuerySelector() call? It should be added!</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Thanks,</p><p class=MsoNormal><br>John</p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Sent from <a href="https://go.microsoft.com/fwlink/?LinkId=550986">Mail</a> for Windows 10</p><p class=MsoNormal><o:p> </o:p></p><div style='mso-element:para-border-div;border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal style='border:none;padding:0in'><b>From: </b><a href="mailto:yottzumm@gmail.com">John Carlson</a><br><b>Sent: </b>Saturday, May 20, 2017 8:46 PM<br><b>To: </b><a href="mailto:andreasplesch@gmail.com">Andreas Plesch</a><br><b>Cc: </b><a href="mailto:holger.seelig@yahoo.de">holger.seelig@yahoo.de</a>; <a href="mailto:x3d-public@web3d.org">X3D Graphics public mailing list</a>; <a href="mailto:x3dom-users@lists.sourceforge.net">x3dom-users@lists.sourceforge.net</a><br><b>Subject: </b>RE: Cobweb_dom...Script Magic? Loading DOM subscenes after parentinX3DOM and Cobweb.</p></div><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I would like to separate the main scene loading from the sub scene loading, so I can load many, many subscenes, plus it will make coding easier.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I am almost able to do that, but I am not sure when the Scene object loads in the main scene.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>What wasn’t working before was that the child scene was added before it displayed in Cobweb. That has been fixed now.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>It’s an Inline, but not in typical X3D parlance. It’s a DOM object added afterwards, by using a selector on the DOM.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>I can expand prototypes inline, as the example now shows. That’s not a problem, really. I just want to make a way NOT to expand PROTOs for Cobweb.<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Yes, I am loading X3DJSON into Cobweb AND X3DOM, using the same DOM tree (probably not a good idea).<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal>Yes, I am interested in your DOM event which is dispatched when a Scene is fully loaded. Could you go and check? Thanks!<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>Sent from <a href="https://go.microsoft.com/fwlink/?LinkId=550986">Mail</a> for Windows 10<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><div style='border:none;border-top:solid #E1E1E1 1.0pt;padding:3.0pt 0in 0in 0in'><p class=MsoNormal><b>From: </b><a href="mailto:andreasplesch@gmail.com">Andreas Plesch</a><br><b>Sent: </b>Saturday, May 20, 2017 8:21 PM<br><b>To: </b><a href="mailto:yottzumm@gmail.com">John Carlson</a><br><b>Cc: </b><a href="mailto:holger.seelig@yahoo.de">holger.seelig@yahoo.de</a>; <a href="mailto:x3d-public@web3d.org">X3D Graphics public mailing list</a>; <a href="mailto:x3dom-users@lists.sourceforge.net">x3dom-users@lists.sourceforge.net</a><br><b>Subject: </b>Re: Cobweb_dom...Script Magic? Loading DOM subscenes after parent inX3DOM and Cobweb.<o:p></o:p></p></div><p class=MsoNormal><o:p> </o:p></p><div><p class=MsoNormal>Hi John,<o:p></o:p></p><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>it is difficult for me to see what is not working, in the example. It looks like it is working but only by using callbacks in custom methods and you would rather use Promises in reusable fashion ?<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>By child DOM scenegraph, do you mean a scene which is added as an Inline to another (parent) scene ? Hm. it looks more like an appended Transform group which would be quite different.<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>I think for cobweb_dom I added a dom event which is dispatched when an Inline or Scene is fully loaded but I would have to go back and check. Events would be another way to guarantee a sequence of loading.<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>jquery xhr and regular xhr have mechanisms to allow acting on when a request is fulfilled (which is I think what you are using).<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>It may be necessary to come up with a minimal, non-working example which shows the issue. Is dealing with expanding prototypes related to sequencing ?<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>I think you are also trying to show how to load json encoded x3d with x3dom and cobweb ?<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>Sorry to be of no more constructive help, eg. asking all the returned questions,<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal>Andreas<o:p></o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p></div><div><p class=MsoNormal><o:p> </o:p></p><div><p class=MsoNormal>On Sat, May 20, 2017 at 5:23 PM, John Carlson <<a href="mailto:yottzumm@gmail.com" target="_blank">yottzumm@gmail.com</a>> wrote:<o:p></o:p></p><blockquote style='border:none;border-left:solid #CCCCCC 1.0pt;padding:0in 0in 0in 6.0pt;margin-left:4.8pt;margin-top:5.0pt;margin-right:0in;margin-bottom:5.0pt'><div><div><p class=MsoNormal style='margin-left:4.8pt'>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.<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>Here is my example so far:<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/html/flipper.html" target="_blank">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 style='margin-left:4.8pt'><a href="https://coderextreme.net/X3DJSONLD/src/main/html/flipper.html" target="_blank">https://coderextreme.net/X3DJSONLD/src/main/html/flipper.html</a><o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>The white Box is the subscene of the dolphin scene.<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>The following related code is from <a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/loaderJQuery.js" target="_blank">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/loaderJQuery.js</a><o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>and references code from:<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/X3DJSONLD.js" target="_blank">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/X3DJSONLD.js</a><o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>[ actually, I think the last two reference each other – naughty ]<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>Data is here:<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>[ child scenegraph ]<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/data/abox.json" target="_blank">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/data/abox.json</a><o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>[ parent scenegraph ]<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/data/flipp.json" target="_blank">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/data/flipp.json</a><o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>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 style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/PrototypeExpander.js" target="_blank">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/PrototypeExpander.js</a><o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'><a href="https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/Flattener.js" target="_blank">https://github.com/coderextreme/X3DJSONLD/blob/master/src/main/node/Flattener.js</a><o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>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 style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>And if you start supporting X3D JSON in your viewers, that would be even better!<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>John<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>/**<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;margin-left:40.8pt;text-indent:-.25in;mso-list:l1 level1 lfo1'><![if !supportLists]><span style='font-size:10.0pt;font-family:Symbol'><span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'> </span></span></span><![endif]>Next is passed the element parameter<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;margin-left:40.8pt;text-indent:-.25in;mso-list:l1 level1 lfo1'><![if !supportLists]><span style='font-size:10.0pt;font-family:Symbol'><span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'> </span></span></span><![endif]>*/<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>function appendInline(element, url, next) {<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> $.getJSON(url, function(json) {<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> if (typeof prototypeExpander === 'function') {<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> json = prototypeExpander(url, json, "");<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> } else {<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> console.error("Perhaps you need to include the PrototypeExpander.js?");<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> }<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> if (typeof flattener === 'function') {<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> json = flattener(json);<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> } else {<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> console.error("Perhaps you need to include the Flattener.js?");<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> }<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> // must validate here because we call an inner method.<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> loadSchema(json, url, doValidate, function() {<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> ConvertToX3DOM(json["X3D"]["Scene"], "Scene", element, url);<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> next(element);<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> }, function(e) {<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> console.error(e);<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> });<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> }).fail(function(jqXHR, textStatus, errorThrown) { alert('getJSON request failed! ' + textStatus + ' ' + errorThrown); });<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>}<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> <o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>/**<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;margin-left:40.8pt;text-indent:-.25in;mso-list:l0 level1 lfo2'><![if !supportLists]><span style='font-size:10.0pt;font-family:Symbol'><span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'> </span></span></span><![endif]>Next is passed the selected element from selector<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;margin-left:40.8pt;text-indent:-.25in;mso-list:l0 level1 lfo2'><![if !supportLists]><span style='font-size:10.0pt;font-family:Symbol'><span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'> </span></span></span><![endif]>Selector is the CSS selector to append inline to.<o:p></o:p></p><p class=MsoNormal style='mso-margin-top-alt:auto;mso-margin-bottom-alt:auto;margin-left:40.8pt;text-indent:-.25in;mso-list:l0 level1 lfo2'><![if !supportLists]><span style='font-size:10.0pt;font-family:Symbol'><span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'> </span></span></span><![endif]>*/<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>function loadSubscene(selector, url, next) {<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'> appendInline(document.querySelector(selector), url, next);<o:p></o:p></p><p class=MsoNormal style='margin-left:4.8pt'>}<o:p></o:p></p></div></div></blockquote></div><p class=MsoNormal><br><br clear=all><o:p></o:p></p><div><p class=MsoNormal><o:p> </o:p></p></div><p class=MsoNormal>-- <o:p></o:p></p></div></div><p class=MsoNormal>Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453<o:p></o:p></p><p class=MsoNormal><o:p> </o:p></p><p class=MsoNormal><o:p> </o:p></p></div></body></html>