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.

Example Page

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

Preview Page Screenshot

Supported Browser

| | | | --- | --- | --- | --- | --- | 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

• Based on https://github.com/tutorialzine/KnobKnob
• Icon Fonts created with Fontello Icons