This repository has been archived by the owner on Oct 18, 2024. It is now read-only.
forked from AutonomyLab/rosdash
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocs.html
317 lines (309 loc) · 11.5 KB
/
docs.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ROSDASH Documentation</title>
<style>
a {
color : black;
}
</style>
</head>
<body style="background-color:AliceBlue;">
<div>
<div align="center" style="align:center; width:15%; height:100%; background-color:MediumTurquoise; position:fixed;">
<h3><a href="#">ROSDASH Docs</a></h3>
<h4><a href="#introduction">Introduction</a></h4>
<h4><a href="#usage">Usage</a></h4>
<h4><a href="#examples">Examples</a></h4>
<h4><a href="#widget">Widget Development</a></h4>
<h4><a href="#dependencies">Dependencies</a></h4>
<h4><a href="#license">License</a></h4>
<h4><a href="#authors">Authors</a></h4>
<h4><a href="#acknowledgement">Acknowledgement</a></h4>
<h4><a href="#todo">Todo List</a></h4>
</div>
<div style="width:80%; height:100%; position:absolute; left:20%;">
<h3 align="center" id="introduction" name="introduction">Introduction</h3>
<p>Welcome, roboticists and ROS users!</p>
<p>Here is a demostration and debug platform for ROS, which is easy to use and simple to extend.</p>
<ul>
<li>Simply open your browser to visualize your robots</li>
<li>Connect with ROS and communicate with your robots</li>
<li>Multiple widgets to choose, i.e. plotting tools, Google maps, 3D visualization, etc</li>
<li>Drag and drop to create a dashboard</li>
<li>Develop the dashboard with fancy Javascript and HTML5</li>
</ul>
<h3 align="center" id="usage">Usage</h3>
<p>In ROSDASH, there are two pages for a dashboard: panel and diagram.</p>
<ul>
<li>Panel: it communicates with ROS and your robots, and visualize data from your robots.
<img src="resources/docs/editor.jpg" alt="panel" height="80%" width="80%">
</li>
<li>Diagram: blocks and connections between them representing the message relations between.
<img src="resources/docs/diagram.jpg" alt="diagram" height="80%" width="80%">
</li>
</ul>
<p>Steps to use the panel and connect with robots:</p>
<ul>
<li>Run roscore and rosbridge in the command line;
<img src="resources/docs/roscore.jpg" alt="roscore" height="80%" width="80%">
</li>
<li>Open the dashboard page in your browser, and specify the ip address of the rosbridge;</li>
<li>Open the panel page;</li>
<li>Enjoy it!</li>
</ul>
<p>How to edit the panel page:</p>
<ul>
<li>Open the corresponding editor page;
<img src="resources/docs/gotodiagram.jpg" alt="gotodiagram" height="80%" width="80%">
</li>
<li>Click on Widget button on the sidebar, and choose a widget to add;</li>
<img src="resources/docs/changewidgets.jpg" alt="changewidgets" height="80%" width="80%">
<li>Click on a widget, and modify the height and width on the sidebar;</li>
<li>Press save button.</li>
</ul>
<p>How to use the diagram page:</p>
<ul>
<li>Open the corresponding diagram page;
<img src="resources/docs/gotodiagram.jpg" alt="gotodiagram" height="80%" width="80%">
</li>
<li>Click on "ROS items" button on the sidebar, and choose a topic, service, or param to add. The topics, services, and params represent messages from your ROS system;
<img src="resources/docs/addros.jpg" alt="addros" height="40%" width="40%">
</li>
<li>Click on "blocks" button on the sidebar, and choose a block to add. Most of the blocks represent widgets on the panel page;
<img src="resources/docs/addblock.jpg" alt="addblock" height="40%" width="40%">
</li>
<li>Click on the pins on those blocks, and put a line between them, which represents send the message from ROS to widget;
<img src="resources/docs/diagram.jpg" alt="diagram" height="80%" width="80%">
</li>
</ul>
<p>A list of all widgets available is as follows:</p>
<ul>
<li><em>toggleButton</em>: ;</li>
<li><em>joystick</em>: ;</li>
<li><em>text</em>: ;</li>
<li><em>speech</em>: ;</li>
<li><em>table</em>: ;</li>
<li><em>chart</em>: ;</li>
<img src="resources/docs/stdio.jpg" alt="stdio" height="80%" width="80%">
<li><em>cyNetwork</em>: ;</li>
<li><em>arborNetwork</em>: ;</li>
<li><em>draculaNetwork</em>: ;</li>
<li><em>gmap</em>: ;</li>
<li><em>OpenLayersMap</em>: ;</li>
<li><em>flot</em>: ;</li>
<li><em>vumeter</em>: ;</li>
<li><em>UserCamera</em>: ;</li>
<li><em>HeadTracker</em>: ;</li>
<li><em>HandTracker</em>: ;</li>
<img src="resources/docs/scientific.jpg" alt="scientific" height="80%" width="80%">
<li><em>turtlesim</em>: ;</li>
<li><em>ros2d</em>: ;</li>
<li><em>ros3d</em>: ;</li>
<li><em>pr2urdf</em>: ;</li>
<img src="resources/docs/ros.jpg" alt="ros" height="80%" width="80%">
<li><em>jsonEditor</em>: ;</li>
<li><em>jsonVis</em>: ;</li>
<li><em>youtube</em>: ;</li>
<li><em>slide</em>: ;</li>
<li><em>FathomSlide</em>: ;</li>
</ul>
<p>A list of all blocks available is as follows:</p>
<ul>
<li>
<em>datatypes</em>: ;
<ul>
<li><em>multiArray</em>: ;</li>
</ul>
</li>
<li>
<em>arithmetics</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>array</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>functional flow</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>ROS</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>input</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>output</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>network</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>database</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>drawing</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>multimedia</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>roslibjs</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>maps</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>plot</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>robot</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>simulator</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>user</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
<li>
<em>others</em>: ;
<ul>
<li><em></em>: ;</li>
</ul>
</li>
</ul>
<h3 align="center" id="examples">Examples</h3>
<h3 align="center" id="widget">Widget Development</h3>
<p>The programming language for the widget development is Javascript. Usually, I design a widget as a class, and put callback functions inside.</p>
<p>The events for callback functions are as follows:</p>
<ul>
<li><em>addWidget</em>: when a widget is added to HTML. We usually append the canvas tags (i.e. < div >, < canvas >, etc.) to the dashboard;</li>
<li><em>init</em>: when a widget is initialized. It is envoked after the webpage is created and before the widget is executed. You can do some initialization stuff here;</li>
<li><em>runOnce</em>: it is envoked in the first cycle of execution and for only once;</li>
<li><em>run</em>: it is envoked in the each cycle of execution;</li>
<li><em>other events</em>: i.e. when rosbridge is connected, when the webpage completes, etc.</li>
</ul>
<p>The information and data for callback functions to use are as follows:</p>
<ul>
<li><em>ROSDASH.userConf</em>: the information of the user (the person who is using the dashboard);</li>
<li><em>ROSDASH.dashConf</em>: the information of the dashboard in use;</li>
<li><em>ROSDASH.ros</em>: the instance of rosbridge connection;</li>
<li><em>ROSDASH.rosConnected</em>: if rosbridge is connected or not;</li>
<li><em>ROSDASH.rosNames</em>: names of ros topics, services, and params;</li>
<li><em>ROSDASH.msgs</em>: definitions of ros msgs;</li>
<li><em>ROSDASH.blockDef</em>: definitions of widgets;</li>
<li><em>ROSDASH.blocks</em>: information of blocks in the diagram;</li>
<li><em>ROSDASH.requireLoadList</em>: required files, i.e. js files, css files, etc;</li>
<li><em>ROSDASH.updateWidgetContent</em>: modify the content of a widget directly.</li>
</ul>
<h3 align="center" id="dependencies">Dependencies</h3>
<ul>
<li><em>dracula</em></li>
<li><em>mjpegcanvasjs</em></li>
<li><em>Highcharts</em></li>
<li><em>JSONSelect</em></li>
<li><em>jquery-ui-1.10.3</em></li>
<li><em>taffydb</em></li>
<li><em>keyboardteleopjs</em></li>
<li><em>underscore</em></li>
<li><em>jsDraw2DX</em></li>
<li><em>bootstrap-switch</em></li>
<li><em>ros3djs</em></li>
<li><em>speak.js</em></li>
<li><em>roslibjs</em></li>
<li><em>js-handtracking-read-only</em></li>
<li><em>d3</em></li>
<li><em>predis</em></li>
<li><em>dhtmlxSuite</em></li>
<li><em>ros2djs</em></li>
<li><em>turtlesimjs</em></li>
<li><em>DataTables</em></li>
<li><em>cytoscape.js-2.0.2</em></li>
<li><em>FlexiJsonEditor</em></li>
<li><em>jquery-2.0.3.min.js</em></li>
<li><em>sDashboard</em></li>
<li><em>fathom</em></li>
<li><em>EaselJS</em></li>
<li><em>flot</em></li>
<li><em>arbor</em></li>
<li><em>openlayers</em></li>
<li><em>nav2djs</em></li>
<li><em>EventEmitter</em></li>
<li><em>headtrackr</em></li>
<li><em>bootstrap</em></li>
<li><em>js-aruco-read-only</em></li>
<li><em>virtualjoystick.js</em></li>
</ul>
<h3 align="center" id="license">License</h3>
<p>GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007</p>
<h3 align="center" id="authors">Authors</h3>
<ul>
<li>Fei Zhan</li>
</ul>
<h3 align="center" id="acknowledgement">Acknowledgement</h3>
<p>Thanks to the support of Prof Richard Vaughan and Autonomy Lab.</p>
<p>The logo of ROSDASH is from the logo of Autonomy Lab.</p>
<h3 align="center" id="todo">Todo List</h3>
<ul>
<li>Undo, redo;<span style="float:right;">Priority 1</span></li>
<li>Change widget input and output into better format;<span style="float:right;">Priority 10</span></li>
<li>msg type relations;<span style="float:right;">Priority 2</span></li>
<li>New block position (follow mouse?);<span style="float:right;">Priority 6</span></li>
<li>New pin position;<span style="float:right;">Priority 4</span></li>
<li>Add a new pin;<span style="float:right;">Priority 4</span></li>
<li>Connect blocks by popups;<span style="float:right;">Priority 6</span></li>
<li>Design a uniform representation for network diagram;<span style="float:right;">Priority 3</span></li>
<li>Design a uniform representation for plotting;<span style="float:right;">Priority 3</span></li>
</ul>
</div>
</div>
</body>
</html>