e9e23f672d195fb4fd94cc798953fd7a760a3143
[ros_wild_thumper.git] / www / index.html
1 <!doctype html>
2 <html>
3         <head>
4                 <meta charset="utf-8" />
5
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">
10
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>
24
25                 <title>Wild Thumper control</title>
26         </head>
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>
32                                 </div>
33                         </div>
34
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">
38                                         <li class="nav-item">
39                                                 <a class="nav-link active" href="#data" data-toggle="tab" role="tab">Data</a>
40                                         </li>
41                                         <li class="nav-item">
42                                                 <a class="nav-link" href="#navigation" data-toggle="tab" role="tab">Navigation</a>
43                                         </li>
44                                         <li class="nav-item">
45                                                 <a class="nav-link" href="#lights" data-toggle="tab" role="tab">Lights</a>
46                                         </li>
47                                         <li class="nav-item">
48                                                 <a class="nav-link" href="#drive" data-toggle="tab" role="tab">Drive</a>
49                                         </li>
50                                 </ul>
51                         </nav>
52                         <div class="tab-content">
53                                 <div id="data" class="tab-pane active" role="tabpanel">
54                                         <div class="row">
55                                                 <div id="power" class="col-auto">
56                                                         <h4>Power</h4>
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>
62                                                                 </div>
63                                                         </div>
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>
69                                                                 </div>
70                                                         </div>
71                                                 </div>
72                                                 <div id="sensors" class="col-auto">
73                                                         <h4>Sensors</h4>
74                                                         <label>Light:</label>
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>
79                                                                 </div>
80                                                         </div>
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">&#x2103</span>
86                                                                 </div>
87                                                         </div>
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>
93                                                                 </div>
94                                                         </div>
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>
100                                                                 </div>
101                                                         </div>
102                                                         <label>CO:</label>
103                                                         <input type=text name="co" class="form-control" v-model="co" readonly>
104                                                 </div>
105                                         </div>
106                                 </div>
107                                 <div id="navigation" class="tab-pane" role="tabpanel">
108                                         <div id="pose"></div>
109                                         <div id="map"></div>
110                                         <div id="speed-label">Speed: {{speed}} m/s</div>
111                                         <div id="speed-slider"></div>
112                                 </div>
113                                 <div id="lights" class="tab-pane" role="tabpanel">
114                                         <div class="row">
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"/>
121                                                         </div>
122                                                         <div>
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"/>
127                                                                         </div>
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"/>
134                                                                                 </div>
135                                                                         </div>
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"/>
139                                                                         </div>
140                                                                 </div>
141                                                         </div>
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"/>
147                                                         </div>
148                                                 </div>
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"/>
154                                                                 </div>
155                                                         </div>
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"/>
160                                                                 </div>
161                                                         </div>
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"/>
166                                                                 </div>
167                                                         </div>
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"/>
172                                                                 </div>
173                                                         </div>
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"/>
178                                                                 </div>
179                                                         </div>
180                                                 </div>
181                                         </div>
182                                 </div>
183                                 <div id="drive" class="tab-pane" role="tabpanel">
184                                         <div class="cmd_vel_circle"></div>
185                                 </div>
186                         </div>
187                 </div>
188         </body>
189 </html>