Input Numbers With A Rotary Dialer – Rotary Dial

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'
      
});