-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
319 lines (312 loc) · 11.9 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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html>
<head>
<title>
FLS
</title>
<link rel="stylesheet" href="index.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap"
rel="stylesheet"
/>
<meta charset="UTF-8" />
</head>
<body>
<nav class="stroke">
<ul class="navbar_links">
<li id="FLS">
<a
class="active"
href="index.html"
>FLS</a
>
</li>
<li id="AboutUs">
<a href="about_us.html">About us</a>
</li>
<li id="Help"><a onclick="scrollSmooth('help_link')">Help</a></li>
</ul>
</nav>
<hr noshade="" />
<div class="canvas-wrapper">
<div id="backdrop-modal" class="backdrop"></div>
<div id="clear-modal" class="modal" style="display: none;">
<p>Are you sure you want to clear route?</p>
<p class="paragraph">You can't undo this action.</p>
<button class="button" onclick="confirmModal()">Yes</button>
<button class="button" onclick="closeModal()">No</button>
</div>
<div id="canvas-overlay" class="canvas-overlay">
<div id="start-modal" class="modal" style="display: block;">
<p>
<h4>Choose robot starting orientation.</h4>
</p>
<p class="paragraph">
You can go and read help <a class="text" onclick="scrollSmooth('help_link')"">here</a>.
</p>
<button class="button" onclick="startingUp()">Facing up</button>
<button class="button" onclick="startingRight()">Facing right</button>
</div>
</div>
<div class="order_information">
<div class="buttons">
<button
id="addAction"
type="button"
onclick="addAction(points,redoList)"
disabled
>
Add Action
</button>
<button
id="Undo"
type="button"
onclick="undoButton(ctx, img, points, redoActionList)"
disabled
>
Undo
</button>
<button
id="redo"
type="button"
onclick="redoButton(redoList, points)"
disabled
>
Redo
</button>
<button id="clearPath" type="button" onclick="openModal()" disabled>
Clear Route
</button>
</div>
<div class="move_right">
<div class="input_information">
<form onsubmit="(event) => {event.preventDefault(); addCoord()}">
<ul class="input_information_list">
<li class="input_text">
x:
<input type="number" id="x_coord" class="input_box" oninput="coordCheck()" />
</li>
<li class="input_text">
y:
<input type="number" id="y_coord" class="input_box" oninput="coordCheck()" />
</li>
<li>
<div class="buttons">
<button
id="add_point"
type="button"
onclick="addCoord(event)"
disabled
>
Add
</button>
</div>
</li>
</ul>
</form>
</div>
</div>
</div>
<div style="display: flex;">
<div
id="canvasDivisor"
style="position: relative; display: inline-block;"
>
<canvas
onclick="onCanvasClick(event)"
id="canvas"
width="800"
height="387"
style="border:2px solid #d3d3d3;"
>
</canvas>
</div>
<div
style="position: relative; display: inline-block; height: 400px; width: 30%; overflow-y: scroll;"
>
<div class="list">
<div id="listOfPoints">List of points:</div>
<ol id="orderedList"></ol>
</div>
</div>
</div>
<div class="input_information">
<form>
<ul class="input_information_list">
<li class="input_text">
Wheel Diameter:
<input
type="number"
class="input_box"
id="wheelSize"
value = 5.5
oninput="generateEstimate()"
/>
</li>
<li class="input_text">
Speed:
<input
type="number"
class="input_box"
id="speed"
value = 50
oninput="generateEstimate(); redefineLastSpeed()"
/>
</li>
<li class="input_text" id="align">
Estimated Route Time:
<div id="time_estimate"></div>
</li>
</ul>
<ul class="input_information_list">
<li class="input_text">
Axle Length:
<input
type="number"
class="input_box"
id="axleLength"
value = 12
/>
</li>
<li class="input_text" id="align">
Backwards Motors
<input type="checkbox" id="backwardsMotors" />
</li>
</ul>
</form>
</div>
<div class="generate">
<button
id="create"
type="button"
class="generateButton"
onclick="handleGenerateClick(event)"
disabled
>
GENERATE
</button>
</div>
<br>
</div>
<hr noshade="" />
<div style="position: relative;">
<div id="help_section" class="helpFLS">
<h1 id="help_link">Help</h1>
<div class="text_section">
<h3 id="reqs">Requirements</h3><br>
To use this program you will need:<br>
-<a class="text" href="https://github.com/html-ninjas/FLS/raw/master/FLS_MyBlock.zip" download>FLS MyBlock</a><br>
-access to the internet and the FLS website (this one)<br>
</div>
<div class="text_section">
<h3 id="setup">Setup</h3><br>
After the page loads, you’ll be offered to choose the starting
orientation of your robot by clicking on one of 2 buttons "Up"
or "Right". The Next part of the setup is entering the values
for: "Wheel Diameter", "Speed" and "Axle Length" into boxes
so that Estimated Route Time can be calculated.
For the program to work properly the page needs to be scrolled to the top.
</div>
<div class="text_section">
<h3 id="points">Points</h3><br>
There are 2 types of points in FLS:
<h4 class="section-link" id="yellow_point">Yellow point</h4>
The yellow point is a “waypoint”, meaning that it indicates the place
where your robot will be heading, and you'll probably utilize it more than the
<a class="text" onclick="scrollSmooth('green_point')">Green point</a>
To add a yellow point left-click on the picture of the FLL mat or by
holding shift and left-clicking. If you just left-click to add a point you'll get a
<a class="text" onclick="scrollSmooth('red_line')">Red line</a>,
but if you hold shift while left-clicking, you'll get a
<a class="text" onclick="scrollSmooth('blue_line')">Blue line</a>.
<h4 class="section-link" id="green_point">Green point</h4>
The green point is an “action point”, meaning that it indicates a
custom action which can be programmed in the “FLS MyBlock”. To get a
green point you have to press the
<a class="text" onclick="scrollSmooth('add_actionb')">"Add Action"</a>
button which will create a green point on top of the last yellow point.
</div>
<div class="text_section">
<h3 id="lines">Lines</h3><br>
There are also 2 types of lines in this program:
<h4 class="section-link" id="red_line">Red line</h4>
A
<a class="text" onclick="scrollSmooth('yellow_point')">Red line</a>
means that your robot will drive forwards between 2 points.
<h4 class="section-link" id="blue_line">Blue line</h4>
A
<a class="text" onclick="scrollSmooth('yellow_point')">Blue line</a>
means that your robot will drive backwards between 2 points.
</div>
<div class="text_section">
<h3 id="buttons">Buttons</h3><br>
There are 6 buttons which you can use by left-clicking on them:
<h4 class="section-link" id="add_actionb">Add Action</h4>
The “Add Action” button is used to make a pause in the route which
allows you to program a specific task you need your robot to accomplish.
After your custom program finishes the robot will resume with the rest of the route.
<h4 class="section-link" id="undo_button">Undo</h4>
Left-clicking on the "Undo" button will remove the
last point, line or action you added.
<h4 class="section-link" id="redo_button">Redo</h4>
Left-clicking on the "Redo" button will return the last point,
line or action which was removed by the
<a class="text" onclick="scrollSmooth('undo_button')">"Undo"</a>
button.
<h4 id="clear_path">Clear Route</h4>
Left-clicking on the "Clear route" button will clear all points,
lines and actions, keep in mind that this cannot be reversed.
<h4 id="add_button">Add Point</h4>
First, fill in the X and Y boxes with the desired coordinates
and then press the "Add Point" button to add the point to the route.
1 unit in this coordinate system is 1cm in person.
</div>
<div class="text_section">
<h3 id="inputs">Inputs</h3><br>
There are 3 other inputs, one checkbox and Estimated Route Time.
<h4 class="section-link" id="wheel_diameter">Wheel diameter</h4>
Enter the diameter of your wheel (in cm), this is used for calculating angles and
<a class="text" onclick="scrollSmooth('est_time')"
>Estimated route time</a>.
<h4 class="section-link" id="speed_input">Speed</h4>
Write the desired motor speed you use in EV3 to get
<a class="text" onclick="scrollSmooth('est_time')"
>Estimated route time.</a
>
<h4 class="section-link" id="est_time">Estimated route time</h4>
Estimated route time is calculated with
<a class="text" onclick="scrollSmooth('wheel_diameter')"
>Wheel diameter</a
>,
<a class="text" onclick="scrollSmooth('speed_input')"
>Speed</a
>
aand the total length of the route. This does not include the
duration of actions because you will be programming them by yourself.
<h4 id="axle_length">Axle length</h4>
Enter the distance (in cm) between the middle (halfway point between
the inner and outer side of the tire) of the wheels.
<h4 id="backwards_motors">Backwards motors</h4>
If your robot is built so that if it drives forwards with negative
power then you should check the "Backwards Motors" checkbox.
</div>
<div class="text_section">
<h3 id="list_&_generate">List and generate</h3><br>
<h4 id="list_help">List of points</h4>
The List of Points will show the list of all points and actions in the order you added them.
The speed with which the robot will move from the current point to the next is displayed
on the right side of the coordinates of a point.
<h4 id="generate">Generate</h4>
Left-clicking on the "Generate" button will generate a text file used in the “FLS MyBlock”.<br />
<button onclick="window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});">Back to top</button>
</div>
</div>
</div>
<script src="borna_math.js"></script>
<script src="index.js"></script>
</body>
</html>