Soros átvitel – nagyobb értékek fogadása


Már előző cikkben láthattuk, hogy sorosan csak kisebb számok továbbíthatók az alap utasításokkal. De mi van akkor ha 255-nél nagyobb számot kellene a grafikus felületre küldeni?

Trükközni kell, hogy ez működjön a következő módon: az arduino progiban a mért értéket a Serial.println-nel kell továbbítani, így szövegként kerül a processing ketch-be ahol ezt így is kell kezelni.

Nézzünk erre egy arduino kódot:

void setup() {
Serial.begin(9600);
}

void loop() {
int analog_ertek = analogRead(A0);
Serial.println(analog_ertek);
}



E mellé kell egy olyan processing sketch ami fogadja a szöveg küldeményt
és meg is jeleníti azt, esetleg átalakítja további számítások esetén.

A processing kód:


import processing.serial.*;

Serial myPort;
String ertek;

void setup(){
myPort = new Serial(this, "COM4", 9600);
}

void draw(){
while( myPort.available() > 0)
ertek = myPort.readStringUntil('\n');
println(ertek);
}

Amint látni lehet ezek közül már minden sort megbeszéltünk az előző cikkben, néhány dolgot hozzá fűzök:

A COM4 portnév helyére mindenki írja be azt a portot amit arduinoja használ.

A myPort.available() > 0 sort a while ciklusban használjuk, saját észrevételemben csak így reagál azonnal a soros átvitel az arduinos értékváltozásokra.


Most csináljunk valami dizájnt is érték kiíratásunkhoz. Mint köztudott a processing a grafikus megjelenítésre van kiélezve. Mi is megpróbáljuk grafikus formába önteni értékeinket.A grafikus ablak megnyitását már megbeszéltük erre a size parancs szolgál.

size(x,y) – ablak nyitása x pixel szélességben , y pixel magasságban.


Az ablakhoz tartozó háttérszint a background() paranccsal állíthatjuk be.
background(a) – fekete és fehér közötti árnyalatok (szürkék), a értéke
0 – 255 közötti érték lehet. 255 – fehér, 0 – fekete.

background(r, g, b) – színes háttér előállítása rgb színekből, r a vörös árnyalatai, g a zöldé, b a kéké, a három értékből bármilyen szín kikeverhető.


void setup(){
size(400,300);
background(21,10,100);
}

void draw(){
}

Próbáljunk néhány szint kikeverni. Kis könnyítés a processingben a
Tools menüben található Color Selector. Itt a kiválasztott szín mellett rögtön megjelenek az rgb értékek és a hexa kód is. Ezek közül bármelyiket használhatjuk.

pl.: background(#4733CB); – halványabb kék szín hexa kóddal.


Háttérként képeket is beilleszthetünk, igaz ez egy kicsit bonyolultabb eljárás, de azért nem vészes.

PImage img;

void setup(){
size(642,362);
img = loadImage("taj_kep.jpg");
background(img);
}

void draw(){
}

Két fontos dolog: a képet tartalmazó fájl a sketch mentési mappájába kell
bemásolni. A másik fontos tényező: a size-ben megadott méretek egyezzenek meg a kép valódi méretével, mert különben nem lesz megjeleníthető.


Következő lépésként írassunk ki valamit az ablakunkba, erre a text() utasítást használjuk:


void setup(){
size(400,100);
background(#15E8E3);
}

void draw(){
text("HŐMÉRSÉKLET:", 20, 20);
}


A text() sor első paramétere a kiíratandó szöveg, a második az X koordináta (vízszintes távolság a bal felső saroktól), a harmadik az Y koordináta (függőleges távolság a bal felső saroktól).


Mint láthatjuk a szöveg bal alsó sarkára vonatkoznak a koordináták, ha a
szöveg magasságánál kisebb y értéket adunk meg akkor a szöveg teteje eltűnik az ablak felső széle mögött:

text("HŐMÉRSÉKLET:", 20, 5);

Ez felhasználható animációknál. A szöveg oldalra is eltolható a következő módon:

text("HŐMÉRSÉKLET:", -20, 20); – ha megadunk egy mínuszos X értéket, akkor a kiírandó szövegből annyit levág amennyi a mínuszban szerepel.
Evvel is lehet szép animációkat készíteni, de ezt majd később.


Most nézzük, hogy tudjuk a szöveg méretét növelni, hisz ezek az apró betűk nem mindig mutatnak jól.

textSize(26); – betűméret beállítása, egy paraméter van ez a méretet határozza meg.


void setup(){
size(400,100);
background(#15E8E3);
}
void draw(){
textSize(26);
text("HŐMÉRSÉKLET:", 20, 25);
}

Még meghatározhatjuk a betű színét a fill() paranccsal.

fill(232,35,213); – itt is ugyan úgy adhatók meg a színek mint a background-nál. Három értékel az rgb színek, ha van negyedik érték is az az átlátszóságot állítja, de megadható a szín hexa kódban is.

fill(#E823D5);

A szöveg kezelésről bővebben majd egy későbbi cikkben.

Most még nézzünk a téglalap kirajzolására alkalmas rect() utasítás.

void setup(){
size(400,100);
background(#15E8E3);
}

void draw(){
textSize(26);
fill(#19106F);
text("HŐMÉRSÉKLET:", 20, 25);
fill(255);
rect(225,5,100,20);
}


A rect() paraméterei: első X koordináta, második Y koordináta, harmadik
X koordinátától való távolság vízszintesen, negyedik Y koordinátától való
távolság függőlegesen.

Mint látható itt is feltűnik a fill() utasítás. A fill() minden grafikus alakzatra, betűre érvényes, ha megváltoztatod a fill értékeit akkor a fill utáni alakzatok már ezt a színt veszik fel.

Nézzünk végül egy rövid programot, ami a TMP036 hőmérséklet szenzor értékeit továbbítja sorosan. A TMP036 bekötése:

Pin1 – arduino +3.3V
Pin2 – arduino A0
Pin3 – arduino GND


void setup(){
Serial.begin(9600);
}

void loop(){
int reading = analogRead(A0);
float tempC = (reading*5.0/1024 - 0.5) * 100;
Serial.println(tempC);
delay(50);
}


Processing kód:

import processing.serial.*;
Serial myPort;
String str;
void setup(){
myPort = new Serial(this, "COM4", 9600);
size(400,100);
}


void draw(){
background(#15E8E3);
textSize(26);
fill(#19106F);
text("HŐMÉRSÉKLET:", 20, 50);
fill(255);
rect(225,30,60,20);
fill(#19106F);
text("°C", 290, 50);

while(myPort.available() > 0){
str = myPort.readStringUntil('\n');
if(str != null){
fill(255);
rect(225,30,60,20);
textSize(18);
fill(0);
text(str,230,47);
}
}
delay(50);
}


Hőmérséklet érték megérkezik, de elég sokat ugrál a szenzor pontatlansága miatt. Táp szűrőkondenzátor valamennyit segíthet a stabilitáson, de ezt már nem próbáltam ki.