Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
              
            
!

CSS

              
                
              
            
!

JS

              
                  var xx_ = {};
  var colFont = "#5f0", colBg = "#111", colArc = "#ff0754", colArcBg = "#181a19";
  var minRt = -135,  //-arc
      maxRt = -minRt,//+arc
      startRt = 10;  //start value
  var w = 240,       //size = width & height
      aw = 60,       //arc width
      cr = 1,        //corner radius
      b = 6;         //border
  var rtOffset = 90, //dial's "home" position isn't at 0 degrees (pointing right), in this case we use 90 degrees
      adjusting = false;
  var style_base = Object.assign({},
      {position:'absolute'},{top:'50%'},{left:'50%'},{xPercent:-50},{yPercent:-50},{width:w},{height:w},
      {backgroundColor:'rgba(0,0,0,0)'},{backgroundSize:'100vh auto'/*for scaling*/});
  xx_.start = document.createElement('div');
  document.body.appendChild(xx_.start);
  TweenMax.set(document.body, {backgroundColor:colBg,userSelect:'none'});
  createDivAppendTo('nodial','start',style_base);
  createDivAppendTo('dial','start',style_base);
  // create D3 arc's //
  xx_.bo = drawArc(xx_.nodial,w,colArc,1,genArc(w/2-b,aw-2*b,minRt),maxRt,b);                //border (red)
  xx_.bg = drawArc(xx_.nodial,w,colArcBg,1,genArc(w/2-b,aw-2*b,minRt),maxRt,0);              //arc background
  xx_.fg = drawArc(xx_.nodial,w,colArc,0.5,xx_.protFg=genArc(w/2-b,aw-2*b,minRt),startRt,0); //dynamic arc (red)
  xx_.bi = drawArc(xx_.nodial,w,colBg,1,genArc(w/2-aw+b/2,0,minRt-b/2),maxRt+b/2,b);         //inner border
  xx_.rt = drawArc(xx_.dial,w,'transparent',0,genArc(w/2-b,aw-2*b,minRt),maxRt,0);           //dial, invisible
  // create Greensocks Draggable //
  TweenMax.set([xx_.dial,xx_.nodial,xx_.bo], {transformOrigin: "50% 50%"});
  Draggable.create(xx_.dial, {
    bounds:{minRotation:minRt, maxRotation: maxRt},
    type:'rotation',
    dragResistance:0.4,
    maxDuration:1,
    throwResistance:0,
    throwProps:true,
    //onPress:rtClick //tap&drag
    onClick:rtClick,  //tap
    onDrag:rtDial,    //tap&drag
    onRelease:function() {if (this.tween && (adjusting || this.timeSinceDrag() > 0.02)) {this.tween.kill();}},
    onUpdate:rtDial,
    onThrowUpdate:rtDial,
    ease:Back.easeOut.config(0.3),
    snap:function(rt){return rtRound(rt,5)}
  });
  // FUNCTIONS d3 //
  function genArc(br,bw,arc1){
    return d3.arc()
      .innerRadius(br-bw)
      .outerRadius(br)
      .cornerRadius(cr)
      .startAngle(toRad(arc1));
  } //genArc
  function drawArc(dom,sz,bc,bo,arc,arc2,sw){
    return d3.select(dom)
      .append('svg:svg').attr('width',sz).attr('height',sz)
        .style('position','absolute').style('width',sz).style('height',sz)
        .style('top',0).style('left',0).style('xPercent',-50).style('yPercent',-50)
      .append('svg:g').attr('transform','translate('+ sz/2 +','+ sz/2 +')')
      .append('svg:path')
        .datum({endAngle:toRad(arc2)})
        .style('fill', bc).style('opacity',bo)
        .style('stroke', bc).style('stroke-width',sw)
        .attr('d', arc);
  } //drawArc
  function arcToAngle(newEndAngle, tweening){ //angles in rad
    setDialValue(toDeg(newEndAngle));
    if (tweening) { //tweening (interpolated)
      xx_.fg.transition().duration(600)
        .attrTween('d',arcTween(newEndAngle));
    } else {        //no tweening
      xx_.fg.attr('d', arcNoTween(newEndAngle));
    }
    function arcNoTween(newAngle) {
      return function(d) {
        d.endAngle = newAngle;
        return xx_.protFg(d);
      } //function 'd'
    } //arcNoTween
    function arcTween(newAngle) {
      return function(d) {
        var interpolate = d3.interpolate(d.endAngle, newAngle);
        return function(t){
          d.endAngle = interpolate(t);
          return xx_.protFg(d);
        }
      } //function 'd'
    } //arcTween
  } //arcToAngle
  function setDialValue(val){
    console.log('deg:',Math.round(val))
  }//setDialValue
  // Greensocks Helpers //      
  function rtClick(rt) {
    if (!adjusting) {
      //figure out the angle from the pointer to the rotational origin (in degrees)
      var r = toDeg(Math.atan2(this.pointerY - this.rotationOrigin.y, this.pointerX - this.rotationOrigin.x)) + rtOffset;
      r = rtRound(rtMinMax(rtArc(r)),5);
      TweenMax.set(this.target, {rotation:r});
      //now we'll end the drag and start it again from this new place, but when we start again, it'll call the onPress of course so to avoid an endless loop, we use the "adjusting" variable to skip it in the triggered onPress.
      adjusting = true;
      this.endDrag(rt);
      //this.startDrag(rt);
      adjusting = false;
      arcToAngle(toRad(r),true)
    }
  }//rtClick
  function rtDial(){
    var r = toDeg(Math.atan2(this.pointerY - this.rotationOrigin.y,this.pointerX - this.rotationOrigin.x)) + rtOffset;
    r = rtRound(rtMinMax(rtArc(r)),5);
    TweenMax.set(this.target, {rotation:r});
    arcToAngle(toRad(r),false) //no tweening
  } //rtDial
  function toRad(deg){return (deg)*(Math.PI/180);} //d3 // http://tauday.com/tau-manifesto --> tau = 2 * Math.PI
  function toDeg(rad){return rad*(180/Math.PI);}   
  function rtRound(rt,rtStep_deg){return Math.round(rt/rtStep_deg) * rtStep_deg;}
  function rtArc(rt){
    var max = (maxRt-minRt)*2-360;
    if (rt < (-rtOffset)) {rt += 360}
    else if (rt > max) {rt -= 360}
    return rt
  }
  function rtMinMax(rt){return Math.min(Math.max(rt,minRt),maxRt)}
  function createDivAppendTo(div,dom,styles){
    xx_[div] = document.createElement('div');
    xx_[div].className = div;
    xx_[dom].appendChild(xx_[div]);
    TweenMax.set(xx_[div], styles);
  }
              
            
!
999px

Console