robocon/index.html at master · Robotics-NITK/robocon · GitHub

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
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE HTML>

<html>
	<head>
		<title>CSD Robocon NITK</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<link href="https://fonts.googleapis.com/css?family=Russo+One" rel="stylesheet">
	</head>
	<body>

		<!-- Header -->
			<header id="header" class="alt">

				<div class="logo">
					<img style="height:90%" src="images/rob.gif">
					<a href="index.html"> CSD Robocon NITK <span>Centre For System Design, NITK Surathkal</span>
					</a>
						<!--div class="image fit"></div--><img style="height:95%"  src="images/CSD_Logo.jpg">
						<img style="height:95%" src="images/NITK_logo.png">
				</div>
			<!-- Nav 		<a href="#menu" class="toggle"><span>Menu</span></a>-->
			</header>

		<!-- Nav
			<nav id="menu">
				<ul class="links">
					<li><a href="index.html">Home</a></li>
					<li><a href="generic.html">Generic</a></li>
					<li><a href="elements.html">Elements</a></li>
				</ul>
			</nav>
-->
		<!-- Banner -->
		<!--
			To use a video as your background, set data-video to the name of your video without FontAwesome;
			its extension (eg. images/banner). Your video must be available in both .mp4 and .webm
			formats to work correctly.
		-->
			<section id="banner" data-video="images/banner">
				<div class="inner">
					<img style="width:300px; " src="images/rob.gif">
					<p><br></p>
					<h1 style="font-family: 'Russo One', sans-serif;">CSD ROBOCON NITK</h1>
					<p>
						The Robocon Team from NITK Surathkal<br />
						<br />
					</p>
					<a href="#three" class="button special scrolly">Enter</a>
				</div>
			</section>
		<!-- Three -->
			<section id="three" class="wrapper style2">
				<div class="inner">
					<div class="grid-style">
						<div>
							<div class="box">
									<div id="trailer"></div>
									<div class="content">
										<header class="align-center">
											<h2>NITK Robocon 2018 Trailer</h2>
											<p>CSD ROBOCON NITK 2018</p>
										</header>
										<hr />
										<p> </p>
									</div>
							</div>
						</div>

						<div>
							<div class="box">
									<div id="theme2018"></div>
									<div class="content">
										<header class="align-center">
											<h2>ABU Robocon 2018 : Vietnam</h2>
											<p>Theme Video</p>
										</header>
										<hr />
										<p> </p>
									</div>
							</div>
						</div>

					</div>
				</div>
			</section>


					<!-- Two -->
			<section id="two" class="wrapper style3">
				<div class="inner">
					<div id="flexgrid">
						<div>
							<header>
								<h3>The Story</h3>
							</header>
							<p> Get to know the story behind the first Robocon Team from NITK to take part in ABU Robocon.</p>
							<ul class="actions">
								<li><a href="#" class="button alt">Learn More</a></li>
							</ul>
						</div>
						<div>
							<header>
								<h3>The Gallery</h3>
							</header>
							<p> Photos and Videos from the Journey of CSD Robocon NITK 2018 Team </p>
							<ul class="actions">
								<li><a href="#" class="button alt">View Gallery</a></li>
							</ul>
						</div>
						<div>
							<header>
								<h3>Meet the Team</h3>
							</header>
							<p>The CSD Robocon NITK Team<br> .</p>
							<ul class="actions">
								<li><a href="#" class="button alt">Know More</a></li>
							</ul>
						</div>
					</div>
				</div>
			</section>

		<!-- One -->
			<section id="one" class="wrapper style2">
				<div class="inner">
					<div>
						<div class="box">
							<img width= "100%" src="images/duo.jpg" />
							<div class="content" style="color:black">
								<header class="align-center">
									<h2 style="font-family: 'Russo One', sans-serif;">ABU Robocon</h2>
									<p>The Ultimate Robotics Contest for Undergraduates</p>
								</header>
								<hr />
								<p align="justify">
									<font face="arial" color="black">
									CSD-Robocon-NITK Team takes part in the Ultimate Robotics Contest for Undergraduates –
									ABU Robocon. We build Robots that aim at incredible Precision, Reliability and Speed or
									in other words Industrial performance.
									Every year (since 2002), one of the member countries of Asia Pacific Broadcasting Union
									which Doordarshan – India is part of, hosts the ABU Robocon. In August of 2017, ABU Robocon
									2018, theme and rules were announced by Vietnam and the journey began for, the First Team
									from NITK to take part in Robocon.
									<br> <br>
									<div class="image fit"><img width= "24%" src="images/man.jpg" alt="" /></div>
									<div class="image fit"><img width= "25%" src="images/man1.jpg" alt="" /></div>
									<div class="image fit"><img width= "25%" src="images/man2.jpg" alt="" /></div>
									<div class="image fit"><img width= "24%" src="images/man3.jpg" alt="" /></div>
									<br> <br>
									To take part in Robocon, the team must not only be proficient and innovative in Mechanical Design,
									Electronics Design and Programming but also back it up with soft skills like Building/Manufacturing
									skills, Management (Time and Resources and Team Dynamics), but above all must have a constant drive
									and motivation to keep going ahead.
									<br> <br>
									As a rookie team, we are proud to say, we not only created two bots that reliably complete the task,
									but made NITK proud, on National Television by baging the
									<b>“First time Best Usage of MATLAB”</b> Award.
									Quoting Veer Alakshendra, Student Competition Technical Evangelist, MathWorks India Pvt. Ltd.
									<b> “The MathWorks team was happy to see the model based design workflow: design, simulate and deploy...”.</b>
									<br> <br>
									<div class="image fit2"><img width= "47%" src="images/group.jpg" alt="" /></div>
									<div class="image fit2"><img width= "52%" src="images/prototype.jpg" alt="" /></div>
									<br> <br>
									To achieve this, we followed a systematic Product Development Approach - from Concept
									Development, Design Stage, Prototyping to Manufacturing. The Design of Mecanum 4WD for
									Automatic Bot and Omni Wheel drive used in Manual Bot, were tested in Simulink/MATLAB by
									MathWorks. The SolidWorks model of the bot’s chassis with the drive assembly were imported
									into Simulink. Then the inverse kinematics required in control of Holonomic Drive used in
									the bots were tested in simulation before deploying to hardware. This approach was also
									expanded to higher layer of control/decision making (Line Following, Path Planning etc.).
									This approach combined with the professionalism in Simulink program is what won us the Award.
									<br> <br>
									<img width = "100%" src="images/Board.jpg" alt="" />
									<br> <br>
									From Conceptualization to Competing, the team has a learnt many lessons and made many
									mistakes,. But in the following year in ABU Robocon 2019 (Mongolia) we execute the lessons
									learnt and correct our mistakes and aim for absolute excellence in every aspect of the
									project.
									<br> <br>
									<div class="image fit2"><img width = "60%" src="images/team.jpg" alt="" /></div>
										<div class="image fit2"><img width= "39%" src="images/award.JPG" alt="" /></div>
									</font>
								</p>
							</div>
						</div>
					</div>
				</div>
			</section>


			<section id="zero" class="wrapper style2">

				<div class="box">


					<div class="content">
						<header class="align-center">
								<div id="theme2019"></div>
							<h2>ABU Robocon 2019 - Mogolia</h2>
							<p>Theme Video</p>
						</header>
						<hr />
						<p> </p>
					</div>
				</div>
			</section>


		<!-- Four -->
			<section id="four" class="wrapper style3">
				<div class="inner">

					<header class="align-center">
						<h2>Contact Us:</h2>
						<font size="5em">
						<img style="width:1.5em" src="images/email-icon.png">
						robocon@nitk.edu.in
						<img style="height:1em; padding-left: 5em;" src="images/telephone-icon.png">
						+91 9980402770
						</font>
					</header>

				</div>
			</section>

		<!-- Footer -->
			<footer id="footer" class="wrapper">
				<div class="inner">
					<section>
						<div class="box">
							<div class="content">
								<h2 class="align-center">Get in Touch</h2>
								<hr />
								<form action="https://formspree.io/robocon@nitk.edu.in" method="POST" />
									<div class="field half first">
										<label for="name">Name</label>
										<input name="name" id="name" type="text" placeholder="Name">
									</div>
									<div class="field half">
										<label for="email">Email</label>
										<input name="email" id="email" type="email" placeholder="Email">
									</div>
									<div class="field">
										<label for="dept">Department</label>
										<div class="select-wrapper">
											<select name="dept" id="dept">
												<option value="">- Category -</option>
												<option value="1">Manufacturing</option>
												<option value="1">Shipping</option>
												<option value="1">Administration</option>
												<option value="1">Human Resources</option>
											</select>
										</div>
									</div>
									<div class="field">
										<label for="message">Message</label>
										<textarea name="message" id="message" rows="6" placeholder="Message"></textarea>
									</div>
									<ul class="actions align-center">
										<li><input value="Send Message" class="button special" type="submit"></li>
									</ul>
								</form>
							</div>
						</div>
					</section>
					<div class="copyright">
						&copy; CSD Robocon: <a href="https://templated.co/">TEMPLATED</a>.
					</div>
				</div>
			</footer>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrolly.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/skel.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>


			<script>
			var tag = document.createElement('script');
			tag.src = "https://www.youtube.com/player_api";
			var firstScriptTag = document.getElementsByTagName('script')[0];
			firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

			var player;
			var player1;
			function onYouTubePlayerAPIReady() {
				player1 = new YT.Player('theme2019', {
				height: '360',
				width: '100%',
				videoId: 'WVmb6lSDFj4'
				});
				player = new YT.Player('trailer', {
				height: '360',
				width: '100%',
				videoId: 'wKATlwtEhoc'
				});
				player = new YT.Player('theme2018', {
				height: '360',
				width: '100%',
				videoId: 'GAjVA2u-_1s'
				});

			}

			$(function() {

    var $allVideos = $("iframe[src^='//player.vimeo.com'], iframe[src^='//www.youtube.com'], object, embed"),
    $fluidEl = $("figure");

	$allVideos.each(function() {

	  $(this)
	    // jQuery .data does not work on object/embed elements
	    .attr('data-aspectRatio', this.height / this.width)
	    .removeAttr('height')
	    .removeAttr('width');

	});

	$(window).resize(function() {

	  var newWidth = $fluidEl.width();
	  $allVideos.each(function() {

	    var $el = $(this);
	    $el
	        .width(newWidth)
	        .height(newWidth * $el.attr('data-aspectRatio'));

	  });

	}).resize();

});

			</script>


	</body>
</html>