-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (114 loc) · 5.17 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
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cytoscape</title>
<meta name="description" content="gCampus">
<meta name="author" content="Carlos Pina">
<!-- Bootstrap 3.3.6-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,300italic' rel='stylesheet' type='text/css'>
<!-- My own stylesheet-->
<link rel="stylesheet" href="css/style.css">
<!-- Add Cytoscape library -->
<script type="text/javascript" src="cytoscape/cytoscape.js"></script>
<!-- My own scripts-->
<script type="text/javascript" src="js/inputgenerator.js"></script>
<script type="text/javascript" src="js/pianalyzer.js"></script>
<script type="text/javascript" src="js/algorithm.js"></script>
<script type="text/javascript" src="js/checkinput.js"></script>
<script type="text/javascript" src="js/animation.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Header -->
<div class="headerpage">
<div class="col-md-5">
<h1>Inefficient roads finder</h1>
<h2>Developed with CytoscapeJS</h2>
<a href="http://js.cytoscape.org/"><img class="cytoscapelogo" src="http://js.cytoscape.org/img/cytoscape-logo.svg" class="img-responsive" alt="CytoscapeJS logo"></a><br>
</div>
</div>
<!-- MAIN DIV-->
<div class="row main">
<!-- Screen Cytoscape -->
<div class="col-md-9" id="cytoscape">
</div>
<!-- Input -->
<div class="col-md-3">
<form class="form-horizontal" method="get">
<!--Random Input -->
<div class="radio">
<label>
<input type="radio" name="inputformat" id="randominputrad" value="random" onclick="checkInput()" checked>
<p>Random input</p>
</label>
<div class="form-group randominput">
<label for="totalOffices">Number of Offices</label>
<input type="number" pattern="[0-9]*" class="form-control" id="totalOffices" name="totalOffices" placeholder="number of Offices" required>
<br>
<label for="totalOffices">Number of Roads</label>
<input type="number" pattern="[0-9]*" class="form-control" id="totalRoads" name="totalRoads" placeholder="number of Roads" required>
</div>
</div>
<!--Personalized Input -->
<div class="radio">
<label>
<input type="radio" name="inputformat" id="personalizedinputrad" value="personalized" onclick="checkInput()">
<p>Personalized input</p>
</label>
<div class="form-group personalizedinput">
<textarea class="form-control" name="personalinputtext" id="personalinputtext" rows="4" placeholder=" 2 3 //NumberOffices NumberRoads
 0 1 34 //StartOffice FinalOffice Distance 
 1 2 12 //2nd road
 2 0 4 //3rd road" disabled></textarea>
</div>
</div>
<!--Visualization of the graph-->
<div class="form-group visualization">
<p>Visualization</p>
<div class="radio">
<label>
<input type="radio" name="opc" value="random" checked> Random
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="opc" value="grid" checked> Grid
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="opc" value="concentric" checked> Concentric
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="opc" value="cose" checked> Cose
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="opc" value="circle" checked> Circle
</label>
</div>
</div>
<!-- Confirmation -->
<div class="form-group finalbuttons">
<button type="button" onclick="generateInput(this.form)" class="btn btn-success">OK</button>
<button type="button" onclick="executeAlgorithm()" id="play" class="btn btn-danger" disabled>PLAY</button>
</div>
</form>
</div>
<div class="col-md-9 legend">
The original idea comes from a
<a href="https://code.google.com/codejam/contest/4284486/dashboard#s=p2">Google CodeJam problem</i></a> called <i>gCampus</i>. The goal is to detect the inefficient roads (edges) of any campus (graph) which connect offices (nodes). You only have to choose your favourite input data and then, generate the graph clicking OK, then, once graph is generated you have to press PLAY button. Finally, the <b style="color: #C6090C">unefficient roads</b> (if there is any) and the <b style="color: #40C70B">efficient roads</b> will display in the graph.<br>
</div>
<!-- Progress bar -->
<!-- <div class="col-md-9 progress">
<div class="progress-bar progress-bar-striped" role="progressbar" id="progressalg" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 3%">
0.0%
</div> -->
</div>
</div>
</body>
</html>