source: other-projects/playing-in-the-street/summer-2013/trunk/Playing-in-the-Street-WPF/Content/Web/doKinect.js

Last change on this file was 28897, checked in by davidb, 10 years ago

GUI front-end to server base plus web page content
File size: 18.9 KB
Line 
1/*
2 var fenway = new google.maps.LatLng(42.345573,-71.098326);
3 var mapOptions = {
4 center: fenway,
5 zoom: 14
6 };
7 var map = new google.maps.Map(
8 document.getElementById('map-canvas'), mapOptions);
9 var panoramaOptions = {
10 position: fenway,
11 pov: {
12 heading: 34,
13 pitch: 10
14 }
15 };
16 var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
17 map.setStreetView(panorama);
18 */
19
20"use strict";
21
22var SkeletonTrackingState = {
23 NotTracked: 0,
24 Position: 1,
25 Tracked: 2
26};
27var jointTrackingState = {
28 Inferred: 1,
29 NotTracked: 0,
30 Tracked: 2
31}; //need to work out which means its tracked, probably wrong right now
32var JointType = {
33 HipCenter: 0,
34 Spine: 1,
35 ShoulderCenter: 2,
36 Head: 3,
37 ShoulderLeft: 4,
38 ElbowLeft: 5,
39 WristLeft: 6,
40 HandLeft: 7,
41 ShoulderRight: 8,
42 ElbowRight: 9,
43 WristRight: 10,
44 HandRight: 11,
45 HipLeft: 12,
46 KneeLeft: 13,
47 Ankle: 14,
48 FootLeft: 15,
49 HipRight: 16,
50 KneeRight: 17,
51 AnkleRight: 18,
52 FootRight: 19
53}
54
55var offset = 0;
56var handPointer = null;
57var pressExtentY;
58var pressOriginY;
59var jumps;
60
61$( document ).ready( function() {
62
63 function testBox( col ) {
64 var b = document.createElement( 'div' );
65 b.style.width = '200px';
66 b.style.height = '50px';
67 b.style.position = 'relative';
68 b.style.top = '150px';
69 b.style.backgroundColor = col;
70 b.style.fontSize = 'x-large';
71 document.body.appendChild( b );
72 return b;
73 }
74 //var s4 = testBox('red');
75 //var s3 = testBox('green');
76
77
78 var streamImageWidth = 640;
79 var streamImageHeight = 480;
80 var streamImageResolution = streamImageWidth.toString() + "x" + streamImageHeight.toString();
81
82 var isSensorConnected = false;
83 var engagedUser = null;
84 var cursor = null;
85 var userViewerCanvasElement = null;
86 var backgroundRemovalCanvasElement = null;
87
88
89 var inPress = false;
90 var isGripping = false;
91
92 // Log errors encountered during sensor configuration
93 function configError( statusText, errorData ) {
94 console.log( ( errorData != null ) ? JSON.stringify( errorData ) : statusText );
95 }
96
97 // Determine if the specified object has any properties or not
98 function isEmptyObject( obj ) {
99 if ( obj == null ) {
100 return true;
101 }
102
103 var numProperties = 0;
104
105 for ( var prop in obj ) {
106 if ( obj.hasOwnProperty( prop ) ) {
107 ++numProperties;
108 }
109 }
110
111 return numProperties <= 0;
112 }
113
114 // Show or hide the cursor
115 function setCursorVisibility( isVisible ) {
116 if ( cursor == null ) {
117 return;
118 }
119
120 if ( isVisible ) {
121 cursor.show();
122 } else {
123 cursor.hide();
124 }
125 }
126
127 // Show or hide a canvas element
128 function setCanvasVisibility( canvasElement, isVisible ) {
129 if ( canvasElement == null ) {
130 return;
131 }
132
133 var canvasQuery = $( canvasElement );
134
135 if ( isVisible ) {
136 if ( !canvasQuery.hasClass( "showing" ) ) {
137 // Clear canvas before showing it
138 var canvasContext = canvasElement.getContext( "2d" );
139 canvasContext.clearRect( 0, 0, streamImageWidth, streamImageHeight );
140 }
141
142 canvasQuery.addClass( "showing" );
143 } else {
144 canvasQuery.removeClass( "showing" );
145 }
146 }
147
148
149 window.addEventListener( "handPointerGrip", function() {
150 //alert("I'm cool")
151 //linkHop();
152 isGripping = true;
153
154$('#kinect-cursor-normal').attr("xlink:href","#kinect-grip-hand-base");
155
156 //alert(handPointer.isInGripInteraction);
157 /*
158 var uiController = new KinectUIController();
159 var othercursor = document.getElementById(uiController.CURSOR_ID);
160 console.log(JSON.stringify(cursor));
161 console.log(JSON.stringify(othercursor));
162 $(othercursor).addClass("kinect-grip-hand-base");
163 */
164 } );
165
166 window.addEventListener( "handPointerGripRelease", function() {
167 isGripping = false;
168 $('#kinect-cursor-normal').attr("xlink:href","#kinect-open-hand-base");
169
170 if(selectedLink) {console.log("jumping to" + selectedLink); panorama.setPano(selectedLink.pano); selectedLink = null;}
171 } );
172
173 var pressOrigin;
174 var pressExtent = 0;
175 window.addEventListener( "handPointerPress", function() {
176 //alert("I'm cool")
177 if ( !inPress ) {
178 inPress = true;
179 }
180 } );
181 /*
182 window.addEventListener( "handPointerPressRelease",function(){
183 //alert("I'm not cool")
184 //console.log("Press extended " + (pressExtent - pressOrigin) + " distance units");
185 var extent = (pressExtent - pressOrigin);
186 document.getElementById("kinectgripthing").innerHTML = "press extent: " + extent.toFixed(2) + "<br>" + "pressOrigin = " + pressOrigin.toFixed(2) + '<br>' + "pressDest = " + pressExtent.toFixed(2);
187 if(extent > .07){
188 if(!isGripping) linkHop();
189 else {
190 steps = skipSteps;
191 jumpLoop(panorama.getPano());
192 }
193 }
194 if(inPress)
195 inPress = false;
196 });*/
197
198
199 /*document.getElementById( "pano" ).addEventListener( "handPointerLeave", function() {
200 isGripping = false;
201 $('#kinect-cursor-normal').attr("xlink:href","#kinect-open-hand-base");
202 } );*/
203
204 /*
205 document.getElementById( "pano" ).addEventListener( "handPointerEnter", function() {
206 console.log("Hand Entered");
207 if(handPointer){
208 if(handPointer.IsInGripInteraction){
209 $('#kinect-cursor-normal').attr("xlink:href","#kinect-grip-hand-base");
210 isGripping = true;
211 console.log("found hand grip");
212 }
213 else{
214 $('#kinect-cursor-normal').attr("xlink:href","#kinect-open-hand-base");
215 isGripping = false;
216 console.log("found hand normal");
217 }
218 }
219 else
220 { $('#kinect-cursor-normal').attr("xlink:href","#kinect-open-hand-base"); console.log("I goofed");}
221 } );
222 */
223
224 // Update sensor state and perform UI transitions (showing/hiding appropriate UI elements)
225 // related to sensor status or engagement state changes
226 var delayedConfigTimeoutId = null;
227
228 function updateUserState( newIsSensorConnected, newEngagedUser, sensorToConfig ) {
229 var hasEngagedUser = engagedUser != null;
230 var newHasEngagedUser = newEngagedUser != null;
231
232 // If there's a pending configuration change when state changes again, cancel previous timeout
233 if ( delayedConfigTimeoutId != null ) {
234 clearTimeout( delayedConfigTimeoutId );
235 delayedConfigTimeoutId = null;
236 }
237
238 if ( ( isSensorConnected != newIsSensorConnected ) || ( engagedUser != newEngagedUser ) ) {
239 if ( newIsSensorConnected ) {
240
241 var immediateConfig = {};
242 var delayedConfig = {};
243 immediateConfig[ Kinect.INTERACTION_STREAM_NAME ] = {
244 "enabled": true
245 };
246 immediateConfig[ Kinect.USERVIEWER_STREAM_NAME ] = {
247 "resolution": streamImageResolution
248 };
249 immediateConfig[ Kinect.BACKGROUNDREMOVAL_STREAM_NAME ] = {
250 "resolution": streamImageResolution
251 };
252 immediateConfig[ Kinect.SKELETON_STREAM_NAME ] = {
253 "enabled": true
254 };
255
256
257 setCursorVisibility( newHasEngagedUser );
258 setCanvasVisibility(userViewerCanvasElement, !newHasEngagedUser);
259 setCanvasVisibility( backgroundRemovalCanvasElement, newHasEngagedUser );
260
261 if ( newHasEngagedUser ) {
262 immediateConfig[ Kinect.BACKGROUNDREMOVAL_STREAM_NAME ].enabled = true;
263 immediateConfig[ Kinect.BACKGROUNDREMOVAL_STREAM_NAME ].trackingId = newEngagedUser;
264
265 delayedConfig[ Kinect.USERVIEWER_STREAM_NAME ] = {
266 "enabled": false
267 };
268 } else {
269 immediateConfig[ Kinect.USERVIEWER_STREAM_NAME ].enabled = true;
270
271 if ( hasEngagedUser ) {
272 delayedConfig[ Kinect.BACKGROUNDREMOVAL_STREAM_NAME ] = {
273 "enabled": false
274 };
275 }
276 }
277
278 // Perform immediate configuration
279 sensorToConfig.postConfig( immediateConfig, configError );
280
281 // schedule delayed configuration for 2 seconds later
282 if ( !isEmptyObject( delayedConfig ) ) {
283 delayedConfigTimeoutId = setTimeout( function() {
284 sensorToConfig.postConfig( delayedConfig, configError );
285 delayedConfigTimeoutId = null;
286 }, 2000 );
287 }
288 } else {
289 setCursorVisibility( false );
290 setCanvasVisibility(userViewerCanvasElement, false);
291 setCanvasVisibility( backgroundRemovalCanvasElement, false );
292 }
293 }
294
295 isSensorConnected = newIsSensorConnected;
296 engagedUser = newEngagedUser;
297 }
298
299 // Get the id of the engaged user, if present, or null if there is no engaged user
300 function findEngagedUser( userStates ) {
301 var engagedUserId = null;
302
303 for ( var i = 0; i < userStates.length; ++i ) {
304 var entry = userStates[ i ];
305 if ( entry.userState == "engaged" ) {
306 engagedUserId = entry.id;
307 break;
308 }
309 }
310
311 return engagedUserId;
312 }
313
314 // Respond to user state change event
315 function onUserStatesChanged( newUserStates ) {
316 var newEngagedUser = findEngagedUser( newUserStates );
317
318 updateUserState( isSensorConnected, newEngagedUser, sensor );
319 }
320
321 // Create sensor and UI adapter layers
322 var sensor = Kinect.sensor( Kinect.DEFAULT_SENSOR_NAME, function( sensorToConfig, isConnected ) {
323 if ( isConnected ) {
324 // Determine what is the engagement state upon connection
325 sensorToConfig.getConfig( function( data ) {
326 var engagedUserId = findEngagedUser( data[ Kinect.INTERACTION_STREAM_NAME ].userStates );
327
328 //alert( JSON.stringify( data ) );
329
330 updateUserState( true, engagedUserId, sensorToConfig );
331 } );
332
333 } else {
334 updateUserState( false, engagedUser, sensorToConfig );
335 }
336 } );
337
338 var uiAdapter = KinectUI.createAdapter( sensor );
339 //KinectUI.setIsGripTarget(document.getElementById("kinectgripthing"), true);
340 //KinectUI.setIsGripTarget(document.getElementById("pano"), true);
341 uiAdapter.promoteButtons();
342 cursor = uiAdapter.createDefaultCursor();
343
344 userViewerCanvasElement = document.getElementById("userViewerCanvas");
345 backgroundRemovalCanvasElement = document.getElementById( "backgroundRemovalCanvas" );
346 //uiAdapter.bindStreamToCanvas(Kinect.USERVIEWER_STREAM_NAME, userViewerCanvasElement);
347 uiAdapter.bindStreamToCanvas( Kinect.BACKGROUNDREMOVAL_STREAM_NAME, backgroundRemovalCanvasElement );
348
349
350 var oldHeading = 0;
351 sensor.addStreamFrameHandler( function( frame ) {
352 //document.getElementById("kinectgripthing").innerHTML="pie" +offset+ " pie2 " + isGripping;
353
354 switch ( frame.stream ) {
355 case Kinect.SKELETON_STREAM_NAME:
356 for ( var iSkeleton = 0; iSkeleton < frame.skeletons.length; ++iSkeleton ) {
357 var skeleton = frame.skeletons[ iSkeleton ];
358
359 if ( skeleton.trackingState == 2 && skeleton.trackingId == engagedUser ) {
360
361 //console.log("number of uiAdapter handPointers is " + uiAdapter.handPointers.length);
362 for(var j = 0; j < uiAdapter.handPointers.length; j++){
363 if(uiAdapter.handPointers[j].getIsPrimaryHandOfPrimaryUser() && uiAdapter.handPointers[j].isTracked) {
364 handPointer = uiAdapter.handPointers[j];
365
366
367 pressExtentY = handPointer.rawY;
368
369 if ( !isGripping ) {
370 pressOriginY = handPointer.rawY;
371 } else {
372 var diffY = ( -pressExtentY + pressOriginY );
373 var newJumps = Math.round( diffY * 15 );
374 //if ( jumps != newJumps ) {
375 steps = jumps = newJumps;
376 //alert(jumps);
377 //document.getElementById( "kinectgripthing" ).innerHTML = "press extentY: " + diffY.toFixed( 2 ) + "<br>" + "pressOriginY = " + pressOriginY.toFixed( 2 ) + '<br>' + "newJumps = " + newJumps;
378 //jumpLoop( panorama.getPano() );
379 selecto(steps);
380 //}
381 }
382
383
384 if ( !inPress ) {
385 pressOrigin = handPointer.rawZ;
386 }
387 else if ( inPress ) {
388 pressExtent = handPointer.rawZ;
389 //console.log(cursor);
390 var extent = ( pressExtent - pressOrigin );
391 //document.getElementById( "kinectgripthing" ).innerHTML = "extent check has failed <br> pressOrigin = " + pressOrigin.toFixed( 2 ) + '<br>' + "pressDest = " + pressExtent.toFixed( 2 )+ "<br>" + "press extent: " + extent.toFixed( 2 );
392 if ( extent > .05 ) {
393
394 //document.getElementById( "kinectgripthing" ).innerHTML = "extent check has passed <br> pressOrigin = " + pressOrigin.toFixed( 2 ) + '<br>' + "pressDest = " + pressExtent.toFixed( 2 ) + "<br>" + "press extent: " + extent.toFixed( 2 );
395
396 /*console.log( "link hopping" );
397 linkHop();*/
398
399 inPress = false;
400 }
401 }
402
403
404 break;}
405 }
406
407
408 var x = skeleton.boneOrientations[ JointType.ShoulderCenter ].absoluteRotation.matrix.m13;
409 var y = skeleton.boneOrientations[ JointType.ShoulderCenter ].absoluteRotation.matrix.m23;
410 var z = skeleton.boneOrientations[ JointType.ShoulderCenter ].absoluteRotation.matrix.m33;
411
412 //var tilt = skeleton.joints[JointType.Head].position.z - skeleton.joints[JointType.ShoulderCenter].position.z;
413
414 var len = x * x + z * z;
415 x = x / len;
416 z = z / len;
417
418 var orient = Math.atan2( x, z );
419
420 var heading = orient * ( 180 / Math.PI ) * 2 + 70;
421 var pitch = y * 180 - 20;
422
423 //heading = 0.9 * oldHeading + 0.1 * heading;
424 //if(heading > 360){alert("heading hsa gone full circle and more")}
425 oldHeading = heading;
426 var pov = panorama.getPov();
427 //alert(cursor);
428 //console.log(cursor.IsInGripInteraction);
429
430 //if the user is not gripping, move their view
431 if ( !isGripping ) {
432 pov.heading = heading + offset;
433 pov.pitch = pitch;
434
435 panorama.setPov( pov );
436 SyncThreeCamera( pov.heading, pov.pitch );
437 } else {
438 offset = ( pov.heading + 360 ) - ( heading + 360 );
439 offset = offset % 360;
440 //alert(offset);
441 }
442 }
443 //SyncThreeCamera(pov.heading, pov.pitch)
444
445 //var kin = document.getElementById("kinectgripthing");
446 //kin.innerHTML = x + "<br>" + y + "<br>" + z +"<br>" + Math.atan2(x, z);
447 //kin.innerHTML = "Heading is " + "<br>" + heading;
448 //if(g){console.log(JSON.stringify(skeleton)); g = !g}
449 //s1.left = skeleton.joint[]
450
451 /*skeleton.trackingId;
452 skeleton.trackingState;
453 skeleton.position;*/
454 }
455
456 break;
457 }
458 } );
459 //braeden done
460
461 sensor.addEventHandler( function( event ) {
462 switch ( event.category ) {
463 case Kinect.USERSTATE_EVENT_CATEGORY:
464 switch ( event.eventType ) {
465 case Kinect.USERSTATESCHANGED_EVENT_TYPE:
466 onUserStatesChanged( event.userStates );
467 break;
468 }
469 break;
470 }
471 } );
472} );
473
474
475function modePov( list ) {
476 var count = 0;
477 var mode;
478 for ( var i = 0; i < list.length - 1; i++ ) {
479 var tempCount = 0;
480 for ( var j = 1; j < list.length; j++ ) {
481 console.log( list[ i ].heading + " against " + list[ j ].heading )
482 if ( list[ i ].heading == list[ i ].heading ) {
483 tempCount++;
484 //alert("BANG BANG");
485 }
486 }
487 if ( tempCount > count ) {
488 mode = list[ i ];
489 count = tempCount;
490 } //console.log("setting mode from heading " + mode.heading);
491 }
492 console.log( "mode had frequency of " + count );
493 //console.log(list);
494 return mode;
495}
496
497document.addEventListener( 'keydown', function( e ) {
498 var keyCode = e.keyCode;
499 /*sensor.getConfig((function(data){
500 alert("ALERT ALERT Keydown detected \r\n" + JSON.stringify(data))
501 }));*/
502} );
503
504function linkHop() {
505 var panoLink = pickHop( panorama.getLinks());
506 console.log(panoLink);
507 panorama.setPano(panoLink.pano);
508}
509
510function keyDownTextField(e){
511 var keyCode = e.keyCode;
512 if(keyCode == 69){
513 selectedLink = selecto(4);
514 }
515}
Note: See TracBrowser for help on using the repository browser.