https://github.com/mcx-systems/dinoknob
Knob/Dial Control and Power Button with mouse, wheel, touch and keyboard (← ↑ → ↓ ) support.
https://github.com/mcx-systems/dinoknob
css3 dimming html5 jquery-plugin knob light lights
Last synced: 2 months ago
JSON representation
Knob/Dial Control and Power Button with mouse, wheel, touch and keyboard (← ↑ → ↓ ) support.
- Host: GitHub
- URL: https://github.com/mcx-systems/dinoknob
- Owner: MCX-Systems
- License: gpl-3.0
- Created: 2021-02-03T09:40:25.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-05T20:50:53.000Z (about 2 years ago)
- Last Synced: 2025-01-11T01:44:06.903Z (4 months ago)
- Topics: css3, dimming, html5, jquery-plugin, knob, light, lights
- Language: HTML
- Homepage: https://mcx-systems.net/DinoKnob
- Size: 2.43 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
[](https://github.com/MCX-Systems/DinoKnob/graphs/commit-activity)
## Example Page
Live example page: [https://mcx-systems.net/DinoKnob](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](https://npmjs.com) and use [browserify](https://browserify.org) to make it run on the browser.
```bash
npm install --save dino-knob
or
$ yarn add dino-knob
```
Or just download the minified version
[here](https://raw.githubusercontent.com/MCX-Systems/DinoKnob/master/dist/dinoKnob.min.js).
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
------------------------
```js
$(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](https://github.com/tutorialzine/KnobKnob)
- Icon Fonts created with [Fontello Icons](https://fontello.com)