launch of 2.0!

Philip Guo · Philip Guo · commit c1d5dcedd451 · 2011-09-23T01:13:44.000-07:00
diff --git a/TODO b/TODO
@@ -141,3 +141,9 @@ line of code immediately below each annotation.
   perhaps deploy online on WebFaction, since they offer both Python 2.X
   and Python 3.X on their servers.
 
+---
+2011-09-22
+
+- Make the 'Edit code' window display in the same place as the read-only
+  code display column, in order to prevent abrupt jumping.
+
diff --git a/edu-python.css b/edu-python.css
@@ -91,7 +91,7 @@ span {
 
 #pyInputPane {
   text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 35px;
 }
 
 table#stackHeapTable td {
@@ -440,7 +440,9 @@ div.globalFrame {
   background-color: #ffffff;
   margin-bottom: 15px;
   padding: 2px;
-  padding-left: 8px;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-bottom: 4px;
   font-size: 11pt;
 }
 
@@ -470,11 +472,23 @@ div.inactiveStackFrameHeader {
 td.stackFrameVar {
   text-align: right;
   padding-right: 8px;
-  min-width: 120px; /* to prevent excess jittering as new variables are added*/
+  padding-top: 3px;
+  padding-bottom: 3px;
+  min-width: 130px; /* to prevent excess jittering as new variables are added*/
 }
 
 td.stackFrameValue {
   text-align: left;
+  border-bottom: 1px solid #aaaaaa;
+  border-left: 1px solid #aaaaaa;
+
+  padding-top: 3px;
+  padding-left: 3px;
+  padding-bottom: 3px;
+}
+
+.stackFrameVarTable tr {
+
 }
 
 div.stackFrame .stackFrameVarTable {
diff --git a/edu-python.js b/edu-python.js
@@ -153,6 +153,9 @@ function highlightCodeLine(curLine, visitedLinesSet, hasError, isTerminated) {
 
 // relies on curTrace and curInstr globals
 function updateOutput() {
+  // update based on experimental checkbox ...
+  useJsPlumbRendering = $("#useJsPlumbCheckbox").prop("checked");
+
   var curEntry = curTrace[curInstr];
   var hasError = false;
 
@@ -388,10 +391,20 @@ function renderDataStructuresVersion1(curEntry, vizDiv) {
 
 // The "2.0" version of renderDataStructures, which renders variables in
 // a stack and values in a separate heap, with data structure aliasing
-// explicitly represented via line connectors.
+// explicitly represented via line connectors (thanks to jsPlumb lib).
 //
 // This version was originally created in September 2011
 function renderDataStructuresVersion2(curEntry, vizDiv) {
+
+  // before we wipe out the old state of the visualization, CLEAR all
+  // the click listeners first
+  $(".stackFrameHeader").unbind();
+
+  // VERY VERY IMPORTANT --- and reset ALL jsPlumb state to prevent
+  // weird mis-behavior!!!
+  jsPlumb.reset();
+
+
   $(vizDiv).html(''); // CLEAR IT!
 
   // create a tabular layout for stack and heap side-by-side
@@ -567,6 +580,7 @@ function renderDataStructuresVersion2(curEntry, vizDiv) {
   // from bottom to top, so that we can hopefully prevent objects from
   // jumping around
 
+
   orderedGlobals.reverse(); // so that we can iterate backwards
 
   $.each(orderedGlobals, function(i, varname) {
@@ -648,6 +662,7 @@ function renderDataStructuresVersion2(curEntry, vizDiv) {
     var enclosingStackFrameID = enclosingStackFrame.attr('id');
 
     var allConnections = jsPlumb.getConnections();
+    //console.log('allConnections: ' + allConnections);
     for (var i = 0; i < allConnections.length; i++) {
       var c = allConnections[i];
 
@@ -686,7 +701,7 @@ function renderDataStructuresVersion2(curEntry, vizDiv) {
 
   // 'click' on the top-most stack frame if available,
   // or on "Global variables" otherwise
-  if (curEntry.stack_locals != undefined && curEntry.stack_locals.length) {
+  if (curEntry.stack_locals != undefined && curEntry.stack_locals.length > 0) {
     $('#stack_header0').trigger('click');
   }
   else {
@@ -1008,6 +1023,7 @@ $(document).ready(function() {
   $("#editCodeLink").click(function() {
     $("#pyInputPane").show();
     $("#pyInputPane").css('border-bottom', '2px dashed #bbbbbb');
+    updateOutput();
     return false; // to prevent page reload
   });
 
@@ -1134,20 +1150,44 @@ $(document).ready(function() {
     return false;
   });
 
-  if (useJsPlumbRendering) {
-    // set some sensible defaults
-    jsPlumb.Defaults.Endpoint = ["Dot", {radius:3}];
-    //jsPlumb.Defaults.Endpoint = ["Rectangle", {width:3, height:3}];
-    jsPlumb.Defaults.EndpointStyle = {fillStyle: lightGray};
-    jsPlumb.Defaults.Anchors = ["RightMiddle", "LeftMiddle"];
-    jsPlumb.Defaults.Connector = [ "Bezier", { curviness:15 }]; /* too much 'curviness' causes lines to run together */
-    jsPlumb.Defaults.PaintStyle = {lineWidth:1, strokeStyle: lightGray};
-
-    jsPlumb.Defaults.EndpointHoverStyle = {fillStyle: pinkish};
-    jsPlumb.Defaults.HoverPaintStyle = {lineWidth:2, strokeStyle: pinkish};
-  }
+
+  // set some sensible jsPlumb defaults
+  jsPlumb.Defaults.Endpoint = ["Dot", {radius:3}];
+  //jsPlumb.Defaults.Endpoint = ["Rectangle", {width:3, height:3}];
+  jsPlumb.Defaults.EndpointStyle = {fillStyle: lightGray};
+  jsPlumb.Defaults.Anchors = ["RightMiddle", "LeftMiddle"];
+  jsPlumb.Defaults.Connector = [ "Bezier", { curviness:15 }]; /* too much 'curviness' causes lines to run together */
+  jsPlumb.Defaults.PaintStyle = {lineWidth:1, strokeStyle: lightGray};
+
+  jsPlumb.Defaults.EndpointHoverStyle = {fillStyle: pinkish};
+  jsPlumb.Defaults.HoverPaintStyle = {lineWidth:2, strokeStyle: pinkish};
+
 
   // select an example on start-up:
   $("#tutorialExampleLink").trigger('click');
+
+
+  // disable controls initially ...
+  $("#vcrControls #jmpFirstInstr").attr("disabled", true);
+  $("#vcrControls #jmpStepBack").attr("disabled", true);
+  $("#vcrControls #jmpStepFwd").attr("disabled", true);
+  $("#vcrControls #jmpLastInstr").attr("disabled", true);
+
+
+  // set keyboard event listeners ...
+  $(document).keydown(function(k) {
+    if (k.keyCode == 37) { // left arrow
+      if (!$("#vcrControls #jmpStepBack").attr("disabled")) {
+        $("#jmpStepBack").trigger('click');
+        k.preventDefault(); // don't horizontally scroll the display
+      }
+    }
+    else if (k.keyCode == 39) { // right arrow
+      if (!$("#vcrControls #jmpStepFwd").attr("disabled")) {
+        $("#jmpStepFwd").trigger('click');
+        k.preventDefault(); // don't horizontally scroll the display
+      }
+    }
+  });
 });
 
diff --git a/example-code/towers_of_hanoi.txt b/example-code/towers_of_hanoi.txt
@@ -8,7 +8,7 @@ def TowerOfHanoi(n, a, b, tmp):
     b.append(a.pop())
     TowerOfHanoi(n-1, tmp, b, a)
       
-stack1 = [5,4,3,2,1]
+stack1 = [4,3,2,1]
 stack2 = []
 stack3 = []
       
diff --git a/index.html b/index.html
@@ -68,7 +68,13 @@
 
 <textarea id="pyInput" cols="55" rows="20" wrap="off"></textarea>
 
-<p><button id="executeBtn" class="bigBtn" type="button">Visualize execution</button></p>
+<p>
+
+<button id="executeBtn" class="bigBtn" type="button">Visualize execution</button>
+
+<br/><br/><input type="checkbox" id="useJsPlumbCheckbox"/> Draw connector diagrams (experimental)
+
+</p>
 
 <p style="margin-top: 25px;">Try these small examples:<br/>
 
