forked from RobotWebTools/robotwebtools.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
321 lines (303 loc) · 12.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
320
321
<!DOCTYPE HTML>
<html>
<head>
<title>Robot Web Tools</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800" rel="stylesheet"
type="text/css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none">
</script>
<script src="js/jquery.dropotron-1.2.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-39765480-1', 'robotwebtools.org');
ga('send', 'pageview');
</script>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->
</head>
<body class="homepage">
<a href="https://github.com/RobotWebTools"><img
style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
alt="Fork us on GitHub"> </a>
<!-- Header Wrapper -->
<div id="header-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<h1>
<a href="#" class="mobileUI-site-name">RobotWebTools</a>
</h1>
<!-- Nav -->
<nav id="nav" class="mobileUI-site-nav">
<ul>
<li class="current_page_item"><a href="index.html">Home</a></li>
<li><a href="tools.html" class="arrow">Tools</a>
<ul>
<li><a href="tools.html#libraries">Libraries</a></li>
<li><a href="tools.html#widgets">Widgets</a></li>
<li><a href="tools.html#systems">Systems</a></li>
<li><a href="tools.html#server-side">Server-Side</a></li>
</ul>
</li>
<li><a href="demos.html" class="arrow">Demos</a></li>
<li><a href="community.html">Community</a></li>
</ul>
</nav>
</div>
</header>
<!-- Banner -->
<div id="banner">
<h2>
<strong>Robot Web Tools</strong> is a collection of open-source modules and tools for
building web-based robot apps.
</h2>
<p>Want to see Robot Web Tools in action?</p>
<a href="demos.html" class="button button-big button-icon button-icon-check">View
Demos</a>
</div>
</div>
</div>
</div>
</div>
<!-- Main Wrapper -->
<div id="main-wrapper">
<div class="main-wrapper-style1">
<div class="inner">
<!-- Feature 1 -->
<section class="5grid-layout box-feature1">
<div class="row">
<div class="12u">
<header class="first major">
<h2>Bringing Robots to your Favorite Browser</h2>
<span class="byline">Robot Web Tools allows web applications to interface
with a variety of robots running middleware like the popular <strong>Robot
Operating System (ROS)</strong> using the latest in <strong>HTML5</strong>
and <strong>JavaScript</strong>.</span>
</header>
</div>
</div>
<div class="row">
<div class="4u">
<section>
<span class="image image-full"><a href="demos/urdf.html"><img
src="images/demos/ros3djs-fetch-urdf.jpg" /> </a> </span>
<header class="second second-friends">
<h3>3D Interactions</h3>
<span class="byline">Using the latest in WebGL</span>
</header>
</section>
</div>
<div class="4u">
<section>
<span class="image image-full"><img src="images/pic02.jpg" /> </span>
<header class="second second-gear">
<h3>Multi-Platform Support</h3>
<span class="byline">Harnessing the power of ROS</span>
</header>
</section>
</div>
<div class="4u">
<section>
<span class="image image-full"><img src="images/pic03.jpg" /> </span>
<header class="second second-chart">
<h3>Towards Compatibility</h3>
<span class="byline">More browsers, more robots.</span>
</header>
</section>
</div>
</div>
</section>
</div>
</div>
<div class="main-wrapper-style2">
<div class="inner">
<!-- Feature 2 -->
<section class="5grid-layout box-feature2">
<div class="row">
<div class="6u">
<section class="pad-right">
<header class="major">
<h2>Robot Web Architecture</h2>
<span class="byline">Bridging Robots and the Web</span>
</header>
<p>
A variety of routes are available for architecting a robot web application. A
common route is building web technologies on an existing robot framework. The <a
href="http://www.ros.org/wiki/">Robot Operating System (ROS)</a> is one of the
more popular robot middlewares to build upon.
</p>
<p>
ROS is one of the top frameworks to program robots and can run on a variety of
robots, from a <a href="http://turtlebot.com/">TurtleBot</a> to a <a
href="http://www.willowgarage.com/pages/pr2/overview">PR2</a> to an <a
href="http://www.arduino.cc/">Arduino</a> connected to a computer. ROS - and
other robot middleware frameworks - provide common robot functionality, including
drivers for interfacing with a variety of sensors and actuators and algorithms for
navigation, perception, and manipulation.
</p>
<footer>
<a href="http://www.ros.org/wiki/"
class="button button-medium button-icon button-icon-rarrow">Find out more</a>
</footer>
</section>
</div>
<div class="6u">
<section class="pad-left">
<header class="major">
<h2>rosbridge as a Transport</h2>
<span class="byline">Using JSON to Speak to your Robot</span>
</header>
<p>
While ROS works great for applications on the robot, another layer is needed to
connect external devices and applications.
rosbridge is both a JSON spec for interacting with ROS and a transport layer,
providing a WebSocket for clients to communicate over.
</p>
<p>
In the browser layer sits the core JavaScript libraries:
<a href="https://github.com/RobotWebTools/roslibjs">roslibjs</a>,
<a href="https://github.com/RobotWebTools/ros2djs">ros2js</a>, and
<a href="https://github.com/RobotWebTools/ros3djs">ros3djs</a>. These libraries
communicate with ROS on the robot over rosbridge's WebSocket server. It's a lightweight,
evented library that provides a convenient abstraction to core ROS functionality.
</p>
<p>
The real benefits of the Robot Web Tools organization is JavaScript modules and
tools that build off these foundations. Check out the <a href="tools.html">Tools</a>
section for a list of what the community has contributed. And please <a
href="https://github.com/RobotWebTools/robotwebtools.github.com/">add your
own</a>!
</p>
</section>
</div>
</div>
</section>
</div>
</div>
<div class="main-wrapper-style3">
<div class="inner">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<header class="first major">
<h2 class="icon icon-paper">Cite Us!</h2>
<span class="byline">Using Robot Web Tools in your research or project? We'd appreciate
a citation to the <a href="pdf/paper.pdf">following paper</a>:</span>
<p>Russell Toris, Julius Kammerl, David Lu, Jihoon Lee, Odest Chadwicke Jenkins,
Sarah Osentoski, Mitchell Wills, and Sonia Chernova.
<strong>Robot Web Tools: Efficient Messaging for Cloud Robotics</strong>. In
<em>Proceedings of the IEEE/RSJ International Conference on Intelligent Robots
and Systems</em> (IROS), 2015</p>
</header>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer Wrapper -->
<div id="footer-wrapper">
<footer id="footer" class="5grid-layout">
<div class="row">
<div class="6u">
<section>
<h2>
Check us out on <strong>GitHub</strong>!
</h2>
<p>Robot Web Tools hosts all of its code on GitHub. We encourage contributions and
feedback on all of our projects.</p>
<a href="http://github.com/robotwebtools"
class="button button-alt button-icon button-icon-rarrow">More @
github.com/robotwebtools</a>
</section>
</div>
</div>
<br />
<div class="row">
<div class="3u">
<!-- Links -->
<section>
<h2>Resources</h2>
<ul class="style2">
<li><a href="https://github.com/RobotWebTools/roslibjs">roslibjs @ github</a></li>
<li><a href="https://github.com/RobotWebTools/ros2djs">ros2djs @ github</a></li>
<li><a href="https://github.com/RobotWebTools/ros3djs">ros3djs @ github</a></li>
</ul>
</section>
</div>
<div class="3u">
<!-- Links -->
<section>
<h2>Sponsors</h2>
<ul class="style2">
<li><a href="http://fetchrobotics.com/">Fetch Robotics</a></li>
<li><a href="http://www.rail.gatech.edu/">Georgia Tech</a></li>
<li><a href="http://www.eecs.umich.edu/cse/">University of Michigan</a></li>
</ul>
</section>
</div>
<div class="6u">
<!-- About -->
<section>
<h2>Contact</h2>
<div class="5grid">
<div class="row">
<dl class="contact">
<dt>GitHub</dt>
<dd>
<a href="http://github.com/robotwebtools">github.com/robotwebtools</a>
</dd>
<dt>WWW</dt>
<dd>
<a href="http://robotwebtools.org">robotwebtools.org</a>
</dd>
<dt>Email</dt>
<dd>
<a href="mailto:[email protected]">
</dd>
</dl>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<div id="copyright">
RobotWebTools.org is licensed under a <a
href="http://creativecommons.org/licenses/by/3.0/deed.en_US">Creative Commons
Attribution 3.0 Unported License</a>.
</div>
</div>
</div>
</footer>
</div>
</body>
</html>