Limbajul Java-Script

Limbajul Java-Script - Utilizare obiecte

Aplicatii cu obiecte in JS

Combinand termo si afisor x-t obtinem:

<html>
<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center">
<center><br>Virtual instruments<br><br></center> 
<canvas id="desen06" width="600" height="340" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br><br>
<input type="range" value="21" id="per2" min="0" max="500"  onchange="set_per2()"/>   
<input id="perr2" type="text" size="2" value="21" max="500"  onchange="set_perr2()"/>
<INPUT onclick=grafic() type=button value=Start>
<br>
</td></tr></table></center>
<script type="text/javascript">
var ctx6=desen06.getContext("2d");
ctx6.lineWidth = .5; 
w=desen06.width ;
h=desen06.height/2-20;
val_max=500;
valls = [];
nrv=400;
ht=300;
val_min=0;
xmin=0;
xmax=300;
for(i=0;i<nrv;i++){
	//vals[i]=Math.round(ht*Math.random());
	valls[i]=0;
}

oscil = new afisor_xt(ctx6,120,10,nrv,ht,val_max,val_min,xmax,xmin);
function grafic(){

for(i=1;i<nrv;i++){
		valls[i-1]=valls[i];
	}

var pe = document.getElementById('per2').value;
	valls[nrv-1]=pe;
	
	oscil.deseneaza(valls,nrv);
	oscil.set_val(valls,nrv,250,0,0);

term3.set_val(pe,"Magenta");
 	document.getElementById('perr2').value=parseInt(pe);
	setTimeout("grafic()",100);
}

term3 = new termo(ctx6,10,60,10,250,0,500); 
term3.deseneaza();
set_per2();
function set_per2(){
  var pe = document.getElementById('per2').value;
  document.getElementById('perr2').value=parseInt(pe);
  term3.set_val(pe,"Magenta");

}
function set_perr2(){
  var per = document.getElementById('perr2').value;
  document.getElementById('per2').value=parseInt(per);
  term3.set_val(per,"Magenta");
 
}
</script>

Afisare sinus

<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center" colspan="4">
<center><canvas id="desen91" width="330" height="300" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas></center>
</td></tr><tr>
	<td width="25"><font color="red">Frecv:</font</td>
	<td width="150"><input type="range" value="50" id="fr_id" min="10" max="200"  onchange="set_fr()"/></td>   
	<td width="50"><span id="fr_t"></span></td>
	<td width="40"><INPUT onclick=graf91() type=button value=Start></td>
</td></tr></table>
</center>
<script type="text/javascript">
var fr,rx,up;
var ctx91=desen91.getContext("2d");
ctx91.lineWidth = .5; 
w=desen91.width ;
h=desen91.height/2-20;
vals = [];
nrv=400;
ht=250;
pas=0.06;
vmax=5;
vmin=-5;
xmax=nrv*pas;
xmin=0;
for(i=0;i<nrv;i++){
	 vals[i]=Math.round(ht/2);
}

function set_fr(){
  fr = document.getElementById('fr_id').value;
  fr_t.innerHTML=fr;
}

function graf91() {
 
	// sinus de frecventa variabila
	vl=-4;
	vh=4;
	alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=(vh-vl)*(Math.sin(alfa))/2;
		alfa+=(fr/100)*pas;
	}
 
 	osci91.deseneaza();
	osci91.auto_sx(xmax*fr/100,xmin);
	osci91.set_val(vals,nrv,255,0,0);

set_fr();
 setTimeout("graf91()",100);
}
osci91 = new afisor_xt(ctx91,25,10,nrv,ht,vmax,vmin,xmax,xmin);
</script>

Pentru a afisa mai multe canale, putem folosi acceasi clasa afisor_xt

<center><table bgcolor="WhiteSmoke" border =1 width="220"><tr><td align="center" colspan="3">
<center><canvas id="desen92" width="330" height="300" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas></center>
</td></tr><tr>
	<td width="25"><font color="red">Frecv:</font</td>
	<td width="150"><input type="range" value="50" id="fr92_id" min="10" max="200"  onchange="set_fr92()"/></td>   
	<td width="50"><span id="fr92_t"></span></td>
</td></tr><tr>
	<td width="25">Ampl:</td>
	<td width="150"><input type="range" value="30" id="ampl_id92" min="1" max="50"  onchange="set_ampl92()"/></td>   
	<td width="50"><span id="ampl92_t"></span></td>
</td><tr><td align="center" colspan="3">
	<INPUT onclick=graf92() type=button value=Start></td>
</td></tr></table>
</center>
<script type="text/javascript">
var fr92,ampl92,up;
var ctx92=desen92.getContext("2d");
ctx92.lineWidth = .5; 
w=desen92.width ;
h=desen92.height/2-20;
vals = [];
nrv=400;
ht=250;
pas=0.06;
vmax=25;
vmin=-25;
xmax=nrv*pas;
xmin=0;
for(i=0;i<nrv;i++){
	 vals[i]=Math.round(ht/2);
}

function set_fr92(){
  fr92 = document.getElementById('fr92_id').value;
  fr92_t.innerHTML=fr92;
} 
function set_ampl92(){
  ampl92 = document.getElementById('ampl_id92').value;
  ampl92_t.innerHTML=ampl92;
}

function graf92() {
 
	// sinus de frecventa variabila
	vl=-5;
	vh=5;
	alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=(vh-vl)*(Math.sin(alfa))/2;
		alfa+=(fr92/100)*pas;
	}
 
 	osci92.deseneaza();
	osci92.auto_sx(xmax*fr92/100,xmin);
	osci92.set_val(vals,nrv,255,0,0);

// sinus de amplitudine variabila

alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=ampl92*(Math.sin(alfa))/2;
		alfa+=pas;
	}
 osci92.set_val(vals,nrv,0,255,0);
 set_fr92();
 set_ampl92();
 setTimeout("graf92()",100);
}
osci92 = new afisor_xt(ctx92,25,10,nrv,ht,vmax,vmin,xmax,xmin);
</script>

Determinarea coordonatelor mouse-ului

Putem adauga un cursor la pozitia mouse-ului

<center><table bgcolor="WhiteSmoke" border =1 width="350"><tr><td align="center" colspan="3">
<center><canvas id="desen93" onmousemove="coord_mouse(event)"  onmouseout="mouse_out()" onclick="coord_click(event)" width="330" height="300" style="background-color:#ffffff;border:1px solid #c3c3c3; ">
Your browser does not support the HTML5 canvas tag.
</canvas></center>
</td></tr><tr>
	<td width="25"><font color="red">Frecv:</font</td>
	<td width="150"><input type="range" value="50" id="fr93_id" min="10" max="200"  onchange="set_fr93()"/></td>   
	<td width="50"><span id="fr93_t"></span></td>
</td></tr><tr>
	<td width="25">Ampl:</td>
	<td width="150"><input type="range" value="30" id="ampl_id93" min="1" max="50"  onchange="set_ampl93()"/></td>   
	<td width="50"><span id="ampl_t"></span></td>
</td><tr><td align="center" colspan="3">
	<p id="af_01">Coordonate mouse:</p>
</td></tr>
<tr><td align="center" colspan="3">
<p id="af_02">Coordonate click:</p>
</td><tr><td align="center" colspan="3">
	<INPUT onclick=graf93() type=button value=Start></td>
</td></tr></table>
</center>
<script type="text/javascript">
var fr93,ampl,up,xm,ym;
var ctx93=desen93.getContext("2d");
ctx93.lineWidth = .5; 
w=desen93.width-20 ;
h=desen93.height/2-20;
x0=25;
y0=10;
vals = [];
nrv=400;
ht=250;
pas=0.06;
vmax=25;
vmin=-25;
xmax=nrv*pas;
xmin=0;
for(i=0;i<nrv;i++){
	 vals[i]=Math.round(ht/2);
}
function coord_mouse(e) {
		var x = event.offsetX;
		xm=x;
		var y = event.offsetY;
		ym=y;
		document.getElementById("af_01").innerHTML = "Coordonate mouse: (" + x + "," + y + ")";		
}
function coord_click(e) {
		var x = event.offsetX;
		var y = event.offsetY;
		document.getElementById("af_02").innerHTML = "Coordonate click: (" + x + "," + y + ")";
}
function mouse_out() {
		document.getElementById("af_01").innerHTML = "Coordonate mouse: ( , )";
}
function set_fr93(){
  fr93 = document.getElementById('fr93_id').value;
  fr93_t.innerHTML=fr93;
} 
function set_ampl93(){
  ampl = document.getElementById('ampl_id93').value;
  ampl_t.innerHTML=ampl;
}

function graf93() {
 
	// sinus de frecventa variabila
	vl=-5;
	vh=5;
	alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=(vh-vl)*(Math.sin(alfa))/2;
		alfa+=(fr93/100)*pas;
	}
 
 	osci93.deseneaza();
	osci93.auto_sx(xmax*fr93/100,xmin);
	osci93.set_val(vals,nrv,255,0,0);

// sinus de amplitudine variabila

alfa=0;
	for(i=0;i<nrv;i++){
		vals[i]=ampl*(Math.sin(alfa))/2;
		alfa+=pas;
	}
 osci93.set_val(vals,nrv,0,255,0);
 // cursor
 if((xm>x0)&&(xm<w)&&(ym>y0)&&(ym<ht)){
 	ctx93.beginPath();
	ctx93.strokeStyle = "rgb(0,0,255)";
	ctx93.moveTo(x0,ym); 
	ctx93.lineTo(w+x0,ym);
	ctx93.moveTo(xm,y0); 
	ctx93.lineTo(xm,ht+y0);
	ctx93.stroke();
}
 set_fr93();
 set_ampl93();
 setTimeout("graf93()",100);
}
osci93 = new afisor_xt(ctx93,x0,y0,nrv,ht,vmax,vmin,xmax,xmin);
</script>

Utilizarea tehnologiei Ajax

     AJAX este un acronim care provine din JavaScript si XML. Nu este un nou limbaj sau o noua tehnologie, este doar un nou mod de a utiliza standardele existente. Tehnologia AJAAX ofera posibilitatea de a transfera spre pagina clientului numai o parte din pagina fara a fi nevoie sa transfere intreg continutul paginii.
    Vom crea obiectul xmlhttp=new XMLHttpRequest() pentru a aduce date care vor fi afisate utilizand diverse instrumente virtuale. Datele sunt furnizate de o aplicatie pe partea se server aflata la adresa: https://davos.umfst.ro/~traian/web_apl/simul_date/date_01.php

    Am putea afisa valoarea primita pe un voltmetru.

Utilizarea portului serial

Vom conecta la portul USB un device numit "Multiio", realizat cu un controler Arduino Uno.
Aplicatia web pentru testarea sistemului de achizitie: Multiio

Arduino UNO

- Conectarea se face la USB
- Daca nu se identifica la ce port s-a conectat folosind Device Manager, trebuie incarcat un driver CH340:

Take the CH340G driver for windows http://www.arduined.eu/ch340g-converter-windows-7-driver-download/
Download the archive then run the installer in the CH341SER.

Sistemul de achizitie Multiio

- Sistemul de achizitie Multiio - realizat cu Arduino UNO

- Sistemul de achizitie "Multiio" -conexiuni

Aplicatia web pentru testarea Sistemului de achizitie Multiio : Multiio

Comenzile "Sistemului de achizitie Multiio" si ale "Modulul aplicatii Multiio"

SG,val_pwm -- Start generatoare Sinus - P6 si Dinfi de fierastrau - P5 cu frecventa proportionala cu val_pwm, Aprindere p7
PWM,val_pwm -- Generare PWM - P6 cu valoarea val_pwm
AX4,val -- Afisare pe 4 digiti 7 segmente a valorii val
C0,val ... C3,val -- Activare coloana din matrice de leduri
M1,val_b -- Citire intrari analogice si comanda led-uri cu val_b (se trimite si suma de control)
AA -- Citire valori analogice si DI
A0 ... A4 -- Citire valoare analogica A0 ... A4
O,val -- Invalidare generator sinus si df, Activare led-uri cu valoarea val
DI -- Citire intrari digitale si transmitere val=B0+2*B1+4*B2+8*B3
AI0,val_pwm -- Citire pachet de date A0,A1, Generare pwm pe p6 cu valoarea val_pwm, Generare frecventa pe p10 cu factorul de umplere val_pwm, Aprindere p7, Invalidare sin
AI1,val_pwm -- Citire pachet de date A0,A1 (200 valori A0, 200 valori A1)
AI2,val_pwm -- Citire pachet de date A0,A2 (200 valori A0, 200 valori A2)
AI3,val_pwm -- Citire pachet de date A0,A3 (200 valori A0, 200 valori A3)
AI4,val_pwm -- Citire pachet de date A0,A4 (200 valori A0, 200 valori A4)
D1I,val_pwm -- Citire pachet de date B0,B1,B2,B3 (400 de valori zecimale=B0+2*B1+4*B2+8*B3)

    Utilizarea portului serial presupune mai multe operatii. Prima operatie fiind conectarea la portul serial.

     Dupa deschiderea portului serial urmeaza operatii de citire sau scriere. Functia pentru citirea de la portul serial are forma:

     Functia pentru scrierea la portul serial are forma:

     Ultima operatie fiind deconectarea de la portul serial:

     Operatia de deconectare de la portul serial este foarte importanta. Daca nu se realizeaza, portul serial ramane alocat si nu va mai putea fi folosit de alta aplicatie. S-a optat pentru lansarea automata la inchiderea paginii, functia pentru inchiderea portului serial fiind lansata de evenimentul 'beforeunload' care se activeaza la inchiderea paginii.
     Toate functiile de sus, presupun existenta unui element cu id="output" (definit in pagina principala) unde portul serial afiseaza diverse mesaje. Datele de la portul serial sunt citite in mod asincron de functia "async function readSerialData()", si sunt pastrate in variabila date_s. Inaintea unei scrieri la portul serial datele acumulate in "date_s" sunt salvate in variabila "date_c".
     Sa presupunem ca aceste functi sunt plasate in biblioteca "serial.js", o aplicatie simpla pentru utilizarea portului serial este prezentata mai jos:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script type="text/javascript" src="serial.js"></script>
    <title>Serial Port Reader & Writer</title>
</head>
<body>
<br>
<center><table bgcolor="WhiteSmoke" border=1 width="400"><tr><td align="center" colspan="3">
	<br> <font color="blue" size="2"> Serial Port Reader & Writer : </font><font color="red" size="3"> <b> rw_ser_v3 </b> </font>
	   <INPUT onclick=con_ser() type=button value=Conectare><hr>
	   Comanda: <INPUT id="cd" type="text" size="2" value="AA"  onchange="set_cmd()"/>
	<pre id="output"></pre>
	<div id="a0">---</div>
</table></center>
<script>

// variabile necesare accesarii portului serial

var output = document.getElementById('output'); // mesaje de la portul serial
output.textContent = "Date:";
var cda = "AA";	// comanda spre portul serial
var date_c = '0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0';	// raspunsul portului serial dupa o citire completa
var date_v = new Array(); // vector de date care va fi inscris cu valori din raspunsul complet de date
var date_v = date_c.split(","); // initializare vector de date

// variabile necesare afisarii datelor

var af_a0 = document.getElementById('a0'); // afisare valoare A0

function set_cmd(){
  cda=document.getElementById('cd').value;
}

function af_date()
{
	date_v=date_c.split(",");
	if(date_v[1])
		af_a0.innerHTML="<font color='blue' size='3'>Date[1]:</font> <font color='red' size='3'> "+date_v[1]+"</font>";
	setTimeout("af_date()",100);
}
af_date();
</script>
</body>
</html>