-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
345 lines (297 loc) · 19.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
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 lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>UBC Snowbots</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/index_main.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/highlight.js/8.8.0/styles/default.min.css">
<script src="//cdn.jsdelivr.net/highlight.js/8.8.0/highlight.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="http://ubc-snowbots.github.io">
<i class="fa fa-play-circle"></i> <span class="light">UBC</span> Snowbots
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class = "page-scroll" href="#page-top">Top</a>
</li>
<li>
<a class="page-scroll" href="#Introduction">Intro</a>
</li>
<li>
<a class="page-scroll" href="#SampleCode">The Challenges</a>
</li>
<li>
<a class="page-scroll" href="#ROS">ROS</a>
</li>
<li>
<a class ="page-scroll" href="#contact">Completion</a>
</li>
<li>
<a href ="https://UBC-Snowbots.github.io/Tutorials/Snowflake">Vagrant Help</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Snowbots Tutorials</h1>
<p class="intro-text">Welcome to Snowbots<br>Here are the tutorials and resources to get you ready</p>
<a class="btn btn-circle page-scroll" href="#GettingStarted" >
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<section id="GettingStarted" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>Getting Started</h2>
<p>This year we have built a set of challenges and tutorials to better help new members ease into the workflow of Snowbots. </p>
<p>These challenges are here to get us all up to speed on each others' abilities, experience, and what we still need to learn. Basic assumptions made are that you can clear the first challenge on your own by looking things up online. Otherwise, we do not expect you to have much experience in API design or unit testing coming in, though if you do know all this, great! Regardless of your background, we are here to improve and learn from each other as a group. Debate and questions, especially disagreeing with us if something looks strange, are welcome.
</p><br>
<h4> The timeline for the start of this year is:</h4>
<p>1. By the first meeting (Sept. 12): Had a go at completing Challenge 1</p>
<p>2. During first meeting go over Challenges, ask questions, get help </p>
<p>3. Have Finn check both Challenges before signing up to your project </p>
</div>
</div>
</section>
<section id="Introduction" class="content-section text-center">
<div class="container-fluid">
<div class="col-lg-8 col-lg-offset-2">
<h2>Introduction to the Challenge</h2>
<h4>The Fizz Buzz</h4>
<p>For challenge 1, we thought it we would be boring to just have you solve FizzBuzz or some other simple problem, so to get you comfortable working with existing code, here are a couple of solutions to FizzBuzz, in C++ and Python. We want you to run these and see what they do, then extend them.</p>
<h4>Code Samples for the FizzBuzz Challenge</h4>
<p>Below are the FizzBuzz challenges in Python and C++ for you to choose from. Pick your choice of language and read through it. The source code can also be downloaded from git by clicking the titles. Your exact tasks will be described underneath the code samples.</p>
<div class = "row text-left">
<div class = "col-md-6">
<h4><a href = "http://pastebin.com/aDXTKsT2">Python Sample</a></h4>
<pre><code>
import sys
for n in range(1,101):
fizzbuzz = False
if n % 3 == 0:
fizzbuzz = True
sys.stdout.write('fizz')
if n % 5 == 0:
fizzbuzz = True
sys.stdout.write('buzz')
if not fizzbuzz:
sys.stdout.write(str(n))
sys.stdout.write('\n')
</code></pre></div>
<div class = "col-md-6">
<h4><a href = "http://pastebin.com/fZpiTpD6">C++ Sample </a></h4>
<pre><code>
#include <iostream>
#include <cstdlib>
int main(){
for(int i = 0; i < 101; ++i){
bool fizzbuzz = false;
if(i % 3 == 0){
fizzbuzz = true;
std::cout << "fizz";
}
if(i % 5 == 0){
fizzbuzz = true;
std::cout << "buzz";
}
if(!fizzbuzz){
std::cout << i;
}
std::cout << '\n';
}
return EXIT_SUCCESS;
}
</code></pre>
</div></div>
<br><br>
<h4>References and Resources</h4>
<p>A good reference for C++ can be found here: <a href ="http://www.cplusplus.com">http://www.cplusplus.com/</a>. It has up-to-date, standards-compliant information, and is my go-to 'reference book'. It also has a tutorial, though I'm sure you can find one if that's what you're looking for.</p>
<p>Python has some of the best documentation I have ever seen: <a href = "http://www.python.org/doc/"> https://www.python.org/doc/</a>. This covers from the basics to the deepest technicalities of the language and all its built-in modules.
</p>
<div class = "row">
<p>Here are a few methods that are commonly used to compile code with</p>
<div class = "col-md-4">
<h4><a href = "http://wiki.ros.org/catkin/Tutorials">ROS catkin</a></h4>
<p>ROS catkin is a set of macros built into ROS for managing code. This is the primary tool we use for code compilation in Snowbots.</p>
</div>
<div class = "col-md-4">
<h4><a href = "http://www.cprogramming.com/g++.html">g++</a> and <a href ="https://gcc.gnu.org/">gcc</a></h4>
<p>Here are the standard c and c++ compilers you can find in linux systems. Either click on the link or try $man g++ in the terminal. ($man is a very helpful command in linux)</p>
</div>
<div class = "col-md-4">
<h4><a href ="http://linux.die.net/man/1/python">Python terminal</a></h4>
<p>The link is the manual page to python for terminals. Look there to see how you can run your .py scripts</p>
</div>
</div>
<p>Interesting libraries/systems we may sometimes use, so you can look up what's in store, and more importantly learn how to use these as we work throughout the year:</p>
<div class = "row">
<div class = "col-md-6">
<h4><a href="http://www.boost.org">Boost</a></h4><p>Makes some C++ much easier to read/write. (iterators are awesome – the adventurous may try to rewrite the C++ version below using it)</p></div>
</li>
<div class = "col-md-6">
<h4><a href = "http://arma.sourceforge.net/download.html">Armadillo </a></h4><p>For that moment when you are tempted to write out the full, gory details of a matrix/other math operation in C++.
</p></div></div>
<div class = "row">
<div class = "col-md-6">
<h4><a href="http://www.cmake.org/documentation/">CMake</a></h4><p>Automates building and configuring software across platforms and computers. We use this for everything.</p>
</li></div>
<div class = "col-md-6">
<h4><a href="http://www.ros.org/">ROS</a></h4><p>Runs our robot, and has a special build system build on top of CMake called Catkin. We also use this for everything.</p>
</li></div>
</div>
</div>
</div>
</section>
<section id="SampleCode" class="content-section text-center">
<div class = "container-fluid">
<div class = "body">
<br><br>
<h2>Challenge 1: Extending FizzBuzz</h2>
<p>So, you've picked either C++ or Python, and you got it to compile/run. Now what? We want you to extend its behaviour.</p>
<p>The resulting program (PrimeBuzz) should perform exactly as it did originally, except when it encounters a prime number. Then, it should print “prime”, and only prime, except in the case where it would originally have printed “buzz” or "fizz" . Then, it should prepend “prime” to the original output. (eg. 3 originally was "fizz", thus it should now print "prime")</p>
<div class = "row">
<div class = "col-md-2"></div>
<div class = "col-md-4 text-left">
<h4>Example Output: </h4><p> 3->prime<br>4->4<br>23->prime<br>7->prime<br>15->FizzBuzz<br>11->prime<br>21->fizz<br>8->8</p>
</div>
<div class = "col-md-6 text-left">
<h4>Bonus points for unit-tested solutions. <br>Good frameworks for this are:</h4>
<p><a href="https://github.com/philsquared/Catch">CATCH for C++</a>
</p>
<p><a href="https://github.com/google/googletest">gtest, also for C++ </a>
</p>
<p><a href=" https://docs.python.org/2/library/unittest.html">The built-in unittest for Python </a>
</p>
</div>
</div><!--/div for "row"-->
<h2>Challenge 2: ROS Integration</h2>
<p>Now that you have your original code working, your next challenge is as follows:</p>
<p>1. Get ROS working<br>2. Get comfortable making nodes, testing nodes, reading the documentation, etc...<br>3. Make PrimeBuzz work as a ROS node
</p>
<p></p>
<p>To do this, we suggest you read some of the <a href="http://wiki.ros.org/ROS/Tutorials">ROS documentation</a>. To finish the challenge, you will want to know about <a href="http://wiki.ros.org/ROS/Tutorials/UnderstandingNodes">running nodes</a>, creating Publishers and Subscribers (<a href="http://wiki.ros.org/ROS/Tutorials/WritingPublisherSubscriber%28c%2B%2B%29">C++</a>/<a href="http://wiki.ros.org/ROS/Tutorials/WritingPublisherSubscriber%28python%29">Python</a>), creating Service providers (<a href="http://wiki.ros.org/ROS/Tutorials/WritingServiceClient%28c%2B%2B%29">C++</a>/<a href="http://wiki.ros.org/ROS/Tutorials/WritingServiceClient%28python%29">Python</a>), and the helpful ROS command-line tools <a href="http://wiki.ros.org/rostopic">rostopic</a> and <a href="http://wiki.ros.org/rosservice">rosservice</a>.</p>
<h3>What do you mean by "work as a ROS node"?</h3>
<p>To clarify exactly what "make PrimeBuzz work as a ROS node" means, we mean that your solution to Challenge 1 should start as a ROS node, emit its output as ROS messages (for Python) or provide a ROS service that returns the correct output (for C++, due to issues where messages published immediately on startup getting lost), and then shut down (or wait until it is killed, using Ctrl^C).</p>
<p>We will be looking at your node's output in a separate terminal using either rosservice or rostopic, and will expect to see some form of the FizzBuzzPrime output. Creative solutions different from those we have described here are welcome.</p>
<h3>FAQ</h3>
<h4>Where's my catkin workspace?</h4>
<p>Don't worry about creating a catkin workspace, the vagrant up script does it for you. Once you do <code>$ vagrant ssh</code>, you are already inside your catkin workspace.</p>
<h4>How do I sync files to the VM and back?</h4>
<p>Any modifications you make to <code>Snowflake/src</code> will be automatically synced to your Vagrant VM's <code>~/src</code> folder (and vice versa). The idea is that you can then edit in your main environment, and only use the Vagrant VM to compile and run your code. For more technical details as to what exactly makes this happen, take a look in <code>Snowlfake/cookbooks/snowbots/recipes/defaults.rb</code>, and take a look at the <a href="https://docs.vagrantup.com/v2/synced-folders/index.html">Vagrant documentation</a>.</p>
<h4>Where do I start?</h4>
<p>Our repository currently contains a single package called tutorial, which contains two nodes (creatively named cpp and py) that are Finn's attempts at solving Challenge 2. To start, you can try running these nodes and checking their output using <a href="http://wiki.ros.org/rosservice">rosservice</a> and <a href="http://wiki.ros.org/rostopic">rostopic</a>. cpp is supposed to provide a service called "prime_request", and py publishes messages on a topic called "primes".</p>
<h4>Why can't rosrun see my nodes?</h4>
<p>For ROS to be aware of any new nodes, messages or services you write, you need to run <code>$ source devel/setup.sh</code> in your VM's home folder, once in each terminal you have open.<p>
<h4> Why is a turlesim not showing up? </h4>
<p> You need to have X forwarding enabled for any GUI based things to show up. Instead of typing vagrant ssh type: ssh -X -p 2222 [email protected] </p>
</div></div>
</section>
<section id="ROS" class="content-section text-center">
<div class="project-section">
<div class="container">
<div class="body">
<h2>Resources on Integration with ROS</h2>
<h4>Setting up Git</h4>
<p>Getting Started with <a href = "https://www.codecademy.com/courses/learn-the-command-line">terminal</a><br>
Github's Instructions to Setting Up <a href = "https://help.github.com/articles/set-up-git/">Git</a></p>
<h4>Setting up a ROS environment</h4>
<p>We recommend using the Vagrant environment we provide on the Git repository for building. <a href = "https://github.com/UBC-Snowbots/Snowflake">Instructions to setting up the Vagrant environment.</a></p><p>
For the hardy, here is a link to the ROS website where you can get ROS working some other way: <a href = "http://wiki.ros.org/indigo/Installation">The Version Snowbots uses is Indigo.</a>
</p>
<h4>Notes on porting to ROS</h4>
<p>So, your PrimeBuzz works on the command-line, but what about as a ROS node? Your challenge is to make it run under ROS as a node, with exactly how this happens left to your discretion. Style points are involved, as the point of this is to help us get to know each other as programmers, and to see how we cope with the kind of things we will have to do throughout the year.</p><p>
The main thing we have in mind is that your design should be reasonably flexible, readable and future-proof. If you do not feel like you could come back to your code in a month and fix some obscure bug, either you can try refactoring it so it is more readable, or if there's something strange or unintuitive you need to do for it to work, commenting your rationale on the line above said thing can work too.</p><p>
If you have a question or get stuck, come find me [Finn] at the first session and we can go from there. This challenge is designed to extend into at least the second session, and is a catalyst for open debate, not a test.
</p>
<h4>Unit Testing</h4>
<p>Bonus points for unit tests are still a thing for challenge 2 – try having a look at <a href = "http://wiki.ros.org/rostest">http://wiki.ros.org/rostest</a>. We hope to keep this practice going for the entire project. If you remember CPSC 110 too well, then maybe the later stages of this project can help you see unit/integration/regression tests for how helpful they really are. Not having them can cause several types of pain in longer-term projects. (ask me [Finn] for examples if you like)
</p>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="container content-section text-center">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h2>Finished?</h2>
<p>Once you are done, please bring it to the next meeting you attend, or mail it in to us at our email!</p>
<p><a href="mailto:[email protected]">[email protected]</a>
</p>
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://facebook.com/UBC.Snowbots" class="btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
</li>
<li>
<a href="https://github.com/UBC-Snowbots/IGVC2015" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
</ul>
</div>
</div>
</section>
<!-- Map Section -->
<div id="map"></div>
<!-- Footer -->
<footer>
<div class="container text-center">
<p>Copyright © Snowbots 2015-2016</p>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5yKLhVTvvpUrobkzxIUyR2VAujTgYQF4"></script>
<!-- Custom Theme JavaScript -->
<script src="js/grayscale.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>