forked from Geekgineer/ros_web_gui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrobot_gui.html
134 lines (113 loc) · 5.08 KB
/
robot_gui.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML5//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.65, user-scalable=yes">
<title>Rosbridge Advanced GUI</title>
<!-- Style sheets -->
<link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="js/jqwidgets/styles/jqx.ui-start.css" type="text/css">
<link rel="stylesheet" href="styles/robot_gui.css" type="text/css">
<!-- jQuery -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<!-- KinectJS -->
<!-- script type="text/javascript" src="js/kinetic-v4.3.3.min.js"></script -->
<script type="text/javascript" src="js/kinetic-v5.1.0.min.js"></script>
<!-- jqWidgets -->
<script type="text/javascript" src="js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxdragdrop.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxexpander.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxgauge.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="js/jqwidgets/jqxtabs.js"></script>
<!-- ROS stuff -->
<script type="text/javascript" src="js/easeljs.min.js"></script>
<script type="text/javascript" src="js/eventemitter2.min.js"></script>
<script type="text/javascript" src="js/mjpegcanvas.min.js"></script>
<script type="text/javascript" src="js/nav2d.js"></script>
<script type="text/javascript" src="js/ros2d.min.js"></script>
<script type="text/javascript" src="js/roslib.min.js"></script>
<!-- Load the HTML files for each tab -->
<script type="text/javascript">
$(document).ready(function () {
// Load the tab files
var main = $('#main');
main.load("tabs/main.html", function (response, status, xhr) {
var pageString = response;
main.html(pageString);
});
var navigation = $('#navigation');
navigation.load("tabs/navigation.html", function (response, status, xhr) {
var pageString = response;
navigation.html(pageString);
});
var diagnostics = $('#diagnostics');
diagnostics.load("tabs/diagnostics.html", function (response, status, xhr) {
var pageString = response;
diagnostics.html(pageString);
});
var parameters = $('#parameters');
parameters.load("tabs/parameters.html", function (response, status, xhr) {
var pageString = response;
parameters.html(pageString);
});
var misc = $('#misc');
misc.load("tabs/misc.html", function (response, status, xhr) {
var pageString = response;
misc.html(pageString);
});
// Define the tabs
$('#jqxtabs').jqxTabs({
width: '100%',
keyboardNavigation: false,
theme: 'ui-start'
});
$('#jqxtabs').bind('selected', function (event) {
var item = event.args.item;
var title = $('#jqxtabs').jqxTabs('getTitleAt', item);
});
});
</script>
<!-- The init() functions waits until the pages have loaded -->
<script type="text/javascript">
function init() {
function waitForDOM() {
var video = document.getElementById('videoCanvas');
var basePad = document.getElementById('baseContainer');
if (video == null || basePad == null) {
setTimeout(waitForDOM, 100);
}
}
waitForDOM();
}
</script>
</head>
<!-- Run the init() script followed by init_ros() -->
<body bgcolor="#1d1d1d" onload="init();init_ros();">
<!-- Set up the tab layout -->
<div id="jqxtabs">
<ul style="margin-left:20px; font-size:22px;">
<li>Main Panel</li>
<li>Navigation</li>
<li>Diagnostics</li>
<li>Parameters</li>
<li>Misc</li>
</ul>
<div id="main"></div>
<div id="navigation"></div>
<div id="diagnostics"></div>
<div id="parameters"></div>
<div id="misc"></div>
</div>
<!-- Our own Javascript -->
<script type="text/javascript" src="js/robot_gui.js"></script>
</body>
</html>