WillyLoman/example.html at master · corbos/WillyLoman · GitHub

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
<!doctype html>
<html lang="en">
<head>
<title>WillyLoman and the Travelling Salesman Problem</title>
<style>
body{
    background-color:#EEE;
}
#thecanvas {
    background-color:#FFF;
}
#divAlgo {
    width:800px;
    clear:both;
}
#spnPoint {
    float:right;
}
</style>
</head>
<body>
<p>
Click on the canvas to add cities.
</p>
<p>
...or add
<input type="text" id="txtAddCount" value="35"> random points.
<button type="button" id="btnAddRandom">Add</button>
</p>
<canvas id="thecanvas" width="800" height="500">
Your browser does not support the canvas element. Sorry.
</canvas>
<div id="divAlgo">
    <select id="ddlAlgo"></select>
    <button type="button" id="btnGo">Solve</button>
    <button type="button" id="btnStop">Stop</button>
    <button type="button" id="btnClear">Clear</button>
    <span id="spnPoint">
        Cities
        <span id="spnPointCount">0</span>
    </span>
</div>
<p>
Distance: <span id="spnDistance"></span><br>
Iteration: <span id="spnIteration"></span><br>
Improvements: <span id="spnImprovement"></span>
</p>
<script type="text/javascript" src="src/WillyLoman.js"></script>
<script type="text/javascript" src="src/corbos.tsp.inorder.js"></script>
<script type="text/javascript" src="src/corbos.tsp.onerandom.js"></script>
<script type="text/javascript" src="src/corbos.tsp.iteraterandom.js"></script>
<script type="text/javascript" src="src/corbos.tsp.bestnearestneighbor.js"></script>
<script type="text/javascript" src="src/corbos.tsp.bruteforce.js"></script>
<script type="text/javascript" src="src/corbos.tsp.branchnbound.js"></script>
<script type="text/javascript" src="src/corbos.tsp.dynamic.js"></script>
<script type="text/javascript" src="src/corbos.tsp.ga.js"></script>
<script type="text/javascript" src="src/corbos.tsp.gamutation.js"></script>
<script type="text/javascript" src="src/corbos.tsp.gacrossover.js"></script>
<script type="text/javascript" src="src/corbos.tsp.twooptfirst.js"></script>
<script type="text/javascript" src="src/corbos.tsp.twooptbest.js"></script>
<script type="text/javascript" src="src/WillyLoman.UI.js"></script>
<script type="text/javascript">
(function() {
    var byId = function(id) { return document.getElementById(id); };

    var thecanvas = byId('thecanvas'),
        spnDistance = byId('spnDistance'),
        spnIteration = byId('spnIteration'),
        spnImprovement = byId('spnImprovement'),
        spnPointCount = byId('spnPointCount'),
        ddlAlgo = byId('ddlAlgo');

    var notify = function(data) {
        spnDistance.innerHTML = data.distance;
        spnIteration.innerHTML = data.iteration;
        spnImprovement.innerHTML = data.improvements;
    };

    var ui = new WillyLoman.UI(thecanvas, notify);
    for(var key in WillyLoman.algorithms) {
        ddlAlgo.appendChild(new Option(WillyLoman.algorithms[key].name, key));
    }
    byId('btnAddRandom').addEventListener('click', function() {
        ui.addRandom(byId('txtAddCount').value);
        spnPointCount.innerHTML = ui.solver.points.length;
    });
    byId('btnClear').addEventListener('click', function() {
        ui.clear();
    });
    byId('btnGo').addEventListener('click', function() {
        ui.solve(ddlAlgo.value);
    });
    byId('btnStop').addEventListener('click', function() {
        ui.stop();
    });
    thecanvas.addEventListener('mousedown', function() {
        setTimeout(function () { spnPointCount.innerHTML = ui.solver.points.length; }, 0);
    });
})();
</script>
</body>
</html>