radial-control

Interactive Radial Control

Description:
A UI wheel that displays the angle in degrees as it is rotated and fires a custom event containing the same angle in radians

Example

const controlWheel = ControlWheel({
  circleThick: 5, // thickness of wheel in pixels
  padding: 10, // Extra canvas area around the wheel
  radius: 100, // Wheel radius in pixels
  backGroundColor: "white", // Optional: Color of the canvas
  continuous: true, // Optional: if true, rotate event fires continuously as wheel moves
});

Listen for wheel move "CONTROL_WHEEL_ROTATE" event to get angle
Javascript

document.addEventListener("CONTROL_WHEEL_ROTATE", (ev) => {
  const angleInRadians = ev.detail; // ev.detail contains the angle in radians
});

Typescript

document.addEventListener("CONTROL_WHEEL_ROTATE", (ev) => {
  const angleInRadians = (<CustomEvent>ev).detail;
});

Dependencies
Production dependencies - None

Installing To run project locally
1. npm Install
2. npm start

Author
Jacob Searles

Version History
0.1

License
This project is licensed under the MIT License