From d37b9bb3102e0b9ec25d0015423ac7f26c6472c9 Mon Sep 17 00:00:00 2001
From: Shoofle Munroe <shoofle@thelevelup.com>
Date: Mon, 13 Jul 2015 12:52:13 -0400
Subject: [PATCH] Add a scratch thing

---
 static/strong_tag.html | 89 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 static/strong_tag.html
diff --git a/static/strong_tag.html b/static/strong_tag.html
new file mode 100644
index 0000000..c44b6b9
--- /dev/null
+++ b/static/strong_tag.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html>
+	<head>
+		<title>strong tag</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+		<script type="text/javascript" src="jquery-2.0.3.js"></script>
+		<script type="text/javascript">
+            var margin, s1, s2, s3, hook_separation, h1, h2, h3, h4, hook_overlap, hook_height, stroke_width, staple_rise, staple_offset, staple_width;
+            var canvas, ctx;
+            var w = this;
+            $(document).ready(function() {
+                              canvas = $('canvas')[0];
+                              ctx = canvas.getContext("2d");
+                              $('input').each(function() { w[$(this).attr('name')] = parseFloat($(this).val());});
+                              $('input').on('change', function() { w[$(this).attr('name')] = parseFloat($(this).val()); redraw(); });
+                              redraw();
+            });
+            
+            function redraw() {
+                stroke();
+                h1 = margin;
+                s1 = margin;
+                hook_separation = margin / 2;
+                staple_rise = staple_offset;
+                
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                ctx.save();
+                draw_on(ctx);
+                ctx.translate(0, canvas.height);
+                ctx.scale(1, -1);
+                draw_on(ctx);
+                ctx.translate(canvas.width, 0);
+                ctx.scale(-1, 1);
+                draw_on(ctx);
+                ctx.translate(0, canvas.height);
+                ctx.scale(1, -1);
+                draw_on(ctx);
+                ctx.restore();
+            }
+        
+        function stroke() {
+            ctx.lineJoin = "miter";
+            ctx.lineCap = "square";
+            ctx.lineWidth = stroke_width;
+        }
+        function draw_on(context) {
+            // t
+            var p1 = new Path2D();
+            p1.moveTo(margin, margin);
+            p1.lineTo(margin, canvas.height / 2);
+            p1.lineTo(margin + s1, canvas.height / 2);
+            ctx.stroke(p1)
+            // arms
+            var p2 = new Path2D();
+            p2.moveTo(margin + s1, (canvas.height / 2) - h1);
+            p2.lineTo(margin + s1, margin);
+            p2.lineTo((canvas.width / 2) - hook_separation, margin);
+            p2.lineTo((canvas.width / 2) - hook_separation, margin + hook_height);
+            p2.lineTo((canvas.width / 2) - hook_separation - staple_width - hook_overlap, margin + hook_height);
+            ctx.stroke(p2);
+            // staple
+            var p3 = new Path2D();
+            p3.moveTo((canvas.width / 2) - hook_separation - staple_offset, margin + staple_offset);
+            p3.lineTo((canvas.width / 2) - hook_separation - staple_width - hook_overlap - staple_offset, margin + staple_offset);
+            p3.lineTo((canvas.width / 2) - hook_separation - staple_width - hook_overlap - staple_offset, margin + hook_height + staple_rise);
+            p3.lineTo((canvas.width / 2), margin + hook_height + staple_rise);
+            ctx.stroke(p3);
+        }
+		</script>
+        <style>
+            canvas {
+                width: 600px;
+                height: 250px;
+                border: 1px solid black;
+                display: block;
+            }
+        </style>
+	</head>
+	<body>
+		<canvas width="600" height="250"></canvas>
+        <p><label for="stroke_width">channel width: </label><input type="range" name="stroke_width" min="0" max="20" value="10" /></p>
+        <p><label for="margin">margin: </label><input type="range" name="margin" min="10" max="40" value="20"/></p>
+        <p><label for="hook_height">hooks height: </label><input type="range" name="hook_height" min="20" max="60" value="40"/></p>
+        <p><label for="staple_width">staple width: </label><input type="range" name="staple_width" min="0" max="50" value="25"/></p>
+        <p><label for="staple_offset">staple offset: </label><input type="range" name="staple_offset" value="20" min="5" max="60" value="17"/></p>
+        <p><label for="hook_overlap">hook overlap: </label><input type="range" id="hook_overlap" name="hook_overlap" min="0" max="20" value="5"/></p>
+	</body>
+</html>
