Online M-Bus Parser
}
}
+ function renderHexViewer(container, annotatedJson, inputString) {
+ let segments;
+ try {
+ segments = JSON.parse(annotatedJson);
+ } catch (e) {
+ container.innerHTML = 'Error parsing annotation data: ' + e.message + '
';
+ return;
+ }
+ if (!Array.isArray(segments) || segments.length === 0) {
+ container.innerHTML = 'No annotation segments returned. Check input.
';
+ return;
+ }
+
+ // Parse raw bytes from input string
+ const rawBytes = inputString.replace(/\s+/g, '').match(/.{1,2}/g).map(h => parseInt(h, 16));
+
+ // Build byte-to-segment lookup
+ const byteToSeg = new Array(rawBytes.length).fill(null);
+ segments.forEach((seg, idx) => {
+ for (let i = seg.start; i < seg.end && i < rawBytes.length; i++) {
+ byteToSeg[i] = idx;
+ }
+ });
+
+ // Layer CSS class
+ function layerClass(layer) {
+ if (layer === 'Frame') return 'hex-layer-frame';
+ if (layer === 'AppHeader') return 'hex-layer-appheader';
+ return 'hex-layer-record';
+ }
+
+ // Create viewer structure
+ const viewer = document.createElement('div');
+ viewer.className = 'hex-viewer';
+
+ const leftPanel = document.createElement('div');
+ leftPanel.className = 'hex-viewer-left';
+
+ const rightPanel = document.createElement('div');
+ rightPanel.className = 'hex-viewer-right';
+
+ viewer.appendChild(leftPanel);
+ viewer.appendChild(rightPanel);
+ container.appendChild(viewer);
+
+ // Tooltip
+ const tooltip = document.createElement('div');
+ tooltip.className = 'hex-tooltip';
+ document.body.appendChild(tooltip);
+
+ // Render hex grid
+ const header = document.createElement('div');
+ header.className = 'hex-header';
+ let hdrText = ' Offset ';
+ for (let i = 0; i < 16; i++) {
+ hdrText += i.toString(16).toUpperCase().padStart(2, '0') + ' ';
+ if (i === 7) hdrText += ' ';
+ }
+ hdrText += ' ASCII';
+ header.textContent = hdrText;
+ leftPanel.appendChild(header);
+
+ const byteElements = [];
+ const asciiElements = [];
+
+ for (let row = 0; row * 16 < rawBytes.length; row++) {
+ const rowDiv = document.createElement('div');
+ rowDiv.className = 'hex-row';
+
+ // Offset
+ const offsetSpan = document.createElement('span');
+ offsetSpan.className = 'hex-offset';
+ offsetSpan.textContent = ' ' + (row * 16).toString(16).toUpperCase().padStart(4, '0') + ' ';
+ rowDiv.appendChild(offsetSpan);
+
+ const rowAsciiSpans = [];
+
+ for (let col = 0; col < 16; col++) {
+ const byteIdx = row * 16 + col;
+ if (byteIdx >= rawBytes.length) {
+ // Pad
+ const pad = document.createElement('span');
+ pad.style.display = 'inline-block';
+ pad.style.width = '26px';
+ rowDiv.appendChild(pad);
+ if (col === 7) {
+ const gap = document.createElement('span');
+ gap.className = 'hex-gap';
+ rowDiv.appendChild(gap);
+ }
+ continue;
+ }
+
+ const b = rawBytes[byteIdx];
+ const segIdx = byteToSeg[byteIdx];
+ const seg = segIdx !== null ? segments[segIdx] : null;
+
+ const span = document.createElement('span');
+ span.className = 'hex-byte ' + (seg ? layerClass(seg.layer) : '');
+ span.textContent = b.toString(16).toUpperCase().padStart(2, '0') + ' ';
+ span.dataset.byteIdx = byteIdx;
+ if (segIdx !== null) span.dataset.segIdx = segIdx;
+ byteElements[byteIdx] = span;
+ rowDiv.appendChild(span);
+
+ if (col === 7) {
+ const gap = document.createElement('span');
+ gap.className = 'hex-gap';
+ rowDiv.appendChild(gap);
+ }
+
+ // ASCII
+ const aSpan = document.createElement('span');
+ const ch = (b >= 0x21 && b <= 0x7e) ? String.fromCharCode(b) : '\u00b7';
+ aSpan.className = 'hex-ascii ' + (seg ? layerClass(seg.layer) : '');
+ aSpan.textContent = ch;
+ aSpan.dataset.byteIdx = byteIdx;
+ if (segIdx !== null) aSpan.dataset.segIdx = segIdx;
+ asciiElements[byteIdx] = aSpan;
+ rowAsciiSpans.push(aSpan);
+ }
+
+ // ASCII separator
+ const sep = document.createElement('span');
+ sep.className = 'hex-ascii-sep';
+ rowDiv.appendChild(sep);
+
+ rowAsciiSpans.forEach(s => rowDiv.appendChild(s));
+
+ leftPanel.appendChild(rowDiv);
+ }
+
+ // Highlight helpers
+ let activeSegIdx = null;
+ function highlightSegment(segIdx) {
+ clearHighlight();
+ if (segIdx === null || segIdx === undefined) return;
+ activeSegIdx = segIdx;
+ const seg = segments[segIdx];
+ for (let i = seg.start; i < seg.end; i++) {
+ if (byteElements[i]) byteElements[i].classList.add('highlight');
+ if (asciiElements[i]) asciiElements[i].classList.add('highlight');
+ }
+ // Highlight tree item
+ const treeItem = rightPanel.querySelector(`[data-seg-idx="${segIdx}"]`);
+ if (treeItem) {
+ treeItem.classList.add('active');
+ treeItem.scrollIntoView({ block: 'nearest' });
+ // Expand parent group if collapsed
+ const groupBody = treeItem.closest('.hex-tree-group-body');
+ if (groupBody && groupBody.classList.contains('hidden')) {
+ groupBody.classList.remove('hidden');
+ const groupHeader = groupBody.previousElementSibling;
+ if (groupHeader) groupHeader.classList.remove('collapsed');
+ }
+ }
+ }
+ function clearHighlight() {
+ activeSegIdx = null;
+ byteElements.forEach(el => { if (el) el.classList.remove('highlight'); });
+ asciiElements.forEach(el => { if (el) el.classList.remove('highlight'); });
+ rightPanel.querySelectorAll('.hex-tree-item.active').forEach(el => el.classList.remove('active'));
+ }
+
+ // Hex grid events
+ leftPanel.addEventListener('mouseover', e => {
+ const el = e.target.closest('[data-seg-idx]');
+ if (!el) return;
+ const segIdx = parseInt(el.dataset.segIdx);
+ const seg = segments[segIdx];
+ tooltip.textContent = seg.kind + ': ' + seg.detail;
+ tooltip.style.display = 'block';
+ });
+ leftPanel.addEventListener('mousemove', e => {
+ tooltip.style.left = (e.clientX + 12) + 'px';
+ tooltip.style.top = (e.clientY - 30) + 'px';
+ });
+ leftPanel.addEventListener('mouseout', e => {
+ const el = e.target.closest('[data-seg-idx]');
+ if (el) tooltip.style.display = 'none';
+ });
+ leftPanel.addEventListener('click', e => {
+ const el = e.target.closest('[data-seg-idx]');
+ if (!el) { clearHighlight(); return; }
+ const segIdx = parseInt(el.dataset.segIdx);
+ if (activeSegIdx === segIdx) { clearHighlight(); }
+ else { highlightSegment(segIdx); }
+ });
+
+ // Build tree panel
+ // Group segments by layer, then by record group
+ let currentLayer = null;
+ let currentGroup = null;
+ let groupBody = null;
+
+ segments.forEach((seg, segIdx) => {
+ if (seg.layer !== currentLayer) {
+ currentLayer = seg.layer;
+ currentGroup = null;
+ const layerLabel = document.createElement('div');
+ layerLabel.className = 'hex-tree-layer';
+ const layerNames = { 'Frame': 'Frame', 'AppHeader': 'Application Header', 'RecordField': 'Data Records' };
+ layerLabel.textContent = layerNames[seg.layer] || seg.layer;
+ rightPanel.appendChild(layerLabel);
+ groupBody = null;
+ }
+
+ // Record grouping
+ if (seg.layer === 'RecordField' && seg.group !== null && seg.group !== currentGroup) {
+ currentGroup = seg.group;
+ const groupDiv = document.createElement('div');
+ groupDiv.className = 'hex-tree-group';
+
+ const groupHeader = document.createElement('div');
+ groupHeader.className = 'hex-tree-group-header';
+ groupHeader.innerHTML = '\u25BC Record ' + seg.group;
+ groupDiv.appendChild(groupHeader);
+
+ groupBody = document.createElement('div');
+ groupBody.className = 'hex-tree-group-body';
+ groupDiv.appendChild(groupBody);
+
+ groupHeader.addEventListener('click', () => {
+ groupBody.classList.toggle('hidden');
+ groupHeader.classList.toggle('collapsed');
+ });
+
+ rightPanel.appendChild(groupDiv);
+ }
+
+ const item = document.createElement('div');
+ item.className = 'hex-tree-item';
+ item.dataset.segIdx = segIdx;
+
+ const offsetStr = seg.end - seg.start === 1
+ ? '[' + seg.start.toString(16).toUpperCase().padStart(2, '0') + ']'
+ : '[' + seg.start.toString(16).toUpperCase().padStart(2, '0') + '..' + seg.end.toString(16).toUpperCase().padStart(2, '0') + ']';
+
+ item.innerHTML =
+ '' + escHtml(seg.kind) + '' +
+ '' + escHtml(seg.detail) + '' +
+ '' + offsetStr + '';
+
+ item.addEventListener('click', () => {
+ if (activeSegIdx === segIdx) { clearHighlight(); }
+ else { highlightSegment(segIdx); }
+ });
+ item.addEventListener('mouseover', () => {
+ if (activeSegIdx === null) {
+ const s = segments[segIdx];
+ for (let i = s.start; i < s.end; i++) {
+ if (byteElements[i]) byteElements[i].classList.add('highlight');
+ if (asciiElements[i]) asciiElements[i].classList.add('highlight');
+ }
+ }
+ });
+ item.addEventListener('mouseout', () => {
+ if (activeSegIdx === null) {
+ clearHighlight();
+ }
+ });
+
+ if (groupBody && seg.group !== null) {
+ groupBody.appendChild(item);
+ } else {
+ rightPanel.appendChild(item);
+ }
+ });
+
+ // Cleanup tooltip on viewer removal
+ const observer = new MutationObserver(() => {
+ if (!document.body.contains(viewer)) {
+ tooltip.remove();
+ observer.disconnect();
+ }
+ });
+ observer.observe(container, { childList: true });
+ }
+
+ function escHtml(s) {
+ return s.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
+ }
+
setup(); // Set up the event listeners after the page is loaded