htmlAnimation.html
Submitted by Leonard Daly on Sun, 01/10/2016 - 21:38
The HTML (including inline JavaScript) that provides the HTML/X3DOM interaction. jQuery is used to manage the DOM events and controls. A mouse-over event causes the scene state to change. The non-standard attributes mapdeftoid and namespacename are needed to include the X3D code into the DOM.
<!DOCTYPE html>
<html>
<head>
<title>Script with TouchSensor of Double Animated Basic Scene</title>
<link rel='stylesheet' type="text/css" href='../x3dom.css'>
<script src="../jquery-1.10.2.js"></script>
<script src="../x3dom.js"></script>
<style>
.control-buttons {width:260px; margin-bottom:8px; }
.control-buttons legend {font-style:italic; }
.button2 {margin:2px 5px; border:1px solid gray; padding:3px; width:108px; text-align:center; float:left; }
.button1 {margin:2px 5px; border:1px solid gray; padding:3px; width:234px; text-align:center; clear:both; }
.activeButton {cursor:pointer; }
</style>
</head>
<body>
<h1>Control of X3D Scene with HTML Elements and Scripts</h1>
<h2>Inline Version</h2>
<fieldset class='control-buttons'>
<legend>Color & Animation</legend>
<div class='button2 activeButton' id='ChangeColorLeft' style='float:left;'>Left</div>
<div class='button2 activeButton' id='ChangeColorRight' style='float:left;'>Right</div>
<div class='button1 activeButton' id='ChangeColorBoth'>Both</div>
</fieldSet>
<div id='scene'>
<X3D id="SpaceX3D" showStat="false" showLog='true' x="0px" y="0px" width="800px" height="600px">
<Scene DEF='scene' id='Basx3DScene'>
<Transform id='bxTransform_left' translation='-4 0 0'>
<Inline id='bxInline_4' mapdeftoid="true" namespacename="i4" url='"htmlAnimation4.x3d"'></Inline>
</Transform>
<Transform id='bxTransform_right' translation='4 0 0'>
<Inline id='bxInline_7' mapdeftoid="true" namespacename="i7" url='"htmlAnimation7.x3d"'></Inline>
</Transform>
</Scene>
</X3D>
</div>
<script>
// --> Event handler
jQuery(document).ready(function(){
/* button dispatcher */
$(".activeButton").mouseenter (function(e) {
var targetId = getTarget(e);
if (targetId != '') {
controlScene (targetId, '1 0 1', 'TRUE');
}
});
$(".activeButton").mouseleave (function(e) {
var targetId = getTarget(e);
if (targetId != '') {
controlScene (targetId, '0 1 0', 'FALSE');
}
});
$(".activeButton").click (function(e) {
$('#Basx3DScene').find('*').each (function (ndx, el) {
console.log (ndx + ': ' + el._x3domNode._xmlNode.id);
});
});
});
function getTarget (e) {
var prefix = '';
if (e.target.id == 'ChangeColorLeft') {
prefix = '#i4__';
} else if (e.target.id == 'ChangeColorRight') {
prefix = '#i7__';
} else if (e.target.id == 'ChangeColorBoth') {
prefix = '.';
}
return prefix;
}
function controlScene (selector, color, run) {
$(selector+'CylinderColor').attr('diffuseColor', color);
$(selector+'Timer').attr('enabled', run);
}
</script>
</body>
</html>