Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

faster frequency, end function, register syntactic sugar array #4

Open
wants to merge 3 commits into
base: gh-pages
Choose a base branch
from
Open

faster frequency, end function, register syntactic sugar array #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a752d5
faster frequency, ended function, register syntactic sugar array
Mar 17, 2017
af17983
added larger recent instructions
Mar 17, 2017
ef93c38
added a sample program
Mar 17, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
149 changes: 65 additions & 84 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,14 @@ <h1>MIPS Interpreter</h1>
<li><a href="#" onclick="setFrequency(64);">64 Hz</a></li>
<li><a href="#" onclick="setFrequency(128);">128 Hz</a></li>
<li><a href="#" onclick="setFrequency(256);">256 Hz</a></li>
<li><a href="#" onclick="setFrequency(1024);">1024 Hz</a></li>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval

delay
The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function or code. If this parameter is less than 10, a value of 10 is used. Note that the actual delay may be longer; see "Reasons for delays longer than specified" in WindowOrWorkerGlobalScope.setTimeout() for examples.

Setting a timeout of 1024 would mean that the setInterval call will receive a delay of 1000/1024, which has no difference when compared to 1000/256.

</ul>
</div>
</div>
<br>
<div id="recent-instruction" class="well">The most recent instructions will be shown here when stepping.</div>
<hr>
<h4><button id="sample-pgrm" class="btn btn-primary">Try a sample program</button></h4>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't think that this feature is necessary and adds additional clutter. There are many tutorials online about how to write a sample MIPS program.

<h4>Features</h4>
<ul>
<li><em>Reset</em> to load the code, <em>Step</em> one instruction, or <em>Run</em> all instructions</li>
Expand Down Expand Up @@ -194,6 +196,8 @@ <h4>Supported Instructions</h4>
var programTerminated = true;
var cpuFrequency = 32;

var maxRecentInsns = 20;

function setFrequency(freq) {
cpuFrequency = freq;
document.getElementById('freq').innerHTML = 'CPU: ' + freq + ' Hz <span class="caret"></span>'
Expand All @@ -219,6 +223,28 @@ <h4>Supported Instructions</h4>
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."
Expand All @@ -232,14 +258,16 @@ <h4>Supported Instructions</h4>
});

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() {
Expand Down Expand Up @@ -269,21 +297,26 @@ <h4>Supported Instructions</h4>
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];
// update the recent instructions with the delay slot instruction
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) {
programTerminated = true;
document.getElementById('recent-instruction').innerHTML += "<br>No more instructions to run! Press <em>Reset</em> to reload the code!";
programEnded();
}
}
displayRegisters();
Expand Down Expand Up @@ -314,17 +347,22 @@ <h4>Supported Instructions</h4>
}
else {
if (!programTerminated) {
programTerminated = true;
document.getElementById('recent-instruction').innerHTML += "<br>No more instructions to run! Press <em>Reset</em> to reload the code!";
programEnded();
}
else {}
}
}
else { // no breakpoint selected
step();
}
}

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

function stop() {
if (runner !== undefined) {
clearInterval(runner);
Expand All @@ -333,7 +371,7 @@ <h4>Supported Instructions</h4>
}

function trackInsn(insn, isDelaySlot) {
if (recentInsns.length >= 5) {
if (recentInsns.length >= maxRecentInsns) {
recentInsns.shift(); // removes the oldest instruction
}
recentInsns.push([insn, isDelaySlot]);
Expand Down Expand Up @@ -406,77 +444,20 @@ <h4>Supported Instructions</h4>
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];
}
</script>
</body>
3 changes: 3 additions & 0 deletions static/mips.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down