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>