Merge branch 'master' of ssh://vontaene/home/erik_alt/git/ros_wild_thumper
[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                 <script type="text/javascript">
25                         robothostname="wildthumper"
26                 </script>
27
28                 <title>Wild Thumper control</title>
29         </head>
30         <body onload="init()">
31                 <div class="container-fluid">
32                         <div id="information">
33                                 <div v-for="(alert, id) in alerts" class="alert alert-dismissible}" v-bind:class="classObject(id)">
34                                         <span data-dismiss="alert">{{alert.message}}</span>
35                                 </div>
36                         </div>
37
38                         <nav class="navbar navbar-expand-lg navbar-light bg-light">
39                                 <a class="navbar-brand" href="#">Wild Thumper</a>
40                                 <ul class="nav nav-tabs" role="tablist">
41                                         <li class="nav-item">
42                                                 <a class="nav-link active" href="#data" data-toggle="tab" role="tab">Data</a>
43                                         </li>
44                                         <li class="nav-item">
45                                                 <a class="nav-link" href="#navigation" data-toggle="tab" role="tab">Navigation</a>
46                                         </li>
47                                         <li class="nav-item">
48                                                 <a class="nav-link" href="#lights" data-toggle="tab" role="tab">Lights</a>
49                                         </li>
50                                         <li class="nav-item">
51                                                 <a class="nav-link" href="#drive" data-toggle="tab" role="tab">Drive</a>
52                                         </li>
53                                         <li class="nav-item">
54                                                 <a class="nav-link imagelink" href="#image" data-toggle="tab" role="tab">Image</a>
55                                         </li>
56                                 </ul>
57                         </nav>
58
59                         <div class="tab-content">
60                                 <div id="data" class="tab-pane active" role="tabpanel">
61                                         <div class="row">
62                                                 <div id="power" class="col-auto">
63                                                         <h4>Power</h4>
64                                                         <input-value v-model="voltage" label="Voltage" unit="V"></input-value>
65                                                         <input-value v-model="current" label="Current" unit="A"></input-value>
66                                                 </div>
67                                                 <div id="sensors" class="col-auto">
68                                                         <h4>Sensors</h4>
69                                                         <input-value v-model="light" label="Light" unit="lx"></input-value>
70                                                         <input-value v-model="temp" label="Temperature" unit="&#x2103"></input-value>
71                                                         <input-value v-model="humidity" label="Humidity" unit="%"></input-value>
72                                                         <input-value v-model="pressure" label="Pressure" unit="kPa"></input-value>
73                                                         <input-value v-model="co" label="CO"></input-value>
74                                                 </div>
75                                         </div>
76                                 </div>
77                                 <div id="navigation" class="tab-pane" role="tabpanel">
78                                         <div id="pose"></div>
79                                         <div id="map"></div>
80                                         <div id="speed-label">Speed: {{speed}} m/s</div>
81                                         <div id="speed-slider"></div>
82                                 </div>
83                                 <div id="lights" class="tab-pane" role="tabpanel">
84                                         <div class="row">
85                                                 <div class="col-md-2 offset-md-1" >
86                                                         <div class="d-flex justify-content-center">
87                                                                 <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in front_row" />
88                                                         </div>
89                                                         <div>
90                                                                 <div class="row wt-icon">
91                                                                         <div class="col-md-2 align-self-center bottom-leds">
92                                                                                 <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in bottom_left_row" />
93                                                                         </div>
94                                                                         <div class="col-md-8">
95                                                                                 <div class="d-flex justify-content-center top-leds">
96                                                                                         <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in top_row" />
97                                                                                 </div>
98                                                                         </div>
99                                                                         <div class="col-md-2 align-self-center bottom-leds">
100                                                                                 <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in bottom_right_row" />
101                                                                         </div>
102                                                                 </div>
103                                                         </div>
104                                                         <div class="d-flex justify-content-center">
105                                                                 <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in aft_row" />
106                                                         </div>
107                                                 </div>
108                                                 <div class="col-md-3 offset-md-1">
109                                                         <input-led label="All" name="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]"></input-led>
110                                                         <input-led label="Front" name="[0, 1, 2, 3]"></input-led>
111                                                         <input-led label="Aft" name="[8, 9, 10, 11]"></input-led>
112                                                         <input-led label="Top" name="[4, 5, 6, 7]"></input-led>
113                                                         <input-led label="Bottom" name="[12, 13, 14, 15]"></input-led>
114                                                 </div>
115                                         </div>
116                                 </div>
117                                 <div id="drive" class="tab-pane" role="tabpanel">
118                                         <div class="row">
119                                                 <div class="col-sd-10">
120                                                         <div class="cmd_vel_circle"></div>
121                                                 </div>
122                                                 <div class="col-sd-1">
123                                                         <input type="number" value="1.0" min="0.1" max="5.0" step="0.1" class="form-control" id="scale_trans">
124                                                         <input type="number" value="3.0" min="1.0" max="5.0" step="0.1" class="form-control" id="scale_rot">
125                                                 </div>
126                                         </div>
127                                 </div>
128                                 <div id="image" class="tab-pane" role="tabpanel">
129                                         <img id="usb_cam" src="http://"+robothostname+":8080/stream?topic=/usb_cam/image_raw" style="transform:rotate(-90deg); transform-origin: 60% 60%;"></img>
130                                 </div>
131                         </div>
132                 </div>
133         </body>
134         <script type="text/x-template" id="input-value-template">
135                 <div class="input-value">
136                         <label>{{label}}:</label>
137                         <div class="input-group">
138                                 <input type=text class="form-control" :value="value" readonly>
139                                 <div class="input-group-append" v-if="unit">
140                                         <span class="input-group-text">{{unit}}</span>
141                                 </div>
142                         </div>
143                 </div>
144         </script>
145         <script type="text/x-template" id="input-led-template">
146                 <div class="form-group row">
147                         <label class="col-sm-2 col-form-label">{{label}}</label>
148                         <div class="col-sm-10">
149                                 <input type="text" :name="name" class="led_color" readonly="true"/>
150                         </div>
151                 </div>
152         </script>
153 </html>