-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·145 lines (133 loc) · 8.19 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
<html>
<head>
<meta charset="UTF-8">
<title>geographical imagination system</title>
<script language="javascript" type="text/javascript" src="js/p5.js"></script>
<script language="javascript" type="text/javascript" src="js/p5.dom.js"></script>-->
<!--<script language="javascript" type="text/javascript" src="js/p5.min.old.js"></script>
<script language="javascript" type="text/javascript" src="js/p5.dom.old.js"></script>-->
<script language="javascript" type="text/javascript" src="js/numeric-1.2.6.min.js"></script>
<script>var module = {};</script>
<script language="javascript" type="text/javascript" src="js/delaunay.js"></script>
<script language="javascript" type="text/javascript" src="js/three.min.js"></script>
<script language="javascript" type="text/javascript" src="js/OrbitControls.js"></script>
<script language="javascript" type="text/javascript" src="js/OBJExporter.js"></script>
<script language="javascript" type="text/javascript" src="js/FileSaver.min.js"></script>
<script language="javascript" type="text/javascript" src="js/graph-io.js"></script>
<script language="javascript" type="text/javascript" src="js/vr/webvr2.js"></script>
<script language="javascript" type="text/javascript" src="js/iro.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<!-- load up some graphml as JS wrapped text just to test the import button
<script language="javascript" type="text/javascript" src="graphs/test.graphml.js"></script>
-->
<!--TOP MENU-->
<div id="nav"><img src="images/logo.png" /> enfolding
<button title="Add or remove maps, grids, and nodes" id="goInterface" class="button" onclick="goInterface()">EDIT</button>
<button title="Render your map(s)" id="goRender" class="button" onclick="goRender()">RENDER</button>
<button title="Check out the quick start guide here." id="Getting Started" class="button" style="float: right;" onclick="var otherWindow = window.open();otherWindow.opener = null;otherWindow.location.href='https://github.com/FoldingSpace/enfolding';">Getting Started</button>
</div>
<!--EDIT & RENDER CANVASES-->
<div id="leftCanv"></div>
<div id="rightCanv"></div>
<!--SIDE MENU, EDIT MODE-->
<div id="menuEdit" class="menu">
<header>MAPS</header>
<button title="In two map mode? Click here to swap maps." onclick="changeFocus();">FOCUS</button>
<button title="Remove all grids and nodes." onclick="resetMaps();">RESET</button>
<hr>
<header>GRIDS</header>
<div id="grids">
<img src="images/grid.gif" />
<select id="yval">
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
<option value="5" selected="selected">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
<option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option>
<option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
</select>
<br />
<select id="xval">
<option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
<option value="5" selected="selected">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
<option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
<option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option>
<option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
</select>
</div>
<button onclick="gridMode2()">ADD GRID</button>
<hr>
<header>ADVANCED</header>
<input type="checkbox" name="triangles" onchange="delaunay(this)">Show triangles <br />
<input type="checkbox" name="maps" onchange="imgToggle(this)" checked>Show maps <br />
<input type="checkbox" name="ins" onchange="insToggle(this)" checked>Show inputs <br /><br />
<span>Connect new nodes to:</span>
<select onchange="nNodesChange(this)"><option value="1">1</option><option value="2">2</option><option value="3">3</option>
<option selected="selected" value="4">4</option><option value="5">5</option><option value="6">6</option>
</select>
<span>nearest nodes</span><br /><br />
<button onclick="gridMode()">ADD GRID (COMPLEX)</button><br />
<hr>
<header>IO</header>
<input type="file" id="selectFilesImage" value="Import" disabled/><span id="fileImage"></span><br />
<button id="importImage" disabled>Import image/map</button>
<hr>
<label for="selectFilesGraph">Import graphml file:</label><br />
<input type="file" id="selectFilesGraph" disabled/><span id="fileGraph"></span>
</div>
<hr>
<!--SIDE MENU, RENDER MODE-->
<div id="menuRender" class="menu">
<header>MAP CONTROLS</header>
<button id="renderFocus" title="Toggle between MAP1 and MAP2" onclick="changeFocus();">FOCUS</button><br />
<br />
<span><b>View Options</b></span><br />
<input type="checkbox" name="3D" onchange="dimensionChange(this)" checked>3D<br />
<input type="checkbox" name="2maps" onchange="wormMode(this)">Two map mode<br />
<div id="nodeConnect" style="display:none;padding-left:15px;">
<input type="checkbox" id="bindCheck" name="bindmaps" onchange="bindMaps(this)">Bind maps together<br />
<span>Connect last</span>
<select onchange="cNodesChange(this)"><option value="1">1</option><option value="2">2</option><option value="3">3</option>
<option value="4">4</option><option value="5">5</option><option value="6">6</option>
</select>
<span>nodes of each map</span><br />
<!-- BIND DIST CHANGE NOT WORKING
<input min="0" max="1000" value="200" id="0" onchange="bindslide(this)" style="width: 150px;" type="range">
-->
</div>
<input type="checkbox" name="rotate" onchange="rotateMode(this)">Rotate<br />
<hr>
<header>APPEARANCE</header>
<div id="transSliders">
</div>
<span><b>CANVAS COLOR</b></span><br />
<br />
<div id="color-picker-container"></div><br />
<button style="background-color: #000000" class="colors" onclick="bgColorChange('000000')"></button>
<button style="background-color: #808080" class="colors" onclick="bgColorChange('808080')"></button>
<button style="background-color: #FFFFFF" class="colors" onclick="bgColorChange('FFFFFF')"></button>
<button style="background-color: #ff812d" class="colors" onclick="bgColorChange('ff812d')"></button>
<button style="background-color: #ffd941" class="colors" onclick="bgColorChange('ffd941')"></button>
<button style="background-color: #94d668" class="colors" onclick="bgColorChange('94d668')"></button>
<button style="background-color: #5a8ad2" class="colors" onclick="bgColorChange('5a8ad2')"></button>
<button style="background-color: #ba72cc" class="colors" onclick="bgColorChange('ba72cc')"></button>
<button style="background-color: #ff2d81" class="colors" onclick="bgColorChange('ff2d81')"></button>
<hr>
<header>ADVANCED</header>
<button title="mirrorMesh" onclick="mirrorMesh()">MIRROR</button><br /><br />
<input type="checkbox" name="wireframe" onchange="wireFrameMode(this)">Wireframe<br />
<input type="checkbox" name="webvr" onchange="webVrOn(this)">WebVR<br />
<div id="webvr"></div>
<hr>
<header>OUTPUT</header>
<button id="objOut" class="button" onclick="outOBJ()">SAVE OBJ</button>
<button id="jpgOut" title="Export your creation as an image" class="button" onclick="saveAsImage()">SAVE IMAGE</button>
<hr>
</form>
</div>
<div id="dataResults"></div>
<script language="javascript" type="text/javascript" src="js/gis.js"></script>
<script language="javascript" type="text/javascript" src="js/gisUI.js"></script>
</body>
</html>