Author: | victorqribeiro |
---|---|
Views Total: | 2,186 views |
Official Page: | Go to website |
Last Update: | October 23, 2019 |
License: | MIT |
Preview:

Description:
A fancy JavaScript library that allows the user to input numbers with a traditional rotary phone dial.
Support both drag and touch events.
How to use it:
1. Download and insert the JavaScript file RotaryDial.js
in the document.
<script src="js/RotaryDial.js"></script>
2. Create a text field for the number input.
<input type="text">
3. Create a button to clear the number input.
<button>Clear</button>
4. Initialize the library to generate a canvas-based rotary dialer on the screen.
const rd = new RotaryDial();
5. Attach the rotary dialer to the number input.
const input = document.createElement('input'); const rd = new RotaryDial({ callback: function(value){ input.value += value; } });
6. Customize the rotary dialer.
const rd = new RotaryDial({ // dial size size: 400, // disc fill color discFillColor: 'transparent', // disc stroke color discStrokeColor: 'black', // circle fill color circlesFillColor: 'black', // circle stroke color circlesStrokeColor: 'transparent', // circle highlight color circlesHighlightColor: 'red', // text color textFillColor: 'white', // text border color textStrokeColor: 'transparent', // arrow color arrowFillColor: 'black', // arrow border color arrowStrokeColor: 'transparent' });