-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
96 lines (91 loc) · 4.74 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<title>Ford Fulkerson interactive</title>
<style type="text/css">
</style>
</head>
<body>
<div style="text-align:center; margin: 0 auto; width: 800px; font: 22pt Times New Roman;">Ford Fulkerson interactive </div>
<hr/>
<div style="text-align:right; margin-right: 80px;"; font: 14pt Times New Roman;"><i>By Roman Koifman </i></div>
<button onClick="randomGraph()">Random Graph</button>
<button onClick=mygraph.reset();>Clear all</button>
<button id="clearAlg" onClick=mygraph.clearAlg();>Clear algorithm</button>
Maximum Capacity:
<input style="text-align:center"; size=5 value="100" id="maxCap">
<div class="tooltip" style="margin-left:250px;">
<div style="font-size:18px; color:red;">
<b>➢ Instructions</b></div>
<span class="tooltiptext">
• To <u>create</u> a <i><b>Vertex</b></i>, click anywhere whithin the left canvas.<br />
• To <u>create</u> an <i><b>Edge</b></i>, click on a vertex and drag to another certex not releasing the mouse.<br />
• Clicking on a Vertex will open vertex menu.<br />
• <i><b>Source</b></i> color is teal, <i><b>Sink</b></i> color is grey.<br />
• Clicking on an Edge will open edge menu.<br />
• To <b>Zoom in/out</b> scroll with mouse wheel within the canvas.<br />
• <b>Random Graph</b> button will generate a random graph.<br />
• <b>Clear all</b> button will delete everything.<br />
• <b>Clear algorithm</b> button will reset algorithm.<br />
• <b>Maximum Capapcity</b> button box will set graph's edges maximum capacity.<br />
• <b>Algorithm</b> select box will set <b>Edmonds-Karp</b> or <b>Capacity-Scaling</b> algorithm.<br />
• <b>Play Algorithm</b> will animate the algorithm.<br />
• The <b>Speed</b> selector will set the binking speed. (Will update for each augmenting path). <br />
• <b>Save current graph</b> will save the current graph. <br />
• <b>Restore saved graph</b> will restore the last saved graph.<br />
</span>
</div>
<br /><br />
Algorithm:
<select id="algorithm">
<option value="edmondsKarp" selected>Edmonds-Karp</option>
<option value="bottleneck">Capacity Scaling</option>
</select>
<button id="playButton" onClick="play()">Play algorithm</button>
Speed:
<button onClick="speedUp()">+</button>
<input style="text-align:center" size="1" value="5" id="speed" disabled>
<button onClick="slowDown()">-</button>
<button id="saveB" onClick="save()">Save current graph</button>
<button id="restoreB" onClick="restore()">Restore saved graph</button>
<br /><br />
<div style="margin: 0 auto; width: 580px; border-color:teal; border-style:groove;" >
Maximum Flow:
<input style="text-align:center" size=3 value="0" id="MaxFlowText" disabled>
Augmented by:
<input style="text-align:center" size=3 value="0" id="aug" disabled>
Augmenting Paths:
<input style="text-align:center" size=3 value="0" id="path" disabled>
</div><br />
<div style="float: left; margin-left:250px; color:darkblue; font-size:20px" >Flow Network:</div>
<div style="float: right; margin-right:300px; color:darkgreen; font-size:20px">Residual Network:</div>
<div id="contentContainer">
<canvas id="canvas" width="650" height="400" style="border-right: 1px solid black;"></canvas>
<canvas id="canvas2" width="650" height="400"></canvas>
</div>
<div id="vertexMenu">
<button class="button" id="vButton1" onClick=moveVertex();> Move </button> <br>
<button class="button" id="vButton2" onClick=removeVertex();> Delete </button> <br>
<button class="button" id="vButton3" onClick=chooseS();> Source </button> <br>
<button class="button" id="vButton4" onClick=chooseT();> Sink </button> <br>
<button class="button" id="vButton5" onClick=cancel();> Cancel </button> <br>
</div>
<div id="edgeMenu">
<button class="button" id="eButton1" onClick=flip();> flip </button> <br>
<button class="button" id="eButton2" onClick=setCapacity();> Set Capacity </button> <br>
<button class="button" id="eButton3" onClick=removeEdge();> Delete </button> <br>
<button class="button" id="eButton4" onClick=cancel();> Cancel </button> <br>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>