Arduino/ARM/ESP <> communication serial <> node.js <> java <> chrome
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Node Arduino </title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"> </script>
</head>
<body>
<h1> Arduino/ARM/ESP <> communication serial <> node.js <> java <> chrome </h1>
<div id="graphs"></div>
<script src="socket.io/socket.io.js" charset="utf-8"> </script>
<script>
const socket = io();
const ch9=String.fromCharCode(9); // tab s1.indexOf("\t"); s1.indexOf(9); s1.String.fromCharCode(9);
var bl=true, l0=0, l1=0, i=0, sl=0, s0="", s1=" ", s_="", sn="";
var x0=[],y0=[],x1=[],y1=[],x2=[],y2=[],x3=[],y3=[],x4=[],y4=[],x5=[],y5=[];
var x6=[],y6=[],x7=[],y7=[],x8=[],y8=[],x9=[],y9=[],x10=[],y10=[];
var v_1=0,v_2=0,v_3=0,v_4=0,v_5=0,v_6=0,v_7=0,v_8=0,v_9=0,v_10=0;
var cnte = 0; // let counter = 0;
socket.on('arduino:data', function (data) {
console.log(data);
s1=data.value;
for (i=0; i<s1.length; i++) { // alert(s1[i]+"="+s1.charCodeAt(i));
if (s1.charCodeAt(i) != 13) { sn+=s1[i]; }
if (s1.charCodeAt(i)==13) { bl=true; sn=sn+ch9; s_=sn; // alert(sn); está retardado
l1=sn.length; s0=sn+"time#CYCLE)func/S1=pinmq";
if ((s0.indexOf("time")<l1)||(s0.indexOf("#")<l1)||(s0.indexOf("CYCLE")<l1)||
(s0.indexOf(")")<l1)||(s0.indexOf("func")<l1)||(s0.indexOf("/")<l1)||
(s0.indexOf("S1=")<l1)||(s0.indexOf("pin")<l1)||(s0.indexOf("mq")<l1))
{ bl=false; // alert(sn);
} else { ; } //alert(sn+"<"+l1+">");
if (bl==true) { // alert("{("+sn+")}");
l1=sn.indexOf(ch9); s0=sn.substring(0,l1);
if ((s0.charCodeAt(1)>=48) & (s0.charCodeAt(1)<58)) { sn=sn.substring(l1+1,sn.length); // alert(s0[1]+" "+s0.charCodeAt(1));
} else { // &&)e ||)ou 58): 65)A para L= ou H=
l1=sn.length; s0=sn+"L=H=";
if ((s0.indexOf("L=")<l1)||(s0.indexOf("H=")<l1)) {
l1=sn.indexOf(ch9); sn=sn.substring(l1+1,sn.length);
l1=sn.indexOf(ch9); sn=sn.substring(l1+1,sn.length);
l1=sn.indexOf(ch9); s0=sn.substring(0,l1); sn=sn.substring(l1+1,sn.length);
} else { s0=sn; // alert(sn);
}
} // alert(sn);
document.getElementById('h_1').innerHTML=s0; v_1=Number(s0);// if(s0!=""){bl=1}else bl=0;
l1=sn.indexOf(ch9); s0=sn.substring(0,l1); sn=sn.substring(l1+1,sn.length);
document.getElementById('h_2').innerHTML=s0; v_2=Number(s0);// if(s0!=""){bl=1}else bl=0;
l1=sn.indexOf(ch9); s0=sn.substring(0,l1); sn=sn.substring(l1+1,sn.length);
document.getElementById('h_3').innerHTML=s0; v_3=Number(s0);// if(s0!=""){bl=1}else bl=0;
l1=sn.indexOf(ch9); s0=sn.substring(0,l1); sn=sn.substring(l1+1,sn.length);
document.getElementById('h_4').innerHTML=s0; v_4=Number(s0);// if(s0!=""){bl=1}else bl=0;
l1=sn.indexOf(ch9); s0=sn.substring(0,l1); sn=sn.substring(l1+1,sn.length);
document.getElementById('h_5').innerHTML=s0; v_5=Number(s0);// if(s0!=""){bl=1}else bl=0;
l1=sn.indexOf(ch9); s0=sn.substring(0,l1); sn=sn.substring(l1+1,sn.length);
document.getElementById('h_6').innerHTML=s0; v_6=Number(s0);// if(s0!=""){bl=1}else bl=0;
l1=sn.indexOf(ch9); s0=sn.substring(0,l1); sn=sn.substring(l1+1,sn.length);
document.getElementById('h_7').innerHTML=s0; v_7=Number(s0);// if(s0!=""){bl=1}else bl=0;
l1=sn.indexOf(ch9); s0=sn.substring(0,l1); sn=sn.substring(l1+1,sn.length);
document.getElementById('h_8').innerHTML=s0; v_8=Number(s0);// if(s0!=""){bl=1}else bl=0;
l1=sn.indexOf(ch9); s0=sn.substring(0,l1); sn=sn.substring(l1+1,sn.length);
document.getElementById('h_9').innerHTML=s0; v_9=Number(s0);// if(s0!=""){bl=1}else bl=0;
l1=sn.indexOf(ch9); s0=sn.substring(0,l1);
document.getElementById('h_10').innerHTML=s0; v_10=Number(s0);
}
if (bl==true) {
x1.push(cnte); y1.push(v_1); x2.push(cnte); y2.push(v_2); x3.push(cnte); y3.push(v_3);
x4.push(cnte); y4.push(v_4); x5.push(cnte); y5.push(v_5); x6.push(cnte); y6.push(v_6);
x7.push(cnte); y7.push(v_7); x8.push(cnte); y8.push(v_8); x9.push(cnte); y9.push(v_9);
x10.push(cnte); y10.push(v_10);
Plotly.newPlot(ctx, [
{x:x10, y:y10, mode:'line',name:'mq135'},{x:x9, y:y9, mode:'line',name:'mq131'},
{x:x8, y:y8, mode:'line',name:'mq9'},{x:x7, y:y7, mode:'line',name:'mq8'},
{x:x6, y:y6, mode:'line',name:'mq7'},{x:x5, y:y5, mode:'line',name:'mq6'},
{x:x4, y:y4, mode:'line',name:'mq5'},{x:x3, y:y3, mode:'line',name:'mq4'},
{x:x2, y:y2, mode:'line',name:'mq3'},{x:x1, y:y1, mode:'line',name:'mq2'}
] );
cnte++;
} sn="";
}
}
document.getElementById('txtArea').value += data.value;
} ); // socket
var vl=[1, 2, 3, 4, 5, 6, 7];
var v1=[12, 19, 3, 17, 6, 3, 7];
var v2=[10, 9, 30, 27, 10, 13, 17];
/* var n=19, k=10; // scatter/line
for (var i = 0; i < n; i++) {
var t = i/(n-1)*2-1;
x1[i]= t*Math.PI*k;
y1[i]= Math.sin(t*Math.PI)*k;
x2[i]= t*Math.PI*k;
y2[i]= Math.cos(t*Math.PI)*k;
x3[i]= Math.sin(t*Math.PI)*k;
y3[i]= Math.cos(t * Math.PI)*k;
} /* */
var ctx = document.getElementById("graphs");
var myPlot = new Plotly.plot(ctx,
[{x:x1,y:y1,mode:'line',name:'mq1'},{x:x2,y:y2,mode:'line',name:'mq2'},
{x:x3,y:y3,mode:'line',name:'mq3'},{x:x4,y:y4,mode:'line',name:'mq4'},
{x:x5,y:y5,mode:'line',name:'mq5'},{x:x6,y:y6,mode:'line',name:'mq6'},
{x:x7,y:y7,mode:'line',name:'mq7'},{x:x8,y:y8,mode:'line',name:'mq8'},
{x:x9,y:y9,mode:'line',name:'mq9'},{x:x10,y:y10,mode:'line',name:'mq10'}],
{xaxis: {range: [-10, 70]},
yaxis: {range: [-10, 10]}
} );
</script>
<!-- <h1 id="sensores"> </h1> -->
<div align="center">
<TABLE BORDER=10 WIDTH=580 CELLPADING=0 CELLSPACING=4 id="table1">
<TR><TD bordercolorlight="#0000FF" bordercolordark="#0080FF"> <!-- blue //-->
<font face="Trebuchet MS"> </font>
<p align="center" style="margin-top: 0; margin-bottom: 0">
<font face="Trebuchet MS" size="5">Read data value from arduino or mcu to html</font>
<div align="left"> <font face="Trebuchet MS" size="1"> </font> </div>
<CENTER>
<form name="form1"><font face="Trebuchet MS"><A NAME="kvatoamp"></A></font>
<TABLE BORDER BGCOLOR="#FFFFF2" id="table1">
<CAPTION><font face="Trebuchet MS" size="3">Read Data Sensors</font></CAPTION>
<tr><td>mq2</td><td>mq3</td><td>mq4</td><td>mq5</td><td>mq6</td>
<td>mq7</td><td>mq8</td><td>mq9</td><td>mq131</td><td>mq135</td></tr>
<tr><td>sensor 1</td><td>sensor 2</td><td>sensor 3</td><td>sensor 4</td><td>sensor 5</td>
<td>sensor 6</td><td>sensor 7</td><td>sensor 8</td><td>sensor 9</td><td>sensor 10</td></tr>
<tr><td id="h_1"></td><td id="h_2"></td><td id="h_3"></td><td id="h_4"></td><td id="h_5"></td>
<td id="h_6"></td><td id="h_7"></td><td id="h_8"></td><td id="h_9"></td><td id="h_10"></td></tr>
</table>
<h3 id="capturFunc"> </h3>
<textarea rows="10" cols="113" type=text id="txtArea"> </textarea>
</form> </CENTER></TD></TR></table></div>
</body>
</html>
Os ficheiros, mais actuais:
index.js.c
index.html.2018/07/24.c
devem renomear para:
index.js
index.html
ino_Mega2560-LedKey-gazSensor.ino (34.7 KB)
index.js.c (1.02 KB)
index.html.c (10.1 KB)
index.html.20180722.c (15.6 KB)
index 20180724.html.c (16.8 KB)
index 20180729.html.c (22.7 KB)
ino_Mega2560-LedKey-gazSensor.ino (34.7 KB)
