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]-->
7 <meta http-equiv="content-type" content="text/html; charset=utf-8">
8 <title>AGL Low CAN binding demo</title>
9 <base href="@@URLBASE@@">
23 <body class="not-connected">
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"/>
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>
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>
43 <li class="if-connecting">
46 <li class="if-started">
47 <a role="button" onclick="doDisconnect();">Disconnect</a>
51 <!-- /.navbar-collapse -->
57 <div id="quad1" class="quad">
61 <svg height="100" width="100">
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>
67 <div id="vspeed" class="number">0</div>
70 <svg height="100" width="100">
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>
76 <div id="espeed" class="number">0</div>
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>
89 <div id="quad2" class="quad">
90 <div id="mapsat"></div>
91 <img id="car" class="invisible" src="images/car-top-view.png"/>
94 <div id="gpgreen"></div>
95 <div id="gpblack"></div>
96 <div id="gpred"></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>
112 <div id="quad3" class="quad">
113 <table id="xcdata" class="table table-striped table-bordered table-condensed">
115 <tr><th colspan="2">AGL CAN messages Details</th></tr>
116 <tr><th class="col-md-4">Data</th><th>Value</th></tr>
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>
131 <div id="quad4" class="quad">
132 <div id="mapstreet"></div>