From 7a752d56215e1de776b9c0c2744a8fa0caebf710 Mon Sep 17 00:00:00 2001 From: Daniel Weber Date: Thu, 16 Mar 2017 22:03:24 -0400 Subject: [PATCH 1/3] faster frequency, ended function, register syntactic sugar array - added a faster frequency to make the interpreter run as fast as possible - added a program end function to reduce code reuse and added a reset button click, since most people do that anyway - added array for register syntactic sugar --- index.html | 96 +++++++++++++----------------------------------------- 1 file changed, 22 insertions(+), 74 deletions(-) diff --git a/index.html b/index.html index 50c2b1e..75c832e 100644 --- a/index.html +++ b/index.html @@ -53,6 +53,7 @@

MIPS Interpreter

  • 64 Hz
  • 128 Hz
  • 256 Hz
    • +
  • 1024 Hz
    • @@ -282,8 +283,7 @@

    Supported Instructions

    } else { if (!programTerminated) { - programTerminated = true; - document.getElementById('recent-instruction').innerHTML += "
    No more instructions to run! Press Reset to reload the code!"; + programEnded(); } } displayRegisters(); @@ -314,10 +314,8 @@

    Supported Instructions

    } else { if (!programTerminated) { - programTerminated = true; - document.getElementById('recent-instruction').innerHTML += "
    No more instructions to run! Press Reset to reload the code!"; + programEnded(); } - else {} } } else { // no breakpoint selected @@ -325,6 +323,13 @@

    Supported Instructions

    } } + function programEnded() { + programTerminated = true; + document.getElementById('recent-instruction').innerHTML += "
    No more instructions to run! Press Reset to reload the code!"; + // press the stop button and clear the interval from running + document.getElementById('reset').click(); + } + function stop() { if (runner !== undefined) { clearInterval(runner); @@ -406,77 +411,20 @@

    Supported Instructions

    program.registers = initialRegisters.slice(); } - // TODO: use array indexing for this + var registerSyntactic = [ + "$zero", "$at", "$v0", "$v1", + "$a0", "$a1", "$a2", "$a3", + "$t0", "$t1", "$t2", "$t3", "$t4", "$t5", "$t6", "$t7", + "$s0", "$s1", "$s2", "$s3", "$s4", "$s5", "$s6", "$s7", + "$t8", "$t9", "$k0", "$k1", "$gp", "$sp", "$fp", "$ra" + ]; + function getRegisterSyntacticSugar(registerNo) { - switch(registerNo) { - case 0: - return "$zero"; - case 1: - return "$at"; - case 2: - return "$v0"; - case 3: - return "$v1"; - case 4: - return "$a0"; - case 5: - return "$a1"; - case 6: - return "$a2"; - case 7: - return "$a3"; - case 8: - return "$t0"; - case 9: - return "$t1"; - case 10: - return "$t2"; - case 11: - return "$t3"; - case 12: - return "$t4"; - case 13: - return "$t5"; - case 14: - return "$t6"; - case 15: - return "$t7"; - case 16: - return "$s0"; - case 17: - return "$s1"; - case 18: - return "$s2"; - case 19: - return "$s3"; - case 20: - return "$s4"; - case 21: - return "$s5"; - case 22: - return "$s6"; - case 23: - return "$s7"; - case 24: - return "$t8"; - case 25: - return "$t9"; - case 26: - return "$k0"; - case 27: - return "$k1"; - case 28: - return "$gp"; - case 29: - return "$sp"; - case 30: - return "$fp"; - case 31: - return "$ra"; - default: - console.log("Bad register number: " + registerNo); + if(registerNo < 0 || registerNo > 31) { + console.log("Bad register number: " + registerNo); + return undefined; // no syntactic sugar } - return undefined; // no syntactic sugar + return registerSyntactic[registerNo]; } From af17983eaad601ee45f91150807846f52aa0284a Mon Sep 17 00:00:00 2001 From: Daniel Weber Date: Thu, 16 Mar 2017 22:28:07 -0400 Subject: [PATCH 2/3] added larger recent instructions - made the html have a max height and made it so that the js always scrolls to the bottom. - only start running if there is code --- index.html | 30 ++++++++++++++++++++---------- static/mips.css | 3 +++ 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 75c832e..b270c9a 100644 --- a/index.html +++ b/index.html @@ -195,6 +195,8 @@

    Supported Instructions

    var programTerminated = true; var cpuFrequency = 32; + var maxRecentInsns = 20; + function setFrequency(freq) { cpuFrequency = freq; document.getElementById('freq').innerHTML = 'CPU: ' + freq + ' Hz ' @@ -233,14 +235,16 @@

    Supported Instructions

    }); document.getElementById('run').addEventListener('click', function() { - if (globalP === undefined) { - setup(); + if(document.getElementById('code').value != '') { + if (globalP === undefined) { + setup(); + } + clearAlerts(); + runner = setInterval(stepWithBreakpoint, 1000 / cpuFrequency); + document.getElementById('step').parentElement.style.display = "none"; + document.getElementById('run').parentElement.style.display = "none"; + document.getElementById('stop').parentElement.style.display = ""; } - clearAlerts(); - runner = setInterval(stepWithBreakpoint, 1000 / cpuFrequency); - document.getElementById('step').parentElement.style.display = "none"; - document.getElementById('run').parentElement.style.display = "none"; - document.getElementById('stop').parentElement.style.display = ""; }); document.getElementById('stop').addEventListener('click', function() { @@ -270,7 +274,10 @@

    Supported Instructions

    if (globalP.pc / 4 < globalP.insns.length) { var currentInsn = globalP.insns[globalP.pc / 4]; trackInsn(currentInsn, false); - document.getElementById('recent-instruction').innerHTML = getRecentInsnsHTML(); + + var recentInsnElem = document.getElementById('recent-instruction') + + recentInsnElem.innerHTML = getRecentInsnsHTML(); globalP.step(); for (var i = 0; i < globalP.delaySlotInsnsPC.length; ++i) { var delaySlotInsn = globalP.insns[globalP.delaySlotInsnsPC.shift() / 4]; @@ -278,8 +285,11 @@

    Supported Instructions

    if (delaySlotInsn !== undefined) { trackInsn(delaySlotInsn, true); } - document.getElementById('recent-instruction').innerHTML = getRecentInsnsHTML(); + recentInsnElem.innerHTML = getRecentInsnsHTML(); } + + // scroll to bottom + recentInsnElem.scrollTop = recentInsnElem.scrollHeight - recentInsnElem.offsetHeight- 16; } else { if (!programTerminated) { @@ -338,7 +348,7 @@

    Supported Instructions

    } function trackInsn(insn, isDelaySlot) { - if (recentInsns.length >= 5) { + if (recentInsns.length >= maxRecentInsns) { recentInsns.shift(); // removes the oldest instruction } recentInsns.push([insn, isDelaySlot]); diff --git a/static/mips.css b/static/mips.css index 6315438..4651a39 100644 --- a/static/mips.css +++ b/static/mips.css @@ -20,6 +20,9 @@ textarea { #recent-instruction { font-family: monospace; font-size: 12px; + max-height: 120px; + overflow-x: hidden; + overflow-y: scroll; } #recent-instruction .current { From ef93c3876e601eb7deec68896e60e6271b5c2fde Mon Sep 17 00:00:00 2001 From: Daniel Weber Date: Thu, 16 Mar 2017 22:49:03 -0400 Subject: [PATCH 3/3] added a sample program added a sample program so that people can immediately see how awesome this site is --- index.html | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b270c9a..b9cd6d9 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,7 @@

    MIPS Interpreter


    The most recent instructions will be shown here when stepping.
    +

    Features

    • Reset to load the code, Step one instruction, or Run all instructions
      • @@ -222,6 +223,28 @@

      Supported Instructions

      document.getElementById('stop').parentElement.style.display = "none"; } + document.getElementById('sample-pgrm').addEventListener('click', function() { + console.log('here') + document.getElementById('code').value = `# going to perform a simple 5*13 +addiu $1, $0, 5 # a = 5 + +addiu $2, $0, 13 # j = 13 +addiu $3, $0, 1 # i = 1 +addiu $4, $0, 0 # temp = 0 + +loop_guard: +BEQ $2, $3, loop_terminate +addu $4, $4, $1 # temp += a +addiu $3, $3, 1 # i++ +j loop_guard +NOP # note that this is in the jump's delay slot +loop_terminate: +MOVZ $1, $4, $0 # move the value from the temp into a +# Done. The value of 5*13 should be in register $1`; + + setup(); + }); + document.getElementById('reset').addEventListener('click', function() { setup(); document.getElementById('recent-instruction').innerHTML = "The most recent instructions will be shown here when stepping." @@ -337,7 +360,7 @@

      Supported Instructions

      programTerminated = true; document.getElementById('recent-instruction').innerHTML += "
      No more instructions to run! Press Reset to reload the code!"; // press the stop button and clear the interval from running - document.getElementById('reset').click(); + document.getElementById('stop').click(); } function stop() {