--- /dev/null
+# globals
+$svg = null #jquery object for svg element
+selected = null
+
+stop_drawing = ->
+ selected = null
+click = (x, y) ->
+ unless selected?
+ selected = []
+ if selected.length > 0
+ last = selected[selected.length - 1]
+ obj = document.createElementNS("http://www.w3.org/2000/svg", "path")
+ obj.setAttributeNS(null, "d", "M #{last[0]} #{last[1]} L #{x} #{y}")
+ $svg[0].appendChild(obj)
+ selected.push [x, y]
+ console.log selected
+
+# called automatically on domcontentloaded
+init = ->
+ $container = $ '.crayon_mockup'
+ $stop_button = $ '<div class="button">[end current polyline]</div>'
+ $tools = $ '<div class="toolbar"></div>'
+ $tools.append $stop_button
+ $stop_button.click stop_drawing
+ $container.append $tools
+ $svg = $ '<svg height="500" width="500" viewBox="0 0 500 500" style="border: 1px dotted #aaa" xmlns="http://www.w3.org/2000/svg"></svg>'
+ #$test_path = $ '<line id="line" x1="5" y1="50" x2="105" y2="150" style="stroke: rgb(0,127,127); stroke-width: 5;"></line>'
+ #$svg.append $test_path
+ $container.append $svg
+ console.log 'hi'
+ $svg.mousedown (e) ->
+ console.log 'hi'
+ offset = $svg.offset()
+ click e.pageX - offset.left, e.pageY - offset.top
+
+$ init
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>Crayon Mockup (working title)</title>
+ <script src="/javascript/jquery/jquery.min.js"></script>
+ <script src="auto.js"></script>
+ <style>
+ .crayon_mockup svg path {
+ fill: none;
+ stroke: #8c8c8c;
+ stroke-width: 2;
+ stroke-linecap: butt;
+ stroke-linejoin: round;
+ stroke-miterlimit: 4;
+ stroke-opacity: 1;
+ stroke-dasharray: none;
+ }
+ </style>
+</head>
+<body>
+ <h1>Crayon Mockup (working title)</h1>
+ <p>Instructions: click in multiple different places in the box below to draw</p>
+ <div class="crayon_mockup"></div>
+</body>
+</html>