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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <!--http://dribbble.com/shots/357177-Camera-Remote-App?list=searches&tag=dial-->
<figure class="dial">
  <div class="center"><span>0</span></div>
  <div class="wrapper">
    <div class="knob">
      <div class="handle"></div>
      <div class="indicator"></div>
    </div>
  </div>
  <canvas class="progress"></canvas>
</figure>
              
            
!

CSS

              
                html,
body
  width: 100%
  height: 100%
  overflow: hidden

body
  background: #111

  
.dial
  position: absolute
  width: 350px
  height: 350px
  display: block
  top: 50%
  margin-top: -175px
  left: 50%
  margin-left: -175px
  cursor: pointer
  
  .wrapper
    position: absolute
    width: 300px
    height: 300px
    left: 50%
    top: 50%
    margin-left: -150px
    margin-top: -150px
    border-radius: 300px
    cursor: pointer
    background: linear-gradient(-45deg, #171717 0%, #272727 100%)
    box-shadow: inset 0px 1px 1px 0px #999, 0px 0px 0px 4px black
      
  .knob
    position: absolute
    width: 300px
    height: 300px
    left: 50%
    top: 50%
    margin-left: -150px
    margin-top: -150px
    border-radius: 300px
    cursor: pointer
    -webkit-user-select: none

  .center
    position: absolute
    background: #c5c8b3
    width: 100px
    height: 100px
    left: 50%
    top: 50%
    border: 6px solid #1b1c1a  
    margin-left: -56px
    margin-top: -56px
    border-radius: 300px
    color: white
    z-index: 1
    -webkit-user-select: none
    box-shadow: 0px 0px 2px 2px rgba(255, 255, 255, 0.08), inset 0px 0px 10px 4px #6a6c60 
      
    span
      position: relative
      display: block
      top: 40px
      width: 100px
      text-align: center
      font-size: 24px
      color: #454541 
      font-weight: bold
      text-shadow: 0px 1px 0px #eee 

    
    
  .handle
    position: absolute
    background: #171717  
    width: 46px
    height: 46px
    left: 50%
    top: 50%
    margin-left: -23px
    margin-top: -112px
    border-radius: 46px
    box-shadow: inset 0px 0px 6px 4px #1a1a1a, 1px 1px 2px 0px rgba(255, 255, 255, 0.2), inset 1px 2px 4px 2px rgba(0, 0, 0, 0.4), inset -8px -8px 6px 1px #222222   
    
  .indicator
    position: absolute
    background: #eeeadc 
    width: 10px
    height: 10px
    top: 12px
    left: 50%
    margin-left: -6px
    border-radius: 10px
    box-shadow: 0px 0px 4px 1px white
      
  .progress
    position: absolute
    width: 350px
    height: 350px
              
            
!

JS

              
                class Dial
  
  raf: null
  mdown: false
  
  mPos:
    x: 0
    y: 0
  
  elementPosition:
    x: 0
    y: 0
    
  target: 0
  steps: 60
  radius: 150
  maxDiff: 150
  constraint: 360
  currentVal: 0

  constructor: (@$context) ->
    
    @$knob = @$context.find ".knob"
    @$handle = @$context.find ".handle"
    @$progress = @$context.find ".progress"
    @$center = @$context.find ".center"
    @$textOutput = @$center.find "span"
    
    @ctx = @$progress.get(0).getContext "2d"
    
    knobOffset = @$knob.offset()
        
    @elementPosition =
      x: knobOffset.left
      y: knobOffset.top
     
    @centerX = @$progress.width()/2
    @centerY = @$progress.height()/2 
    
    @canvasSize = @$progress.width()
    
    @addEventListeners()
    @draw()
    return
  

  addEventListeners: () ->
    @$context.on "mousedown", @onMouseDown
    @$context.on "mousemove", @onMouseMove
    $("body").on "mouseup", @onMouseUp
    return
 
  
  setDialPosition: ->
    @$knob.css
      transform: "rotate(#{@target}deg)"  
    
    @$handle.css
      transform: "rotate(-#{@target}deg)"
    
    @draw()
    return
 
  
  draw: ()->
    
    @$progress.get(0).height = @canvasSize
    @$progress.get(0).width = @canvasSize
    
    @ctx.save()
    @ctx.translate @centerX, @centerY
    @ctx.rotate (-90*(Math.PI/180))-(Math.PI * 2 / @steps)
    
    for i in [0..@steps-1] by 1
      @ctx.beginPath()
      @ctx.rotate(Math.PI * 2 / @steps)
      
      
      @ctx.lineWidth = 2
      @ctx.lineTo(160, 0)
      @ctx.lineTo(170, 0)
      if i <= Math.floor @currentVal
        @ctx.shadowBlur = 10
        @ctx.strokeStyle = "#fff"
        @ctx.shadowColor = "#fff"     
        if i > (@steps*0.75) and @currentVal > (@steps*0.75)
          @ctx.strokeStyle = "#ff9306"
          @ctx.shadowColor = "#ff9306"
        if i > (@steps*0.88) and @currentVal > (@steps*0.88)
          @ctx.strokeStyle = "#ff0606"
          @ctx.shadowColor = "#ff0606"
      else
        @ctx.strokeStyle = "#444"
        @ctx.shadowBlur = 0
        @ctx.shadowColor = "#fff"
        
      @ctx.stroke()
          
    @ctx.restore()
    return

  
  setMousePosition: (event) ->
    @mPos =
      x: event.pageX - @elementPosition.x
      y: event.pageY - @elementPosition.y
      
    atan = Math.atan2 (@mPos.x - @radius), @mPos.y - @radius
    target = (-atan / (Math.PI / 180) + 180)
  
    diff = Math.abs target - @target
    
    if diff < @maxDiff and target < @constraint
      @target = target
      @currentVal = @map(@target, 0, 360, 0, @steps)
      
      @setDialPosition()
      @updateOutput()
    return
  
  updateOutput: ()->
    @$textOutput.text Math.round(@currentVal)
    return
  
  
  # Callbacks
  onMouseDown: (event) =>
    @mdown = true
    return
  
  
  onMouseUp: (event) =>
    @mdown = false
    return
  
  
  onMouseMove: (event) =>
    if @mdown then @setMousePosition event
    return
  
  map: (value, low1, high1, low2, high2) ->
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1)

  
  
@$dial = $ ".dial"
dial = new Dial @$dial

              
            
!
999px

Console