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>
53 <div class="tab-content">
54 <div id="data" class="tab-pane active" role="tabpanel">
56 <div id="power" class="col-auto">
58 <input-value v-model="voltage" label="Voltage" unit="V"></input-value>
59 <input-value v-model="current" label="Current" unit="A"></input-value>
61 <div id="sensors" class="col-auto">
63 <input-value v-model="light" label="Light" unit="lx"></input-value>
64 <input-value v-model="temp" label="Temperature" unit="℃"></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>
71 <div id="navigation" class="tab-pane" role="tabpanel">
74 <div id="speed-label">Speed: {{speed}} m/s</div>
75 <div id="speed-slider"></div>
77 <div id="lights" class="tab-pane" role="tabpanel">
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" />
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" />
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" />
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" />
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" />
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>
111 <div id="drive" class="tab-pane" role="tabpanel">
112 <div class="cmd_vel_circle"></div>
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>
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"/>