6ad3ab93a7
Add build_gui.html for visual command generation, flash_guide.md for flashing reference, and remove_chinese_comments.py for cleaning source files. Update extract_firmware.sh to use output directory instead of prefix, and update README with all new tools. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
547 lines
15 KiB
HTML
547 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>IonBridge Build Tool</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
:root {
|
|
--bg: #1a1b26;
|
|
--surface: #24283b;
|
|
--surface-hover: #2f3349;
|
|
--border: #3b4261;
|
|
--text: #c0caf5;
|
|
--text-dim: #565f89;
|
|
--accent: #7aa2f7;
|
|
--accent-hover: #89b4fa;
|
|
--green: #9ece6a;
|
|
--red: #f7768e;
|
|
--orange: #ff9e64;
|
|
--cyan: #7dcfff;
|
|
}
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.header {
|
|
padding: 14px 24px;
|
|
background: var(--surface);
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.header h1 { font-size: 17px; font-weight: 600; color: var(--accent); }
|
|
|
|
.main { display: flex; flex: 1; overflow: hidden; }
|
|
|
|
.sidebar {
|
|
width: 300px;
|
|
background: var(--surface);
|
|
border-right: 1px solid var(--border);
|
|
padding: 16px;
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
.section { margin-bottom: 20px; }
|
|
.section-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
color: var(--text-dim);
|
|
margin-bottom: 10px;
|
|
}
|
|
label.field-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--text-dim);
|
|
margin-bottom: 4px;
|
|
}
|
|
select, input[type="text"] {
|
|
width: 100%;
|
|
padding: 7px 10px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
color: var(--text);
|
|
font-size: 13px;
|
|
outline: none;
|
|
margin-bottom: 10px;
|
|
}
|
|
select:focus, input:focus { border-color: var(--accent); }
|
|
|
|
.checkbox-group { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 5px 9px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: all 0.15s;
|
|
user-select: none;
|
|
}
|
|
.checkbox-item:hover { border-color: var(--accent); }
|
|
.checkbox-item input[type="checkbox"] { accent-color: var(--accent); width: 14px; height: 14px; }
|
|
.checkbox-item.checked {
|
|
border-color: var(--accent);
|
|
background: rgba(122, 162, 247, 0.08);
|
|
}
|
|
.actions { display: flex; flex-direction: column; gap: 6px; }
|
|
.btn {
|
|
padding: 9px 14px;
|
|
border: none;
|
|
border-radius: 7px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
.btn-primary { background: var(--accent); color: var(--bg); }
|
|
.btn-primary:hover { background: var(--accent-hover); }
|
|
.btn-green { background: var(--green); color: var(--bg); }
|
|
.btn-green:hover { opacity: 0.9; }
|
|
.btn-orange { background: var(--orange); color: var(--bg); }
|
|
.btn-orange:hover { opacity: 0.9; }
|
|
.btn-ghost {
|
|
background: var(--surface-hover);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.btn-ghost:hover { background: var(--border); }
|
|
.btn-row { display: flex; gap: 6px; }
|
|
.btn-row .btn { flex: 1; }
|
|
|
|
.output-area {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px;
|
|
overflow-y: auto;
|
|
}
|
|
.output-title {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
color: var(--text-dim);
|
|
margin-bottom: 12px;
|
|
}
|
|
.cmd-block {
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
transition: border-color 0.3s;
|
|
}
|
|
.cmd-block.just-copied { border-color: var(--green); }
|
|
.cmd-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 8px 14px;
|
|
background: var(--surface-hover);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.cmd-label {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--text-dim);
|
|
}
|
|
.cmd-step {
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
background: var(--bg);
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
}
|
|
.copy-btn {
|
|
padding: 4px 12px;
|
|
font-size: 11px;
|
|
background: var(--accent);
|
|
color: var(--bg);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
transition: all 0.15s;
|
|
}
|
|
.copy-btn:hover { background: var(--accent-hover); }
|
|
.copy-btn.copied { background: var(--green); }
|
|
.cmd-body {
|
|
padding: 12px 14px;
|
|
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace;
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
color: var(--cyan);
|
|
user-select: all;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
.copy-all-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
}
|
|
.copy-all-btn {
|
|
padding: 8px 20px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
background: var(--accent);
|
|
color: var(--bg);
|
|
border: none;
|
|
border-radius: 7px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.copy-all-btn:hover { background: var(--accent-hover); }
|
|
.copy-all-btn.copied { background: var(--green); }
|
|
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 1;
|
|
color: var(--text-dim);
|
|
gap: 8px;
|
|
}
|
|
.empty-state .icon { font-size: 40px; opacity: 0.3; }
|
|
.empty-state .text { font-size: 14px; }
|
|
|
|
.history-item {
|
|
padding: 8px 12px;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: 6px;
|
|
margin-bottom: 6px;
|
|
font-family: 'SF Mono', monospace;
|
|
font-size: 11px;
|
|
color: var(--text-dim);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.history-item:hover {
|
|
border-color: var(--accent);
|
|
color: var(--text);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<h1>IonBridge Build Tool</h1>
|
|
</div>
|
|
|
|
<div class="main">
|
|
<div class="sidebar">
|
|
|
|
<div class="section">
|
|
<div class="section-title">Target</div>
|
|
<label class="field-label">Variant</label>
|
|
<select id="variant">
|
|
<option value="cp02" selected>CP02 (FPGA)</option>
|
|
<option value="cp02s">CP02S (GPU)</option>
|
|
<option value="3536">3536 / 68W (I2C)</option>
|
|
<option value="gpu_demo">GPU Demo</option>
|
|
<option value="bird">Bird</option>
|
|
</select>
|
|
<label class="field-label">Serial Port</label>
|
|
<input type="text" id="port" value="/dev/tty.usbmodem2101">
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">Build Options</div>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-item" onclick="toggleCb(this)">
|
|
<input type="checkbox" id="opt-production"> production
|
|
</label>
|
|
<label class="checkbox-item checked" onclick="toggleCb(this)">
|
|
<input type="checkbox" id="opt-coredump" checked> coredump
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">Flash Options</div>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-item" onclick="toggleCb(this)">
|
|
<input type="checkbox" id="opt-littlefs"> littlefs
|
|
</label>
|
|
<label class="checkbox-item" onclick="toggleCb(this)">
|
|
<input type="checkbox" id="opt-protected_data"> protected_data
|
|
</label>
|
|
<label class="checkbox-item" onclick="toggleCb(this)">
|
|
<input type="checkbox" id="opt-nvs"> nvs
|
|
</label>
|
|
<label class="checkbox-item" onclick="toggleCb(this)">
|
|
<input type="checkbox" id="opt-phy_init"> phy_init
|
|
</label>
|
|
<label class="checkbox-item" onclick="toggleCb(this)">
|
|
<input type="checkbox" id="opt-unlock"> unlock
|
|
</label>
|
|
</div>
|
|
<label class="field-label" style="margin-top:10px">PSN</label>
|
|
<input type="text" id="psn" placeholder="e.g. 1331040606001272">
|
|
<label class="field-label">Sign Key (overrides PSN)</label>
|
|
<input type="text" id="sign_key" placeholder="e.g. /Users/ching/Downloads/xxx_sign_key.pem">
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-title">Generate Command</div>
|
|
<div class="actions">
|
|
<button class="btn btn-primary" onclick="gen('build')">Build</button>
|
|
<div class="btn-row">
|
|
<button class="btn btn-green" onclick="gen('flash')">Flash</button>
|
|
<button class="btn btn-orange" onclick="gen('monitor')">Monitor</button>
|
|
</div>
|
|
<button class="btn btn-ghost" onclick="gen('build_flash')">Build + Flash</button>
|
|
<button class="btn btn-ghost" onclick="gen('update_version')">Update Version</button>
|
|
<div class="btn-row">
|
|
<button class="btn btn-ghost" onclick="gen('clean')">Clean</button>
|
|
<button class="btn btn-ghost" onclick="gen('fullclean')">Full Clean</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" id="historySection" style="display:none">
|
|
<div class="section-title">History</div>
|
|
<div id="history"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="output-area">
|
|
<div id="emptyState" class="empty-state">
|
|
<div class="icon">←</div>
|
|
<div class="text">Select an action to generate commands</div>
|
|
</div>
|
|
<div id="output" style="display:none"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const STORAGE_KEY = 'ionbridge_build_gui';
|
|
const FIELDS = ['variant', 'port', 'psn', 'sign_key'];
|
|
const CHECKBOXES = ['opt-production', 'opt-coredump', 'opt-littlefs', 'opt-protected_data', 'opt-nvs', 'opt-phy_init', 'opt-unlock'];
|
|
let historyList = [];
|
|
|
|
function val(id) { return document.getElementById(id).value.trim(); }
|
|
function checked(id) { return document.getElementById(id).checked; }
|
|
|
|
function saveState() {
|
|
const state = {};
|
|
FIELDS.forEach(id => state[id] = document.getElementById(id).value);
|
|
CHECKBOXES.forEach(id => state[id] = document.getElementById(id).checked);
|
|
state.history = historyList;
|
|
localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
|
|
}
|
|
|
|
function loadState() {
|
|
const raw = localStorage.getItem(STORAGE_KEY);
|
|
if (!raw) return;
|
|
try {
|
|
const state = JSON.parse(raw);
|
|
FIELDS.forEach(id => { if (state[id] !== undefined) document.getElementById(id).value = state[id]; });
|
|
CHECKBOXES.forEach(id => {
|
|
if (state[id] !== undefined) {
|
|
const cb = document.getElementById(id);
|
|
cb.checked = state[id];
|
|
cb.closest('.checkbox-item').classList.toggle('checked', state[id]);
|
|
}
|
|
});
|
|
if (state.history) {
|
|
historyList = state.history;
|
|
if (historyList.length > 0) renderHistory();
|
|
}
|
|
} catch(e) {}
|
|
}
|
|
|
|
function toggleCb(label) {
|
|
setTimeout(() => {
|
|
const cb = label.querySelector('input[type="checkbox"]');
|
|
label.classList.toggle('checked', cb.checked);
|
|
saveState();
|
|
}, 0);
|
|
}
|
|
|
|
// Auto-save on any input change
|
|
document.addEventListener('input', (e) => {
|
|
if (e.target.matches('select, input[type="text"]')) saveState();
|
|
});
|
|
document.addEventListener('change', (e) => {
|
|
if (e.target.matches('select')) saveState();
|
|
});
|
|
|
|
function buildCmd() {
|
|
let cmd = 'make build variant=' + val('variant');
|
|
if (checked('opt-production')) cmd += ' production=1';
|
|
if (!checked('opt-coredump')) cmd += ' coredump=0';
|
|
return cmd;
|
|
}
|
|
|
|
function flashCmd() {
|
|
let cmd = 'make flash';
|
|
if (checked('opt-littlefs')) cmd += ' littlefs=1';
|
|
if (checked('opt-protected_data')) cmd += ' protected_data=1';
|
|
if (checked('opt-nvs')) cmd += ' nvs=1';
|
|
if (checked('opt-phy_init')) cmd += ' phy_init=1';
|
|
if (checked('opt-unlock')) cmd += ' unlock=1';
|
|
const signKey = val('sign_key');
|
|
const psn = val('psn');
|
|
if (signKey) cmd += ' sign_key=' + signKey;
|
|
else if (psn) cmd += ' psn=' + psn;
|
|
const port = val('port');
|
|
if (port) cmd += ' PORT=' + port;
|
|
return cmd;
|
|
}
|
|
|
|
function monitorCmd() {
|
|
let cmd = 'make monitor';
|
|
const port = val('port');
|
|
if (port) cmd += ' PORT=' + port;
|
|
return cmd;
|
|
}
|
|
|
|
function gen(action) {
|
|
let commands = [];
|
|
|
|
switch (action) {
|
|
case 'build':
|
|
commands = [{label: 'Build', cmd: buildCmd()}];
|
|
break;
|
|
case 'flash':
|
|
commands = [{label: 'Flash', cmd: flashCmd()}];
|
|
break;
|
|
case 'monitor':
|
|
commands = [{label: 'Monitor', cmd: monitorCmd()}];
|
|
break;
|
|
case 'build_flash':
|
|
commands = [
|
|
{label: 'Build', cmd: buildCmd()},
|
|
{label: 'Flash', cmd: flashCmd()},
|
|
];
|
|
break;
|
|
case 'update_version':
|
|
commands = [{label: 'Update Version', cmd: 'make update_version variant=' + val('variant')}];
|
|
break;
|
|
case 'clean':
|
|
commands = [{label: 'Clean', cmd: 'make clean'}];
|
|
break;
|
|
case 'fullclean':
|
|
commands = [{label: 'Full Clean', cmd: 'make fullclean'}];
|
|
break;
|
|
}
|
|
|
|
renderOutput(commands);
|
|
addHistory(commands);
|
|
}
|
|
|
|
function renderOutput(commands) {
|
|
document.getElementById('emptyState').style.display = 'none';
|
|
const out = document.getElementById('output');
|
|
out.style.display = 'block';
|
|
|
|
const allCmds = commands.map(c => c.cmd).join('\n');
|
|
const multi = commands.length > 1;
|
|
|
|
let html = '<div class="copy-all-bar">';
|
|
html += '<div class="output-title">Generated Commands</div>';
|
|
html += '<button class="copy-all-btn" onclick="copyAll(this, ' + JSON.stringify(allCmds).replace(/"/g, '"') + ')">Copy All</button>';
|
|
html += '</div>';
|
|
|
|
commands.forEach((c, i) => {
|
|
html += '<div class="cmd-block">';
|
|
html += '<div class="cmd-header">';
|
|
html += '<div style="display:flex;align-items:center;gap:8px">';
|
|
if (multi) html += '<span class="cmd-step">Step ' + (i + 1) + '</span>';
|
|
html += '<span class="cmd-label">' + c.label + '</span>';
|
|
html += '</div>';
|
|
html += '<button class="copy-btn" onclick="copyOne(this, ' + JSON.stringify(c.cmd).replace(/"/g, '"') + ')">Copy</button>';
|
|
html += '</div>';
|
|
html += '<div class="cmd-body">' + escapeHtml(c.cmd) + '</div>';
|
|
html += '</div>';
|
|
});
|
|
|
|
out.innerHTML = html;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
async function copyOne(btn, text) {
|
|
await navigator.clipboard.writeText(text);
|
|
btn.textContent = 'Copied!';
|
|
btn.classList.add('copied');
|
|
btn.closest('.cmd-block').classList.add('just-copied');
|
|
setTimeout(() => {
|
|
btn.textContent = 'Copy';
|
|
btn.classList.remove('copied');
|
|
btn.closest('.cmd-block').classList.remove('just-copied');
|
|
}, 1500);
|
|
}
|
|
|
|
async function copyAll(btn, text) {
|
|
await navigator.clipboard.writeText(text);
|
|
btn.textContent = 'Copied!';
|
|
btn.classList.add('copied');
|
|
setTimeout(() => {
|
|
btn.textContent = 'Copy All';
|
|
btn.classList.remove('copied');
|
|
}, 1500);
|
|
}
|
|
|
|
function addHistory(commands) {
|
|
const text = commands.map(c => c.cmd).join(' && ');
|
|
// Avoid duplicates at top
|
|
if (historyList.length > 0 && historyList[0] === text) return;
|
|
historyList.unshift(text);
|
|
if (historyList.length > 10) historyList.pop();
|
|
renderHistory();
|
|
saveState();
|
|
}
|
|
|
|
function renderHistory() {
|
|
const section = document.getElementById('historySection');
|
|
const container = document.getElementById('history');
|
|
section.style.display = 'block';
|
|
container.innerHTML = historyList.map(cmd =>
|
|
'<div class="history-item" onclick="copyFromHistory(this, ' + JSON.stringify(cmd).replace(/"/g, '"') + ')" title="Click to copy">' + escapeHtml(cmd) + '</div>'
|
|
).join('');
|
|
}
|
|
|
|
async function copyFromHistory(el, text) {
|
|
await navigator.clipboard.writeText(text);
|
|
el.style.borderColor = 'var(--green)';
|
|
el.style.color = 'var(--green)';
|
|
setTimeout(() => {
|
|
el.style.borderColor = '';
|
|
el.style.color = '';
|
|
}, 1000);
|
|
}
|
|
|
|
loadState();
|
|
</script>
|
|
</body>
|
|
</html>
|