-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (131 loc) · 5.03 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
<html>
<head>
<title>Hunger for Artists (with a backbone)</title>
<link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="./css/style.css" rel="stylesheet" type="text/css" />
<script data-main="app/hunger-graph" src="lib/require.js"></script>
</head>
<body>
<div class="topbar">
<div class="topbar-inner">
<div class="container-fluid">
<a href="#" class="brand">Billboard-Hunger</a>
<ul class="nav">
<li>
<a href="#controls-howto">Controls</a>
</li>
<li>
<a href="#whatisit">About</a>
</li>
<li>
<a href="#take-away">Lastly</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="sidebar">
<div class="count-holder">
</div>
<div class="well">
<div class="control"></div>
<ul class="inputs-list">
<li>
<label>
<input type="radio" checked="" name="optionsRadios" value="normal">
<span>Normal Size</span>
</label>
</li>
<li>
<label>
<input type="radio" name="optionsRadios" value="full">
<span>Full Size</span>
</label>
</li>
</ul>
<h5>Bands</h5>
<span class="label success">Start Node</span>
<span class="label important">End Node</span>
<div class="band-list"></div>
</div>
</div>
<div class="content">
<div class="hero-unit">
<div class="path"></div>
<div id="graph-canvas">
</div>
<div class="graph-view"></div>
</div>
<section id="controls-howto">
<div class="page-header">
<h1>Controls/How To</h1>
</div>
<div class="row">
<div class="span16">
<p>
To get started either select 'normal' or 'full' size below the build/find buttons on the sidebar.
At this point you can hit 'Build Graph' to build your graph, which will also randomly connect the 'nodes' (or
bands) together. From here if you hit 'Find Path', it will select the first and last element as the start/end
point and find the shortest path between them. You can select a start or end point by clicking the 'S' or 'E'
button next to each band name. If you only select one the algo will attempt to select the other for you.
</p>
<p>
Once you hit 'Find Path' the algo will find the shortest path from 'S' to 'E' and draw it on the canvas area.
The bands on the sidebar will change color to indicate that it was traveled through. Clicking on the band names
here will show all the bands it's connected to, clicking again hides it.
</p>
</div>
</div>
</section>
<section id="whatisit">
<div class="page-header">
<h1>What is this?</h1>
</div>
<div class="row">
<div class="span16">
<p>
So, what is this? Here's our setup: Given n number of bands that know one another (a knows b, b knows c, a
doesn't know c), find the shortest path from a to c. Taking a step back, we have a list of (either 11 or 40)
bands that are randomly connected such that our graph is 'connected' (you can get from any node to another by
passing through some series of nodes) and we are trying to find the shortest path from one node to the other, so
we use dijkstra's algorithm by maintaining a set of 'unvisited' nodes and only inspecting the lowest-cost node
at each time. what we are avoiding is making a useless step by contacting a node we could have directly contacted.
(i.e.: If a -> b, b -> c, and a -> c, it would be useless to ask b to contact c).
</p>
</div>
</div>
</section>
<section id="take-away">
<div class="page-header">
<h1>Closing Thoughts</h1>
</div>
<div class="row">
<div class="span16">
<p>
This turned out to be a fun task. It was my second time working with Backbone.js and I really enjoy it, as
breaking the view/data apart is better than storing the data in the dom. I miss that Backbone doesn't have a
dedicated controller, so I think I'll investigate using one in the future to help maintain relations between
views in larger apps. This was also my first time using Raphaeljs for drawing, which was fun. SVG drawing
seemed a little complex, but Raphael certainly made it more interesting and manageable.
I also learned that I know nothing of current music.
</p>
</div>
</div>
</section>
</div>
</div>
<script type="text/template" id="graph-template">
<ul>
<% _.each(bands, function(band) { %>
<li>
<%= band.get('name') %>: <%=band.bandList.pluck('name').join(" - ")%>
</li>
<% }); %>
</ul>
</script>
<script type="text/template" id="button-template">
<button class="btn small <%= type %>" id="<%= id %>"><%= name %></button>
</script>
</body>
</html>