mirror of
https://git.vladimir.cc/vladimir/ewsdr.git
synced 2026-08-25 17:27:32 +00:00
Match web S-meter to desktop style
This commit is contained in:
+28
-26
@@ -67,7 +67,7 @@ begin
|
||||
'input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#5a9ab0;border:1px solid #7ac;cursor:pointer}' +
|
||||
'.vol-ic{font-size:13px;cursor:pointer;color:#7ab;user-select:none;line-height:1}' +
|
||||
'.row2{height:74px;display:flex;align-items:center;gap:6px;background:#0c0c0c}' +
|
||||
'#smeter{height:64px;width:340px;flex-shrink:0;border:1px solid #333;border-radius:2px;display:block}' +
|
||||
'#smeter{height:64px;width:340px;flex-shrink:0;border:0;border-radius:0;display:block}' +
|
||||
'.vfo-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:5px}' +
|
||||
'.vbtn{width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;cursor:pointer;border-radius:3px;color:#888;border:1px solid #444;background:linear-gradient(180deg,#2a2a2a,#1e1e1e);padding:0}' +
|
||||
'.vbtn.active{color:#7fff7f;border-color:#3d7a3d;background:linear-gradient(180deg,#1e3e1e,#142814)}' +
|
||||
@@ -110,7 +110,7 @@ begin
|
||||
'button{height:30px;}select{height:30px;}' +
|
||||
// VFO-строка: стекаем smeter / vfo-mid / right-g каждый на своей строке
|
||||
'.row2{height:auto;flex-wrap:wrap;padding:4px;gap:4px;}' +
|
||||
'#smeter{width:100%;height:40px;}' +
|
||||
'#smeter{width:100%;height:64px;}' +
|
||||
'.vfo-mid{width:100%;display:grid;grid-template-columns:24px minmax(0,1fr) auto 24px minmax(0,1fr);gap:3px;align-items:center;}' +
|
||||
'#vBtnA{grid-column:1;grid-row:1;}#vDispA{grid-column:2;grid-row:1;}' +
|
||||
'.swap-g{grid-column:3;grid-row:1;justify-content:center;gap:2px;}' +
|
||||
@@ -418,41 +418,41 @@ begin
|
||||
'const pA=Math.min(MAX_A,PEAK_BASE+Math.abs(pTarget-smPeak)*ACCEL);' +
|
||||
'const mA=Math.min(MAX_A,MIN_BASE+Math.abs(mTarget-smMin)*ACCEL);' +
|
||||
'smPeak+=pA*(pTarget-smPeak);smMin+=mA*(mTarget-smMin);' +
|
||||
'const BX=62,BW=Math.max(10,w-66);' +
|
||||
'const YT=Math.round(h*36/100),YB=Math.round(h*66/100);' +
|
||||
'let sLbl;if(dbm>=-73){let over=Math.round(dbm+73);if(over<5)sLbl="S9";else{over=Math.floor((over+5)/10)*10;if(over===0)over=10;sLbl="S9+"+over;}}' +
|
||||
'else if(dbm<=-121){sLbl="S1";}else{sLbl="S1";for(let i=1;i<=8;i++){if(dbm>=(-121+(i-1)*6))sLbl="S"+i;}}' +
|
||||
'mctx.font="bold 12px Courier New";const lblDbm=dbm.toFixed(1),twDbm=mctx.measureText(lblDbm).width,maxTwDbm=mctx.measureText("-120.0").width;' +
|
||||
'mctx.font="8px Courier New";const labelNeed=Math.max(maxTwDbm+2+mctx.measureText("dBm ").width,mctx.measureText("S9+60").width)+8;' +
|
||||
'const leftInfo=Math.max(62,labelNeed+4),BX=leftInfo,BW=Math.max(10,w-leftInfo-8),lblZoneL=BX-labelNeed;' +
|
||||
'const YT=Math.round(h*44/100),YB=Math.round(h*58/100),barH=YB-YT;' +
|
||||
'const S9X=dbToX(-73,BX,BW),OVRX=dbToX(-43,BX,BW);' +
|
||||
'mctx.fillStyle="#0c0c0c";mctx.fillRect(0,0,w,h);' +
|
||||
'mctx.fillStyle="#061006";mctx.fillRect(BX,YT,S9X-BX,YB-YT);' +
|
||||
'mctx.fillStyle="#0A1006";mctx.fillRect(S9X,YT,OVRX-S9X,YB-YT);' +
|
||||
'mctx.fillStyle="#060A10";mctx.fillRect(OVRX,YT,BX+BW-OVRX,YB-YT);' +
|
||||
'mctx.clearRect(0,0,w,h);' +
|
||||
'mctx.fillStyle="#001F09";mctx.fillRect(BX,YT,S9X-BX,barH);' +
|
||||
'mctx.fillStyle="#001F09";mctx.fillRect(S9X,YT,OVRX-S9X,barH);' +
|
||||
'mctx.fillStyle="#281509";mctx.fillRect(OVRX,YT,BX+BW-OVRX,barH);' +
|
||||
'const barEnd=dbToX(dbm,BX,BW);' +
|
||||
'if(barEnd>BX){mctx.fillStyle="#091F00";mctx.fillRect(BX,YT+1,Math.min(barEnd,S9X)-BX,YB-YT-2);' +
|
||||
'if(barEnd>S9X){mctx.fillStyle="#091528";mctx.fillRect(S9X,YT+1,barEnd-S9X,YB-YT-2);}}' +
|
||||
'if(barEnd>BX){if(barEnd<=S9X){mctx.fillStyle="#001F09";mctx.fillRect(BX,YT+1,barEnd-BX,barH-2);}' +
|
||||
'else{mctx.fillStyle="#001F09";mctx.fillRect(BX,YT+1,S9X-BX,barH-2);mctx.fillStyle="#281509";mctx.fillRect(S9X,YT+1,barEnd-S9X,barH-2);}}' +
|
||||
'const px1=Math.max(BX+1,Math.min(dbToX(smMin,BX,BW),dbToX(smPeak,BX,BW)));' +
|
||||
'const px2=Math.min(BX+BW-1,Math.max(dbToX(smMin,BX,BW),dbToX(smPeak,BX,BW)));' +
|
||||
'if(px2>px1){mctx.fillStyle="rgba(255,255,255,0.25)";mctx.fillRect(px1,YT+1,px2-px1,YB-YT-2);}' +
|
||||
'if(px2>px1){mctx.save();mctx.globalCompositeOperation="lighter";mctx.fillStyle="rgba(64,64,64,1)";mctx.fillRect(px1,YT+1,px2-px1,barH-2);mctx.restore();}' +
|
||||
'const pX=dbToX(smPeak,BX,BW);' +
|
||||
'mctx.strokeStyle="#F8F8FF";mctx.lineWidth=2;mctx.beginPath();mctx.moveTo(pX,YT);mctx.lineTo(pX,YB);mctx.stroke();' +
|
||||
'mctx.lineWidth=1;mctx.strokeStyle="#303028";mctx.strokeRect(BX,YT,BW,YB-YT);' +
|
||||
'mctx.font="10px Courier New";' +
|
||||
'if(pX>BX&&pX<=BX+BW){mctx.strokeStyle="#FFF8F8";mctx.lineWidth=2;mctx.beginPath();mctx.moveTo(pX,YT-barH);mctx.lineTo(pX,YB+barH);mctx.stroke();}' +
|
||||
'mctx.lineWidth=1;mctx.strokeStyle="#283030";mctx.strokeRect(lblZoneL,YT,BX+BW-lblZoneL,barH);' +
|
||||
'mctx.strokeStyle="#404040";mctx.beginPath();mctx.moveTo(BX,YT+1);mctx.lineTo(BX,YB-1);mctx.stroke();' +
|
||||
'mctx.font="8px Courier New";' +
|
||||
'for(let i=0;i<DBM_MARKS.length;i++){const x=dbToX(DBM_MARKS[i],BX,BW);' +
|
||||
'mctx.strokeStyle="#DCE0E0";mctx.lineWidth=1;mctx.beginPath();mctx.moveTo(x,YT-TICK_LONG);mctx.lineTo(x,YT-1);mctx.stroke();' +
|
||||
'const t=DBM_LABELS[i],tw=mctx.measureText(t).width;' +
|
||||
'mctx.fillStyle="#DCDCD0";mctx.fillText(t,Math.round(x-tw/2),YT-TICK_LONG-1);}' +
|
||||
'mctx.fillStyle="#DCDCD0";mctx.fillText(t,Math.round(x-tw/2),YT-TICK_LONG-3);}' +
|
||||
'for(let d=-125;d<-13;d+=5){const x=dbToX(d,BX,BW);' +
|
||||
'mctx.strokeStyle="#708070";mctx.lineWidth=1;mctx.beginPath();mctx.moveTo(x,YT-TICK_MED);mctx.lineTo(x,YT-1);mctx.stroke();}' +
|
||||
'for(let i=0;i<S_MARKS_DBM.length;i++){const x=dbToX(S_MARKS_DBM[i],BX,BW),ov=S_MARKS_DBM[i]>=-73;' +
|
||||
'mctx.strokeStyle=ov?"#70A090":"#708070";mctx.lineWidth=1;mctx.beginPath();mctx.moveTo(x,YB+1);mctx.lineTo(x,YB+TICK_LONG);mctx.stroke();' +
|
||||
'mctx.strokeStyle=ov?"#90A070":"#708070";mctx.lineWidth=1;mctx.beginPath();mctx.moveTo(x,YB+1);mctx.lineTo(x,YB+TICK_LONG);mctx.stroke();' +
|
||||
'const t=S_MARKS_LBL[i],tw=mctx.measureText(t).width;' +
|
||||
'mctx.fillStyle=ov?"#90D090":"#E0E0E0";mctx.fillText(t,Math.round(x-tw/2),YB+TICK_LONG+9);}' +
|
||||
'mctx.fillStyle="#DCD896";mctx.font="bold 12px Courier New";' +
|
||||
'mctx.fillText(dbm.toFixed(1).padStart(6," "),1,12);' +
|
||||
'mctx.fillStyle="#707050";mctx.font="10px Courier New";mctx.fillText("dBm",1,YT-2);' +
|
||||
'let sLbl;' +
|
||||
'if(dbm>=-73){let over=Math.round(dbm+73);if(over<5)sLbl="S9";else{over=Math.round((over+5)/10)*10;if(over===0)over=10;sLbl="S9+"+over;}}' +
|
||||
'else if(dbm<=-121){sLbl="S1";}' +
|
||||
'else{sLbl="S1";for(let i=1;i<=8;i++){if(dbm>=(-121+(i-1)*6))sLbl="S"+i;}}' +
|
||||
'mctx.fillStyle="#F0F0F0";mctx.font="bold 12px Courier New";mctx.fillText(sLbl,1,YB+TICK_LONG+10);}' +
|
||||
'mctx.fillStyle=ov?"#90D090":"#E0E0E0";mctx.fillText(t,Math.round(x-tw/2),YB+TICK_LONG+11);}' +
|
||||
'mctx.font="bold 12px Courier New";const th12=12;mctx.fillStyle="#DCD896";mctx.fillText(lblDbm,lblZoneL+4,YT-th12-2);' +
|
||||
'mctx.font="8px Courier New";mctx.fillStyle="#90A070";mctx.fillText("dBm",lblZoneL+4+twDbm+2,YT-10);' +
|
||||
'mctx.fillStyle="#F0F0F0";mctx.font="bold 12px Courier New";mctx.fillText(sLbl,lblZoneL+4,YB+14);}' +
|
||||
|
||||
// pendingCmds: команды в пути — не перезаписываем эти поля из server state
|
||||
'var pendingCmds={};' +
|
||||
@@ -555,7 +555,9 @@ begin
|
||||
'const vxw=hzToX(avf2,w);wctx.strokeStyle="#60ff80";wctx.lineWidth=1;wctx.beginPath();wctx.moveTo(vxw,0);wctx.lineTo(vxw,h);wctx.stroke();drawMk(wctx,w,h);}' +
|
||||
|
||||
'function rcv(cv){const dpr=Math.max(1,devicePixelRatio||1),w=cv.clientWidth|0,h=cv.clientHeight|0;if(cv.width!==(w*dpr|0)||cv.height!==(h*dpr|0)){cv.width=w*dpr;cv.height=h*dpr;cv.getContext("2d").setTransform(dpr,0,0,dpr,0,0);}}' +
|
||||
'function resize(){rcv(specCv);rcv(wfCv);rcv(rulerCv);const sw=smCv.clientWidth|0,sh=smCv.clientHeight|0;if(smCv.width!==sw||smCv.height!==sh){smCv.width=sw;smCv.height=sh;}if(wfBuf.width!==wfCv.clientWidth||wfBuf.height!==wfCv.clientHeight){wfBuf.width=wfCv.clientWidth;wfBuf.height=wfCv.clientHeight;wfBCtx.fillStyle="#000";wfBCtx.fillRect(0,0,wfBuf.width,wfBuf.height);}}' +
|
||||
'function resize(){rcv(specCv);rcv(wfCv);rcv(rulerCv);const dpr=Math.max(1,devicePixelRatio||1),sw=smCv.clientWidth|0,sh=smCv.clientHeight|0;' +
|
||||
'if(smCv.width!==(sw*dpr|0)||smCv.height!==(sh*dpr|0)){smCv.width=sw*dpr|0;smCv.height=sh*dpr|0;mctx.setTransform(dpr,0,0,dpr,0,0);}' +
|
||||
'if(wfBuf.width!==wfCv.clientWidth||wfBuf.height!==wfCv.clientHeight){wfBuf.width=wfCv.clientWidth;wfBuf.height=wfCv.clientHeight;wfBCtx.fillStyle="#000";wfBCtx.fillRect(0,0,wfBuf.width,wfBuf.height);}}' +
|
||||
|
||||
'function tuneStep(e){const s=+q("stepSel").value||100;if(e.ctrlKey&&e.shiftKey)return 1000000;if(e.ctrlKey)return 1000;if(e.shiftKey)return 10;return s;}' +
|
||||
'function activeVfoHz(){return activeVfo==="A"?vfoA:vfoB;}' +
|
||||
|
||||
Reference in New Issue
Block a user