Skip to content

Knob/Dial Control and Power Button with mouse, wheel, touch and keyboard (← ↑ → ↓ ) support.

License

Notifications You must be signed in to change notification settings

MCX-Systems/DinoKnob

Repository files navigation

DinoKnob

Knob/Dial Control and Power Button with mouse, wheel, touch and keyboard (← ↑ → ↓ ) support.
It also includes 5 default countdown timers preset to: 15sec, 1min, 5min, 10min, 15min.

Maintenance Website GitHub last commit GitHub issues GitHub pull requests

CRAN/METACRAN GitHub release (latest by date) npm bundle size (version) GitHub code size in bytes GitHub forks

Example Page

Live example page: https://mcx-systems.net/DinoKnob

Preview Page Screenshot

Screenshot

Supported Browser

Chrome Firefox IE Opera Safari
Latest ✔ Latest ✔ 9+ ✔ Latest ✔ 8.0+ ✔

Tested in latest Edge, Chrome, Firefox, Opera, Safari and Mobile Safari \

  • Canvas-based, no image files required.
  • Mouse, wheel, touch and keyboard controls.

Install

You can install through npm and use browserify to make it run on the browser.

npm install --save dino-knob

or

$ yarn add dino-knob

Or just download the minified version here.

Events / Actions

  • Normal left click / drag / touch changes value, releasing button commits value.
  • Pulling mouse / touch outside the element before release restores back to old value.

Functions

  • 5 x Timer Output Switch - 15 seconds, 1 minute, 5 minutes, 10 minutes, 15 minutes / all preset \
  • 1 x Button Output Switch ON / OFF \
  • 1 x Range Knob / Can be used as Lights DIMMER - Output values from 0 - 100% and 0 to 255 PWM

Example for dinoKnob control

$(document).ready(function()
{
	$('#KnobTest1').dinoKnob({
			// Theme Light or Dark
			theme: 'dark',
			// Circle range Bar style:
			// (Hot, Cold or Mono, yellow, blue, red, green)
			barTheme: 'blue',
			// Step Value of the Knob
			snap: 5,
			// Knob Display Max Value as 100%
			maxValue: 100,
			// Max angle value, for alarm icon
			maxAlarm: 50,
			// Enable Timer Button
			showTimer: true,
			// Enable Alerts Button
			showAlert: true,
			// Enable Labels Button
			showLabel: true,
			// Enable Debug
			debug: true,
			// Event on knob turn - change
			onTurn: function(dinoId, value, percent, degree, ratio)
			{
				$("#per1").val(percent);
				$("#des1").val(degree);
				$("#rat1").val(ratio);
				$("#val1").val(value);

				$("#range1").val($("#KnobExample1 input[type=hidden]").val());
			},
			onStatus: function(dinoId, state, timerState, timerTime)
			{
				$("#sta1").val(state);
				$("#stu1").val(timerState);
				$("#stp1").val(timerTime + ' seconds');
			},
			onTimer: function(dinoId, timeLeft)
			{
				$("#still1").val(timeLeft + ' seconds');
			},
			onError: function(dinoId, error)
			{
				// Return knob errors
				$("#err1").val(error);
			}
		});

	// Depends on maxAngle, set to max of 255 default
	$("#KnobExample1 input[type=checkbox]").prop('checked', true).trigger('change');
	$("#KnobExample1 input[type=hidden]").val(255).trigger('change');
	$("#range1").val($("#KnobExample1 input[type=hidden]").val());
	//$('#KnobExample1').data('plugin_dinoKnob').destroy();
});

You may update both the maxAngle value
($("#KnobTest1 input[type=hidden]").val(255).trigger('change');)

and the button state value

($("#KnobTest1 input[type=checkbox]").prop('checked', true).trigger('change'))
programmatically in your script to display new values.

Return values from example

Variable Type
id String
value int
percent int
degree int
ratio int
state bool
timerState bool
timerTime int
timeLeft int
error String

Credits