Forked from
Bandet Alexis / y86js_v2
101 commits behind, 1 commit ahead of the upstream repository.
index.html 24.49 KiB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title id="app-name" class="string"></title>
<link rel="stylesheet" type="text/css" href="css/themes/dark.css" id="theme">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/ui/languages.js"></script>
<script type="text/javascript" src="js/ui/tabs.js"></script>
<script type="text/javascript" src="js/ui/themes.js"></script>
<script type="text/javascript" src="js/ui/init.js"></script>
</head>
<body>
<input type="file" id="input" style="display:none">
<a href="" type="file" id="output" style="display:none"></a>
<div id="app"></div>
<script type="text/template" id="default_y86_code">
.pos 0
init: irmovl Stack, %esp # Set up Stack pointer
jmp Main # Execute main program
.align 4
array: .long 0xd
.long 0xc0
.long 0xb00
.long 0xa000
Main: irmovl 4,%eax
pushl %eax # Push 4
irmovl array, %edx
pushl %edx # Push array
call Sum # Sum(array, 4)
popl %ebx
popl %ebx
halt
Sum: mrmovl 4(%esp),%edx # edx = Start
mrmovl 8(%esp),%ecx # ecx = Count
irmovl 0, %eax # sum = 0
Loop: mrmovl (%edx),%ebx # get *Start
addl %ebx,%eax # add to sum
iaddl 4, %edx # Start++
loop Loop # Stop when 0
End: ret # result must be abcd in %eax
.pos 0x95
Stack: # The stack goes here
</script>
<script type="text/template" id="default_hcl_code">
#/* $begin seq-all-hcl */
#/* $begin seq-plus-all-hcl */
####################################################################
# HCL Description of Control for Single Cycle Y86 Processor SEQ #
# Copyright (C) Randal E. Bryant, David R. O'Hallaron, 2002 #
####################################################################
####################################################################
# Declarations. Do not change/remove/delete any of these #
####################################################################
quote 'this.externCtx = {}'
quote 'let ctx = this.externCtx'
##### Symbolic representation of Y86 Instruction Codes #############
intsig NOP 'instructionSet.nop.icode'
intsig HALT 'instructionSet.halt.icode'
intsig RRMOVL 'instructionSet.rrmovl.icode'
intsig IRMOVL 'instructionSet.irmovl.icode'
intsig RMMOVL 'instructionSet.rmmovl.icode'
intsig MRMOVL 'instructionSet.mrmovl.icode'
intsig OPL 'instructionSet.alu.icode'
intsig IOPL 'instructionSet.alui.icode'
intsig JXX 'instructionSet.jxx.icode'
intsig CALL 'instructionSet.call.icode'
intsig RET 'instructionSet.ret.icode'
intsig PUSHL 'instructionSet.pushl.icode'
intsig POPL 'instructionSet.popl.icode'
intsig JMEM 'instructionSet.jmem.icode'
intsig JREG 'instructionSet.jreg.icode'
intsig LEAVE 'instructionSet.leave.icode'
intsig LOOP 'instructionSet.loop.icode'
##### Symbolic representation of Y86 Registers referenced explicitly #####
intsig RESP 'registers.esp' # Stack Pointer
intsig REBP 'registers.ebp' # Frame Pointer
intsig RECX 'registers.ecx' # Loop condition register
intsig RNONE 'registers.none' # Special value indicating "no register"
##### ALU Functions referenced explicitly #####
intsig ALUADD 'alufct.A_ADD' # ALU should add its arguments
##### Signals that can be referenced by control logic ####################
##### Fetch stage inputs #####
intsig pc 'ctx.pc' # Program counter
##### Fetch stage computations #####
intsig icode 'ctx.icode' # Instruction control code
intsig ifun 'ctx.ifun' # Instruction function
intsig rA 'ctx.ra' # rA field from instruction
intsig rB 'ctx.rb' # rB field from instruction
intsig valC 'ctx.valc' # Constant from instruction
intsig valP 'ctx.valp' # Address of following instruction
##### Decode stage computations #####
intsig valA 'ctx.vala' # Value from register A port
intsig valB 'ctx.valb' # Value from register B port
##### Execute stage computations #####
intsig valE 'ctx.vale' # Value computed by ALU
boolsig Bch 'ctx.bcond' # Branch test
##### Memory stage computations #####
intsig valM 'ctx.valm' # Value read from memory
####################################################################
# Control Signal Definitions. #
####################################################################
################ Fetch Stage ###################################
# Does fetched instruction require a regid byte?
bool need_regids =
icode in { RRMOVL, OPL, IOPL, PUSHL, POPL, IRMOVL, RMMOVL, MRMOVL };
# Does fetched instruction require a constant word?
bool need_valC =
icode in { IRMOVL, RMMOVL, MRMOVL, JXX, CALL, LOOP };
bool instr_valid = icode in
{ NOP, HALT, RRMOVL, IRMOVL, RMMOVL, MRMOVL,
OPL, IOPL, JXX, CALL, RET, PUSHL, POPL, LOOP };
################ Decode Stage ###################################
## What register should be used as the A source?
int srcA = [
icode in { RRMOVL, RMMOVL, OPL, PUSHL } : rA;
icode in { POPL, RET } : RESP;
1 : RNONE; # Don't need register
];
## What register should be used as the B source?
int srcB = [
icode in { OPL, IOPL, RMMOVL, MRMOVL } : rB;
icode in { PUSHL, POPL, CALL, RET } : RESP;
icode in { LOOP } : RECX;
1 : RNONE; # Don't need register
];
## What register should be used as the E destination?
int dstE = [
icode in { RRMOVL, IRMOVL, OPL, IOPL } : rB;
icode in { PUSHL, POPL, CALL, RET } : RESP;
icode in { LOOP } : RECX;
1 : RNONE; # Don't need register
];
## What register should be used as the M destination?
int dstM = [
icode in { MRMOVL, POPL } : rA;
1 : RNONE; # Don't need register
];
################ Execute Stage ###################################
## Select input A to ALU
int aluA = [
icode in { RRMOVL, OPL } : valA;
icode in { IRMOVL, RMMOVL, MRMOVL, IOPL } : valC;
icode in { CALL, PUSHL } : -4;
icode in { RET, POPL } : 4;
icode in { LOOP } : -1;
# Other instructions don't need ALU
];
## Select input B to ALU
int aluB = [
icode in { RMMOVL, MRMOVL, OPL, IOPL, CALL, PUSHL, RET, POPL, LOOP } : valB;
icode in { RRMOVL, IRMOVL } : 0;
# Other instructions don't need ALU
];
## Set the ALU function
int alufun = [
icode in { OPL, IOPL } : ifun;
1 : ALUADD;
];
## Should the condition codes be updated?
bool set_cc = icode in { OPL, IOPL };
################ Memory Stage ###################################
## Set read control signal
bool mem_read = icode in { MRMOVL, POPL, RET };
## Set write control signal
bool mem_write = icode in { RMMOVL, PUSHL, CALL };
## Select memory address
int mem_addr = [
icode in { RMMOVL, PUSHL, CALL, MRMOVL } : valE;
icode in { POPL, RET } : valA;
# Other instructions don't need address
];
## Select memory input data
int mem_data = [
# Value from register
icode in { RMMOVL, PUSHL } : valA;
# Return PC
icode == CALL : valP;
# Default: Don't write anything
];
################ Program Counter Update ############################
## What address should instruction be fetched at
int new_pc = [
# Call. Use instruction constant
icode == CALL : valC;
# Taken branch. Use instruction constant
icode == JXX && Bch : valC;
# Completion of RET instruction. Use value from stack
icode == RET : valM;
# Loop condition
icode == LOOP && valE != 0 : valC;
# Default: Use incremented PC
1 : valP;
];
#/* $end seq-plus-all-hcl */
#/* $end seq-all-hcl */
</script>
<script type="text/template" id="tmpl_app">
<div id="header">
<div id="header-left-container">
<span id="header-title" class="string"></span>
<button class="header-button tab-0-enabled-button tab-2-enabled-button tab-3-enabled-button">
<i class="fa fa-bolt"></i>
<span id="assemble-button" class="string"></span>
</button>
<button class="header-button tab-1-enabled-button">
<i class="fa fa-redo"></i>
<span id="reset-button" class="string"></span>
</button>
<button class="header-button tab-0-enabled-button tab-1-enabled-button">
<i class="fa fa-angle-right"></i>
<span id="step-button" class="string"></span>
</button>
<button class="header-button tab-0-enabled-button tab-1-enabled-button">
<i class="fa fa-angle-double-right"></i>
<span id="continue-button" class="string"></span>
</button>
<button class="header-button tab-0-enabled-button tab-3-enabled-button">
<i class="fa fa-file"></i>
<span id="load-button" class="string"></span>
</button>
<button class="header-button tab-0-enabled-button tab-3-enabled-button">
<i class="fa fa-save"></i>
<span id="save-button" class="string"></span>
</button>
</div>
<div id="header-right-container">
<a id="examples-link" class="string header-button" href="https://github.com/xsznix/js-y86/tree/master/samples" target="_blank" rel="noopener noreferrer"></a>
<a id="wiki-link" class="string header-button" href="https://github.com/xsznix/js-y86/wiki" target="_blank" rel="noopener noreferrer"></a>
<a class="header-button" href="https://github.com/orel33/js-y86" target="_blank" rel="noopener noreferrer">
<span id="git-link" class="string"></span>
<i class="fab fa-github"></i>
</a>
<button class="header-button icon-only" onclick="nextLanguage()"><i class="fa fa-language"></i></button>
<button class="header-button icon-only" onclick="nextTheme()"><i class="fa fa-sun"></i></button>
<a href="https://www.u-bordeaux.fr/"><img id="branding" src="images/branding.png"></a>
</div>
</div>
<div id="tab-buttons-container">
<button id="tab-0-button" class="string tab-button" onclick="setActiveTab(0)"></button>
<button id="tab-1-button" class="string tab-button" onclick="setActiveTab(1)"></button>
<button id="tab-2-button" class="string tab-button" onclick="setActiveTab(2)"></button>
<button id="tab-3-button" class="string tab-button" onclick="setActiveTab(3)"></button>
</div>
<div id="tab-contents-container">
<div id="tab-0-content" class="tab-content">
<div class="tab-content-container"></div>
</div>
<div id="tab-1-content" class="tab-content">
<div class="tab-content-container"></div>
</div>
<div id="tab-2-content" class="tab-content">
<div class="tab-content-container">
<div>
<h2 id="instruction-set-header" class="string view-header"></h2>
<div id="instruction-set-content">
<table id="instruction-set-table">
<tr>
<th id="instruction-set-instr" class="string"></th>
<th id="instruction-set-icode" class="string"></th>
<th id="instruction-set-ifun" class="string"></th>
<th id="instruction-set-size" class="string"></th>
<th id="instruction-set-argsize1" class="string"></th>
<th id="instruction-set-argpos1" class="string"></th>
<th id="instruction-set-argsize2" class="string"></th>
<th id="instruction-set-argpos2" class="string"></th>
</tr>
<tr>
<td><input type="text" value="addl"></input></td>
<td><input type="number" value="6"></input></td>
<td><input type="number" value="0"></input></td>
<td><input type="number" value="0"></input></td>
<td><select><option>const</option><option>mem</option><option>reg</option></select></td>
<td><input type="number" value="0"></input></td>
<td><select><option>const</option><option>mem</option><option>reg</option></select></td>
<td><input type="number" value="0"></input></td>
</tr>
<tr>
<td><input type="text" value="subl"></input></td>
<td><input type="number" value="6"></input></td>
<td><input type="number" value="1"></input></td>
<td><input type="number" value="0"></input></td>
<td><select><option>const</option><option>mem</option><option>reg</option></select></td>
<td><input type="number" value="0"></input></td>
<td><select><option>const</option><option>mem</option><option>reg</option></select></td>
<td><input type="number" value="0"></input></td>
</tr>
<tr>
<td><input type="text" value="andl"></input></td>
<td><input type="number" value="6"></input></td>
<td><input type="number" value="2"></input></td>
<td><input type="number" value="0"></input></td>
<td><select><option>const</option><option>mem</option><option>reg</option></select></td>
<td><input type="number" value="0"></input></td>
<td><select><option>const</option><option>mem</option><option>reg</option></select></td>
<td><input type="number" value="0"></input></td>
</tr>
<tr>
<td><input type="text" value="xorl"></input></td>
<td><input type="number" value="6"></input></td>
<td><input type="number" value="3"></input></td>
<td><input type="number" value="0"></input></td>
<td><select><option>const</option><option>mem</option><option>reg</option></select></td>
<td><input type="number" value="0"></input></td>
<td><select><option>const</option><option>mem</option><option>reg</option></select></td>
<td><input type="number" value="0"></input></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="tab-3-content" class="tab-content">
<div class="tab-content-container"></div>
</div>
</div>
</script>
<script type="text/template" id="tmpl_editor">
<h2 id="source-code-header" class="string view-header"></h2>
<div class="code"><%= code %></div>
</script>
<script type="text/template" id="tmpl_execution">
<div class="execution">
<div class="inspector vertical-pane">
<div class="processorstate"></div>
<div class="registers-wrapper"></div>
</div>
<div class="object"></div>
<div class="memory"></div>
</div>
</script>
<script type="text/template" id="tmpl_processor_state">
<h2 id="processor-state-header" class="string view-header"></h2>
<h3 id="pc-update-stage-subheader" class="string view-subheader"></h3>
<div class="stage">
<div class="Indicator">
<div class="label">NewPC</div>
<div class="value"><%= newPC %></div>
</div>
</div>
<h3 id="memory-stage-subheader" class="string view-subheader"></h3>
<div class="stage">
<div class="Indicator">
<div class="label">ValM</div>
<div class="value"><%= valM %></div>
</div>
</div>
<h3 id="execute-stage-subheader" class="string view-subheader"></h3>
<div class="stage">
<div class="Indicator">
<div class="label">Branchement</div>
<div class="value"><%= bch %></div>
</div>
<div class="Indicator">
<div class="label">ValE</div>
<div class="value"><%= valE %></div>
</div>
</div>
<h3 id="decode-stage-subheader" class="string view-subheader"></h3>
<div class="stage">
<div class="Indicator">
<div class="label">ValA</div>
<div class="value"><%= valA %></div>
</div>
<div class="Indicator">
<div class="label">ValB</div>
<div class="value"><%= valB %></div>
</div>
<div class="Indicator">
<div class="label">DstE</div>
<div class="value"><%= destE %></div>
</div>
<div class="Indicator">
<div class="label">DstM</div>
<div class="value"><%= destM %></div>
</div>
<div class="Indicator">
<div class="label">SrcA</div>
<div class="value"><%= srcA %></div>
</div>
<div class="Indicator">
<div class="label">SrcB</div>
<div class="value"><%= srcB %></div>
</div>
</div>
<h3 id="fetch-stage-subheader" class="string view-subheader"></h3>
<div class="stage">
<div class="Indicator">
<div class="label">Instr</div>
<div class="value"><%= instr %></div>
</div>
<div class="Indicator">
<div class="label">RegA</div>
<div class="value"><%= regA %></div>
</div>
<div class="Indicator">
<div class="label">RegB</div>
<div class="value"><%= regB %></div>
</div>
<div class="Indicator">
<div class="label">ValC</div>
<div class="value"><%= valC %></div>
</div>
<div class="Indicator">
<div class="label">ValP</div>
<div class="value"><%= valP %></div>
</div>
</div>
</script>
<script type="text/template" id="tmpl_registers">
<div class="column register_column">
<h3 id="registers-subheader" class="string view-subheader"></h3>
<div class="register">
<div class="label">%eax</div>
<div class="value_hex"><%= eax_hex %></div>
<div class="value_dec"><%= eax_dec %></div>
</div>
<div class="register">
<div class="label">%ecx</div>
<div class="value_hex"><%= ecx_hex %></div>
<div class="value_dec"><%= ecx_dec %></div>
</div>
<div class="register">
<div class="label">%edx</div>
<div class="value_hex"><%= edx_hex %></div>
<div class="value_dec"><%= edx_dec %></div>
</div>
<div class="register">
<div class="label">%ebx</div>
<div class="value_hex"><%= ebx_hex %></div>
<div class="value_dec"><%= ebx_dec %></div>
</div>
<div class="register">
<div class="label">%esp</div>
<div class="value_hex"><%= esp_hex %></div>
<div class="value_dec"><%= esp_dec %></div>
</div>
<div class="register">
<div class="label">%ebp</div>
<div class="value_hex"><%= ebp_hex %></div>
<div class="value_dec"><%= ebp_dec %></div>
</div>
<div class="register">
<div class="label">%esi</div>
<div class="value_hex"><%= esi_hex %></div>
<div class="value_dec"><%= esi_dec %></div>
</div>
<div class="register">
<div class="label">%edi</div>
<div class="value_hex"><%= edi_hex %></div>
<div class="value_dec"><%= edi_dec %></div>
</div>
</div>
<div class="column status_column">
<h3 id="flags-subheader" class="string view-subheader"></h3>
<div class="flags">
<div class="flag">
<div class="label">SF</div>
<div class="value"><%= sf %></div>
</div>
<div class="flag">
<div class="label">ZF</div>
<div class="value"><%= zf %></div>
</div>
<div class="flag">
<div class="label">OF</div>
<div class="value"><%= of %></div>
</div>
</div>
<h3 id="status-subheader" class="string view-subheader status_header"></h3>
<div class="status">
<div class="label">STAT</div>
<div class="value"><%= stat %></div>
</div>
<div class="err">
<div class="label">ERR</div>
<div class="value"><%= err %></div>
</div>
<div class="pc">
<div class="label">PC</div>
<div class="value"><%= pc %></div>
</div>
</div>
</script>
<script type="text/template" id="tmpl_memory">
<h2 id="memory-header" class="string view-header"></h2>
<div class="mem-header">
<div class="address">Addr</div>
<div class="value">Value</div>
</div>
<div class="mem-words-wrapper">
<div class="mem-words">
<div class="stack-pointers">
<div class="ebp"><i class="fa fa-caret-left"></i> EBP</div>
<div class="esp"><i class="fa fa-caret-left"></i> ESP</div>
</div>
</div>
</div>
</script>
<script type="text/template" id="tmpl_object_code">
<h2 id="object-code-header" class="string view-header"></h2>
<div class="lines-wrapper">
<div class="lines"></div>
</div>
</script>
<script type="text/template" id="tmpl_object_code_error">
<div class="line-no">Line <%= lineno %></div>
<div class="source"><%= source %></div>
</script>
<script type="text/template" id="tmpl_mem_word">
<div class="address"><%= address %></div>
<div class="value"><%= value %></div>
</script>
<script type="text/template" id="tmpl_hcl_editor">
<h2 id="hcl-code-header" class="string view-header"></h2>
<div class="hcl_code"><%= hcl_code %></div>
</script>
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/underscore-min.js"></script>
<script src="js/lib/backbone-min.js"></script>
<script>
$(function () {
var app = new AppView();
$('#app').append(app.$el);
});
// Don't lose unsaved work!
window.onbeforeunload = function () {
return 'All unsaved work will be lost!';
}
</script>
<script src="js/ace/ace.js"></script>
<script src="js/views/app.js"></script>
<script src="js/views/editor.js"></script>
<script src="js/views/execution.js"></script>
<script src="js/views/memory.js"></script>
<script src="js/views/registers.js"></script>
<script src="js/views/objcode.js"></script>
<script src="js/views/procstate.js"></script>
<script src="js/views/instruction-set.js"></script>
<script src="js/views/hcl.js"></script>
</body>
</html>