index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description"
          content="JsSpim is an online MIPS32 simulator based on Prof. James Larus's Spim. It supports breakpoints, custom execution speed, ASCII memory view, highlight on changed registers/memory and radix display for memory.">
    <meta name="author" content="Shawn Zhong">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords"
          content="spim, qtspim, simulator, mips, mips32, cpu, emulator, assembler, compiler, instruction, register, execution">

    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/xcode.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <title>JsSpim - Online MIPS32 Simulator Based on Spim</title>

    <script src="coi-serviceworker.min.js">
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-51728620-4"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());
        gtag('config', 'UA-51728620-4');
    </script>

</head>
<body>

<nav class="navbar navbar-light bg-light" id="toolbar">
    <div class="form-inline">
        <div>
            <select id="context-selector" onchange="changeContext(this.value)" class="form-control form-control"></select>
        </div>
        &nbsp;
        <div>Please choose a <a href="https://github.com/ShawnZhong/JsSpim/tree/master/Tests" target="_blank">MIPS
            assembly file</a>: &nbsp
        </div>
        <div>
            <select id="file-selector0" onchange="main(this.value, 0)" class="form-control form-control"></select>
        </div>
        <div>&nbsp or &nbsp</div>
        <div>
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="file-upload0"
                       onChange="main(this.files[0], 0);this.value=''">
                <div class="custom-file-label">upload your own</div>
            </div>
        </div>
        &nbsp;
        <div>
            <select id="file-selector1" onchange="main(this.value, 1)" class="form-control form-control"></select>
        </div>
        <div>&nbsp or &nbsp</div>
        <div>
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="file-upload1"
                       onChange="main(this.files[0], 1);this.value=''">
                <div class="custom-file-label">upload your own</div>
            </div>
        </div>
    </div>
</nav>

<div id="regs-panel" class="card">
    <div class="card-header">
        <h5 class="float-left">Regs</h5>
        <div class="float-right">
            <input type="radio" name="reg-radix" id="reg-radix-hex" value="16" checked
                   onchange="RegisterUtils.changeRadix(this.value)">
            <label for="reg-radix-hex">Hex</label>

            <input type="radio" name="reg-radix" id="reg-radix-dec" value="10"
                   onchange="RegisterUtils.changeRadix(this.value)">
            <label for="reg-radix-dec">Dec</label>

            <input type="radio" name="reg-radix" id="reg-radix-bin" value="2"
                   onchange="RegisterUtils.changeRadix(this.value)">
            <label for="reg-radix-bin">Bin</label>
        </div>
    </div>


    <div class="card-body">
        <h6>Special Registers</h6>
        <pre id="special-regs" class="reg-lines"></pre>
        <h6>General Registers</h6>
        <pre id="general-regs" class="reg-lines"></pre>
        <h6>Single Precision</h6>
        <pre id="float-regs" class="reg-lines"></pre>
        <h6>Double Precision</h6>
        <pre id="double-regs" class="reg-lines"></pre>
    </div>
</div>

<div id="text-panel" class="card">
    <div class="card-header">
        <h5 class="float-left">Text Segment</h5>
        <div class="float-right">
            <input id="toggle-kernel-text" type="checkbox" checked
                   onchange="InstructionUtils.toggleKernelText(this.checked)">
            <label for="toggle-kernel-text"> Kernel text </label>

            &nbsp

            <input id="toggle-instruction-value" type="checkbox"
                   onchange="InstructionUtils.toggleBinary(this.checked)">
            <label for="toggle-instruction-value"> Instruction value </label>

            &nbsp

            <input id="toggle-comment" type="checkbox" checked
                   onchange="InstructionUtils.toggleSourceCode(this.checked)">
            <label for="toggle-comment"> Source code </label>
        </div>
    </div>

    <div class="card-body">
        <div id="user-text-container">
            <pre class="segment-title">User Text Segment</pre>
            <pre id="user-text-content" title="Click to toggle breakpoint"></pre>
        </div>
        <div id="kernel-text-container">
            <pre class="segment-title">Kernel Text Segment</pre>
            <pre id="kernel-text-content" title="Click to toggle breakpoint"></pre>
        </div>
    </div>


    <div class="card-footer">
        <div class="form-inline float-left" id="execution-fieldset">
            <div class="form-group">
                <label for="speed-selector" class="col-form-label">Execution speed: &nbsp</label>
                <div>
                    <input type="range" id="speed-selector" class="custom-range" value="90" max="100" min="0"
                           oninput="Execution.setSpeed(this.value)">
                </div>
            </div>
            &nbsp&nbsp&nbsp
            <div>
                <button id="play-button" class="btn btn-primary btn-sm" style="width: 5rem;">Play</button>
                <button id="step-button" class="btn btn-success btn-sm" style="width: 4rem;">Step</button>
                <button id="reset-button" class="btn btn-danger btn-sm" style="width: 4rem;">Reset</button>
            </div>
        </div>

        <div class="text-muted float-right col-form-label">
            Click line to toggle breakpoint
        </div>
    </div>
</div>

<div id="data-panel" class="card">
    <div class="card-header">
        <h5 class="float-left">Data Segment</h5>
        <div class="float-right">
            <input id="toggle-kernel-data" type="checkbox" checked
                   onchange="MemoryUtils.toggleKernelData(this.checked)">
            <label for="toggle-kernel-data"> Kernel data </label>

            &nbsp

            <input type="radio" name="data-radix" id="data-radix-hex" value="16" checked
                   onchange="MemoryUtils.changeDataRadix(this.value)">
            <label for="data-radix-hex">Hex</label>

            &nbsp

            <input type="radio" name="data-radix" id="data-radix-dec" value="10"
                   onchange="MemoryUtils.changeDataRadix(this.value)">
            <label for="data-radix-dec">Dec</label>
        </div>
    </div>

    <div class="card-body">
        <div id="user-data-container">
            <pre class="segment-title">User Data Segment</pre>
            <pre id="user-data-content"></pre>
        </div>
        <div id="kernel-data-container">
            <pre class="segment-title">Kernel Data Segment</pre>
            <pre id="kernel-data-content"></pre>
        </div>
    </div>


</div>

<div id="stack-panel" class="card">
    <div class="card-header">
        <h5 class="float-left">User Stack</h5>
        <div class="float-right">
            <input type="radio" name="stack-radix" id="stack-radix-hex" value="16" checked
                   onchange="MemoryUtils.changeStackRadix(this.value)">
            <label for="stack-radix-hex">Hex</label>

            &nbsp

            <input type="radio" name="stack-radix" id="stack-radix-dec" value="10"
                   onchange="MemoryUtils.changeStackRadix(this.value)">
            <label for="stack-radix-dec">Dec</label>
        </div>
    </div>
    <div id="stack-wrapper" class="card-body">
        <pre id="stack-content"></pre>
    </div>
</div>

<div id="output-panel" class="card">
    <h5 class="card-header">Output</h5>
    <pre id="output-content" class="card-body"></pre>
</div>

<div id="log-panel" class="card">
    <h5 class="card-header">Log</h5>
    <pre id="log-content" class="card-body"></pre>
</div>
<script type='text/javascript'>
    const Elements = Object.freeze({
        output: document.getElementById('output-content'),
        log: document.getElementById('log-content'),
        contextSelector: document.getElementById('context-selector'),
        fileSelector0: document.getElementById('file-selector0'),
        fileSelector1: document.getElementById('file-selector1'),
        playButton: document.getElementById('play-button'),
        resetButton: document.getElementById('reset-button'),
        stepButton: document.getElementById('step-button'),
        speedSelector: document.getElementById('speed-selector'),
        userTextContent: document.getElementById('user-text-content'),
        kernelTextContent: document.getElementById('kernel-text-content'),
        kernelTextContainer: document.getElementById('kernel-text-container'),
        userData: document.getElementById('user-data-content'),
        kernelData: document.getElementById('kernel-data-content'),
        kernelDataContainer: document.getElementById('kernel-data-container'),
        stack: document.getElementById('stack-content'),
        generalReg: document.getElementById('general-regs'),
        specialReg: document.getElementById('special-regs'),
        floatReg: document.getElementById('float-regs'),
        doubleReg: document.getElementById('double-regs'),
    });
</script>

<script type='text/javascript' src="js/index.js"></script>
<script type='text/javascript' src="js/instruction.js"></script>
<script type='text/javascript' src="js/memory-content.js"></script>
<script type='text/javascript' src="js/memory.js"></script>
<script type='text/javascript' src="js/register.js"></script>
<script type='text/javascript' src="js/execution.js"></script>
<script async type="text/javascript" src="wasm.js"></script>
</body>
</html>