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() { void
loop() { |
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.