mirror of
https://github.com/pvvx/RTL00_WEB.git
synced 2025-07-30 11:51:04 +00:00
update
This commit is contained in:
pvvx
parent
1c773d745a
commit
2bc9cc61b3
22 changed files with 1244 additions and 108 deletions
ExampleHTM/dygraph
119
ExampleHTM/dygraph/ina2.css
Normal file
119
ExampleHTM/dygraph/ina2.css
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/**
|
||||
* Default styles for the dygraphs charting library.
|
||||
*/
|
||||
|
||||
.dygraph-legend {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
width: 250px; /* labelsDivWidth */
|
||||
/*
|
||||
dygraphs determines these based on the presence of chart labels.
|
||||
It might make more sense to create a wrapper div around the chart proper.
|
||||
top: 0px;
|
||||
right: 2px;
|
||||
*/
|
||||
background: white;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* styles for a solid line in the legend */
|
||||
.dygraph-legend-line {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
bottom: .5ex;
|
||||
padding-left: 1em;
|
||||
height: 1px;
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-style: solid;
|
||||
/* border-bottom-color is set based on the series color */
|
||||
}
|
||||
|
||||
/* styles for a dashed line in the legend, e.g. when strokePattern is set */
|
||||
.dygraph-legend-dash {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
bottom: .5ex;
|
||||
height: 1px;
|
||||
border-bottom-width: 2px;
|
||||
border-bottom-style: solid;
|
||||
/* border-bottom-color is set based on the series color */
|
||||
/* margin-right is set based on the stroke pattern */
|
||||
/* padding-left is set based on the stroke pattern */
|
||||
}
|
||||
|
||||
.dygraph-roller {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* This class is shared by all annotations, including those with icons */
|
||||
.dygraph-annotation {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* This class only applies to annotations without icons */
|
||||
/* Old class name: .dygraphDefaultAnnotation */
|
||||
.dygraph-default-annotation {
|
||||
border: 1px solid black;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dygraph-axis-label {
|
||||
/* position: absolute; */
|
||||
/* font-size: 14px; */
|
||||
z-index: 10;
|
||||
line-height: normal;
|
||||
overflow: hidden;
|
||||
color: black; /* replaces old axisLabelColor option */
|
||||
}
|
||||
|
||||
.dygraph-axis-label-x {
|
||||
}
|
||||
|
||||
.dygraph-axis-label-y {
|
||||
color: rgb(51,204,204);
|
||||
}
|
||||
|
||||
.dygraph-axis-label-y2 {
|
||||
color: rgb(255,100,100);
|
||||
}
|
||||
|
||||
.dygraph-title {
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
/* font-size: based on titleHeight option */
|
||||
}
|
||||
|
||||
.dygraph-xlabel {
|
||||
text-align: center;
|
||||
/* font-size: based on xLabelHeight option */
|
||||
}
|
||||
|
||||
/* For y-axis label */
|
||||
.dygraph-label-rotate-left {
|
||||
text-align: center;
|
||||
/* See http://caniuse.com/#feat=transforms2d */
|
||||
transform: rotate(90deg);
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
}
|
||||
|
||||
/* For y2-axis label */
|
||||
.dygraph-label-rotate-right {
|
||||
text-align: center;
|
||||
/* See http://caniuse.com/#feat=transforms2d */
|
||||
transform: rotate(-90deg);
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
}
|
||||
178
ExampleHTM/dygraph/ws_adcs.htm
Normal file
178
ExampleHTM/dygraph/ws_adcs.htm
Normal file
|
|
@ -0,0 +1,178 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="ina2.css">
|
||||
<title>Get ADC data</title>
|
||||
<script type="text/javascript" src="dygraph.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="height: auto; width: auto; text-align: center;">
|
||||
<div id="div_v" style="height:400px;"></div>
|
||||
<input type="button" id="butOnOff" value="Stop">
|
||||
<input type="radio" checked name='rm1' id="FixEnd"/>
|
||||
<label for="FixEnd">Fixed</label>
|
||||
<input type="radio" name='rm1' id="FixNone"/>
|
||||
<label for="FixNone">Float</label>
|
||||
<input type="button" id="butSave" value="Save data.csv"><br>
|
||||
Window: <span id='wdsize'>?</span> sec, Sample Rate: <span id='smprate'>?</span> smps
|
||||
<div id='labdiv' style=></div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
var $ = function(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
var stg = 0;
|
||||
var smprate = 975; // adc1: 3900 sps, adc2: 1950 sps, adc4: 975 sps, adc8: 487.5 sps
|
||||
var smps = smprate;
|
||||
var sttim = 0;
|
||||
var cur_idx = 0;
|
||||
var old_idx = 0;
|
||||
var smpsa = [];
|
||||
function wsSmpRate() {
|
||||
var idx = cur_idx, tt = new Date().getTime();
|
||||
var sps = (idx - old_idx) * 1000/ (tt - sttim);
|
||||
sttim = tt; old_idx = idx;
|
||||
smpsa.push(sps);
|
||||
var len = smpsa.length;
|
||||
if(len > 100) { smpsa.shift(); len-- };
|
||||
var csps = 0;
|
||||
for (var i = 0; i < len; i++) csps += smpsa[i];
|
||||
csps = csps/len;
|
||||
$('smprate').innerHTML = csps.toFixed(1);
|
||||
}
|
||||
var samples = 10*smprate;
|
||||
var rend = 1;
|
||||
var oldblkid = 0;
|
||||
var rdnextflg = false;
|
||||
$("butOnOff").onclick = function() {
|
||||
if(rend) {rend = 0; $("butOnOff").value = "Run";}
|
||||
else {rend = 1; $("butOnOff").value = "Stop";}
|
||||
}
|
||||
var datau = [];
|
||||
var gu;
|
||||
function wsping() {
|
||||
clearTimeout(wstt);
|
||||
ws.send('adc*');
|
||||
wstt = setTimeout(wsping, 400);
|
||||
}
|
||||
var wsUri = 'ws://rtl871x1/web.cgi'
|
||||
//var wsUri = "ws://"+window.location.host.toString()+"/web.cgi";
|
||||
ws = new WebSocket(wsUri);
|
||||
ws.binaryType = 'arraybuffer';
|
||||
ws.onopen = function(){
|
||||
ws.send('user=rtl871x:supervisor');
|
||||
ws.send('adcz'); // drv deinit
|
||||
ws.send('adcy'); // mode 2 chnl
|
||||
ws.send('adc4'); // decimation
|
||||
ws.send('adcd'); // xclk
|
||||
ws.send('sys_debug=0'); // print off
|
||||
wstt = setTimeout(wsping,50);};
|
||||
ws.onmessage = function (event) {
|
||||
if(event.data instanceof ArrayBuffer) {
|
||||
clearTimeout(wstt);
|
||||
var wordarray = new Uint16Array(event.data);
|
||||
if(wordarray.length > 2) {
|
||||
var blksz = wordarray[0];
|
||||
if(wordarray.length == blksz*2 + 2) {
|
||||
if(!sttim) {
|
||||
sttim = new Date().getTime();
|
||||
setInterval(function(){wsSmpRate()}, 500);
|
||||
} else {
|
||||
var blkid = wordarray[1] & 0xFFFF;
|
||||
if(rdnextflg) cur_idx += (blkid - oldblkid) & 0xFFFF;
|
||||
else rdnextflg = true;
|
||||
oldblkid = blkid + blksz;
|
||||
for (var i=2; i<wordarray.length; i+=2) {
|
||||
if(rend) {
|
||||
if(cur_idx >= samples) datau.shift();
|
||||
datau.push([cur_idx/smprate, (wordarray[i]-10500)*0.000078, (wordarray[i+1]-10500)*0.000078]);
|
||||
}
|
||||
cur_idx++;
|
||||
}
|
||||
if(!stg) {
|
||||
gu = new Dygraph(
|
||||
$("div_v"),
|
||||
datau,
|
||||
{
|
||||
title: 'RTL871xAx ADCs',
|
||||
showRangeSelector: true,
|
||||
showRoller: true,
|
||||
xlabel: 'T(sec)',
|
||||
ylabel: 'U19(V)',
|
||||
y2label: 'Uvbat(V)',
|
||||
colors: ['red','green'],
|
||||
series : { 'Uvbat': { axis: 'y2' } },
|
||||
axes: {
|
||||
x: {valueFormatter: function(x){return this.getLabels()[0] + ': '+ x.toPrecision(5);}}},
|
||||
labels: ['T', 'U19', 'Uvbat'],
|
||||
labelsDiv: $('labdiv'),
|
||||
legend: 'always', // "follow"
|
||||
digitsAfterDecimal: 3,
|
||||
});
|
||||
setInterval(function(){renderChart()}, 50);
|
||||
stg = 1;
|
||||
}
|
||||
} }
|
||||
wstt = setTimeout(wsping, 40);
|
||||
} } }
|
||||
function avg(arr) {
|
||||
var arrLen = arr.length, result = 0;
|
||||
for (var i = 0; i < arrLen; i++) result += arr[i];
|
||||
return result / arrLen;
|
||||
}
|
||||
var renderChart = function() {
|
||||
var dl;
|
||||
if (gu.dateWindow_) {
|
||||
dl = gu.dateWindow_[1] - gu.dateWindow_[0];
|
||||
if ($("FixEnd").checked) {
|
||||
var ls = datau.length - 1;
|
||||
gu.dateWindow_[1] = datau[ls][0];
|
||||
gu.dateWindow_[0] = datau[ls][0] - dl;
|
||||
} else if (gu.dateWindow_[0] < datau[0][0]) {
|
||||
gu.dateWindow_[0] = datau[0][0];
|
||||
gu.dateWindow_[1] = datau[0][0] + dl;
|
||||
}
|
||||
} else dl = datau.length/smprate;
|
||||
$("wdsize").innerHTML = dl.toFixed(3);
|
||||
if(rend) gu.updateOptions({'file': datau});
|
||||
}
|
||||
function convertArrayOfObjectsToCSV(value){
|
||||
var result, ctr, keys, columnDelimiter, lineDelimiter, data;
|
||||
|
||||
data = value.data || null;
|
||||
if (data == null || !data.length) {return null;}
|
||||
columnDelimiter = value.columnDelimiter || ';';
|
||||
lineDelimiter = value.lineDelimiter || '\n';
|
||||
keys = Object.keys(data[1]);
|
||||
result = '';
|
||||
result += keys.join(columnDelimiter);
|
||||
result += lineDelimiter;
|
||||
data.forEach(function(item){
|
||||
ctr = 0;
|
||||
keys.forEach(function(key){
|
||||
if (ctr > 0)
|
||||
result += columnDelimiter;
|
||||
result += item[key];
|
||||
ctr++;
|
||||
});
|
||||
result += lineDelimiter;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
$("butSave").onclick = function() {
|
||||
var csv = convertArrayOfObjectsToCSV({data: datau});
|
||||
if (!csv.match(/^data:text\/csv/i)) {csv = 'data:text/csv;charset=utf-8,' + csv;}
|
||||
var encodedUri = encodeURI(csv);
|
||||
var link = document.createElement('a');
|
||||
link.setAttribute('href', encodedUri);
|
||||
link.setAttribute('download',"data.csv");
|
||||
link.click();
|
||||
}
|
||||
if(window.innerHeight > 320) $('div_v').style.height = (window.innerHeight-80) + 'px';
|
||||
window.onresize = function(){
|
||||
if(window.innerHeight > 320) $('div_v').style.height = (window.innerHeight-80) + 'px';
|
||||
// $('div_v').style.width = (window.innerWidth-50) + 'px';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -25,7 +25,7 @@ var $ = function(id) {
|
|||
return document.getElementById(id);
|
||||
}
|
||||
var stg = 0;
|
||||
var smprate = 1819;
|
||||
var smprate = 963.4; // 1819;
|
||||
var smps = smprate;
|
||||
var samples = 10*smprate;
|
||||
var rend = 1;
|
||||
|
|
@ -74,7 +74,7 @@ ws.onmessage = function (event) {
|
|||
if(cur_idx >= samples ) datau.shift();
|
||||
if(wordarray[i] & 2) datau.push([cur_idx/smprate, wordarray[i]*0.0005, wordarray[i+1]*0.1]);
|
||||
else datau.push([cur_idx/smprate]);
|
||||
}
|
||||
}
|
||||
cur_idx++;
|
||||
}
|
||||
if(!stg) {
|
||||
|
|
@ -91,7 +91,6 @@ ws.onmessage = function (event) {
|
|||
// fillGraph: true,
|
||||
showRoller: true,
|
||||
// maxNumberWidth: 10,
|
||||
// digitsAfterDecimal: 3,
|
||||
xlabel: 'T(sec)',
|
||||
ylabel: 'U(V)',
|
||||
y2label: 'I(mA)',
|
||||
|
|
@ -99,12 +98,13 @@ ws.onmessage = function (event) {
|
|||
// highlightSeriesOpts: { strokeWidth: 2 },
|
||||
series : { 'I': { axis: 'y2' } },
|
||||
axes: {
|
||||
x: {valueFormatter: function(x){return this.getLabels()[0] + ': '+ x.toPrecision(3);}},
|
||||
x: {valueFormatter: function(x){return this.getLabels()[0] + ': '+ x.toPrecision(5);}},
|
||||
y: {valueRange: [0,]},
|
||||
y2: {valueRange: [0,]}},
|
||||
labels: ['T', 'U', 'I'],
|
||||
labelsDiv: $('labdiv'),
|
||||
legend: 'always', // "follow"
|
||||
digitsAfterDecimal: 3,
|
||||
// legendFormatter: legendFormatter
|
||||
});
|
||||
setInterval(function(){renderChart()}, 50);
|
||||
|
|
|
|||
155
ExampleHTM/dygraph/wso_adcs.htm
Normal file
155
ExampleHTM/dygraph/wso_adcs.htm
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="ina2.css">
|
||||
<title>Get ADC data</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="height: auto; width: auto; text-align: center;">
|
||||
<div id='div_v' style="height:512px;">
|
||||
<canvas id='scope' width=975 height=512></canvas>
|
||||
</div>
|
||||
Window: <span id='wdsize'>?</span> sec, Sample Rate: <span id='smprate'>?</span> smps
|
||||
<div>
|
||||
<span id='labdiv'>?</span>
|
||||
<input type="button" id="butOnOff" value="Stop">
|
||||
<input type="button" id="butSave" value="Save data.csv"><br>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
var $ = function(id) {return document.getElementById(id);}
|
||||
var smprate = 3900; // adc1: 3900 sps, adc2: 1950 sps, adc4: 975 sps, adc8: 487.5 sps
|
||||
var sttim = 0;
|
||||
var cur_idx = 0;
|
||||
var old_idx = 0;
|
||||
var frend = 0;
|
||||
function wsSmpRate() {
|
||||
var idx = cur_idx, tt = new Date().getTime();
|
||||
var sps = (idx - old_idx) * 1000/ (tt - sttim);
|
||||
sttim = tt; old_idx = idx;
|
||||
if(smprate) smprate = smprate * 0.9 + sps * 0.1;
|
||||
else smprate = sps;
|
||||
$('smprate').innerHTML = smprate.toFixed(1);
|
||||
$('wdsize').innerHTML = ($('scope').width/smprate).toFixed(2);
|
||||
$('labdiv').innerHTML = 'Render ' + frend + ' Hz';
|
||||
frend = 0;
|
||||
}
|
||||
var samples = smprate*3;
|
||||
var rend = 1;
|
||||
var oldblkid = 0;
|
||||
var rdnextflg = false;
|
||||
$("butOnOff").onclick = function() {
|
||||
if(rend) {rend = 0; $("butOnOff").value = "Run";}
|
||||
else {rend = 1; $("butOnOff").value = "Stop";}
|
||||
}
|
||||
var data_ch1 = [];
|
||||
var data_ch2 = [];
|
||||
var gu;
|
||||
function wsping() {
|
||||
clearTimeout(wstt);
|
||||
ws.send('adc*');
|
||||
wstt = setTimeout(wsping, 400);
|
||||
}
|
||||
var ctx = document.getElementById('scope').getContext('2d');
|
||||
function draw() {
|
||||
var width = ctx.canvas.width;
|
||||
var height = ctx.canvas.height;
|
||||
var timeData1 = data_ch1;
|
||||
var timeData2 = data_ch2;
|
||||
var scaling = height / 65536 / 2;
|
||||
var risingEdge = 0;
|
||||
var len = timeData1.length;
|
||||
ctx.fillStyle = 'rgba(0, 20, 0, 0.1)';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeStyle = 'rgb(0, 255, 0)';
|
||||
ctx.beginPath();
|
||||
while (timeData1[486 + risingEdge++] > 32768 && risingEdge <= width);
|
||||
if (risingEdge >= width) risingEdge = 0;
|
||||
while (timeData1[486 + risingEdge++] < 32768 && risingEdge <= width);
|
||||
if (risingEdge >= width) risingEdge = 0;
|
||||
for (var x = risingEdge; x < timeData1.length && x - risingEdge < width; x++)
|
||||
ctx.lineTo(x - risingEdge, height - timeData1[x] * scaling);
|
||||
ctx.moveTo(0,0);
|
||||
for (var x = risingEdge; x < timeData2.length && x - risingEdge < width; x++)
|
||||
ctx.lineTo(x - risingEdge, height - 256 - timeData2[x] * scaling);
|
||||
ctx.stroke();
|
||||
frend++;
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
var wsUri = 'ws://rtl871x1/web.cgi'
|
||||
//var wsUri = "ws://"+window.location.host.toString()+"/web.cgi";
|
||||
ws = new WebSocket(wsUri);
|
||||
ws.binaryType = 'arraybuffer';
|
||||
ws.onopen = function(){
|
||||
ws.send('user=rtl871x:supervisor');
|
||||
ws.send('sys_debug=0');
|
||||
ws.send('adcz'); // drv deinit
|
||||
ws.send('adcy'); // mode 2 chls
|
||||
ws.send('adc1'); // decimation
|
||||
ws.send('adcd'); // xclk
|
||||
wstt = setTimeout(wsping,100);};
|
||||
ws.onmessage = function (event) {
|
||||
if(event.data instanceof ArrayBuffer) {
|
||||
clearTimeout(wstt);
|
||||
var wordarray = new Uint16Array(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;
|
||||
sttim = new Date().getTime();
|
||||
setInterval(function(){wsSmpRate()}, 1000);
|
||||
$('wdsize').innerHTML = 975/smprate;
|
||||
draw();
|
||||
}
|
||||
oldblkid = blkid + blksz;
|
||||
for (var i=2; i<wordarray.length; i+=2) {
|
||||
if(rend) {
|
||||
if(data_ch1.length >= samples) {
|
||||
data_ch1.shift();
|
||||
data_ch2.shift();
|
||||
}
|
||||
data_ch1.push([wordarray[i]]);
|
||||
data_ch2.push([wordarray[i+1]]);
|
||||
}
|
||||
cur_idx++;
|
||||
} }
|
||||
wstt = setTimeout(wsping, 40);
|
||||
} } }
|
||||
function convertArrayOfObjectsToCSV(value){
|
||||
var result, ctr, keys, columnDelimiter, lineDelimiter, data;
|
||||
data = value.data || null;
|
||||
if (data == null || !data.length) {return null;}
|
||||
columnDelimiter = value.columnDelimiter || ';';
|
||||
lineDelimiter = value.lineDelimiter || '\n';
|
||||
keys = Object.keys(data[1]);
|
||||
result = '';
|
||||
result += keys.join(columnDelimiter);
|
||||
result += lineDelimiter;
|
||||
data.forEach(function(item){
|
||||
ctr = 0;
|
||||
keys.forEach(function(key){
|
||||
if (ctr > 0)
|
||||
result += columnDelimiter;
|
||||
result += item[key];
|
||||
ctr++;
|
||||
});
|
||||
result += lineDelimiter;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
$("butSave").onclick = function() {
|
||||
var csv = convertArrayOfObjectsToCSV({data: datau});
|
||||
if (!csv.match(/^data:text\/csv/i)) {csv = 'data:text/csv;charset=utf-8,' + csv;}
|
||||
var encodedUri = encodeURI(csv);
|
||||
var link = document.createElement('a');
|
||||
link.setAttribute('href', encodedUri);
|
||||
link.setAttribute('download',"data.csv");
|
||||
link.click();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
167
ExampleHTM/dygraph/wso_audio.htm
Normal file
167
ExampleHTM/dygraph/wso_audio.htm
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="ina2.css">
|
||||
<title>Get ADC data</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="height: auto; width: auto; text-align: center;">
|
||||
<div id='div_v' style="height:512px;">
|
||||
<canvas id='scope' width=976 height=512></canvas>
|
||||
</div>
|
||||
Window: <span id='wdsize'>?</span> sec, Sample Rate: <span id='smprate'>?</span> sps
|
||||
<div>
|
||||
<span id='labdiv'>?</span>
|
||||
<input type="button" id="butOnOff" value="Stop">
|
||||
<input type="button" id="butSave" value="Save data.csv"><br>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
var $ = function(id) {
|
||||
return document.getElementById(id);
|
||||
}
|
||||
var ctx = $('scope').getContext('2d');
|
||||
//===================================
|
||||
// | adc1 adc2 adc4 adc8
|
||||
//----+------------------------------
|
||||
//adca| 12200 6100 3050 1525
|
||||
//adcb| 24400 12200 6100 3050
|
||||
//adcc| 48800 24400 12200 6100
|
||||
//adcd| 97600 48800 24400 12200
|
||||
//===================================
|
||||
var data_ch1 = [];
|
||||
var smprate = 0;
|
||||
var smpbuffer = ctx.canvas.width*10;
|
||||
zero_level = 10500;
|
||||
trigger = 32768-zero_level/2;
|
||||
var sttim = 0;
|
||||
var cur_idx = 0;
|
||||
var old_idx = 0;
|
||||
var frend = 0;
|
||||
function wsSmpRate() {
|
||||
var idx = cur_idx, tt = new Date().getTime();
|
||||
var sps = (idx - old_idx) * 2000/ (tt - sttim);
|
||||
sttim = tt; old_idx = idx;
|
||||
if(smprate) smprate = smprate * 0.9 + sps * 0.1;
|
||||
else smprate = sps;
|
||||
$('smprate').innerHTML = smprate.toFixed(1);
|
||||
$('wdsize').innerHTML = ($('scope').width/smprate).toFixed(3);
|
||||
$('labdiv').innerHTML = 'Render ' + frend + ' Hz';
|
||||
frend = 0;
|
||||
}
|
||||
var rend = 1;
|
||||
var oldblkid = 0;
|
||||
var rdnextflg = false;
|
||||
$("butOnOff").onclick = function() {
|
||||
if(rend) {rend = 0; $("butOnOff").value = "Run";}
|
||||
else {rend = 1; $("butOnOff").value = "Stop";}
|
||||
}
|
||||
var gu;
|
||||
function wsping() {
|
||||
clearTimeout(wstt);
|
||||
ws.send('adc*');
|
||||
wstt = setTimeout(wsping, 100);
|
||||
}
|
||||
var scope_height = ctx.canvas.height;
|
||||
var scaling = scope_height / (65536 - zero_level);
|
||||
function draw() {
|
||||
var scope_width = ctx.canvas.width;
|
||||
ctx.fillStyle = 'rgba(0, 20, 0, 0.1)';
|
||||
ctx.fillRect(0, 0, scope_width, scope_height);
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
var data_start = scope_width/2;
|
||||
var timeData1 = data_ch1.slice();
|
||||
var data_max = timeData1.length - scope_width;
|
||||
if(scope_width > data_max) scope_width = data_max;
|
||||
var risingEdge = data_start;
|
||||
while(risingEdge < data_max && timeData1[risingEdge++] < trigger);
|
||||
while(risingEdge < data_max && timeData1[risingEdge++] > trigger);
|
||||
if(risingEdge >= data_max) {
|
||||
risingEdge = data_start;
|
||||
ctx.strokeStyle = 'rgb(0, 0, 255)';
|
||||
} else ctx.strokeStyle = 'rgb(0, 255, 0)';
|
||||
risingEdge -= data_start;
|
||||
for(var x = 0; x < scope_width; x++)
|
||||
ctx.lineTo(x, scope_height - timeData1[x + risingEdge] * scaling);
|
||||
ctx.stroke();
|
||||
frend++;
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
var wsUri = 'ws://rtl871x1/web.cgi'
|
||||
//var wsUri = "ws://"+window.location.host.toString()+"/web.cgi";
|
||||
ws = new WebSocket(wsUri);
|
||||
ws.binaryType = 'arraybuffer';
|
||||
ws.onopen = function(){
|
||||
ws.send('user=rtl871x:supervisor');
|
||||
ws.send('sys_debug=0');
|
||||
ws.send('adcz'); // drv deinit
|
||||
ws.send('adcx'); // mode Audio
|
||||
ws.send('adc1'); // decimation
|
||||
ws.send('adcd'); // xclk
|
||||
wstt = setTimeout(wsping,50);
|
||||
};
|
||||
ws.onmessage = function (event) {
|
||||
if(event.data instanceof ArrayBuffer) {
|
||||
clearTimeout(wstt);
|
||||
var wordarray = new Uint16Array(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;
|
||||
sttim = new Date().getTime();
|
||||
setInterval(function(){wsSmpRate()}, 1000);
|
||||
draw();
|
||||
}
|
||||
oldblkid = blkid + blksz;
|
||||
for (var i=2; i<wordarray.length; i+=2) {
|
||||
if(rend) {
|
||||
if(data_ch1.length > smpbuffer) {
|
||||
data_ch1.shift();
|
||||
data_ch1.shift();
|
||||
}
|
||||
data_ch1.push([wordarray[i]-zero_level]);
|
||||
data_ch1.push([wordarray[i+1]-zero_level]);
|
||||
}
|
||||
cur_idx++;
|
||||
} }
|
||||
wstt = setTimeout(wsping, 5);
|
||||
} } }
|
||||
function convertArrayOfObjectsToCSV(value){
|
||||
var result, ctr, keys, columnDelimiter, lineDelimiter, data;
|
||||
|
||||
data = value.data || null;
|
||||
if (data == null || !data.length) return null;
|
||||
columnDelimiter = value.columnDelimiter || ';';
|
||||
lineDelimiter = value.lineDelimiter || '\n';
|
||||
keys = Object.keys(data[1]);
|
||||
result = '';
|
||||
result += keys.join(columnDelimiter);
|
||||
result += lineDelimiter;
|
||||
data.forEach(function(item){
|
||||
ctr = 0;
|
||||
keys.forEach(function(key){
|
||||
if (ctr > 0)
|
||||
result += columnDelimiter;
|
||||
result += item[key];
|
||||
ctr++;
|
||||
});
|
||||
result += lineDelimiter;
|
||||
});
|
||||
return result;
|
||||
}
|
||||
$("butSave").onclick = function() {
|
||||
var csv = convertArrayOfObjectsToCSV({data: datau});
|
||||
if (!csv.match(/^data:text\/csv/i)) {csv = 'data:text/csv;charset=utf-8,' + csv;}
|
||||
var encodedUri = encodeURI(csv);
|
||||
var link = document.createElement('a');
|
||||
link.setAttribute('href', encodedUri);
|
||||
link.setAttribute('download',"data.csv");
|
||||
link.click();
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue