Skip to content

Rotational control with built in degree display

Notifications You must be signed in to change notification settings

JaHRSe/radial-dial

Repository files navigation

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

About

Rotational control with built in degree display

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published