From e1c80637ec002bc39df5aa7470a69c5ddb8819db Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Tue, 24 Sep 2019 11:34:02 +0200 Subject: FUNCT Add dummy header with buttons --- src/config.xml | 6 +- src/images/HMI_HVAC_Active.svg | 35 ---- src/images/HMI_HVAC_AirDown_Active.svg | 66 ------- src/images/HMI_HVAC_AirDown_Inactive.svg | 69 -------- src/images/HMI_HVAC_AirRight_Active.svg | 69 -------- src/images/HMI_HVAC_AirRight_Inactive.svg | 72 -------- src/images/HMI_HVAC_AirUp_Active.svg | 74 -------- src/images/HMI_HVAC_AirUp_Inactive.svg | 75 -------- src/images/HMI_HVAC_ChairIndicator_OFF.svg | 76 -------- src/images/HMI_HVAC_ChairIndicator_One.svg | 31 ---- src/images/HMI_HVAC_ChairIndicator_Two.svg | 30 ---- src/images/HMI_HVAC_Circulation_Active.svg | 87 --------- src/images/HMI_HVAC_Circulation_Inactive.svg | 87 --------- src/images/HMI_HVAC_Fan_Icon.svg | 46 ----- src/images/HMI_HVAC_Front_Active.svg | 75 -------- src/images/HMI_HVAC_Front_Inactive.svg | 72 -------- src/images/HMI_HVAC_Inactive.svg | 31 ---- src/images/HMI_HVAC_Left_Chair_OFF.svg | 87 --------- src/images/HMI_HVAC_Left_Chair_ON.svg | 59 ------- src/images/HMI_HVAC_Rear_Active.svg | 101 ----------- src/images/HMI_HVAC_Rear_Inactive.svg | 91 ---------- src/images/HMI_HVAC_Right_Chair_OFF.svg | 87 --------- src/images/HMI_HVAC_Right_Chair_ON.svg | 60 ------- src/images/agl_logo.png | Bin 0 -> 28957 bytes src/images/vertical_background.png | Bin 719555 -> 948820 bytes src/index.html | 105 +++++------ src/index.js | 6 +- src/styles/app.scss | 11 +- src/styles/fonts/icomoon.eot | Bin 0 -> 7052 bytes src/styles/fonts/icomoon.svg | 28 +++ src/styles/fonts/icomoon.ttf | Bin 0 -> 6888 bytes src/styles/fonts/icomoon.woff | Bin 0 -> 6964 bytes src/styles/main.scss | 253 +++++++-------------------- src/styles/style.css | 81 +++++++++ 34 files changed, 220 insertions(+), 1750 deletions(-) delete mode 100644 src/images/HMI_HVAC_Active.svg delete mode 100644 src/images/HMI_HVAC_AirDown_Active.svg delete mode 100644 src/images/HMI_HVAC_AirDown_Inactive.svg delete mode 100644 src/images/HMI_HVAC_AirRight_Active.svg delete mode 100644 src/images/HMI_HVAC_AirRight_Inactive.svg delete mode 100644 src/images/HMI_HVAC_AirUp_Active.svg delete mode 100644 src/images/HMI_HVAC_AirUp_Inactive.svg delete mode 100644 src/images/HMI_HVAC_ChairIndicator_OFF.svg delete mode 100644 src/images/HMI_HVAC_ChairIndicator_One.svg delete mode 100644 src/images/HMI_HVAC_ChairIndicator_Two.svg delete mode 100644 src/images/HMI_HVAC_Circulation_Active.svg delete mode 100644 src/images/HMI_HVAC_Circulation_Inactive.svg delete mode 100644 src/images/HMI_HVAC_Fan_Icon.svg delete mode 100644 src/images/HMI_HVAC_Front_Active.svg delete mode 100644 src/images/HMI_HVAC_Front_Inactive.svg delete mode 100644 src/images/HMI_HVAC_Inactive.svg delete mode 100644 src/images/HMI_HVAC_Left_Chair_OFF.svg delete mode 100644 src/images/HMI_HVAC_Left_Chair_ON.svg delete mode 100644 src/images/HMI_HVAC_Rear_Active.svg delete mode 100644 src/images/HMI_HVAC_Rear_Inactive.svg delete mode 100644 src/images/HMI_HVAC_Right_Chair_OFF.svg delete mode 100644 src/images/HMI_HVAC_Right_Chair_ON.svg create mode 100644 src/images/agl_logo.png create mode 100755 src/styles/fonts/icomoon.eot create mode 100755 src/styles/fonts/icomoon.svg create mode 100755 src/styles/fonts/icomoon.ttf create mode 100755 src/styles/fonts/icomoon.woff create mode 100755 src/styles/style.css (limited to 'src') diff --git a/src/config.xml b/src/config.xml index 2923172..3a470b8 100644 --- a/src/config.xml +++ b/src/config.xml @@ -1,9 +1,9 @@ - - HVAC + + Homescreen - HTML5 HVAC demo + HTML5 Homescreen demo Igalia, S.L. APL 2.0 diff --git a/src/images/HMI_HVAC_Active.svg b/src/images/HMI_HVAC_Active.svg deleted file mode 100644 index 71e6aa0..0000000 --- a/src/images/HMI_HVAC_Active.svg +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_AirDown_Active.svg b/src/images/HMI_HVAC_AirDown_Active.svg deleted file mode 100644 index 85dd533..0000000 --- a/src/images/HMI_HVAC_AirDown_Active.svg +++ /dev/null @@ -1,66 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_AirDown_Inactive.svg b/src/images/HMI_HVAC_AirDown_Inactive.svg deleted file mode 100644 index a013f4b..0000000 --- a/src/images/HMI_HVAC_AirDown_Inactive.svg +++ /dev/null @@ -1,69 +0,0 @@ - - - -image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_AirRight_Active.svg b/src/images/HMI_HVAC_AirRight_Active.svg deleted file mode 100644 index cfb9452..0000000 --- a/src/images/HMI_HVAC_AirRight_Active.svg +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_AirRight_Inactive.svg b/src/images/HMI_HVAC_AirRight_Inactive.svg deleted file mode 100644 index 991a773..0000000 --- a/src/images/HMI_HVAC_AirRight_Inactive.svg +++ /dev/null @@ -1,72 +0,0 @@ - - - -image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_AirUp_Active.svg b/src/images/HMI_HVAC_AirUp_Active.svg deleted file mode 100644 index f168a39..0000000 --- a/src/images/HMI_HVAC_AirUp_Active.svg +++ /dev/null @@ -1,74 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_AirUp_Inactive.svg b/src/images/HMI_HVAC_AirUp_Inactive.svg deleted file mode 100644 index 39e1fa1..0000000 --- a/src/images/HMI_HVAC_AirUp_Inactive.svg +++ /dev/null @@ -1,75 +0,0 @@ - - - -image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_ChairIndicator_OFF.svg b/src/images/HMI_HVAC_ChairIndicator_OFF.svg deleted file mode 100644 index 1fcd17f..0000000 --- a/src/images/HMI_HVAC_ChairIndicator_OFF.svg +++ /dev/null @@ -1,76 +0,0 @@ - - - -image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_ChairIndicator_One.svg b/src/images/HMI_HVAC_ChairIndicator_One.svg deleted file mode 100644 index d560c84..0000000 --- a/src/images/HMI_HVAC_ChairIndicator_One.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_ChairIndicator_Two.svg b/src/images/HMI_HVAC_ChairIndicator_Two.svg deleted file mode 100644 index b31cc90..0000000 --- a/src/images/HMI_HVAC_ChairIndicator_Two.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_Circulation_Active.svg b/src/images/HMI_HVAC_Circulation_Active.svg deleted file mode 100644 index def92bb..0000000 --- a/src/images/HMI_HVAC_Circulation_Active.svg +++ /dev/null @@ -1,87 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_Circulation_Inactive.svg b/src/images/HMI_HVAC_Circulation_Inactive.svg deleted file mode 100644 index 9c7d43f..0000000 --- a/src/images/HMI_HVAC_Circulation_Inactive.svg +++ /dev/null @@ -1,87 +0,0 @@ - - - -image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_Fan_Icon.svg b/src/images/HMI_HVAC_Fan_Icon.svg deleted file mode 100644 index ee583a0..0000000 --- a/src/images/HMI_HVAC_Fan_Icon.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_Front_Active.svg b/src/images/HMI_HVAC_Front_Active.svg deleted file mode 100644 index 146e509..0000000 --- a/src/images/HMI_HVAC_Front_Active.svg +++ /dev/null @@ -1,75 +0,0 @@ - - - - - - - - - - -]> - - - - - - - FRONT - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_Front_Inactive.svg b/src/images/HMI_HVAC_Front_Inactive.svg deleted file mode 100644 index c5d9166..0000000 --- a/src/images/HMI_HVAC_Front_Inactive.svg +++ /dev/null @@ -1,72 +0,0 @@ - - - -image/svg+xmlFRONT - \ No newline at end of file diff --git a/src/images/HMI_HVAC_Inactive.svg b/src/images/HMI_HVAC_Inactive.svg deleted file mode 100644 index 2956a26..0000000 --- a/src/images/HMI_HVAC_Inactive.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - diff --git a/src/images/HMI_HVAC_Left_Chair_OFF.svg b/src/images/HMI_HVAC_Left_Chair_OFF.svg deleted file mode 100644 index 1412266..0000000 --- a/src/images/HMI_HVAC_Left_Chair_OFF.svg +++ /dev/null @@ -1,87 +0,0 @@ - - - -image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_Left_Chair_ON.svg b/src/images/HMI_HVAC_Left_Chair_ON.svg deleted file mode 100644 index b27b126..0000000 --- a/src/images/HMI_HVAC_Left_Chair_ON.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_Rear_Active.svg b/src/images/HMI_HVAC_Rear_Active.svg deleted file mode 100644 index 182ccbd..0000000 --- a/src/images/HMI_HVAC_Rear_Active.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - - - - - - - - -]> - - - - - - REAR - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/HMI_HVAC_Rear_Inactive.svg b/src/images/HMI_HVAC_Rear_Inactive.svg deleted file mode 100644 index 574c541..0000000 --- a/src/images/HMI_HVAC_Rear_Inactive.svg +++ /dev/null @@ -1,91 +0,0 @@ - - - -image/svg+xmlREAR - \ No newline at end of file diff --git a/src/images/HMI_HVAC_Right_Chair_OFF.svg b/src/images/HMI_HVAC_Right_Chair_OFF.svg deleted file mode 100644 index 711a942..0000000 --- a/src/images/HMI_HVAC_Right_Chair_OFF.svg +++ /dev/null @@ -1,87 +0,0 @@ - - - -image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_Right_Chair_ON.svg b/src/images/HMI_HVAC_Right_Chair_ON.svg deleted file mode 100644 index 74b4861..0000000 --- a/src/images/HMI_HVAC_Right_Chair_ON.svg +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - - - - - -]> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/images/agl_logo.png b/src/images/agl_logo.png new file mode 100644 index 0000000..2792909 Binary files /dev/null and b/src/images/agl_logo.png differ diff --git a/src/images/vertical_background.png b/src/images/vertical_background.png index 3f553fe..76c7679 100644 Binary files a/src/images/vertical_background.png and b/src/images/vertical_background.png differ diff --git a/src/index.html b/src/index.html index 4a1fdfd..f4e3a38 100644 --- a/src/index.html +++ b/src/index.html @@ -22,84 +22,57 @@
-
- -
-
-
- - + +
+
- FAN SPEED + LAUNCHER
-
-
-
- - - - - - - - - + +
+ +
- A/C + MEDIAPLAYER
- - - - - - + +
+ +
+
+ HVAC +
-
-
-
-
- - - -
- AUTO -
- - - - - + +
+ +
+
+ NAVIGATION +
+ +
+
+ TUESDAY +
+
+ 7:26 AM +
+
+ + 20ºC +
-
-
+
+
+
+
- - - - - - - - - - - - - - - - - - - - -
-
diff --git a/src/index.js b/src/index.js index 67f800a..962b5a6 100644 --- a/src/index.js +++ b/src/index.js @@ -18,8 +18,4 @@ import './js/AFB.js'; /* CSS */ -import './styles/app.scss'; - -document.addEventListener('DOMContentLoaded', function(){ - TEMPERATURE.init(); -}); \ No newline at end of file +import './styles/app.scss'; \ No newline at end of file diff --git a/src/styles/app.scss b/src/styles/app.scss index c2a4c72..415e2f3 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,9 +1,14 @@ $colors: ( primary: #00ADDC, - font: #999999, - grey: #848286 + font: #FFFFFF, + grey: #848286, + button: #313131, + background: #363636 ); +$height: 218px; + @import "main.scss"; @import "portrait.scss"; -@import "landscape.scss"; \ No newline at end of file +@import "landscape.scss"; +@import "style.css"; \ No newline at end of file diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot new file mode 100755 index 0000000..fb813fa Binary files /dev/null and b/src/styles/fonts/icomoon.eot differ diff --git a/src/styles/fonts/icomoon.svg b/src/styles/fonts/icomoon.svg new file mode 100755 index 0000000..53dbfbe --- /dev/null +++ b/src/styles/fonts/icomoon.svg @@ -0,0 +1,28 @@ + + + +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf new file mode 100755 index 0000000..eef51d4 Binary files /dev/null and b/src/styles/fonts/icomoon.ttf differ diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff new file mode 100755 index 0000000..d65137a Binary files /dev/null and b/src/styles/fonts/icomoon.woff differ diff --git a/src/styles/main.scss b/src/styles/main.scss index 6c3ed5a..b61be8f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -2,53 +2,6 @@ display: none; } -input[type=range] { - -webkit-appearance: none; - width: 100%; - margin: 13.8px 0; - background: transparent; - z-index: 1000; -} - -input[type=range]:focus { - outline: none; -} - -input[type=range]::-webkit-slider-runnable-track { - width: 100%; - height: 8.4px; - cursor: pointer; - background: transparent; -} - -input[type=range]::-webkit-slider-thumb { - height: 32px; - width: 32px; - border-radius: 16px; - background: #FFFFFF; - cursor: pointer; - -webkit-appearance: none; - margin-top: -14px; - z-index: 0; -} - -progress { - -webkit-appearance: none; - height: 8.4px; - width: 100%; - margin-top: -22px; - position: absolute; - z-index: -1000; -} - -::-webkit-progress-bar { - background: map-get($colors, grey); -} - -::-webkit-progress-value { - background-color: map-get($colors, primary); -} - html { height: 100%; background-size: cover; @@ -59,177 +12,91 @@ body { font-size: 1.2rem; font-family: Arial; color: map-get($colors, font); - margin: 5%; + margin: 0; a { color: map-get($colors, font); - } - - .button { - &[value="true"] { - color: map-get($colors, primary); - .disabled { - display: none; - } - .enabled { - display: block; - } - } - &[value="false"] { - color: map-get($colors, grey); - .disabled { - display: block; - } - .enabled { - display: none; - } - } + text-decoration: none; } .top { + position: absolute; + top: 0; + width: 100%; + height: $height; display: flex; - flex-direction: row; - flex-wrap: wrap; justify-content: space-between; - align-items: center; - margin-top: 10%; - margin-bottom: 15%; - - .icon { - flex-basis: 10%; - } + background-color: map-get($colors, background); - .fanSpeed { - flex-basis: 85%; - height: 100%; + .button { + border-left: 1px solid map-get($colors, grey); + border-right: 1px solid map-get($colors, grey); + flex: auto; + text-align: center; + background-color: map-get($colors, button); - .fanSpeedContainer { - position: relative; + .icon { width: 100%; - height: 100%; + height: $height*0.70; + line-height: $height*0.70; + font-size: 90px; } - } - } - - .center { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - align-items: flex-start; - height: 100%; - - .item { - &:before { - content:''; - float:left; - padding-top:75%; - } - - &.ac, &.auto { - .label { - font-weight: bold; - font-size: 2.5rem; - text-align: center; - margin-top: -50%; - } - } - - &.seat { - img { - width: 50%; - margin: 0 25%; - } - - &[value="0"] { - .one, .two { - display: none; - } - .off { - display: block; - } - } - - &[value="1"] { - .off, .two { - display: none; - } - .one { - display: block; - } - } - - &[value="2"] { - .one, .off { - display: none; - } - .two { - display: block; - } - } + .label { + width: 100%; + height: $height*0.30; + line-height: $height*0.30; } + } - &.circulation { - + .infoContainer { + border-left: 1px solid map-get($colors, grey); + border-right: 1px solid map-get($colors, grey); + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + width: 200px; + + .day { + text-align: left; + width: 80%; + margin: 0 10%; } - &.block { - &:before { - padding-top:150%; - } - - .item { - height: 50%; - position: relative; - float: left; - width: 100%; - } + .hour { + font-size: 40px; + border-bottom: 1px solid map-get($colors, grey); + width: 80%; + margin: 0 10% 10px 10%; + padding: 10px 0; } - &.temperatures { - .temperatures-container { - width: 100%; - height: 240px; - overflow-y: scroll; - - .temperature { - &[enabled='true'] { - color: map-get($colors, primary); - } - &[enabled='false'] { - color: map-get($colors, grey); - } - font-size: 5rem; - font-weight: bold; - text-align: center; - width: 100%; - } - } + .wheater { + font-size: 30px; + letter-spacing: 2px; } + } - text-decoration: none; - flex-basis: 33%; + .statusContainer { + width: 60px; + display: flex; + flex-direction: column; + justify-content: space-around; + text-align: center; + font-size: 42px; + color: map-get($colors, grey); } } .bottom { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - align-items: flex-start; - height: 100%; - margin-top: 10%; - - .button { - flex-basis: 20%; - - img { - width: 80%; - margin: 0 10%; - } - } + position: absolute; + bottom: 0; + width: 100%; + height: 214px; + background-image: url('../images/agl_logo.png'); + background-position: center center; + background-repeat: no-repeat; } .log { diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100755 index 0000000..8d529c9 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,81 @@ +@font-face { + font-family: 'icomoon'; + src: url('fonts/icomoon.eot?g2uktq'); + src: url('fonts/icomoon.eot?g2uktq#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?g2uktq') format('truetype'), + url('fonts/icomoon.woff?g2uktq') format('woff'), + url('fonts/icomoon.svg?g2uktq#icomoon') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-sunrise:before { + content: "\e900"; +} +.icon-sun:before { + content: "\e901"; +} +.icon-moon:before { + content: "\e902"; +} +.icon-wind:before { + content: "\e905"; +} +.icon-cloudy:before { + content: "\e907"; +} +.icon-cloud:before { + content: "\e908"; +} +.icon-lightning:before { + content: "\e90e"; +} +.icon-rainy:before { + content: "\e911"; +} +.icon-snowy2:before { + content: "\e916"; +} +.icon-celsius:before { + content: "\e92d"; +} +.icon-fahrenheit:before { + content: "\e92e"; +} +.icon-music:before { + content: "\f001"; +} +.icon-signal:before { + content: "\f012"; +} +.icon-home:before { + content: "\f015"; +} +.icon-location:before { + content: "\f124"; +} +.icon-wifi:before { + content: "\f1eb"; +} +.icon-bluetooth:before { + content: "\f294"; +} +.icon-thermometer:before { + content: "\f2c7"; +} -- cgit 1.2.3-korg