Canvas-based JavaScript Knob/Dial Component – pure-knob

Category: Chart & Graph , Javascript | January 14, 2019
Author: andrepxx
Views Total: 3,162
Official Page: Go to website
Last Update: January 14, 2019
License: MIT

Preview:

Canvas-based JavaScript Knob/Dial Component – pure-knob

Description:

A pure JavaScript knob component to render canvas-based, highly customizable knobs/dials/gauges on the web app.

Features:

  • Supports both mouse drag and touch events.
  • Double click to change the value manually.
  • Easy to customize the appearance of the knob/dial.

Basic usage:

Import the main JavaScript file pureknob.js into the html document.

<script src="pureknob.js"></script>

Create a new knob instance (300x300px).

var myKnob = pureknob.createKnob(300, 300);

Set properties. All possible properties:

  • angleStart: start angle
  • angleEnd: end angle
  • angleOffset: offset
  • colorBG: color of the knob track.
  • colorFG: color of the knob gauge / indicator.
  • needle: decide whether to use a simple marker / needle instead of a filling gauge to indicate value along the knob’s track.
  • readonly: is readonly?
  • trackWidth: track width
  • textScale: increase/ decrease the font size. (1.0 is default font size.)
  • valMin: min value
  • valMax: max value
  • val: default value
myKnob.setProperty(propertyName, value);

Set the initial value you prefer.

myKnob.setValue(70);

Set the peak value

myKnob.setPeaks([80]);

Append the knob to an element.

<div id="demo"></div>
var node = knob.node();
var elem = document.getElementById('demo');
elem.appendChild(node);

Add an event listener to the knob.

var listener = function(knob, value) {
  console.log(value);
};

knob.addListener(listener);

Changelog:

01/14/2019

  • Add functionality for custom formatting and scaling.

11/20/2018

  • Add support for entry of numeric values on Android.

09/26/2018

  • Add support for bar graph control.

You Might Be Interested In:


Leave a Reply