wrote short tutorial

docs/report/index.html

@@ -98,6 +98,59 @@ <h3>Using</h3>
         <p>You can also give Curvey an input file:</p>
         <div class="code">$ python curvey.py file</div>
 
+        <h3>Tutorial</h3>
+
+        <p>This is a short tutorial on how to use the Curvey UI.</p>
+
+        <p>We first run Curvey:</p>
+        <div class="code">$ python curvey.py --ui</div>
+
+        <p>Now, hit "Render". You should see something like:</p>
+        <img class="full" src="resources/tutorial/2.png">
+
+        <p>Note the left text panel. It contains:</p>
+        <pre class="code">degree=3
+dt=0.2
+(1, 3)
+(2, 4)
+(6, 3)
+(5, 1)
+(2, 1)
+(0, 2)
+[0,0,0,1,3,4,4,4] </pre>
+        <p>Curvey has rendered the curve specified.</p>
+
+        <p>Press "Clear" to erase the canvas. Now, using your mouse, click on
+        the canvas to create a control point. Hit "Render". You should get an
+        error:</p>
+        <img class="full" src="resources/tutorial/3.png">
+
+        <p>The error states "Invalid curve specified.  Make sure you have the
+          right number of points for the degree and knot vector
+          specified." We will add more control points later.
+        </p>
+
+        <p><span class="important">Important</span> Curvey has two main methods
+        of inserting control points. The first is through the text box. The
+        second is by clicking on the canvas. When a control point is added via
+        clicking, the text box control points become irrelevant and are
+        ignored. Other information in the text box (e.g. dt, degree) are still
+        used, however. To use the text box control points, you must erase all
+        control points by hitting "Clear".</p> 
+
+        <p>Add a total of six control points by clicking on points on the
+        canvas. Hit "Render":</p>
+        <img class="full" src="resources/tutorial/4.png">
+
+        <p>You can render labels by clicking on the "Control point labels"
+        checkbox and hitting "Render". The labels show the control point order
+        and the control point's polar values:</p>
+        <img class="full" src="resources/tutorial/5.png">
+
+        <p><span class="important">Important</span> You can move a control point by right clicking on the control point
+        you want to move. Place it anywhere on the canvas. You can delete a
+        control point by double clicking on the control point.</p>
+
         <h3>Limitations and Known Bugs</h3>
 
         <p><b>Not working on OS X 10.6 using Python 2.7</b>. There are screwed up

docs/report/resources/style.css

@@ -14,6 +14,10 @@ h1 {
   font-size: 48px;
 }
 
+img.full {
+  width: 640px;
+}
+
 .section h2 {
   color: #fff;
   background: #333;
@@ -38,7 +42,7 @@ h1 {
 #subtitle {
 }
 
-div.code {
+pre.code, div.code {
   font-family: 'Bitstream Vera Sans Mono', Courier, monospace;
   color: #666;
   background: #ddd;
@@ -49,6 +53,17 @@ span.code {
   font-family: 'Bitstream Vera Sans Mono', Courier, monospace;
 }
 
+span.error {
+  background-color: #cccccc;
+}
+
+span.important {
+  background-color: yellow;
+  font-weight: bold;
+  padding: 1px 4px;
+  border: 1px solid black;
+}
+
 .formula {
   text-align: center;
 }