From 4cfc67d41648d0e682e854a68a9c1c791bca9dbf Mon Sep 17 00:00:00 2001 From: eelfroth Date: Fri, 6 Jan 2017 02:06:34 +0100 Subject: [PATCH] added UI for thickness and linecap settings --- links/main.css | 6 +++++- scripts/dotgrid.js | 12 ++++++++++++ template.interface.html | 15 ++++++++++++++- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/links/main.css b/links/main.css index 84a15c6..5ef8ddc 100644 --- a/links/main.css +++ b/links/main.css @@ -8,4 +8,8 @@ body { background:#fff; padding:50px;} #dotgrid #cursor_to { width:6px; height:6px; background:white; margin-top:-5px; margin-left:-5px; position:absolute; z-index:25; border-radius:10px; left:-100px; border:2px solid black;} input { padding:2px 5px; border-radius:20px; margin:0px auto; display:none;} .vector { position:relative; z-index:900; } -pre { font-family:courier; font-size:11px; position:fixed; left:0px; bottom:20px;} \ No newline at end of file +pre { font-family:courier; font-size:11px; color:#000; position:fixed; bottom:20px;} +.reference { left:0; } +.settings { right:20px; text-align:right; } +.settings input { display:inline; background:#fff; width:4em; } +.settings select { display:inline; background:#fff; } \ No newline at end of file diff --git a/scripts/dotgrid.js b/scripts/dotgrid.js index 72d2472..e6b5d9e 100644 --- a/scripts/dotgrid.js +++ b/scripts/dotgrid.js @@ -227,4 +227,16 @@ function Dotgrid(width,height,grid_x,grid_y,block_x,block_y,thickness = 3,lineca y = parseInt(y/this.grid_height) * this.grid_height + (this.grid_height/2); return [parseInt(x),parseInt(y)]; } + + // Settings + + this.update_style = function(attribute, value) { + switch(attribute) { + case "strokeWidth": + vector_element.style.strokeWidth = value; + break; + case "strokeLinecap": + vector_element.style.strokeLinecap = value; + } + } } \ No newline at end of file diff --git a/template.interface.html b/template.interface.html index 281cecf..599499f 100644 --- a/template.interface.html +++ b/template.interface.html @@ -9,7 +9,8 @@ Dotgrid(Interface) - 
+    
+    
       q  CLEAR
       w  DELETE LAST
       e  EXPORT
@@ -23,6 +24,18 @@
       x  CIRCLE
       c  --
     

+    
+    
+      THICKNESS 
+      LINECAP 
+    

+