From fcefd5a257bed698b8cc0d30c3bbab761001120c Mon Sep 17 00:00:00 2001
From: Joost Nieuwenhuijse <joost@newhouse.nl>
Date: Thu, 16 Feb 2012 18:13:55 +0100
Subject: [PATCH] Added servo motor demo

---
 index.html     |   5 +-
 servodemo.html | 227 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 231 insertions(+), 1 deletion(-)
 create mode 100644 servodemo.html
diff --git a/index.html b/index.html
index 193446e..e76d696 100644
--- a/index.html
+++ b/index.html
@@ -120,7 +120,8 @@ Alt+drag zooms (by changing the distance between camera and model).
 <h2>Demos</h2>
 <ul>
 <li><a href="gearsdemo.html">Involute Gears</a></li>
-<li><a href="hookdemo.html">Parametric S hook</a></li>
+<li><a href="hookdemo.html">Parametric S hook</a>: shows how to extrude 2d paths</li>
+<li><a href="servodemo.html">Servo motor</a>: shows how to work with properties and connectors</li>
 </ul>
 <h2>License</h2>
 Copyright (c) 2012 Joost Nieuwenhuijse.
@@ -329,6 +330,7 @@ cube.properties.otherCorners = [
 cube.properties.myProperties = new CSG.Properties();
 cube.properties.myProperties.someProperty = new CSG.Vector3D([-1, -1, -1]);
 </pre>
+For an example see the <a href="servodemo.html">Servo motor</a> demo.
 
 <h2>Connectors</h2>
 The CSG.Connector class is intended to facilitate 
@@ -398,6 +400,7 @@ cube2 = cube2.transform(matrix);
 var result = cube2.union(cube1);
 
 </pre>
+For a more complete example see the <a href="servodemo.html">Servo motor</a> demo.
 
 <h2>Determining the bounds of an object</h2>
 The getBounds() function can be used to retrieve the bounding box of an object.
diff --git a/servodemo.html b/servodemo.html
new file mode 100644
index 0000000..876745e
--- /dev/null
+++ b/servodemo.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+
+<html><head>
+  <script src="lightgl.js"></script>
+  <script src="csg.js"></script>
+  <script src="openjscad.js"></script>
+  <style>
+
+body {
+  font: 14px/20px 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  max-width: 820px;
+  margin: 0 auto;
+  padding: 10px;
+}
+
+pre, code, textarea {
+  font: 12px/20px Monaco, monospace;
+  border: 1px solid #CCC;
+  border-radius: 3px;
+  background: #F9F9F9;
+  padding: 0 3px;
+  color: #555;
+}
+pre, textarea {
+  padding: 10px;
+  width: 100%;
+}
+textarea {
+  height: 200px;
+}
+textarea:focus {
+  outline: none;
+}
+
+canvas { cursor: move; }
+
+  </style>
+<link rel="stylesheet" href="openjscad.css" type="text/css">
+
+<script>
+
+var gProcessor=null;
+
+// Show all exceptions to the user:
+OpenJsCad.AlertUserOfUncaughtExceptions();
+
+function onload()
+{
+  gProcessor = new OpenJsCad.Processor(document.getElementById("viewer"));
+  updateSolid();
+}
+
+function updateSolid()
+{
+  gProcessor.setJsCad(document.getElementById('code').value);
+}
+</script>
+<title>OpenJsCad demo: servo motor</title>  
+</head>
+<body onload="onload()">
+  <h1>OpenJsCad demo: servo motor</h1>
+<div id="viewer"></div>
+  <h2>Source code</h2>
+Below is the OpenJsCad script for this demo. To build your own models, create a .jscad script
+and use the <a href="processfile.html"><b>OpenJsCad parser</b></a>. For more information see the
+<a href="index.html">OpenJsCad documentation</a>. 
+<br><br> 
+<textarea id="code" style="height: 500px">
+// This demo intends to show how to use properties and connectors.
+// The servoMotor() function constructs the shape of a standard servo
+// It also defines a property for the cutout shape, and a connector property
+// which can be used to correctly attach the motor to a surface.
+//
+// By using connectors, we don't need to know the actual orientation of each
+// object. Instead we just attach the two objects by attaching their connectors.
+//
+// The cutout shape is automatically transformed with every transformation of
+// the servo. We can simply subtract it from an object to make space for the servo
+// motor. 
+function main(params)
+{
+  // the servo motor solid:
+  var servo = servoMotor();  
+  
+  // the plate:
+  var plate = CSG.cube({radius: [40,40,4]});
+  
+  // Define a Connector on the plate, at the place where we want to attach the servo:
+  plate.properties.servoConnector = new CSG.Connector(
+    [0, 0, 4],    // point
+    [0, 0, 1],    // axis: pointing upwards
+    [2.5, 1.1, 0] // normal: use some random vector in the z plane
+  );
+
+  // Do some random rotations:
+  plate = plate.rotateX(25);
+  plate = plate.rotateZ(10);
+  // now we really don't know the orientation of the plane anymore!
+
+  // Still we can perfectly align the servo motor to the plane at the servoConnector
+  // point that we decided on earlier: 
+  servo = servo.connectTo(
+    servo.properties.servomotor.surfaceConnector,   // the servo's pre defined Connector
+    plate.properties.servoConnector,                // the connector on the surface
+    false,                                          // we don't want to mirror; the Connector's axes should point in the same direction 
+    0                                               // normalrotation; we could use it to rotate the servo in the plane
+  );  
+  
+  // Construct the result; use the parameters set by the end user:
+  var result = new CSG();
+  if(params.cutout != 0) plate = plate.subtract(servo.properties.servomotor.cutout);
+  if(params.showplate != 0) result = result.union(plate);
+  if(params.showservo != 0) result = result.union(servo);
+  if(params.showcutout != 0) result = result.union(servo.properties.servomotor.cutout.setColor(0,0.8,0));
+
+  return result;
+}
+
+// Here we define the user editable parameters: 
+function getParameterDefinitions() {
+  return [
+    { name: 'showservo', caption: 'Show servo:', type: 'choice', values: [0, 1], default: 1, captions: ["No", "Yes"]},
+    { name: 'showplate', caption: 'Show plate:', type: 'choice', values: [0, 1], default: 1, captions: ["No", "Yes"]},
+    { name: 'showcutout', caption: 'Show cutout:', type: 'choice', values: [0, 1], default: 0, captions: ["No", "Yes"]},
+    { name: 'cutout', caption: 'Subtract the servo cutout shape from the plate:', type: 'choice', values: [0, 1], default: 1, captions: ["No", "Yes"]},
+  ];
+}
+
+// The servoMotor() function constructs the shape of a standard '3003' servo 
+// Returns a CSG solid. The solid has the following additional properties:
+//    .properties.servomotor.cutout: a CSG solid that can be used to create a cutout for the servo motor (including screw holes)
+//    .properties.servomotor.surfaceConnector: a CSG.Connector that can be used to attach the servo motor to a surface
+function servoMotor()
+{
+  var width = 20;
+  var length = 40.5;
+  var h1 = 26.5;
+  var h2 = 29;
+  var h4 = 35.9;
+  var l1 = 55.4;
+  var w1 = 17.8;  
+  var holeradius = 2.1;
+  var holex1 = 2 * 2.54;
+  var holey1 = 9.5 * 2.54;
+  var cutoutmargin = 1;  
+  var shaftradius = 3;
+  var shafty = 9.25;
+  var shafttop = 43; 
+  var cyl2radius = 7;
+  var cyl2height = 2;
+  
+  var resolution = 16; // for all circular objects
+  
+  // result: this is the solid in which we will store the servomotor
+  var result = CSG.cube({radius:[width/2, length/2, h4/2]});
+  
+  // cutout: this is the solid for the cutout. It is never rendered directly,
+  // but it will be returned as a property of the resulting solid.
+  // it can be used to cutout the shape of the servo motor and screw holes
+  // from another solid
+  var cutout = CSG.cube({radius:[width/2+cutoutmargin, length/2+cutoutmargin, h4/2+cutoutmargin]}); 
+
+  // add a 'bottomface' property. Since the cube already has predifined connectors at each face,
+  // we can just copy the 5th:
+  result.properties.servomotor = new CSG.Properties();
+  result.properties.servomotor.bottomface = result.properties.cube.facecenters[5];
+
+  // get the z coordinate of the bottom face:
+  var bottomz = result.properties.servomotor.bottomface.point.z;
+  
+  // the tabs at the end containing the screw holes:
+  var cube2 = CSG.cube({radius:[w1/2, l1/2, (h2-h1)/2]});
+  cube2 = cube2.translate([0, 0, (h2-h1)/2 + bottomz + h1]);
+  result = result.union(cube2);
+  
+  // create the cylinders for cutting out the screw holes:
+  for(var hole = 0; hole < 4; hole++)
+  {
+    var xoffset = (hole & 1)? holex1 : -holex1;
+    var yoffset = (hole & 2)? holey1 : -holey1;
+    var cylstart = new CSG.Vector3D([xoffset, yoffset, bottomz+h2]); 
+    var cylend = new CSG.Vector3D([xoffset, yoffset, bottomz]); 
+    var cutoutcylinder = CSG.cylinder({start: cylstart, end: cylend, radius: holeradius, resolution: resolution});
+    
+    // create the screw hole in the tabs:
+    result = result.subtract(cutoutcylinder);
+
+    // And also add the cutout cylinder to the cutout shape:
+    cutout = cutout.union(cutoutcylinder);
+  }
+  
+  // cylinder at top:
+  var p1 = new CSG.Vector3D([0, shafty, bottomz+h4]);
+  p2 = p1.plus(new CSG.Vector3D([0, 0, cyl2height]));
+  var cyl = CSG.cylinder({start: p1, end: p2, radius: cyl2radius, resolution: resolution});
+  result = result.union(cyl);
+  
+  // make the entire motor grey:
+  result = result.setColor(0.2,0.2,0.2);
+  
+  // create the shaft:
+  p1 = new CSG.Vector3D([0, shafty, bottomz+h4]);
+  p2 = p1.plus(new CSG.Vector3D([0, 0, cyl2height]));
+  var shaft = CSG.cylinder({start: [0, shafty, bottomz+h4], end: [0, shafty, bottomz+shafttop], radius: shaftradius, resolution: resolution});
+  shaft = shaft.setColor(1,1,1);
+  result = result.union(shaft);
+  
+  // add the cutout solid to the properties:
+  result.properties.servomotor.cutout = cutout;
+  
+  // Add a Connector to facilitate proper alignment of the servo motor to a surface
+  //   The connector's point is at the x/y center of the box, in the bottom plane of the tabs 
+  //   The connector's axis points towards the top of the box
+  //   The connector's normal points towards one of the tabs at the side
+  result.properties.servomotor.surfaceConnector = new CSG.Connector(
+    [0, 0, bottomz+h1],    // point
+    [0, 0, 1],             // axis
+    [0, 1, 0]              // normal
+  );
+  
+  return result;
+}
+</textarea><br>
+<input type="submit" value="Update" onclick="updateSolid(); return false;">
+<br><br>
+</body>
+</html>
\ No newline at end of file
