php - add display options to the graph

html/can.js

@@ -15,6 +15,7 @@ function glwr(c,rat){c['ctx'].lineWidth*=rat}
 function gfz(c,x,y,ox,oy,t,co,a){gfs(c,co);c['ctx'].textAlign=a;c['ctx'].fillText(t,gchx(c,x)+ox,gchy(c,y)-oy)}
 function gbe(c,x,y){c['ctx'].beginPath();c['ctx'].moveTo(gchx(c,x),gchy(c,y))}
 function gln(c,x,y){c['ctx'].lineTo(gchx(c,x),gchy(c,y))}
+function gct(c,x1,y1,x2,y2,x3,y3){c['ctx'].bezierCurveTo(gchx(c,x1),gchy(c,y1),gchx(c,x2),gchy(c,y2),gchx(c,x3),gchy(c,y3))}
 function glm(c,x,y){c['ctx'].moveTo(gchx(c,x),gchy(c,y))}
 function gle(c){c['ctx'].closePath()}
 function gfl(c){c['ctx'].fill()}
@@ -26,16 +27,17 @@ gtso(c,xs,ys);
 gss(c,'black');glw(c,0.2);
 gbe(c,0,1);gln(c,0,0);gln(c,1,0);gst(c);
 glw(c,0.01);
-var hi=c['ctx'].measureText('M').width;
+var hi=c['ctx'].measureText('M').width, wi=c['ctx'].measureText('1').width;
-var wi=c['ctx'].measureText('1').width;
 for(var i=0;i<11;i++){var y=i/10.0;gbe(c,-0.01,y);gln(c,1,y);gst(c);var t=''+(((y1-y0)*i/10+y0).toFixed(2));gfz(c,0,y,-wi,0,t,'black','end')}
 gfz(c,gx0(c),0.55,wi,0,yt,'#0080ff','left');
 var m=Math.round(0.5+xn/20.0);
 var f=1;
-for(var i=0;i<xn;i++){var n=ar[nx+i];var x=ar[vx+i];var xo=(x-x0)/(x1-x0);if((i<(xn-1))&&(i%m)==0){gbe(c,xo,0);gln(c,xo,-0.01);gst(c);gfz(c,xo,0,0,-hi*1.5,n,'#00a050','center')}if(c['ok']==1){gbe(c,xo,0);gln(c,xo,1);gst(c)}}
+for(var i=0;i<xn;i++){var n=ar[nx+i];var x=ar[vx+i];var xo=(x-x0)/(x1-x0);if((i<(xn-1))&&(i%m)==0){gbe(c,xo,0);gln(c,xo,-0.01);gst(c);gfz(c,xo,0,0,-hi*1.5,n,'#00a050','center')}if(c['vlines']){gbe(c,xo,0);gln(c,xo,1);gst(c)}}
 glw(c,0.1);
 gss(c,'black');
-for(var i=0;i<xn;i++){var x=ar[vx+i];var y=ar[vy+i];var xo=(x-x0)/(x1-x0);var yo=(y-y0)/(y1-y0);if(f==1){gbe(c,xo,yo);f=0}else{gln(c,xo,yo)}}gst(c);
+if(c['smooth']){var xa=0,ya=0,xb=0,yb=0;
+for(var i=0;i<xn;i++){var x=ar[vx+i];var y=ar[vy+i];var xo=(x-x0)/(x1-x0);var yo=(y-y0)/(y1-y0);if(f==1){gbe(c,xo,yo);f=0;xb=xo;yb=yo}else{gct(c,(xa+xb)/2,(ya+yb)/2,xb,yb,(xb+xo)/2,(yb+yo)/2)}xa=xb;ya=yb;xb=xo;yb=yo}gct(c,(xa+xb)/2,(ya+yb)/2,xo,yo,xo,yo);gst(c);}
+else{for(var i=0;i<xn;i++){var x=ar[vx+i];var y=ar[vy+i];var xo=(x-x0)/(x1-x0);var yo=(y-y0)/(y1-y0);if(f==1){gbe(c,xo,yo);f=0}else{gln(c,xo,yo)}}gst(c);}
 glw(c,0.2);
 gss(c,'red');
 var y=(av-y0)/(y1-y0);
@@ -43,14 +45,15 @@ gbe(c,0,y);gln(c,1,y);gst(c);
 var t=''+av.toFixed(2);gfz(c,1,y,1,0,t,'red','left')
 }
 function sn(i,shi){if(shi.indexOf(' Shift ')<0){return ''+(i%10)}else{return shi.replace(/.* ([a-z])[a-z]*$/,'$1')}}
-function gc(c,ok){var div=document.getElementById('can0');while(div.firstChild){div.removeChild(div.firstChild)}c['can']=document.createElement('canvas');c['wx']=window.innerWidth;c['wy']=window.innerHeight;c['xm']=Math.round(c['wx']*0.9+0.5);c['ym']=Math.round(c['wy']*0.8+0.5);if(c['ym']>c['xm']){c['ym']=c['xm']}c['xo']=0.0;c['yo']=0.0;c['ctx']=c['can'].getContext('2d');c['ctx'].canvas.width=c['xm']+1;c['ctx'].canvas.height=c['ym']+1;div.appendChild(c['can']);c['ok']=ok}
+function gc(c){var div=document.getElementById('can0');while(div.firstChild){div.removeChild(div.firstChild)}c['can']=document.createElement('canvas');c['can'].id='can';c['wx']=window.innerWidth;c['wy']=window.innerHeight;c['xm']=Math.round(c['wx']*0.9+0.5);c['ym']=Math.round(c['wy']*0.8+0.5);if(c['ym']>c['xm']){c['ym']=c['xm']}c['xo']=0.0;c['yo']=0.0;c['ctx']=c['can'].getContext('2d');c['ctx'].canvas.width=c['xm']+1;c['ctx'].canvas.height=c['ym']+1;div.appendChild(c['can']);div=document.getElementById('smooth');c['smooth']=(div&&div.checked);div=document.getElementById('vlines');c['vlines']=(div&&div.checked);div=document.getElementById('zerob');c['zerob']=(div&&div.checked)}
-function gdrw(ok,d){var c={};gc(c,ok);
+function gdrw(d){var c={};gc(c);
 gfs(c,'white');gss(c,'#0000c0');glw(c,0.5);gbd(c);
-var rows=d['rows'];var ymin=-1;var ymax=0;var xmin=-1;var xmax=0;
+var rows=d['rows'],ymin=-1,ymax=0,xmin=-1,xmax=0;
 var tda=0;
 for(var i=0;i<rows;i++){var s=parseFloat(d['start:'+i]);var e=parseFloat(d['end:'+i]);var da=parseFloat(d['diffacc:'+i]);tda+=da;var ths=(da/(e-s))*Math.pow(2,32)/Math.pow(10,12);d['ths:'+i]=ths;if(ymin==-1||ymin>ths){ymin=ths}if(ths>ymax)ymax=ths;d['nx:'+i]=sn(i,d['shift:'+i]);if(xmin==-1||xmin>s){xmin=s}if(xmax<e){xmax=e}d['vx:'+i]=(s+e)/2.0};
 var tav=(tda/(xmax-xmin))*Math.pow(2,32)/Math.pow(10,12);
 var p5=(ymax-ymin)*0.05;ymax+=p5;ymin-=p5;if(ymin<0){ymin=0}
+if(c['zerob']){ymin=0}
 ggr(c,0.9,0.9,'THs',rows,xmin,xmax,ymin,ymax,d,'nx:','vx:','ths:',tav);
 }
-function dodrw(ok,d){if(hasCan()){gdrw(ok,sep(d))}}
+function dodrw(data){if(hasCan()){gdrw(sep(data))}}

pool/page.php

@@ -98,6 +98,7 @@ function pghead($script_marker, $name)
  $head .= "window.onpaint=jst();\n</script>\n";
 
  $head .= "<style type='text/css'>
+input {vertical-align: -2px;}
 form {display: inline-block;}
 html, body {height: 100%; font-family:Arial, Verdana, sans-serif; font-size:12pt; background-color:#eeffff; text-align: center; background-repeat: no-repeat; background-position: center;}
 .page {min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; position: relative;}

pool/page_usperf.php

@@ -6,19 +6,25 @@ function dousperf($data, $user)
 
  $iCrap = strpos($_SERVER['HTTP_USER_AGENT'],'iP');
  if ($iCrap)
-	$ok = 0;
+	$vlines = false;
  else
-	$ok = 1;
+	$vlines = true;
 
  $pg = '<h1>User Shift Performance</h1><br>';
  if ($ans['STATUS'] == 'ok' and $ans['DATA'] != '')
  {
+	$pg .= "<div><input type=checkbox id=vlines onclick='godrw()'";
+	if ($vlines)
+		$pg .= ' checked';
+	$pg .= ">verticle lines&nbsp;";
+	$pg .= "&nbsp;<input type=checkbox id=smooth onclick='godrw()'>smooth&nbsp;";
+	$pg .= "&nbsp;<input type=checkbox id=zerob onclick='godrw()'>zero based</div>";
 	$pg .= "<div id=can0><canvas id=can width=1 height=1>";
 	$pg .= "A graph will show here if your browser supports html5/canvas";
 	$pg .= "</canvas></div>\n";
 	$data = str_replace(array("\\","'"), array("\\\\","\\'"), $ans['DATA']);
 	$pg .= "<script src='/can.js'></script>\n";
-	$pg .= "<script type='text/javascript'>dodrw($ok,'$data');</script>\n";
+	$pg .= "<script type='text/javascript'>function godrw(){dodrw('$data')};godrw();</script>\n";
  }
 
  return $pg;