All Built-in Gestures
In here is shown an example where all the built-in gestures are applied (except message from arduino which requires a external serial connected device).
In order to trigger the actions you can either click on the button on the left or right click on the mouse and selection the appropiate gesture.
AllBuiltInGestures
On top of that, you can click on Enter to play with the interactive zone to see and check out the behavior of New User and No user in action. You can see on the top right hand side of the page the coordinates of the user.
HTML
<html> <head> </head> <body> <div id="main-container"> <h1 id="msgGrip">Do something, let's go!!</h1> <img id="face1" src="{resources:images/face1.png}"> <img id="face2" src="{resources:images/face2.png}"> <img id="face3" src="{resources:images/face3.png}"> <img id="face4" src="{resources:images/face4.png}"> <img id="face5" src="{resources:images/face5.png}"> <img id="face6" src="{resources:images/face6.png}"> <img id="face7" src="{resources:images/face7.png}"> <img id="face8" src="{resources:images/face8.png}"> <img id="face9" src="{resources:images/face9.png}"> <ul> <ol><input id='grip' type="button"class='btnMenu' value="Grip" onclick=grip()></ol> <ol><input id='realese' type="button" class='btnMenu' value="Release" onclick=release()></ol> <ol><input id='prior' type="button"class='btnMenu' value="Prior" onclick=prior()></ol> <ol><input id='newUser' type="button"class='btnMenu' value="New User" onclick=newUser()></ol> <ol><input id='noUser' type="button" class='btnMenu' value="No User" onclick=noUser()></ol> <ol><input id='nextBtn' type="button" class='btnMenu' value="Next" onclick=next()></ol> <ol><input id='handNone' type="button" class='btnMenu' value="Hand None" onclick=changeHandNone()></ol> <ol><input id='handLeft' type="button" class='btnMenu' value="Hand Left" onclick=changeHandLeft()></ol> <ol><input id='handRight' type="button" class='btnMenu' value="Hand Right" onclick=changeHandRight()></ol> </ul> <div id="position-viewer"> <div id="interactive-area"></div> <div id="player1" class="player"></div> <div id="player2" class="player"></div> <div id="spinecenter1"></div> <div id="spinecenter2"></div> </div> <canvas id="skeletonsCanvas" width="640" height="480" ></canvas> <div id="user-position"></div> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.0/TweenMax.min.js"></script> </body> </html>
CSS
/* application css */
body{
width: 100%;
height: 100%;
}
#main-container{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #efc31a;
overflow: hidden;
}
#msgGrip{
top:10;
}
img{
position: absolute;
width: 500px;
height: 500px;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
transform: scale({parameter:imageScale}, {parameter:imageScale});
-ms-transform: scale({parameter:imageScale}, {parameter:imageScale}); /* IE 9 */
-webkit-transform: scale({parameter:imageScale}, {parameter:imageScale}); /* Safari */
}
/*We will make the following images invisible, then we will call the id with jquery to make them visible again */
#face1{
opacity: 0;
}
#face2{
opacity: 0;
}
#face3{
opacity: 0;
}
#face4{
opacity: 0;
}
#face5{
opacity: 0;
}
#face6{
opacity: 0;
}
#face7{
opacity: 0;
}
#face8{
opacity: 0;
}
/* Face9 will be default image then we set opacity:1*/
#face9{
opacity: 1;
}
/* ---- Position Viewer ---- */
#position-viewer{
position: absolute;
bottom: 100px;
right: 100px;
width: 180px;
height: 180px;
background-color: rgba(255,255,255,0.1);
border: 1px solid #fff;
}
#interactive-area{
position: absolute;
top: 0px;
left: 0px;
border: 1px solid #fff;
background-color: rgba(255, 255, 255, 0.65);
}
.player{
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #fff;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: none;
}
#user-position{
position:absolute;
color: #3399ff;
background-color: #000;
font-size: 50px;
padding: 20px;
top: 0;
right: 0;
opacity: {parameter:showUserPosition};
font-family: sans-serif;
}
#skeletonsCanvas{
opacity: {parameter:showSkeletons};
}
.btnMenu{
display:inline-block;width: 180px;padding:5px 10px; margin-top:5px;
background-color:green;
}
.btnMenu:hover {
background-color:#476e9e;
}
.btnMenu:active {
position:relative;
top:1px;
}
UBOX EVENTS (JAVASCRIPT)
/* application source */
var msgApp = "Do something, let's go!!"; //Default message
var f = $('#msgEnter');
setInterval(function () {
f.css('display') == 'block' ? f.css('display', 'none') : f.css('display', 'block');
}, 500);
/* Vision Range Area */
// (border map)
var xPosMin = 0;
var xPosMax = 100;
var zPosMin = 0;
var zPosMax = 100;
/* Interactive Area */
var xPosMin_i = 35;
var xPosMax_i = 65;
var zPosMin_i = 35;
var zPosMax_i = 65;
var xDistance = (xPosMax + (xPosMin * -1));
var zDistance = (zPosMax + (zPosMin * -1));
/* Variables handle the users position */
var mainXPos, xPos1, xPos2 = 0;
var mainZPos, zPos1, zPos2 = 0;
/* Other Variables */
var currentZone = 0;
var selectedZone = -1;
var webTest = false;
// POSITION VIEWER
function createPositionViewer() {
$('#interactive-area').css('height', zPosMax_i - zPosMin_i + '%').css('top', zPosMin_i + '%');
$('#interactive-area').css('width', xPosMax_i - xPosMin_i + '%').css('left', xPosMin_i + '%');
}
createPositionViewer();
// X AND Z MOVEMENT
//Show us where the player is
var face = changeFace(9);
function updatePos(sklxz) {
var currentPlayer;
if (sklxz != null) {
mainZPos = window['zPos' + sklxz];
mainXPos = window['xPos' + sklxz];
currentPlayer = window['player' + sklxz];
} else {
currentPlayer = window['player1'];
sklxz = 1;
}
$('#user-position').html('X = ' + mainXPos + ', Z = ' + mainZPos);
if (mainZPos <= zPosMin || mainZPos >= zPosMax || mainXPos <= xPosMin || mainXPos >= xPosMax) {
$(window['player' + sklxz]).css('background-color', '#fff');
currentZone = 0;
noUser();
} else if (mainZPos > zPosMin_i && mainZPos <= zPosMax_i && mainXPos > xPosMin_i && mainXPos <= xPosMax_i) {
$(window['player' + sklxz]).css('background-color', '#f00');
currentZone = 2;
newUser();
} else {
$(window['player' + sklxz]).css('background-color', '#000');
currentZone = 1;
$('#newUser').css('background-color', 'green');
$('#msgGrip').html(msgApp);
}
if (currentZone != selectedZone) {
selectedZone = currentZone;
changeContent(selectedZone);
}
}
function changeContent(num) {
changeFace(9);
}
// CHANGE BACKGROUND COLOR AND IMAGES
var prevFace = 9; //Defines default image
function changeFace(faceNumber) {
var bgColor; /*#E74D3D #EFC319 #41B19C #874B9C #35495E #E58025 #41B19C #2780B9 #EFC319*/
if (faceNumber == 1) {
$('#face9').css('opacity', '0'); //We make default image invisible to replace it
$('#face7').css('opacity', '1'); //it making face7 visible
bgColor = '#E74D3D';
$('#main-container').css('background-color', bgColor);
} else if (faceNumber == 2) {
$('#face9').css('opacity', '0');
$('#face2').css('opacity', '1');
$('#noUser').css('background-color', 'red');
} else if (faceNumber == 9) {
$('#face9').css('opacity', '0');
$('#face2').css('opacity', '1');
bgColor = '#EFC319';
$('#noUser').css('background-color', 'green'); // defines color bottoms when faceNumber = 9 (default image)
$('#newUser').css('background-color', 'green');
$('#main-container').css('background-color', bgColor);
} else if (faceNumber == 3 || faceNumber == 7) {
$('#face9').css('opacity', '0');
$('#face3').css('opacity', '1');
bgColor = '#41B19C';
$('#main-container').css('background-color', bgColor);
} else if (faceNumber == 4) {
$('#face9').css('opacity', '0');
$('#face4').css('opacity', '1');
bgColor = '#874B9C';
$('#main-container').css('background-color', bgColor);
$('#newUser').css('background-color', 'red');
setTimeout(function () {
$('#newUser').css('background-color', 'green');
}, 1500);
} else if (faceNumber == 5) {
$('#face9').css('opacity', '0');
$('#face5').css('opacity', '1');
bgColor = '#35495E';
$('#main-container').css('background-color', bgColor);
} else if (faceNumber == 6) {
$('#face9').css('opacity', '0');
$('#face6').css('opacity', '1');
bgColor = '#E58025';
$('#main-container').css('background-color', bgColor);
} else if (faceNumber == 8) {
$('#face9').css('opacity', '0');
$('#face8').css('opacity', '1');
bgColor = '#2780B9';
$('#main-container').css('background-color', bgColor);
}
if (faceNumber == 2 || faceNumber == 9) {
$('#face1').css('opacity', '0'); //when faceNumber= default image we make all invisible except defaults
$('#face2').css('opacity', '0');
$('#face3').css('opacity', '0');
$('#face4').css('opacity', '0');
$('#face5').css('opacity', '0');
$('#face6').css('opacity', '0');
$('#face7').css('opacity', '0');
$('#face8').css('opacity', '0');
$('#face9').css('opacity', '1');
}
}
// UBOX NATIVE SCRIPT
var canvas = document.getElementById("skeletonsCanvas");
var context = canvas.getContext("2d");
function getSkeletons(jsonObject) {
if (context == null) {
return;
}
var skl = 0;
context.clearRect(0, 0, canvas.width, canvas.height);
try {
for (var i = 0; i < jsonObject.skeletons.length; i++) {
skl++;
for (var j = 0; j < jsonObject.skeletons[i].joints.length; j++) {
var joint = jsonObject.skeletons[i].joints[j];
// Draw!!!
context.fillStyle = "#FF0000";
context.beginPath();
context.arc(joint.x, joint.y, 10, 0, Math.PI * 2, true);
context.closePath();
context.fill();
var cordx = (joint.x * 100) / 640;
var cordy = 100 - ((joint.y * 100) / 480);
var cordz = (joint.z * 100) / 4;
if (joint.name == 'spinecenter') {
document.getElementById('spinecenter' + skl).style.left = cordx + 'px';
document.getElementById('spinecenter' + skl).style.top = cordy + 'px';
document.getElementById('spinecenter' + skl).style.zIndex = Math.floor(cordz);
window['xPos' + skl] = Math.round(document.getElementById('spinecenter' + skl).style.left.replace("px", ""));
window['yPos' + skl] = Math.round(document.getElementById('spinecenter' + skl).style.top.replace("px", ""));
window['zPos' + skl] = Number(document.getElementById('spinecenter' + skl).style.zIndex);
$('#player' + skl).css('top', ((window['zPos' + skl] - zPosMin) * 100) / zDistance + '%');
$('#player' + skl).css('left', ((window['xPos' + skl] - xPosMin) * 100) / xDistance + '%');
$('#player' + skl).show();
}
updatePos(1);
}
}
} catch (err) {
//do nothing
}
}
console.log($('#Mymenu'));
$('#Mymenu').append('<li id="newBtn-ar" data_parameter="" class=""><a href="#newBtn-ar">new Button</a></li>');
function msgFromArduino(value) {
console.debug('From Arduino: ' + value);
}
function next() {
$('#nextBtn').css('background-color', 'red'); // Background for bottom next
$('#msgGrip').html('You raise your arms, to the right!!, very well');
setTimeout(function () {
$('#nextBtn').css('background-color', 'green'); //We set a time out to return to default image after 1s
$('#msgGrip').html(msgApp);
changeFace(9);
}, 800);
changeFace(8); //Image that we will see before time out
}
//We will do the same in the next functions
function prior() {
console.debug('Prior');
$('#prior').css('background-color', 'red');
$('#msgGrip').html('You raise your arms, to the left!!, very well');
setTimeout(function () {
$('#prior').css('background-color', 'green');
$('#msgGrip').html(msgApp);
changeFace(9);
}, 800);
changeFace(7);
}
function grip() {
$('#msgGrip').html('You griped me!!, very well');
$('#grip').css('background-color', 'red');
setTimeout(function () {
$('#msgGrip').html(msgApp);
changeFace(9);
$('#grip').css('background-color', 'green');
}, 800);
changeFace(1);
}
function release() {
$('#msgGrip').html('You release me, very well!!');
$('#realese').css('background-color', 'red');
setTimeout(function () {
$('#msgGrip').html(msgApp);
changeFace(9);
$('#realese').css('background-color', 'green');
}, 800);
changeFace(6);
}
function noUser() {
console.debug('No User :(');
$('#msgGrip').html('Upss!!...No User, very well');
$('#noUser').css('background-color', 'red');
$('#msgGrip').html(msgApp);
changeFace(9);
changeFace(2);
setTimeout(function () {
$('#noUser').css('background-color', 'green');
}, 800);
}
function newUser() {
console.debug('New User :)');
$('#msgGrip').html('Great!!...new User, very well');
$('#newUser').css('background-color', 'red');
changeFace(4);
}
function changeHandNone() {
$('#handNone').css('background-color', 'red');
$('#msgGrip').html('Hand None, very well');
setTimeout(function () {
$('#handNone').css('background-color', 'green');
$('#msgGrip').html(msgApp);
changeFace(9);
}, 800);
changeFace(7);
}
function changeHandRight() {
$('#handRight').css('background-color', 'red');
$('#msgGrip').html('You have changed me on the right, very well');
setTimeout(function () {
$('#handRight').css('background-color', 'green');
$('#msgGrip').html(msgApp);
changeFace(9);
}, 800);
changeFace(5);
}
function changeHandLeft() {
$('#handLeft').css('background-color', 'red');
$('#msgGrip').html('You have changed me on the left, very well');
setTimeout(function () {
$('#handLeft').css('background-color', 'green');
$('#msgGrip').html(msgApp);
changeFace(9);}, 800);
changeFace(1);
}
Just for Websiting
function follow(evt) {
if (webTest) {
mainXPos = Math.round((evt.pageX / window.innerWidth) * 100);
mainZPos = Math.round((evt.pageY / window.innerHeight) * 100);
$('#player1').css('top', ((mainZPos - zPosMin) * 100) / zDistance + '%').css('left', ((mainXPos - xPosMin) * 100) / xDistance + '%').show();
updatePos(null);
}
}
function checkKeyUp(e) {
e = e || window.event;
if (e.keyCode == '13') {
document.onmousemove = follow;
webTest = true;
$('#player1, #position-viewer').css('opacity', '1').show();
}
}
window.onkeyup = checkKeyUp;
BUILT-IN GESTURES
- newUser
- noUser
- grip
- release
- getSkeletons
- next
- prior
- changeHandNone
- changeHandRight
- changeHandLeft
- msgFromArduino
- allBuiltinGestures