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>