Skip to content

Commit

Permalink
new controller-listener component
Browse files Browse the repository at this point in the history
  • Loading branch information
@stemkoski
stemkoski committed Mar 8, 2022
1 parent 11a2b3e commit ffc5f17
Show file tree
Hide file tree
Showing 2 changed files with 174 additions and 37 deletions.
77 changes: 40 additions & 37 deletions js/controller-listener.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,18 @@ AFRAME.registerComponent('controller-listener', {

this.leftAxisX = 0;
this.leftAxisY = 0;
this.leftTrigger = {pressed: false, pressing: false, released: false, value: 0};
this.leftGrip = {pressed: false, pressing: false, released: false, value: 0};
this.leftTrigger = {queuePress: false, queueRelease: false, pressed: false, pressing: false, released: false, value: 0};
this.leftGrip = {queuePress: false, queueRelease: false, pressed: false, pressing: false, released: false, value: 0};

this.rightAxisX = 0;
this.rightAxisY = 0;
this.rightTrigger = {pressed: false, pressing: false, released: false, value: 0};
this.rightGrip = {pressed: false, pressing: false, released: false, value: 0};
this.rightTrigger = {queuePress: false, queueRelease: false, pressed: false, pressing: false, released: false, value: 0};
this.rightGrip = {queuePress: false, queueRelease: false, pressed: false, pressing: false, released: false, value: 0};

this.buttonA = {pressed: false, pressing: false, released: false};
this.buttonB = {pressed: false, pressing: false, released: false};
this.buttonX = {pressed: false, pressing: false, released: false};
this.buttonY = {pressed: false, pressing: false, released: false};
this.buttonA = {queuePress: false, queueRelease: false, pressed: false, pressing: false, released: false};
this.buttonB = {queuePress: false, queueRelease: false, pressed: false, pressing: false, released: false};
this.buttonX = {queuePress: false, queueRelease: false, pressed: false, pressing: false, released: false};
this.buttonY = {queuePress: false, queueRelease: false, pressed: false, pressing: false, released: false};

// event listeners
let self = this;
Expand All @@ -36,28 +36,28 @@ AFRAME.registerComponent('controller-listener', {
self.leftAxisY = event.detail.y; } );

this.leftController.addEventListener("triggerdown", function(event)
{ self.leftTrigger.pressed = true; } );
{ self.leftTrigger.queuePress = true; } );
this.leftController.addEventListener("triggerup", function(event)
{ self.leftTrigger.released = true; } );
{ self.leftTrigger.queueRelease = true; } );
this.leftController.addEventListener('triggerchanged', function (event)
{ self.leftTrigger.value = event.detail.value; } );

this.leftController.addEventListener("gripdown", function(event)
{ self.leftGrip.pressed = true; } );
{ self.leftGrip.queuePress = true; } );
this.leftController.addEventListener("gripup", function(event)
{ self.leftGrip.released = true; } );
{ self.leftGrip.queueRelease = true; } );
this.leftController.addEventListener('gripchanged', function (event)
{ self.leftGrip.value = event.detail.value; } );

this.leftController.addEventListener("xbuttondown", function(event)
{ self.buttonX.pressed = true; } );
{ self.buttonX.queuePress = true; } );
this.leftController.addEventListener("xbuttonup", function(event)
{ self.buttonX.released = true; } );
{ self.buttonX.queueRelease = true; } );

this.leftController.addEventListener("ybuttondown", function(event)
{ self.buttonY.pressed = true; } );
{ self.buttonY.queuePress = true; } );
this.leftController.addEventListener("ybuttonup", function(event)
{ self.buttonY.released = true; } );
{ self.buttonY.queueRelease = true; } );

// right controller

Expand All @@ -66,53 +66,56 @@ AFRAME.registerComponent('controller-listener', {
self.rightAxisY = event.detail.y; } );

this.rightController.addEventListener("triggerdown", function(event)
{ self.rightTrigger.pressed = true; } );
{ self.rightTrigger.queuePress = true; } );
this.rightController.addEventListener("triggerup", function(event)
{ self.rightTrigger.released = true; } );
{ self.rightTrigger.queueRelease = true; } );
this.rightController.addEventListener('triggerchanged', function (event)
{ self.rightTrigger.value = event.detail.value; } );

this.rightController.addEventListener("gripdown", function(event)
{ self.rightGrip.pressed = true; } );
{ self.rightGrip.queuePress = true; } );
this.rightController.addEventListener("gripup", function(event)
{ self.rightGrip.released = true; } );
{ self.rightGrip.queueRelease = true; } );
this.rightController.addEventListener('gripchanged', function (event)
{ self.rightGrip.value = event.detail.value; } );

this.rightController.addEventListener("abuttondown", function(event)
{ self.buttonA.pressed = true; } );
{ self.buttonA.queuePress = true; } );
this.rightController.addEventListener("abuttonup", function(event)
{ self.buttonA.released = true; } );
{ self.buttonA.queueRelease = true; } );

this.rightController.addEventListener("bbuttondown", function(event)
{ self.buttonB.pressed = true; } );
{ self.buttonB.queuePress = true; } );
this.rightController.addEventListener("bbuttonup", function(event)
{ self.buttonB.released = true; } );
{ self.buttonB.queueRelease = true; } );
},

updateButtonState: function( stateObject )
{
// if button was recently pressed:
// on first tick, pressing becomes true,
// then on next tick, pressed becomes false.
if (stateObject.pressed)
// clear pressed/released data,
// because it is only true for one frame.
stateObject.pressed = false;
stateObject.released = false;

// if button was recently pressed
if (stateObject.queuePress && !stateObject.pressing)
{
if (!stateObject.pressing)
stateObject.pressing = true;
else
stateObject.pressed = false;
stateObject.pressed = true;
stateObject.pressing = true;
}

// if button was recently released:
// on first tick, pressing becomes false,
// then on next tick, released becomes false.
if (stateObject.released)
if (stateObject.queueRelease)
{
if (stateObject.pressing)
stateObject.pressing = false;
else
stateObject.released = false;
stateObject.pressing = false;
stateObject.released = true;
}

// data processed; clear queues
stateObject.queuePress = false;
stateObject.queueRelease = false;
},

tick: function()
Expand Down
134 changes: 134 additions & 0 deletions quest-controllers.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html>

<head>
<title>A-Frame: Quest controller data demo</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="js/aframe-master-v1.3.0.min.js"></script>
<script src="js/controller-listener.js"></script>
</head>

<body>

<script>
AFRAME.registerComponent('text-display', {

init: function()
{
this.controllerData = document.querySelector("#controller-data").components["controller-listener"];
this.text = "";
},

tick: function()
{
this.text =
"Left Controller:" + "\n" +
"Joystick X: " + this.controllerData.leftAxisX + "\n" +
"Joystick Y: " + this.controllerData.leftAxisY + "\n" +
"[Y] Button: " + this.controllerData.buttonY.pressing + "\n" +
"[X] Button: " + this.controllerData.buttonX.pressing + "\n" +
" Trigger: " + this.controllerData.leftTrigger.pressing + "\n" +
" Grip: " + this.controllerData.leftGrip.pressing + "\n" +
"----------------------------------- \n" +
"Right Controller:" + "\n" +
"Joystick X: " + this.controllerData.rightAxisX + "\n" +
"Joystick Y: " + this.controllerData.rightAxisY + "\n" +
"[B] Button: " + this.controllerData.buttonB.pressing + "\n" +
"[A] Button: " + this.controllerData.buttonA.pressing + "\n" +
" Trigger: " + this.controllerData.rightTrigger.pressing + "\n" +
" Grip: " + this.controllerData.rightGrip.pressing + "\n";

this.el.setAttribute( "text", "value", this.text );
},

});
</script>

<a-scene renderer="antialias: true;">

<a-sky
color = "#001337">
</a-sky>

<a-entity
id="controller-data"
controller-listener="leftControllerId: #left-controller;
rightControllerId: #right-controller;">
</a-entity>

<a-entity
id="left-controller"
oculus-touch-controls="hand: left">
</a-entity>
<a-entity
id="right-controller"
oculus-touch-controls="hand: right">
</a-entity>

<a-plane
width="100" height="100"
position=" 0.00 0.00 0.00"
rotation="-90 0 0"
color="#666666"
shadow="cast: false; receive: true">
</a-plane>

<a-torus-knot
p="2" q="3" radius="0.5" radius-tubular="0.1"
position = "-2.5 1.5 -4"
color="#CC3333"
shadow = "cast: true; receive: true">
</a-torus-knot>

<a-box
width = "2" height = "1" depth = "1"
position = "-1 0.5 -3"
rotation = "0 45 0"
color = "#FF8800"
shadow = "cast: true; receive: true">
</a-box>

<a-sphere
radius = "1.25"
position = "0 1.25 -5"
color = "#DDBB00"
shadow = "cast: true; receive: true">
</a-sphere>

<a-cylinder
radius = "0.5" height = "1.5"
position = " 1 0.75 -3"
color = "#008800"
shadow = "cast: true; receive: true">
</a-cylinder>

<a-cone
radius-bottom = "1" radius-top = "0" height = "2"
position = "3 1 -4"
color = "#4444CC"
shadow = "cast: true; receive: true">
</a-cone>

<a-torus
radius="0.5" radius-tubular="0.1"
position = "2 3 -4"
rotation = "30 -20 0"
color="#8800FF"
shadow = "cast: true; receive: true">
</a-torus>

<a-entity
id="textArea"
position="0 1.5 -1.9"
geometry="primitive: plane; width: 3; height: auto"
material="color: #444444; transparent: true; opacity: 0.80;"
text="anchor: center; baseline: center; wrapCount: 40;
transparent: true; opacity: 0.90; color: #8888FF;
value: 1 \n 2 \n 3 \n 4"
text-display>
</a-entity>

</a-scene>

</body>
</html>

0 comments on commit ffc5f17

Please sign in to comment.