render raw preview files within the file editor

ESP32_AP-Flasher/wwwroot/edit.html

@@ -195,6 +195,8 @@
 		}
 	</style>
 	<script>
+		const $ = document.querySelector.bind(document);
+
 		if (typeof XMLHttpRequest === "undefined") {
 			XMLHttpRequest = function () {
 				try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) { }
@@ -403,8 +405,81 @@
 
 				edfname.value = filename + "." + ext;
 				ge("editor").style.display = "none";
+
 				preview.style.display = "block";
-				preview.innerHTML = '<img src="/edit?edit=' + path + '&_cb=' + Date.now() + '" style="max-width:100%; max-height:100%; margin:auto; display:block;" />';
+				if (ext == "raw" || ext == "pending") {
+					let storedTagTypes = localStorage.getItem("tagTypes");
+					let tagTypes = JSON.parse(storedTagTypes);
+					let mac = name.substring(name.lastIndexOf('/') + 1);
+					let targetDiv = null;
+					if (window.opener && !window.opener.closed) {
+						targetDiv = window.opener.document.querySelector(`div[data-mac="${mac}"]`);
+					} else {
+						preview.innerHTML = `<p class=\"tvu\">I cannot reach the window with the tag overview. Close this window, and open it again from the tag overview.</p>`;
+						return;
+					}
+					if (targetDiv) {
+						preview.innerHTML = `<p class=\"tvu\">Preview image for tag ${mac}<p><p><canvas id=\"previewimg\"></p>`;
+						var hwtype = targetDiv.getAttribute("data-hwtype");
+						console.log("data-hwtype:", hwtype);
+
+						const canvas = $('#previewimg');
+						canvas.style.display = 'block';
+						fetch(path)
+							.then(response => response.arrayBuffer())
+							.then(buffer => {
+								[canvas.width, canvas.height] = [tagTypes[hwtype].width, tagTypes[hwtype].height] || [0, 0];
+								if (tagTypes[hwtype].rotatebuffer) [canvas.width, canvas.height] = [canvas.height, canvas.width];
+								const ctx = canvas.getContext('2d');
+								const imageData = ctx.createImageData(canvas.width, canvas.height);
+								const data = new Uint8ClampedArray(buffer);
+								if (data.length == 0) canvas.style.display = 'none';
+
+								if (tagTypes[hwtype].bpp == 16) {
+									const is16Bit = data.length == tagTypes[hwtype].width * tagTypes[hwtype].height * 2;
+									for (let i = 0; i < min(tagTypes[hwtype].width * tagTypes[hwtype].height, data.length); i++) {
+										const dataIndex = is16Bit ? i * 2 : i;
+										const rgb = is16Bit ? (data[dataIndex] << 8) | data[dataIndex + 1] : data[dataIndex];
+
+										imageData.data[i * 4] = is16Bit ? ((rgb >> 11) & 0x1F) << 3 : (((rgb >> 5) & 0x07) << 5) * 1.13;
+										imageData.data[i * 4 + 1] = is16Bit ? ((rgb >> 5) & 0x3F) << 2 : (((rgb >> 2) & 0x07) << 5) * 1.13;
+										imageData.data[i * 4 + 2] = is16Bit ? (rgb & 0x1F) << 3 : ((rgb & 0x03) << 6) * 1.3;
+										imageData.data[i * 4 + 3] = 255;
+									}
+
+								} else {
+
+									const offsetRed = (data.length >= (canvas.width * canvas.height / 8) * 2) ? canvas.width * canvas.height / 8 : 0;
+									let pixelValue = 0;
+									const colorTable = tagTypes[hwtype].colortable;
+									for (let i = 0; i < data.length; i++) {
+										for (let j = 0; j < 8; j++) {
+											const pixelIndex = i * 8 + j;
+											if (offsetRed) {
+												pixelValue = ((data[i] & (1 << (7 - j))) ? 1 : 0) | (((data[i + offsetRed] & (1 << (7 - j))) ? 1 : 0) << 1);
+											} else {
+												pixelValue = ((data[i] & (1 << (7 - j))) ? 1 : 0);
+											}
+											imageData.data[pixelIndex * 4] = colorTable[pixelValue][0];
+											imageData.data[pixelIndex * 4 + 1] = colorTable[pixelValue][1];
+											imageData.data[pixelIndex * 4 + 2] = colorTable[pixelValue][2];
+											imageData.data[pixelIndex * 4 + 3] = 255;
+										}
+									}
+								}
+
+								ctx.putImageData(imageData, 0, 0);
+							})
+							.catch(error => {
+								console.log(error);
+							});
+						
+					} else {
+						preview.innerHTML = `<p class=\"tvu\">No current tag found with this mac. You can safely delete this file.</p>`;
+					}
+				} else {
+					preview.innerHTML = '<img src="/edit?edit=' + path + '&_cb=' + Date.now() + '" style="max-width:100%; max-height:100%; margin:auto; display:block;" />';
+				}
 			}
 
 			function fillFileMenu(el, path) {
@@ -596,6 +671,7 @@
 						case "gif":
 						case "bmp":
 						case "pending":
+						case "raw":
 							return true;
 					}
 				}

ESP32_AP-Flasher/wwwroot/main.js

@@ -943,6 +943,7 @@ async function getTagtype(hwtype) {
 			busy: false
 		};
 		tagTypes[hwtype] = data;
+		localStorage.setItem("tagTypes", JSON.stringify(tagTypes));
 		getTagtypeBusy = false;
 		return data;