www: use vue.js-components to avoid duplicates
[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" 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 active" 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
53                         <div class="tab-content">
54                                 <div id="data" class="tab-pane" role="tabpanel">
55                                         <div class="row">
56                                                 <div id="power" class="col-auto">
57                                                         <h4>Power</h4>
58                                                         <input-value v-model="voltage" label="Voltage" unit="V"></input-value>
59                                                         <input-value v-model="current" label="Current" unit="A"></input-value>
60                                                 </div>
61                                                 <div id="sensors" class="col-auto">
62                                                         <h4>Sensors</h4>
63                                                         <input-value v-model="light" label="Light" unit="lx"></input-value>
64                                                         <input-value v-model="temp" label="Temperature" unit="&#x2103"></input-value>
65                                                         <input-value v-model="humidity" label="Humidity" unit="%"></input-value>
66                                                         <input-value v-model="pressure" label="Pressure" unit="kPa"></input-value>
67                                                         <input-value v-model="co" label="CO"></input-value>
68                                                 </div>
69                                         </div>
70                                 </div>
71                                 <div id="navigation" class="tab-pane" role="tabpanel">
72                                         <div id="pose"></div>
73                                         <div id="map"></div>
74                                         <div id="speed-label">Speed: {{speed}} m/s</div>
75                                         <div id="speed-slider"></div>
76                                 </div>
77                                 <div id="lights" class="tab-pane active" role="tabpanel">
78                                         <div class="row">
79                                                 <div class="col-md-2 offset-md-1" >
80                                                         <div class="d-flex justify-content-center">
81                                                                 <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in front_row" />
82                                                         </div>
83                                                         <div>
84                                                                 <div class="row wt-icon">
85                                                                         <div class="col-md-2 align-self-center bottom-leds">
86                                                                                 <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in bottom_left_row" />
87                                                                         </div>
88                                                                         <div class="col-md-8">
89                                                                                 <div class="d-flex justify-content-center top-leds">
90                                                                                         <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in top_row" />
91                                                                                 </div>
92                                                                         </div>
93                                                                         <div class="col-md-2 align-self-center bottom-leds">
94                                                                                 <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in bottom_right_row" />
95                                                                         </div>
96                                                                 </div>
97                                                         </div>
98                                                         <div class="d-flex justify-content-center">
99                                                                 <input class="led_color" type="hidden" :name="led" readonly="true" v-for="led in aft_row" />
100                                                         </div>
101                                                 </div>
102                                                 <div class="col-md-3 offset-md-1">
103                                                         <input-led label="All" name="[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]"></input-led>
104                                                         <input-led label="Front" name="[0, 1, 2, 3]"></input-led>
105                                                         <input-led label="Aft" name="[8, 9, 10, 11]"></input-led>
106                                                         <input-led label="Top" name="[4, 5, 6, 7]"></input-led>
107                                                         <input-led label="Bottom" name="[12, 13, 14, 15]"></input-led>
108                                                 </div>
109                                         </div>
110                                 </div>
111                                 <div id="drive" class="tab-pane" role="tabpanel">
112                                         <div class="cmd_vel_circle"></div>
113                                 </div>
114                         </div>
115                 </div>
116         </body>
117         <script type="text/x-template" id="input-value-template">
118                 <div class="input-value">
119                         <label>{{label}}:</label>
120                         <div class="input-group">
121                                 <input type=text class="form-control" :value="value" readonly>
122                                 <div class="input-group-append" v-if="unit">
123                                         <span class="input-group-text">{{unit}}</span>
124                                 </div>
125                         </div>
126                 </div>
127         </script>
128         <script type="text/x-template" id="input-led-template">
129                 <div class="form-group row">
130                         <label class="col-sm-2 col-form-label">{{label}}</label>
131                         <div class="col-sm-10">
132                                 <input type="text" :name="name" class="led_color" readonly="true"/>
133                         </div>
134                 </div>
135         </script>
136 </html>