Create a spinner/dial input using Image Element

Help & Support
1

I’m looking for help creating a dial/spinner type input like the one found on a rotary telephone or in this case, a pascaline (a mechanical calculator created by pascal).

This is my project: https://playcanvas.com/project/604545. I’d like to be able to spin the input dials at the bottom of the screen with the mouse, specifically having the dial track the mouse as you spin it around the dial. Right now I’m just converting horizontal movement into rotation as a hack. Thanks for any help.

2

I would take the angle (or dot product) between the the vectors from the centre of the image to the last mouse down position on the image (v1) and from the centre of the image to the current mouse down position (v2).

image

3

Unfortunately with my current understanding, Image Element does not give the mouse position relative to the element, and so this kind of solution does not work.