RotatePanInput

RotatePanInput is a circular version of PanInput, an Axes input type that returns the angle moved by a touch.

For reference, Input Type is Axes Plugin. It delivers the change value according to user input to Axes. Axes accumulates the change and gets the final coordinate value. Axes sends an event to the user of the change.

See the documentation below for more details.

• How to create an ui that responds to user actions using eg.axes
• How to create a custom InputType (Korean)

PanInput can tell you how much the x and y coordinates have moved. But if you want to know how many degrees are rotated around a specific axis, you can use RotatePanInput.

A representative example is the home screen of the NAVER Green Dot Project.

https://m.naver.com/

You can see the UI on mobile phone.

How to use

HTML

<div id="area" class="axes-target"></div>

JS

var input = new eg.Axes.RotatePanInput("#area");

// create eg.Axes with option
var axes = new eg.Axes({
  // property name('angle') could be anything you want (eg. x, y, z...)
  angle: {
    range: [-720, 720] /* from 720 deg to 720 deg */
  }
}).on("change", function(e) {
  console.log("Current angle is", e.pos.angle + "deg";)
});

// Important thing: you need to connect axes with input.
axes.connect("angle", input);

example

• Codepen - RotatePanInput Basic

Precautions

• The center of the target element is the axis of rotation. Therefore, semicircle shapes, such as green dot projects, need to be positioned so that the element's position is not visible.