Skip to content

Commit

Permalink
Use modern CSS rather than nested tables
Browse files Browse the repository at this point in the history 
This raises the browser requirement to:
- Firefox 52 (March 2017)
- Chrome 57 (March 2017)
- Edge 16 (October 2017)
- Safari 10.1 (March 2017)
  • Loading branch information
@winstliu
winstliu committed Mar 14, 2020
1 parent b420a18 commit 48d6111
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 122 deletions.
55 changes: 54 additions & 1 deletion ibcm/ibcm.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,65 @@
/* Created Day 01.12.2006 */
/* ======================================================== */

* {
box-sizing: border-box;
}

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 1rem;
}

.grid .settings {
grid-column: 1 / 3;
}

.controls .internal {
position: sticky;
top: 1rem;
}

.divider {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}

.input-group {
display: grid;
margin-bottom: 1.5rem;
grid-template-columns: 1fr 1fr;
}

.input-group label {
text-align: right;
margin-right: 0.5rem;
}

.control-grid {
display: flex;
flex-direction: row;
justify-content: center;
}

.control-grid button {
margin: 0 0.25rem;
}

.output-group {
text-align: center;
}

.output-group label {
display: inline-block;
margin-bottom: 0.5rem;
}

body {
margin: 0px;
background: url(img/top_bg.gif);
background-repeat: repeat-x;
font-family: Verdana, Arial, sans-serif;
font-size: .6em;
}

p {
Expand Down
184 changes: 68 additions & 116 deletions ibcm/simulator.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,128 +29,80 @@ <h2><a href="./index.html" title="Back to main page">IBCM Interface</a></h2>
</div> <!-- id="top" -->

<!-- Main Content Container -->
<div id="content2">
<div>
<p class="center"><a href="directions.html">Directions for how to use this simulator</a> are available.</p>
<table border="7" cellpadding="10">
<!-- Browse section -->
<tr>
<td colspan="2" align="center">
<p class="center">
Load IBCM file:
<input type="file" name="userfile" id="userfile" />
</p>
<p class="center danger" id="error">
</p>
<p class="center">
Load all of memory:
<input type="checkbox" id="loadmem" name="loadmem">
(leave unchecked if unsure)
</p>
<p class="center">
Enable watchdog timer:
<input type="checkbox" id="watchtimer" name="watchtimer">
(check to guard against infinite loops)
</p>
<p id="watchwarning" class="center danger"></p>
</td>
</tr>

<!-- Mem Table -->
<tr>
<td>
<div id="tabletitle">
<table border="7" width="300">
<tr>
<th>Mem</th>
<th>Value</th>
<th>PC</th>
</tr>
</table>
</div>
<div id="tbl-container">
<div id="memtable"></div>
</div> <!-- id="tbl-container" -->
</td>

<!-- Accum and Input Section -->
<td valign="top">

<table border=0>
<tr>
<td>
<p class="righttitle">Accumulator (hex): </p>
</td>
<td>&nbsp;<input name="accum" id="accum" type="text" value="0000" readonly="readonly"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<p class="righttitle">PC (hex): </p>
</td>
<td>&nbsp;<input name="pc" id="pc" type="text" value="0000" readonly="readonly"/></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>
<p class="righttitle">
<div id="bptitle">Breakpoint (4 digits): </div>
</p>
</td>
<td>&nbsp;<input name="breakpoint" id="breakpoint" type="text" value="" /></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<div class="grid">
<div class="settings">
<p class="center">
Load IBCM file:
<input type="file" id="userfile" />
</p>
<p class="center danger" id="error">
</p>
<p class="center">
Load all of memory:
<input type="checkbox" id="loadmem">
(leave unchecked if unsure)
</p>
<p class="center">
Enable watchdog timer:
<input type="checkbox" id="watchtimer">
(check to guard against infinite loops)
</p>
<p id="watchwarning" class="center danger"></p>
</div>
<div class="table">
<table border="7" width="300" id="instructionsTable">
<thead>
<tr>
<td>
<p class="righttitle">
<div id="inputtitle">Input: </div>
</p>
</td>
<td>&nbsp;<input name="input" id="input" type="text" value="0" /></td>
<th>Mem</th>
<th>Value</th>
<th>PC</th>
</tr>
</table>

<p>&nbsp;</p><hr /><p>&nbsp;</p>

<table border="5" cellpadding="25">
<tr>
<td><input name="Runner" type="button" value="Run" onclick='run_simulator()'/></td>
<td><input name="Stepper" type="button" value="Step" onclick="step_simulator()" /></td>
</tr>
<tr>
<td><input name="Resetter" type="button" value="Reset" onclick="reset()" /></td>
<td><input name="Reverter" type="button" value="Revert" onclick="revert()" /></td>
</tr>
</table>

<p>&nbsp;</p>

<hr />

<p>&nbsp;</p>

<!-- Display Section -->
<p class="center">Output</p>
<textarea name="output" id="output" cols="40" rows="15" readonly="readonly"></textarea>

<!-- Separation Divider -->
<div id="clear"></div>
</td>
</tr>
</table>
</div> <!-- id="content2" -->
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="controls">
<div class="internal">
<div>
<div class="input-group">
<label for="accum">Accumulator (hex):</label>
<input id="accum" type="text" value="0000" readonly="readonly"/>
</div>
<div class="input-group">
<label for="pc">PC (hex):</label>
<input id="pc" type="text" value="0000" readonly="readonly"/>
</div>
<div class="input-group">
<label id="bptitle" for="breakpoint">Breakpoint (4 digits):</label>
<input id="breakpoint" type="text" value="" />
</div>
<div class="input-group">
<label id="inputtitle" for="input">Input:</label>
<input id="input" type="text" value="0" />
</div>
</div>
<hr class="divider">
<div class="control-grid">
<button onclick="run_simulator()">Run</button>
<button onclick="step_simulator()">Step</button>
<button onclick="reset()">Reset</button>
<button onclick="revert()">Revert</button>
</div>
<hr class="divider">
<div class="output-group">
<label for="output">Output</label>
<textarea id="output" cols="40" rows="15" readonly="readonly"></textarea>
</div>
</div>
</div>
</div>
</div>

<!-- Footer -->
<div id="footer"></div>

</div> <!-- id="wrap" -->

<script src="simulator.js"></script>
Expand Down
10 changes: 5 additions & 5 deletions ibcm/simulator.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const INSTRUCTION_REGEX = /[a-fA-F0-9]{4}/;
const WATCHDOG_MAX_LIMIT = 10000;

const instructions = [];
let instructions = [];

let pc = "0000";
let pchexbak = "0000";
Expand Down Expand Up @@ -35,6 +35,8 @@ function readIBCMFile(event) {
}

function processIBCMFile(text) {
instructions = []; // Reset instructions array

const lines = text.split(/\r?\n/) // Split on newlines
let currentLine = 0; // Zero-indexed indicator of which line we are parsing
for (let line of lines) {
Expand Down Expand Up @@ -67,15 +69,13 @@ function processIBCMFile(text) {
}

function create_ibcm_memory_table() {
let str = "<table id=\"tbl\" BORDER=\"7\" width=\"98%\">\n";
const top = loadmemInput.checked ? 4096 : 100;

for (let i = 0; i < top; i++) {
const divname = i.toString(16).padStart(4, '0');
str += "<tr><td>" + divname + "</td><td><input type=\"text\" id=\"v" + divname + "\" class=\"address\" size=5></td><td><div id=\"pc" + divname + "\"></div></td></tr>\n";
const elem = "<tr><td>" + divname + "</td><td><input type=\"text\" id=\"v" + divname + "\" class=\"address\" size=5></td><td><div id=\"pc" + divname + "\"></div></td></tr>";
document.getElementById("instructionsTable").getElementsByTagName('tbody')[0].innerHTML += elem;
}
str += "</table>";
document.getElementById("memtable").innerHTML = str;
}

function init() {
Expand Down

0 comments on commit 48d6111

Please sign in to comment.