math - exponential gauge calculation in JavaScript -
i have little javascript ajax script gets speed on progress in kbps or whatever - let's mb/s. , want add gauge shows speed graphically.
i have image containing gauge design , pointer. pointer default points @ top - lowest value -120deg , highest 120deg. wouldn't nice if has 1mb connection, need add exponential calculation.
here values...
- 0-1mb: -120deg -> -90deg
- 1-5mb: -90deg -> -60deg
- 5-10mb: -60deg -> -30deg
- 10-20mb: -30deg -> 0deg
- 20-30mb: 0deg -> 30deg
- 30-50mb: 30deg -> 60deg
- 50-75mb: 60deg -> 90deg
- 75-100mb: 90deg -> 120deg
i totally don't know how start calculation.
the animation done css
-webkit-transform:rotate(xdeg) and update on
xhr.onprogress the calculation speed is:
kb/s=((e.loaded/((new date()-start)/1000))/1024).tofixed(2), mb/s=(d/1024*8).tofixed(2) when have mb/s want set gauge deg.
how can achieve these values?
here not-completely-working variant. wrote while think it's not proper way.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>gauge</title> <style> img{position:fixed;top:100px;left:100px;} </style> <script> var b=[1,5,10,20,30,50,75,100,150], deg=30; get=function(a){ var l=b.length while(l--){ if(b[l]<=a&&a<b[l+1]){ rotation=((l*deg)+(deg/(b[l+1]-b[l])*(a-b[l]))); pointer=document.getelementsbytagname('img')[1] pointer.style['-webkit-transform']='rotate('+(rotation-120)+'deg)'; console.log(rotation) } } } </script> </head> <body> <input onchange="get(this.value)"> <img src="gauge1.png"><img src="pointer.png"> </body> </html> it not work values under 5 , on 150.
edit here working code need
<!doctype html> <html> <head> <meta charset="utf-8"> <title>gauge</title> <style> img{position:fixed;top:100px;left:100px;} .pointer{-webkit-transform:rotate(-120deg);} input{width:100%;} </style> <script> var pointer, get=function(a){ var b=[0,1,5,10,20,30,50,75,100],l=b.length,c=30,x=-120; if(a>=b[l-1]){ x=120; }else{ while(l--){ if(b[l]<a&&a<=b[l+1]){ x=(c*l-120)+c*((a-b[l])/(b[l+1]-b[l])); break; } } } pointer.style['-webkit-transform']='rotate('+x+'deg)'; } window.onload=function(){ pointer=document.getelementsbyclassname('pointer')[0]; } </script> </head> <body> <img src="gauge1.png"><img class="pointer" src="pointer.png"> <input type="range" min="0" max="100" value="0" onchange="get(this.value)" step="0.1"> </body> </html>
formulation of exponential function fitting specifications
let d degrees in [-120 , 120].
let f(d) download speed in mb/s, f(d) = * rated + b.
let min , max download speeds corresponding -120 degrees , 120 degrees, respectively.
then have following 2 equations.
min = f(-120) = * rate-120 + b
max = f(120) = * rate120 + b
we can solve , b follows.
max - min = * (rate120 - rate-120)
=> = (max - min) / (rate120 - rate-120)
=> b = min - * rate-120
now choose min, max, , rate. inverse of function s(d) use map speed in mb/s value in degrees.
d = f-1(s) = lograte((s - b)/a)
magic formula ready use
if choose min = 0.1 mb/s = 100 kb/s, max = 100 mb/s, , rate = 1.011662, f-1(20) = 0 well. function becomes this:
d = f-1(s) = log1.011662 ((s + 6.488681037) / 26.48810966)
and looks this:
notice 3 key points passed through:
- (0.1 mb/s, -120 degrees)
- (20 mb/s, 0 degrees)
- (100 mb/s, 120 degrees)
in javascript, formula looks this:
d = math.log((s + 6.488681037) / 26.48810966) / math.log(1.011662) where s speed in mb/s , d degrees should use.
Comments
Post a Comment