<div dir="ltr">Hello,<div><br></div><div>thanks to a transcontinental flight I made some progress on my bridge between the cobweb x3d scene graph and the DOM tree with x3d elements.</div><div><br></div><div>Here are two simple examples:</div><div><br></div><div><a href="https://andreasplesch.github.io/cobweb_dom/addremoveNode.xhtml">https://andreasplesch.github.io/cobweb_dom/addremoveNode.xhtml</a><br></div><div><br></div><div>This is the x3dom add/remove nodes example (<a href="http://examples.x3dom.org/example/x3dom_addRemoveNode.html">http://examples.x3dom.org/example/x3dom_addRemoveNode.html</a>) with minor adjustments for xhtml but unchanged javascript control code.</div><div><br></div><div><a href="https://andreasplesch.github.io/cobweb_dom/index.xhtml">https://andreasplesch.github.io/cobweb_dom/index.xhtml</a><br></div><div><br></div><div>This demonstrates both how html attribute changes are picked up by the x3d scene graph, and how adding and removing html elements also is reflected in the x3d scene graph. The box trafos are root nodes, and the removable Material node is a field of the Shape node.</div><div><br></div><div>I put the bridge code in a separate file, so it can now be easily added to any page.</div><div><br></div><div>The next step would be to translate x3d sensor events into appropriate DOM events. This will require probably more modification of the cobweb code itself and a clear strategy.</div><div><br></div><div>What I have in mind is to require x3d sensor nodes, unlike x3dom which dispatches events on any shape.</div><div><br></div><div>-Andreas</div><div><br></div><div><br></div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Mon, Sep 5, 2016 at 6:09 PM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">I could generalize the handling of attribute changes by using the cobweb parser, with only a few lines (but a lot of investigation). This means that most field types should be accessible from the DOM now. However, I only tested with diffuseColor. I also figured out how to immediately apply the changes by triggering a set event for the changed field.<br><div><br></div><div>Adding and removing of nodes is next. I think statements also need special treatment. For external statement changes and prototype changes, it may be best to reload the whole scene (?) .<br></div><div><br></div><div>I adopted the x3dom basic attribute manipulation example:<br></div><div><br><a href="https://andreasplesch.github.io/cobweb_dom/jqueryui_cobweb.xhtml" target="_blank">https://andreasplesch.github.<wbr>io/cobweb_dom/jqueryui_cobweb.<wbr>xhtml</a><br><br></div><div>It worked without changes to the control code and demonstrates that the mutation observer is fast. This means it may be time to provide this as a simple js library to add on to cobweb pages since there is enough functionality.<br><br></div><div>-Andreas<br></div><div><br><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Sun, Sep 4, 2016 at 12:40 AM, Andreas Plesch <span dir="ltr"><<a href="mailto:andreasplesch@gmail.com" target="_blank">andreasplesch@gmail.com</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr"><div>Here is a thought experiment which developed into a strawman implementation.</div><div><br></div><div>First the result:</div><div><br></div><div><a href="https://andreasplesch.github.io/cobweb_dom/index.xhtml" target="_blank">https://andreasplesch.github.i<wbr>o/cobweb_dom/index.xhtml</a><br></div><div><br></div><div>After clicking the new color button, and moving the mouse, the color of the box should change.</div><div><br></div><div>The interesting feature here is that the color change is triggered by a modification of the diffuseColor _attribute_ of the Material _html_ element, in a way that should be possible to generalize to most (all) fields in x3d nodes.</div><div><br></div><div>This is the x3dom pattern of controlling a x3d scene. But here I use cobweb as the x3d browser. Cobweb has very good coverage of the x3d standard including Prototypes, scripting and the SAI. Being able to use both, internal x3d scripting and external control using the DOM could be quite fruitful.</div><div><br></div><div>I had to modify cobweb only slightly based on an idea developed during the discussion around the id attribute inspired by x3dom. The main change is to attach a reference to the generated x3d scene graph node from the DOM element during parsing. This then enables access from the DOM to the x3d node.</div><div><br></div><div>The next step would be to expand to all field types, perhaps reusing the cobweb parser, or SAI functions. and to allow for removal and addition of nodes.</div><div><br></div><div>[If all works, there is the issue of <script> being claimed by the web browser. I think the only solution may be to break backward compatibility and allow <x3dScript> as an alias to <script>]</div><div><br></div><div>The examples also shows how to use inline x3d rather than an url with cobweb. Since cobweb is strict about XML, this is only possible if the html page has xhtml encoding. xhtml in turn triggered an issue with the fps counter display and the context menu, as a side note.</div><div><br></div><div>The code is all on github: <a href="https://github.com/andreasplesch/cobweb_dom" target="_blank">https://github.com/and<wbr>reasplesch/cobweb_dom</a></div><div><br></div><div>I had to learn a lot about cobweb (and jquery and AMD...) and look forward to any feedback or even hands-on contributions ? Perhaps the cobweb team is also interested ?</div><span><font color="#888888"><div><br></div><div>-Andreas</div><span class="HOEnZb"><font color="#888888"><div><br></div>-- <br><div>Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</font></span></font></span></div><span class="HOEnZb"><font color="#888888">
</font></span></blockquote></div><span class="HOEnZb"><font color="#888888"><br><br clear="all"><br>-- <br><div data-smartmail="gmail_signature">Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</font></span></div>
</blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature" data-smartmail="gmail_signature">Andreas Plesch<br>39 Barbara Rd.<br>Waltham, MA 02453</div>
</div>