https://foldingspace.github.io/enfolding/

1<html>
2<head>
3  <meta charset="UTF-8">
4  <title>geographical imagination system</title>
5  

5<script language="javascript" type="text/javascript" src="js/p5.js"></script>

5
6  

6<script language="javascript" type="text/javascript" src="js/p5.dom.js"></script>

6-->
7  <!--

7<script language="javascript" type="text/javascript" src="js/p5.min.old.js"></script>

7
8  

8<script language="javascript" type="text/javascript" src="js/p5.dom.old.js"></script>

8-->
9  

9<script language="javascript" type="text/javascript" src="js/numeric-1.2.6.min.js"></script>

9
10  

10<script>var module = {};</script>

10
11  

11<script language="javascript" type="text/javascript" src="js/delaunay.js"></script>

11
12  

12<script language="javascript" type="text/javascript" src="js/three.min.js"></script>

12
13  

13<script language="javascript" type="text/javascript" src="js/OrbitControls.js"></script>

13
14  

14<script language="javascript" type="text/javascript" src="js/OBJExporter.js"></script>

14
15  

15<script language="javascript" type="text/javascript" src="js/FileSaver.min.js"></script>

15
16  

16<script language="javascript" type="text/javascript" src="js/graph-io.js"></script>

16
17  

17<script language="javascript" type="text/javascript" src="js/vr/webvr2.js"></script>

17
18  

18<script language="javascript" type="text/javascript" src="js/iro.js"></script>

18
19
20  <link rel="stylesheet" type="text/css" href="style/style.css">
21</head>
22<body>
23
24<!-- load up some graphml as JS wrapped text just to test the import button

25<script language="javascript" type="text/javascript" src="graphs/test.graphml.js"></script>

25
26-->
27
28  <!--TOP MENU-->
29  <div id="nav"><img src="images/logo.png" /> enfolding
30      <button title="Add or remove maps, grids, and nodes" id="goInterface" class="button" onclick="goInterface()">EDIT</button>
31      <button title="Render your map(s)" id="goRender" class="button" onclick="goRender()">RENDER</button>
32      <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>
33  </div>
34
35  <!--EDIT & RENDER CANVASES-->
36	<div id="leftCanv"></div>
37	<div id="rightCanv"></div>
38
39  <!--SIDE MENU, EDIT MODE-->
40  <div id="menuEdit" class="menu">
41    <header>MAPS</header>
42      <button title="In two map mode? Click here to swap maps." onclick="changeFocus();">FOCUS</button>
43      <button title="Remove all grids and nodes." onclick="resetMaps();">RESET</button>
44    <hr>
45    <header>GRIDS</header>
46      <div id="grids">
47        <img src="images/grid.gif" />
48        <select id="yval">
49          <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
50          <option value="5" selected="selected">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
51          <option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
52          <option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option>
53          <option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
54        </select>
55        <br />
56        <select id="xval">
57          <option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>
58          <option value="5" selected="selected">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option>
59          <option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option>
60          <option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option>
61          <option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option>
62        </select>
63      </div>
64      <button onclick="gridMode2()">ADD GRID</button>
65    <hr>
66    <header>ADVANCED</header>
67      <input type="checkbox" name="triangles" onchange="delaunay(this)">Show triangles <br />
68      <input type="checkbox" name="maps" onchange="imgToggle(this)" checked>Show maps <br />
69      <input type="checkbox" name="ins" onchange="insToggle(this)" checked>Show inputs <br /><br />
70      <span>Connect new nodes to:</span>
71        <select onchange="nNodesChange(this)"><option value="1">1</option><option value="2">2</option><option value="3">3</option>
72                <option selected="selected" value="4">4</option><option value="5">5</option><option value="6">6</option>
73        </select>
74      <span>nearest nodes</span><br /><br />
75      <button onclick="gridMode()">ADD GRID (COMPLEX)</button><br />
76      <hr>
77      <header>IO</header>
78        <input type="file" id="selectFilesImage" value="Import" disabled/><span id="fileImage"></span><br />
79        <button id="importImage" disabled>Import image/map</button>
80        <hr>
81        <label for="selectFilesGraph">Import graphml file:</label><br />
82        <input type="file" id="selectFilesGraph" disabled/><span id="fileGraph"></span>
83
84    </div>
85    <hr>
86
87  <!--SIDE MENU, RENDER MODE-->
88  <div id="menuRender" class="menu">
89    <header>MAP CONTROLS</header>
90      <button id="renderFocus" title="Toggle between MAP1 and MAP2" onclick="changeFocus();">FOCUS</button><br />
91      <br />
92      <span><b>View Options</b></span><br />
93      <input type="checkbox" name="3D" onchange="dimensionChange(this)" checked>3D<br />
94      <input type="checkbox" name="2maps" onchange="wormMode(this)">Two map mode<br />
95      <div id="nodeConnect" style="display:none;padding-left:15px;">

96        <input type="checkbox" id="bindCheck" name="bindmaps" onchange="bindMaps(this)">Bind maps together<br />
97        <span>Connect last</span>
98        <select onchange="cNodesChange(this)"><option value="1">1</option><option value="2">2</option><option value="3">3</option>
99              <option value="4">4</option><option value="5">5</option><option value="6">6</option>
100          </select>
101      <span>nodes of each map</span><br />
102      <!-- BIND DIST CHANGE NOT WORKING
103      <input min="0" max="1000" value="200" id="0" onchange="bindslide(this)" style="width: 150px;" type="range">
104    -->
105    </div>
106    <input type="checkbox" name="rotate" onchange="rotateMode(this)">Rotate<br />
107    <hr>
108    <header>APPEARANCE</header>
109      <div id="transSliders">
110      </div>
111    <span><b>CANVAS COLOR</b></span><br />
112    <br />
113    <div id="color-picker-container"></div><br />
114    <button style="background-color: #000000" class="colors" onclick="bgColorChange('000000')"></button>
115    <button style="background-color: #808080" class="colors"  onclick="bgColorChange('808080')"></button>
116    <button style="background-color: #FFFFFF" class="colors"  onclick="bgColorChange('FFFFFF')"></button>
117    <button style="background-color: #ff812d" class="colors"  onclick="bgColorChange('ff812d')"></button>
118    <button style="background-color: #ffd941" class="colors"  onclick="bgColorChange('ffd941')"></button>
119    <button style="background-color: #94d668" class="colors"  onclick="bgColorChange('94d668')"></button>
120    <button style="background-color: #5a8ad2" class="colors"  onclick="bgColorChange('5a8ad2')"></button>
121    <button style="background-color: #ba72cc" class="colors"  onclick="bgColorChange('ba72cc')"></button>
122    <button style="background-color: #ff2d81" class="colors"  onclick="bgColorChange('ff2d81')"></button>
123
124    <hr>
125    <header>ADVANCED</header>
126    <button title="mirrorMesh" onclick="mirrorMesh()">MIRROR</button><br /><br />
127    <input type="checkbox" name="wireframe" onchange="wireFrameMode(this)">Wireframe<br />
128    <input type="checkbox" name="webvr" onchange="webVrOn(this)">WebVR<br />
129    <div id="webvr"></div>
130    <hr>
131    <header>OUTPUT</header>
132    <button id="objOut" class="button" onclick="outOBJ()">SAVE OBJ</button>
133    <button id="jpgOut" title="Export your creation as an image" class="button" onclick="saveAsImage()">SAVE IMAGE</button>
134
135    <hr>
136
137</form>
138
139  </div>
140
141	<div id="dataResults"></div>
142  

142<script language="javascript" type="text/javascript" src="js/gis.js"></script>

142
143  

143<script language="javascript" type="text/javascript" src="js/gisUI.js"></script>

143
144</body>
145</html>