diff --git a/dashboards/forza_composite/index.html b/dashboards/forza_composite/index.html index 3789f94..1080d19 100644 --- a/dashboards/forza_composite/index.html +++ b/dashboards/forza_composite/index.html @@ -22,7 +22,7 @@ html,body{width:100%;height:100%;overflow:hidden;background:#060a16;color:#fff; #speed-unit{font-size:min(6vw,44px);color:rgba(255,255,255,.2);letter-spacing:.25em;margin-top:4px} #gear-area{position:absolute;right:12%;top:50%;transform:translateY(-55%)} #gear-box{width:min(24vw,200px);height:min(24vw,200px);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(48vw,400px);font-weight:200;transition:.1s} +#gear-box span{font-size:min(96vw,800px);font-weight:200;transition:.1s} #pedals{position:absolute;right:4%;top:6%;width:16%} .pedal{margin-bottom:22px} .pedal .pl{font-size:min(4.8vw,34px);color:rgba(255,255,255,.25);margin-bottom:6px;letter-spacing:.15em} @@ -139,7 +139,7 @@ function draw(cur,max){ ctx.beginPath();ctx.moveTo(sx+mr*Math.cos(a),sy+mr*Math.sin(a));ctx.lineTo(sx+pr*Math.cos(a),sy+pr*Math.sin(a)); ctx.strokeStyle=r>=rl?'rgba(255,255,255,.15)':'rgba(255,255,255,.08)'; ctx.lineWidth=r%4000===0?2.5:1;ctx.stroke(); - if(r%4000===0){ctx.fillStyle='rgba(255,255,255,.22)';ctx.font=`${Math.max(26,W/19)|0}px 'NEXT ART',sans-serif`;ctx.textAlign='center';ctx.fillText(Math.round(r/1000),sx+(pr+22)*Math.cos(a),sy+(pr+22)*Math.sin(a)+5)} + if(r%4000===0){ctx.fillStyle='rgba(255,255,255,.22)';ctx.font=`${Math.max(26,W/19)|0}px 'NEXT ART',sans-serif`;ctx.textAlign='center';ctx.fillText(Math.round(r/1000),sx+(pr+40)*Math.cos(a),sy+(pr+40)*Math.sin(a)+5)} }else{ const p=pathPt(t); ctx.beginPath();ctx.moveTo(p.x,ey-gw/2-4);ctx.lineTo(p.x,ey+gw/2+4); @@ -151,9 +151,9 @@ function draw(cur,max){ // RPM number ctx.fillStyle='#fff';ctx.font=`200 ${Math.max(128,W/4.5)|0}px 'NEXT ART',sans-serif`;ctx.textAlign='center'; - ctx.fillText(Math.round(cur).toLocaleString(),sx,sy-210); + ctx.fillText(Math.round(cur).toLocaleString(),sx,sy-240); ctx.fillStyle='rgba(255,255,255,.12)';ctx.font=`${Math.max(32,W/17)|0}px 'NEXT ART',sans-serif`; - ctx.fillText('\u00d71000 rpm',sx,sy-150); + ctx.fillText('\u00d71000 rpm',sx,sy-170); // redline ctx.strokeStyle='rgba(255,40,30,.1)';ctx.lineWidth=1;ctx.setLineDash([3,6]);