alexander.lyall/computing-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 30 Wiki Activity

Fixed binary user interface

Browse Source 
Signed-off-by: Alexander Lyall <alex@adcm.uk>
This commit is contained in:
Alexander Lyall
2026-02-28 23:35:14 +00:00
parent aa9e071d40
commit af131fc58a
1 changed files with 22 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/pages/binary.astro
View File

@@ -5,8 +5,8 @@
* Bit width: 4..64 * Bit width: 4..64
* *
* Requires: * Requires:
* public/fonts/DSEG7Classic-Regular.woff * public/fonts/DSEG7Classic-Regular.woff
* public/fonts/DSEG7Classic-Regular.ttf * public/fonts/DSEG7Classic-Regular.ttf
*/ */
--- ---
@@ -16,7 +16,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Binary | Computing:Box</title> <title>Binary | Computing:Box</title>
<style> <style is:global>
:root{ :root{
--bg: #1f2027; --bg: #1f2027;
--panel: #22242d; --panel: #22242d;
@@ -51,7 +51,7 @@
padding: 32px 20px 60px; padding: 32px 20px 60px;
} }
/* Layout: readout left, settings panel right (like your screenshot) */ /* Layout: readout/bits on left, settings panel on right */
.layout{ .layout{
display:grid; display:grid;
grid-template-columns: 1fr 360px; grid-template-columns: 1fr 360px;
@@ -92,7 +92,6 @@
word-break: break-all; word-break: break-all;
} }
/* Buttons under readout (as requested) */
.controls{ .controls{
margin-top: 16px; margin-top: 16px;
display:flex; display:flex;
@@ -142,7 +141,7 @@
line-height: 1.35; line-height: 1.35;
} }
/* Reusable toggle switch (for MODE and for each BIT) */ /* Reusable toggle switch */
.switch{ .switch{
position: relative; position: relative;
width: 56px; width: 56px;
@@ -260,7 +259,7 @@
opacity: .95; opacity: .95;
} }
/* Bulb (must come back!) */ /* Bulb */
.bulb{ .bulb{
width: 22px; width: 22px;
height: 22px; height: 22px;
@@ -293,7 +292,7 @@
<body> <body>
<main class="wrap"> <main class="wrap">
<section class="layout"> <section class="layout">
<!-- LEFT: readout + buttons -->
<div> <div>
<div class="readout"> <div class="readout">
<div class="label">Denary</div> <div class="label">Denary</div>
@@ -310,80 +309,56 @@
</div> </div>
</div> </div>
<!-- Bits grid (built by JS so bit-width 4..64 works) -->
<section id="bitsGrid" class="bits" aria-label="Bit switches"></section> <section id="bitsGrid" class="bits" aria-label="Bit switches"></section>
</div> </div>
<!-- RIGHT: settings panel -->
<aside> <aside>
<div class="panel"> <div class="panel">
<div class="panelTitle">Mode</div> <div class="panelTitle">Mode</div>
<div class="panelRow"> <div class="panelRow">
<span style="font-weight:800;">Unsigned</span> <span style="font-weight:800;">Unsigned</span>
<!-- MODE TOGGLE uses SAME switch style -->
<label class="switch" aria-label="Toggle Two's complement mode"> <label class="switch" aria-label="Toggle Two's complement mode">
<input id="modeToggle" type="checkbox" /> <input id="modeToggle" type="checkbox" />
<span class="slider"></span> <span class="slider"></span>
</label> </label>
<span style="font-weight:800;">Two's complement</span>
<span style="font-weight:800;">Two’s complement</span>
</div> </div>
<div class="hint"> <div class="hint">
Tip: In two’s complement, the left-most bit (MSB) represents a negative value. Tip: In two's complement, the left-most bit (MSB) represents a negative value.
</div> </div>
</div> </div>
<div class="panel"> <div class="panel">
<div class="panelTitle">Bit width</div> <div class="panelTitle">Bit width</div>
<div class="bwControls"> <div class="bwControls">
<button class="bwBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button> <button class="bwBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button>
<div class="bwInput"> <div class="bwInput">
<div class="bwLabel">Bits</div> <div class="bwLabel">Bits</div>
<input <input id="bitsField" class="bwField" type="number" min="4" max="64" step="1" value="8" inputmode="numeric" />
id="bitsField"
class="bwField"
type="number"
min="4"
max="64"
step="1"
value="8"
inputmode="numeric"
/>
</div> </div>
<button class="bwBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button> <button class="bwBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button>
</div> </div>
<div class="hint"> <div class="hint">
Minimum 4 bits, maximum 64 bits. Minimum 4 bits, maximum 64 bits.
</div> </div>
</div> </div>
</aside> </aside>
</section> </section>
</main> </main>
<script type="module"> <script type="module">
// ---------- State ---------- // ---------- State ----------
let bitsCount = 8; // 4..64 let bitsCount = 8;
let isTwos = false; // false = unsigned let isTwos = false;
let bitStates = []; // MSB -> LSB booleans let bitStates = [];
// ---------- Helpers ---------- // ---------- Helpers ----------
function clamp(n, min, max){ return Math.min(max, Math.max(min, n)); } function clamp(n, min, max){ return Math.min(max, Math.max(min, n)); }
function pow2(n){ function pow2(n){ return 2 ** n; }
// for up to 64 bits, Number is still OK for *visual simulator*.
// if you later want exact 64-bit maths, swap to BigInt end-to-end.
return 2 ** n;
}
function getPlaceValues(){ function getPlaceValues(){
// MSB -> LSB
// Unsigned: [2^(n-1), ..., 1]
// Two's: [-2^(n-1), 2^(n-2), ..., 1]
const vals = []; const vals = [];
for (let i = 0; i < bitsCount; i++){ for (let i = 0; i < bitsCount; i++){
const power = bitsCount - 1 - i; const power = bitsCount - 1 - i;
@@ -420,7 +395,6 @@
document.getElementById("binaryNumber").innerText = binaryString(); document.getElementById("binaryNumber").innerText = binaryString();
document.getElementById("denaryNumber").innerText = String(denaryValue()); document.getElementById("denaryNumber").innerText = String(denaryValue());
// bulb on/off updates:
for (let i = 0; i < bitsCount; i++){ for (let i = 0; i < bitsCount; i++){
const bulb = document.getElementById(`bulb-${i}`); const bulb = document.getElementById(`bulb-${i}`);
if (bulb) bulb.classList.toggle("on", !!bitStates[i]); if (bulb) bulb.classList.toggle("on", !!bitStates[i]);
@@ -430,7 +404,6 @@
// ---------- DOM build for bits grid ---------- // ---------- DOM build for bits grid ----------
function setBitsGridColumns(){ function setBitsGridColumns(){
const grid = document.getElementById("bitsGrid"); const grid = document.getElementById("bitsGrid");
// make it adapt (up to 16 per row max, then wraps)
const cols = clamp(bitsCount, 4, 16); const cols = clamp(bitsCount, 4, 16);
grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`; grid.style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
} }
@@ -445,7 +418,7 @@
for (let i = 0; i < bitsCount; i++){ for (let i = 0; i < bitsCount; i++){
const v = values[i]; const v = values[i];
const bit = document.createElement("div"); const bit = document.createElement("div");
bit.className = "bit"; bit.className = "bit";
@@ -456,10 +429,8 @@
const val = document.createElement("div"); const val = document.createElement("div");
val.className = "bitVal num"; val.className = "bitVal num";
// show absolute label for MSB in twos? No — show the actual negative value (clear to students).
val.textContent = String(v); val.textContent = String(v);
// IMPORTANT: bit switch must be the SAME style as MODE switch
const label = document.createElement("label"); const label = document.createElement("label");
label.className = "switch"; label.className = "switch";
label.setAttribute("aria-label", `Toggle bit ${v}`); label.setAttribute("aria-label", `Toggle bit ${v}`);
@@ -483,6 +454,7 @@
bit.appendChild(bulb); bit.appendChild(bulb);
bit.appendChild(val); bit.appendChild(val);
bit.appendChild(label); bit.appendChild(label);
grid.appendChild(bit); grid.appendChild(bit);
} }
@@ -496,8 +468,7 @@
const padded = clean.slice(-bitsCount).padStart(bitsCount, "0"); const padded = clean.slice(-bitsCount).padStart(bitsCount, "0");
bitStates = [...padded].map(ch => ch === "1"); bitStates = [...padded].map(ch => ch === "1");
// update toggles without rebuilding
for (let i = 0; i < bitsCount; i++){ for (let i = 0; i < bitsCount; i++){
const toggle = document.querySelector(`input[type="checkbox"][data-index="${i}"]`); const toggle = document.querySelector(`input[type="checkbox"][data-index="${i}"]`);
if (toggle) toggle.checked = bitStates[i]; if (toggle) toggle.checked = bitStates[i];
@@ -513,16 +484,13 @@
const { min, max } = rangeForMode(); const { min, max } = rangeForMode();
if (num < min || num > max) return false; if (num < min || num > max) return false;
// convert to bit pattern
let unsignedVal; let unsignedVal;
if (!isTwos){ if (!isTwos){
unsignedVal = num; unsignedVal = num;
} else { } else {
// two's complement representation
unsignedVal = num < 0 ? (pow2(bitsCount) + num) : num; unsignedVal = num < 0 ? (pow2(bitsCount) + num) : num;
} }
// build MSB->LSB bits from unsignedVal
const newBits = []; const newBits = [];
for (let i = 0; i < bitsCount; i++){ for (let i = 0; i < bitsCount; i++){
const power = bitsCount - 1 - i; const power = bitsCount - 1 - i;
@@ -541,17 +509,14 @@
// ---------- Shifts ---------- // ---------- Shifts ----------
function shiftLeft(){ function shiftLeft(){
// logical left shift: drop MSB, add 0 at LSB
bitStates = bitStates.slice(1).concat(false); bitStates = bitStates.slice(1).concat(false);
buildBitsGrid(); // rebuild keeps labels correct if mode changed (also updates bulbs) buildBitsGrid();
} }
function shiftRight(){ function shiftRight(){
if (!isTwos){ if (!isTwos){
// logical right shift
bitStates = [false].concat(bitStates.slice(0, -1)); bitStates = [false].concat(bitStates.slice(0, -1));
} else { } else {
// arithmetic right shift (preserve MSB)
const msb = bitStates[0]; const msb = bitStates[0];
bitStates = [msb].concat(bitStates.slice(0, -1)); bitStates = [msb].concat(bitStates.slice(0, -1));
} }
@@ -563,11 +528,9 @@
const wanted = clamp(Number(next) || 8, 4, 64); const wanted = clamp(Number(next) || 8, 4, 64);
if (wanted === bitsCount) return; if (wanted === bitsCount) return;
// keep the right-most (LSB) bits when resizing (feels natural)
const old = binaryString(); const old = binaryString();
bitsCount = wanted; bitsCount = wanted;
// rebuild state from old binary, keeping LSBs
const padded = old.slice(-bitsCount).padStart(bitsCount, "0"); const padded = old.slice(-bitsCount).padStart(bitsCount, "0");
bitStates = [...padded].map(ch => ch === "1"); bitStates = [...padded].map(ch => ch === "1");
@@ -577,10 +540,9 @@
// ---------- Mode toggle ---------- // ---------- Mode toggle ----------
function applyMode(nextIsTwos){ function applyMode(nextIsTwos){
const prevDenary = denaryValue(); // keep the *value* if possible const prevDenary = denaryValue();
isTwos = !!nextIsTwos; isTwos = !!nextIsTwos;
// Try to keep the denary value, but clamp if it becomes invalid in the new mode
const { min, max } = rangeForMode(); const { min, max } = rangeForMode();
const kept = clamp(prevDenary, min, max); const kept = clamp(prevDenary, min, max);
setFromDenary(kept); setFromDenary(kept);
@@ -606,11 +568,9 @@
if (!setFromDenary(val)) alert(`Invalid input. Enter an integer from ${min} to ${max}.`); if (!setFromDenary(val)) alert(`Invalid input. Enter an integer from ${min} to ${max}.`);
}); });
// Mode toggle
const modeToggle = document.getElementById("modeToggle"); const modeToggle = document.getElementById("modeToggle");
modeToggle.addEventListener("change", () => applyMode(modeToggle.checked)); modeToggle.addEventListener("change", () => applyMode(modeToggle.checked));
// Bit width +/- and manual entry
document.getElementById("btnBitsDown").addEventListener("click", () => applyBitsCount(bitsCount - 1)); document.getElementById("btnBitsDown").addEventListener("click", () => applyBitsCount(bitsCount - 1));
document.getElementById("btnBitsUp").addEventListener("click", () => applyBitsCount(bitsCount + 1)); document.getElementById("btnBitsUp").addEventListener("click", () => applyBitsCount(bitsCount + 1));
@@ -624,7 +584,6 @@
// ---------- Init ---------- // ---------- Init ----------
function init(){ function init(){
// default: 8-bit unsigned
bitsCount = 8; bitsCount = 8;
isTwos = false; isTwos = false;
bitStates = Array(bitsCount).fill(false); bitStates = Array(bitsCount).fill(false);
@@ -639,4 +598,4 @@
init(); init();
</script> </script>
</body> </body>
</html> </html>