Skip to content

Commit

Permalink
Start of LookSensor - code and test
Browse files Browse the repository at this point in the history
  • Loading branch information
@RealismCloud
RealismCloud committed Sep 2, 2016
1 parent 1400384 commit 3505dd7
Show file tree
Hide file tree
Showing 2 changed files with 397 additions and 0 deletions.
213 changes: 213 additions & 0 deletions src/nodes/PointingDeviceSensor/LookSensor.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
/** @namespace x3dom.nodeTypes */
/*
* X3DOM JavaScript Library
* http://www.x3dom.org
*
* (C)2009 Fraunhofer IGD, Darmstadt, Germany
* Dual licensed under the MIT and GPL
*/

x3dom.registerNodeType(
"LookSensor",
"PointingDeviceSensor",
defineClass(x3dom.nodeTypes.X3DTouchSensorNode,

/**
* Constructor for TouchSensor
* @constructs x3dom.nodeTypes.TouchSensor
* @x3d 3.3
* @component PointingDeviceSensor
* @status experimental
* @extends x3dom.nodeTypes.X3DDragSensorNode
* @param {Object} [ctx=null] - context object, containing initial settings like namespace
* @classdesc TouchSensor tracks location and state of the pointing device, and detects when user points at
* geometry. Hint: X3DOM, running in an HTML environment, you actually don't need this node, as you can
* simply use HTML events (like onclick) on your nodes. However, this node is implemented to complete the
* pointing device sensor component, and it may be useful to ensure compatibility with older X3D scene content.
*
* This node works by occasionally polling to see if there is a Shape node with the class property 'X3D-LookFind' located
* in a small region at display center. If so, the first object is identified and checked at regular intervales until
* countdownTime seconds after first detection. As long as that Shape node is the first object at the checks, then
* an onclick DOM event is fired at the end of the countdownTime. It is up to the Shape (or parent) node to handle the
* onclick DOM event. Alternatively, the lookTime X3D event can be handled.
*/
function (ctx)
{
x3dom.nodeTypes.TouchSensor.superClass.call(this, ctx);

//---------------------------------------
// FIELDS
//---------------------------------------

/**
* The description of the node. Currently unimplemented
* @var {x3dom.fields.SFString} description
* @range String
* @memberof x3dom.nodeTypes.LookSensor
* @initvalue ""
* @field x3d
* @instance
*/
this.addField_SFString(ctx, 'description', "");


/**
* Indicates if the node is enabled. An enabled node places a marker on the display. There can be only one LookSensor per scene.
* @var {x3dom.fields.SFBool} enabled
* @range [TRUE | FALSE]
* @memberof x3dom.nodeTypes.LookSensor
* @initvalue 1
* @field x3d
* @instance
*/
this.addField_SFBool(ctx, 'enabled', true);


/**
* While the LookSensor is counting down before the selection of the Shape node, isCountdown is TRUE.
* @var {x3dom.fields.SFBool} isCountdown
* @range [TRUE | FALSE]
* @memberof x3dom.nodeTypes.LookSensor
* @initvalue FALSE
* @field x3d
* @instance
*/
this.addField_SFBool(ctx, 'isCountdown', false);


/**
* The X3D time when the LookSensor "fires".
* @var {x3dom.fields.SFTime} lookTime
* @range [0, inf]
* @memberof x3dom.nodeTypes.LookSensor
* @initvalue 0
* @field x3d
* @instance
*/
this.addField_SFTime(ctx, 'lookTime', 0);


/**
* The number of seconds the LookSensor uses from first look until "fire". This field is not yet implemented.
* @var {x3dom.fields.SFTime} countdownTime
* @range [0, inf]
* @memberof x3dom.nodeTypes.LookSensor
* @initvalue 2
* @field x3d
* @instance
*/
this.addField_SFTime(ctx, 'countdownTime', 2);


this.initDone = false;
this.onTargetDuration = 2000;
this.onTargetIncrement = 500;
this.pollInterval = 200;
this.regionSize = 14;
this.timerId = 0;
this.ShapeNode = null;
this.currentLevel = 0;
this.fireLevel = 4;



//route-able output fields
//this.addField_SFVec3f(ctx, 'hitNormal_changed', 0 0 0);
//this.addField_SFVec3f(ctx, 'hitPoint_changed', 0 0 0);
//this.addField_SFVec2f(ctx, 'hitTexCoord_changed', 0 0);


//---------------------------------------
// PROPERTIES
//---------------------------------------
},
{
//----------------------------------------------------------------------------------------------------------------------
// PUBLIC FUNCTIONS
//----------------------------------------------------------------------------------------------------------------------

nodeChanged: function () {
if (!this.initDone) {
var worldId = this.findX3DDoc()._x3dElem.id;
this.displayHeight = jQuery('#'+worldId).height();
this.displayWidth = jQuery('#'+worldId).width();
this.xCenter = this.displayWidth/2;
this.yCenter = this.displayHeight/2;
this.xTopLeft = this.xCenter - this.regionSize / 2;
this.yTopLeft = this.yCenter - this.regionSize / 2;
this.xBottomRight = this.xTopLeft + this.regionSize;
this.yBottomRight = this.yTopLeft + this.regionSize;
this.htmlAppend = "<div id='m0w' style='top:"+this.yTopLeft+"px; left:"+this.xTopLeft+"px; '><div id='m0b'><div id='m1'><div id='m2'><div id='m3'></div></div></div></div></div>";

lookSensor = new ExternalLookSensor (worldId, this.xTopLeft, this.yTopLeft, this.xBottomRight, this.yBottomRight,
this.htmlAppend,
this.pollInterval, this.onTargetIncrement);
this.initDone = true;
}
}
}
)
);


/*
* This is all the wrong way to do this. It needs to be embedded in the x3dom.runtime someplace/somehow,
* but that is to be done later. This works
*/


var watcher, world;
function ExternalLookSensor (x3dId, xtl, ytl, xbr, ybr, html, interval, increment) {
world = document.getElementById(x3dId);
watcher = new Picker (world, xtl, ytl, xbr, ybr, html, interval, increment);
ExternalGetCenterObject();
};
function ExternalGetCenterObject () {
var objects = world.runtime.pickRect(watcher.xTopLeft,watcher.yTopLeft, watcher.xBottomRight, watcher.yBottomRight);
if (objects.length > 0) {
watcher.selecting = objects;
watcher.start();
} else {
watcher.reset();
}
window.setTimeout('ExternalGetCenterObject();', watcher.checkInterval);
}



Picker = function (we, xtl, ytl, xbr, ybr, html, interval, increment) {
this.timerId = 0;
this.xTopLeft = xtl;
this.yTopLeft = ytl;
this.xBottomRight = xbr;
this.yBottomRight = ybr;
this.duration = increment;
this.checkInterval = interval;
jQuery(we).append(html);
}
Picker.prototype.start = function (level) {
if (level === undefined) {
if (this.timerId != 0) {return; }
level = 0;
} else if (level == 3) {
this.select();
this.reset();
return;
}
level++;
var idString = '#m' + level;
jQuery(idString).show();
var cmdString = "watcher.start("+level+");"
this.timerId = window.setTimeout(cmdString, this.duration);
}
Picker.prototype.reset = function () {
window.clearTimeout(this.timerId);
this.timerId = 0;
jQuery('#m1').hide();
jQuery('#m2').hide();
jQuery('#m3').hide();
}
Picker.prototype.select = function () {
var selectedId = this.selecting[0]._x3domNode._xmlNode.id;
jQuery('#ResultDisplay').append('Node shape#'+selectedId+' look-clicked\n');
}
184 changes: 184 additions & 0 deletions test/LookSensor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<link rel='stylesheet' type='text/css' href='page.css'>
<!-- script src="lib/jquery-1.10.2.js"></script>
<script src="lib/jquery-ui-1.11.4/jquery-ui.js"></script -->
<!-- script type='text/javascript' src='http://www.x3dom.org/download/x3dom.js'> </script -->

<script type='text/javascript' src='../../v4/x3dom.js'> </script>

<script type='text/javascript' src='../src/nodes/PointingDeviceSensor/LookSensor.js'> </script>

<link rel='stylesheet' type='text/css' href='http://www.x3dom.org/download/x3dom.css'/>
<link rel='stylesheet' type='text/css' href='target.css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>

<script src="http://realism.com/sample/model/_lib/ui/1.11.1/jquery-ui.js"></script>
<style>
.x3dom-logContainer {font-size:small;}
</style>
<script>
var counterShader = 0;
var urlSearch = window.location.search.substring(1,window.location.search.length);
var nvPairs = urlSearch.split('&');
var tf = {'1':true, 'true':true, 'TRUE':true, '0':false, 'false':false, 'FALSE':false};
var flags = {
DEBUG : 0,
DESKTOP : 0,
VIEW : 'Viewer',
X3D : 1
};
for (ii=0; ii<nvPairs.length; ii++) {
nv = nvPairs[ii].split('=');
flags[nv[0].toUpperCase()] = nv[1];
}
flags.showStats = tf[flags.DEBUG];
flags.showLog = tf[flags.DEBUG];
flags.DESKTOP = tf[flags.DESKTOP];
flags.X3D = tf[flags.X3D];

if (flags.DESKTOP) {
//alert ('Loading jQuery-ui');
document.writeln ('<scri' + 'pt src="lib/jquery-ui-1.11.4/jquery-ui.js"></scr' + 'ipt>');
document.writeln ('<link rel="stylesheet" type="text/css" href="lib/jquery-ui-1.11.4/jquery-ui.css">');
}
</script>
<!-- link rel="stylesheet" href="http://realism.com/sample/model/_lib/ui/1.11.1/themes/smoothness/jquery-ui.css" -->
<style type='text/css' media='all'>
#goFullScreen {font-size:200%; font-weight:bold; position:absolute; height30px; width:300px; border:1 solid black; background-color:white; border-radius:7px; z-index:2; top:0px; left:250px; text-align:center; padding:10px 0 10px 0; }
</style>
</head>

<body style='width:100%; height:100%; border:0; margin:0; padding:0;'>
<div>
<b>Sensor:</b> <span id='sensor'>0</span>;
<b>Event:</b> <span id='event'>0</span>;
<div>
<b>Raw &ndash; </b>
<b>&alpha;:</b> <span id='alpha'>0.0</span>;
<b>&beta;:</b> <span id='beta'>0.0</span>;
<b>&gamma;</b>: <span id='gamma'>0.0</span>
</div>
<div>
<b>Adjusted &ndash; </b>
<b>&alpha;:</b> <span id='alpha_adj'>0.0</span>;
<b>&beta;:</b> <span id='beta_adj'>0.0</span>;
<b>&gamma;</b>: <span id='gamma_adj'>0.0</span>
</div>
<div id='goFullScreen'>Go Full Screen</div>
</div>
<div id='controls'>
<div id='mobile'>
<div id='look-left-right'>
<label>Look Left-Right (<span id='llr_value'>0</span>)</label>
<div id='look-left-right-slider'></div>
</div>
<div id='up-down'>
<label>Tilt Up-Down (<span id='ud_value'>0</span>)</label>
<div id='up-down-slider'></div>
</div>
<div id='readout'>
<div>Speed: <span id='speed_value'>0</span></div>
<div>Turning: <span id='turn_value'>0</span></div>
</div>
<div id='steer-left-right'>
<label>Steer Left-Right (<span id='slr_value'>0</span>)</label>
<div id='steer-left-right-slider'></div>
</div>
</div>
<div id='viewing'>
<input id='ViewerButton' type='button' value='Viewer'> &nbsp; <input id='OverviewButton' type='button' value='Overview'>
<input id='ViewMode' type='button' value='Stereo'>
</div>
</div>
<div id='scene'>
<script>
if (flags.X3D) {
document.writeln ('<X3D id="x3dElement" x="0px" y="0px" width="768px" height="384px" showStat="' + flags.showStats + '" showLog="' + flags.showLog + '" >');
} else {
document.writeln ("<div style='display:none'>");
}
</script>
<scene id='Basx3DScene'>
<navigationInfo headlight='true' type='"EXAMINE" "WALK"'></navigationInfo>
<viewpoint DEF='vp' centerOfRotation='0 0 0' position='0 0 10'></viewpoint>
<background DEF='bgnd' skyColor="0.4 0.4 0.5"></background>
<Transform DEF='CenterBox' translation='0 0 0'>
<Shape id='center_box'>
<Box size='1 1 1'></Box>
<Appearance>
<Material diffusecolor='1 0 0'></Material>
</Appearance>
</Shape>
</Transform>
<Transform DEF='LeftSphere' translation='-4 0 0'>
<Shape id='left_sphere'>
<Sphere radius='.5'></Sphere>
<Appearance>
<Material diffusecolor='0 1 0'></Material>
</Appearance>
</Shape>
</Transform>
<Transform DEF='RightCone' translation='4 0 0'>
<Shape id='right_cone'>
<Cone height='1' bottomRadius='.5'></Cone>
<Appearance>
<Material diffusecolor='0 0 1'></Material>
</Appearance>
</Shape>
</Transform>
<LookSensor></LookSensor>
</scene>
<script>
if (flags.X3D) {
document.writeln ('</X3D>');
} else {
document.writeln ('</div>');
}
</script>
</div>

<div style='float:right; overflow:scroll; '>
<form name='DisplayOnly' action='' onsubmit='return false;'>
<textarea id='ResultDisplay' name='ResultDisplay' cols='60' rows='30'></textarea>
</form>
</div>

<script type="text/javascript" src="http://realism.com/sample/model/_lib/display.js?v=4"></script>
<script type="text/javascript">
function getX3D (source, display) {
//e = jQuery('#'+source);
var e = document.body;
var qq = (new XMLSerializer()).serializeToString(e);
display.value = qq;
}
//cb = new DeviceDisplay ('x3dElement', 'orient-compass', 'orient-tilt', 'orient-spin', 'Shapes', true, 'rtLeft', 'rtRight');
//document.onload = function() {loadStereographic(cb); fullscreen(cb);};
//jQuery("#goFullScreen").click(function() {fullscreen(cb);});



var modes = ('Stereo', 'Mono');
jQuery(document).ready(function() {
$('#ViewMode').click(function() {
if (this.value == modes[0]) {
newMode = 1;
} else if (this.value == modes[1]) {
newMode = 0;
}
// $('#svTest').setFieldValue('mode', modes[newMode]);
this.value = modes[newMode];
});
});
</script>
<style>
#m0w {background-color:white; height:14px; width:14px; padding:1px; position:relative; }
#m0b {background-color:black; height:12px; width:12px; padding:1px; }
#m1 {background-color:red; height:8px; width:8px; padding:2px; display:none; }
#m2 {background-color:yellow; height:4px; width:4px; padding:2px; display:none; }
#m3 {background-color:green; height:4px; width:4px; display:none; }
</style>
</body>
</html>

0 comments on commit 3505dd7

Please sign in to comment.