aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/config.xml2
-rw-r--r--src/images/HMI_Dashboard_Car.pngbin0 -> 256058 bytes
-rw-r--r--src/images/HMI_Dashboard_Car_720.pngbin0 -> 123404 bytes
-rw-r--r--src/index.js2
-rw-r--r--src/js/app.js75
-rw-r--r--src/styles/app.scss2
-rw-r--r--src/styles/main.scss23
-rw-r--r--src/templates/main.template.html179
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
Binary files differ
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
Binary files differ
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