Add tunie map/tune viewer: self-contained HTML, no deps
A single double-click-to-open HTML viewer (no server, no external refs) with three tabs: browse/filter the 1811-map catalogue (with a "my bike" filter for mechanical-odo Keihin Bonneville maps), see TuneECU's full editable surface (tunable parameters, table axes, toggleable devices with SAI/O2/exhaust flagged as mod targets, live sensors, actuator tests) extracted from the APK resources, and a drag-drop .bin/.hex table viewer that renders bytes as a configurable heatmap grid + hex dump for when a ROM dump lands. build_viewer.py regenerates the HTML from arrays.xml + maps.json.
This commit is contained in:
98
tunie/viewer/build_viewer.py
Normal file
98
tunie/viewer/build_viewer.py
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
"""Build a self-contained HTML viewer for the Triumph tuning project.
|
||||||
|
|
||||||
|
Extracts TuneECU's editable-surface definitions (tunable parameters, table
|
||||||
|
axes, toggleable devices, live sensors, actuator tests) from the decompiled
|
||||||
|
APK resources, combines them with the already-extracted map catalogue
|
||||||
|
(maps.json), and embeds everything into a single double-click-to-open HTML file
|
||||||
|
with no server and no external dependencies.
|
||||||
|
|
||||||
|
Usage:
|
||||||
|
python3 viewer/build_viewer.py \
|
||||||
|
--arrays ../work/apktool_out/res/values/arrays.xml \
|
||||||
|
--maps maps.json \
|
||||||
|
--template viewer/template.html \
|
||||||
|
--out viewer/tunie-viewer.html
|
||||||
|
"""
|
||||||
|
|
||||||
|
from __future__ import annotations
|
||||||
|
|
||||||
|
import argparse
|
||||||
|
import json
|
||||||
|
import re
|
||||||
|
from pathlib import Path
|
||||||
|
|
||||||
|
# Resource arrays worth surfacing, with a friendly label and short note.
|
||||||
|
DEF_ARRAYS = {
|
||||||
|
"Parameters": ("Tunable parameters", "Single-value settings TuneECU can change."),
|
||||||
|
"title_axis": ("Table axes", "The axes every fuel/ignition map is built on."),
|
||||||
|
"Devices": ("Toggleable devices", "Emissions/hardware features that can be turned off."),
|
||||||
|
"eSensor": ("Live sensors", "Channels the ECU streams while running."),
|
||||||
|
"test_devices": ("Actuator tests", "Outputs TuneECU can command for bench testing."),
|
||||||
|
"reset_devices": ("Reset routines", "Adaptations/adjustments that can be reset."),
|
||||||
|
"ftrim_name": ("Fuel-trim tables", "Per-cylinder fuel trim table names."),
|
||||||
|
"ecu": ("ECU families", "Supported ECUs; the code after ':' is the type char."),
|
||||||
|
}
|
||||||
|
|
||||||
|
# Devices/parameters directly relevant to this bike's planned mods.
|
||||||
|
MOD_TARGETS = {"SAI", "O2 Sensor", "O2 Sensor (2)", "Exhaust Valve", "Air Flap"}
|
||||||
|
|
||||||
|
|
||||||
|
def _extract_arrays(arrays_xml: Path) -> dict:
|
||||||
|
s = arrays_xml.read_text(encoding="utf-8")
|
||||||
|
|
||||||
|
def arr(name: str) -> list[str] | None:
|
||||||
|
m = re.search(
|
||||||
|
rf'<string-array name="{name}"[^>]*>(.*?)</string-array>', s, re.S
|
||||||
|
)
|
||||||
|
if not m:
|
||||||
|
return None
|
||||||
|
return [
|
||||||
|
re.sub(r"\s+", " ", i.strip().strip('"'))
|
||||||
|
for i in re.findall(r"<item>(.*?)</item>", m.group(1), re.S)
|
||||||
|
]
|
||||||
|
|
||||||
|
out = {}
|
||||||
|
for name, (label, note) in DEF_ARRAYS.items():
|
||||||
|
items = arr(name) or []
|
||||||
|
out[name] = {
|
||||||
|
"label": label,
|
||||||
|
"note": note,
|
||||||
|
"items": [{"i": i, "text": t} for i, t in enumerate(items) if t],
|
||||||
|
}
|
||||||
|
return out
|
||||||
|
|
||||||
|
|
||||||
|
def main() -> int:
|
||||||
|
ap = argparse.ArgumentParser()
|
||||||
|
ap.add_argument("--arrays", required=True, type=Path)
|
||||||
|
ap.add_argument("--maps", required=True, type=Path)
|
||||||
|
ap.add_argument("--template", required=True, type=Path)
|
||||||
|
ap.add_argument("--out", required=True, type=Path)
|
||||||
|
args = ap.parse_args()
|
||||||
|
|
||||||
|
defs = _extract_arrays(args.arrays)
|
||||||
|
maps = json.loads(args.maps.read_text(encoding="utf-8"))
|
||||||
|
|
||||||
|
payload = {
|
||||||
|
"definitions": defs,
|
||||||
|
"maps": maps,
|
||||||
|
"modTargets": sorted(MOD_TARGETS),
|
||||||
|
"meta": {
|
||||||
|
"mapCount": len(maps),
|
||||||
|
"source": "TuneECU APK resources (arrays.xml) + maps.json",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
template = args.template.read_text(encoding="utf-8")
|
||||||
|
blob = json.dumps(payload, separators=(",", ":"))
|
||||||
|
html = template.replace("/*__DATA__*/", blob)
|
||||||
|
|
||||||
|
args.out.write_text(html, encoding="utf-8")
|
||||||
|
kb = len(html.encode("utf-8")) / 1024
|
||||||
|
print(f"wrote {args.out} ({kb:.0f} KB, {len(maps)} maps, "
|
||||||
|
f"{sum(len(d['items']) for d in defs.values())} definition rows)")
|
||||||
|
return 0
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
raise SystemExit(main())
|
||||||
BIN
tunie/viewer/sample_table.bin
Normal file
BIN
tunie/viewer/sample_table.bin
Normal file
Binary file not shown.
279
tunie/viewer/template.html
Normal file
279
tunie/viewer/template.html
Normal file
@@ -0,0 +1,279 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>tunie — Triumph tuning viewer</title>
|
||||||
|
<style>
|
||||||
|
:root{
|
||||||
|
--bg:#0e1116; --panel:#161b22; --panel2:#1c232d; --line:#2a323d;
|
||||||
|
--fg:#e6edf3; --dim:#8b949e; --accent:#4cc4ff; --hot:#ff5a52; --ok:#51d88a;
|
||||||
|
--target:#ffb454;
|
||||||
|
}
|
||||||
|
*{box-sizing:border-box}
|
||||||
|
body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
|
||||||
|
background:var(--bg);color:var(--fg)}
|
||||||
|
header{padding:14px 20px;border-bottom:1px solid var(--line);
|
||||||
|
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;background:var(--panel)}
|
||||||
|
header h1{margin:0;font-size:17px;letter-spacing:.3px}
|
||||||
|
header .sub{color:var(--dim);font-size:12px}
|
||||||
|
nav{display:flex;gap:4px;padding:8px 16px;border-bottom:1px solid var(--line);background:var(--panel)}
|
||||||
|
nav button{background:none;border:0;color:var(--dim);padding:8px 14px;border-radius:7px;
|
||||||
|
cursor:pointer;font-size:13px}
|
||||||
|
nav button:hover{background:var(--panel2);color:var(--fg)}
|
||||||
|
nav button.active{background:var(--accent);color:#04121c;font-weight:600}
|
||||||
|
main{padding:18px 20px;max-width:1200px}
|
||||||
|
.tab{display:none} .tab.active{display:block}
|
||||||
|
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
|
||||||
|
input,select{background:var(--panel2);border:1px solid var(--line);color:var(--fg);
|
||||||
|
padding:7px 10px;border-radius:7px;font-size:13px}
|
||||||
|
input[type=text]{min-width:220px}
|
||||||
|
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:6px 12px;
|
||||||
|
cursor:pointer;font-size:12px;color:var(--dim)}
|
||||||
|
.chip.on{background:var(--accent);color:#04121c;border-color:var(--accent);font-weight:600}
|
||||||
|
.count{color:var(--dim);font-size:12px;margin-left:auto}
|
||||||
|
table{border-collapse:collapse;width:100%;font-size:13px}
|
||||||
|
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
|
||||||
|
th{color:var(--dim);font-weight:600;position:sticky;top:0;background:var(--bg);cursor:pointer;user-select:none}
|
||||||
|
tr:hover td{background:var(--panel)}
|
||||||
|
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
|
||||||
|
.id{color:var(--accent);font-weight:600}
|
||||||
|
.mine{box-shadow:inset 3px 0 0 var(--ok)}
|
||||||
|
.desc{color:var(--dim);white-space:pre-line;font-size:12px}
|
||||||
|
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
|
||||||
|
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
|
||||||
|
.card h3{margin:0 0 4px;font-size:14px}
|
||||||
|
.card .note{color:var(--dim);font-size:12px;margin-bottom:10px}
|
||||||
|
.item{padding:4px 0;border-bottom:1px solid var(--line);display:flex;gap:8px}
|
||||||
|
.item:last-child{border:0}
|
||||||
|
.item .n{color:var(--dim);width:26px;text-align:right;flex:none}
|
||||||
|
.item.target{color:var(--target);font-weight:600}
|
||||||
|
.badge{font-size:10px;background:var(--target);color:#1a1206;border-radius:4px;padding:1px 5px;margin-left:6px}
|
||||||
|
.drop{border:2px dashed var(--line);border-radius:12px;padding:40px;text-align:center;color:var(--dim);
|
||||||
|
cursor:pointer;margin-bottom:16px}
|
||||||
|
.drop.hover{border-color:var(--accent);color:var(--fg);background:var(--panel)}
|
||||||
|
.tv-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
|
||||||
|
.tv-controls label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--dim)}
|
||||||
|
.heat{display:grid;gap:1px;margin-top:10px;overflow:auto}
|
||||||
|
.cell{padding:4px 2px;text-align:center;font-size:10px;border-radius:2px;color:#0a0a0a;font-family:ui-monospace,monospace}
|
||||||
|
.hexdump{font-family:ui-monospace,monospace;font-size:12px;color:var(--dim);white-space:pre;
|
||||||
|
background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;max-height:340px;margin-top:14px}
|
||||||
|
.hint{color:var(--dim);font-size:12px;margin-top:8px}
|
||||||
|
a{color:var(--accent)}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>tunie</h1>
|
||||||
|
<span class="sub" id="meta"></span>
|
||||||
|
</header>
|
||||||
|
<nav>
|
||||||
|
<button data-tab="maps" class="active">Map catalogue</button>
|
||||||
|
<button data-tab="caps">Tune capabilities</button>
|
||||||
|
<button data-tab="table">Table viewer</button>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<section id="tab-maps" class="tab active">
|
||||||
|
<div class="controls">
|
||||||
|
<input type="text" id="q" placeholder="search model, VIN, market…">
|
||||||
|
<select id="ecu"><option value="">All ECUs</option></select>
|
||||||
|
<select id="odo">
|
||||||
|
<option value="">Any odometer</option>
|
||||||
|
<option value="mechanical odometer">Mechanical odo</option>
|
||||||
|
<option value="lcd odometer">LCD odo</option>
|
||||||
|
</select>
|
||||||
|
<span class="chip" id="mineChip">★ My bike (Keihin · mechanical · Bonneville)</span>
|
||||||
|
<span class="count" id="mapCount"></span>
|
||||||
|
</div>
|
||||||
|
<table id="mapTable">
|
||||||
|
<thead><tr>
|
||||||
|
<th data-k="id">Map</th><th data-k="ecu">ECU</th><th data-k="model">Details</th>
|
||||||
|
</tr></thead>
|
||||||
|
<tbody></tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="tab-caps" class="tab">
|
||||||
|
<p class="hint">TuneECU's full editable surface, extracted from the APK. The
|
||||||
|
<span style="color:var(--target)">highlighted</span> devices are the SAI / O2 / exhaust
|
||||||
|
items this project plans to delete.</p>
|
||||||
|
<div class="grid-cards" id="caps"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="tab-table" class="tab">
|
||||||
|
<div class="drop" id="drop">Drop a map file here (<span class="mono">.bin</span> or Intel <span class="mono">.hex</span>) — or click to choose.
|
||||||
|
<input type="file" id="file" style="display:none">
|
||||||
|
</div>
|
||||||
|
<div id="tvBody" style="display:none">
|
||||||
|
<div class="tv-controls">
|
||||||
|
<label>Offset (hex)<input type="text" id="off" value="0"></label>
|
||||||
|
<label>Columns<input type="number" id="cols" value="16" min="1"></label>
|
||||||
|
<label>Rows<input type="number" id="rows" value="16" min="1"></label>
|
||||||
|
<label>Cell bytes
|
||||||
|
<select id="cell"><option value="1">1 (8-bit)</option><option value="2" selected>2 (16-bit)</option></select>
|
||||||
|
</label>
|
||||||
|
<label>Endian
|
||||||
|
<select id="endian"><option value="be" selected>big</option><option value="le">little</option></select>
|
||||||
|
</label>
|
||||||
|
<label>Scale ×<input type="text" id="scale" value="1"></label>
|
||||||
|
</div>
|
||||||
|
<div id="tvInfo" class="hint"></div>
|
||||||
|
<div id="heat" class="heat"></div>
|
||||||
|
<div id="hex" class="hexdump"></div>
|
||||||
|
</div>
|
||||||
|
<p class="hint">No dump yet? This becomes useful after <span class="mono">tunie</span> reads a ROM.
|
||||||
|
Meanwhile you can drop any TuneECU <span class="mono">.hex</span> map to eyeball its bytes,
|
||||||
|
and hand-locate tables by diffing two maps.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script id="data" type="application/json">/*__DATA__*/</script>
|
||||||
|
<script>
|
||||||
|
const DATA = JSON.parse(document.getElementById('data').textContent);
|
||||||
|
document.getElementById('meta').textContent =
|
||||||
|
`${DATA.meta.mapCount} maps · ${DATA.meta.source}`;
|
||||||
|
|
||||||
|
// ---- tabs ----
|
||||||
|
document.querySelectorAll('nav button').forEach(b=>b.onclick=()=>{
|
||||||
|
document.querySelectorAll('nav button').forEach(x=>x.classList.remove('active'));
|
||||||
|
document.querySelectorAll('.tab').forEach(x=>x.classList.remove('active'));
|
||||||
|
b.classList.add('active');
|
||||||
|
document.getElementById('tab-'+b.dataset.tab).classList.add('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// ---- maps ----
|
||||||
|
const maps = DATA.maps;
|
||||||
|
const ecuSel = document.getElementById('ecu');
|
||||||
|
[...new Set(maps.map(m=>m.ecu))].sort().forEach(e=>{
|
||||||
|
const o=document.createElement('option'); o.value=e;
|
||||||
|
o.textContent='Type '+e+(e==='0'?' (Triumph Keihin)':e==='1'?' (Sagem)':e==='P'?' (Bosch)':'');
|
||||||
|
ecuSel.appendChild(o);
|
||||||
|
});
|
||||||
|
let mineOnly=false;
|
||||||
|
const q=document.getElementById('q'), odo=document.getElementById('odo'),
|
||||||
|
tbody=document.querySelector('#mapTable tbody'), mapCount=document.getElementById('mapCount');
|
||||||
|
document.getElementById('mineChip').onclick=e=>{mineOnly=!mineOnly;e.target.classList.toggle('on',mineOnly);render();};
|
||||||
|
[q,ecuSel,odo].forEach(el=>el.oninput=render);
|
||||||
|
|
||||||
|
function isMine(m){
|
||||||
|
const b=m.description.join(' ').toLowerCase();
|
||||||
|
return m.ecu==='0' && b.includes('mechanical odometer') && b.includes('bonneville');
|
||||||
|
}
|
||||||
|
function render(){
|
||||||
|
const needle=q.value.toLowerCase(), e=ecuSel.value, od=odo.value;
|
||||||
|
let rows=maps.filter(m=>{
|
||||||
|
const b=m.description.join(' ').toLowerCase();
|
||||||
|
if(needle && !b.includes(needle) && !m.id.includes(needle)) return false;
|
||||||
|
if(e && m.ecu!==e) return false;
|
||||||
|
if(od && !b.includes(od)) return false;
|
||||||
|
if(mineOnly && !isMine(m)) return false;
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
tbody.innerHTML='';
|
||||||
|
rows.slice(0,600).forEach(m=>{
|
||||||
|
const tr=document.createElement('tr');
|
||||||
|
if(isMine(m)) tr.className='mine';
|
||||||
|
tr.innerHTML=`<td class="id mono">${m.id}</td><td class="mono">${m.ecu}</td>`+
|
||||||
|
`<td><b>${m.description[0]||''}</b><div class="desc">${m.description.slice(1).join('\n')}</div></td>`;
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
});
|
||||||
|
mapCount.textContent=`${rows.length} match${rows.length===1?'':'es'}`+
|
||||||
|
(rows.length>600?' (showing 600)':'');
|
||||||
|
}
|
||||||
|
render();
|
||||||
|
|
||||||
|
// ---- capabilities ----
|
||||||
|
const targets=new Set(DATA.modTargets);
|
||||||
|
const capWrap=document.getElementById('caps');
|
||||||
|
Object.values(DATA.definitions).forEach(d=>{
|
||||||
|
if(!d.items.length) return;
|
||||||
|
const c=document.createElement('div'); c.className='card';
|
||||||
|
c.innerHTML=`<h3>${d.label}</h3><div class="note">${d.note}</div>`;
|
||||||
|
d.items.forEach(it=>{
|
||||||
|
const isT=targets.has(it.text);
|
||||||
|
const row=document.createElement('div'); row.className='item'+(isT?' target':'');
|
||||||
|
row.innerHTML=`<span class="n">${it.i}</span><span>${it.text}${isT?'<span class="badge">mod target</span>':''}</span>`;
|
||||||
|
c.appendChild(row);
|
||||||
|
});
|
||||||
|
capWrap.appendChild(c);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ---- table viewer ----
|
||||||
|
let BYTES=null;
|
||||||
|
const drop=document.getElementById('drop'), fileIn=document.getElementById('file');
|
||||||
|
drop.onclick=()=>fileIn.click();
|
||||||
|
drop.ondragover=e=>{e.preventDefault();drop.classList.add('hover');};
|
||||||
|
drop.ondragleave=()=>drop.classList.remove('hover');
|
||||||
|
drop.ondrop=e=>{e.preventDefault();drop.classList.remove('hover');load(e.dataTransfer.files[0]);};
|
||||||
|
fileIn.onchange=e=>load(e.target.files[0]);
|
||||||
|
|
||||||
|
function load(f){
|
||||||
|
if(!f) return;
|
||||||
|
const r=new FileReader();
|
||||||
|
r.onload=()=>{
|
||||||
|
let buf=new Uint8Array(r.result);
|
||||||
|
if(f.name.toLowerCase().endsWith('.hex')) buf=parseIntelHex(new TextDecoder().decode(buf));
|
||||||
|
BYTES=buf;
|
||||||
|
drop.textContent=`${f.name} — ${BYTES.length.toLocaleString()} bytes loaded`;
|
||||||
|
document.getElementById('tvBody').style.display='block';
|
||||||
|
draw();
|
||||||
|
};
|
||||||
|
r.readAsArrayBuffer(f);
|
||||||
|
}
|
||||||
|
function parseIntelHex(txt){
|
||||||
|
const out=[]; let base=0;
|
||||||
|
txt.split(/\r?\n/).forEach(l=>{
|
||||||
|
if(l[0]!==':') return;
|
||||||
|
const len=parseInt(l.substr(1,2),16), addr=parseInt(l.substr(3,4),16), type=parseInt(l.substr(7,2),16);
|
||||||
|
if(type===0x04){ base=parseInt(l.substr(9,4),16)<<16; }
|
||||||
|
else if(type===0x00){
|
||||||
|
for(let i=0;i<len;i++){ out[base+addr+i]=parseInt(l.substr(9+i*2,2),16); }
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const max=out.length; const b=new Uint8Array(max);
|
||||||
|
for(let i=0;i<max;i++) b[i]=out[i]||0;
|
||||||
|
return b;
|
||||||
|
}
|
||||||
|
['off','cols','rows','cell','endian','scale'].forEach(id=>document.getElementById(id).oninput=draw);
|
||||||
|
function draw(){
|
||||||
|
if(!BYTES) return;
|
||||||
|
const off=parseInt(document.getElementById('off').value,16)||0;
|
||||||
|
const cols=+document.getElementById('cols').value, rows=+document.getElementById('rows').value;
|
||||||
|
const cw=+document.getElementById('cell').value, be=document.getElementById('endian').value==='be';
|
||||||
|
const scale=parseFloat(document.getElementById('scale').value)||1;
|
||||||
|
const vals=[]; let p=off;
|
||||||
|
for(let i=0;i<cols*rows;i++){
|
||||||
|
let v;
|
||||||
|
if(cw===1){ v=BYTES[p]; p+=1; }
|
||||||
|
else { v = be ? (BYTES[p]<<8)|BYTES[p+1] : (BYTES[p+1]<<8)|BYTES[p]; p+=2; }
|
||||||
|
vals.push(v*scale);
|
||||||
|
}
|
||||||
|
const mn=Math.min(...vals), mx=Math.max(...vals), span=mx-mn||1;
|
||||||
|
const heat=document.getElementById('heat');
|
||||||
|
heat.style.gridTemplateColumns=`repeat(${cols},1fr)`;
|
||||||
|
heat.innerHTML='';
|
||||||
|
vals.forEach(v=>{
|
||||||
|
const t=(v-mn)/span; // blue(low) -> red(high)
|
||||||
|
const hue=(1-t)*220;
|
||||||
|
const cell=document.createElement('div'); cell.className='cell';
|
||||||
|
cell.style.background=`hsl(${hue},75%,${35+t*25}%)`;
|
||||||
|
cell.textContent = Number.isInteger(v)?v:v.toFixed(1);
|
||||||
|
heat.appendChild(cell);
|
||||||
|
});
|
||||||
|
document.getElementById('tvInfo').textContent=
|
||||||
|
`range ${mn.toLocaleString()} … ${mx.toLocaleString()} over ${cols}×${rows} cells from 0x${off.toString(16)}`;
|
||||||
|
// hex dump around the offset
|
||||||
|
let dump=''; const start=off & ~0xf;
|
||||||
|
for(let a=start;a<start+ (rows*cols*cw)+16 && a<BYTES.length; a+=16){
|
||||||
|
let hex='',asc='';
|
||||||
|
for(let i=0;i<16;i++){ const b=BYTES[a+i]; if(b===undefined)break;
|
||||||
|
hex+=b.toString(16).padStart(2,'0')+' '; asc+=(b>=32&&b<127)?String.fromCharCode(b):'.'; }
|
||||||
|
dump+=a.toString(16).padStart(6,'0')+' '+hex.padEnd(48)+' '+asc+'\n';
|
||||||
|
}
|
||||||
|
document.getElementById('hex').textContent=dump;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
279
tunie/viewer/tunie-viewer.html
Normal file
279
tunie/viewer/tunie-viewer.html
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user