forceDirectedGraph/index.html at main · bergin/forceDirectedGraph · 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
<html>
<head>
<script type="application/x-javascript" src="main.js">  </script>
<script type="application/x-javascript" src="classes.js">  </script>
<script type="application/x-javascript" src="trig_vector.js">  </script>
<script type="application/x-javascript" src="diagram.js">  </script>
<script type="application/x-javascript" src="nodes.js">  </script>
<script type="application/x-javascript" src="io.js">  </script>
<title>FDG</title>
<style>
body{margin: 0; padding: 0;}
canvas{border: 1px solid black;margin: 0; padding: 0; background-color: black; float: left; }
#container{position: relative; width: 100%; height:100%;}
#textbox
{
	color: black; z-index:101; position:absolute;
	visibility:hidden;
	font-size: 18px;
}

input[type="text"]{ padding: 5px 5px; line-height: 28px; }

input[type=range]
{
    width: 100%;
    float: right;
    margin: 0 0 0 1px;
}

fieldset
{
	width: 10%; float: left;
}

</style>
</head>

<body onload="main();">
	<div id="container">
		<canvas id="canvas" width="1500" height="800"></canvas>
		<input id="textbox" type="text" autofocus/>


		<fieldset>
		<legend>Replusion</legend>
		<input  min="1" value="500" max="2000" step="25" type="range"  oninput="replusion.alter(this)"></input>
		</fieldset>

		<fieldset>
		<legend>Attraction</legend>
		<input  min="0.001"  value=".1" max=".3" step=".05" type="range" oninput="attraction.alter(this)"></input>
		</fieldset>


		<fieldset>
		<legend>Spring Length</legend>
		<input  min="0" value="75" max="200" step="5" type="range"   oninput="spring.alter(this)"></input>
		</fieldset>

		<button onclick="randomisePositions()">Boom!</button>
		<button onclick="loadNetwork()">Load</button>
		<button onclick="saveNetwork()">Save</button>
	</div>

</body>
</html>