radial-control
TypeScript icon, indicating that this package has built-in type declarations

1.0.10 • Public • Published

Interactive Radial Control

radial degree 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

Readme

Keywords

none

Package Sidebar

Install

npm i radial-control

Weekly Downloads

11

Version

1.0.10

License

ISC

Unpacked Size

5.45 kB

Total Files

4

Last publish

Collaborators

  • jacobsearles