Skip to content

Commit d86fa76

Browse files
author
Philip Guo
committed
add a new verticalStack parameter option to stack the code and visualization
 atop one another, along with codeDivHeight and codeDivWidth options to adjust the height and width, respectively, of the code display div
1 parent 4e66a22 commit d86fa76

3 files changed

Lines changed: 97 additions & 64 deletions

File tree

‎v3/css/pytutor.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,19 @@ div.ExecutionVisualizer #dataViz {
5555
margin-left: 30px;
5656
}
5757

58+
div.ExecutionVisualizer div#codeDisplayDiv {
59+
width: 550px;
60+
}
61+
5862
div.ExecutionVisualizer div#pyCodeOutputDiv {
5963
max-width: 550px;
6064
max-height: 450px;
6165
/*max-height: 620px;*/
6266
overflow: auto;
6367
/*margin-bottom: 4px;*/
68+
69+
margin-left: auto;
70+
margin-right: auto;
6471
}
6572

6673
div.ExecutionVisualizer table#pyCodeOutput {
@@ -126,7 +133,7 @@ div.ExecutionVisualizer div#editCodeLinkDiv {
126133
margin-top: 12px;
127134
margin-bottom: 4px;
128135
*/
129-
margin: 6px auto;
136+
margin: 8px auto;
130137
}
131138

132139
div.ExecutionVisualizer #errorOutput {
@@ -141,7 +148,7 @@ div.ExecutionVisualizer #errorOutput {
141148

142149
div.ExecutionVisualizer #vcrControls {
143150
margin: 15px auto;
144-
width: 100%;
151+
/*width: 100%;*/
145152
text-align: center;
146153
}
147154

@@ -465,6 +472,9 @@ div.ExecutionVisualizer #executionSlider {
465472
width: 500px;
466473
margin-top: 15px;
467474
margin-bottom: 5px;
475+
476+
margin-left: auto;
477+
margin-right: auto;
468478
}
469479

470480
div.ExecutionVisualizer #executionSliderCaption {

‎v3/embedding-demo.js‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎v3/js/pytutor.js‎

Lines changed: 79 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,16 @@ var curVisualizerID = 1; // global to uniquely identify each ExecutionVisualizer
6868
// params contains optional parameters, such as:
6969
// jumpToEnd - if non-null, jump to the very end of execution
7070
// startingInstruction - the (zero-indexed) execution point to display upon rendering
71-
// hideOutput - hide "Program output" and "Generate URL" displays
72-
// codeDivHeight - maximum height of #pyCodeOutputDiv (in pixels)
71+
// hideOutput - hide "Program output" display
72+
// codeDivHeight - maximum height of #pyCodeOutputDiv (in integer pixels)
73+
// codeDivWidth - maximum width of #pyCodeOutputDiv (in integer pixels)
7374
// editCodeBaseURL - the base URL to visit when the user clicks 'Edit code'
7475
// embeddedMode - make the widget narrower horizontally and disable breakpoints
7576
// updateOutputCallback - function to call (with 'this' as parameter)
7677
// whenever this.updateOutput() is called
7778
// (BEFORE rendering the output display)
79+
// verticalStack - if true, then stack code display ON TOP of visualization
80+
// (else place side-by-side)
7881
function ExecutionVisualizer(domRootID, dat, params) {
7982
this.curInputCode = dat.code.rtrim(); // kill trailing spaces
8083
this.curTrace = dat.trace;
@@ -90,6 +93,9 @@ function ExecutionVisualizer(domRootID, dat, params) {
9093
this.curInstr = 0;
9194

9295
this.params = params;
96+
if (!this.params) {
97+
this.params = {}; // make it an empty object by default
98+
}
9399

94100
// needs to be unique!
95101
this.visualizerID = curVisualizerID;
@@ -170,54 +176,56 @@ ExecutionVisualizer.prototype.render = function() {
170176

171177
var myViz = this; // to prevent confusion of 'this' inside of nested functions
172178

173-
// TODO: make less gross!
174-
this.domRoot.html(
175-
'<table border="0" class="visualizer">\
176-
<tr>\
177-
<td valign="top" id="left_pane">\
178-
<center>\
179-
<div id="pyCodeOutputDiv"/>\
180-
<div id="editCodeLinkDiv">\
181-
<a id="editBtn">Edit code</a>\
182-
</div>\
183-
<div id="executionSlider"/>\
184-
<div id="vcrControls">\
185-
<button id="jmpFirstInstr", type="button">&lt;&lt; First</button>\
186-
<button id="jmpStepBack", type="button">&lt; Back</button>\
187-
<span id="curInstr">Step ? of ?</span>\
188-
<button id="jmpStepFwd", type="button">Forward &gt;</button>\
189-
<button id="jmpLastInstr", type="button">Last &gt;&gt;</button>\
190-
</div>\
191-
<div id="errorOutput"/>\
192-
</center>\
193-
<div id="legendDiv"/>\
194-
<div id="progOutputs">\
195-
Program output:<br/>\
196-
<textarea id="pyStdout" cols="50" rows="13" wrap="off" readonly></textarea>\
197-
</div>\
198-
</td>\
199-
<td valign="top">\
200-
<div id="dataViz">\
201-
<table id="stackHeapTable">\
202-
<tr>\
203-
<td id="stack_td">\
204-
<div id="globals_area">\
205-
<div id="stackHeader">Frames</div>\
206-
</div>\
207-
<div id="stack">\
208-
</div>\
209-
</td>\
210-
<td id="heap_td">\
211-
<div id="heap">\
212-
<div id="heapHeader">Objects</div>\
213-
</div>\
214-
</td>\
215-
</tr>\
216-
</table>\
217-
</div>\
218-
</td>\
219-
</tr>\
220-
</table>');
179+
var codeDisplayHTML =
180+
'<div id="codeDisplayDiv">\
181+
<div id="pyCodeOutputDiv"/>\
182+
<div id="editCodeLinkDiv"><a id="editBtn">Edit code</a></div>\
183+
<div id="executionSlider"/>\
184+
<div id="vcrControls">\
185+
<button id="jmpFirstInstr", type="button">&lt;&lt; First</button>\
186+
<button id="jmpStepBack", type="button">&lt; Back</button>\
187+
<span id="curInstr">Step ? of ?</span>\
188+
<button id="jmpStepFwd", type="button">Forward &gt;</button>\
189+
<button id="jmpLastInstr", type="button">Last &gt;&gt;</button>\
190+
</div>\
191+
<div id="errorOutput"/>\
192+
<div id="legendDiv"/>\
193+
<div id="progOutputs">\
194+
Program output:<br/>\
195+
<textarea id="pyStdout" cols="50" rows="10" wrap="off" readonly></textarea>\
196+
</div>\
197+
</div>';
198+
199+
var codeVizHTML =
200+
'<div id="dataViz">\
201+
<table id="stackHeapTable">\
202+
<tr>\
203+
<td id="stack_td">\
204+
<div id="globals_area">\
205+
<div id="stackHeader">Frames</div>\
206+
</div>\
207+
<div id="stack"></div>\
208+
</td>\
209+
<td id="heap_td">\
210+
<div id="heap">\
211+
<div id="heapHeader">Objects</div>\
212+
</div>\
213+
</td>\
214+
</tr>\
215+
</table>\
216+
</div>';
217+
218+
219+
if (this.params.verticalStack) {
220+
this.domRoot.html('<table border="0" class="visualizer"><tr><td valign="top">' +
221+
codeDisplayHTML + '</td></tr><tr><td valign="top">' +
222+
codeVizHTML + '</td></tr></table>');
223+
}
224+
else {
225+
this.domRoot.html('<table border="0" class="visualizer"><tr><td valign="top">' +
226+
codeDisplayHTML + '</td><td valign="top">' +
227+
codeVizHTML + '</td></tr></table>');
228+
}
221229

222230

223231
this.domRoot.find('#legendDiv')
@@ -250,16 +258,30 @@ ExecutionVisualizer.prototype.render = function() {
250258
if (this.params.embeddedMode) {
251259
this.params.hideOutput = true; // put this before hideOutput handler
252260

253-
this.domRoot.find('#executionSlider')
254-
.css('width', '330px');
261+
this.params.codeDivWidth = 350;
262+
this.params.codeDivHeight = 400;
263+
}
255264

265+
266+
// not enough room for these extra buttons ...
267+
if (this.params.codeDivWidth &&
268+
this.params.codeDivWidth < 470) {
256269
this.domRoot.find('#jmpFirstInstr').hide();
257270
this.domRoot.find('#jmpLastInstr').hide();
271+
}
258272

259-
this.domRoot.find('#pyCodeOutputDiv')
260-
.css('max-width', '350px')
261-
.css('max-height', '400px');
262273

274+
if (this.params.codeDivWidth) {
275+
this.domRoot.find('#pyCodeOutputDiv,#codeDisplayDiv,#pyStdout')
276+
.css('max-width', this.params.codeDivWidth + 'px');
277+
278+
this.domRoot.find('#executionSlider')
279+
.css('width', (this.params.codeDivWidth - 20) + 'px');
280+
}
281+
282+
if (this.params.codeDivHeight) {
283+
this.domRoot.find('#pyCodeOutputDiv')
284+
.css('max-height', this.params.codeDivHeight + 'px');
263285
}
264286

265287

@@ -271,12 +293,7 @@ ExecutionVisualizer.prototype.render = function() {
271293
+ myViz.generateID('global_table') + '"></table></div>');
272294

273295

274-
if (this.params && this.params.codeDivHeight) {
275-
this.domRoot.find('#pyCodeOutputDiv').css('max-height', this.params.codeDivHeight);
276-
}
277-
278-
279-
if (this.params && this.params.hideOutput) {
296+
if (this.params.hideOutput) {
280297
this.domRoot.find('#progOutputs').hide();
281298
}
282299

@@ -341,7 +358,7 @@ ExecutionVisualizer.prototype.render = function() {
341358
});
342359

343360

344-
if (this.params && this.params.startingInstruction) {
361+
if (this.params.startingInstruction) {
345362
assert(0 <= this.params.startingInstruction &&
346363
this.params.startingInstruction < this.curTrace.length);
347364
this.curInstr = this.params.startingInstruction;

0 commit comments

Comments
 (0)