diff options
| -rw-r--r-- | src/images/HMI_Dashboard_Car_1080.png (renamed from src/images/HMI_Dashboard_Car.png) | bin | 256058 -> 256058 bytes | |||
| -rw-r--r-- | src/js/app.js | 6 | ||||
| -rw-r--r-- | src/styles/landscape.scss | 22 | ||||
| -rw-r--r-- | src/styles/main.scss | 8 | ||||
| -rw-r--r-- | src/styles/portrait.scss | 19 | ||||
| -rw-r--r-- | src/templates/main.template.html | 50 |
6 files changed, 84 insertions, 21 deletions
diff --git a/src/images/HMI_Dashboard_Car.png b/src/images/HMI_Dashboard_Car_1080.png Binary files differindex 387a4b1..387a4b1 100644 --- a/src/images/HMI_Dashboard_Car.png +++ b/src/images/HMI_Dashboard_Car_1080.png diff --git a/src/js/app.js b/src/js/app.js index 7ce31f9..e9ba104 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -22,7 +22,7 @@ var page = { }, isWarning: true, fuel: { - percent: 100, + percent: 75, level: 14, range: 650, avg: 25.5 @@ -81,10 +81,6 @@ export function simulate() { 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 ) { diff --git a/src/styles/landscape.scss b/src/styles/landscape.scss index b7e1bf7..58185de 100644 --- a/src/styles/landscape.scss +++ b/src/styles/landscape.scss @@ -3,4 +3,26 @@ html { background-image: url('../images/horizontal_background.png'); } + + body { + .speedometertop { + display: none; + } + + .speedometerbottom { + display: block; + } + + .inforow { + margin-top: 0 !important; + } + + .car { + .warning { + left: 40%; + top: 50%; + animation: blink 3s linear infinite; + } + } + } }
\ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index bb0cd5a..e3fa602 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -21,14 +21,6 @@ body { .speed { font-size: 8rem; } - - .car { - .warning { - left: 35%; - top: 50%; - animation: blink 3s linear infinite; - } - } .log { display: none; diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss index f8db5e4..a123e32 100644 --- a/src/styles/portrait.scss +++ b/src/styles/portrait.scss @@ -5,6 +5,23 @@ background-position: top center; background-repeat: no-repeat; background-color: transparent; - height: 992px; + } + + body { + .speedometertop { + display: block; + } + + .speedometerbottom { + display: none; + } + + .car { + .warning { + left: 35%; + top: 50%; + animation: blink 3s linear infinite; + } + } } }
\ No newline at end of file diff --git a/src/templates/main.template.html b/src/templates/main.template.html index b2811be..32696c7 100644 --- a/src/templates/main.template.html +++ b/src/templates/main.template.html @@ -1,5 +1,5 @@ <div class="container-fluid"> - <div class="row align-items-end"> + <div class="row align-items-end speedometertop"> <div class="col-12"> <span class="speed"> {{ speed }} @@ -7,7 +7,7 @@ MPH </div> </div> - <div class="row"> + <div class="row mt-2"> <div class="col-3 px-0"> <div class="container px-0 tirePreassure mt-5"> <div class="row"> @@ -85,7 +85,7 @@ </div> </div> </div> - <div class="row mt-5"> + <div class="row mt-5 inforow"> <div class="col-6 offset-6"> <div class="container"> <div class="row align-items-center"> @@ -105,8 +105,26 @@ </div> </div> </div> - <div class="row"> - <div class="col-6 offset-6"> + <div class="row inforow"> + <div class="col-6"> + <div class="container speedometerbottom"> + <div class="row align-items-center"> + <div class="col-9 offset-3"> + <div class="container"> + <div class="row"> + <small class="col-5 text-right"> + SPEED: + </small> + <small class="col-7 px-0 text-left text-primary"> + {{ speed }} MPH + </small> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="col-6 inforow"> <div class="container"> <div class="row align-items-center"> <div class="col-9 offset-3"> @@ -125,8 +143,26 @@ </div> </div> </div> - <div class="row"> - <div class="col-6 offset-6"> + <div class="row inforow"> + <div class="col-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"> + RPM: + </small> + <small class="col-7 px-0 text-left text-primary"> + {{ rpm.value }} + </small> + </div> + </div> + </div> + </div> + </div> + </div> + <div class="col-6"> <div class="container"> <div class="row align-items-center"> <div class="col-9 offset-3"> |
