Basic ShapeOko jog control using Hammer.js drag events served via Zappa

gistfile1.coffee

serialport = require "serialport"
{SerialPort} = serialport

port = "/dev/ttyACM0" # your 'Oko's port here
server = "http://192.168.1.30:3000"

oko = new SerialPort port, {
  baudrate: 9600,
  parser: serialport.parsers.readline "\n"
}

oko.on "data", (data) ->
  process.stdout.write data + "\n"

G = (g) ->
  process.stdout.write "sent: #{g} - "
  oko.write g + "\n"
  return g

require('zappajs') ->
  @configure =>
#    @set 'view engine': 'jade'
    @use require('connect-assets')()
    @use 'bodyParser', 'methodOverride', 'static', 'nib'
  @configure
    development: ->
      @use errorHandler: { dumpExceptions: on, showStack: on }
    production: ->
      @use 'errorHandler', 'staticCache'

  # ShapeOko Routes
  @get '/a': -> G "G90"
  @get '/i': -> G "G91"
  @get '/move/:x/:y': ->
    G "G1 X#{@params.x} Y#{@params.y}"
  @get '/feed/:feed': ->
    G "G1 F#{@params.feed}"
  @get '/G1/:feed/:axis/:direction': ->
    G "G1 F#{@params.feed} #{@params.axis} #{@params.direction}"

  @get '/': ->
    @render 'index',
      server: server

  @view index: ->
    doctype 5
    html ->
      head ->
        title "NodeOko"
        script src: "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"
        script src: "http://eightmedia.github.com/hammer.js/hammer.js"
        script src: "http://eightmedia.github.com/hammer.js/jquery.hammer.js"
        script src: "/script.js"
        link rel:'stylesheet', href:'/style.css'
        ul ->
          li -> a href: "javascript:$.get('#{@server}/i',void(0));", -> 'Incremental Positioning'
          li -> a href: "javascript:$.get('#{@server}/a',void(0));", -> 'Absolute Positioning'
        div id: 'jog'

  @coffee '/script.js': ->
    $ ->
      server = "http://192.168.1.30:3000"
      $.get "#{server}/i"
      $.get "#{server}/feed/5000"

      every = (period, callback) ->
        setInterval callback, period

      momentum =
        x: 0
        y: 0
        tick: ->
          momentum.x /= 100
          momentum.y /= 100
          if Math.abs(momentum.x) > 0.01 or Math.abs(momentum.y) > 0.01
            $.get "#{server}/move/#{momentum.x}/#{momentum.y}"

      every 200, momentum.tick

      $('#jog')
        .hammer({ drag_min_distance: 0 })
        .bind "dragstart", (ev) ->
          console.dir ev
        .bind "dragend", (ev) ->
          console.dir ev
        .bind "drag", (ev) ->
          console.dir ev
          momentum.x +=  ev.distanceX
          momentum.y += -ev.distanceY

  @stylus '/style.css': '''
    ul
      list-style none
    li
      font-size 30px
      padding 15px
    #jog
      background ghostWhite
      border 1px solid #ddd
      height 700px
      width 700px
  '''