# Menu scrolling with Vive Touchpad?

Maybe I’m using the wrong terms but I can’t seem to find anything.

I have a menu with a long list. I would like to be able to scroll through the list using a circular motion on the Vive touchpad.

I know how to divide the touchpad into quads (i.e. upper right, lower right, lower left, upper left) but I would like to add more “slices to the pie”.

Can someone tell me how that’s done or point me to a good tutorial?

Thanks in advance.

What you’ll essentially need to do is calculate the delta for the trackpad location and send that information out to the IScrollHandler Events, or OnScroll assuming you’re attempting to send it UGUI objects.

Figured it out. Posting it for others and to close the question.

If you think of the touchpad as a pie, then you are simply trying to find out which slice of the pie the finger is touching. So you need to convert the XY coordinates into an Angle (from the center of the touchpad) and that will let you know which slice of the pie you are touching (i.e. if the Angle is from 0 - 45 degrees, you are on Slice 1, 45 - 90 degrees = slice 2, 90 - 135 degrees = slice 3, etc.).

So to calculate the angle from the center, we bust out our 9th grade algebra. Anyone remember SOH-CAH-TOA? The X coordinate on the touchpad is the Adjacent length and the Y coordinate is the Opposite length so you use Tan.

Angle = Inverse_Tan(y/x) of in Unity C#: Mathf.Atan (y / x)
But that returns radians so you have to do a bit more to convert XY coordinates to degrees:

``````float angle = (Mathf.Atan (y / x)) * (180 / Mathf.PI);
``````

Here’s my script. I have my touchpad divided into 8 slices:

``````private int oldSlice;

void Update {
//determine which slice the player is touching at the start
if (controller.GetTouchDown (touchpadBtn) & canvasActive) {
float x = controller.GetAxis (touchpadBtn).x;
float y = controller.GetAxis (touchpadBtn).y;
float angle = (Mathf.Atan (y / x)) * (180 / Mathf.PI);

if (x > 0) {
if (y > 0) {
if (angle >= 45f) {
oldSlice= 1;
} else {
oldSlice= 2;
}
} else {
if (-angle <= 45f) {
oldSlice= 3;
} else {
oldSlice= 4;
}
}
}
else {
if (y < 0) {
if (angle >= 45f) {
oldSlice= 5;
} else {
oldSlice= 6;
}
} else {
if (-angle <= 45f) {
oldSlice= 7;
} else {
oldSlice= 8;
}
}
}
}

//determine which slice the finger is currently on
if (controller.GetTouch (touchpadBtn) & canvasActive) {
float x = controller.GetAxis (touchpadBtn).x;
float y = controller.GetAxis (touchpadBtn).y;
float angle = (Mathf.Atan (y / x)) * (180 / Mathf.PI);
int newSlice;
//determine which piece of the pie the thumb is in
if (x > 0) {
if (y > 0) {
if (angle >= 45f) {
newSlice= 1;
} else {
newSlice= 2;
}
} else {
if (-angle <= 45f) {
newSlice= 3;
} else {
newSlice= 4;
}
}
}
else {
if (y < 0) {
if (angle >= 45f) {
newSlice= 5;
} else {
newSlice= 6;
}
} else {
if (-angle <= 45f) {
newSlice= 7;
} else {
newSlice= 8;
}
}
}

//if the current slice (newSlice) is different than the previous slice (oldSlice), do something
if (newSlice!= oldSlice) {
if (newSlice> oldSlice) {
if (newSlice == 8 && oldSlice== 1) {
if (menuState > 1) {
controller.TriggerHapticPulse (500);
menuState = menuState - 1;
StartCoroutine (RotateMe (18, 0.2f));
}
} else {
controller.TriggerHapticPulse (500);
menuState = menuState + 1;
StartCoroutine (RotateMe (-18, 0.2f));
}
} else {
if (newSlice == 1 && oldSlice== 8) {
controller.TriggerHapticPulse (500);
menuState = menuState + 1;
StartCoroutine (rotateMenu (-18, 0.2f));
} else {
if (menuState > 1) {
controller.TriggerHapticPulse (500);
menuState = menuState - 1;
StartCoroutine (rotateMenu (18, 0.2f));
}
}
}
oldSlice = newSlice;
}
}
}
``````

I know I kind of brute forced this and I’m sure that someone is going to reply with like a one-line code that does all this but, until then, I hope this unsticks some people.

Cheers.