LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

0
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;
}
.dial .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;
}
.dial .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;
}
.dial .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;
}
.dial .center 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;
}
.dial .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;
}
.dial .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;
}
.dial .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
Host Instantly Drag and Drop Website Builder

 

Description

Experimenting with a dial based on Jeremey Fleischer design on Dribble: http://dribbble.com/shots/357177-Camera-Remote-App?list=searches&tag=dial
Term
Mon, 11/27/2017 - 21:59

Related Codes

Pen ID
Pen ID
Pen ID