8800-simulator/js/panel.js

/**
 *   Copyright 2020 wixette@gmail.com
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 * @fileoverview The main logic to control the front panel UI.
 */

/**
 * Simple namespace.
 * @type {Object}
 */
panel = {};

/**
 * When STOP switch is pressed.
 */
panel.onStop = function() {
    panel.sim.stop();
};

/**
 * When RUN switch is pressed.
 */
panel.onRun = function() {
    panel.sim.start();
};

/**
 * When SINGLE STEP switch is pressed.
 */
panel.onSingle = function() {
    panel.sim.step(1);
};

/**
 * When EXAMINE switch is pressed.
 */
panel.onExamine = function() {
    panel.sim.examine();
};

/**
 * When EXAMINE NEXT switch is pressed.
 */
panel.onExamineNext = function() {
    panel.sim.examineNext();
};

/**
 * When DEPOSIT switch is pressed.
 */
panel.onDeposit = function() {
    panel.sim.deposit();
};

/**
 * When DEPOSIT NEXT switch is pressed.
 */
panel.onDepositNext = function() {
    panel.sim.depositNext();
};

/**
 * When RESET switch is pressed.
 */
panel.onReset = function() {
    panel.sim.reset();
};

/**
 * When power is turned on.
 */
panel.onPowerOn = function() {
    panel.sim.powerOn();
    window.setTimeout(function() {
        panel.playBeepbeep();
    }, 500);
};

/**
 * When power is turned off.
 */
panel.onPowerOff = function() {
    panel.sim.powerOff();
};

/**
 * When CPU sets the address LEDs.
 */
panel.setAddressLedsCallback = function(bits) {
    for (let i = 0; i < bits.length; i++) {
        var ledId = 'A' + i;
        if (bits[i]) {
            panel.ledOn(ledId);
        } else {
            panel.ledOff(ledId);
        }
    }
};

/**
 * When CPU sets the data LEDs.
 */
panel.setDataLedsCallback = function(bits) {
    for (let i = 0; i < bits.length; i++) {
        var ledId = 'D' + i;
        if (bits[i]) {
            panel.ledOn(ledId);
        } else {
            panel.ledOff(ledId);
        }
    }
};

/**
 * When CPU sets the WAIT LED.
 */
panel.setWaitLedCallback = function(isRunning) {
    var ledId = 'WAIT';
    if (!isRunning) {
        panel.ledOn(ledId);
    } else {
        panel.ledOff(ledId);
    }
};

/**
 * When CPU sets the status LEDs.
 */
panel.setStatusLedsCallback = function(isPoweredOn) {
    var ledIds = ['MEMR', 'MI', 'WO'];
    for (let i = 0; i < ledIds.length; i++) {
        if (isPoweredOn) {
            panel.ledOn(ledIds[i]);
        } else {
            panel.ledOff(ledIds[i]);
        }
    }
};

/**
 * When CPU reads the number input by the address/data switches.
 */
panel.getInputAddressCallback = function() {
    var word = 0;
    for (let i = 0; i < 16; i++) {
        if (panel.addressSwitchStates[i]) {
            word |= 1 << i;
        }
    }
    return word;
};

/**
 * When CPU dumps the CPU status for debug.
 */
panel.dumpCpuCallback = function(dumpHtml) {
    var dumpCpuElem = document.getElementById('cpu-dump');
    dumpCpuElem.innerHTML = dumpHtml;
};

/**
 * When CPU dumps the MEM contents for debug.
 */
panel.dumpMemCallback = function(dumpHtml) {
    var dumpMemElem = document.getElementById('mem-dump');
    dumpMemElem.innerHTML = dumpHtml;
};

/**
 * Deposites data into MEM directly in debug panel.
 */
panel.debugLoadData = function() {
    var data = document.getElementById("debug-data-input").value;
    panel.sim.loadDataAsHexString(0, data);
};

/**
 * The info of all LEDs.
 */
panel.LED_INFO = [
    {
        id: 'INTE',
        x: 194,
        y: 120
    },
    {
        id: 'PROT',
        x: 245,
        y: 120
    },
    {
        id: 'MEMR',
        x: 296,
        y: 120
    },
    {
        id: 'INP',
        x: 347,
        y: 120
    },
    {
        id: 'MI',
        x: 398,
        y: 120
    },
    {
        id: 'OUT',
        x: 449,
        y: 120
    },
    {
        id: 'HLTA',
        x: 500,
        y: 120
    },
    {
        id: 'STACK',
        x: 551,
        y: 120
    },
    {
        id: 'WO',
        x: 602,
        y: 120
    },
    {
        id: 'INT',
        x: 653,
        y: 120
    },
    {
        id: 'D7',
        x: 830,
        y: 120
    },
    {
        id: 'D6',
        x: 880,
        y: 120
    },
    {
        id: 'D5',
        x: 959,
        y: 120
    },
    {
        id: 'D4',
        x: 1009,
        y: 120
    },
    {
        id: 'D3',
        x: 1059,
        y: 120
    },
    {
        id: 'D2',
        x: 1138,
        y: 120
    },
    {
        id: 'D1',
        x: 1188,
        y: 120
    },
    {
        id: 'D0',
        x: 1238,
        y: 120
    },
    {
        id: 'WAIT',
        x: 194,
        y: 230
    },
    {
        id: 'HLDA',
        x: 245,
        y: 230
    },
    {
        id: 'A15',
        x: 346,
        y: 230
    },
    {
        id: 'A14',
        x: 423,
        y: 230
    },
    {
        id: 'A13',
        x: 473,
        y: 230
    },
    {
        id: 'A12',
        x: 523,
        y: 230
    },
    {
        id: 'A11',
        x: 602,
        y: 230
    },
    {
        id: 'A10',
        x: 652,
        y: 230
    },
    {
        id: 'A9',
        x: 702,
        y: 230
    },
    {
        id: 'A8',
        x: 780,
        y: 230
    },
    {
        id: 'A7',
        x: 830,
        y: 230
    },
    {
        id: 'A6',
        x: 880,
        y: 230
    },
    {
        id: 'A5',
        x: 959,
        y: 230
    },
    {
        id: 'A4',
        x: 1009,
        y: 230
    },
    {
        id: 'A3',
        x: 1059,
        y: 230
    },
    {
        id: 'A2',
        x: 1138,
        y: 230
    },
    {
        id: 'A1',
        x: 1188,
        y: 230
    },
    {
        id: 'A0',
        x: 1238,
        y: 230
    },
];

/**
 * The info of all toggle switches.
 *
 * A toggle switch has an upper state (which means 1 for address
 * switches) and a lower state (which means 0 for address switches).
 */
panel.TOGGLE_SWITCH_INFO = [
    {
        id: 'OFF-ON',
        x: 105,
        y: 439
    },
    {
        id: 'S15',
        x: 346,
        y: 334
    },
    {
        id: 'S14',
        x: 423,
        y: 334
    },
    {
        id: 'S13',
        x: 473,
        y: 334
    },
    {
        id: 'S12',
        x: 523,
        y: 334
    },
    {
        id: 'S11',
        x: 602,
        y: 334
    },
    {
        id: 'S10',
        x: 652,
        y: 334
    },
    {
        id: 'S9',
        x: 702,
        y: 334
    },
    {
        id: 'S8',
        x: 780,
        y: 334
    },
    {
        id: 'S7',
        x: 830,
        y: 334
    },
    {
        id: 'S6',
        x: 880,
        y: 334
    },
    {
        id: 'S5',
        x: 959,
        y: 334
    },
    {
        id: 'S4',
        x: 1009,
        y: 334
    },
    {
        id: 'S3',
        x: 1059,
        y: 334
    },
    {
        id: 'S2',
        x: 1138,
        y: 334
    },
    {
        id: 'S1',
        x: 1188,
        y: 334
    },
    {
        id: 'S0',
        x: 1238,
        y: 334
    },
];

/**
 * The info of all stateless switches.
 *
 * A stateless switch may has a upper command and a lower
 * command. When a command is clicked, the switch moves up or down
 * then back to its middle position, without keeping upper or lower
 * state.
 */
panel.STATELESS_SWITCH_INFO = [
    {
        id: 'STOP-RUN',
        x: 348,
        y: 439,
        upperCmd: { textId: 'SW-STOP', callback: panel.onStop },
        lowerCmd: { textId: 'SW-RUN', callback: panel.onRun },
    },
    {
        id: 'SINGLE',
        x: 446,
        y: 439,
        upperCmd: { textId: 'SW-SINGLE', callback: panel.onSingle },
        lowerCmd: null,
    },
    {
        id: 'EXAMINE',
        x: 550,
        y: 439,
        upperCmd: { textId: 'SW-EXAMINE', callback: panel.onExamine },
        lowerCmd: { textId: 'SW-EXAMINE-NEXT', callback: panel.onExamineNext },
    },
    {
        id: 'DEPOSIT',
        x: 650,
        y: 439,
        upperCmd: { textId: 'SW-DEPOSIT', callback: panel.onDeposit },
        lowerCmd: { textId: 'SW-DEPOSIT-NEXT', callback: panel.onDepositNext },
    },
    {
        id: 'RESET',
        x: 753,
        y: 439,
        upperCmd: { textId: 'SW-RESET', callback: panel.onReset },
        lowerCmd: null,
    },
    {
        id: 'PROTECT',
        x: 853,
        y: 439,
        upperCmd: null,
        lowerCmd: null,
    },
    {
        id: 'AUX1',
        x: 957,
        y: 439,
        upperCmd: null,
        lowerCmd: null,
    },
    {
        id: 'AUX2',
        x: 1060,
        y: 439,
        upperCmd: null,
        lowerCmd: null,
    },
];

/**
 * The type ID of toggle switch.
 */
panel.TOGGLE_SWITCH = 0;

/**
 * The type ID of stateless switch.
 */
panel.STATELESS_SWITCH = 1;

/** The current state of all the address switches. */
panel.addressSwitchStates = new Array(16);

/** If the power is turned on. */
panel.isPoweredOn = false;

/** The simulator object. */
panel.sim = null;

/**
 * Initializes thie UI.
 */
panel.init = function() {
    // Restores the last locale if it exists.
    l10n.restoreLocale();

    // Initializes event listener for nav buttons.
    var button = document.getElementById('nav-locale');
    button.addEventListener('click', l10n.nextLocale, false);
    button = document.getElementById('nav-sim');
    button.addEventListener('click', panel.showTabSim, false);
    button = document.getElementById('nav-debug');
    button.addEventListener('click', panel.showTabDebug, false);
    button = document.getElementById('nav-ref');
    button.addEventListener('click', panel.showTabRes, false);
    panel.showTabSim();

    // Initializes event listener for debug controls.
    button = document.getElementById('debug-load-data');
    button.addEventListener('click', panel.debugLoadData, false);

    // Initializes svg components for all LEDs.
    for (let i = 0; i < panel.LED_INFO.length; i++) {
        let info = panel.LED_INFO[i];
        let led = panel.createLed(info.id, info.x, info.y);
    }

    // Initializes svg components for all switches.
    for (let i = 0; i < panel.TOGGLE_SWITCH_INFO.length; i++) {
        let info = panel.TOGGLE_SWITCH_INFO[i];
        let sw = panel.createSwitch(info.id, panel.TOGGLE_SWITCH,
                                    info.x, info.y,
                                    null, null);
    }
    for (let i = 0; i < panel.STATELESS_SWITCH_INFO.length; i++) {
        let info = panel.STATELESS_SWITCH_INFO[i];
        let sw = panel.createSwitch(info.id, panel.STATELESS_SWITCH,
                                    info.x, info.y,
                                    info.upperCmd, info.lowerCmd);
    }

    // Initializes internal states.
    panel.isPoweredOn = false;
    panel.addressSwitchStates.fill(0);
    panel.switchUp('OFF-ON');

    // Initializes the simulator.
    panel.sim = new Sim8800(
        256, /* 256B MEM */
        1000000, /* 1MHz */
        panel.setAddressLedsCallback, panel.setDataLedsCallback,
        panel.setWaitLedCallback, panel.setStatusLedsCallback,
        panel.getInputAddressCallback,
        panel.dumpCpuCallback, panel.dumpMemCallback);
};

/**
 * Creates a new LED inside the panel svg.
 * @param {string} id The LED ID. This ID will be used as the prefix
 *     of DOM element's ID.
 * @param {number} x The x position.
 * @param {number} y The y position.
 */
panel.createLed = function(id, x, y) {
    var panelElem = document.getElementById('panel');
    var ledOnElem = document.getElementById('led-on');
    var ledOffElem = document.getElementById('led-off');

    ledOnElem.style.display = 'none';
    ledOffElem.style.display = 'none';

    var onElem = ledOnElem.cloneNode(true);
    onElem.id = id + '-on';
    onElem.x.baseVal.value = '' + x;
    onElem.y.baseVal.value = '' + y;
    onElem.style.display = 'none';

    var offElem = ledOffElem.cloneNode(true);
    offElem.id = id + '-off';
    offElem.x.baseVal.value = '' + x;
    offElem.y.baseVal.value = '' + y;
    offElem.style.display = 'inline';

    panelElem.appendChild(onElem);
    panelElem.appendChild(offElem);
};

/**
 * Turns on the specified LED.
 * @param {string} id The LED ID.
 */
panel.ledOn = function(id) {
    document.getElementById(id + '-on').style.display = 'inline';
    document.getElementById(id + '-off').style.display = 'none';
};

/**
 * Turns off the specified LED.
 * @param {string} id The LED ID.
 */
panel.ledOff = function(id) {
    document.getElementById(id + '-on').style.display = 'none';
    document.getElementById(id + '-off').style.display = 'inline';
};

/**
 * Creates a new toggle switch inside the panel svg.
 * @param {string} id The switch ID. This ID will be used as the
 *     prefix of DOM element's ID.
 * @param {number} type The type of the switch.
 * @param {number} x The x position.
 * @param {number} y The y position.
 * @param {Object} upperCmd The upperCmd info, for STATELESS_SWITCH
 *     only.
 * @param {Object} lowerCmd The lowerCmd info, for STATELESS_SWITCH
 *     only.
 */
panel.createSwitch = function(id, type, x, y, upperCmd, lowerCmd) {
    var panelElem = document.getElementById('panel');
    var switchMidElem = document.getElementById('switch-mid');
    var switchUpElem = document.getElementById('switch-up');
    var switchDownElem = document.getElementById('switch-down');

    switchMidElem.style.display = 'none';
    switchUpElem.style.display = 'none';
    switchDownElem.style.display = 'none';

    var midElem = switchMidElem.cloneNode(true);
    midElem.id = id + '-mid';
    midElem.x.baseVal.value = '' + x;
    midElem.y.baseVal.value = '' + y;
    midElem.style.display = (type == panel.STATELESS_SWITCH) ? 'inline' : 'none';

    var upElem = switchUpElem.cloneNode(true);
    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) {
        var sourceId = id;
        upElem.addEventListener('click',
                                function() {
                                    panel.onToggle(sourceId);
                                },
                                false);
        downElem.addEventListener('click',
                                  function() {
                                      panel.onToggle(sourceId);
                                  },
                                  false);
        // Also installs helper switch handlers.
        let softSwitchId = 'S-' + id;
        let elem = document.getElementById(softSwitchId);
        elem.addEventListener(
            'click',
            function() {
                panel.onToggle(sourceId);
            },
            false
        );
    } else {
        if (upperCmd) {
            let cmdElem = document.getElementById(upperCmd.textId);
            cmdElem.style.cursor = 'pointer';
            cmdElem.addEventListener(
                'click',
                function() {
                    panel.switchUpThenBack(id);
                    panel.playSwitch();
                    upperCmd.callback();
                },
                false);
            // Also installs helper switch handlers.
            cmdElem = document.getElementById('S' + upperCmd.textId);
            cmdElem.addEventListener(
                'click',
                function() {
                    panel.switchUpThenBack(id);
                    panel.playSwitch();
                    upperCmd.callback();
                },
                false);
        }
        if (lowerCmd) {
            let cmdElem = document.getElementById(lowerCmd.textId);
            cmdElem.style.cursor = 'pointer';
            cmdElem.addEventListener(
                'click',
                function() {
                    panel.switchDownThenBack(id);
                    panel.playSwitch();
                    lowerCmd.callback();
                },
                false);
            // Also installs helper switch handlers.
            cmdElem = document.getElementById('S' + lowerCmd.textId);
            cmdElem.addEventListener(
                'click',
                function() {
                    panel.switchDownThenBack(id);
                    panel.playSwitch();
                    lowerCmd.callback();
                },
                false);
        }
    }

    panelElem.appendChild(midElem);
    panelElem.appendChild(upElem);
    panelElem.appendChild(downElem);
};

/**
 * Moves the switch handle up - for TOGGLE_SWITCH only.
 * @param {string} id The switch ID.
 */
panel.switchUp = function(id) {
    var midElem = document.getElementById(id + '-mid');
    var upElem = document.getElementById(id + '-up');
    var downElem = document.getElementById(id + '-down');

    upElem.style.display = 'inline';
    midElem.style.display = 'none';
    downElem.style.display = 'none';
};

/**
 * Moves the switch handle down - for TOGGLE_SWITCH only.
 * @param {string} id The switch ID.
 */
panel.switchDown = function(id) {
    var midElem = document.getElementById(id + '-mid');
    var upElem = document.getElementById(id + '-up');
    var downElem = document.getElementById(id + '-down');

    upElem.style.display = 'none';
    midElem.style.display = 'none';
    downElem.style.display = 'inline';
};

/**
 * Moves the switch handle up, then back to the middle position - for
 * STATELESS_SWITCH only.
 * @param {string} id The switch ID.
 */
panel.switchUpThenBack = function(id) {
    var midElem = document.getElementById(id + '-mid');
    var upElem = document.getElementById(id + '-up');
    var downElem = document.getElementById(id + '-down');

    upElem.style.display = 'none';
    midElem.style.display = 'inline';
    downElem.style.display = 'none';

    window.setTimeout(function() {
        upElem.style.display = 'inline';
        midElem.style.display = 'none';
        downElem.style.display = 'none';

        window.setTimeout(function() {
            upElem.style.display = 'none';
            midElem.style.display = 'inline';
            downElem.style.display = 'none';
        }, 300);
    }, 300);
};

/**
 * Moves the switch handle down, then back to the middle position -
 * for STATELESS_SWITCH only.
 * @param {string} id The switch ID.
 */
panel.switchDownThenBack = function(id) {
    var midElem = document.getElementById(id + '-mid');
    var upElem = document.getElementById(id + '-up');
    var downElem = document.getElementById(id + '-down');

    upElem.style.display = 'none';
    midElem.style.display = 'inline';
    downElem.style.display = 'none';

    window.setTimeout(function() {
        upElem.style.display = 'none';
        midElem.style.display = 'none';
        downElem.style.display = 'inline';

        window.setTimeout(function() {
            upElem.style.display = 'none';
            midElem.style.display = 'inline';
            downElem.style.display = 'none';
        }, 400);
    }, 100);
};

/**
 * Handles the click event for all TOGGLE_SWITCH controls.
 * @param {string} id The switch ID which has been clicked.
 */
panel.onToggle = function(id) {
    panel.playToggle();
    if (id[0] == 'S') {
        var bitIndex = parseInt(id.substr(1));
        var state = panel.addressSwitchStates[bitIndex];
        if (state == 0) {
            panel.switchUp(id);
        } else {
            panel.switchDown(id);
        }
        panel.addressSwitchStates[bitIndex] = state ? 0 : 1;
    } else if (id == 'OFF-ON') {
        console.log(panel.isPoweredOn);
        if (panel.isPoweredOn) {
            panel.onPowerOff();
            panel.switchUp(id);
            panel.isPoweredOn = false;
        } else {
            panel.onPowerOn();
            panel.switchDown(id);
            panel.isPoweredOn = true;
        }
    }
};

/**
 * Plays a sound audio.
 */
panel.playSound = function(id) {
    var sound = document.getElementById(id);
    sound.currentTime = 0;
    sound.play();
};

/**
 * Plays beep beep.
 */
panel.playBeepbeep = function() {
    panel.playSound('sound-beepbeep');
};

/**
 * Plays the sound of toggle click.
 */
panel.playToggle = function() {
    panel.playSound('sound-toggle');
};

/**
 * Plays the sound of stateless switch click.
 */
panel.playSwitch = function() {
    panel.playSound('sound-switch');
};

/**
 * Highlights a nav tab or removes the effect.
 * @param {Element} elem The DOM element of the nav tab.
 * @param {boolean} highlight Whether highlight the tab.
 */
panel.highlightNavTab = function(elem, highlight) {
    if (highlight) {
        elem.classList.add('selected');
    } else {
        elem.classList.remove('selected');
    }
};

/**
 * Shows the simulator tab, and hides the other two.
 */
panel.showTabSim = function() {
    document.getElementById('tab-sim').style.display = 'block';
    document.getElementById('tab-debug').style.display = 'none';
    document.getElementById('tab-ref').style.display = 'none';
    panel.highlightNavTab(document.getElementById('nav-sim'), true);
    panel.highlightNavTab(document.getElementById('nav-debug'), false);
    panel.highlightNavTab(document.getElementById('nav-ref'), false);
};

/**
 * Shows the debug tab, and hides the other two.
 */
panel.showTabDebug = function() {
    document.getElementById('tab-sim').style.display = 'none';
    document.getElementById('tab-debug').style.display = 'block';
    document.getElementById('tab-ref').style.display = 'none';
    panel.highlightNavTab(document.getElementById('nav-sim'), false);
    panel.highlightNavTab(document.getElementById('nav-debug'), true);
    panel.highlightNavTab(document.getElementById('nav-ref'), false);
};

/**
 * Shows the resource tab, and hides the other two.
 */
panel.showTabRes = function() {
    document.getElementById('tab-sim').style.display = 'none';
    document.getElementById('tab-debug').style.display = 'none';
    document.getElementById('tab-ref').style.display = 'block';
    panel.highlightNavTab(document.getElementById('nav-sim'), false);
    panel.highlightNavTab(document.getElementById('nav-debug'), false);
    panel.highlightNavTab(document.getElementById('nav-ref'), true);
};