From 427a12e11932716a87741686e558a0ad8b49bb03 Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Tue, 10 Dec 2019 14:06:17 +0100 Subject: FUNCT First Dashboard version --- src/config.xml | 2 +- src/images/HMI_Dashboard_Car.png | Bin 0 -> 256058 bytes src/images/HMI_Dashboard_Car_720.png | Bin 0 -> 123404 bytes src/index.js | 2 + src/js/app.js | 75 ++++++++++++++- src/styles/app.scss | 2 + src/styles/main.scss | 23 ++++- src/templates/main.template.html | 179 ++++++++++++++++++++++++++++++++++- 8 files changed, 279 insertions(+), 4 deletions(-) create mode 100644 src/images/HMI_Dashboard_Car.png create mode 100644 src/images/HMI_Dashboard_Car_720.png 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 @@ - SETTINGS + DASHBOARD HTML5 Dashboard demo diff --git a/src/images/HMI_Dashboard_Car.png b/src/images/HMI_Dashboard_Car.png new file mode 100644 index 0000000..387a4b1 Binary files /dev/null and b/src/images/HMI_Dashboard_Car.png 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 Binary files /dev/null and b/src/images/HMI_Dashboard_Car_720.png 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 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 +
+
+
+ + {{ speed }} + + MPH +
+
+
+
+
+
+
+ + LEFT FRONT TIRE + +
+
+
+
+ + {{ tires.front.left }} PSI + +
+
+
+
+
+
+ + LEFT REAR TIRE + +
+
+
+
+ + {{ tires.rear.left }} PSI + +
+
+
+
+
+ + {{ #isWarning }} +
+ +
+ {{ /isWarning }} +
+
+
+
+
+ + RIGHT FRONT TIRE + +
+
+
+
+ + {{ tires.front.right }} PSI + +
+
+
+
+
+
+ + RIGHT REAR TIRE + +
+
+
+
+ + {{ tires.rear.right }} PSI + +
+
+
+
+
+
+
+
+
+
+
+
+ + LEVEL: + + + {{ fuel.level }} GALLONS + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + RANGE: + + + {{ fuel.range }} MI + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + AVG: + + + {{ fuel.avg }} MPG + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file -- cgit 1.2.3-korg