-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
249 lines (225 loc) · 12.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
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>visual-vector</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/components/button.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/components/checkbox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/components/checkbox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/components/icon.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/components/input.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/components/menu.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/components/dropdown.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/components/grid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/components/popup.css" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML'></script>
<link rel="stylesheet" href="css/admin.css"/>
<link rel="stylesheet" href="css/toolbars.css"/>
</head>
<body>
<div id=homeMenu>
<img src="assets/logo_darkBlue.jpg" alt="V3ctor logo" style="max-height:100%; max-width: 100%;"/>
</div>
<div id=vectorsMenu class=menus>
<text>Vectors</text>
<div id=vectorsForm class=form>
<button id="addVector" class="ui labeled icon button" > Add Vector
<i class="plus icon"></i>
</button>
<button id="deleteVector" class="ui icon button">
<i class="trash icon"></i>
</button>
<button id="renderVectors" class="ui labeled icon button"> Draw Vectors
<i class="pencil alternate icon"></i> </button>
<button id="animateCombo" class="ui button" data-tooltip="animate linear combination of checked vectors" data-position="bottom right"> Animate Linear Combo </button>
<div id=vectorsInnerForm>
<h1> </h1>
<h1> x: </h1>
<h1> y: </h1>
<h1> z: </h1>
<h1> Coefficient </h1>
<h1> Select Vector </h1>
</div>
</div>
</div>
<div id=spansMenu class=menus>
<text> Spans </text>
<div id= spanSideBar class=form>
<div id = spanInputs>
<button id= "span" class="ui labeled icon button" data-tooltip="generate a subspace spanned by the checked vectors" data-position="right center"> span
<i class= "paint brush icon"></i>
</button>
<button id="deleteSpan" class="ui icon button">
<i class ="trash icon"></i>
</button>
</div>
<div id= spanDisplay>
<table id= "spanTable" width="100%">
<thead id="spanTableHeader">
<tr>
<th>Subspace No</th>
<th>Basis Vectors</th>
</tr>
</thead>
<tbody id="spanTableBody">
</tbody>
</table>
</div>
</div>
</div>
<script>
</script>
<div id=matricesMenu class=menus>
<text> Matrices </text>
<div id=matricesSideBar class=form>
<div id=matricesInputs>
<div class="ui vertical menu">
<div id="buttonDropDown" class="ui dropdown item"> choose button
<i class="dropdown icon"></i>
<div id="buttonsMenu" class="menu" style="display:none;" >
<button id = vTransform class="ui button" data-tooltip="transform the input vector by the input matrix" data-position="bottom right">
<i class="angle double right icon"></i> transformVector
</button>
<button id = columnSpace class="ui button" data-tooltip="generate columnspace of the input matrix" data-position="bottom right">
<i class = "paint brush icon" > </i>columnSpace
</button>
<button id = nullSpace class="ui button" data-tooltip="generate nullspace of the input matrix" data-position="bottom right">
<i class = "paint brush icon"> </i> nullSpace
</button>
<button id = restrictedRange class="ui button" data-tooltip="restrict the domain of the matrix and find the new range" data-position="bottom left"> <i class="angle double right icon"> </i> transformSubspace
</button>
<button id = eigenValues class="ui button" data-tooltip="find eigenvalues of the input matrix" data-position="bottom right">
<i class="angle search icon"></i> eigenValues
</button>
<button id = eigenSpace class="ui button" data-tooltip="select the eigenvalue and find the eigenspace" data-position="bottom right">
<i class = "paint brush icon"> </i> eigenSpace
</button>
</div>
</div>
</div>
<div id = eigenValueSelector>
<select id= evSelector class= "ui dropdown">
<option value = "" disabled selected hidden> please select... </option>
</select>
</div>
<div id = matricesTextsInputs>
<div id = matrixInput >
<div class = "ui input">
<input id = m11 class = "matrixInput" placeholder="m11"> </input>
</div>
<div class = "ui input" >
<input id = m12 class = "matrixInput" placeholder="m12"> </input>
</div>
<div class = "ui input" >
<input id = m13 class = "matrixInput" placeholder="m13"> </input>
</div>
<div class = "ui input" >
<input id = m21 class = "matrixInput" placeholder="m21"> </input>
</div>
<div class = "ui input" >
<input id = m22 class = "matrixInput" placeholder="m22"> </input>
</div>
<div class = "ui input" >
<input id = m23 class = "matrixInput" placeholder="m23"> </input>
</div>
<div class = "ui input" >
<input id = m31 class = "matrixInput" placeholder="m31"> </input>
</div>
<div class = "ui input" >
<input id = m32 class = "matrixInput" placeholder="m32"> </input>
</div>
<div class = "ui input">
<input id = m33 class = "matrixInput" placeholder="m33"> </input>
</div>
</div>
<div id = vectorInput>
<div class="ui input" ><input id = x class = "matrixInput" placeholder="x" > </input> </div>
<div class="ui input" ><input id = y class = "matrixInput" placeholder="y"class = " two wide column"> </input></div>
<div class="ui input" ><input id = z class = "matrixInput" placeholder="z" class = "two wide column"> </input></div>
</div>
</div>
</div>
<div id = matricesDisplay>
<div id = matricesTextDisplay> </div>
<table class="table" id= matricesTable width="100%">
<thead id = "matricesTableHeader">
<tr>
<th>Subspace No</th>
<th>Basis Vectors</th>
</tr>
</thead>
<tbody id = "matricesTableBody">
</tbody>
</table>
</div>
</div>
</div>
<div id="plotterMenu" class="menus">
<text> Plotter </text>
<div id="plotterForm" class="form">
<button id="addEqnBtn" class="ui labeled icon button"> Add Equation
<i class="plus icon"></i>
</button>
<button id="deleteEqnBtn" class="ui icon button">
<i class="trash icon"></i>
</button>
<button id="intersectBtn" class="ui labeled icon button"> Draw Intersection
<i class="pencil icon"></i>
</button>
<div id="plotterInputs">
<h1> Enter equation </h1>
<div class="ui input">
<input id="xCoeff" placeholder="a"/>
</div>
<div class="ui input">
<input id="yCoeff" placeholder="b"/>
</div>
<div class="ui input">
<input id="zCoeff" placeholder="cz"/>
</div>
<div class="ui input">
<input id="dConstant" placeholder="d"/>
</div>
</div>
<div id="eqnDisplay">
<table class="table" width="90%">
<thead>
<tr>
<th> Equation </th>
<th> Vectors </th>
</tr>
</thead>
<tbody id="eqnTableBody">
</tbody>
</table>
</div>
</div>
</div>
<div id="controlsMenu" class="five tiny compact ui inverted primary basic buttons">
<div id="rotateXButton" class="ui button">
x
</div>
<div id="rotateYButton" class="ui button">
y
</div>
<div id="rotateZButton" class="ui button">
z
</div>
<div id="resetCameraButton" class="ui icon button">
<i class="redo icon"></i>
</div>
<div id="clearButton" class="ui icon button">
<i class="eraser icon"></i>
</div>
</div>
<canvas id="stage"></canvas>
<script src="libraries/three.js"></script>
<script src="libraries/OrbitControls.js"></script>
<script src="libraries/numeric_1.2.6.js"></script>
<script src="logic/matrix.js"></script>
<script src="logic/graphics.js"></script>
<script src="logic/animations.js"></script>
<script src="logic/userInterface.js"></script>
</body>
</html>