4 <meta charset="utf-8" />
6 <link rel="stylesheet" href="assets/stylesheets/bootstrap.min.css">
7 <link rel="stylesheet" href="assets/stylesheets/jquery-ui.css">
8 <link rel="stylesheet" href="assets/stylesheets/jquery.minicolors.css">
9 <link rel="stylesheet" href="assets/stylesheets/application.css">
11 <script src="assets/javascripts/jquery-3.3.1.min.js"></script>
12 <script src="assets/javascripts/popper.min.js"></script>
13 <script src="assets/javascripts/bootstrap.min.js"></script>
14 <script src="assets/javascripts/jquery-ui.min.js"></script>
15 <script src="assets/javascripts/easeljs.min.js"></script>
16 <script src="assets/javascripts/eventemitter2.js"></script>
17 <script src="assets/javascripts/roslib.js"></script>
18 <script src="assets/javascripts/ros2d.js"></script>
19 <script src="assets/javascripts/nav2d.js"></script>
20 <script src="assets/javascripts/keyboardteleop.js"></script>
21 <script src="assets/javascripts/jquery.minicolors.js"></script>
22 <script src="assets/javascripts/vue.js"></script>
23 <script src="assets/javascripts/application.js"></script>
25 <title>Wild Thumper control</title>
27 <body onload="init()">
28 <div class="container-fluid">
29 <div id="information">
30 <div v-for="(alert, id) in alerts" class="alert alert-dismissible}" v-bind:class="classObject(id)">
31 <span data-dismiss="alert">{{alert.message}}</span>
35 <nav class="navbar navbar-expand-lg navbar-light bg-light">
36 <a class="navbar-brand" href="#">Wild Thumper</a>
37 <ul class="nav nav-tabs" role="tablist">
39 <a class="nav-link active" href="#data" data-toggle="tab" role="tab">Data</a>
42 <a class="nav-link" href="#navigation" data-toggle="tab" role="tab">Navigation</a>
45 <a class="nav-link" href="#lights" data-toggle="tab" role="tab">Lights</a>
48 <a class="nav-link" href="#drive" data-toggle="tab" role="tab">Drive</a>
52 <div class="tab-content">
53 <div id="data" class="tab-pane active" role="tabpanel">
55 <div id="power" class="col-auto">
57 <label>Voltage:</label>
58 <div class="input-group">
59 <input type=text name="voltage" class="form-control" v-model="voltage" readonly>
60 <div class="input-group-append">
61 <span class="input-group-text">V</span>
64 <label>Current:</label>
65 <div class="input-group">
66 <input type=text name="current" class="form-control" v-model="current" readonly>
67 <div class="input-group-append">
68 <span class="input-group-text">A</span>
72 <div id="sensors" class="col-auto">
75 <div class="input-group">
76 <input type=text name="light" class="form-control" v-model="light" readonly>
77 <div class="input-group-append">
78 <span class="input-group-text">lx</span>
81 <label>Temperature:</label>
82 <div class="input-group">
83 <input type=text name="temp" class="form-control" v-model="temp" readonly>
84 <div class="input-group-append">
85 <span class="input-group-text">℃</span>
88 <label>Humidity:</label>
89 <div class="input-group">
90 <input type=text name="humidity" class="form-control" v-model="humidity" readonly>
91 <div class="input-group-append">
92 <span class="input-group-text">%</span>
95 <label>Pressure:</label>
96 <div class="input-group">
97 <input type=text name="pressure" class="form-control" v-model="pressure" readonly>
98 <div class="input-group-append">
99 <span class="input-group-text">kPa</span>
103 <input type=text name="co" class="form-control" v-model="co" readonly>
107 <div id="navigation" class="tab-pane" role="tabpanel">
108 <div id="pose"></div>
110 <div id="speed-label">Speed: {{speed}} m/s</div>
111 <div id="speed-slider"></div>
113 <div id="lights" class="tab-pane" role="tabpanel">
115 <div class="col-md-2 offset-md-1" >
116 <div class="d-flex justify-content-center">
117 <input class="led_color" type="hidden" name="[0]" readonly="true"/>
118 <input class="led_color" type="hidden" name="[1]" readonly="true"/>
119 <input class="led_color" type="hidden" name="[2]" readonly="true"/>
120 <input class="led_color" type="hidden" name="[3]" readonly="true"/>
123 <div class="row wt-icon">
124 <div class="col-md-2 align-self-center bottom-leds">
125 <input class="led_color" type="hidden" name="[14]" readonly="true"/>
126 <input class="led_color" type="hidden" name="[15]" readonly="true"/>
128 <div class="col-md-8">
129 <div class="d-flex justify-content-center top-leds">
130 <input class="led_color" type="hidden" name="[7]" readonly="true"/>
131 <input class="led_color" type="hidden" name="[6]" readonly="true"/>
132 <input class="led_color" type="hidden" name="[5]" readonly="true"/>
133 <input class="led_color" type="hidden" name="[4]" readonly="true"/>
136 <div class="col-md-2 align-self-center bottom-leds">
137 <input class="led_color" type="hidden" name="[13]" readonly="true"/>
138 <input class="led_color" type="hidden" name="[12]" readonly="true"/>
142 <div class="d-flex justify-content-center">
143 <input class="led_color" type="hidden" name="[8]" readonly="true"/>
144 <input class="led_color" type="hidden" name="[9]" readonly="true"/>
145 <input class="led_color" type="hidden" name="[10]" readonly="true"/>
146 <input class="led_color" type="hidden" name="[11]" readonly="true"/>
149 <div class="col-md-3 offset-md-1">
150 <div class="form-group row">
151 <label class="col-sm-2 col-form-label">Alle</label>
152 <div class="col-sm-10">
153 <input class="led_color" type="text" name="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" class="form-control" readonly="true"/>
156 <div class="form-group row">
157 <label class="col-sm-2 col-form-label">Front</label>
158 <div class="col-sm-10">
159 <input class="led_color" type="text" name="[0, 1, 2, 3]" class="form-control" readonly="true"/>
162 <div class="form-group row">
163 <label class="col-sm-2 col-form-label">Aft</label>
164 <div class="col-sm-10">
165 <input class="led_color" type="text" name="[8, 9, 10, 11]" class="form-control" readonly="true"/>
168 <div class="form-group row">
169 <label class="col-sm-2 col-form-label">Top</label>
170 <div class="col-sm-10">
171 <input class="led_color" type="text" name="[4, 5, 6, 7]" class="form-control" readonly="true"/>
174 <div class="form-group row">
175 <label class="col-sm-2 col-form-label">Bottom</label>
176 <div class="col-sm-10">
177 <input class="led_color" type="text" name="[12, 13, 14, 15]" class="form-control" readonly="true"/>
183 <div id="drive" class="tab-pane" role="tabpanel">
184 <div class="cmd_vel_circle"></div>