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