FUNCT First Dashboard version

8 files changed, 279 insertions, 4 deletions

diff --git a/src/config.xml b/src/config.xml
index ce39792..c63c687 100644
--- a/src/config.xml
+++ b/src/config.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <widget xmlns="http://www.w3.org/ns/widgets" id="webapps-dashboard" version="0.0.0">
-  <name>SETTINGS</name>
+  <name>DASHBOARD</name>
   <icon src="icon.svg"/>
   <content src="index.html" type="text/html"/>
   <description>HTML5 Dashboard demo</description>
diff --git a/src/images/HMI_Dashboard_Car.png b/src/images/HMI_Dashboard_Car.png
new file mode 100644
index 0000000..387a4b1
--- /dev/null
+++ b/src/images/HMI_Dashboard_Car.png
diff --git a/src/images/HMI_Dashboard_Car_720.png b/src/images/HMI_Dashboard_Car_720.png
new file mode 100644
index 0000000..0e4079c
--- /dev/null
+++ b/src/images/HMI_Dashboard_Car_720.png
diff --git a/src/index.js b/src/index.js
index 484dffa..9c4ff26 100644
--- a/src/index.js
+++ b/src/index.js
@@ -21,5 +21,7 @@ import { api } from 'agl-js-api';
 /* CSS */
 import './styles/app.scss';
 
+window.app = app;
+
 api.init();
 app.init();
diff --git a/src/js/app.js b/src/js/app.js
index 9269de5..7ce31f9 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,9 +1,32 @@
 import { load as load_template } from './templates';
 import Mustache from 'mustache';
 
+import { lowcan } from 'agl-js-api';
+
 var template;
 var page = {
-
+    speed: 0,
+    tires: {
+        front: {
+            left: 21,
+            right: 22
+        },
+        rear: {
+            left: 23,
+            right: 24
+        }
+    },
+    rpm: {
+        value: 0,
+        percent: 0
+    },
+    isWarning: true,
+    fuel: {
+        percent: 100,
+        level: 14,
+        range: 650,
+        avg: 25.5
+    }
 };
 
 export function show() {
@@ -11,6 +34,24 @@ export function show() {
 }
 
 export function init() {
+
+    lowcan.list().then( function( result ) {
+        console.log(result.length);
+        for( var i=0;i<result.length; i++) {
+            if( result[i].startsWith('messages') ) {
+                (function(event) {
+                    lowcan.get(event).then( function( result ) {
+                        console.log(result[0].event, result[0].value);
+                    }, function(error){
+                        console.error(event, error);
+                    });
+                })(result[i]);
+            }
+        }
+    }, function(error){
+        console.error(error);
+    });
+
     load_template('main.template.html').then(function(result) {
         template = result;
         Mustache.parse(template);
@@ -18,4 +59,36 @@ export function init() {
     }, function(error) {
         console.error('ERRROR loading main template', error);
     });
+}
+
+export function simulate() {
+    console.log('SIMULATE');
+    var counter = 0;
+    var interval = setInterval(function() {
+        counter ++;
+        if( page.speed < 60 ) {
+            page.speed += Math.floor(Math.random()*10);
+            if( page.rpm.percent < 80 ) {
+                page.rpm.percent += Math.floor(Math.random()*25);
+            } else {
+                page.rpm.percent = 40;
+            }
+        } else if (Math.random() > 0.5 ) {
+            page.speed += Math.floor(Math.random()*10);
+            page.rpm.percent = Math.min(80, Math.floor(Math.random()*90));
+        } else {
+            page.speed -= Math.floor(Math.random()*10);
+            page.rpm.percent = Math.min(80, Math.floor(Math.random()*90));
+        }
+
+        page.fuel.percent = Math.round(page.fuel.percent - 0.01);
+        page.fuel.level = Math.round(page.fuel.level - 0.01);
+        page.fuel.range = Math.round(page.fuel.range - 0.01);
+
+        show();
+
+        if( counter > 600 ) {
+            clearInterval(interval);
+        }
+    }, 1000);
 }
\ No newline at end of file
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 014e722..a6b7a27 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -4,6 +4,8 @@ $list-group-bg: transparent;
 $font-size-base: 1.5rem;
 $input-bg: transparent;
 $input-color: #FFFFFF;
+$card-bg: transparent;
+$card-border-color: transparent;
 
 @import "~bootstrap/scss/bootstrap";
 @import "main.scss";
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e1d6ceb..bb0cd5a 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -6,9 +6,30 @@ html {
     height: 100%;
     background-size: cover;
     -webkit-overflow-scrolling: touch;
+    overflow: hidden;
+}
+@keyframes blink{
+    0%  { opacity: .25;}
+    25% { opacity: .5;}
+    50% { opacity: .1;}
+    75% { opacity: .5;}
+    100%{ opacity: .25;}
 }
-
 body {
+    overflow: hidden;
+
+    .speed {
+        font-size: 8rem;
+    }
+
+    .car {
+        .warning {
+            left: 35%;
+            top: 50%;
+            animation: blink 3s linear infinite;
+        }
+    }
+    
     .log {
         display: none;
         position: absolute;
diff --git a/src/templates/main.template.html b/src/templates/main.template.html
index b5f66c6..b2811be 100644
--- a/src/templates/main.template.html
+++ b/src/templates/main.template.html
@@ -1 +1,178 @@
-kkkkkk
\ No newline at end of file
+<div class="container-fluid">
+    <div class="row align-items-end">
+        <div class="col-12">
+            <span class="speed">
+                {{ speed }}
+            </span>
+            MPH
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-3 px-0">
+            <div class="container px-0 tirePreassure mt-5">
+                <div class="row">
+                    <div class="col-12 no-gutters text-right">
+                        <small>
+                            LEFT FRONT TIRE
+                        </small>
+                    </div>
+                </div>
+                <div class="row value">
+                    <div class="col-12 text-right">
+                        <small class="text-success">
+                            {{ tires.front.left }} PSI <i class="far fa-check-circle"></i>
+                        </small>
+                    </div>
+                </div>
+            </div>
+            <div class="container px-0 tirePreassure mb-5 position-absolute" style="bottom: 0;">
+                <div class="row">
+                    <div class="col-12 no-gutters text-right">
+                        <small>
+                            LEFT REAR TIRE
+                        </small>
+                    </div>
+                </div>
+                <div class="row value">
+                    <div class="col-12 text-right">
+                        <small class="text-warning">
+                            {{ tires.rear.left }} PSI <i class="fas fa-exclamation-circle"></i>
+                        </small>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-6 text-center car" onclick="app.simulate()">
+            <img src="images/HMI_Dashboard_Car_720.png">
+            {{ #isWarning }}
+            <div class="warning text-danger position-absolute">
+                <i class="fa-4x fas fa-exclamation-triangle"></i>
+            </div>
+            {{ /isWarning }}
+        </div>
+        <div class="col-3 px-0">
+            <div class="container px-0 tirePreassure mt-5">
+                <div class="row">
+                    <div class="col-12 no-gutters text-left">
+                        <small>
+                            RIGHT FRONT TIRE
+                        </small>
+                    </div>
+                </div>
+                <div class="row value">
+                    <div class="col-12 text-left">
+                        <small class="text-danger">
+                            <i class="far fa-times-circle"></i> {{ tires.front.right }} PSI
+                        </small>
+                    </div>
+                </div>
+            </div>
+            <div class="container px-0 tirePreassure mb-5 position-absolute" style="bottom: 0;">
+                <div class="row">
+                    <div class="col-12 no-gutters text-left">
+                        <small>
+                            RIGHT REAR TIRE
+                        </small>
+                    </div>
+                </div>
+                <div class="row value">
+                    <div class="col-12 text-left">
+                        <small class="text-success">
+                            <i class="far fa-check-circle"></i> {{ tires.rear.right }}  PSI
+                        </small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row mt-5">
+        <div class="col-6 offset-6">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-9 offset-3">
+                        <div class="container">
+                            <div class="row">
+                                <small class="col-5 text-right">
+                                    LEVEL:
+                                </small>
+                                <small class="col-7 px-0 text-left text-primary">
+                                    {{ fuel.level }} GALLONS
+                                </small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6 offset-6">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-9 offset-3">
+                        <div class="container">
+                            <div class="row">
+                                <small class="col-5 text-right">
+                                    RANGE:
+                                </small>
+                                <small class="col-7 px-0 text-left text-primary">
+                                    {{ fuel.range }} MI
+                                </small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6 offset-6">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-9 offset-3">
+                        <div class="container">
+                            <div class="row">
+                                <small class="col-5 text-right">
+                                    AVG:
+                                </small>
+                                <small class="col-7 px-0 text-left text-primary">
+                                    {{ fuel.avg }} MPG
+                                </small>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-6">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-3">
+                        <i class="fa-2x fas fa-tachometer-alt"></i>
+                    </div>
+                    <div class="col-9">
+                        <div class="progress">
+                            <div class="progress-bar" role="progressbar" style="width: {{ rpm.percent }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="col-6">
+            <div class="container">
+                <div class="row align-items-center">
+                    <div class="col-3">
+                        <i class="fa-2x fas fa-gas-pump"></i>
+                    </div>
+                    <div class="col-9">
+                        <div class="progress">
+                            <div class="progress-bar" role="progressbar" style="width: {{ fuel.percent }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file