~inc:grfx1.inc~
<td width="50%">U: <span id="xdata1" style="font-weight:bold">?</span> V, I: <span id="xdata2" style="font-weight:bold">?</span> mA</td>
<td style="font-size:10pt">
<div id="sl"></div>Scale: <span id="toutid" style="font-weight:bold">?</span> ms per line</td></tr></table>
<canvas id="mycanvas1" width="620pt" height="150pt"></canvas>
<canvas id="mycanvas2" width="620pt" height="250pt"></canvas>
SampleRate: <span id="smprate" style="font-weight:bold">?</span> sps
</div>
<script src="/smoothie.js" type="text/javascript"></script>
<script src="/slider.js" type="text/javascript"></script>
<script type="text/javascript">
var line1 = new TimeSeries();
var line2 = new TimeSeries();
var oldtimeout = 20;
var smoothie1 = new SmoothieChart({ millisPerPixel: oldtimeout, maxValueScale:1.05,  interpolation:'linear', maxDataSetLength: 2000,
  grid: { strokeStyle:'rgb(75, 75, 75)', lineWidth: 1, millisPerLine: oldtimeout*50, verticalSections: 6 },
  labels: { fillStyle:'rgb(255, 255, 255)' }
});
var smoothie2 = new SmoothieChart({ millisPerPixel: oldtimeout, maxValueScale:1.05,  interpolation:'linear', maxDataSetLength: 2000,
  grid: { strokeStyle:'rgb(75, 75, 75)', lineWidth: 1, millisPerLine: oldtimeout*50, verticalSections: 6 },
  labels: { fillStyle:'rgb(255, 255, 255)' }
});
smoothie1.addTimeSeries(line1, { strokeStyle:'rgb(0, 255, 0)',  lineWidth: 2 });
smoothie2.addTimeSeries(line2, { strokeStyle:'rgb(255, 0, 255)', lineWidth: 2 });
smoothie1.streamTo(document.getElementById("mycanvas1"));
smoothie2.streamTo(document.getElementById("mycanvas2"));
var mysl1 = new slider('sl', 333, 1, 200, 0);
var ttout = 20;
function NewTimeScale(t) {
	if(oldtimeout != t) {
		oldtimeout = t;
		smoothie1.options.grid.millisPerLine = t*50;
		smoothie1.options.millisPerPixel = t;
		smoothie2.options.grid.millisPerLine = t*50;
		smoothie2.options.millisPerPixel = t
		ttout = t*2;
		if(ttout < 2) ttout = 2;
		else if(ttout > 250) ttout = 250;
		document.getElementById('toutid').innerHTML = t*50; //+'/'+ttout  
}	}
mysl1.setValue(oldtimeout);
var wstt;
function wsSendMsg() {
	ws.send('ina219'); 
	wstt = setTimeout(wsSendMsg, 1000);
}
var smprate = 1000;
var sttim;
var fsmpr = 0;
var oldblkid = 0;
var rdnextflg = false;
var cur_idx = 0;
var sig = 10;
function onMessage(evt) {
	if(event.data instanceof ArrayBuffer) {
		clearTimeout(wstt);
		var wordarray = new Int16Array(event.data);
		if(wordarray.length > 2) {
			var blksz = wordarray[0]; 
			if(wordarray.length == blksz*2 + 2) {
				var blkid = wordarray[1] & 0xFFFF;
				if(rdnextflg) {
					cur_idx += (blkid - oldblkid) & 0xFFFF;
				} else rdnextflg = true;
				oldblkid = blkid + blksz;
				if(!fsmpr) { 
					sttim = new Date().getTime();
					fsmpr = 1;
					setInterval(wsSmpRate, 1000);
				} else {
					u = 0; s = 0; cnt = 0;
					tt = new Date().getTime();
					for (var i=2; i<wordarray.length; i+=2) {
					    u += wordarray[i];
						s += wordarray[i+1];
						cnt++;
					}
					cur_idx += cnt;
					u = u*0.0005/cnt;
					s = 0.15 + s*0.1/cnt;
					line1.append(new Date().getTime(), u, true);
					document.getElementById('xdata1').innerHTML = u.toFixed(3);
					line2.append(new Date().getTime(), s, true);
					document.getElementById('xdata2').innerHTML = s.toFixed(2);
		}	}	}
		wstt = setTimeout(wsSendMsg, ttout);
}	}	
function wsSmpRate() {
	smprate = (new Date().getTime() - sttim) * 1000 / cur_idx;
	document.getElementById('smprate').innerHTML = smprate.toFixed(1);
}
function onOpen(evt) {
	ctim = new Date().getTime();
	ws.binaryType = 'arraybuffer';
	document.getElementById('xdata1').style.color = 'rgb(0, 155, 100)';
	document.getElementById('xdata2').style.color = 'rgb(155, 0, 100)';
	ws.send('user=rtl871x:supervisor'); 
	ws.send('sys_debug=0'); 
	wstt = setTimeout(wsSendMsg, ttout);
}
var wsUri = "ws://"+window.location.host.toString()+"/web.cgi";
function RunWebSocket() {
	ws = new WebSocket(wsUri);
	ws.onopen = function(evt) {onOpen(evt)};
	ws.onmessage = function(evt) {onMessage(evt)};
}
RunWebSocket();
</script>
~inc:footer.inc~
</body></html>