CAN-binder/low-can-demo/app/Frontend/index.html

   1 <!DOCTYPE html>
   2 <!--[if lt IE 7]>      <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
   3 <!--[if IE 7]>         <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9 lt-ie8"> <![endif]-->
   4 <!--[if IE 8]>         <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9"> <![endif]-->
   5 <!--[if gt IE 8]><!--> <html lang="en" ng-app="@@APPNAME@@" class="no-js"> <!--<![endif]-->
   6 <head>
   7     <meta http-equiv="content-type" content="text/html; charset=utf-8">
   8     <title>AGL Low CAN binding demo</title>
   9         <base href="@@URLBASE@@">
  10     <!-- bower:css -->
  11     <!-- endinject -->
  12     <!-- vendor:css -->
  13     <!-- endinject -->
  14     <!-- appli:css -->
  15     <!-- endinject -->
  16     <!-- inject:css -->
  17     <!-- endinject -->
  18         <!-- bower:js -->
  19         <!-- endinject -->
  20         <!-- inject:js -->
  21         <!-- endinject -->
  22 </head>
  23 <body class="not-connected">
  24         <!-- Navigation -->
  25         <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  26         <div class="container-fluid">
  27             <!-- Brand and toggle get grouped for better mobile display -->
  28                         <a class="navbar-brand" href="http://iot.bzh" target="_blank" alt="IoT.bzh">
  29                                 <img id="iotbzh-logo" src="/images/logo_iot_bzh_lightgrey_325x90_50dpi.png"/>
  30                         </a>
  31                         <div class="collapse navbar-collapse">
  32                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  33                     <span class="sr-only">Toggle navigation</span>
  34                     <span class="icon-bar"></span>
  35                     <span class="icon-bar"></span>
  36                     <span class="icon-bar"></span>
  37                 </button>
  38                                 <p class="navbar-text navbar-right">AGL Low CAN binding</p>
  39                 <ul class="nav navbar-nav">
  40                                         <li class="if-not-connected">
  41                         <a role="button" onclick="doConnect();">Connect</a>
  42                     </li>
  43                                         <li class="if-connecting">
  44                         Connecting...
  45                     </li>
  46                                         <li class="if-started">
  47                                                 <a role="button" onclick="doDisconnect();">Disconnect</a>
  48                                         </li>
  49                                 </ul>
  50             </div>
  51             <!-- /.navbar-collapse -->
  52         </div>
  53         <!-- /.container -->
  54     </nav>
  55
  56     <div class="content">
  57                 <div id="quad1" class="quad">
  58                         <img id="view1"/>
  59 <!--
  60                         <div id="vspan">
  61                                 <svg height="100" width="100">
  62                                         <g>
  63                                                 <circle cx="50" cy="50" r="49" stroke="white" stroke-width="3"/>
  64                                                 <text x="50%" y="80%" fill="white" text-anchor="middle">Km/h</text>
  65                                         </g>
  66                                 </svg>
  67                                 <div id="vspeed" class="number">0</div>
  68                         </div>
  69                         <div id="espan">
  70                                 <svg height="100" width="100">
  71                                         <g>
  72                                                 <circle cx="50" cy="50" r="49" stroke="white" stroke-width="3"/>
  73                                                 <text x="50%" y="80%" fill="white" text-anchor="middle">Rpm</text>
  74                                         </g>
  75                                 </svg>
  76                                 <div id="espeed" class="number">0</div>
  77                         </div>
  78 -->
  79                         <div id="cluster">
  80                                 <canvas id="torqueGauge"></canvas>
  81                                 <canvas id="rpmGauge"></canvas>
  82                                 <canvas id="MAFGauge"></canvas>
  83                                 <canvas id="speedGauge"></canvas>
  84                                 <canvas id="IATempGauge"></canvas>
  85                         </div>
  86                 </div>
  87
  88 <!--
  89                 <div id="quad2" class="quad">
  90                         <div id="mapsat"></div>
  91                         <img id="car" class="invisible" src="images/car-top-view.png"/>
  92                         <div id="gaspan">
  93                                 <div id="gas">
  94                                         <div id="gpgreen"></div>
  95                                         <div id="gpblack"></div>
  96                                         <div id="gpred"></div>
  97                                 </div>
  98                                 <div id="copan">
  99                                         <div id="con1"></div>
 100                                         <div id="con2"></div>
 101                                         <div id="con3"></div>
 102                                         <div id="con4"></div>
 103                                         <div id="con5"></div>
 104                                         <div id="con6"></div>
 105                                         <div id="con7"></div>
 106                                         <div id="con8"></div>
 107                                         <div id="con9"></div>
 108                                 </div>
 109                         </div>
 110                 </div>
 111 -->
 112                 <div id="quad3" class="quad">
 113                         <table id="xcdata" class="table table-striped table-bordered table-condensed">
 114                                 <thead>
 115                                         <tr><th colspan="2">AGL CAN messages Details</th></tr>
 116                                         <tr><th class="col-md-4">Data</th><th>Value</th></tr>
 117                                 </thead>
 118                                 <tbody>
 119                                         <tr> <td>Vehicle Speed</td> <td><span id="vsp">?</span> km/h</td> </tr>
 120                                         <tr> <td>Engine Speed</td> <td><span id="esp">?</span> tr/mn</td> </tr>
 121                                         <tr> <td>Engine Load</td> <td><span id="trq">?</span> %</td> </tr>
 122                                         <tr> <td>MAF air flow rate</td> <td><span id="fue">?</span> grams/sec</td> </tr>
 123                                         <tr> <td>Intake Air temp</td> <td><span id="tem">?</span> °C</td> </tr>
 124                                         <tr> <td>Messages rate</td> <td><span id="msg">?</span> received events/s</td> </tr>
 125                                         <tr> <td>CPU load</td> <td><span id="stat">?</span> %</td> </tr>
 126                                 </tbody>
 127                         </table>
 128                 </div>
 129
 130 <!--
 131                 <div id="quad4" class="quad">
 132                         <div id="mapstreet"></div>
 133                 </div>
 134 -->
 135     </div>
 136 </body>
 137 </html>