Adapt the demo to use kuksa.val service

- The "AUTO" element was removed because there's no compatible
VSS signal.
- Removed the indicators below the seats and now they work only
to toggle the state of the seat warmer.
- The air distribution buttons now work as a radio group as there
is only one AirDistribution setting per cabin.

Bug-AGL: SPEC-4599
Signed-off-by: Roger Zanoni <rzanoni@igalia.com>
Change-Id: Ibfaa477a7c27627ac524f39dd809b7a2195c7c9f

1 files changed, 12 insertions, 25 deletions

diff --git a/src/index.html b/src/index.html
index 88ea3fa..c8a5eed 100644
--- a/src/index.html
+++ b/src/index.html
@@ -27,7 +27,7 @@
             </div>
             <div class="fanSpeed">
                 <div class="fanSpeedContainer">
-                    <input id="FanSpeed" type="range" min="1" value="1" max="100" onchange="FANSPEED.set(this)">
+                    <input id="FanSpeed" type="range" min="1" value="1" max="100" onchange="FANSPEED.set()">
                     <progress value="1" max="100"></progress>
                 </div>
                 <div class="label">
@@ -36,39 +36,26 @@
             </div>
         </div>
         <div class="center">
-            <a id="LeftChair" value="0" class="seat left item button" onclick="CHAIR.left(this)">
+            <a id="LeftChair" value="false" class="seat left item button" onclick="SEATS.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"/>
+                <img class="on" src="../images/HMI_HVAC_Left_Chair_ON.svg"/>
             </a>
-            <a key="ac" value="false" class="ac item button" onclick="BUTTON.toggle(this)">
+            <a id="ac" key="ac" value="false" class="ac item button" onclick="BUTTONS.toggle(this)">
                 <img class="disabled" src="../images/HMI_HVAC_Inactive.svg"/>
                 <img class="enabled" src="../images/HMI_HVAC_Active.svg"/>
                 <div class="label">
                     A/C
                 </div>
             </a>
-            <a id="RightChair" value="0" class="seat right item button" onclick="CHAIR.right(this)">
+            <a id="RightChair" value="false" class="seat right item button" onclick="SEATS.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"/>
+                <img class="on" src="../images/HMI_HVAC_Right_Chair_ON.svg"/>
             </a>
             <div class="temperatures item">
                 <div id="lefttemperature" class="temperatures-container" onscroll="TEMPERATURE.left(this)"></div>
             </div>
             <div class="block item">
-                <a key="auto" value="false" class="auto item button" onclick="BUTTON.toggle(this)">
-                    <img class="disabled" src="../images/HMI_HVAC_Inactive.svg"/>
-                    <img class="enabled" src="../images/HMI_HVAC_Active.svg"/>
-                    <div class="label">
-                        AUTO
-                    </div>
-                </a>
-                <a key="circulation" value="false" class="circulation item button" onclick="BUTTON.toggle(this)">
+                <a id="recirculation" key="recirculation" value="false" class="circulation item button" onclick="BUTTONS.toggle(this)">
                     <img class="disabled" src="../images/HMI_HVAC_Circulation_Inactive.svg"/>
                     <img class="enabled" src="../images/HMI_HVAC_Circulation_Active.svg"/>
                 </a>
@@ -78,23 +65,23 @@
             </div>
         </div>
         <div class="bottom">
-            <a key="down" value="false" class="down item button" onclick="BUTTON.toggle(this)">
+            <a id="down" key="down" value="false" class="down item button" onclick="BUTTONS.toggle(this)">
                 <img class="disabled" src="../images/HMI_HVAC_AirDown_Inactive.svg">
                 <img class="enabled" src="../images/HMI_HVAC_AirDown_Active.svg">
             </a>
-            <a key="up" value="false" class="up item button" onclick="BUTTON.toggle(this)">
+            <a id="up" key="up" value="false" class="up item button" onclick="BUTTONS.toggle(this)">
                 <img class="disabled" src="../images/HMI_HVAC_AirUp_Inactive.svg">
                 <img class="enabled" src="../images/HMI_HVAC_AirUp_Active.svg">
             </a>
-            <a key="right" value="false" class="right item button" onclick="BUTTON.toggle(this)">
+            <a id="right" key="right" value="false" class="right item button" onclick="BUTTONS.toggle(this)">
                 <img class="disabled" src="../images/HMI_HVAC_AirRight_Inactive.svg">
                 <img class="enabled" src="../images/HMI_HVAC_AirRight_Active.svg">
             </a>
-            <a key="rear" value="false" class="rear item button" onclick="BUTTON.toggle(this)">
+            <a id="rear" key="rear" value="false" class="rear item button" onclick="BUTTONS.toggle(this)">
                 <img class="disabled" src="../images/HMI_HVAC_Rear_Inactive.svg">
                 <img class="enabled" src="../images/HMI_HVAC_Rear_Active.svg">
             </a>
-            <a key="front" value="false" class="front item button" onclick="BUTTON.toggle(this)">
+            <a id="front" key="front" value="false" class="front item button" onclick="BUTTONS.toggle(this)">
                 <img class="disabled" src="../images/HMI_HVAC_Front_Inactive.svg">
                 <img class="enabled" src="../images/HMI_HVAC_Front_Active.svg">
             </a>