summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-12-10 14:24:43 +0100
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 19:03:18 +0100
commit9a47d56486ca9d6852613e98582bba8257b08d81 (patch)
tree6b9efd80f6a3f0c7ec1a57138a763d2a7d021067 /src
parent427a12e11932716a87741686e558a0ad8b49bb03 (diff)
BUGFIX Add landscape/portrait support
Diffstat (limited to 'src')
-rw-r--r--src/images/HMI_Dashboard_Car_1080.png (renamed from src/images/HMI_Dashboard_Car.png)bin256058 -> 256058 bytes
-rw-r--r--src/js/app.js6
-rw-r--r--src/styles/landscape.scss22
-rw-r--r--src/styles/main.scss8
-rw-r--r--src/styles/portrait.scss19
-rw-r--r--src/templates/main.template.html50
6 files changed, 84 insertions, 21 deletions
diff --git a/src/images/HMI_Dashboard_Car.png b/src/images/HMI_Dashboard_Car_1080.png
index 387a4b1..387a4b1 100644
--- a/src/images/HMI_Dashboard_Car.png
+++ b/src/images/HMI_Dashboard_Car_1080.png
Binary files differ
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">