BUGFIX Add landscape/portrait support

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
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">