From afa6e6d070a0893376bf82c481eadc8e93c1ebdb Mon Sep 17 00:00:00 2001
From: Mohit Muthanna Cheppudira <mmuthanna@google.com>
Date: Fri, 18 May 2012 15:00:27 -0400
Subject: [PATCH] Some small fixes to sandbox.

---
 docs/sandbox.html  | 98 ++++++++++++++++++++++------------------------
 docs/tutorial.html |  3 +-
 2 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/docs/sandbox.html b/docs/sandbox.html
index 917ed6970d..ecc2e7fbb7 100644
--- a/docs/sandbox.html
+++ b/docs/sandbox.html
@@ -72,9 +72,8 @@
 
     div.egcode {
       font-family: Courier;
-      font-size: 14px;
+      font-size: 12px;
     }
-
   </style>
 
   <script>
@@ -130,61 +129,56 @@ <h1>The VexFlow Sandbox</h1>
   </div>
 
   <div class="content">
-    
+
 
     <h2>Have some fun!</h2>
 
     <div class="description sandbox">
-      With this Vexflow live editor, you can try out some code sniplets online.
+      Try out the VexFlow API in this live editor.
       <p/>
-      Start changing some code, and resulting vexflow will appear.
-      <br/>
       <div class="editor-error"><span class="text"></span></div>
       <p/>
       <div class="example sandbox" example="sandbox">
-        
-
-        <textarea id="sandbox" class="editor" style="width: 541px; height: 180px; ">
-  // Get the rendering context
-  var canvas = $("div.sandbox div.sandbox canvas")[0];
-
-  var renderer = new Vex.Flow.Renderer(canvas,
-    Vex.Flow.Renderer.Backends.CANVAS);
-  var ctx = renderer.getContext();
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");
-
-  // Create and draw the tablature stave
-  var tabstave = new Vex.Flow.TabStave(10, 0, 500);
-  tabstave.addTabGlyph();
-  tabstave.setContext(ctx).draw();
-
-  // Create some notes
-  var notes = [
-    // A single note
-    new Vex.Flow.TabNote({
-      positions: [{str: 3, fret: 7}],
-      duration: "q"}),
-
-    // A chord with the note on the 3rd string bent
-    new Vex.Flow.TabNote({
-      positions: [{str: 2, fret: 10},
-                  {str: 3, fret: 9}],
-      duration: "q"}).
-    addModifier(new Vex.Flow.Bend("Full"), 1),
-
-    // A single note with a harsh vibrato
-    new Vex.Flow.TabNote({
-      positions: [{str: 2, fret: 5}],
-      duration: "h"}).
-    addModifier(new Vex.Flow.Vibrato().setHarsh(true).setVibratoWidth(70), 0)
-  ];
-
-  Vex.Flow.Formatter.FormatAndDraw(ctx, tabstave, notes);
-        </textarea>
-        
+        <textarea id="sandbox" class="editor"
+                  style="width: 641px; height: 180px; ">
+// Get the rendering context
+var canvas = $("div.sandbox div.sandbox canvas")[0];
+
+var renderer = new Vex.Flow.Renderer(canvas,
+  Vex.Flow.Renderer.Backends.CANVAS);
+var ctx = renderer.getContext();
+ctx.clearRect(0, 0, canvas.width, canvas.height);
+ctx.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");
+
+// Create and draw the tablature stave
+var tabstave = new Vex.Flow.TabStave(10, 0, 500);
+tabstave.addTabGlyph();
+tabstave.setContext(ctx).draw();
+
+// Create some notes
+var notes = [
+  // A single note
+  new Vex.Flow.TabNote({
+    positions: [{str: 3, fret: 7}],
+    duration: "q"}),
+
+  // A chord with the note on the 3rd string bent
+  new Vex.Flow.TabNote({
+    positions: [{str: 2, fret: 10},
+                {str: 3, fret: 9}],
+    duration: "q"}).
+  addModifier(new Vex.Flow.Bend("Full"), 1),
+
+  // A single note with a harsh vibrato
+  new Vex.Flow.TabNote({
+    positions: [{str: 2, fret: 5}],
+    duration: "h"}).
+  addModifier(new Vex.Flow.Vibrato().setHarsh(true).setVibratoWidth(70), 0)
+];
+
+Vex.Flow.Formatter.FormatAndDraw(ctx, tabstave, notes);</textarea>
         <p/>
-        <canvas width=525 height=160></canvas>
+        <canvas width=625 height=160></canvas>
 
         <style>
         .editor {
@@ -212,7 +206,7 @@ <h2>Have some fun!</h2>
 
         function live_code() {
           var code = $("#sandbox").val();
-          
+
           try {
             eval(code);
             msg.html('').hide();
@@ -234,9 +228,9 @@ <h2>Have some fun!</h2>
       </div>
 
     <center>
-    <h2>For help, please read the tutorial</h2>
-      <p/>
-      <a href="tutorial.html">Tutorial</a><p/>
+      <h2>
+        Confused? Go read the <a href="tutorial.html">tutorial</a>.
+      </h2>
     </center>
   </div>
 </body>
diff --git a/docs/tutorial.html b/docs/tutorial.html
index 083d86ab3c..e4729991c0 100644
--- a/docs/tutorial.html
+++ b/docs/tutorial.html
@@ -709,7 +709,8 @@ <h2>Step 5: Guitar Tablature</h2>
 
     <center>
     <h2>Step N + 1: More coming soon...</h2>
-      Meanwhile, you can experiment with <a href="sandbox.html">Vexflow online</a>.
+    Meanwhile, go ahead and experiment in the
+      <a href="sandbox.html">Vexflow Sandbox</a>.
       <p/>
       <a href="http://0xfe.blogspot.com">The Blog</a><p/>
     </center>