diff options
| -rw-r--r-- | src/index.html | 72 | ||||
| -rw-r--r-- | src/js/buttons.js | 50 | ||||
| -rw-r--r-- | src/js/chair.js | 19 | ||||
| -rw-r--r-- | src/js/fan_speed.js | 10 | ||||
| -rw-r--r-- | src/styles/main.scss | 53 | ||||
| -rw-r--r-- | webpack.config.js | 14 |
6 files changed, 186 insertions, 32 deletions
diff --git a/src/index.html b/src/index.html index 4541301..4ffbb28 100644 --- a/src/index.html +++ b/src/index.html @@ -12,8 +12,8 @@ </div> <div class="fanSpeed"> <div class="fanSpeedContainer"> - <input type="range" min="1" max="100" value="50"> - <progress value="50" max="100"></progress> + <input id="FanSpeedInput" type="range" min="1" value="1" max="100" onchange="FANSPEED.update(this.value)"> + <progress id="FanSpeedProgress" value="1" max="100"></progress> </div> <div class="label"> FAN SPEED @@ -22,20 +22,27 @@ </div> <div class="center"> - <div class="seat item"> - <img src="../images/HMI_HVAC_Left_Chair_OFF.svg"/> - <img src="../images/HMI_HVAC_ChairIndicator_OFF.svg"/> - </div> - <div class="ac item"> - <img src="../images/HMI_HVAC_Inactive.svg"/> + <a id="LeftChair" value="0" href="#" class="seat left item button" onclick="CHAIR.left()"> + <img class="off" src="../images/HMI_HVAC_Left_Chair_OFF.svg"/> + <img class="one two" src="../images/HMI_HVAC_Left_Chair_ON.svg"/> + <img class="off" src="../images/HMI_HVAC_ChairIndicator_OFF.svg"/> + <img class="one" src="../images/HMI_HVAC_ChairIndicator_One.svg"/> + <img class="two" src="../images/HMI_HVAC_ChairIndicator_Two.svg"/> + </a> + <a id="acbutton" value="false" href="#" class="ac item button" onclick="BUTTON.ac()"> + <img class="disabled" src="../images/HMI_HVAC_Inactive.svg"/> + <img class="enabled" src="../images/HMI_HVAC_Active.svg"/> <div class="label"> A/C </div> - </div> - <div class="seat item"> - <img src="../images/HMI_HVAC_Right_Chair_OFF.svg"/> - <img src="../images/HMI_HVAC_ChairIndicator_OFF.svg"/> - </div> + </a> + <a id="RightChair" value="0" href="#" class="seat right item button" onclick="CHAIR.right()"> + <img class="off" src="../images/HMI_HVAC_Right_Chair_OFF.svg"/> + <img class="one two" src="../images/HMI_HVAC_Right_Chair_ON.svg"/> + <img class="off" src="../images/HMI_HVAC_ChairIndicator_OFF.svg"/> + <img class="one" src="../images/HMI_HVAC_ChairIndicator_One.svg"/> + <img class="two" src="../images/HMI_HVAC_ChairIndicator_Two.svg"/> + </a> <div class="temperatures item"> <div class="temperatures-container"> <div class="temperature"> @@ -92,15 +99,17 @@ </div> </div> <div class="block item"> - <div class="auto item"> - <img src="../images/HMI_HVAC_Inactive.svg"/> + <a id="autobutton" value="false" href="#" class="auto item button" onclick="BUTTON.auto()"> + <img class="disabled" src="../images/HMI_HVAC_Inactive.svg"/> + <img class="enabled" src="../images/HMI_HVAC_Active.svg"/> <div class="label"> AUTO </div> - </div> - <div class="circulation item"> - <img src="../images/HMI_HVAC_Circulation_Inactive.svg"/> - </div> + </a> + <a id="circulationbutton" value="false" href="#" class="circulation item button" onclick="BUTTON.circulation()"> + <img class="disabled" src="../images/HMI_HVAC_Circulation_Inactive.svg"/> + <img class="enabled" src="../images/HMI_HVAC_Circulation_Active.svg"/> + </a> </div> <div class=" temperatures item"> <div class="temperatures-container"> @@ -159,20 +168,25 @@ </div> </div> <div class="bottom"> - <a class="button"> - <img src="../images/HMI_HVAC_AirDown_Inactive.svg"> + <a id="downbutton" value="false" href="#" class="down item button" onclick="BUTTON.down()"> + <img class="disabled" src="../images/HMI_HVAC_AirDown_Inactive.svg"> + <img class="enabled" src="../images/HMI_HVAC_AirDown_Active.svg"> </a> - <a class="button"> - <img src="../images/HMI_HVAC_AirUp_Inactive.svg"> + <a id="upbutton" value="false" href="#" class="up item button" onclick="BUTTON.up()"> + <img class="disabled" src="../images/HMI_HVAC_AirUp_Inactive.svg"> + <img class="enabled" src="../images/HMI_HVAC_AirUp_Active.svg"> </a> - <a class="button"> - <img src="../images/HMI_HVAC_AirRight_Inactive.svg"> + <a id="rightbutton" value="false" href="#" class="right item button" onclick="BUTTON.right()"> + <img class="disabled" src="../images/HMI_HVAC_AirRight_Inactive.svg"> + <img class="enabled" src="../images/HMI_HVAC_AirRight_Active.svg"> </a> - <a class="button"> - <img src="../images/HMI_HVAC_Rear_Inactive.svg"> + <a id="rearbutton" value="false" href="#" class="rear item button" onclick="BUTTON.rear()"> + <img class="disabled" src="../images/HMI_HVAC_Rear_Inactive.svg"> + <img class="enabled" src="../images/HMI_HVAC_Rear_Active.svg"> </a> - <a class="button"> - <img src="../images/HMI_HVAC_Front_Inactive.svg"> + <a id="frontbutton" value="false" href="#" class="front item button" onclick="BUTTON.front()"> + <img class="disabled" src="../images/HMI_HVAC_Front_Inactive.svg"> + <img class="enabled" src="../images/HMI_HVAC_Front_Active.svg"> </a> </div> <div class="log" id="log"> diff --git a/src/js/buttons.js b/src/js/buttons.js new file mode 100644 index 0000000..3730d9f --- /dev/null +++ b/src/js/buttons.js @@ -0,0 +1,50 @@ +var buttons = { + ac: false, + auto: false, + circulation: false, + down: false, + up: false, + right: false, + rear: false, + front: false +}; + +module.exports = { + update: function() { + for( var button in buttons ) { + document.getElementById(button+'button').setAttribute('value', buttons[button]); + } + }, + ac: function() { + buttons.ac = !buttons.ac; + this.update(); + }, + auto: function() { + buttons.auto = !buttons.auto; + this.update(); + }, + circulation: function() { + buttons.circulation = !buttons.circulation; + this.update(); + }, + down: function() { + buttons.down = !buttons.down; + this.update(); + }, + up: function() { + buttons.up = !buttons.up; + this.update(); + }, + right: function() { + buttons.right = !buttons.right; + this.update(); + }, + rear: function() { + buttons.rear = !buttons.rear; + this.update(); + }, + front: function() { + buttons.front = !buttons.front; + this.update(); + } +}
\ No newline at end of file diff --git a/src/js/chair.js b/src/js/chair.js new file mode 100644 index 0000000..ceed88c --- /dev/null +++ b/src/js/chair.js @@ -0,0 +1,19 @@ +var left = 0; +var right = 0; + +module.exports = { + update_left: function() { + document.getElementById('LeftChair').setAttribute('value', left); + }, + left: function() { + left = (left + 1) % 3; + this.update_left(); + }, + update_right: function() { + document.getElementById('RightChair').setAttribute('value', right); + }, + right: function() { + right = (right + 1) % 3; + this.update_right(); + }, +}
\ No newline at end of file diff --git a/src/js/fan_speed.js b/src/js/fan_speed.js new file mode 100644 index 0000000..cc81fe0 --- /dev/null +++ b/src/js/fan_speed.js @@ -0,0 +1,10 @@ +module.exports = { + set: function(value) { + document.getElementById('FanSpeedProgress').value = value; + document.getElementById('FanSpeedInput').value = value; + }, + update: function( value ) { + this.set(value); + + } +}
\ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index d0867c4..698d3ee 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -61,6 +61,31 @@ body { color: map-get($colors, font); margin: 5%; + 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; + } + } + } + .top { display: flex; flex-direction: row; @@ -114,6 +139,34 @@ body { 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; + } + } + } &.circulation { diff --git a/webpack.config.js b/webpack.config.js index e6baeb2..ed7e0a3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -9,10 +9,18 @@ const ZipPlugin = require('zip-webpack-plugin'); module.exports = { mode: 'production', - entry: './src/index.js', + entry: { + index: './src/index.js', + FANSPEED: './src/js/fan_speed.js', + CHAIR: './src/js/chair.js', + BUTTON: './src/js/buttons.js' + }, output: { - filename: 'index.js', - path: __dirname + '/dist' + path: __dirname + '/dist', + filename: '[name].js', + libraryTarget: 'var', + // `library` determines the name of the global variable + library: '[name]' }, optimization: { minimizer: [new UglifyJsPlugin()], |