From 9a47d56486ca9d6852613e98582bba8257b08d81 Mon Sep 17 00:00:00 2001
From: Humberto Alfonso Díaz <humberto.alfonso@asvito.es>
Date: Tue, 10 Dec 2019 14:24:43 +0100
Subject: BUGFIX Add landscape/portrait support
---
src/images/HMI_Dashboard_Car.png | Bin 256058 -> 0 bytes
src/images/HMI_Dashboard_Car_1080.png | Bin 0 -> 256058 bytes
src/js/app.js | 6 +---
src/styles/landscape.scss | 22 +++++++++++++++
src/styles/main.scss | 8 ------
src/styles/portrait.scss | 19 ++++++++++++-
src/templates/main.template.html | 50 +++++++++++++++++++++++++++++-----
7 files changed, 84 insertions(+), 21 deletions(-)
delete mode 100644 src/images/HMI_Dashboard_Car.png
create mode 100644 src/images/HMI_Dashboard_Car_1080.png
diff --git a/src/images/HMI_Dashboard_Car.png b/src/images/HMI_Dashboard_Car.png
deleted file mode 100644
index 387a4b1..0000000
Binary files a/src/images/HMI_Dashboard_Car.png and /dev/null differ
diff --git a/src/images/HMI_Dashboard_Car_1080.png b/src/images/HMI_Dashboard_Car_1080.png
new file mode 100644
index 0000000..387a4b1
Binary files /dev/null and b/src/images/HMI_Dashboard_Car_1080.png 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">
--
cgit