-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
288 lines (225 loc) · 12.4 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECE5 Lab 4</title>
<meta name="description" content="sketchbook">
<meta name="author" content="sketchbook">
<link rel="stylesheet" href="style.css"> <!-- this imports the CSS file. do not remove -->
</head>
<body>
<!-- ********************* HEADING START ********************* -->
<div class="heading">
<h3 class='name'>Justin Kane-Starr <br> Ivan Arredondo <br>Omar Cardoso <br> Henry Hammer</h3>
<h3 class=pId>PID: ???? <br> PID: ???? <br>PID: ???? <br> PID: ????</h3>
<h1>ECE 5 Website</h1> <!-- h1 is heading 1 -->
</div>
<!-- ********************* HEADING END ********************* -->
<!-- //////////////////////////////////////////////////////////////////////////////////////////////// -->
<!-- ********************* INTRO START ********************* -->
<section class="main">
<h2> Objective</h2>
<p1>The objective of lab 4 is to design and test a autonomous line following robot. We will be doing this in teams of four, each person having their own tasks contributing to the project.</p1>
<br><br>
<br><br>
<img src = 'https://i.imgur.com/I7GD8oh.png'>
<br><br>
<!-- ********************* INTRO END ********************* -->
<!-- //////////////////////////////////////////////////////////////////////////////////////////////// -->
<!-- ********************* BUTTONS START ********************* -->
<!---------------------------------------- BUTTON 1 ---------------------------------------->
<div class='center'>
<button type='button' onclick="toggleText1()" class="btn">Challenges #1 & #2</button>
</div> <!--end of div class center -->
<div class="interactive" id='interactive1' style='display: none'>
<div class='box1'>
<br>
<img src = 'https://lh3.googleusercontent.com/4QSaNvAtvonpkazhjnWcMvMsWkGzwgC3JyyvtuG9xCq29BoPq9SUCtA8ptSgjnUiB9OUsx1ZVX8vX_Z3CKefdHRW-JSTEJf8DWr66hNi0a-kC2JcyykIPfJ3uBdyQ2HOzKfzTc6z=w600' class='imgmar'>
<img src = 'https://lh3.googleusercontent.com/5_4idexKpIZmRt_U0AK9cyNYSua4O-qppJQHYEUcKja6uSl-EXYzgA-ecBoxPhfUnJ8IUzHJxJkc_19WwPpu81I5rGGrVLOfAKg7twiZox_YKAp-kEVWF1jE6Wl4znljcHLmzy3V=w600' class='imgmar'>
<br>
<img src = 'https://i.imgur.com/U71xsoJ.png' class='imgmar'>
<img src = 'https://i.imgur.com/jGdtznn.png' class='imgmar'>
<!-- to insert image replace the link to the image of choice ** note: keep the quotations -->
<br>
<p2>IMG1 Add a picture of your breadboarded potentiometers <br>
IMG2 Add picture of your breadboarded photoresistors</p2>
<br><br>
<p class='box2'>
Comments on output?
What range of values did your potentiometer output?
Did Turning your potentiometer clockwise increase or decrease the value?
<br><br>
  The potentiometers output in a range from 0 to 100 inclusively.
Turning the potentiometers clockwise increased the output.
<br><br><br>
What range of values did your photo resistors output for a white surface and for a black surface?
<br><br>
  For black surfaces the photo resistor read values of less than 20, and white surfaces read values clearly above 80.
</p> <!-- p is paragraph -->
</div> <!-- This is the end of div box1 -->
</div> <!-- This is the end of div interactive -->
<!---------------------------------------- BUTTON 2 ---------------------------------------->
<div class ='center'> <!-- we put the buton in a container to center it -->
<button type='button' onclick="toggleText2()" class="btn">Challenge #3 & #4</button>
</div> <!--end of div class center -->
<div class="interactive" id='interactive2' style='display: none'>
<div class='box1'>
<br>
<img src = 'https://i.imgur.com/5s1MWoV.png' class = 'imgmar'>
<img src = 'https://i.imgur.com/jrge52q.png' class='imgmar'>
<img src = 'https://i.imgur.com/jZ67gVC.png' class='imgmar'>
<!-- to insert image replace the link to the image of choice ** note: keep the quotations -->
<br>
<p2>IMG1 Add a screenshot of your solidworks chasis model <br>
IMG2 Add picture of your 3D printed chasis</p2>
<br><br>
<p class='box2'>
Explain what you have created, what functional modifications (need at least 2)
you made to the design and add a picture of your 3D printed chassis.
<br><br>
  We added a top level to the chassis that will encase the motors and battery internals. The top also has a large slit for wires to connect through and will be the resting point of the arduino.
</p> <!-- p is paragraph -->
</div> <!-- This is the end of div interactive -->
</div> <!-- This is the end of div box1 -->
<!---------------------------------------- BUTTON 3 ---------------------------------------->
<div class ='center'>
<button type='button' onclick="toggleText3()" class="btn">Challenge #3 & #4</button>
</div> <!--end of div class center -->
<div class="interactive" id='interactive3' style='display: none'>
<div class='box1'>
<br>
<img src = 'https://i.imgur.com/FTDLq4L.jpg' class='imgmar'>
<img src = 'https://i.imgur.com/M5IctDO.jpg' class='imgmar'>
<!-- to insert image replace the link to the image of choice ** note: keep the quotations -->
<br>
<p2>IMG1 Add a picture vehicle including chassis, wheels, motors, and caster <br>
IMG2 Add picture of your soldered motor shield connected to an Arduino mega</p2>
<br><br>
<p class='box2'>
What is the purpose of the motor driver/shield?
<br><br>
  The purpose of the motor shield is to add an extension to the circuit that has a separate power supply but is not connected to the arduino. This is because the motors draw too much power and supplying the arduino with an equal amount would damage the internal circuits.
</p> <!-- p is paragraph -->
</div> <!-- This is the end of div interactive -->
</div> <!-- This is the end of div box1 -->
<!---------------------------------------- BUTTON 4 ---------------------------------------->
<div class ='center'>
<button type='button' onclick="toggleText4()" class="btn">Challenge #6 & #7</button>
</div> <!--end of div class center -->
<div class="interactive" id='interactive4' style='display: none'>
<div class='box1'>
<br>
<img src = 'https://i.imgur.com/MSCs1yf.jpg' class='imgmar'>
<!-- to insert image replace the link to the image of choice ** note: keep the quotations -->
<br>
<p2>IMG1 Add a picture of your fully assembled robot with all components and circuitry</p2>
<br><br>
<p class='box2'>
Challenge #7: Explain why you need to calibrate your photoresistor values.
What problem does this help solve and what problems do you still see coming from your photoresistors?
<br><br>
  The robot needs to be calibrated every time its used because different times of days and rooms have different lighting, causing our robot to veer off course. Values that we use in the envision maker laber might not work for the main lecture hall or outside.
</p> <!-- p is paragraph -->
</div> <!-- This is the end of div interactive -->
</div> <!-- This is the end of div box1 -->
<!---------------------------------------- BUTTON 5 ---------------------------------------->
<div class ='center'>
<button type='button' onclick="toggleText5()" class="btn">Challenge #8</button>
</div> <!--end of div class center -->
<div class="interactive" id='interactive5' style='display: none'>
<div class='box1'>
<br>
<img src = 'https://i.imgur.com/OBbJPwp.jpg' class='imgmar'>
<!-- to insert image replace the link to the image of choice ** note: keep the quotations -->
<br>
<p2>IMG1 Add a picture of your robot following a line
(please also attach any updated video to your submission under the video tab)</p2>
<br><br>
<p class='box2'>
What was the best PID values that you used? How well did this track? Any limitations?
<br><br>
  The PID values we used were P = 13 I = 0 and D = 0
<br><br><br>
What does PID stand for? What is the purpose of the P, the I, and the D?
What steps did you take to choose the best values for your robot?
Explain this like you would for someone taking this course next year.
<br><br>
  PID stands for proportional integral derivative, which means nothing on its own. We adjusted our PID with lower D values so it does not jidder as hard and moderate I values.
</p> <!-- p is paragraph -->
</div> <!-- This is the end of div interactive -->
</div> <!-- This is the end of div box1 -->
<!---------------------------------------- BUTTON 6 ---------------------------------------->
<div class ='center'>
<button type='button' onclick="toggleText6()" class="btn">Video</button>
</div> <!--end of div class center -->
<div class="interactive" id='interactive6' style='display: none'>
<div class='box1'>
<br>
<p class='box2'>
Insert a video of your robot in action!
Here is the link just in case
<a href="url">https://youtu.be/1XUtHhgSPSg</a>
</p> <!-- p is paragraph -->
<iframe width="420" height="315" src="https://youtube.com/embed/slUrAwPq0jk"allowfullscreen> </iframe>
<br>
</div> <!-- This is the end of div interactive -->
</div> <!-- This is the end of div box1 -->
<!-- ********************* BUTTONS END ********************* -->
<!-- //////////////////////////////////////////////////////////////////////////////////////////////// -->
</section>
<!-- This is the end of our section -->
</body>
<!-- //////////////////////////////////////////////////////////////////////////////////////////////// -->
<!-- ********************* JAVASCRIPT CODE ********************* -->
<script>
function toggleText1(text) {
var text = document.getElementById("interactive1");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function toggleText2(text) {
var text = document.getElementById("interactive2");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function toggleText3(text) {
var text = document.getElementById("interactive3");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function toggleText4(text) {
var text = document.getElementById("interactive4");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function toggleText5(text) {
var text = document.getElementById("interactive5");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
function toggleText6(text) {
var text = document.getElementById("interactive6");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}
</script>
</html>
<!--add poster (outside) and video tabs / tab of team photo, tab of team logo-->