Skip to content

Commit bf7e58c

Browse files
author
Philip Guo
committed
started refactoring frontend js code
1 parent 5d945eb commit bf7e58c

5 files changed

Lines changed: 256 additions & 66 deletions

File tree

‎v3/composingprograms.html‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<!--
5+
6+
Online Python Tutor
7+
https://github.com/pgbovine/OnlinePythonTutor/
8+
9+
Copyright (C) 2010-2013 Philip J. Guo (philip@pgbovine.net)
10+
11+
Permission is hereby granted, free of charge, to any person obtaining a
12+
copy of this software and associated documentation files (the
13+
"Software"), to deal in the Software without restriction, including
14+
without limitation the rights to use, copy, modify, merge, publish,
15+
distribute, sublicense, and/or sell copies of the Software, and to
16+
permit persons to whom the Software is furnished to do so, subject to
17+
the following conditions:
18+
19+
The above copyright notice and this permission notice shall be included
20+
in all copies or substantial portions of the Software.
21+
22+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
23+
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
24+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
25+
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
26+
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
27+
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
28+
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
29+
30+
-->
31+
32+
<head>
33+
<title>Online Python Tutor - Visualize program execution</title>
34+
35+
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
36+
37+
<!-- requirements for pytutor.js -->
38+
<script type="text/javascript" src="js/d3.v2.min.js"></script>
39+
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
40+
<script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script> <!-- for handling back button and URL hashes -->
41+
<script type="text/javascript" src="js/jquery.jsPlumb-1.3.10-all-min.js "></script> <!-- for rendering SVG connectors
42+
DO NOT UPGRADE ABOVE 1.3.10 OR ELSE BREAKAGE WILL OCCUR -->
43+
<script type="text/javascript" src="js/jquery-ui-1.8.24.custom.min.js"></script> <!-- for sliders and other UI elements -->
44+
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.24.custom.css" rel="stylesheet" />
45+
46+
<!-- for annotation bubbles -->
47+
<script type="text/javascript" src="js/jquery.qtip.min.js"></script>
48+
<link type="text/css" href="css/jquery.qtip.css" rel="stylesheet" />
49+
50+
<script type="text/javascript" src="js/pytutor.js"></script>
51+
<link rel="stylesheet" href="css/pytutor.css"/>
52+
<link rel="stylesheet" href="css/pytutor.cs61a.css"/> <!-- include AFTER pytutor.css -->
53+
54+
55+
<!-- requirements for opt-frontend.js -->
56+
57+
<!-- codemirror.net online code editor -->
58+
<script type="text/javascript" src="js/codemirror/codemirror.js"></script>
59+
<link type="text/css" href="css/codemirror.css" rel="stylesheet" />
60+
<script type="text/javascript" src="js/codemirror/python.js"></script>
61+
62+
<script type="text/javascript" src="js/opt-frontend-cs61a.js"></script>
63+
<link rel="stylesheet" href="css/opt-frontend.css"/>
64+
65+
</head>
66+
67+
<body>
68+
69+
<div id="pyInputPane">
70+
71+
Write your Python code here:
72+
<br/>
73+
74+
<div id="codeInputPane"></div> <!-- populate with a CodeMirror instance -->
75+
76+
<p style="margin-top: 10px; line-height: 200%;">
77+
Execute code using
78+
<select id="pythonVersionSelector">
79+
<option value="3">Python 3.3</option>
80+
</select>
81+
and
82+
<select id="cumulativeModeSelector">
83+
<option value="true">display frames of exited functions.</option>
84+
<option value="false">don't display exited functions.</option>
85+
</select>
86+
</p>
87+
88+
<p>
89+
<button id="executeBtn" class="bigBtn" type="button">Visualize Execution</button>
90+
</p>
91+
92+
</div>
93+
94+
95+
<div id="pyOutputPane">
96+
</div>
97+
98+
<div id="footer">
99+
100+
<p>
101+
<button id="genUrlBtn" class="smallBtn" type="button">Generate URL</button> <input type="text" id="urlOutput" size="70"/>
102+
</p>
103+
104+
<p>To share this visualization, click the 'Generate URL' button above
105+
and share that URL. To report a bug, paste the URL along with a brief
106+
error description in an email addressed to philip@pgbovine.net</p>
107+
108+
This version of <a href="http://pythontutor.com/">Online Python Tutor</a> supports
109+
<a href="http://www.python.org/doc/3.3.0/">Python 3.3</a> with limited module
110+
imports and no file I/O.
111+
The following modules may be imported:
112+
bisect,
113+
collections,
114+
datetime,
115+
functools,
116+
heapq,
117+
itertools,
118+
json,
119+
math,
120+
operator,
121+
random,
122+
re,
123+
string
124+
</p>
125+
126+
<p>Have a question? Maybe the <a
127+
href="https://github.com/pgbovine/OnlinePythonTutor/blob/master/v3/docs/user-FAQ.md">FAQ</a>
128+
or other <a
129+
href="https://github.com/pgbovine/OnlinePythonTutor/blob/master/v3/docs/">documentation</a>
130+
can help. Or check out its code at <a
131+
href="https://github.com/pgbovine/OnlinePythonTutor/">GitHub</a>.</p>
132+
133+
<p>Join the <a
134+
href="https://groups.google.com/forum/#!forum/pythontutor-users">pythontutor-users</a>
135+
mailing list to participate in user discussions and <a
136+
href="https://groups.google.com/forum/#!forum/pythontutor-announce">pythontutor-announce</a>
137+
to receive occasional announcements.
138+
(Your name and email address will be kept private; only the list owner can see them.)</p>
139+
140+
<p style="margin-top: 8px;">
141+
Copyright &copy; 2010-2013 <a href="http://www.pgbovine.net/">Philip Guo</a>. All rights reserved.
142+
</p>
143+
144+
</div>
145+
146+
</body>
147+
</html>
148+

‎v3/js/iframe-embed.js‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -27,19 +27,11 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2727
*/
2828

2929

30-
// Pre-reqs: pytutor.js and jquery.ba-bbq.min.js should be imported BEFORE this file
31-
32-
33-
// backend scripts to execute (Python 2 and 3 variants, if available)
34-
// make two copies of ../web_exec.py and give them the following names,
35-
// then change the first line (starting with #!) to the proper version
36-
// of the Python interpreter (i.e., Python 2 or Python 3).
37-
//var python2_backend_script = 'web_exec_py2.py';
38-
//var python3_backend_script = 'web_exec_py3.py';
39-
40-
// uncomment below if you're running on Google App Engine using the built-in app.yaml
41-
var python2_backend_script = 'exec';
42-
var python3_backend_script = null;
30+
// Pre-reqs:
31+
// - pytutor.js
32+
// - jquery.ba-bbq.min.js
33+
// - opt-frontend-common.js
34+
// should all be imported BEFORE this file
4335

4436

4537
var myVisualizer = null; // singleton ExecutionVisualizer instance

‎v3/js/opt-frontend-common.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
3+
Online Python Tutor
4+
https://github.com/pgbovine/OnlinePythonTutor/
5+
6+
Copyright (C) 2010-2013 Philip J. Guo (philip@pgbovine.net)
7+
8+
Permission is hereby granted, free of charge, to any person obtaining a
9+
copy of this software and associated documentation files (the
10+
"Software"), to deal in the Software without restriction, including
11+
without limitation the rights to use, copy, modify, merge, publish,
12+
distribute, sublicense, and/or sell copies of the Software, and to
13+
permit persons to whom the Software is furnished to do so, subject to
14+
the following conditions:
15+
16+
The above copyright notice and this permission notice shall be included
17+
in all copies or substantial portions of the Software.
18+
19+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
20+
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
21+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
22+
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
23+
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
24+
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
25+
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
26+
27+
*/
28+
29+
30+
// backend scripts to execute (Python 2 and 3 variants, if available)
31+
// make two copies of ../web_exec.py and give them the following names,
32+
// then change the first line (starting with #!) to the proper version
33+
// of the Python interpreter (i.e., Python 2 or Python 3).
34+
// Note that your hosting provider might have stringent rules for what
35+
// kind of scripts are allowed to execute. For instance, my provider
36+
// (Webfaction) seems to let scripts execute only if permissions are
37+
// something like:
38+
// -rwxr-xr-x 1 pgbovine pgbovine 2.5K Jul 5 22:46 web_exec_py2.py*
39+
// (most notably, only the owner of the file should have write
40+
// permissions)
41+
//var python2_backend_script = 'web_exec_py2.py';
42+
//var python3_backend_script = 'web_exec_py3.py';
43+
44+
// uncomment below if you're running on Google App Engine using the built-in app.yaml
45+
var python2_backend_script = 'exec';
46+
var python3_backend_script = null;
47+
48+
// KRAZY experimental KODE!!! Use a custom hacked CPython interpreter
49+
var python2crazy_backend_script = 'web_exec_py2-crazy.py';
50+
// On Google App Engine, simply run dev_appserver.py with the
51+
// crazy custom py2crazy CPython interpreter to get 2crazy mode
52+
//var python2crazy_backend_script = 'exec';
53+
54+
55+
function getQueryStringOptions() {
56+
// note that any of these can be 'undefined'
57+
var preseededCode = $.bbq.getState('code');
58+
var preseededCurInstr = Number($.bbq.getState('curInstr'));
59+
var pyState = $.bbq.getState('py');
60+
var verticalStack = $.bbq.getState('verticalStack');
61+
var heapPrimitives = $.bbq.getState('heapPrimitives');
62+
var drawParentPointers = $.bbq.getState('drawParentPointers');
63+
var textRefs = $.bbq.getState('textReferences');
64+
var showOnlyOutputs = $.bbq.getState('showOnlyOutputs');
65+
var cumulativeState = $.bbq.getState('cumulative');
66+
67+
return {preseededCode: preseededCode,
68+
preseededCurInstr: preseededCurInstr,
69+
pyState: pyState,
70+
verticalStack: verticalStack,
71+
heapPrimitives: heapPrimitives,
72+
drawParentPointers: drawParentPointers,
73+
textRefs: textRefs,
74+
showOnlyOutputs: showOnlyOutputs,
75+
cumulativeState: cumulativeState}
76+
}

‎v3/js/opt-frontend.js‎

Lines changed: 26 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -27,32 +27,12 @@ SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2727
*/
2828

2929

30-
// Pre-reqs: pytutor.js and jquery.ba-bbq.min.js should be imported BEFORE this file
31-
32-
33-
// backend scripts to execute (Python 2 and 3 variants, if available)
34-
// make two copies of ../web_exec.py and give them the following names,
35-
// then change the first line (starting with #!) to the proper version
36-
// of the Python interpreter (i.e., Python 2 or Python 3).
37-
// Note that your hosting provider might have stringent rules for what
38-
// kind of scripts are allowed to execute. For instance, my provider
39-
// (Webfaction) seems to let scripts execute only if permissions are
40-
// something like:
41-
// -rwxr-xr-x 1 pgbovine pgbovine 2.5K Jul 5 22:46 web_exec_py2.py*
42-
// (most notably, only the owner of the file should have write
43-
// permissions)
44-
//var python2_backend_script = 'web_exec_py2.py';
45-
//var python3_backend_script = 'web_exec_py3.py';
46-
47-
// uncomment below if you're running on Google App Engine using the built-in app.yaml
48-
var python2_backend_script = 'exec';
49-
var python3_backend_script = null;
50-
51-
// KRAZY experimental KODE!!! Use a custom hacked CPython interpreter
52-
var python2crazy_backend_script = 'web_exec_py2-crazy.py';
53-
// On Google App Engine, simply run dev_appserver.py with the
54-
// crazy custom CPython interpreter to get 2crazy
55-
//var python2crazy_backend_script = 'exec';
30+
// Pre-reqs:
31+
// - pytutor.js
32+
// - jquery.ba-bbq.min.js
33+
// - opt-frontend-common.js
34+
// should all be imported BEFORE this file
35+
5636

5737
var appMode = 'edit'; // 'edit', 'display', or 'display_no_frills'
5838

@@ -520,47 +500,40 @@ $(document).ready(function() {
520500
});
521501

522502

523-
// handle hash parameters passed in when loading the page
524-
preseededCode = $.bbq.getState('code');
525-
if (preseededCode) {
526-
setCodeMirrorVal(preseededCode);
503+
var queryStrOptions = getQueryStringOptions();
504+
505+
if (queryStrOptions.preseededCode) {
506+
setCodeMirrorVal(queryStrOptions.preseededCode);
527507
}
528508
else {
529509
// select a canned example on start-up:
530510
$("#aliasExampleLink").trigger('click');
531511
}
532512

533-
// parse query string options ...
534-
// ugh, ugly tristate due to the possibility of them being undefined
535-
var cumulativeState = $.bbq.getState('cumulative');
536-
if (cumulativeState !== undefined) {
537-
$('#cumulativeModeSelector').val(cumulativeState);
513+
// ugh, ugly tristate due to the possibility of each being undefined
514+
if (queryStrOptions.pyState !== undefined) {
515+
$('#pythonVersionSelector').val(queryStrOptions.pyState);
538516
}
539-
var heapPrimitivesState = $.bbq.getState('heapPrimitives');
540-
if (heapPrimitivesState !== undefined) {
541-
$('#heapPrimitivesSelector').val(heapPrimitivesState);
517+
if (queryStrOptions.cumulativeState !== undefined) {
518+
$('#cumulativeModeSelector').val(queryStrOptions.cumulativeState);
542519
}
543-
var drawParentPointerState = $.bbq.getState('drawParentPointers');
544-
if (drawParentPointerState !== undefined) {
545-
$('#drawParentPointerSelector').val(drawParentPointerState);
520+
if (queryStrOptions.heapPrimitives !== undefined) {
521+
$('#heapPrimitivesSelector').val(queryStrOptions.heapPrimitives);
546522
}
547-
var textRefsState = $.bbq.getState('textReferences');
548-
if (textRefsState !== undefined) {
549-
$('#textualMemoryLabelsSelector').val(textRefsState);
523+
if (queryStrOptions.drawParentPointers !== undefined) {
524+
$('#drawParentPointerSelector').val(queryStrOptions.drawParentPointers);
550525
}
551-
var showOnlyOutputsState = $.bbq.getState('showOnlyOutputs');
552-
if (showOnlyOutputsState !== undefined) {
553-
$('#showOnlyOutputsSelector').val(showOnlyOutputsState);
526+
if (queryStrOptions.textRefs !== undefined) {
527+
$('#textualMemoryLabelsSelector').val(queryStrOptions.textRefs);
554528
}
555-
556-
var pyState = $.bbq.getState('py');
557-
if (pyState !== undefined) {
558-
$('#pythonVersionSelector').val(pyState);
529+
if (queryStrOptions.showOnlyOutputs !== undefined) {
530+
$('#showOnlyOutputsSelector').val(queryStrOptions.showOnlyOutputs);
559531
}
560532

533+
561534
appMode = $.bbq.getState('mode'); // assign this to the GLOBAL appMode
562-
if ((appMode == "display") && preseededCode /* jump to display only with pre-seeded code */) {
563-
preseededCurInstr = Number($.bbq.getState('curInstr'));
535+
if ((appMode == "display") && queryStrOptions.preseededCode /* jump to display only with pre-seeded code */) {
536+
preseededCurInstr = queryStrOptions.preseededCurInstr;
564537
$("#executeBtn").trigger('click');
565538
}
566539
else {

‎v3/visualize.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
<link type="text/css" href="css/codemirror.css" rel="stylesheet" />
5959
<script type="text/javascript" src="js/codemirror/python.js"></script>
6060

61+
<script type="text/javascript" src="js/opt-frontend-common.js"></script>
6162
<script type="text/javascript" src="js/opt-frontend.js"></script>
6263
<link rel="stylesheet" href="css/opt-frontend.css"/>
6364

0 commit comments

Comments
 (0)