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
  53                         <div class="tab-content">
  54                                 <div id="data" class="tab-pane active" 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" 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>