[x3d-public] HTML5/DOM/SVG/X3D v4 demos using X3DOM and Cobweb (was [x3d] Collection of responses from Andreas Plesch re Integration Examples)
Don Brutzman
brutzman at nps.edu
Wed Nov 30 09:37:37 PST 2016
Roy and Andreas: have created a video demo of today's HTML/SVG/X3D comparison using X3DOM and Cobweb examples, as discussed in today's X3D Working Group teleconference.
Both X3DOM and Cobweb versions run side by side satisfactorily. The demo shows events passing back and forth between HTML5/DOM slider/text, SVG rounded rectangles, and the integral X3D scene that is part of the HTML page (with X3D rendered by X3DOM or Cobweb players, respectively).
X3DOM version on top, Cobweb version below. Screenshot attached, video on YouTube.
YouTube - Web3D Consortium - X3D version 4 Experimentation
https://www.youtube.com/playlist?list=PLibbKqU7McePfc_4YejQB3mlgJwW7xZ0b
X3DOM Cobweb Event-Passing Demos: HTML5 DOM SVG X3D
https://youtu.be/md5oozTTw7M
Scenes and players of interest:
http://rawgit.com/andreasplesch/cobweb_dom/master/tests/html5/x3dom_integration2.html
https://rawgit.com/andreasplesch/cobweb_dom/master/tests/html5/cobweb_integration2.html
http://www.web3d.org/member/wiki/x3d-svg-html-dom-integration-example-using-cobweb
X3DOM
http://www.x3dom.org
Cobweb
http://titania.create3000.de/cobweb
*Wow*. You guys (and all of the many people behind these examples working) are amazing. This seems like the "Rosetta Stone" example of HTML+DOM+SVG+X3D that demonstrates full-fledged capabilities are possible for our future X3D version 4. Two open-source example implementations as well - simply magnificent.
As discussed during the call, am moving this discussion to x3d-public list for wider consideration.
Having fun with X3D v4 experimentation! 8)
v/r Don
==========================================
On 11/30/2016 5:45 AM, Roy Walmsley wrote:
> Hi,
>
> A couple of weeks ago Andreas responded on the x3d member only mailing list to my exercises in the Examples cited at http://www.web3d.org/member/wiki/x3dhtml-integration-dom-elements. However, his mails were rejected as he is not a member of this list. Therefore, in order to make them available I have collected them together here and am republishing them to the list.
>
> Many thanks to Andreas for generating these responses, and publishing them.
>
> Regards,
>
> Roy
>
>
>
>
> _X3DOM_
>
>
>
> I put your updated x3dom example here:
>
>
>
> http://rawgit.com/andreasplesch/cobweb_dom/master/tests/html5/x3dom_integration2.html
>
>
>
> I updated it to toggle box sizes when clicking on the blue box. I will go through the exercises.
>
>
>
>
> Exercise 1
>
> Copy the quoted text into a local file and view it in your favourite browser. Does it work? Make sure to check you can change the colour, size, and speed of the ball.
>
> Works for me on Linux both Chrome (v. 54.0.2840.71 (64-bit) ) and Firefox (v. 45.4.0) .
>
>
>
> Does this example illustrate some typical usage principles for integrating X3D into a web page?
>
> Yes, on a basic level. Uses HTML rather than XML. Some events. CSS ?
>
>
>
> Does it have any issues with respect to legality that you would wish to raise?
>
> x3dom is dual licensed MIT, and GPL, I believe, so it can be used pretty much anywhere.
>
>
>
>
> Exercise 2
>
> Inspect the DOM elements for the SVG Rect node for the green box and the X3D Material and Sphere nodes. Do this when the ball is coloured green and at the smaller size.
>
> Do your results agree with those quoted above?
>
> <rect id="greenRectangle" x="200" y="50" width="100" height="100" rx="10" ry="10" style="fill:green;stroke:black;stroke-width:2" onclick="myGreenFunction()"></rect>
>
> <material id="ballColour" diffusecolor="0 0.5 0" ambientintensity="0.2" emissivecolor="0,0,0" shininess="0.2" specularcolor="0,0,0"></material>
>
> <sphere id="thesphere" radius="0.5" onclick="myToggleSphereSizeFunction()" solid="true" ccw="true" usegeocache="true" lit="true" subdivision="24,24"></sphere>
>
> So my results agree.
>
> What observations do you have on your results?
>
> x3dom adds all node fields as attributes to the DOM elements, initially with default values. diffuseColor uses spaces because the value string is set this way, emissiveColor commas. lit and subdivision may not be x3d fields but custom x3dom.
>
>
> Exercise 3
>
> Review the TimeSensor node, noting that both DEF and id are present. Are they both needed?
>
> Yes, both are needed. id for the js .getElementById() function and DEF for the ROUTE. However, one could use .querySelector('timesensor[DEF = "time"]') instead of .getElementById('time') to avoid having to specify an id value. .querySelector is becoming more popular. USE and ROUTE need the corresponding DEF.
>
> Also x3dom has a mapDEFToID field but that only applies to Inlines. Sorry for implying otherwise during the call today. The reasoning is that Inlines are strict x3d xml that cannot have an id attribute. Using mapDEFToID it becomes still possible to access nodes in the inline from the DOM. http://doc.x3dom.org/tutorials/models/inline/index.html . mapDEFToID is not needed for x3dom mark-up because it is html which has an id for all elements even if unknown.
>
>
> Exercise 4
>
> Review the interface definition for the SVGRectElement at https://www.w3.org/TR/SVG2/shapes.html#InterfaceSVGRectElement. Drill down through SVGGeometryElement, SVGGraphicsElement, SVGElement, and Element, by following the links.
>
> The Element link is to a DOM 2014 Working Draft. It probably superceded by this 2015 Recommendation https://www.w3.org/TR/dom/#interface-element
>
> The chain continues to goes up from Element to Node to EventTarget.
>
>
>
> Where is the support for the "onclick" event specified?
>
> MDN https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick has a link to the 'Living Standard' https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers-on-elements,-document-objects,-and-window-objects
>
> MDN https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers has a link to https://www.w3.org/TR/html5/webappapis.html#globaleventhandlers, and shows support for the basic ones by Chrome and Firefox.
>
> Finally, https://www.w3.org/TR/html5/dom.html#htmlelement shows that
>
> HTMLElement implements GlobalEventHandlers;
>
> , an interface which has the onclick attribute.
>
> Note, that this is just a means to define the handler function which is invoked when a 'click' event is has the element as its event target. It does not mean that anything actually dispatches such a click event. The fact that mouse click on something on web page generates usually such a click event is defined somewhere else:
>
> https://developer.mozilla.org/en-US/docs/Web/Events/click references
>
> https://www.w3.org/TR/DOM-Level-3-Events/#event-type-click
>
> which says it MUST be dispatched on the topmost event target. It looks like all elements can be event targets.
>
>
>
> Where is the support for the "style" attribute specified?
>
> https://www.w3.org/TR/SVG2/types.html#InterfaceSVGElement
>
> has a note: The CSSOM specification augments SVGElement with a style IDL attribute <http://dev.w3.org/csswg/cssom/#the-elementcssinlinestyle-interface>, so that the ‘style <https://www.w3.org/TR/SVG2/styling.html#StyleAttribute>’ attribute can be accessed in the same way as on HTML elements.
>
> But the link is not accessible.
>
>
>
>
> Exercise 5
>
> Consider the X3D nodes Material and Sphere. What interface definitions would you propose for these two nodes?
>
> Let's first collect some helpful bits:
>
> https://www.w3.org/TR/WebIDL/ for convenience.
>
> Material : X3DMaterialNode {
>
> SFFloat [in,out] ambientIntensity 0.2 [0,1]
>
> SFColor [in,out] diffuseColor 0.8 0.8 0.8 [0,1]
>
> SFColor [in,out] emissiveColor 0 0 0 [0,1]
>
> SFNode [in,out] metadata NULL [X3DMetadataObject]
>
> SFFloat [in,out] shininess 0.2 [0,1]
>
> SFColor [in,out] specularColor 0 0 0 [0,1]
>
> SFFloat [in,out] transparency 0 [0,1]
>
> }
>
> SVG does not have a element corresponding to Material. Not sure why in https://www.w3.org/TR/SVG2/shapes.html#InterfaceSVGRectElement and all other similar interfaces attributes are marked readonly. Presumably, because it is only possible to change the value with the explicit setAttribute et al. functions defined in https://www.w3.org/TR/2014/WD-dom-20140204/#element ?
>
>
> _Cobweb_
>
> Here is a cobweb version of the updated example:
>
>
> https://rawgit.com/andreasplesch/cobweb_dom/master/tests/html5/cobweb_integration2.html
>
> I removed all features which are only supported by or necessary for the x3dom version.
>
> The main necessary changes were:
>
> - use setAttribute on DOM elements rather than DOM element properties because cobweb does not create these properties. x3dom allows for using setAttribute() in addition to setting properties.
>
> - use a TouchSensor node to enable clicking on the ball instead of the onclick attribute. Cobweb ignores the onclick attribute and x3dom ignores the touch sensor. In Cobweb the TouchSensor generates and is the target of a dom event ('x3d_touchTime') which can be received by an installed listener. The .addEventListener() call does this.
>
> - modify the scale attribute of the enclosing transform instead of the radius attribute of the sphere since radius is not recognized as an input field in Cobweb as it interprets the spec. this way.
>
> I also looked more closely into why I had to introduce a timeout delay to make the TimeSensor cycleInterval change have an effect. It turns that there were multiple reasons. Interestingly, the first reason had to do with how the DOM spec. defines Mutation Observers and I filed a spec. issue:
> https://github.com/whatwg/dom/issues/376
>
> In effect, the enabled='false' mutation was not reported fully. I could fix this in cobweb_dom, so it was a worthy investigation.
>
> Also interestingly, the second reason had to with how cobweb processes input events. From what I understand first fields get tainted and are then processed in the cascade. I think the second set_enabled event occurred before the first had a chance to be processed and reset the target value back. This was also possible to fix in cobweb_dom by forcing processing after each mutation (input event).
>
> As a result, the delay is not necessary anymore and the sequence works as expected.
>
>
>
>
>
> _______________________________________________
> x3d mailing list
> x3d at web3d.org
> http://web3d.org/mailman/listinfo/x3d_web3d.org
>
all the best, Don
--
Don Brutzman Naval Postgraduate School, Code USW/Br brutzman at nps.edu
Watkins 270, MOVES Institute, Monterey CA 93943-5000 USA +1.831.656.2149
X3D graphics, virtual worlds, navy robotics http://faculty.nps.edu/brutzman
-------------- next part --------------
A non-text attachment was scrubbed...
Name: X3domCobwebHtmlDomSvgX3dEventPassingDemos.png
Type: image/png
Size: 219245 bytes
Desc: not available
URL: <http://web3d.org/pipermail/x3d-public_web3d.org/attachments/20161130/c8a5134f/attachment-0001.png>
More information about the x3d-public
mailing list