diff options
| author |   Romain Forlot <romain.forlot@iot.bzh> | 2017-04-29 18:17:08 +0200 |
|---|---|---|
| committer | Romain Forlot <romain.forlot@iot.bzh> | 2017-05-02 16:17:08 +0200 |
| commit | 7e6d6d0a37e37804e3a751e2bfde11a9c1e85b0b (patch) | |
| tree | dcc513f232f608021a55fd317ccd3b1f623ccb70 /CAN-binder/low-can-demo/app/Frontend/index.html | |
| parent | 10e7cf8b0d84be658069f60e5dd4831ec202cd70 (diff) | |
Adding HTML5 UI with cpu stat binding
Change-Id: Id63b7d338140097a5f2f0943f1b63ee978141829
Signed-off-by: Romain Forlot <romain.forlot@iot.bzh>
Diffstat (limited to 'CAN-binder/low-can-demo/app/Frontend/index.html')
| -rw-r--r-- | CAN-binder/low-can-demo/app/Frontend/index.html | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/CAN-binder/low-can-demo/app/Frontend/index.html b/CAN-binder/low-can-demo/app/Frontend/index.html new file mode 100644 index 0000000..b1b8a81 --- /dev/null +++ b/CAN-binder/low-can-demo/app/Frontend/index.html @@ -0,0 +1,137 @@ +<!DOCTYPE html> +<!--[if lt IE 7]> <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> +<!--[if IE 7]> <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9 lt-ie8"> <![endif]--> +<!--[if IE 8]> <html lang="en" ng-app="@@APPNAME@@" class="no-js lt-ie9"> <![endif]--> +<!--[if gt IE 8]><!--> <html lang="en" ng-app="@@APPNAME@@" class="no-js"> <!--<![endif]--> +<head> + <meta http-equiv="content-type" content="text/html; charset=utf-8"> + <title>AGL Low CAN binding demo</title> + <base href="@@URLBASE@@"> + <!-- bower:css --> + <!-- endinject --> + <!-- vendor:css --> + <!-- endinject --> + <!-- appli:css --> + <!-- endinject --> + <!-- inject:css --> + <!-- endinject --> + <!-- bower:js --> + <!-- endinject --> + <!-- inject:js --> + <!-- endinject --> +</head> +<body class="not-connected"> + <!-- Navigation --> + <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> + <div class="container-fluid"> + <!-- Brand and toggle get grouped for better mobile display --> + <a class="navbar-brand" href="http://iot.bzh" target="_blank" alt="IoT.bzh"> + <img id="iotbzh-logo" src="/images/logo_iot_bzh_lightgrey_325x90_50dpi.png"/> + </a> + <div class="collapse navbar-collapse"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <p class="navbar-text navbar-right">AGL Low CAN binding</p> + <ul class="nav navbar-nav"> + <li class="if-not-connected"> + <a role="button" onclick="doConnect();">Connect</a> + </li> + <li class="if-connecting"> + Connecting... + </li> + <li class="if-started"> + <a role="button" onclick="doDisconnect();">Disconnect</a> + </li> + </ul> + </div> + <!-- /.navbar-collapse --> + </div> + <!-- /.container --> + </nav> + + <div class="content"> + <div id="quad1" class="quad"> + <img id="view1"/> +<!-- + <div id="vspan"> + <svg height="100" width="100"> + <g> + <circle cx="50" cy="50" r="49" stroke="white" stroke-width="3"/> + <text x="50%" y="80%" fill="white" text-anchor="middle">Km/h</text> + </g> + </svg> + <div id="vspeed" class="number">0</div> + </div> + <div id="espan"> + <svg height="100" width="100"> + <g> + <circle cx="50" cy="50" r="49" stroke="white" stroke-width="3"/> + <text x="50%" y="80%" fill="white" text-anchor="middle">Rpm</text> + </g> + </svg> + <div id="espeed" class="number">0</div> + </div> +--> + <div id="cluster"> + <canvas id="torqueGauge"></canvas> + <canvas id="rpmGauge"></canvas> + <canvas id="MAFGauge"></canvas> + <canvas id="speedGauge"></canvas> + <canvas id="IATempGauge"></canvas> + </div> + </div> + +<!-- + <div id="quad2" class="quad"> + <div id="mapsat"></div> + <img id="car" class="invisible" src="images/car-top-view.png"/> + <div id="gaspan"> + <div id="gas"> + <div id="gpgreen"></div> + <div id="gpblack"></div> + <div id="gpred"></div> + </div> + <div id="copan"> + <div id="con1"></div> + <div id="con2"></div> + <div id="con3"></div> + <div id="con4"></div> + <div id="con5"></div> + <div id="con6"></div> + <div id="con7"></div> + <div id="con8"></div> + <div id="con9"></div> + </div> + </div> + </div> +--> + <div id="quad3" class="quad"> + <table id="xcdata" class="table table-striped table-bordered table-condensed"> + <thead> + <tr><th colspan="2">AGL CAN messages Details</th></tr> + <tr><th class="col-md-4">Data</th><th>Value</th></tr> + </thead> + <tbody> + <tr> <td>Vehicle Speed</td> <td><span id="vsp">?</span> km/h</td> </tr> + <tr> <td>Engine Speed</td> <td><span id="esp">?</span> tr/mn</td> </tr> + <tr> <td>Engine Load</td> <td><span id="trq">?</span> %</td> </tr> + <tr> <td>MAF air flow rate</td> <td><span id="fue">?</span> grams/sec</td> </tr> + <tr> <td>Intake Air temp</td> <td><span id="tem">?</span> °C</td> </tr> + <tr> <td>Messages rate</td> <td><span id="msg">?</span> received events/s</td> </tr> + <tr> <td>CPU load</td> <td><span id="stat">?</span> %</td> </tr> + </tbody> + </table> + </div> + +<!-- + <div id="quad4" class="quad"> + <div id="mapstreet"></div> + </div> +--> + </div> +</body> +</html> |