andrepxx/pure-knob

Canvas-based JavaScript UI element implementing touch, keyboard, mouse and scroll wheel support.

• Degree: Master of Science (MSc)
• Subjects:
  • computer science (primary)
  • physics (secondary)
• Job: research associate
• Personality: altruist, INFJ
• Interests:
  • science and technology in general, in particular ...
    • programming
    • Linux / FOSS / open source
    • high-performance computing (HPC)
    • fluid dynamics / aerodynamics
    • data science
    • graphics / visualization
    • collaborative mapping / OpenStreetMaps (OSM) / geographic information systems (GIS)
    • real-time systems
    • signal processing
    • audio engineering
    • electronics
  • music / concerts
  • electric guitar
  • endurance sports
  • travelling
  • exploration / lost places
  • altruism / not-for-profit
  • sustainability

pure-knob's Issues

Set value programaticaly and reflect changes?

Hi and thanks for your nice plug-in.

Found no way to easily set a new value from script, and reflect the changes with the adequate rotary action.

Currently what I do is replacing a knob by a new one with a new value, it works but this leads to some issues with event listeners, the goal would be to set many values on different knobs in the same time.

So far, I am setting the values as follow, changing at events. . Each knob div have an id. My script retrieve this data-values, so I can change it from there, and it has effect, but of course knobs don't follow on this case.

Currently building a simple audio workstation:

Also, the mouse wheel action is reversed, up wheel go down value?

Otherwise all good, no lags, simple and precise, thanks again.

suggestion: knob keeps focus until mouse up / touch end

Hi, thanks for sharing your knob :)

There's one feature that I find not very convenient: "Pulling mouse / touch outside the element before release restores back to old value.". The smaller your knob, the easier it is to leave the element by accident and revert the changes.

My plan is to change the behavior so the knob does NOT calculate the angle between the center and the mouse pointer / finger. Instead, clicking the knob sets it as focused, then I would just drag up / down to set the value (not caring about if the mouse / finger is inside the element or not). When releasing the value stays. A bit like with https://nexus-js.github.io/ui/

One drawback: there's no way to cancel (unless I detect the ESC to cancel).

What do you think of this approach? Would you use this as an alternative mode for pure-knob?

add change events?

I need change event notification for my application, and not just commit event. I would like the option to set a callback for change events. I am willing to implement this.

Can fail on odd startAngle endAngle

Dial sticks at 0 when clicked on :

knob.setProperty('angleStart', 1.5Math.PI);
knob.setProperty('angleEnd' , 2.0Math.PI);
knob.setProperty('trackWidth', 0.4);
knob.setProperty('valMin' , 0);
knob.setProperty('valMax' , 90);
knob.setProperty('needle' , true);
knob.setValue(45);

I had originally wanted

knob.setProperty('angleStart', 0);
knob.setProperty('angleEnd' , 0.5*Math.PI);

but then I wanted the dial to go anti-clockwise, so tried to swap valMin and valMax but that didn't work, so I tried the code I have above and found it doesn't work either.

non ideal resolution

Hello all and thanks for this great project ! I just implemented it into http://www.soundjack.eu and it works just fine, however, there is a problem with the resolution of the button – it is not as "smooth" as in your demo images and appears pixeled as displayed in the linked image below. Has anyone a suggestion how to fix this ? Thanks in advance !

npm package?

as the title says.
Seeing that this repo is active would be nice to get it somewhere easier :D

This knob code is not working on iphone and Ipad

This knob code is not working on iphone and Ipad. Please test the code on these.

Decimal percentage numbers

Hi Andre Plötze,

First thank you for the code, it's great!
I'm not a programmer, I just fool around with html and css and I'm trying to make a "spacecraft panel" for my son to use it on a tablet.

Question:
I was wondering if is there any way to make this knob display 'decimal percentage numbers', something like 14.7%.

Sorry for the silly question.

Thank you,
Jun