mirror of https://github.com/chyyuu/v8-cpu.git
204 lines
11 KiB
HTML
204 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="ASMSimulator">
|
|
<head>
|
|
<title>Simple 8-bit V8-CPU in Javascript</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="assets/style.css">
|
|
</head>
|
|
<body ng-controller="Ctrl">
|
|
<nav class="navbar navbar-inverse" role="navigation" style="background-color:#428BCA;border:0px;border-radius:0px;">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success navbar-btn" ng-click="run()" ng-hide="isRunning"><span class="glyphicon glyphicon-play"></span> Run</button>
|
|
<button type="button" class="btn btn-default navbar-btn" ng-click="stop()" ng-show="isRunning"><span class="glyphicon glyphicon-stop"></span> Stop</button>
|
|
<button type="button" class="btn btn-default navbar-btn" ng-click="executeStep()" ng-disabled="isRunning"><span class="glyphicon glyphicon-forward"></span> Step</button>
|
|
</div>
|
|
<button type="button" class="btn btn-default navbar-btn" ng-click="reset()">Reset</button>
|
|
</div>
|
|
<div class="navbar-header navbar-right">
|
|
<a class="navbar-brand" style="color:#FFFFFF">Simple 8-bit V8-CPU</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="container">
|
|
<div class="alert alert-danger" ng-hide="error === ''">{{ error }}</div>
|
|
<div class="row">
|
|
<div class="col-lg-7 col-md-6">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Code <small>(<a href="./instruction-set.html" target="_blank" style="color: #337AB7">Instruction Set</a>) (<a href="http://enight.me/files/csao/v8spec.pdf" target="_blank" style="color: #337AB7">Specification</a>)</small></h4>
|
|
</div>
|
|
<button type="button" class="btn btn-default" ng-click="compile()">Compile</button>
|
|
<script>
|
|
function postcode()
|
|
{
|
|
var ta = document.getElementById("sourceCode");
|
|
$.post('/',{"1":ta.value},function(response){
|
|
ta.value = response;
|
|
});
|
|
}
|
|
|
|
</script>
|
|
<button type="button" class="btn btn-default" ng-click="assemble()">Assemble</button>
|
|
<button type="button" class="btn btn-default" ng-click="upload()">Upload</button>
|
|
Examples:
|
|
<select ng-model="example" ng-options="item.id as item.desc for item in examples" ng-change="showExample(example)" ng-init="initExamples()"></select>
|
|
<!-- <select id="examples" ng-change="showExample(x)" ng-model="x"> -->
|
|
<!-- <option value="haha">haha</option> -->
|
|
<!-- <option value="hoho">hoho</option> -->
|
|
<!-- </select> -->
|
|
<form role="form">
|
|
<textarea id="sourceCode"
|
|
class="form-control source-code"
|
|
style="margin-bottom:5px;"
|
|
rows="30"
|
|
tab-support
|
|
select-line
|
|
ng-model="code"></textarea>
|
|
</form>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Labels</h4>
|
|
</div>
|
|
<div class="panel-body source-code">
|
|
<table class="table table-condensed table-striped codelabels">
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Address</th>
|
|
<th>Value</th>
|
|
</tr>
|
|
<tr ng-repeat="(name, value) in labels" class="codelabel">
|
|
<td class="codelabel-name">{{ name }}</td>
|
|
<td class="codelabel-line"><a ng-click="jumpToLine(value)">{{ value | number:displayHex }}</a></td>
|
|
<td class="codelabel-value">{{ memory.data[value] | number:displayHex }}</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix visible-xs visible-sm"></div>
|
|
<div class="col-lg-5 col-md-6">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">CPU & Memory</h4>
|
|
</div>
|
|
<div class="panel-body">
|
|
<p class="text-muted">General Registers</p>
|
|
<table class="table table-condensed table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align:center">0</th>
|
|
<th style="text-align:center">1</th>
|
|
<th style="text-align:center">2</th>
|
|
<th style="text-align:center">3</th>
|
|
<th style="text-align:center">4</th>
|
|
<th style="text-align:center">5</th>
|
|
<th style="text-align:center">6</th>
|
|
<th style="text-align:center">7</th>
|
|
<th style="text-align:center">8</th>
|
|
<th style="text-align:center">9</th>
|
|
<th style="text-align:center">A</th>
|
|
<th style="text-align:center">B</th>
|
|
<th style="text-align:center">C</th>
|
|
<th style="text-align:center">D</th>
|
|
<th style="text-align:center">E</th>
|
|
<th style="text-align:center">F</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr style="text-align:center;" class="source-code">
|
|
<td><div style="margin:auto;" ng-class="displayA && 'marker marker-a'"><small>{{ cpu.gpr[0] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayB && 'marker marker-b'"><small>{{ cpu.gpr[1] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayC && 'marker marker-c'"><small>{{ cpu.gpr[2] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[3] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[4] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[5] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[6] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[7] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[8] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[9] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[10] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[11] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[12] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[13] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[14] | number:displayHex }}</small></div></td>
|
|
<td><div style="margin:auto;" ng-class="displayD && 'marker marker-d'"><small>{{ cpu.gpr[15] | number:displayHex }}</small></div></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p class="text-muted">Other Registers</p>
|
|
<table class="table table-condensed table-striped">
|
|
<tbody>
|
|
<tr>
|
|
<td style="text-align:left">Program counter <font color="E81F1F">{{ cpu.status }}</font> </td>
|
|
<td style="text-align:center;" class="source-code"><div style="margin:auto;" class="marker marker-ip"><small>{{ cpu.ip | number:displayHex }}</small></div></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:left">Instruction register</td>
|
|
<td style="text-align:center;" class="source-code"><div style="margin:auto;"><small>{{ cpu.ir | number:displayHex }}</small></div></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="text-align:left">Timer countdown</td>
|
|
<td style="text-align:center;" class="source-code"><div style="margin:auto;"><small>{{ cpu.countdown | number:displayHex }}</small></div></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p class="text-muted">RAM</p>
|
|
<div style="width:29em;" class="source-code">
|
|
<div class="memory-block"
|
|
ng-repeat="m in memory.data track by $index"
|
|
ng-class="getMemoryCellCss($index)">
|
|
<div ng-class="getMemoryInnerCellCss($index)" ng-switch="isInstruction($index)">
|
|
<small ng-switch-default>{{ m | number:displayHex }}</small>
|
|
<a ng-switch-when="true" ng-click="jumpToLine($index)">
|
|
<small>{{ m | number:displayHex }}</small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p style="margin-top:5px;">
|
|
<small>
|
|
<span>Clock speed:</span>
|
|
<select ng-model="speed" ng-options="item.speed as item.desc for item in speeds"></select>
|
|
<span style="margin-left:5px;">Instructions:</span>
|
|
<a ng-click="displayInstr = true" ng-hide="displayInstr">Show</a>
|
|
<a ng-click="displayInstr = false" ng-show="displayInstr">Hide</a>
|
|
</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Printer</h4>
|
|
</div>
|
|
<div class="panel-body source-code">{{ printer.data }}</div>
|
|
</div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">Disk</h4>
|
|
</div>
|
|
<div style="width:29em;" class="source-code">
|
|
<div class="memory-block"
|
|
ng-repeat="m in memory.diskdata track by $index">
|
|
<div ng-switch="false">
|
|
<small ng-switch-default>{{ m | number:displayHex }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr style="margin-top:10px;margin-bottom:10px;"/>
|
|
<p><small>by Yuanchun Shi, Yu Chen, Junjie Mao, Yukang Yan (2015) | MIT License | <a href="https://www.github.com/chyyuu/v8-cpu" target="_blank">Source Code</a></small></p>
|
|
<p><small>by Marco Schweighauser (2015) | MIT License | <a href="https://www.mschweighauser.com/make-your-own-assembler-simulator-in-javascript-part1/" target="_blank">Blog</a></small></p>
|
|
</div>
|
|
<script src="node_modules/angular/angular.min.js"></script>
|
|
<script src="assets/asmsimulator.js"></script>
|
|
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
|
|
|
|
</body>
|
|
</html>
|