load pixel forge tools from json file, improved tools list, bugfixes

platformio.ini

@@ -431,6 +431,7 @@ build_flags = ${common.build_flags} ${esp8266.build_flags} -D WLED_RELEASE_NAME=
   ; -D WLED_USE_REAL_MATH ;; may fix wrong sunset/sunrise times, at the cost of 7064 bytes FLASH and 975 bytes RAM
   -D WLED_DISABLE_PARTICLESYSTEM1D
   -D WLED_DISABLE_PARTICLESYSTEM2D
+  -D WLED_DISABLE_PIXELFORGE
 lib_deps = ${esp8266.lib_deps}
 
 [env:esp01_1m_full_compat]
@@ -441,6 +442,7 @@ platform_packages = ${esp8266.platform_packages_compat}
 build_flags = ${common.build_flags} ${esp8266.build_flags_compat} -D WLED_RELEASE_NAME=\"ESP01_compat\" -D WLED_DISABLE_OTA #-DWLED_DISABLE_2D
   -D WLED_DISABLE_PARTICLESYSTEM1D
   -D WLED_DISABLE_PARTICLESYSTEM2D
+  -D WLED_DISABLE_PIXELFORGE
 
 [env:esp01_1m_full_160]
 extends = env:esp01_1m_full
@@ -449,6 +451,7 @@ build_flags = ${common.build_flags} ${esp8266.build_flags} -D WLED_RELEASE_NAME=
   ; -D WLED_USE_REAL_MATH ;; may fix wrong sunset/sunrise times, at the cost of 7064 bytes FLASH and 975 bytes RAM
   -D WLED_DISABLE_PARTICLESYSTEM1D
   -D WLED_DISABLE_PARTICLESYSTEM2D
+  -D WLED_DISABLE_PIXELFORGE
 custom_usermods = audioreactive
 
 [env:esp32dev]

wled00/data/common.js

@@ -126,6 +126,10 @@ function getLoc() {
 	}
 }
 function getURL(path) { return (loc ? locproto + "//" + locip : "") + path; }
+// HTML entity escaper – use on any remote/user-supplied text inserted into innerHTML
+function esc(s)     { return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
+// URL sanitizer – blocks javascript: and data: URIs, use for externally supplied URLs for some basic safety
+function safeUrl(u) { return /^https?:\/\//.test(u) ? u : '#'; }
 function B()          { window.open(getURL("/settings"),"_self"); }
 var timeout;
 function showToast(text, error = false) {

wled00/data/pixelforge/pixelforge.htm

@@ -391,30 +391,9 @@ <h3>Available Tokens</h3>
 	<div id="ti1D" style="display:none;">Not available in 1D</div>
 </div>
 <div id="oTab" class="tabc">
-	<div class="ed active">
-		<div>
-			<h3>Pixel Paint</h3>
-			<div><small>Interactive painting tool</small></div>
-			<button class="btn" id="t1" style="display:none"></button>
-		</div>
-	</div>
-	<hr>
-	<div class="ed active">
-		<div>
-			<h3>Video Lab</h3>
-			<div><small>Stream video and generate animated GIFs (beta)</small></div>
-			<button class="btn" id="t2" style="display:none"></button>
-		</div>
-	</div>
-	<hr>
-	<div class="ed active">
-		<div>
-			<h3>PIXEL MAGIC Tool</h3>
-			<div><small>Legacy pixel art editor</small></div>
-			<button class="btn" id="t3" style="display:none"></button>
-		</div>
+	<div id="tools">
+		<div style="padding:20px;text-align:center;">Loading tools...</div>
 	</div>
-	<hr>
 </div>
 
 <div style="margin:20px 0">
@@ -442,6 +421,12 @@ <h3>PIXEL MAGIC Tool</h3>
 let iL=[]; // image list
 let gF=null,gI=null,aT=null;
 let fL; // file list
+let pT = []; // local tools list from JSON
+let wv = [0, 0]; // wled version [major, minor], updated in fsMem(), used to check tool compatibility
+const remoteURL = 'https://dedehai.github.io/pftools.json'; // Change to your actual repo
+const toolsjson = 'pftools.json';
+// note: the pftools.json must use major.minor for tool versions (e.g. 0.95 or 1.1), otherwise the update check won't work
+//       also the code assumes that the tool url points to a gz file
 
 // load external resources in sequence to avoid 503 errors if heap is low, repeats indefinitely until loaded
 (function loadFiles() {
@@ -459,21 +444,19 @@ <h3>PIXEL MAGIC Tool</h3>
 	getLoc();
 	// create off screen canvas
 	rv = cE('canvas');
-	rvc = rv.getContext('2d',{willReadFrequently:true}); 
+	rvc = rv.getContext('2d',{willReadFrequently:true});
 	rv.width = cv.width; rv.height = cv.height;
-
+	tabSw(localStorage.tab||'img'); // switch to last open tab or image tab by default
 	await segLoad(); // load available segments
 	await flU(); // update file list
-	toolChk('pixelpaint.htm','t1'); // update buttons of additional tools
-	toolChk('videolab.htm','t2');
-	toolChk('pxmagic.htm','t3');
-	await fsMem(); // show file system memory info
+	await fsMem(); // update & show file system memory info, also updates wled version (wv)
+	await loadTools(); // load additional tools list from pftools.json
 }
 
 /* update file list */
 async function flU(){
 	try{
-		const r = await fetch(getURL('/edit?list=/'));
+		const r = await fetch(getURL('/edit?list=/&cb=' + Date.now()));
 		fL = await r.json();
 	}catch(e){console.error(e);}
 }
@@ -576,14 +559,14 @@ <h3>PIXEL MAGIC Tool</h3>
 		await new Promise(res=>{
 			const im=new Image();
 			im.onload=()=>{
-				it.style.backgroundImage=`url(${url}?cb=${Date.now()})`;
+				it.style.backgroundImage=`url('${encodeURI(url)}?cb=${Date.now()}')`;
 				if(!isGif) it.style.border="5px solid red";
 				it.classList.remove('loading'); res();
 				const kb=Math.round(f.size/1024);
 				it.title=`${name}\n${im.width}x${im.height}\n${kb} KB`;
 			};
 			im.onerror=()=>{it.classList.remove('loading');it.style.background='#222';res();};
-			im.src=url+'?cb='+Date.now();
+			im.src=encodeURI(url)+'?cb='+Date.now();
 		});
 	}
 }
@@ -597,45 +580,130 @@ <h3>PIXEL MAGIC Tool</h3>
 	//}
 }
 
-/* additional tools: check if present, install if not */
-function toolChk(file, btnId) {
+// check for tool compatibility with current wled version (wled_min requirement in pftools.json)
+function compTool(t) {
+	if (!t.wled_min || !wv) return true;
+	const m = t.wled_min.match(/\d+/g);
+	const a = wv, b = [m[0]|0, m[1]|0];
+	return a[0] > b[0] || (a[0] === b[0] && a[1] >= b[1]);
+}
+
+/* additional tools: loaded from pftools.json, store json locally for offline use*/
+async function loadTools() {
 	try {
-		const has = fL.some(f => f.name.includes(file));
-		const b = getId(btnId);
-		b.style.display = 'block';
-		b.style.margin = '10px auto';
-		if (has) {
-			b.textContent = 'Open';
-			b.onclick = () => window.open(getURL(`/${file}`), '_blank'); // open tool: remove gz to not trigger download
-		} else {
-			b.textContent = 'Download';
-			b.onclick = async () => {
-				const fileGz = file + '.gz'; // use gz version
-				const url = `https://dedehai.github.io/${fileGz}`; // always download gz version
-				if (!confirm(`Download ${url}?`)) return;
-				try {
-					const f = await fetch(url);
-					if (!f.ok) throw new Error("Download failed " + f.status);
-					const blob = await f.blob(), fd = new FormData();
-					fd.append("data", blob, fileGz);
-					const u = await fetch(getURL("/upload"), { method: "POST", body: fd });
-					alert(u.ok ? "Tool installed!" : "Upload failed");
-					await flU(); // update file list
-					toolChk(file, btnId); // re-check and update button (must pass non-gz file name)
-				} catch (e) { alert("Error " + e.message); }
-			};
+		const res = await fetch(getURL('/' + toolsjson + '?cb=' + Date.now())); // load local tools list
+		pT = res.ok ? await res.json() : [];
+	} catch (e) {}
+
+	renderTools(); // render whatever we have
+
+	try {
+		const rT = await (await fetch(remoteURL + '?cb=' + Date.now())).json();
+		let changed = false;
+		rT.forEach(rt => {
+			let lt = pT.find(t => t.id === rt.id);
+			if (!lt) {
+				pT.push(rt); // new tool available
+				changed = true;
+			} else {
+				// check version
+				if (isNewer(rt.ver, lt.ver)) {
+					lt.pending = rt; // mark update as pending, keep old info until user clicks update button
+					changed = true;
+				}
+			}
+		});
+		if (changed) {
+			await saveToolsjson(); // save updated json
+			renderTools();
 		}
-	} catch (e) { console.error(e); }
+	} catch(e){console.error(e);}
+}
+
+async function saveToolsjson() {
+	const fd = new FormData();
+	fd.append("data", new Blob([JSON.stringify(pT)], {type:'application/json'}), toolsjson);
+	await fetch(getURL("/upload"), { method: "POST", body: fd });
 }
 
-/* fs/mem info */
+// tool versions must be in format major.minor (e.g. 0.95 or 1.1)
+function isNewer(vN, vO) {
+	return parseFloat(vN) > parseFloat(vO);
+}
+
+function renderTools() {
+	let h = '';
+	pT.forEach(t => {
+		const installed = fL.some(f => f.name.includes(t.file)); // check if tool file exists (either .htm or .htm.gz)
+		const target = (installed && t.pending) ? t.pending : t; // if update pending and tool is installed, show update info
+		const compatible = compTool(target); // check if compatible with current wled version
+		h += `<div class="ed active" style="margin-bottom:10px; border-radius:20px; text-align:left;">
+			<div style="display:flex; justify-content:space-between;">
+				<h3>${esc(t.name)} <small style="font-size:10px">v${esc(t.ver)}</small></h3>
+				${installed ? `<button class="sml" style="height:40px;" onclick="deleteFile('${esc(t.file)}')">✕</button>` : ''}
+			</div>
+			${t.desc}
+			<div style="font-size:10px; color:#888;">
+				by ${esc(t.author)} | <a href="${safeUrl(t.source)}" target="_blank">${safeUrl(t.source)}</a>
+			</div>
+			${
+				compatible ?
+					`<div class="crw">
+						${installed ?
+							  `<button class="btn" onclick="window.location.href=getURL('/${esc(t.file)}')">Open</button>`
+							: `<button class="btn" onclick="insT('${esc(t.id)}')">Install</button>`
+						}
+						${t.pending && installed ?
+							  `<button class="btn" style="color:#fb2" onclick="insT('${esc(t.id)}')">Update v${esc(t.pending.ver)}</button>`
+							: ''
+						}
+				   </div>`
+				: `<div style="color:#f44;font-size:12px;"> Requires WLED ${esc(target.wled_min)} </div>`
+			}
+		</div>`;
+	});
+	getId('tools').innerHTML = h || 'No tools found (offline?).';
+}
+
+// install or update tool
+async function insT(id) {
+	const t = pT.find(x => x.id == id);
+	ovShow();
+	try {
+		const src = t.pending || t;
+		const f = await fetch(src.url); // url in json must be pointing to a gz file
+		if (!f.ok) throw new Error("Download failed " + f.status);
+		const fd = new FormData();
+		fd.append("data", await f.blob(), src.file + '.gz'); // always use gz for file name (source MUST be gz)
+		const u = await fetch(getURL("/upload"), { method: "POST", body: fd });
+		alert(u.ok ? "Tool installed!" : "Install failed");
+		if (u.ok && t.pending) {
+			// save and remove update info after successful update
+			Object.assign(t, t.pending);
+    	delete t.pending;
+		}
+		await saveToolsjson();
+		await flU(); // refresh file list
+		renderTools();
+	} catch(e) { alert("Error " + e.message); }
+	fsMem(); // refresh memory info after upload
+	ovHide();
+}
+
+/* fs/mem info & wled version */
 async function fsMem(){
 	try{
 		const r=await fetch(getURL('/json/info'));
 		const info=await r.json();
-		if(info&&info.fs){
-			getId("mem").textContent=`by @dedehai | Memory: ${info.fs.u} KB / ${info.fs.t} KB`;
-			getId("mem").style.display="block";
+		if (info){
+			if (info.fs) {
+				getId("mem").textContent=`by @dedehai | Memory: ${info.fs.u} KB / ${info.fs.t} KB`;
+				getId("mem").style.display="block";
+			}
+			if (info.ver) {
+				const m = info.ver.match(/\d+/g); // extract all numbers from version string (e.g. "16.1.0-beta" → [16, 1])
+				wv = [parseInt(m[0]) || 0, parseInt(m[1]) || 0];
+			}
 		}
 	}catch(e){console.error(e);}
 }
@@ -1107,6 +1175,7 @@ <h3>PIXEL MAGIC Tool</h3>
 	} catch (e) {
 		msg(`Error: ${e.message}`, 'err');
 	} finally {
+		fsMem(); // refresh memory info after upload
 		ovHide();
 	}
 };
@@ -1143,7 +1212,7 @@ <h3>PIXEL MAGIC Tool</h3>
 	m.style.left=x+'px'; m.style.top=y+'px';
 	m.innerHTML=`
 		<button onclick="imgDl()">Download</button>
-		<button class="danger" onclick="imgDel()">Delete</button>`;
+		<button class="danger" onclick="deleteFile(sI.name)">Delete</button>`;
 	d.body.appendChild(m);
 	setTimeout(()=>{
 		const h=e=>{
@@ -1163,16 +1232,26 @@ <h3>PIXEL MAGIC Tool</h3>
 	}catch(e){msg('Download failed','err');}
 	menuClose();
 }
-async function imgDel(){
-	if(!confirm(`Delete ${sI.name}?`))return;
+
+async function deleteFile(name){
+	name = name.replace('/',''); // remove leading slash if present (just in case)
+	if (fL.some(f => f.name.replace('/','') === `${name}.gz`))
+		name += '.gz'; // if .gz version of file exists, delete that (handles tools which are stored gzipped on device)
+	if(!confirm(`Delete ${name}?`))return;
 	ovShow();
 	try{
-		const r = await fetch(getURL(`/edit?func=delete&path=/${sI.name}`));
-		if(r.ok){ msg('Deleted'); imgRm(sI.name); }
+		const r = await fetch(getURL(`/edit?func=delete&path=/${name}`));
+		if(r.ok){ 
+			msg('Deleted');
+			imgRm(name); // remove image from grid (if this was not an image, this does nothing)
+		}
 		else msg('Delete failed! File in use?','err');
 	}catch(e){msg('Delete failed','err');}
 	finally{ovHide();}
-	menuClose();
+	fsMem(); 			 // refresh memory info after delete
+	menuClose();   // close menu (used for image delete button)
+	await flU();   // update file list
+	renderTools(); // re-render tools list
 }
 
 /* tab select and additional tools */
@@ -1186,7 +1265,6 @@ <h3>PIXEL MAGIC Tool</h3>
 'Img,Txt,Oth'.split(',').forEach((s,i)=>{
 	getId('t'+s).onclick=()=>tabSw(['img','txt','oth'][i]);
 });
-tabSw(localStorage.tab||'img');
 
 /* tokens insert */
 function txtIns(el,t){

wled00/wled_server.cpp

@@ -221,6 +221,7 @@ static void handleUpload(AsyncWebServerRequest *request, const String& filename,
       request->send(200, FPSTR(CONTENT_TYPE_PLAIN), F("File Uploaded!"));
     }
     cacheInvalidate++;
+    updateFSInfo(); // refresh memory usage info
   }
 }
 
@@ -310,6 +311,7 @@ static void createEditHandler() {
         request->send(500, FPSTR(CONTENT_TYPE_PLAIN), F("Delete failed"));
       else
         request->send(200, FPSTR(CONTENT_TYPE_PLAIN), F("File deleted"));
+      updateFSInfo(); // refresh memory usage info
       return;
     }
 
@@ -634,6 +636,14 @@ void initServer()
   server.on(_pixelforge_htm, HTTP_GET, [](AsyncWebServerRequest *request) {
     handleStaticContent(request, FPSTR(_pixelforge_htm), 200, FPSTR(CONTENT_TYPE_HTML), PAGE_pixelforge, PAGE_pixelforge_length);
   });
+  #else
+  server.on("/pixelforge.htm", HTTP_GET, [](AsyncWebServerRequest *request) {
+    request->send(200, "text/html",
+      F("<!DOCTYPE html><html><head><title>PixelForge</title></head>"
+      "<style>body{background:#000;color:#fff;font-family:sans-serif;display:flex;justify-content:center;}</style>"
+      "<body><h2>Sorry, PixelForge is not supported in this build.</h2></body></html>")
+    );
+  });
   #endif
 #endif