Show description
MicroProc | Architecture Analyst Terminal
MicroProc | Architecture Analyst Terminal
MicroProcExchange
MARKET OPEN
Market Overview
📊
Asset Classes (Parts)
🏛
Order Book (ISA)
📑
Signal Ticker
📈
Signal Glossary
📖
Performance Summary
ID: LAB-04
Architecture Width
4-Bit
Standard
Instruction Capacity
7 Ops
New High
Clock Efficiency
Variable
1-2 Steps
Memory Type
Harvard
Hybrid
System Logic Flow
PCCounter
ROMController
ALUBrainless
RAMMemory
Data flows from the Counter to the RAM to fetch instructions. These go to the Controller, which sends signals to the ALU to manipulate data.
Core Components
The physical assets required to run the trading engine.
The Controller (The Broker)
A ROM-based Finite State Machine. It holds the "Microcode." It decides, based on the Opcode, which wires to turn on/off. It breaks macro-instructions (like STORE) into micro-steps.
Address Generator (The Navigator)
Composed of the Program Counter (PC) and Memory Address Register (MAR). It determines where in the memory vault we are looking. Usually acts sequentially, but can jump randomly for data storage.
Brainless CPU (The Quant)
Pure muscle. Contains the ALU (Math) and Accumulator (Short-term storage). It has no free will; it only does exactly what the Controller's wires tell it to do.
Instruction Set Architecture (ISA)
Opcode
Mnemonic
Type
Analyst Note (Function)
0 (0000)
LOAD
DATA IN
Writes RAM data into Accumulator.
1 (0001)
ADD
MATH
Accumulator + RAM Data.
2 (0010)
STOP
HALT
Freezes the PC. End of simulation.
3 (0011)
AND
LOGIC
Bitwise AND. Filters bits. (5 & 3 = 1).
4 (0100)
ZERO
RESET
Subtracts Accumulator from itself (A - A = 0).
5 (0101)
SUB
MATH
2's Complement Subtraction (A - B).
6 (0110)
STORE
DATA OUT
The only op that writes TO memory. 2 Steps.
Signal Logic & Debugging
Wait State
1 NS
Crash Point
Where the testbench killed the sim because output didn't match Lab 3.…
MicroProc | Architecture Analyst Terminal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MicroProc | Architecture Analyst Terminal</title>
<style>
:root {
--bg-main: #f8fafc;
--bg-card: #ffffff;
--text-primary: #0f172a;
--text-secondary: #64748b;
--accent-blue: #3b82f6; /* Corporate Blue */
--accent-green: #10b981; /* Trading Green */
--accent-red: #ef4444; /* Stop Loss Red */
--accent-purple: #8b5cf6; /* Derivatives Purple */
--border: #e2e8f0;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}
body {
background-color: var(--bg-main);
color: var(--text-primary);
font-family: var(--font-main);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Top Navigation Bar */
.navbar {
background-color: var(--bg-card);
border-bottom: 1px solid var(--border);
padding: 0.75rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
}
.brand {
font-weight: 800;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
color: var(--text-primary);
}
.brand span { color: var(--accent-blue); }
.status-pill {
background-color: rgba(16, 185, 129, 0.1);
color: var(--accent-green);
padding: 6px 12px;
border-radius: 99px;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.status-pill::before {
content: '';
width: 8px;
height: 8px;
background-color: var(--accent-green);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
70% { opacity: 1; box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
100% { opacity: 0; }
}
/* Main Layout */
.dashboard {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
padding: 2rem;
max-width: 1600px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
}
/* Sidebar Navigation */
.sidebar {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.nav-item {
padding: 1rem;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
color: var(--text-secondary);
transition: all 0.2s;
border: 1px solid transparent;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-item:hover {
background-color: #f1f5f9;
color: var(--accent-blue);
}
.nav-item.active {
background-color: var(--bg-card);
color: var(--accent-blue);
border-color: var(--border);
box-shadow: var(--shadow);
}
/* Main Content Area */
.content-area {
display: flex;
flex-direction: column;
gap: 2rem;
}
.section {
display: none;
animation: slideUp 0.4s ease-out;
}
.section.active {
display: block;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
box-shadow: var(--shadow);
margin-bottom: 1.5rem;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
padding-bottom: 1rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
}
/* Metric Grid */
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.metric {
background: #f8fafc;
padding: 1rem;
border-radius: 8px;
border-left: 4px solid var(--accent-blue);
}
.metric-label {
font-size: 0.85rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.metric-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-top: 0.5rem;
font-family: var(--font-mono);
}
.trend-up { color: var(--accent-green); font-size: 0.9rem; display: flex; align-items: center; gap: 4px; margin-top: 5px;}
/* Order Book (Instruction Table) */
.order-book {
width: 100%;
border-collapse: collapse;
font-family: var(--font-mono);
font-size: 0.9rem;
}
.order-book th {
text-align: left;
padding: 1rem;
color: var(--text-secondary);
border-bottom: 2px solid var(--border);
}
.order-book td {
padding: 1rem;
border-bottom: 1px solid var(--border);
color: var(--text-primary);
}
.order-book tr:hover {
background-color: #f8fafc;
}
.badge {
padding: 4px 8px;
border-radius: 4px;
font-weight: 600;
font-size: 0.75rem;
}
.badge-buy { background: rgba(16, 185, 129, 0.15); color: var(--accent-green); } /* LOAD/ADD */
.badge-sell { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); } /* STORE */
.badge-hold { background: rgba(241, 245, 249, 1); color: var(--text-secondary); border: 1px solid var(--border); } /* STOP */
.badge-calc { background: rgba(245, 158, 11, 0.15); color: #d97706; } /* MATH */
/* Diagram Visuals */
.flow-diagram {
display: flex;
gap: 1rem;
align-items: center;
justify-content: space-between;
padding: 2rem 0;
}
.block {
background: white;
border: 2px solid var(--text-primary);
padding: 1.5rem;
border-radius: 8px;
text-align: center;
position: relative;
width: 120px;
font-weight: bold;
transition: all 0.3s;
}
.block:hover {
background: var(--accent-blue);
color: white;
border-color: var(--accent-blue);
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2);
}
.arrow {
flex-grow: 1;
height: 2px;
background: var(--border);
position: relative;
}
.arrow::after {
content: '►';
position: absolute;
right: -5px;
top: -6px;
color: var(--border);
font-size: 10px;
}
/* Glossary Styling */
.glossary-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
}
.term-card {
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.term-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.term-name {
font-family: var(--font-mono);
font-weight: 700;
color: var(--accent-blue);
font-size: 1.1rem;
}
.term-bit {
font-size: 0.7rem;
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
color: var(--text-secondary);
font-weight: 600;
border: 1px solid var(--border);
}
.term-desc {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
}
.term-group {
font-size: 0.8rem;
font-weight: 700;
color: var(--text-primary);
text-transform: uppercase;
margin-top: 2rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--accent-purple);
display: inline-block;
}
/* Footer */
.footer {
margin-top: auto;
padding: 2rem;
text-align: center;
color: var(--text-secondary);
font-size: 0.9rem;
border-top: 1px solid var(--border);
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="brand">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="14" x2="23" y2="14"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="14" x2="4" y2="14"></line></svg>
MicroProc<span>Exchange</span>
</div>
<div class="status-pill">MARKET OPEN</div>
</nav>
<!-- Dashboard Layout -->
<div class="dashboard">
<!-- Sidebar -->
<div class="sidebar">
<div class="nav-item active" onclick="showSection('overview', this)">
Market Overview
<span>📊</span>
</div>
<div class="nav-item" onclick="showSection('assets', this)">
Asset Classes (Parts)
<span>🏛</span>
</div>
<div class="nav-item" onclick="showSection('orders', this)">
Order Book (ISA)
<span>📑</span>
</div>
<div class="nav-item" onclick="showSection('ticker', this)">
Signal Ticker
<span>📈</span>
</div>
<div class="nav-item" onclick="showSection('glossary', this)">
Signal Glossary
<span>📖</span>
</div>
</div>
<!-- Content -->
<div class="content-area">
<!-- SECTION 1: MARKET OVERVIEW -->
<div id="overview" class="section active">
<div class="card">
<div class="card-header">
<div class="card-title">Performance Summary</div>
<div style="font-family: var(--font-mono); color: var(--text-secondary);">ID: LAB-04</div>
</div>
<div class="metrics-grid">
<div class="metric">
<div class="metric-label">Architecture Width</div>
<div class="metric-value">4-Bit</div>
<div class="trend-up">Standard</div>
</div>
<div class="metric">
<div class="metric-label">Instruction Capacity</div>
<div class="metric-value">7 Ops</div>
<div class="trend-up">New High</div>
</div>
<div class="metric">
<div class="metric-label">Clock Efficiency</div>
<div class="metric-value">Variable</div>
<div class="trend-up">1-2 Steps</div>
</div>
<div class="metric">
<div class="metric-label">Memory Type</div>
<div class="metric-value">Harvard</div>
<div class="trend-up">Hybrid</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-title">System Logic Flow</div>
</div>
<div class="flow-diagram">
<div class="block">PC<br><small>Counter</small></div>
<div class="arrow"></div>
<div class="block">ROM<br><small>Controller</small></div>
<div class="arrow"></div>
<div class="block">ALU<br><small>Brainless</small></div>
<div class="arrow"></div>
<div class="block">RAM<br><small>Memory</small></div>
</div>
<p style="color: var(--text-secondary); padding-top: 1rem; text-align: center;">
Data flows from the <strong>Counter</strong> to the <strong>RAM</strong> to fetch instructions. These go to the <strong>Controller</strong>, which sends signals to the <strong>ALU</strong> to manipulate data.
</p>
</div>
</div>
<!-- SECTION 2: ASSETS -->
<div id="assets" class="section">
<div class="card">
<div class="card-header">
<div class="card-title">Core Components</div>
</div>
<p style="color: var(--text-secondary);">The physical assets required to run the trading engine.</p>
<div style="display: grid; gap: 1rem; margin-top: 1rem;">
<div style="padding: 1rem; border: 1px solid var(--border); border-radius: 8px;">
<strong style="color: var(--accent-blue);">The Controller (The Broker)</strong>
<p>A ROM-based Finite State Machine. It holds the "Microcode." It decides, based on the Opcode, which wires to turn on/off. It breaks macro-instructions (like STORE) into micro-steps.</p>
</div>
<div style="padding: 1rem; border: 1px solid var(--border); border-radius: 8px;">
<strong style="color: var(--accent-blue);">Address Generator (The Navigator)</strong>
<p>Composed of the Program Counter (PC) and Memory Address Register (MAR). It determines <em>where</em> in the memory vault we are looking. Usually acts sequentially, but can jump randomly for data storage.</p>
</div>
<div style="padding: 1rem; border: 1px solid var(--border); border-radius: 8px;">
<strong style="color: var(--accent-blue);">Brainless CPU (The Quant)</strong>
<p>Pure muscle. Contains the ALU (Math) and Accumulator (Short-term storage). It has no free will; it only does exactly what the Controller's wires tell it to do.</p>
</div>
</div>
</div>
</div>
<!-- SECTION 3: ORDER BOOK -->
<div id="orders" class="section">
<div class="card">
<div class="card-header">
<div class="card-title">Instruction Set Architecture (ISA)</div>
</div>
<table class="order-book">
<thead>
<tr>
<th>Opcode</th>
<th>Mnemonic</th>
<th>Type</th>
<th>Analyst Note (Function)</th>
</tr>
</thead>
<tbody>
<tr>
<td>0 (0000)</td>
<td>LOAD</td>
<td><span class="badge badge-buy">DATA IN</span></td>
<td>Writes RAM data into Accumulator.</td>
</tr>
<tr>
<td>1 (0001)</td>
<td>ADD</td>
<td><span class="badge badge-buy">MATH</span></td>
<td>Accumulator + RAM Data.</td>
</tr>
<tr>
<td>2 (0010)</td>
<td>STOP</td>
<td><span class="badge badge-hold">HALT</span></td>
<td>Freezes the PC. End of simulation.</td>
</tr>
<tr>
<td>3 (0011)</td>
<td>AND</td>
<td><span class="badge badge-calc">LOGIC</span></td>
<td>Bitwise AND. Filters bits. (5 & 3 = 1).</td>
</tr>
<tr>
<td>4 (0100)</td>
<td>ZERO</td>
<td><span class="badge badge-calc">RESET</span></td>
<td>Subtracts Accumulator from itself (A - A = 0).</td>
</tr>
<tr>
<td>5 (0101)</td>
<td>SUB</td>
<td><span class="badge badge-calc">MATH</span></td>
<td>2's Complement Subtraction (A - B).</td>
</tr>
<tr>
<td>6 (0110)</td>
<td>STORE</td>
<td><span class="badge badge-sell">DATA OUT</span></td>
<td>The only op that writes <strong>TO</strong> memory. 2 Steps.</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- SECTION 4: TICKER -->
<div id="ticker" class="section">
<div class="card">
<div class="card-header">
<div class="card-title">Signal Logic & Debugging</div>
</div>
<div class="metrics-grid">
<div class="metric" style="border-color: var(--accent-red);">
<div class="metric-label">Wait State</div>
<div class="metric-value">1 NS</div>
<div style="color: var(--accent-red); font-size: 0.8rem;">Crash Point</div>
<p style="color: var(--text-secondary); font-size: 0.8rem; margin-top: 5px;">
Where the testbench killed the sim because output didn't match Lab 3. Fixed by disabling <code>$finish</code>.
</p>
</div>
<div class="metric" style="border-color: var(--accent-green);">
<div class="metric-label">Cycle Time</div>
<div class="metric-value">320 NS</div>
<div style="color: var(--accent-green); font-size: 0.8rem;">Target Reached</div>
<p style="color: var(--text-secondary); font-size: 0.8rem; margin-top: 5px;">
The full duration of the program execution after fixing <code>micro_stim.v</code>.
</p>
</div>
</div>
<br>
<h3>The "Ghost Code" Phenomenon</h3>
<p style="color: var(--text-secondary);">
A critical lesson from this course: <strong>Digital (GUI) and Verilog (Code) represent two parallel realities.</strong>
</p>
<ul style="color: var(--text-secondary); line-height: 1.8;">
<li><strong>ROM Hazard:</strong> Changing <code>rom_vals.hex</code> doesn't automatically update the simulator. You must "Reload" in Digital and "Export" to push changes to Verilog.</li>
<li><strong>RAM Hazard:</strong> Digital uses <code>.hex</code>. Verilog uses <code>.txt</code>. You must maintain both, or the simulation reads empty memory (Red 'X' Waves).</li>
</ul>
</div>
</div>
<!-- SECTION 5: GLOSSARY -->
<div id="glossary" class="section">
<div class="card">
<div class="card-header">
<div class="card-title">Signal Dictionary</div>
</div>
<p style="color: var(--text-secondary); margin-bottom: 2rem;">
A comprehensive guide to every wire, register, and control signal in your architecture.
</p>
<div class="term-group">System & Global</div>
<div class="glossary-grid">
<div class="term-card">
<div class="term-header">
<span class="term-name">clk</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">The Clock. The heartbeat of the system. Triggers all register updates on its rising edge.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">reset</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">System Reset. Forces all registers (PC, Accumulator, Steps) back to 0.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">data_bus</span>
<span class="term-bit">4-bit</span>
</div>
<div class="term-desc">The main highway for data. Transfers numbers between RAM, CPU, and Registers.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">addr_bus</span>
<span class="term-bit">4-bit</span>
</div>
<div class="term-desc">The pointer. Tells the RAM which memory cell address (0-15) to look at.</div>
</div>
</div>
<div class="term-group">Controller (The Brains)</div>
<div class="glossary-grid">
<div class="term-card">
<div class="term-header">
<span class="term-name">load_ir</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">Fetch command. Tells the Instruction Register to grab the current value from the Data Bus.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">instr_reg</span>
<span class="term-bit">4-bit</span>
</div>
<div class="term-desc">Instruction Register. Holds the current "Opcode" (e.g., 3 for AND) being executed.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">step_reg</span>
<span class="term-bit">2-bit</span>
</div>
<div class="term-desc">The Micro-step counter. Tracks progress (0, 1, 2, 3) within a single instruction.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">rom_out</span>
<span class="term-bit">14-bit</span>
</div>
<div class="term-desc">The raw Microcode. The 14 control wires coming out of the ROM that drive the whole CPU.</div>
</div>
</div>
<div class="term-group">Address Generator (Navigation)</div>
<div class="glossary-grid">
<div class="term-card">
<div class="term-header">
<span class="term-name">pc</span>
<span class="term-bit">4-bit</span>
</div>
<div class="term-desc">Program Counter. Points to the <em>next</em> instruction address in memory. Increments automatically.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">mar</span>
<span class="term-bit">4-bit</span>
</div>
<div class="term-desc">Memory Address Register. Temporarily holds a target address (used in STORE/JUMP instructions).</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">load_mar</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">Command to capture the Data Bus value into the MAR.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">use_pc</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">Selector. <strong>1</strong> = Use PC address (Normal). <strong>0</strong> = Use MAR address (Special ops).</div>
</div>
</div>
<div class="term-group">Brainless CPU (Muscle)</div>
<div class="glossary-grid">
<div class="term-card">
<div class="term-header">
<span class="term-name">accum</span>
<span class="term-bit">4-bit</span>
</div>
<div class="term-desc">Accumulator. The primary working register. Holds the result of all math/logic operations.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">alu_out</span>
<span class="term-bit">4-bit</span>
</div>
<div class="term-desc">The instant result from the ALU logic gates, waiting to be saved to the Accumulator.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">arith</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">ALU Mode. <strong>1</strong> = Math (Add/Sub). <strong>0</strong> = Logic (AND/OR).</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">invert</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">ALU Flag. Inverts the input B. Essential for Subtraction (2's Complement).</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">load_acc</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">Command to save the current ALU result into the Accumulator.</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">acc_to_db</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">Gatekeeper. If <strong>1</strong>, puts Accumulator value onto the Data Bus (for writing to RAM).</div>
</div>
<div class="term-card">
<div class="term-header">
<span class="term-name">read / write</span>
<span class="term-bit">1-bit</span>
</div>
<div class="term-desc">RAM Controls. <strong>Read:</strong> Fetch data from address. <strong>Write:</strong> Save data to address.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
MicroProc Exchange • Generated for Lalo Morales • Fall 2025
</div>
<script>
function showSection(sectionId, btn) {
// Hide all sections
document.querySelectorAll('.section').forEach(el => el.classList.remove('active'));
// Remove active class from buttons
document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
// Show selected
document.getElementById(sectionId).classList.add('active');
btn.classList.add('active');
}
</script>
</body>
</html>