Updated weight constraints and pan

AntixK · May 1, 2019 · 9e85b57 · 9e85b57
1 parent 448f5e3
commit 9e85b57
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 25 deletions.
diff --git a/main.js b/main.js
@@ -17,7 +17,7 @@ function createWindow() {
     // Create the browser window.
     mainWindow = new BrowserWindow({
         width: 1050,
-        height: 520,
+        height: 530,
         // center: true,
         // frame: false, 
         resizable: false,

diff --git a/public/curves.js b/public/curves.js
@@ -2,10 +2,12 @@ function draw_lines()
 {
   stroke(line_color);
   strokeWeight(3);
+  drawingContext.setLineDash([15, 15]);
   for(let i =1; i < control_points.length; ++i)
   {
     line(control_points[i-1].x, control_points[i-1].y, control_points[i].x, control_points[i].y);
   }
+  drawingContext.setLineDash([]);
 }
 
 function draw_Catmull_Rom()

diff --git a/public/index.html b/public/index.html
@@ -172,9 +172,9 @@
     <!-- <a href="#" onmouseover = "this.style.color = '#000'" onmouseout  = "this.style.color = '#f00'">Hi</a> -->
     <p>
       <div class="tab",id="tabs">
-          <button class="tablinks active" onclick="opentab(event, 'Catmull Rom Spline')" id="defaultOpen">Catmull</button>
-          <button class="tablinks" onclick="opentab(event, 'BSpline')">BSpline</button>
-          <button class="tablinks" onclick="opentab(event, 'NURBS')">NURBS</button>
+          <button title="Design Catmull-Rom curve" class="tablinks active" onclick="opentab(event, 'Catmull Rom Spline')" id="defaultOpen">Catmull</button>
+          <button title="Design BSpline curve" class="tablinks" onclick="opentab(event, 'BSpline')">BSpline</button>
+          <button title="Design NURBS curve" class="tablinks" onclick="opentab(event, 'NURBS')">NURBS</button>
       </div>
 
       <div id="tab_highlight"></div>
@@ -184,10 +184,10 @@
       </div>
 
       <input type="file" name="my_file" id="my-file">
-      <input type="button" class="mybutton" onclick="import_json()" value="Import JSON" id="importjson">
+      <input title="Import curve data from a JSON file." type="button" class="mybutton" onclick="import_json()" value="Import JSON" id="importjson">
 
-      <button class = "mybutton" id='exportjson'>Export JSON</button>
-      <button class = "mybutton" id='reset'>Reset</button>
+      <button title="Exports all the curve data as a JSON file." class = "mybutton" id='exportjson'>Export JSON</button>
+      <button title="Resets the canvas." class = "mybutton" id='reset'>Reset</button>
       <input type="range" min="70" max="200" value="100"  step='1' class="myslider" id="zoomslider">
     </p>
 

diff --git a/public/mouse_events.js b/public/mouse_events.js
@@ -18,8 +18,13 @@ function click_point()
     {
       locked = false;
       pan_lock = true;
+
+      pan_offset_x = panx;
+      pan_offset_y = pany;
     }
   }
+
+
 
 
 }
@@ -32,10 +37,10 @@ function mouseDragged()
     update_text_field();
   }
 
-  else if((mouseX)/zoom - panx < WIDTH && (mouseY )/zoom - pany < HEIGHT)
-  {
-    panx = (mouseX/zoom - WIDTH/2*zoom);
-    pany = (mouseY/zoom - HEIGHT/2*zoom);
+  else if((mouseX)/zoom - panx < WIDTH -panx && (mouseY )/zoom - pany < HEIGHT -pany)
+  { 
+    panx = (mouseX/zoom - pan_offset_x - WIDTH/2*zoom);
+    pany = (mouseY/zoom - pan_offset_y - HEIGHT/2*zoom);    
   }
 
 }
@@ -115,4 +120,13 @@ function myFunction() {
   //var x = elmnt.scrollLeft;
   //var y = elmnt.scrollTop;
   //document.getElementById ("demo").innerHTML = "Horizontally: " + x + "px<br>Vertically: " + y + "px";
+}
+
+function update_mouse_pos()
+{
+  if((mouseX)/zoom - panx < WIDTH -panx && (mouseY )/zoom - pany < HEIGHT -pany)
+  {
+    mouse_pos.html("("+ ((mouseX)/zoom - panx).toFixed(2) + ","+ ((mouseY )/zoom - pany).toFixed(2) +")");
+  }
+
 }
diff --git a/public/sketch.js b/public/sketch.js
@@ -31,6 +31,8 @@ let num_font;
 let NUM_X = WIDTH+20;
 let NUM_Y = 120;
 
+var mouse_pos;
+
 
 //Interactivity
 let locked = false;
@@ -97,6 +99,7 @@ function setup() {
   canvas.mouseReleased(release_point);
   canvas.doubleClicked(create_point);
   canvas.mouseWheel(scroll_zoom);
+
 
   tab_content = select("#myDIV");
   tab_content.position(NUM_X, NUM_Y);
@@ -118,6 +121,12 @@ function setup() {
   w_text.style('font-size', '20px');
   w_text.style('font-family', button_font.font.names.postScriptName["en"]);
   w_text.style('color', 'white');
+
+  mouse_pos = createP("");
+  mouse_pos.position(WIDTH - 125- text_offset_x,HEIGHT + text_offset_y);
+  mouse_pos.style('font-size', '18px');
+  mouse_pos.style('font-family', num_font.font.names.postScriptName["en"]);
+  mouse_pos.style('color', 'white');
 
   x_mark = createElement('p','\u2718');
   x_mark.parent("content");
@@ -156,8 +165,7 @@ function setup() {
   reset_button.position(WIDTH+20,HEIGHT-120);
   reset_button.mousePressed(reset_canvas);
 
-  translate(WIDTH/2, HEIGHT/2);
-
+  //translate(WIDTH/2, HEIGHT/2);  
 
 }
 
@@ -172,6 +180,7 @@ function draw()
   //   pan_offset_y = mouseY - pany;
 
   // }
+
   translate(panx, pany);
 
   draw_lines();
@@ -190,8 +199,8 @@ function draw()
   }
 
   draw_curve()
-  create_grid();
-
+  create_grid(); 
+  update_mouse_pos();
 
 }
 
@@ -329,7 +338,7 @@ function update_zoom()
 
 function create_grid()
 {
-  let w = 20*zoom;
+  let w = 20/zoom;
   stroke(255);
   strokeWeight(0.2);
   for(let x=-(WIDTH )/zoom+ panx; x<(WIDTH)/zoom - panx; x+= w)

diff --git a/public/text_field.js b/public/text_field.js
@@ -2,29 +2,34 @@ class TextField
 {
     constructor(posx, posy, index)
     {        
-        this.textfield_x = createInput('','Number');
+        this.textfield_x = createInput('','Number'); 
+        this.textfield_x.attribute('step', '1.00');       
         this.textfield_x.style('width','70px');
         this.textfield_x.style('height','20px');
         this.textfield_x.style('font-family', num_font.font.names.postScriptName["en"]);
         this.textfield_x.parent('content');
         this.textfield_x.position(posx, posy);
-        this.textfield_x.changed(update_control_pts);
+        this.textfield_x.input(update_control_pts);
 
         this.textfield_y = createInput('','Number');
+        this.textfield_y.attribute('step', '1.00');
         this.textfield_y.style('width','70px');
         this.textfield_y.style('height','20px');
         this.textfield_y.style('font-family', num_font.font.names.postScriptName["en"]);
         this.textfield_y.parent('content');
         this.textfield_y.position(posx+80, posy);
-        this.textfield_y.changed(update_control_pts);
+        this.textfield_y.input(update_control_pts);
 
         this.textfield_w = createInput('','Number');
+        this.textfield_w.attribute('step', '0.01');
+        this.textfield_w.attribute('min', '0.0');
+        this.textfield_w.attribute('max', '1.0');
         this.textfield_w.style('width','70px');
         this.textfield_w.style('height','20px');
         this.textfield_w.style('font-family', num_font.font.names.postScriptName["en"]);
         this.textfield_w.parent('content');
         this.textfield_w.position(posx+160, posy);
-        this.textfield_w.changed(update_control_pts);
+        this.textfield_w.input(update_control_pts);
         this.set_w_val(random(1).toFixed(2));
 
         this.pt_ind = createElement('p',"num");
@@ -73,11 +78,10 @@ class TextField
 
     remove_field()
     {
-        this.textfield_x.style('opacity','0');
-        this.textfield_y.style('opacity','0');
-        this.textfield_w.style('opacity','0');
-
-        this.pt_ind.html('');
+        this.textfield_x.remove();
+        this.textfield_y.remove();
+        this.textfield_w.remove();
+        this.pt_ind.remove();
     }
 
     highlight_ind()