From f2fccf09b438c98ed2f494573018bcf49243d7a1 Mon Sep 17 00:00:00 2001 From: AskaEth Date: Sat, 25 Jul 2026 17:02:01 +0800 Subject: [PATCH] style: enlarge all fonts and bars in composite dashboard --- dashboards/forza_composite/index.html | 71 ++++++++++++--------------- 1 file changed, 32 insertions(+), 39 deletions(-) diff --git a/dashboards/forza_composite/index.html b/dashboards/forza_composite/index.html index 0c8c7ba..8084339 100644 --- a/dashboards/forza_composite/index.html +++ b/dashboards/forza_composite/index.html @@ -19,24 +19,24 @@ html,body{width:100%;height:100%;overflow:hidden;background:#0a0a0f;color:#fff; #rpm-canvas{width:100%;height:100%} #speed-area{position:absolute;left:2%;bottom:6%;width:62%;text-align:center} -#speed-val{font-size:min(8vw,76px);font-weight:200;line-height:1;letter-spacing:-.02em} -#speed-unit{font-size:min(2vw,16px);color:rgba(255,255,255,.2);letter-spacing:.2em;margin-top:2px} +#speed-val{font-size:min(12vw,120px);font-weight:200;line-height:1;letter-spacing:-.02em} +#speed-unit{font-size:min(3vw,22px);color:rgba(255,255,255,.2);letter-spacing:.25em;margin-top:4px} -#gear-area{position:absolute;right:6%;top:50%;transform:translateY(-55%);text-align:center} -#gear-box{width:min(16vw,140px);height:min(16vw,140px);border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center} -#gear-box span{font-size:min(8vw,72px);font-weight:200;transition:.1s} +#gear-area{position:absolute;right:5%;top:50%;transform:translateY(-55%)} +#gear-box{width:min(20vw,170px);height:min(20vw,170px);border-radius:50%;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center} +#gear-box span{font-size:min(12vw,100px);font-weight:200;transition:.1s} -#pedals{position:absolute;right:4%;top:5%;width:18%} -.pedal{margin-bottom:12px} -.pedal .pl{font-size:min(1.3vw,10px);color:rgba(255,255,255,.2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.1em} -.pedal .pb{height:6px;background:rgba(255,255,255,.06);overflow:hidden} +#pedals{position:absolute;right:3%;top:5%;width:20%} +.pedal{margin-bottom:16px} +.pedal .pl{font-size:min(1.8vw,13px);color:rgba(255,255,255,.2);margin-bottom:5px;letter-spacing:.15em} +.pedal .pb{height:8px;background:rgba(255,255,255,.06);overflow:hidden} .pedal .pf{height:100%;transition:width .06s linear} #tf{background:#fff}#bf{background:rgba(255,255,255,.4)} -#status{position:absolute;right:4%;bottom:6%;width:18%} -.st{margin-bottom:10px} -.st .sl{font-size:min(1.2vw,10px);color:rgba(255,255,255,.2);margin-bottom:3px;display:flex;justify-content:space-between} -.st .sb{height:3px;background:rgba(255,255,255,.06);overflow:hidden} +#status{position:absolute;right:4%;bottom:6%;width:20%} +.st{margin-bottom:14px} +.st .sl{font-size:min(1.6vw,12px);color:rgba(255,255,255,.2);margin-bottom:4px;display:flex;justify-content:space-between} +.st .sb{height:4px;background:rgba(255,255,255,.06);overflow:hidden} .st .sf{height:100%;transition:width .3s} #ff{background:rgba(255,255,255,.3)}#wf{background:rgba(255,255,255,.15)} @@ -66,10 +66,9 @@ const M={aspect_ratio:"16:9",render_mode:"contain"};let GAME_ID=''; wF=document.getElementById('wf'),wV=document.getElementById('wv'); const proto=location.protocol==='https:'?'wss:':'ws:',wsUrl=proto+'//'+location.host+'/ws'; const ctx=canvas.getContext('2d'); - let ws,rt,lR=-1,lG=-999,ldP=-1; + let ws,rt,lR=-1,lG=-999; - const N=66, Na=Math.round(N*.5), Nl=N-Na; - const Ca=320, Cb=420, Cr=280, As=180, Ae=270; // arc: center(200,390), r=320, from 180°→270° + const N=66,Na=Math.round(N*.5),Nl=N-Na,Ca=320,Cb=420,Cr=280,As=180,Ae=270; function d2r(d){return d*Math.PI/180} function pr(r){if(!r||r==='auto')return null;const p=r.split(':');if(p.length===2)return +p[0]/+p[1]} @@ -93,44 +92,38 @@ const M={aspect_ratio:"16:9",render_mode:"contain"};let GAME_ID=''; function tp(i){ const W=canvas.width/devicePixelRatio,H=canvas.height/devicePixelRatio; const sx=Ca/640*W,sy=Cb/480*H,sr=Cr/640*W; - if(i=max*.85?'rgba(255,50,35,.95)':'rgba(255,255,255,.85)';ctx.fillRect(-tw/2,-th/2,tw,th);ctx.restore()} + const pc=Math.min(cur/max,1),on=Math.round(pc*N),rl=max*.85; + for(let i=0;i=rl?'rgba(255,50,35,.95)':'rgba(255,255,255,.85)';ctx.fillRect(-tw/2,-th/2,tw-gap,th);ctx.restore()} - // scale nums - ctx.fillStyle='rgba(255,255,255,.15)';ctx.font=`${Math.max(9,W/55)|0}px sans-serif`;ctx.textAlign='center'; + // scale nums - larger const sx=Ca/640*W,sy=Cb/480*H,sr=Cr/640*W; - for(let r=0;r<=max;r+=2000){const p=r/max,a=d2r(As+(Ae-As)*p);ctx.fillText(r/1000,sx+(sr-36)*Math.cos(a),sy+(sr-36)*Math.sin(a)+3)} + ctx.fillStyle='rgba(255,255,255,.2)';ctx.font=`${Math.max(12,W/42)|0}px sans-serif`;ctx.textAlign='center'; + for(let r=0;r<=max;r+=2000){const p=r/max,a=d2r(As+(Ae-As)*p);ctx.fillText(Math.round(r/1000),sx+(sr-42)*Math.cos(a),sy+(sr-42)*Math.sin(a)+4)} - // center text - ctx.fillStyle='#fff';ctx.font=`${Math.max(20,W/28)|0}px sans-serif`;ctx.textAlign='center'; - ctx.fillText(Math.round(cur).toLocaleString(),sx,sy-10); - ctx.fillStyle='rgba(255,255,255,.1)';ctx.font=`${Math.max(9,W/55)|0}px sans-serif`; - ctx.fillText('\u00d71000 rpm',sx,sy+8); + // RPM number - larger + ctx.fillStyle='#fff';ctx.font=`200 ${Math.max(32,W/18)|0}px sans-serif`;ctx.textAlign='center'; + ctx.fillText(Math.round(cur).toLocaleString(),sx,sy-12); + ctx.fillStyle='rgba(255,255,255,.12)';ctx.font=`${Math.max(12,W/44)|0}px sans-serif`; + ctx.fillText('\u00d71000 rpm',sx,sy+10); // redline ctx.strokeStyle='rgba(255,40,30,.1)';ctx.lineWidth=1;ctx.setLineDash([3,6]);ctx.beginPath(); - const ra=d2r(As+(Ae-As)*.85); - ctx.moveTo(sx,sy);ctx.lineTo(sx+sr*Math.cos(ra),sy+sr*Math.sin(ra));ctx.stroke();ctx.setLineDash([]) + const ra=d2r(As+(Ae-As)*.85);ctx.moveTo(sx,sy);ctx.lineTo(sx+sr*Math.cos(ra),sy+sr*Math.sin(ra));ctx.stroke();ctx.setLineDash([]) } function cn(){ws=new WebSocket(wsUrl);ws.onopen=()=>{if(rt){clearTimeout(rt);rt=null}}