-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (129 loc) · 5.89 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>巡回セールスマン問題 探索ビジュアライザ</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body style="padding-top: 60px;">
<nav class="navbar navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">巡回セールスマン問題 探索ビジュアライザ</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="https://github.com/Takt29/TSP-Visualizer">Github</a>
</li>
</ul>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 col-12" width="100%" height="100%">
<h1 id="header">
<span class="badge badge-primary" id="header-algo">??</span>
<span class="badge badge-secondary" id="header-num">N = ?</span>
</h1>
<canvas id="canvas"></canvas>
</div>
<div class="col-md-4 col-12">
<div class="card">
<div class="card-header">ノード数</div>
<div class="card-body">
<div class="form-group">
<select class="form-control" id="numOfNodes">
<option value="4">N = 4</option>
<option value="6">N = 6</option>
<option value="8" selected>N = 8</option>
<option value="12">N = 12</option>
<option value="16">N = 16</option>
<option value="32">N = 32</option>
<option value="100">N = 100</option>
<option value="500">N = 500</option>
</select>
</div>
<button class="btn btn-primary" onClick="init()">初期化</button>
</div>
</div>
<div class="card">
<div class="card-header">探索方法</div>
<div class="card-body">
<div class="form-group">
<select class="form-control" id="type">
<option value="dfs" selected>[最適解]深さ優先探索</option>
<option value="bfs">[最適解]幅優先探索</option>
<option value="astar1">[最適解]A*探索①</option>
<option value="astar2">[最適解]A*探索②</option>
<option value="hc">[近似解]山登り法</option>
<option value="sa">[近似解]焼きなまし法</option>
</select>
</div>
<button class="btn btn-primary" onClick="change()" disabled>変更</button>
</div>
</div>
<div class="card">
<div class="card-header">操作盤</div>
<div class="card-body text-center">
<button class="btn btn-primary" onClick="toBegin()" disabled> |< </button>
<button class="btn btn-primary" onClick="backstep()" disabled> << </button>
<button class="btn btn-primary" onClick="run()" disabled> ▶ </button>
<button class="btn btn-primary" onClick="stop()" disabled> || </button>
<button class="btn btn-primary" onClick="step()" disabled> >> </button>
<button class="btn btn-primary" onClick="toEnd()" disabled> >| </button>
</div>
<table class="table mb-0">
<tbody>
<tr>
<th scope="row">ステップ数</th>
<td class="text-right">
<span id="steps">--</span>
</td>
</tr>
<tr>
<th scope="row">距離</th>
<td class="text-right">
<span id="distance">--</span>
</td>
</tr>
<tr>
<th scope="row">最短距離</th>
<td class="text-right">
<span id="mindistance">--</span>
</td>
</tr>
<tr>
<th scope="row">スコア</th>
<td class="text-right">
<span id="score">--</span>
</td>
</tr>
<tr>
<th scope="row">最大スコア</th>
<td class="text-right">
<span id="maxscore">--</span>
</td>
</tr>
<tr>
<th scope="row">有効分岐数</th>
<td class="text-right">
<span id="ebfactor">--</span>
</td>
</tr>
<tr>
<th scope="row">最良最短距離</th>
<td class="text-right">
<span id="bestmindistance">--</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="js/priority-queue.js"></script>
<script type="module" src="js/run.js"></script>
</body>
</html>