animation for all toggle switches done

index.html

@@ -345,31 +345,31 @@
         <g transform="matrix(1.04197,0,0,1.04197,1076.52,141.554)">
           <text x="192.173px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">Data</text>
         </g>
-        <g transform="matrix(1.04197,0,0,1.04197,144.453,221.454)">
+        <g id="SW-STOP" transform="matrix(1.04197,0,0,1.04197,144.453,221.454)">
           <text x="188.842px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">STOP</text>
         </g>
-        <g transform="matrix(1.04197,0,0,1.04197,144.386,262.103)">
+        <g id="SW-RUN" transform="matrix(1.04197,0,0,1.04197,144.386,262.103)">
           <text x="192.179px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">RUN</text>
         </g>
-        <g transform="matrix(1.04197,0,0,1.04197,345.579,221.179)">
+        <g id="SW-EXAMINE" transform="matrix(1.04197,0,0,1.04197,345.579,221.179)">
           <text x="177.841px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">EXAMINE</text>
         </g>
-        <g transform="matrix(1.04197,0,0,1.04197,346.134,264.187)">
+        <g id="SW-EXAMINE-NEXT" transform="matrix(1.04197,0,0,1.04197,346.134,264.187)">
           <text x="177.841px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">EXAMINE</text>
           <text x="189.176px" y="220.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">NEXT</text>
         </g>
-        <g transform="matrix(1.04197,0,0,1.04197,243.798,210.443)">
+        <g id="SW-SINGLE" transform="matrix(1.04197,0,0,1.04197,243.798,210.443)">
           <text x="182.842px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">SINGLE</text>
           <text x="189.507px" y="220.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">STEP</text>
         </g>
-        <g transform="matrix(1.04197,0,0,1.04197,446.65,221.179)">
+        <g id="SW-DEPOSIT" transform="matrix(1.04197,0,0,1.04197,446.65,221.179)">
           <text x="178.84px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">DEPOSIT</text>
         </g>
-        <g transform="matrix(1.04197,0,0,1.04197,446.65,264.187)">
+        <g id="SW-DEPOSIT-NEXT" transform="matrix(1.04197,0,0,1.04197,446.65,264.187)">
           <text x="178.84px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">DEPOSIT</text>
           <text x="189.176px" y="220.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">NEXT</text>
         </g>
-        <g transform="matrix(1.04197,0,0,1.04197,548.763,221.179)">
+        <g id="SW-RESET" transform="matrix(1.04197,0,0,1.04197,548.763,221.179)">
           <text x="185.174px" y="208.395px" style="font-family:'Helvetica-Bold', 'Helvetica';font-weight:700;font-size:12px;fill:white;">RESET</text>
         </g>
         <g transform="matrix(1.04197,0,0,1.04197,548.763,264.175)">

js/panel.js

@@ -370,12 +370,22 @@ panel.SWITCH_INFO = [
     },
 ];
 
+/** The current state of all the address switches. */
+panel.addressSwitchStates = new Array(16);
+
+/** Whether the power is turned on. */
+panel.poweredOn = false;
+
+/** Whether the machine is running. */
+panel.running = false;
+
 /**
  * Initializes thie UI.
  */
 panel.init = function() {
-    var localeButtonElem = document.getElementById('locale');
+    // Initializes event listener for nav buttons.
-    localeButtonElem.addEventListener('click', l10n.nextLocale, false);
+    var button = document.getElementById('locale');
+    button.addEventListener('click', l10n.nextLocale, false);
 
     // Initializes svg components for all LEDs.
     for (let i = 0; i < panel.LED_INFO.length; i++) {
@@ -389,6 +399,37 @@ panel.init = function() {
         let sw = panel.createSwitch(info.id, info.type,
                                     info.x, info.y);
     }
+
+    // Initializes event listener for STATELESS switches.
+    var cmd = document.getElementById('SW-STOP');
+    cmd.style.cursor = 'pointer';
+    cmd.addEventListener('click', panel.onStop, false);
+    cmd = document.getElementById('SW-RUN');
+    cmd.style.cursor = 'pointer';
+    cmd.addEventListener('click', panel.onRun, false);
+    cmd = document.getElementById('SW-SINGLE');
+    cmd.style.cursor = 'pointer';
+    cmd.addEventListener('click', panel.onSingle, false);
+    cmd = document.getElementById('SW-EXAMINE');
+    cmd.style.cursor = 'pointer';
+    cmd.addEventListener('click', panel.onExamine, false);
+    cmd = document.getElementById('SW-EXAMINE-NEXT');
+    cmd.style.cursor = 'pointer';
+    cmd.addEventListener('click', panel.onExamineNext, false);
+    cmd = document.getElementById('SW-DEPOSIT');
+    cmd.style.cursor = 'pointer';
+    cmd.addEventListener('click', panel.onDeposit, false);
+    cmd = document.getElementById('SW-DEPOSIT-NEXT');
+    cmd.style.cursor = 'pointer';
+    cmd.addEventListener('click', panel.onDepositNext, false);
+    cmd = document.getElementById('SW-RESET');
+    cmd.style.cursor = 'pointer';
+    cmd.addEventListener('click', panel.onReset, false);
+
+    // Initializes internal states.
+    panel.addressSwitchStates.fill(0);
+    panel.poweredOn = false;
+    panel.running = false;
 };
 
 /**
@@ -461,14 +502,38 @@ panel.createSwitch = function(id, type, x, y) {
     upElem.id = id + '-up';
     upElem.x.baseVal.value = '' + x;
     upElem.y.baseVal.value = '' + y;
+    if (type == panel.TOGGLE_SWITCH) {
+        upElem.style.cursor = 'pointer';
+    }
     upElem.style.display = 'none';
 
     var downElem = switchDownElem.cloneNode(true);
     downElem.id = id + '-down';
     downElem.x.baseVal.value = '' + x;
     downElem.y.baseVal.value = '' + y;
+    if (type == panel.TOGGLE_SWITCH) {
+        downElem.style.cursor = 'pointer';
+    }
     downElem.style.display = (type == panel.TOGGLE_SWITCH) ? 'inline' : 'none';
 
+    if (type == panel.TOGGLE_SWITCH) {
+        // Here only sets click listener for all TOGGLE_SWITCH
+        // controls. For STATELESS_SWITCH controls, each control maps
+        // to one or two commands, thus, their listeners will be
+        // installed separatedly in init().
+        var sourceId = id;
+        upElem.addEventListener('click',
+                                function() {
+                                    panel.onToggle(sourceId, 1);
+                                },
+                                false);
+        downElem.addEventListener('click',
+                                function() {
+                                    panel.onToggle(sourceId, 0);
+                                },
+                                false);
+    }
+
     panelElem.appendChild(midElem);
     panelElem.appendChild(upElem);
     panelElem.appendChild(downElem);
@@ -552,7 +617,112 @@ panel.switchDownThenBack = function(id) {
             upElem.style.display = 'none';
             midElem.style.display = 'inline';
             downElem.style.display = 'none';
-        }, 300);
+        }, 400);
-    }, 300);
+    }, 100);
 };
 
+/**
+ * When STOP switch is pressed.
+ */
+panel.onStop = function() {
+    panel.switchUpThenBack('STOP-RUN');
+    window.console.log('STOP');
+};
+
+/**
+ * When RUN switch is pressed.
+ */
+panel.onRun = function() {
+    panel.switchDownThenBack('STOP-RUN');
+    window.console.log('RUN');
+};
+
+/**
+ * When SINGLE STEP switch is pressed.
+ */
+panel.onSingle = function() {
+    panel.switchUpThenBack('SINGLE');
+    window.console.log('SINGLE STEP');
+};
+
+/**
+ * When EXAMINE switch is pressed.
+ */
+panel.onExamine = function() {
+    panel.switchUpThenBack('EXAMINE');
+    window.console.log('EXAMINE');
+};
+
+/**
+ * When EXAMINE NEXT switch is pressed.
+ */
+panel.onExamineNext = function() {
+    panel.switchDownThenBack('EXAMINE');
+    window.console.log('EXAMINE NEXT');
+};
+
+/**
+ * When DEPOSIT switch is pressed.
+ */
+panel.onDeposit = function() {
+    panel.switchUpThenBack('DEPOSIT');
+    window.console.log('DEPOSIT');
+};
+
+/**
+ * When DEPOSIT NEXT switch is pressed.
+ */
+panel.onDepositNext = function() {
+    panel.switchDownThenBack('DEPOSIT');
+    window.console.log('DEPOSIT NEXT');
+};
+
+/**
+ * When RESET switch is pressed.
+ */
+panel.onReset = function() {
+    panel.switchUpThenBack('RESET');
+    window.console.log('RESET');
+};
+
+/**
+ * When power is turned on.
+ */
+panel.onPowerOn = function() {
+    window.console.log('POWER ON');
+};
+
+/**
+ * When power is turned off.
+ */
+panel.onPowerOff = function() {
+    window.console.log('POWER OFF');
+};
+
+/**
+ * Handles the click event for all TOGGLE_SWITCH controls.
+ * @param {string} id The switch ID which has been clicked.
+ * @param {number} state The state of the switch before it's clicked.
+ *     0 for the down state. 1 for the up state.
+ */
+panel.onToggle = function(id, state) {
+    if (state == 0) {
+        panel.switchUp(id);
+        window.console.log('TOGGLE: ' + id + ' 0->1');
+    } else {
+        panel.switchDown(id);
+        window.console.log('TOGGLE: ' + id + ' 1->0');
+    }
+    if (id == 'OFF-ON') {
+        if (state == 0) {
+            panel.onPowerOn();
+        } else {
+            panel.onPowerOff();
+        }
+    } else {
+        var bitIndex = parseInt(id.substr(1));
+        panel.addressSwitchStates[bitIndex] =
+            panel.addressSwitchStates[bitIndex] ? 0 : 1;
+        window.console.log(panel.addressSwitchStates);
+    }
+};