From 7d1b81690bd44fe02afded48cbb722ae31116767 Mon Sep 17 00:00:00 2001
From: atc1441 <atc1441@googlemail.com>
Date: Mon, 26 May 2025 16:23:44 +0200
Subject: [PATCH] Added more advanced Json template demo

---
 .../data/www/jsontemplate-demo-v2.html.gz     | Bin 0 -> 9640 bytes
 .../wwwroot/jsontemplate-demo-v2.html         | 415 ++++++++++++++++++
 2 files changed, 415 insertions(+)
 create mode 100644 ESP32_AP-Flasher/data/www/jsontemplate-demo-v2.html.gz
 create mode 100644 ESP32_AP-Flasher/wwwroot/jsontemplate-demo-v2.html

diff --git a/ESP32_AP-Flasher/data/www/jsontemplate-demo-v2.html.gz b/ESP32_AP-Flasher/data/www/jsontemplate-demo-v2.html.gz
new file mode 100644
index 0000000000000000000000000000000000000000..8fd408c02253359983fc499a46f6bad3eff6ece1
GIT binary patch
literal 9640
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

literal 0
HcmV?d00001

diff --git a/ESP32_AP-Flasher/wwwroot/jsontemplate-demo-v2.html b/ESP32_AP-Flasher/wwwroot/jsontemplate-demo-v2.html
new file mode 100644
index 00000000..f1053bc7
--- /dev/null
+++ b/ESP32_AP-Flasher/wwwroot/jsontemplate-demo-v2.html
@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>JSON Template Publisher - Flat Dark</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            margin: 0;
+            padding: 20px;
+            background-color: #1e1e1e;
+            color: #dcdcdc;
+            display: flex;
+            justify-content: center;
+            min-height: 100vh;
+        }
+        .main-wrapper {
+            display: flex;
+            gap: 25px;
+            width: 100%;
+            max-width: 1200px;
+            padding: 20px;
+        }
+        .input-column, .preview-column { 
+            flex: 1;
+            display: flex; 
+            flex-direction: column;
+        }
+        .preview-column {
+            position: sticky; 
+            top: 20px; 
+            align-self: flex-start; 
+        }
+
+        .container { 
+            background-color: #2a2a2a;
+            padding: 25px;
+            border-radius: 8px; 
+            border: 1px solid #383838;
+            width: 100%; 
+            box-sizing: border-box;
+        }
+        .input-column .container { 
+            
+        }
+
+
+        h3 {
+            color: #4dabf7; 
+            text-align: center;
+            margin-top: 0;
+            margin-bottom: 20px;
+            font-size: 1.6em;
+            font-weight: 600;
+        }
+        p, label {
+            line-height: 1.6;
+        }
+        a {
+            color: #4dabf7;
+            text-decoration: none;
+        }
+        a:hover {
+            text-decoration: underline;
+            color: #74c0fc;
+        }
+        input[type="text"], textarea, select {
+            width: 100%;
+            padding: 10px 12px;
+            margin-bottom: 15px;
+            border: 1px solid #4a4a4a; 
+            border-radius: 4px; 
+            box-sizing: border-box;
+            font-size: 0.95rem;
+            background-color: #303030; 
+            color: #dcdcdc; 
+        }
+        input[type="text"]:focus, textarea:focus, select:focus {
+            outline: none;
+            border-color: #4dabf7;
+            box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.3);
+        }
+        textarea {
+            min-height: 140px;
+            resize: vertical;
+        }
+        input[type="submit"], button {
+            background-color: #0078d4; 
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 1rem;
+            font-weight: 500;
+            transition: background-color 0.15s ease-in-out;
+        }
+        input[type="submit"]:hover, button:hover {
+            background-color: #005a9e;
+        }
+        .form-group {
+            margin-bottom: 18px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 500;
+            color: #b0b0b0; 
+        }
+        #previewArea {
+            margin-top: 0; 
+            padding: 20px;
+            border: 1px solid #383838;
+            border-radius: 8px;
+            background-color: #2a2a2a; 
+            text-align: center;
+            overflow: auto;
+            width: 100%; 
+            box-sizing: border-box;
+        }
+        #previewArea h4 {
+            margin-top: 0;
+            color: #4dabf7;
+        }
+        #previewCanvas {
+            border: 1px solid #4f4f4f; 
+            max-width: 100%;
+            max-height: 450px; 
+            height: auto;
+            display: block;
+            margin: 12px auto;
+            transform-origin: center center;
+            background-color: #fff; 
+        }
+        .info-text {
+            font-size: 0.85em;
+            color: #999; 
+            margin-bottom: 15px;
+        }
+        .status-message {
+            margin-top: 10px;
+            padding: 8px 12px;
+            border-radius: 4px;
+            word-break: break-word;
+            border: 1px solid transparent;
+            font-size: 0.9em;
+        }
+        .error-message { color: #ffcdd2; background-color: #c62828; border-color: #b71c1c; }
+        .success-message { color: #c8e6c9; background-color: #2e7d32; border-color: #1b5e20; }
+        .warning-message { color: #fff9c4; background-color: #f9a825; border-color: #f57f17; }
+        .info-message { color: #bbdefb; background-color: #1565c0; border-color: #0d47a1; }
+
+        .flex-group { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
+        .flex-group > div { flex: 1; min-width: 180px; }
+        .flex-group > button { flex-shrink: 0; margin-bottom: 15px; padding: 10px 15px; }
+        #clearMacHistoryBtn { background-color: #d32f2f; }
+        #clearMacHistoryBtn:hover { background-color: #b71c1c; }
+    </style>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>
+    <script>
+        
+        const MAX_IMAGE_FLIPS=640,HORIZ_SHORT_SHORT=0,HORIZ_SHORT_LONG=1,HORIZ_LONG_SHORT=2,HORIZ_LONG_LONG=3,G5_SUCCESS=0,G5_INVALID_PARAMETER=1,G5_DECODE_ERROR=2,REGISTER_WIDTH=32;const code_table=[0x90,0,0x40,0,3,7,0x13,7,2,6,2,6,0x12,6,0x12,6,0x30,4,0x30,4,0x30,4,0x30,4,0x30,4,0x30,4,0x30,4,0x30,4,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,0x20,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,1,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3,0x11,3];
+        function TIFFMOTOLONG(p,ix){let val=0;if(ix<p.length)val|=p[ix]<<24;if(ix+1<p.length)val|=p[ix+1]<<16;if(ix+2<p.length)val|=p[ix+2]<<8;if(ix+3<p.length)val|=p[ix+3];return val>>>0}
+        class G5DECIMAGE{constructor(){this.iWidth=0;this.iHeight=0;this.iError=0;this.y=0;this.iVLCSize=0;this.iHLen=0;this.iPitch=0;this.u32Accum=0;this.ulBitOff=0;this.ulBits=0;this.pSrc=null;this.pBuf=null;this.pBufIndex=0;this.pCur=new Int16Array(MAX_IMAGE_FLIPS);this.pRef=new Int16Array(MAX_IMAGE_FLIPS)}}
+        function g5_decode_init(pImage,iWidth,iHeight,pData,iDataSize){if(!pImage||iWidth<1||iHeight<1||!pData||iDataSize<1)return G5_INVALID_PARAMETER;pImage.iVLCSize=iDataSize;pImage.pSrc=pData;pImage.ulBitOff=0;pImage.y=0;pImage.ulBits=TIFFMOTOLONG(pData,0);pImage.iWidth=iWidth;pImage.iHeight=iHeight;return G5_SUCCESS}
+        function G5DrawLine(pPage,pCurFlips,pOut){const xright=pPage.iWidth;let pCurIndex=0;const len=(xright+7)>>3;pOut.fill(255,0,len);let x=0;while(x<xright){const startX=pCurFlips[pCurIndex++],run=pCurFlips[pCurIndex++]-startX;if(startX>=xright||run<=0)break;let visibleX=Math.max(0,startX),visibleRun=Math.min(xright,startX+run)-visibleX;if(visibleRun>0){const startByte=visibleX>>3,endByte=(visibleX+visibleRun-1)>>3,lBit=255<<8-(visibleX&7)&255,rBit=255>>(visibleX+visibleRun&7);if(endByte===startByte)pOut[startByte]&=lBit|rBit;else{pOut[startByte]&=lBit;for(let i=startByte+1;i<endByte;i++)pOut[i]=0;if(endByte>startByte)pOut[endByte]&=rBit}}x=startX+run}}
+        function Decode_Begin(pPage){const xsize=pPage.iWidth;for(let i=0;i<MAX_IMAGE_FLIPS-2;i++)pPage.pRef[i]=pPage.pCur[i]=xsize;pPage.pCur[MAX_IMAGE_FLIPS-2]=pPage.pRef[MAX_IMAGE_FLIPS-2]=32767;pPage.pCur[MAX_IMAGE_FLIPS-1]=pPage.pRef[MAX_IMAGE_FLIPS-1]=32767;pPage.pBuf=pPage.pSrc;pPage.pBufIndex=0;pPage.ulBits=TIFFMOTOLONG(pPage.pSrc,0);pPage.ulBitOff=0;pPage.iHLen=xsize>0?32-Math.clz32(xsize):0}
+        function DecodeLine(pPage){let a0=-1,a0_p,b1,pCurIndex=0,pRefIndex=0;const pCur=pPage.pCur,pRef=pPage.pRef;let ulBits=pPage.ulBits,ulBitOff=pPage.ulBitOff,pBufIndex=pPage.pBufIndex;const pBuf=pPage.pBuf,xsize=pPage.iWidth,u32HLen=pPage.iHLen,u32HMask=(1<<u32HLen)-1;let tot_run,tot_run1;while(a0<xsize){if(pBufIndex+(ulBitOff>>3)>=pPage.iVLCSize&&ulBitOff>REGISTER_WIDTH-8)return pPage.iError=G5_DECODE_ERROR;if(ulBitOff>REGISTER_WIDTH-8){pBufIndex+=ulBitOff>>3;ulBitOff&=7;ulBits=TIFFMOTOLONG(pBuf,pBufIndex)}if((ulBits<<ulBitOff&2147483648)!==0){a0=pRef[pRefIndex++];pCur[pCurIndex++]=a0;ulBitOff++}else{const lBits=ulBits>>(REGISTER_WIDTH-8-ulBitOff)&254,sCode=code_table[lBits];ulBitOff+=code_table[lBits+1];switch(sCode){case 1:case 2:case 3:a0=pRef[pRefIndex]-sCode;pCur[pCurIndex++]=a0;if(pRefIndex==0)pRefIndex+=2;pRefIndex--;while(a0>=pRef[pRefIndex])pRefIndex+=2;break;case 17:case 18:case 19:a0=pRef[pRefIndex++];b1=a0;a0+=sCode&7;if(b1!==xsize&&a0<xsize)while(a0>=pRef[pRefIndex])pRefIndex+=2;if(a0>xsize)a0=xsize;pCur[pCurIndex++]=a0;break;case 32:if(ulBitOff>REGISTER_WIDTH-16){pBufIndex+=ulBitOff>>3;ulBitOff&=7;ulBits=TIFFMOTOLONG(pBuf,pBufIndex)}a0_p=Math.max(0,a0);const lBitsH=ulBits>>(REGISTER_WIDTH-2-ulBitOff)&3;ulBitOff+=2;switch(lBitsH){case HORIZ_SHORT_SHORT:tot_run=ulBits>>(REGISTER_WIDTH-3-ulBitOff)&7;ulBitOff+=3;tot_run1=ulBits>>(REGISTER_WIDTH-3-ulBitOff)&7;ulBitOff+=3;break;case HORIZ_SHORT_LONG:tot_run=ulBits>>(REGISTER_WIDTH-3-ulBitOff)&7;ulBitOff+=3;tot_run1=ulBits>>(REGISTER_WIDTH-u32HLen-ulBitOff)&u32HMask;ulBitOff+=u32HLen;break;case HORIZ_LONG_SHORT:tot_run=ulBits>>(REGISTER_WIDTH-u32HLen-ulBitOff)&u32HMask;ulBitOff+=u32HLen;tot_run1=ulBits>>(REGISTER_WIDTH-3-ulBitOff)&7;ulBitOff+=3;break;case HORIZ_LONG_LONG:tot_run=ulBits>>(REGISTER_WIDTH-u32HLen-ulBitOff)&u32HMask;ulBitOff+=u32HLen;if(ulBitOff>REGISTER_WIDTH-u32HLen&&u32HLen>0){pBufIndex+=ulBitOff>>3;ulBitOff&=7;ulBits=TIFFMOTOLONG(pBuf,pBufIndex)}tot_run1=ulBits>>(REGISTER_WIDTH-u32HLen-ulBitOff)&u32HMask;ulBitOff+=u32HLen;break}a0=a0_p+tot_run;pCur[pCurIndex++]=a0;a0+=tot_run1;if(a0<xsize)while(a0>=pRef[pRefIndex])pRefIndex+=2;pCur[pCurIndex++]=a0;break;case 48:pRefIndex++;a0=pRef[pRefIndex++];break;default:return pPage.iError=G5_DECODE_ERROR}}}pCur[pCurIndex++]=xsize;pCur[pCurIndex++]=xsize;pPage.ulBits=ulBits;pPage.ulBitOff=ulBitOff;pPage.pBufIndex=pBufIndex;return pPage.iError}
+        function processG5(data,width,height){try{let decoder=new G5DECIMAGE,initResult=g5_decode_init(decoder,width,height,data,data.length);if(initResult!==G5_SUCCESS)throw new Error("G5 Init failed: "+initResult);Decode_Begin(decoder);let outputBuffer=new Uint8Array(height*((width+7)>>3));for(let y=0;y<height;y++){let lineBuffer=outputBuffer.subarray(y*((width+7)>>3),(y+1)*((width+7)>>3));decoder.y=y;let decodeResult=DecodeLine(decoder);if(decodeResult!==G5_SUCCESS)console.warn("G5 Decode error line "+y+": "+decoder.iError);G5DrawLine(decoder,decoder.pCur,lineBuffer);const temp=decoder.pRef;decoder.pRef=decoder.pCur;decoder.pCur=temp}return outputBuffer}catch(error){console.error("Error in processG5:",error.message);return new Uint8Array(0)}}
+        
+    </script>
+</head>
+<body>
+    <div class="main-wrapper">
+        <div class="input-column">
+            <div class="container">
+                <h3>JSON Template Publisher</h3>
+                <p class="info-text">Use this form to push JSON templates to an E-Paper Tag. Ensure your JSON is valid. Check syntax at <a href="https://jsonlint.com/" target="_blank">jsonlint.com</a>.<br>
+                    Documentation: <a href="https://github.com/OpenEPaperLink/OpenEPaperLink/wiki/Json-template" target="_blank">OpenEPaperLink JSON Template Wiki</a>
+                </p>
+                
+                <form id="jsonUploadForm" method="POST" action="/jsonupload">
+                    <div class="form-group flex-group">
+                        <div>
+                            <label for="macInput">MAC Address:</label>
+                            <input type="text" id="macInput" name="mac" pattern="[0-9a-fA-F]{12,16}" title="12 or 16 Hex characters" required>
+                        </div>
+                        <button type="button" id="refreshTagDbBtn" title="Reload Tag Database from AP">↻</button>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="macSelect">Available Tags (grouped by type):</label>
+                        <select id="macSelect" style="margin-bottom: 5px;"></select>
+                        <button type="button" id="clearMacHistoryBtn" title="Clear locally stored MAC history">Clear History</button>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="jsonInput">JSON String:</label>
+                        <textarea id="jsonInput" name="json">
+[
+    { "text": [5, 5, "Bahnschrift 20", "fonts/bahnschrift20", 1] },
+    { "box": [10, 30, 20, 20, 2] }
+]
+                        </textarea>
+                    </div>
+
+                    <div class="form-group">
+                        <input type="submit" value="Upload JSON & Generate Preview">
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div class="preview-column">
+            <div class="container">
+                 <div id="globalStatus" class="status-message" style="display:none;"></div>
+                <div id="previewArea" style="display:none;">
+                    <h4>Image Preview</h4>
+                    <canvas id="previewCanvas"></canvas>
+                    <p id="previewStatus" class="status-message" style="display:none;"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        const ge=id=>document.getElementById(id);
+        const macInputEl=ge('macInput'),macSelectEl=ge('macSelect'),jsonInputEl=ge('jsonInput'),previewAreaEl=ge('previewArea'),previewCanvasEl=ge('previewCanvas'),previewStatusEl=ge('previewStatus'),jsonUploadFormEl=ge('jsonUploadForm'),clearMacHistoryBtnEl=ge('clearMacHistoryBtn'),globalStatusEl=ge('globalStatus'),refreshTagDbBtnEl=ge('refreshTagDbBtn');
+        const MAX_HISTORY_ITEMS=10,BASE_SERVER_URL='';
+        let localTagDB={},localTagTypes={},currentPreviewMac=null,currentPreviewHwType=null,currentPreviewVersion=null,currentPreviewTagTypeDef=null;
+        let offscreenCanvas = document.createElement('canvas');
+        let offscreenCtx = offscreenCanvas.getContext('2d');
+        let socket;
+
+        if (typeof window.processZlib === 'undefined' && typeof pako !== 'undefined') {
+            window.processZlib = function(rawDataFromDotRawFile) {
+                try {
+                    const EXTERNAL_HEADER_SIZE = 4; 
+                    if (rawDataFromDotRawFile.length <= EXTERNAL_HEADER_SIZE) {setStatus(previewStatusEl, `Zlib error: Raw data too short.`, 'error',true); return new Uint8ClampedArray(0);}
+                    const zlibStream = rawDataFromDotRawFile.subarray(EXTERNAL_HEADER_SIZE); 
+                    const inflatedBuffer = pako.inflate(zlibStream);
+                    if (!inflatedBuffer || inflatedBuffer.length === 0) {setStatus(previewStatusEl, 'Zlib error: Inflation resulted in empty data.', 'error',true); return new Uint8ClampedArray(0);}
+                    const internalHeaderSize = inflatedBuffer[0]; 
+                    if (internalHeaderSize >= 0 && inflatedBuffer.length > internalHeaderSize) {return inflatedBuffer.subarray(internalHeaderSize);}
+                    else if (internalHeaderSize === 0) {return inflatedBuffer;}
+                    else {console.warn("Zlib: Unusual internal header. Length:", inflatedBuffer.length, "Header byte:", internalHeaderSize); return inflatedBuffer;}
+                } catch (err) {
+                    let msg = (err && err.message) ? err.message : (typeof err === 'string' ? err : 'Unknown Zlib error');
+                    console.error('pako.inflate error:', err); setStatus(previewStatusEl, `Zlib error: ${msg}`, 'error',true); return new Uint8ClampedArray(0);
+                }
+            };
+        } else if (typeof window.processZlib === 'undefined') {
+            window.processZlib = function(data) {setStatus(previewStatusEl, "Zlib (pako) not loaded.",'warning',true); return data;};
+        }
+        
+        function setStatus(element, message, type = 'info', append = false) {
+            element.classList.remove('error-message', 'success-message', 'warning-message', 'info-message'); 
+            element.classList.add(`${type}-message`, 'info-message'); 
+
+            if (append) {
+                let currentBaseHTML = element.innerHTML.split("<br>")[0]; 
+                element.innerHTML = `${currentBaseHTML}<br>${message}`;
+            } else {
+                element.innerHTML = message;
+            }
+            element.style.display = message ? 'block' : 'none';
+        }
+
+
+        function connectWebSocket() {
+            const protocol = location.protocol === "https:" ? "wss://" : "ws://";
+            let basePath = location.pathname;
+            if (basePath.includes('.')) { basePath = basePath.substring(0, basePath.lastIndexOf('/'));}
+            if (!basePath.endsWith('/')) { basePath += '/';}
+            if (basePath === '//') basePath = '/';
+            const wsUrl = `${protocol}${location.host}${basePath}ws`;
+            
+            socket = new WebSocket(wsUrl);
+            socket.onopen = () => { console.log("WebSocket connected."); setStatus(globalStatusEl, "WebSocket connected.", 'success');};
+            socket.onmessage = event => {
+                try {
+                    const msg = JSON.parse(event.data);
+                    if (msg.logMsg && typeof msg.logMsg === 'string') {
+                        const log = msg.logMsg;
+                        if (log.startsWith("Updating ") && log.length === ("Updating ".length + 16) ) {
+                            const macFromMsg = log.substring("Updating ".length).toUpperCase();
+                            if (macFromMsg === currentPreviewMac) {
+                                setStatus(previewStatusEl, `Server is updating tag ${macFromMsg}. Waiting for .pending file notification...`, 'info', false);
+                            }
+                        } else if (log.startsWith("new image: /current/") && log.endsWith(".pending")) {
+                            const pendingFileWithPath = log.substring("new image: ".length);
+                            const pendingFilename = pendingFileWithPath.substring(pendingFileWithPath.lastIndexOf('/') + 1);
+                            const macInFilename = pendingFilename.substring(0, pendingFilename.indexOf('_')); 
+                            
+                            if (macInFilename.toUpperCase() === currentPreviewMac && currentPreviewTagTypeDef) {
+                                console.log(`.pending file reported for ${currentPreviewMac}: ${pendingFilename}`);
+                                const pendingImagePath = `${BASE_SERVER_URL}/current/${pendingFilename}`; 
+                                setStatus(previewStatusEl, `Loading pending image: ${pendingFilename}...`, 'info', false);
+                                loadAndRenderImage(pendingImagePath, currentPreviewMac, currentPreviewHwType, currentPreviewVersion, currentPreviewTagTypeDef);
+                            }
+                        } else if (log === "new image is the same as current image. not updating tag.") {
+                            if (currentPreviewMac && currentPreviewTagTypeDef) {
+                                console.log("Image is the same. Loading .raw for " + currentPreviewMac);
+                                setStatus(previewStatusEl, `Image is same as current. Loading existing .raw file for ${currentPreviewMac}...`, 'info', false);
+                                const tagData = localTagDB[currentPreviewMac];
+                                if (tagData) {
+                                    const cacheTag = tagData.hash !== '00000000000000000000000000000000' ? tagData.hash : Date.now();
+                                    let imagePath = '';
+                                    if(tagData.isexternal && tagData.apip && tagData.apip !== '0.0.0.0'){imagePath = `http://${tagData.apip}/current/${currentPreviewMac}.raw?${cacheTag}`}
+                                    else{imagePath = `${BASE_SERVER_URL}/current/${currentPreviewMac}.raw?${cacheTag}`}
+                                    loadAndRenderImage(imagePath, currentPreviewMac, currentPreviewHwType, currentPreviewVersion, currentPreviewTagTypeDef);
+                                } else {
+                                    setStatus(previewStatusEl, `Cannot load .raw for ${currentPreviewMac}: Tag data not found.`, 'error', false);
+                                }
+                            }
+                        }
+                    }
+                } catch (e) { console.error("Error processing WebSocket message:", e, event.data); }
+            };
+            socket.onclose = event => { console.log("WebSocket disconnected. Code:", event.code); setStatus(globalStatusEl, "WebSocket disconnected. Reconnecting in 5s...", 'warning'); setTimeout(connectWebSocket, 5000);};
+            socket.onerror = error => { console.error("WebSocket error:", error); setStatus(globalStatusEl, "WebSocket connection error.", 'error');};
+        }
+
+        async function fetchTagDB(pos=0){if(pos===0)localTagDB={};setStatus(globalStatusEl,'Loading Tag Database...','info');try{const response=await fetch(`${BASE_SERVER_URL}/get_db?pos=${pos}`);if(!response.ok)throw new Error(`Failed to load Tag DB: ${response.status}`);const data=await response.json();(data.tags||[]).forEach(tag=>{localTagDB[tag.mac.toUpperCase()]={hwType:tag.hwType,ver:tag.ver,alias:tag.alias,hash:tag.hash,isexternal:tag.isexternal||false,apip:tag.apip||'0.0.0.0'}});if(data.continu&&data.continu>pos){await fetchTagDB(data.continu)}else{setStatus(globalStatusEl,`Tag DB loaded. ${Object.keys(localTagDB).length} tags. Refreshing types...`,'success');await refreshTagTypeDefinitionsForDropdown();populateMacDropdown()}}catch(error){console.error("Error fetchTagDB:",error);setStatus(globalStatusEl,`Error Tag DB: ${error.message}`,'error')}}
+        async function getTagTypeDefinition(hwType){if(localTagTypes[hwType]&&!localTagTypes[hwType].busy)return localTagTypes[hwType];if(localTagTypes[hwType]?.busy){await new Promise(resolve=>{const interval=setInterval(()=>{if(!localTagTypes[hwType]?.busy){clearInterval(interval);resolve(localTagTypes[hwType])}},100)});return localTagTypes[hwType]}localTagTypes[hwType]={busy:true};try{let response;try{response=await fetch(`${BASE_SERVER_URL}/tagtypes/${Number(hwType).toString(16).padStart(2,'0').toUpperCase()}.json`)}catch(e){}if(!response||!response.ok){const repo='OpenEPaperLink/OpenEPaperLink',ghUrl=`https://raw.githubusercontent.com/${repo}/master/resources/tagtypes/${Number(hwType).toString(16).padStart(2,'0').toUpperCase()}.json`;response=await fetch(ghUrl)}if(!response.ok)throw new Error(`Def for ${hwType} not found (Status: ${response.status})`);const jsonData=await response.json();const definition={name:jsonData.name,width:parseInt(jsonData.width),height:parseInt(jsonData.height),bpp:parseInt(jsonData.bpp),rotatebuffer:jsonData.rotatebuffer||0,colortable:Object.values(jsonData.perceptual??jsonData.colortable??[]),zlib:parseInt(jsonData.zlib_compression||"0",16),g5:parseInt(jsonData.g5_compression||"0",16),busy:false};localTagTypes[hwType]=definition;localStorage.setItem("localTagTypesCache",JSON.stringify(localTagTypes));return definition}catch(error){console.error(`Error getTagTypeDef ${hwType}:`,error);localTagTypes[hwType]={busy:false,name:`Unknown (${hwType})`,width:0,height:0,bpp:0,colortable:[]};return localTagTypes[hwType]}}
+        function loadCachedTagTypeDefinitions(){try{const cached=localStorage.getItem("localTagTypesCache");if(cached)localTagTypes=JSON.parse(cached)}catch(e){console.warn("Error loading Tag Type Defs from cache:",e)}}
+        async function refreshTagTypeDefinitionsForDropdown(){const hwTypesInDb=new Set(Object.values(localTagDB).map(tag=>tag.hwType));for(const hwType of hwTypesInDb){if(!localTagTypes[hwType]||localTagTypes[hwType].name?.startsWith("Unknown")){await getTagTypeDefinition(hwType)}}}
+        function populateMacDropdown(){macSelectEl.innerHTML='<option value="">Select a Tag...</option>';const groupedByHwType={};for(const mac in localTagDB){const tag=localTagDB[mac];if(!groupedByHwType[tag.hwType])groupedByHwType[tag.hwType]=[];groupedByHwType[tag.hwType].push({mac,alias:tag.alias})}const sortedHwTypes=Object.keys(groupedByHwType).sort((a,b)=>{const nameA=localTagTypes[a]?.name||`Type ${a}`;const nameB=localTagTypes[b]?.name||`Type ${b}`;return nameA.localeCompare(nameB)});for(const hwType of sortedHwTypes){const group=document.createElement('optgroup');const typeDef=localTagTypes[hwType];group.label=typeDef?.name?`${typeDef.name} (${typeDef.width}x${typeDef.height}, Type ${hwType})`:`Type ${hwType}`;groupedByHwType[hwType].sort((a,b)=>(a.alias||a.mac).localeCompare(b.alias||b.mac));groupedByHwType[hwType].forEach(tag=>{const option=document.createElement('option');option.value=tag.mac;option.textContent=tag.alias?`${tag.alias} (${tag.mac})`:tag.mac;group.appendChild(option)});macSelectEl.appendChild(group)}}
+        function saveToMacHistory(mac){if(!mac||!/^[0-9a-fA-F]{12,16}$/.test(mac))return;let history=JSON.parse(localStorage.getItem('macStorageHistory'))||[];const upperMac=mac.toUpperCase();history=history.filter(item=>item.toUpperCase()!==upperMac);history.unshift(upperMac);if(history.length>MAX_HISTORY_ITEMS)history=history.slice(0,MAX_HISTORY_ITEMS);localStorage.setItem('macStorageHistory',JSON.stringify(history))}
+        macSelectEl.addEventListener('change',()=>{if(macSelectEl.value){macInputEl.value=macSelectEl.value;const tagInfo=localTagDB[macSelectEl.value.toUpperCase()];if(tagInfo)setStatus(globalStatusEl,`Selected: ${tagInfo.alias||macSelectEl.value}, HW: ${tagInfo.hwType}, FW: ${tagInfo.ver}`,'info')}});
+        macInputEl.addEventListener('change',()=>{const mac=macInputEl.value.toUpperCase();const tagInfo=localTagDB[mac];if(tagInfo)setStatus(globalStatusEl,`Tag: ${tagInfo.alias||mac}, HW: ${tagInfo.hwType}, FW: ${tagInfo.ver}`,'info');else if(mac.length===12||mac.length===16)setStatus(globalStatusEl,`Details for ${mac} not in local DB.`,'warning');else setStatus(globalStatusEl,'','info');macSelectEl.value=mac});
+        clearMacHistoryBtnEl.addEventListener('click',()=>{if(confirm("Clear MAC history from browser storage?")){localStorage.removeItem('macStorageHistory');macInputEl.value='';setStatus(globalStatusEl,'Local MAC history cleared.','info')}});
+        function loadLastMacUsed(){const lastMac=localStorage.getItem('lastMacUsed');if(lastMac)macInputEl.value=lastMac}
+        function saveLastMacUsed(mac){if(mac&&/^[0-9a-fA-F]{12,16}$/.test(mac)){localStorage.setItem('lastMacUsed',mac.toUpperCase());saveToMacHistory(mac.toUpperCase())}}
+        
+        jsonUploadFormEl.addEventListener('submit',async event=>{event.preventDefault();const mac=macInputEl.value.trim().toUpperCase();if(!mac||!/^[0-9a-fA-F]{12,16}$/.test(mac)){alert("Please enter a valid MAC address.");return}saveLastMacUsed(mac);let tagInfo=localTagDB[mac];if(!tagInfo){setStatus(globalStatusEl,`Info for MAC ${mac} not in local DB. Reloading...`,'warning');await fetchTagDB();tagInfo=localTagDB[mac];if(!tagInfo){setStatus(previewStatusEl,`Could not load hardware info for MAC ${mac}.`,'error',false);previewAreaEl.style.display='block';previewCanvasEl.style.display='none';return}}currentPreviewMac=mac;currentPreviewHwType=tagInfo.hwType;currentPreviewVersion=tagInfo.ver;currentPreviewTagTypeDef=await getTagTypeDefinition(currentPreviewHwType);if(!currentPreviewTagTypeDef||currentPreviewTagTypeDef.width===0){setStatus(previewStatusEl,`Could not load Tag Type Definition for hwType ${currentPreviewHwType}.`,'error',false);previewAreaEl.style.display='block';previewCanvasEl.style.display='none';return}previewAreaEl.style.display='block';setStatus(previewStatusEl,'Sending JSON... Waiting for image update status via WebSocket...','info',false);previewCanvasEl.style.display='none';if(offscreenCanvas)offscreenCtx.clearRect(0,0,offscreenCanvas.width,offscreenCanvas.height);else{const ctx=previewCanvasEl.getContext('2d');if(ctx)ctx.clearRect(0,0,previewCanvasEl.width,previewCanvasEl.height)}try{const formData=new FormData(jsonUploadFormEl);formData.set('mac',mac);const response=await fetch(jsonUploadFormEl.action,{method:'POST',body:formData});if(!response.ok){const errorText=await response.text();throw new Error(`JSON Upload Error: ${response.status} ${errorText}`)}setStatus(previewStatusEl,'JSON sent. Waiting for image update notification via WebSocket...','success', false);
+        }catch(error){console.error("Error JSON submission:",error);setStatus(previewStatusEl,`Error: ${error.message}`,'error',false);}});
+        
+        refreshTagDbBtnEl.addEventListener('click',()=>fetchTagDB());
+
+        async function loadAndRenderImage(path,mac,hwType,ver,tagTypeDef){
+            setStatus(previewStatusEl,`Loading image: ${path.substring(path.lastIndexOf('/')+1)}...`,'info', false);
+            
+            if(!tagTypeDef||tagTypeDef.width===0){setStatus(previewStatusEl,`Error: Tag Type Def for hwType '${hwType}' invalid.`,'error', false);return false}
+            
+            let offscreenDrawWidth = tagTypeDef.width; let offscreenDrawHeight = tagTypeDef.height;
+            const rotateBuffer = tagTypeDef.rotatebuffer || 0;
+            if (rotateBuffer % 2 !== 0) {[offscreenDrawWidth, offscreenDrawHeight] = [tagTypeDef.height, tagTypeDef.width];}
+
+            if (offscreenCanvas.width !== offscreenDrawWidth || offscreenCanvas.height !== offscreenDrawHeight) {
+                offscreenCanvas.width = offscreenDrawWidth; offscreenCanvas.height = offscreenDrawHeight;
+            }
+            offscreenCtx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+
+            try{const response=await fetch(path);
+                if(!response.ok){throw new Error(`Image not found or server error: ${response.status} on ${path}`);}
+                const buffer=await response.arrayBuffer();let data=new Uint8ClampedArray(buffer);
+                if(data.length===0){setStatus(previewStatusEl,"Received image data empty.",'error', true);previewCanvasEl.style.display='none';return false}
+                
+                let originalDataLength = data.length;
+                if(tagTypeDef.zlib>0&&ver>=tagTypeDef.zlib){
+                    let decompressedZlib = window.processZlib(new Uint8Array(data.buffer, data.byteOffset, data.byteLength));
+                    if (decompressedZlib && decompressedZlib.length > 0 && decompressedZlib.length !== originalDataLength) {
+                        data = new Uint8ClampedArray(decompressedZlib.buffer, decompressedZlib.byteOffset, decompressedZlib.byteLength);
+                    } else if (decompressedZlib && decompressedZlib.length === originalDataLength && originalDataLength > 0) { 
+                    } else { setStatus(previewStatusEl,"Zlib error: Empty result.",'error', true); return false; }
+                }
+
+                originalDataLength = data.length;
+                if(data.length>0&&tagTypeDef.g5>0&&ver>=tagTypeDef.g5){
+                    const headerSize=data[0];
+                    if (data.length > headerSize) {
+                        let bufw=(data[2]<<8)|data[1],bufh=(data[4]<<8)|data[3];
+                        if((bufw==tagTypeDef.width||bufw==tagTypeDef.height)&&(bufh==tagTypeDef.width||bufh==tagTypeDef.height)&&(data[5]<=3)){
+                            if(data[5]==2)bufh*=2; let g5Stream = data.subarray(headerSize);
+                            let decompressedG5 = window.processG5(g5Stream, bufw, bufh);
+                            if (decompressedG5 && decompressedG5.length > 0 && decompressedG5.length !== originalDataLength) {
+                                data = new Uint8ClampedArray(decompressedG5.buffer, decompressedG5.byteOffset, decompressedG5.byteLength);
+                            } else if (decompressedG5 && decompressedG5.length === originalDataLength && originalDataLength > 0) { 
+                            } else { setStatus(previewStatusEl,"G5 error: Empty result.",'error', true); return false; }
+                        } else {  }
+                    } else {  }
+                }
+
+                if(data.length===0){setStatus(previewStatusEl,"Image data empty post-decompression.",'error', true);previewCanvasEl.style.display='none';return false}
+                
+                const offscreenImageData = offscreenCtx.createImageData(offscreenCanvas.width, offscreenCanvas.height);
+                const bpp=tagTypeDef.bpp,colorTable=tagTypeDef.colortable;
+                if(!colorTable||colorTable.length===0){setStatus(previewStatusEl,`Error: No color table for hwType ${hwType}.`,'error', true);return false}
+                if(bpp==16){const is16Bit=data.length===offscreenCanvas.width*offscreenCanvas.height*2;for(let i=0;i<Math.min(offscreenCanvas.width*offscreenCanvas.height,data.length/(is16Bit?2:1));i++){const dIdx=is16Bit?i*2:i,rgb=is16Bit?(data[dIdx]<<8)|data[dIdx+1]:data[dIdx];offscreenImageData.data[i*4]=is16Bit?((rgb>>11)&31)<<3:(((rgb>>5)&7)<<5)*1.13;offscreenImageData.data[i*4+1]=is16Bit?((rgb>>5)&63)<<2:(((rgb>>2)&7)<<5)*1.13;offscreenImageData.data[i*4+2]=is16Bit?(rgb&31)<<3:((rgb&3)<<6)*1.3;offscreenImageData.data[i*4+3]=255}}
+                else if([3,4].includes(bpp)){let pxIdx=0,bitOff=0,totalPx=offscreenCanvas.width*offscreenCanvas.height;while(bitOff<data.length*8&&pxIdx<totalPx){let byteIdx=bitOff>>3,startBit=bitOff&7,pxVal=0;if(startBit+bpp<=8)pxVal=(data[byteIdx]>>(8-startBit-bpp))&((1<<bpp)-1);else{let bitsFirst=8-startBit;pxVal=(data[byteIdx]&((1<<bitsFirst)-1))<<(bpp-bitsFirst);if(byteIdx+1<data.length)pxVal|=data[byteIdx+1]>>(8-(bpp-bitsFirst))}if(pxVal<colorTable.length){let c=colorTable[pxVal];offscreenImageData.data[pxIdx*4]=c[0];offscreenImageData.data[pxIdx*4+1]=c[1];offscreenImageData.data[pxIdx*4+2]=c[2];offscreenImageData.data[pxIdx*4+3]=255}else{offscreenImageData.data[pxIdx*4]=255;offscreenImageData.data[pxIdx*4+1]=0;offscreenImageData.data[pxIdx*4+2]=0;offscreenImageData.data[pxIdx*4+3]=255}pxIdx++;bitOff+=bpp}}
+                else{const offsetR=(bpp>=2&&data.length>=(offscreenCanvas.width*offscreenCanvas.height/8)*2)?offscreenCanvas.width*offscreenCanvas.height/8:0;let pxVal=0,totalPx=offscreenCanvas.width*offscreenCanvas.height,currPxIdx=0;let bytesIter=offsetR?offsetR:Math.ceil(totalPx/8);for(let i=0;i<bytesIter&&i<data.length;i++){for(let j=0;j<8;j++){if(currPxIdx>=totalPx)break;if(offsetR&&(i+offsetR>=data.length))pxVal=(data[i]&(1<<(7-j)))?1:0;else if(offsetR)pxVal=((data[i]&(1<<(7-j)))?1:0)|(((data[i+offsetR]&(1<<(7-j)))?1:0)<<1);else pxVal=(data[i]&(1<<(7-j)))?1:0;if(pxVal<colorTable.length){offscreenImageData.data[currPxIdx*4]=colorTable[pxVal][0];offscreenImageData.data[currPxIdx*4+1]=colorTable[pxVal][1];offscreenImageData.data[currPxIdx*4+2]=colorTable[pxVal][2];offscreenImageData.data[currPxIdx*4+3]=255}else{offscreenImageData.data[currPxIdx*4]=0;offscreenImageData.data[currPxIdx*4+1]=255;offscreenImageData.data[currPxIdx*4+2]=0;offscreenImageData.data[currPxIdx*4+3]=255}currPxIdx++}if(currPxIdx>=totalPx)break}}
+                offscreenCtx.putImageData(offscreenImageData,0,0);
+                
+                previewCanvasEl.width = offscreenCanvas.width; 
+                previewCanvasEl.height = offscreenCanvas.height;
+                previewCanvasEl.style.transform = (rotateBuffer >= 2) ? 'rotate(180deg)' : 'none';
+                
+                const visibleCtx=previewCanvasEl.getContext('2d');
+                visibleCtx.drawImage(offscreenCanvas,0,0);
+                previewCanvasEl.style.display='block';
+
+                setStatus(previewStatusEl,`Image ${path.substring(path.lastIndexOf('/')+1)} rendered.`,'success', true);
+                return true;
+            }catch(error){
+                console.error("Error loading/rendering image:",error);
+                setStatus(previewStatusEl,`Error loading ${path.substring(path.lastIndexOf('/')+1)}: ${error.message}`,'error', true);
+                previewCanvasEl.style.display='none';
+                return false;
+            }
+        }
+        document.addEventListener('DOMContentLoaded',async()=>{loadCachedTagTypeDefinitions();await fetchTagDB();loadLastMacUsed(); connectWebSocket();});
+    </script>
+</body>
+</html>
\ No newline at end of file