diff options
| -rw-r--r-- | src/config.xml | 2 | ||||
| -rw-r--r-- | src/images/HMI_Dashboard_Car.png | bin | 0 -> 256058 bytes | |||
| -rw-r--r-- | src/images/HMI_Dashboard_Car_720.png | bin | 0 -> 123404 bytes | |||
| -rw-r--r-- | src/index.js | 2 | ||||
| -rw-r--r-- | src/js/app.js | 75 | ||||
| -rw-r--r-- | src/styles/app.scss | 2 | ||||
| -rw-r--r-- | src/styles/main.scss | 23 | ||||
| -rw-r--r-- | src/templates/main.template.html | 179 |
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 Binary files differnew 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 Binary files differnew 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 |
