summaryrefslogtreecommitdiffstats
path: root/CAN-binder/low-can-demo/app/Frontend/index.html
diff options
context:
space:
mode:
authorRomain Forlot <romain.forlot@iot.bzh>2017-04-29 18:17:08 +0200
committerRomain Forlot <romain.forlot@iot.bzh>2017-05-02 16:17:08 +0200
commit7e6d6d0a37e37804e3a751e2bfde11a9c1e85b0b (patch)
treedcc513f232f608021a55fd317ccd3b1f623ccb70 /CAN-binder/low-can-demo/app/Frontend/index.html
parent10e7cf8b0d84be658069f60e5dd4831ec202cd70 (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.html137
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 00000000..b1b8a810
--- /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>