-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (173 loc) · 10.3 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<html>
<head>
<meta charset="utf-8">
<title>Graphe - Visualisation</title>
<link rel="shortcut icon" type="image/png" href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Undirected.svg/800px-Undirected.svg.png"/>
<meta property="og:title" content="Graphe - Visualisation">
<meta property="og:type" content="website">
<meta property="og:description" content="Petite appli pour visualiser des graphes - le code peut bien sûr être adapté pour n'importe quel graphe sans grandes modifications.">
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Undirected.svg/800px-Undirected.svg.png">
<link href="./libs/bootstrap/bootstrap.min.css" rel="stylesheet">
<script src="./libs/bootstrap/bootstrap.bundle.js"></script>
<script type="text/javascript" src="./libs/vis-network.min.js"></script>
<style type="text/css">
#mynetwork {
height: 700px;
width: 96%;
}
.bColor {
border-color: lightgray;
}
.container {
color: #EAEAEA;
}
</style>
</head>
<body class="d-flex flex-column">
<script type="text/javascript" src="./utils/maillon.js"></script>
<script type="text/javascript" src="./utils/pile.js"></script>
<script type="text/javascript" src="./utils/file.js"></script>
<script type="text/javascript" src="./utils/Graphe.js"></script>
<script type="text/javascript" src="./utils/Graphe_pondere.js"></script>
<script type="text/javascript" src="./utils/parcours.js"></script>
<script type="text/javascript" src="./examples/pile_appels.js"></script>
<script type="text/javascript" src="./graph.js"></script>
<div class="container p-2">
<div class="row row-cols-3 px-1">
<div class="col-4 px-1">
<div class="bg-dark rounded p-2 h-100">
<h5 class="mx-2 mt-2">Affichage</h5>
<hr class="my-2">
<div class="form-check mb-1">
<input class="form-check-input" type="radio" name="coloration" value="coloration_gloutonne" onclick="radioClicked(this)">
<label class="form-check-label" for="coloration_gloutonne">Coloration gloutonne</label>
</div>
<div class="form-check mb-1">
<input class="form-check-input" type="radio" name="coloration" value="coloration_degre" onclick="radioClicked(this)">
<label class="form-check-label" for="coloration_degre">Coloration selon degrés</label>
</div>
<p class="mb-1 ms-1">Couleurs : <span id="nb_couleurs">ø</span></p>
<div class="form-check mb-1 p-0">
<input class="form-check-input m-1" type="checkbox" id="coloration_arete" checked onclick="create()">
<label class="form-check-label mx-1" for="coloration_arete">Coloration arcs</label>
</div>
<div class="form-check mb-1 p-0">
<input class="form-check-input m-1" type="checkbox" id="taille_sommets_degre" onclick="create()">
<label class="form-check-label mx-1" for="taille_sommets_degre">Taille sommets selon degré</label>
</div>
<div class="form-check mb-1 p-0">
<input class="form-check-input m-1" type="checkbox" id="taille_arcs_poids" onclick="create()">
<label class="form-checkp-label mx-1" for="taille_arcs_poids">Taille arcs selon poids</label>
</div>
</div>
</div>
<div class="col-4 px-1">
<div class="bg-dark rounded p-2 h-100">
<h5 class="mx-2 mt-2">Analyse</h5>
<hr class="my-2">
Chemin le plus court
<div class="form-check mb-1">
<input class="form-check-input" type="radio" name="chemin" value="nb_sommets" onclick="radioClicked(this)">
<label class="form-check-label" for="nb_sommets">Nombre de sommets</label>
</div>
<div class="form-check mb-1">
<input class="form-check-input" type="radio" name="chemin" id="dijkstra" value="dijkstra" disabled onclick="radioClicked(this)">
<label class="form-check-label" for="dijkstra">Dijkstra</label>
</div>
<div class="input-group mb-1">
<span class="input-group-text">De</span>
<input list="nodes" class="form-control" placeholder="sommet..." onkeyup="updateNodesDOM(G, document.getElementById('s1').value)" id="s1">
<datalist id="nodes"></datalist>
<span class="input-group-text">à</span>
<input list="nodes1" class="form-control" placeholder="sommet..." id="s2">
<datalist id="nodes1"></datalist>
</div>
Longueur : <span id="length">ø</span>, coût : <span id="cost">ø</span>
</div>
</div>
<div class="col-4 px-1">
<div class="bg-dark rounded p-2 h-100">
<h5 class="mx-2 mt-2">Gestion</h5>
<hr class="my-2">
<p class="m-1">Status : <span id="status">initial loading...</span></p>
<div class="form-check mb-1 p-0">
<input class="form-check-input m-1" checked="true" type="checkbox" id="gen_fast" onclick="create()">
<label class="form-check-label mx-1" for="gen_fast">Génération rapide</label>
</div>
<button class="btn btn-primary m-1" onclick="create()">Actualiser</button>
<button class="btn btn-warning m-1" onclick="create(true)">Re-grapher</button>
<button class="btn btn-danger m-1" onclick="nw.destroy()">Retirer</button>
<button class="btn btn-danger m-1" onclick="document.location.reload()">Réinitialiser</button>
</div>
</div>
</div>
</div>
<div class="row row-cols-2 px-1 mt-2 mb-3">
<div class="col-3">
<div class="border bColor border-1 rounded-1 p-2 ms-2">
<h1 class="display-5 ms-2 overflow-hidden" id="nom">Nom</h1>
<hr class="mb-3 mt-0">
<div class="input-group mb-1 mt-2">
<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_voisins" aria-expanded="true" aria-controls="collapse_voisins">Voisins</button>
<input class="form-control" type="text" id="degre" disabled>
</div>
<div class="collapse show" id="collapse_voisins">
<div class="card card-body p-2" id="voisins">ø</div>
</div>
<div class="input-group my-1">
<button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse_connexions" aria-expanded="false" aria-controls="collapse_connexions">Connexions</button>
<input class="form-control" type="text" id="connexionsN" disabled>
</div>
<div class="collapse" id="collapse_connexions">
<div class="card card-body p-2" id="connexions">ø</div>
</div>
</div>
<div class="ms-2 mt-2">
<select class="form-select" id="sommets" onchange="updateSommetInfoDOM(G)" size="15">
</select>
</div>
</div>
<div class="col-9">
<div id="mynetwork" class="border bColor border-1 rounded-1"></div>
</div>
</div>
<script type="text/javascript">
const radiosChecked = {}
function radioClicked(radio) {
if (radio.value == radiosChecked[radio.name]) {
radio.checked = false
delete radiosChecked[radio.name]
} else {
radiosChecked[radio.name] = radio.value
}
create()
}
function create(makeG = false) {
if (makeG) {
document.getElementById("status").innerHTML = `creating graph...`;
try {
G = makeGraph();
if (!G) throw new Error("Error while creating graph.")
updateNodesDOM(G);
updateSommetsDOM(G)
} catch(e) {
return document.getElementById("status").innerHTML = `error while creating graph.`;
}
}
document.getElementById("status").innerHTML = `creating nodes...`;
var nodesSommets = createNodes(G);
nodes = nodesSommets[1];
document.getElementById("status").innerHTML = `creating edges...`;
edges = createEdges(G, nodesSommets[0])[1];
document.getElementById("status").innerHTML = `drawing...`;
nw = draw(nodes, edges, "mynetwork");
}
create(true);
</script>
<footer class="footer mt-auto py-2 bg-light">
<div class="container mx-auto" style="max-width: 60%;">
<span class="text-muted">Voir <a href="https://github.com/Catatomik/visualisation-graphe" target="_blank">ici</a> pour le code source.</span>
</div>
</footer>
</body>
</html>