From 12c17bf6f4f443795eb9a3fe2bd4f07dfc5cf51c Mon Sep 17 00:00:00 2001
From: dawie <david@sudologix.co.za>
Date: Fri, 30 Jan 2026 18:53:32 +0200
Subject: [PATCH] Add visual curve editor web page

Features:
- Interactive SVG graph with draggable curve points
- Live GPU temperature display with indicator on graph
- Real-time fan speed monitoring
- Mode toggle between Fixed and Curve modes
- Point table for precise value entry
- Touch support for mobile devices
- Minified CSS for smaller file size
---
 usermods/GPU_Fan_Controller/data/gpu-fan.htm | 345 +++++++++++++++++++
 1 file changed, 345 insertions(+)
 create mode 100644 usermods/GPU_Fan_Controller/data/gpu-fan.htm
diff --git a/usermods/GPU_Fan_Controller/data/gpu-fan.htm b/usermods/GPU_Fan_Controller/data/gpu-fan.htm
new file mode 100644
index 00000000..4a916c69
--- /dev/null
+++ b/usermods/GPU_Fan_Controller/data/gpu-fan.htm
@@ -0,0 +1,345 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>GPU Fan Controller</title>
+<style>
+:root{--bg:#1a1a2e;--card:#16213e;--acc:#0f3460;--hl:#e94560;--txt:#eee;--dim:#888;--ok:#4ade80;--warn:#fbbf24;--err:#ef4444}
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:system-ui,sans-serif;background:var(--bg);color:var(--txt);padding:20px}
+.c{max-width:800px;margin:0 auto}
+h1{text-align:center;margin-bottom:20px;color:var(--hl)}
+.card{background:var(--card);border-radius:12px;padding:20px;margin-bottom:20px}
+.card h2{font-size:1em;margin-bottom:15px;color:var(--dim);text-transform:uppercase}
+.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px}
+.stat{text-align:center;padding:15px;background:var(--acc);border-radius:8px}
+.val{font-size:2em;font-weight:bold}
+.lbl{font-size:.8em;color:var(--dim);margin-top:5px}
+.t-val{color:var(--warn)}.s-val{color:var(--ok)}.m-val{color:var(--hl)}
+.graph{position:relative;width:100%;padding-top:60%;background:var(--acc);border-radius:8px;overflow:hidden}
+svg{position:absolute;top:0;left:0;width:100%;height:100%}
+.gline{stroke:#fff3;stroke-width:1}
+.albl{fill:var(--dim);font-size:10px}
+.curve{fill:none;stroke:var(--hl);stroke-width:3}
+.area{fill:url(#grad);opacity:.3}
+.point{fill:var(--hl);stroke:#fff;stroke-width:2;cursor:grab}
+.point:hover{r:10;fill:#fff}
+.tline{stroke:var(--warn);stroke-width:2;stroke-dasharray:5,5}
+.tdot{fill:var(--warn);stroke:#fff;stroke-width:2}
+.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}
+.btn{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-weight:500}
+.btn-p{background:var(--hl);color:#fff}
+.btn-s{background:var(--acc);color:var(--txt)}
+.btn-g{background:var(--ok);color:#000}
+.mode{display:flex;background:var(--acc);border-radius:8px;padding:4px;margin-bottom:15px}
+.mode button{flex:1;padding:10px;border:none;background:0;color:var(--dim);cursor:pointer;border-radius:6px}
+.mode button.on{background:var(--hl);color:#fff}
+.slider{padding:15px 0}
+.slider.hide{display:none}
+.slider input{width:100%;height:8px;-webkit-appearance:none;background:var(--acc);border-radius:4px}
+.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;background:var(--hl);border-radius:50%;cursor:pointer}
+.slider .v{text-align:center;font-size:1.5em;margin-top:10px}
+table{width:100%;margin-top:15px;border-collapse:collapse}
+th,td{padding:8px;text-align:center;border-bottom:1px solid var(--acc)}
+table input{width:60px;padding:5px;border:1px solid var(--acc);border-radius:4px;background:var(--bg);color:var(--txt);text-align:center}
+.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);padding:12px 24px;background:var(--ok);color:#000;border-radius:8px;opacity:0;transition:opacity .3s}
+.toast.show{opacity:1}
+.toast.err{background:var(--err);color:#fff}
+.back{display:inline-block;margin-bottom:15px;color:var(--dim);text-decoration:none}
+</style>
+</head>
+<body>
+<div class="c">
+<a href="/" class="back">← Back to WLED</a>
+<h1>🌀 GPU Fan Controller</h1>
+
+<div class="card">
+<h2>Live Status</h2>
+<div class="grid">
+<div class="stat"><div class="val t-val" id="temp">--</div><div class="lbl">GPU Temp (°C)</div></div>
+<div class="stat"><div class="val s-val" id="speed">--</div><div class="lbl">Fan Speed (%)</div></div>
+<div class="stat"><div class="val m-val" id="mode">--</div><div class="lbl">Mode</div></div>
+<div class="stat"><div class="val" id="status" style="color:var(--ok)">●</div><div class="lbl" id="statTxt">Connected</div></div>
+</div>
+</div>
+
+<div class="card">
+<h2>Control Mode</h2>
+<div class="mode">
+<button id="btnF" onclick="setMode(0)">Fixed Speed</button>
+<button id="btnC" class="on" onclick="setMode(1)">Temperature Curve</button>
+</div>
+
+<div class="slider hide" id="fixedCtrl">
+<input type="range" id="fixedSlider" min="0" max="100" value="50" oninput="setFixed(this.value)">
+<div class="v"><span id="fixedVal">50</span>%</div>
+</div>
+
+<div id="curveCtrl">
+<div class="graph">
+<svg id="svg" viewBox="0 0 400 240">
+<defs><linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%">
+<stop offset="0%" style="stop-color:#e94560;stop-opacity:.5"/>
+<stop offset="100%" style="stop-color:#e94560;stop-opacity:0"/>
+</linearGradient></defs>
+<g id="grid"></g>
+<g id="labels"></g>
+<line id="tempLine" class="tline" x1="0" y1="0" x2="0" y2="240"/>
+<path id="area" class="area"/>
+<path id="curve" class="curve"/>
+<circle id="tempDot" class="tdot" r="6" cx="0" cy="0"/>
+<g id="points"></g>
+</svg>
+</div>
+
+<table>
+<thead><tr><th>Point</th><th>Temp (°C)</th><th>Speed (%)</th></tr></thead>
+<tbody id="table"></tbody>
+</table>
+
+<div class="btns">
+<button class="btn btn-s" onclick="addPt()">+ Add</button>
+<button class="btn btn-s" onclick="remPt()">- Remove</button>
+<button class="btn btn-s" onclick="reset()">Reset</button>
+</div>
+</div>
+</div>
+
+<div class="card">
+<div class="btns" style="justify-content:center">
+<button class="btn btn-g" onclick="save()" style="padding:15px 40px;font-size:1.1em">💾 Save</button>
+</div>
+</div>
+</div>
+
+<div class="toast" id="toast"></div>
+
+<script>
+const PAD={l:45,r:20,t:20,b:30},W=400,H=240;
+const GW=W-PAD.l-PAD.r,GH=H-PAD.t-PAD.b;
+const TMIN=20,TMAX=100,SMIN=0,SMAX=100;
+
+let pts=[{t:30,s:30},{t:50,s:50},{t:70,s:75},{t:85,s:100}];
+let curMode=1,fixSpd=50,curTemp=25,drag=null;
+
+document.addEventListener('DOMContentLoaded',()=>{
+  drawGrid();loadCfg();draw();
+  setInterval(poll,2000);
+});
+
+function tX(t){return PAD.l+((t-TMIN)/(TMAX-TMIN))*GW}
+function sY(s){return PAD.t+(1-(s-SMIN)/(SMAX-SMIN))*GH}
+function xT(x){return TMIN+((x-PAD.l)/GW)*(TMAX-TMIN)}
+function yS(y){return SMAX-((y-PAD.t)/GH)*(SMAX-SMIN)}
+
+function drawGrid(){
+  let g=document.getElementById('grid'),l=document.getElementById('labels');
+  g.innerHTML='';l.innerHTML='';
+  for(let t=20;t<=100;t+=20){
+    let x=tX(t);
+    g.innerHTML+=`<line class="gline" x1="${x}" y1="${PAD.t}" x2="${x}" y2="${H-PAD.b}"/>`;
+    l.innerHTML+=`<text class="albl" x="${x}" y="${H-10}" text-anchor="middle">${t}°</text>`;
+  }
+  for(let s=0;s<=100;s+=25){
+    let y=sY(s);
+    g.innerHTML+=`<line class="gline" x1="${PAD.l}" y1="${y}" x2="${W-PAD.r}" y2="${y}"/>`;
+    l.innerHTML+=`<text class="albl" x="${PAD.l-8}" y="${y+4}" text-anchor="end">${s}%</text>`;
+  }
+}
+
+function draw(){
+  pts.sort((a,b)=>a.t-b.t);
+  let path='',area='';
+  pts.forEach((p,i)=>{
+    let x=tX(p.t),y=sY(p.s);
+    path+=(i?'L':'M')+x+','+y+' ';
+  });
+  if(pts.length){
+    area=path+`L${tX(pts[pts.length-1].t)},${sY(0)} L${tX(pts[0].t)},${sY(0)} Z`;
+  }
+  document.getElementById('curve').setAttribute('d',path);
+  document.getElementById('area').setAttribute('d',area);
+  
+  let pg=document.getElementById('points');pg.innerHTML='';
+  pts.forEach((p,i)=>{
+    let c=document.createElementNS('http://www.w3.org/2000/svg','circle');
+    c.setAttribute('class','point');
+    c.setAttribute('cx',tX(p.t));
+    c.setAttribute('cy',sY(p.s));
+    c.setAttribute('r',8);
+    c.setAttribute('data-i',i);
+    c.onmousedown=startDrag;
+    c.ontouchstart=startDrag;
+    pg.appendChild(c);
+  });
+  
+  drawTable();
+  drawTemp();
+}
+
+function drawTable(){
+  let tb=document.getElementById('table');tb.innerHTML='';
+  pts.forEach((p,i)=>{
+    tb.innerHTML+=`<tr><td>${i+1}</td>
+    <td><input type="number" value="${p.t}" min="0" max="100" onchange="setPt(${i},'t',this.value)"></td>
+    <td><input type="number" value="${p.s}" min="0" max="100" onchange="setPt(${i},'s',this.value)"></td></tr>`;
+  });
+}
+
+function setPt(i,k,v){pts[i][k]=parseInt(v);draw()}
+
+function drawTemp(){
+  let x=tX(curTemp);
+  document.getElementById('tempLine').setAttribute('x1',x);
+  document.getElementById('tempLine').setAttribute('x2',x);
+  let s=calcSpeed(curTemp);
+  document.getElementById('tempDot').setAttribute('cx',x);
+  document.getElementById('tempDot').setAttribute('cy',sY(s));
+}
+
+function calcSpeed(t){
+  if(pts.length<2)return 50;
+  if(t<=pts[0].t)return pts[0].s;
+  if(t>=pts[pts.length-1].t)return pts[pts.length-1].s;
+  for(let i=0;i<pts.length-1;i++){
+    if(t>=pts[i].t&&t<=pts[i+1].t){
+      let r=(t-pts[i].t)/(pts[i+1].t-pts[i].t);
+      return pts[i].s+r*(pts[i+1].s-pts[i].s);
+    }
+  }
+  return 50;
+}
+
+function startDrag(e){
+  e.preventDefault();
+  drag=parseInt(e.target.getAttribute('data-i'));
+  document.onmousemove=doDrag;
+  document.onmouseup=endDrag;
+  document.ontouchmove=doDrag;
+  document.ontouchend=endDrag;
+}
+
+function doDrag(e){
+  if(drag===null)return;
+  e.preventDefault();
+  let svg=document.getElementById('svg');
+  let rect=svg.getBoundingClientRect();
+  let cx=e.touches?e.touches[0].clientX:e.clientX;
+  let cy=e.touches?e.touches[0].clientY:e.clientY;
+  let x=(cx-rect.left)*(W/rect.width);
+  let y=(cy-rect.top)*(H/rect.height);
+  let t=Math.round(xT(x)),s=Math.round(yS(y));
+  pts[drag].t=Math.max(TMIN,Math.min(TMAX,t));
+  pts[drag].s=Math.max(SMIN,Math.min(SMAX,s));
+  draw();
+}
+
+function endDrag(){
+  drag=null;
+  document.onmousemove=null;
+  document.onmouseup=null;
+  document.ontouchmove=null;
+  document.ontouchend=null;
+}
+
+function addPt(){
+  if(pts.length>=5){toast('Max 5 points',1);return}
+  let mt=(pts[0].t+pts[pts.length-1].t)/2;
+  pts.push({t:Math.round(mt),s:Math.round(calcSpeed(mt))});
+  draw();
+}
+
+function remPt(){
+  if(pts.length<=2){toast('Min 2 points',1);return}
+  pts.pop();draw();
+}
+
+function reset(){
+  pts=[{t:30,s:30},{t:50,s:50},{t:70,s:75},{t:85,s:100}];
+  draw();
+}
+
+function setMode(m){
+  curMode=m;
+  document.getElementById('btnF').classList.toggle('on',m===0);
+  document.getElementById('btnC').classList.toggle('on',m===1);
+  document.getElementById('fixedCtrl').classList.toggle('hide',m!==0);
+  document.getElementById('curveCtrl').style.display=m===0?'none':'block';
+}
+
+function setFixed(v){
+  fixSpd=parseInt(v);
+  document.getElementById('fixedVal').textContent=fixSpd;
+  fetch('/json/state',{method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({'GPU-Fan':{speed:fixSpd}})});
+}
+
+async function loadCfg(){
+  try{
+    let r=await fetch('/cfg.json');
+    let cfg=await r.json();
+    let f=cfg.um?.['GPU-Fan'];
+    if(f){
+      curMode=f.mode||1;
+      fixSpd=f['fixed-speed']||50;
+      pts=[];
+      let n=f['curve-points']||4;
+      for(let i=1;i<=n&&i<=5;i++){
+        let t=f['curve-t'+i],s=f['curve-s'+i];
+        if(t!==undefined&&s!==undefined)pts.push({t,s});
+      }
+      if(pts.length<2)reset();
+      setMode(curMode);
+      document.getElementById('fixedSlider').value=fixSpd;
+      document.getElementById('fixedVal').textContent=fixSpd;
+      draw();
+    }
+  }catch(e){console.error(e)}
+}
+
+async function poll(){
+  try{
+    let r=await fetch('/json/info');
+    let info=await r.json();
+    let u=info.u;
+    if(u){
+      if(u['GPU Temp']){curTemp=parseFloat(u['GPU Temp'][0])||25;document.getElementById('temp').textContent=curTemp.toFixed(1)}
+      if(u['Fan Speed'])document.getElementById('speed').textContent=parseInt(u['Fan Speed'][0])||0;
+      if(u['Fan Mode'])document.getElementById('mode').textContent=u['Fan Mode'][0];
+    }
+    drawTemp();
+    document.getElementById('status').style.color='var(--ok)';
+    document.getElementById('statTxt').textContent='Connected';
+  }catch(e){
+    document.getElementById('status').style.color='var(--err)';
+    document.getElementById('statTxt').textContent='Disconnected';
+  }
+}
+
+async function save(){
+  pts.sort((a,b)=>a.t-b.t);
+  let cfg={'GPU-Fan':{enabled:true,mode:curMode,'fixed-speed':fixSpd,'curve-points':pts.length}};
+  for(let i=0;i<5;i++){
+    cfg['GPU-Fan']['curve-t'+(i+1)]=i<pts.length?pts[i].t:50;
+    cfg['GPU-Fan']['curve-s'+(i+1)]=i<pts.length?pts[i].s:50;
+  }
+  try{
+    let r=await fetch('/cfg.json',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({um:cfg})});
+    if(r.ok){
+      toast('Saved!');
+      fetch('/json/state',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({'GPU-Fan':{mode:curMode}})});
+    }else toast('Failed',1);
+  }catch(e){toast('Error: '+e.message,1)}
+}
+
+function toast(msg,err){
+  let t=document.getElementById('toast');
+  t.textContent=msg;
+  t.classList.toggle('err',!!err);
+  t.classList.add('show');
+  setTimeout(()=>t.classList.remove('show'),3000);
+}
+</script>
+</body>
+</html>
