eskimoblood / jim-knopf Goto Github PK

Very nice and elegant knobs.
I am using Firefox on Ubuntu Linux 16. When I click on any of these knobs (at the demo page as well) a ugly dotted rectangle appears. This rectangle is normally a little wider than the knob area, sometime is shifted a little to the right, but always covers the area from the lower border of the knob up to the upper border of the Firefox window. As it always goes up to the top of the Firefox window, it can become quiet large and is very interfering with the rest of the page.
What is this and can it be removed.
Thanks for all your work.
Julius

Hi,

I would like to adopt your knobs to my application: https://github.com/TimSusa/midi-sliders
If you like, you can give it a try and tell me, what you think of it.

I wonder, how it would be possible to make the knobs only react on y-direction. Please note, that a knob in a DAW like Ableton Live or Traktor DJ Software, for example, would all have the same kind of reaction. They just act like a vertical slider. People, who produce music are get to used to this.

Best Regards,

Tim Susa.

when using knobs with bootstrap, as soon as a knob is inside a col with a size (col-md-12 etc.), the mouse dragging stops working. It doesn't matter how many layers down the DOM the knob is inside the col.

Hi, this is a great looking knob.
Will there be an future support for Internet Explorer as well?

Hello, I need advice in how to set the initial value when creating a knob. Also a simple callback example would help me.

hi , thanks for light weight library , its really elegant, however I don't know how to link knob to the callback function whenever its value changed , for example I would like to send its data to server when it changed or when receive new value set it position to new value
I really appreciated if you could make example for that

As can be seen in the picture, the pointers are not using supplied settings, make it difficult to sync with the dials,

Ui.P6 = function() {};

Ui.P6.prototype = Object.create(Ui.prototype);

Ui.P6.prototype.createElement = function() {
  Ui.prototype.createElement.apply(this, arguments);  
  this.addComponent(new Ui.Pointer({
    type: 'Arc',
    size: 30,
    outerRadius: this.width / 2.6,
    innerRadius: this.width / 2.6 - this.width / 6,
    angleoffset: this.options.angleoffset
  }));
  // this.addComponent(new Ui.Text());
  this.addComponent(new Ui.Scale(this.merge(this.options, {
    drawScale: false,
    drawDial: true,
    radius: this.width/2.5
  })));
  var circle = new Ui.El.Circle(this.width / 2.1, this.width / 2, this.height / 2);
  this.el.node.appendChild(circle.node);
  this.el.node.setAttribute("class", "p5 p6");
};

new Knob(document.getElementById('p6'), new Ui.P6()); 

The above code is basically p5, with the addition of Scale which made used of data-labels attribute.

I was trying to make it work but had no clue how to sync the pointer. Any suggestion?

Do you support any events, so we can actually get/set values to the knobs?
Thanks.