-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
165 lines (152 loc) · 8.09 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name=”mobile-web-app-capable” content=”yes”>
<meta name="description" content="Repository of Computer Science algorithms, written in Python, with visualizations written in Python as well. The animations run in the browser, and algorithms can be developed, saved, and shared from the browser. Example animations are: Dynamic Programming: Knapsack, Geometry - Pi Archimedes, Graphs - Dijkstra Shortest Path, Numbers - Fibonacci / Golden Ratio, Fibonacci Series Generator, Prime Number Generator, Searching - BFS - Breath First Search, Searching - Binary Search, DFS - Depth First Search, Searching - Linear Search, Sorting - Bogo Sort, Sorting - BubbleSort, Sorting - Cocktail Sort, Sorting - Comb Sort, Sorting - Gnome Sort, Sorting - Heap Sort, Unordered List of Tasks Temporary Binary Min-Heap Sorting - Insertion Sort, Sorting - MergeSort, Sorting - NegPos Sort, Sorting - Odd-Even Sort, Sorting - QuickSort, Sorting - QuickSort Sedgewick, Sorting - QuickSort Stackless, Sorting - ShellSort, Sorting - TimSort, Sorting - TreeSort, Sorting - Using Custom Keys, Strings - Anagram Check, Strings - Palindrome Check, Strings - Permutations, Strings - Prefix/Spell Tree, Strings - Spell/Correct, Trees - AVL, Trees - BST Creation, Trees - BST Merging, Trees - Diameter, Trees - Move To Root, Trees - Prefix/Radix/Trie, Trigonometry - Sin/Cos/Tan, This app was created by Chris Laffra. Technologies used: Google App Engine, Python 2.7, Python NBD DataStore, Jinja2 Templates, HTML/JavaScript/CSS, CodeMirror, jQuery, D3.js, and Wikipedia."></meta>
<style>{% include "pyalgoviz.css" %}</style>
<style>{% include "all.css" %}</style>
<title>PyAlgoViz - Home</title>
</head>
<body>
<div class='contents'>
<div class='block floating wide'>
<h3 class='left'>
PyAlgoViz: Python Algorithm Visualizations done in Python running in the browser.
</h3>
<div class="link right">
<a href="https://plus.google.com/109468193166819923528" rel="publisher">
Google+
</a>
{% if user %}
<a href="/user">My Algorithms</a>
{% else %}
<a href="/">Public Algorithms</a>
{% endif %}
</div>
</div>
<div id="marker" class="triangle-border">
Click for details...
</div>
{% for name, author, userid, events, id, extra in algorithms %}
<div class='block floating narrow small'>
<div class='blockHeader indent'>
<span class="name">{{name}}</span>
<div class=author>{{author}}</div>
</div>
<div class='clear blockContent tall'>
<div class='blockPreview' onmouseover="preview({{id}})"
onmousedown="show('{{name}}')" id="preview{{id}}">
<span class=nopreview>loading...<span>
</div>
</div>
<div class='public'>{{extra}}</div>
</div>
{% endfor %}
<div class='clear'></div>
<div class='block wide'>
<div class='blockHeader indent'>
<h3>Contributing and Sharing</h3>
</div>
<div class='clear blockContent indent short'>
Seeing an algorithm explained in simple visual terms is rewarding and cool.
Adding your own algorithm is simple.
<p>
First <a href="/show?">create your own algorithm</a>. You can share it later.
{% include "social.html" %}
</div>
</div>
<div class='block wide'>
<div class='blockHeader indent'>
<h3>Implementation Details</h3>
</div>
<div class='clear blockContent indent short'>
This app was created by
<a href=//chrislaffra.com>Chris Laffra</a>. The project only represents my personal
views and opinions and not necessarily those of my employer.
<p>
Technologies used:
<a href=//developers.google.com/appengine/>Google App Engine</a>,
<a href=//python.org/>Python 2.7</a>,
<a href=//developers.google.com/appengine/docs/python/ndb/>Python NBD DataStore</a>,
<a href=//developers.google.com/appengine/docs/python/gettingstartedpython27/templates>
Jinja2 Templates</a>,
<a href=//www.w3schools.com/>HTML/JavaScript/CSS</a>,
<a href=//codemirror.net/>CodeMirror</a>,
<a href=//jquery.com/>jQuery</a>,
<a href=//d3js.org/>D3.js</a>, and
<a href=//en.wikipedia.org/wiki/Sorting_algorithm>Wikipedia</a>.
</div>
</div>
<div class='block wide'>
<div class='blockHeader indent'>
<h3>Comments and Feedback</h3>
</div>
<div class='clear blockContent indent grow'>
{% include "comments.html" %}
</div>
</div>
</div>
<a href="https://plus.google.com/109468193166819923528" rel="publisher">Google+</a>
<script>
previewRunning = {}
previewEvents = {}
{% for _, _, _, events, id, _ in algorithms %}
previewEvents[{{id}}] = {{events}};
previewRunning[{{id}}] = false;
{% endfor %}
function render(id, n) {
if (n < previewEvents[id].length) {
previewRunning[id] = true
e = previewEvents[id][n]
showRendering(e, '#preview'+id, 340, 240, 0.5);
setTimeout(function() { render(id, n+1); }, 200)
}
else {
previewRunning[id] = false
setTimeout(function() {
$('#marker').removeClass('shown').addClass('hidden')
clearHoverHighlight()
}, 5000)
}
}
function show(name) {
document.location = '/show?name=' + name
}
function clearHoverHighlight() {
$( ".block" ).each(function( index ) {
$(this).css({ border: "2px solid #777", background: "#EEE" })
});
}
function preview(id) {
var marker = $('#marker')
var preview = $('#preview'+id)
marker.removeClass('hidden').addClass('shown')
marker.css({ left: preview.offset().left+40, top: preview.offset().top-137 })
clearHoverHighlight()
preview.parent().parent().css({
border: "2px solid orange", background: 'orange'
})
if (!previewRunning[id]) {
setTimeout(function() { render(id, 0); }, 1)
}
}
function initPyAlgoViz() {
{% for _, _, _, _, id, _ in algorithms %}
preview({{id}})
{% endfor %}
{% for _, _, _, _, id, _ in algorithms[:1] %}
preview({{id}})
{% endfor %}
}
setTimeout(function() {
var element = document.createElement("script");
element.setAttribute("type","text/javascript")
element.setAttribute("src", "all.js")
document.body.appendChild(element);
}, 100)
</script>
</body>
</html>