JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
initial spike
authorJason Woofenden <jason@jasonwoof.com>
Sun, 24 May 2015 16:56:26 +0000 (12:56 -0400)
committerJason Woofenden <jason@jasonwoof.com>
Sun, 24 May 2015 16:56:26 +0000 (12:56 -0400)
.git-ftp-include [new file with mode: 0644]
.gitignore [new file with mode: 0644]
Makefile [new file with mode: 0644]
auto.coffee [new file with mode: 0644]
index.html [new file with mode: 0644]

diff --git a/.git-ftp-include b/.git-ftp-include
new file mode 100644 (file)
index 0000000..3d4c4c2
--- /dev/null
@@ -0,0 +1 @@
+auto.js:auto.coffee
diff --git a/.gitignore b/.gitignore
new file mode 100644 (file)
index 0000000..31c8cde
--- /dev/null
@@ -0,0 +1 @@
+/auto.js
diff --git a/Makefile b/Makefile
new file mode 100644 (file)
index 0000000..cc4e070
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,9 @@
+objects= auto.js
+
+all: $(objects)
+
+clean:
+       rm -f $(objects)
+
+%.js: %.coffee
+       coffee -c $<
diff --git a/auto.coffee b/auto.coffee
new file mode 100644 (file)
index 0000000..7a55b2a
--- /dev/null
@@ -0,0 +1,36 @@
+# 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
diff --git a/index.html b/index.html
new file mode 100644 (file)
index 0000000..6120612
--- /dev/null
@@ -0,0 +1,25 @@
+<!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>