Pan Dial

[joshstovall]

Is it possible to style the dial like this?

I noticed there is a 'pan slider' example, but did not see a way to do this.

Here is an example of how this could be integrated

var dial = new Nexus.Dial('#target',{
  'min': -1,
  'max': 1,
  'step': 0,
  'value': 0,
  'mode': 'pan', //  function like "relative" but highlight left to right
})

If range is -1 to 1, highlight the absolute value (left/right) based on if the number is negative or positive.

Just some feedback--I think this could be a good feature. Regardless, thanks for this library. It is great!

[tatecarson]

Hello,

I think this is a good idea. It could be a mode of pan so you could choose the slider or the knob. Then we could leave the dial for generic uses.

I don't have time to do this right now but feel free to put in a PR. It shouldn't be too hard to combine the logic of the dial and pan to the new object.

[joshstovall]

I seemed to get it working halfway by changing handlePoints start from 1.5 to 0.5

var handlePoints = {
          start: Math.PI * 0.5, // I changed this from 1.5 to 0.5
          end: math.clip(math.scale(value, 0, 0.5, Math.PI * 1.5, Math.PI * 0.5), Math.PI * 0.5, Math.PI * 1.5)
};

This is my edited code from the Nexus Dial. What can be changed here to solve the issue?

render: {
          value: function render() {
            var value = this._value.normalized;
            var center = {
              x: this.width / 2,
              y: this.height / 2
            };
            var diameter = Math.min(this.width, this.height);
            var handlePoints = {
              start: Math.PI * 0.5,
              end: math.clip(math.scale(value, 0, 0.5, Math.PI * 1.5, Math.PI * 0.5), Math.PI * 0.5, Math.PI * 1.5)
            };
            var handle2Points = {
              start: Math.PI * 2.5,
              end: math.clip(math.scale(value, 0.5, 1, Math.PI * 2.5, Math.PI * 1.5), Math.PI * 1.5, Math.PI * 2.5)
            };
            var handlePath = svg.arc(center.x, center.y, diameter / 2 - diameter / 40, handlePoints.start, handlePoints.end);
            var handle2Path = svg.arc(center.x, center.y, diameter / 2 - diameter / 40, handle2Points.start, handle2Points.end);
            this.handle.setAttribute("d", handlePath);
            this.handle2.setAttribute("d", handle2Path);
            handlePath += " L " + center.x + " " + center.y;
            this.handleFill.setAttribute("d", handlePath);
            handle2Path += " L " + center.x + " " + center.y;
            this.handle2Fill.setAttribute("d", handle2Path);
            var arcEndingA = undefined;
            if (value <= 0.5) {
              arcEndingA = handlePoints.end;
            } else {
              arcEndingA = handle2Points.end;
            }
            var arcEndingX = center.x + Math.cos(arcEndingA) * (diameter / 2) ;
            var arcEndingY = center.y + Math.sin(arcEndingA) * (diameter / 2) * -1;
            this.handleLine.setAttribute("d", "M " + center.x + " " + center.y + " L " + arcEndingX + " " + arcEndingY);
          }
        }