Tworzenie wykresów z użyciem processingu


Processingjęzyk programowania oraz zintegrowane środowisko programistyczne (IDE) stworzone na potrzeby sztuki elektronicznej (wizualnej, interaktywnej, dźwiękowej) oraz projektowania graficznego. ~ Wikipedia.

Jak łatwo się domyśli technologię to możemy połączyć z arduino co w przyszłości, na różne sposoby będziemy mogli wykorzystać w naszych projektach, tworząc własne wykresy (o czym przeczytacie dzisiaj) czy inteligentny interfejs dla naszego programu.

Zaczynajmy. Po pierwsze konieczna będzie instalacja nowego IDE.
Odpowiednią wersję możemy pobrać ze strony: https://processing.org/download/
Zintegrowane środowisko w dużym stopniu przypomina arduino IDE działa także na podobnych zasadach.

Pierwszy program w Processingu.

[pastacode lang=”cpp” manual=”background(0)%3B%0Asize(300%2C400)%3B%0Afill(255%2C124%2C11)%3B%0Aellipse(150%2C200%2C300%2C300)%3B%0A” message=”” highlight=”” provider=”manual”/]

W celu przetestowania naszego nowego IDE wystarczy tylko skopiować kilka linijek podanych wyżej oraz uruchomić program – wówczas powinno wyświetlić się nam takie dodatkowe okno z naszym rysunkiem:

Zanim przejdziemy do analizy kodu warto jeszcze wspomnieć o kilku sprawach. Projekt cały czas jest w fazie rozwoju, nie posiada on jeszcze określonego sposobu formatowania kodu czy schematu tworzenia programów. Nadal pojawić się także mogą problemy z działaniem kodu wówczas warto założyć post na forum projektu.

background(); – ustawiamy kolor tła z zakresu 0 do 255 (gdzie 0 = czarny, 255 = biały)
size(x,y); -ustalamy wielkość naszego okna
fill(r,g,b); – ustalamy kolor podając trzy wartości w standardzie rgb, (czerwony, zielony, niebieski).
ellipse(x,y, size_x, size_y); x,y są to współrzędne okręgu, natomiast size_x, size_y są to wymiary naszej ellipsy. 

Kilka uwag zarówno w przypadku fill() jak i background() możemy sterować kolorami na różne sposoby, podając trzy składowe rgb lub odcień czerni i bieli w przypadku kiedy podamy jedną wartość.

Uwaga ogólna, punkt o współrzędnych (0,0) domyślnie ustawiony jest w lewym górnym rogu, i to w odniesieniu do niego renderowane są elementy na scenie (“grafika na ekranie”).

Wszystkie figury posiadają ustawiony środek, nie musimy więc ustawiać go ręcznie.

Więcej na temat składni języka: https://processing.org/reference/

Drugi program – komunikacja z Arduino pro mini.

Zanim jeszcze jednak zaczniemy musimy sprawdzić numer naszego portu na liście dostępnych portów.
Na początku podpinamy Arduino do komputer, następnie uruchamiamy program podany niżej.

[pastacode lang=”cpp” manual=”import%20processing.serial.*%3B%0A%0Aprintln(Serial.list())%3B%0A%0A” message=”” highlight=”” provider=”manual”/]

W konsoli pokażą nam się dostępne porty. Każdy port posiada swój numer (zobacz zdjęcie niżej) i to właśnie ten numer będzie nam potrzebny przy wybieraniu portu.

“Hello world”

Program w Processingu:

[pastacode lang=”cpp” manual=”import%20processing.serial.*%3B%0A%0Aint%20lf%20%3D%2010%3B%20%20%0AString%20myString%20%3D%20null%3B%0ASerial%20myPort%3B%20%20%0A%0Avoid%20setup()%20%0A%7B%20%0A%20%20background(0)%3B%0A%20%20size(300%2C400)%3B%0A%20%20myPort%20%3D%20new%20Serial(this%2C%20Serial.list()%5B0%5D%2C%209600)%3B%0A%20%20myPort.clear()%3B%0A%7D%0A%0Avoid%20draw()%20%0A%7B%0A%20%20while%20(myPort.available()%20%3E%200)%20%0A%20%20%7B%0A%20%20%20%20myString%20%3D%20myPort.readStringUntil(lf)%3B%0A%20%20%20%20if%20(myString%20!%3D%20null)%20%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20println(myString)%3B%0A%20%20%20%20%7D%20%0A%20%20%7D%0A%20myPort.clear()%3B%0A%7D%20″ message=”” highlight=”” provider=”manual”/]

Kod w Arduino:

[pastacode lang=”cpp” manual=”void%20setup()%0A%7B%0A%09Serial.begin(9600)%3B%0A%7D%0A%0Avoid%20loop()%0A%7B%0A%09Serial.println(%22Hellow%20world%22)%3B%0A%09delay(500)%3B%20%2F%2F%20tak%20wiem%2C%20bardzo%20z%C5%82a%20praktyka%0A%7D” message=”” highlight=”” provider=”manual”/]

Odpowiedni program wgrywamy na płytkę, którą zostawiamy podłączoną do komputera. Następnie w Processingu uruchamiamy nasz program.

 Wysłany z Arduino tekst jest odbierany w naszej aplikacji i wyświetlany w konsoli nie w oknie aplikacji. O tym jak wyświetlić coś w oknie aplikacji dowiesz się z następnego przykładu, na  razie jednak zajmijmy się analizą kodu:

import processing.serial.*; – dodajemy bibliotekę 

int lf = 10;  – wartość char znaku feed line
String myString = null; – zmienna do której zapisujemy dane odebrane z portu
Serial myPort; – tworzymy nowy obiekt portu

void setup() – zmienna setup podobnie jak w arduino
myPort = new Serial(this, Serial.list()[0], 9600); – ustawiamy wartości w konstruktorze obiektu. 

this – wskaźnika (temat na inną okazję, na razie pozostawmy to domyślnie)
Serial.list()[x] – nr portu w miejsce x
9600 – szybkość transmisji

myPort.clear(); – czyścimy port
void draw()  – funkcja działająca podobni jak loop
while (myPort.available() > 0)  – sprawdzamy czy jest coś “pojawiło się na porcie”
myString = myPort.readStringUntil(lf); – zapisujemy do zmiennej odebrane dane 
if (myString != null) –  sprawdzamy czy udało się zapisać dane do zmiennej 
println(myString); – wyświetlamy odebrany tekst

Trzeci program – rysowanie wykresu.

Program w Processingu:

[pastacode lang=”cpp” manual=”import%20processing.serial.*%3B%0A%0Aint%20lf%20%3D%2010%3B%20%0AString%20myString%20%3D%20null%3B%0ASerial%20myPort%3B%20%20%0Afloat%20num%2C%20ax%20%3D%200%2C%20ay%20%3D%20250%3B%0A%0Avoid%20setup()%20%0A%7B%0A%20%20size(800%2C300)%3B%0A%20%20background(0)%3B%0A%20%20%0A%20%20myPort%20%3D%20new%20Serial(this%2C%20Serial.list()%5B0%5D%2C%209600)%3B%0A%20%20myPort.clear()%3B%0A%7D%0A%0Avoid%20draw()%20%0A%7B%0A%20%20while%20(myPort.available()%20%3E%200)%20%0A%20%20%7B%0A%20%20%20%20myString%20%3D%20myPort.readStringUntil(lf)%3B%0A%20%20%20%20if%20(myString%20!%3D%20null)%20%0A%20%20%20%20%7B%0A%20%20%20%20%20%20num%20%3D%20float(myString)%3B%20%0A%20%20%20%20%20%20println(num)%3B%0A%20%20%20%20%7D%0A%20%20%20%20%20%20stroke(0%2C255%2C0)%3B%0A%20%20%20%20%20%20strokeWeight(%202%20)%3B%0A%20%20%20%20%20%20line(ax%2C%20ay%2C%20ax%20%2B%205%2C%20250%20-%20(num%20*%2050))%3B%0A%20%20%0A%20%20%20%20%20%20ax%20%3D%20ax%20%2B%205%3B%0A%20%20%20%20%20%20ay%20%3D%20250%20-%20(num%20*%2050)%3B%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20if(ax%20%3E%3D%20800)%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20background(0)%3B%0A%20%20%20%20%20%20%20ax%20%3D%200%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%7D%0A%20%20%7D%0A%20%20%0A%20%20myPort.clear()%3B%0A%20%20%0A%7D%20″ message=”” highlight=”” provider=”manual”/]

Program w Arduino:

[pastacode lang=”cpp” manual=”%0Avoid%20setup()%20%0A%7B%0A%09Serial.begin(9600)%3B%0A%7D%0A%0Avoid%20loop()%20%7B%0A%09float%20val%20%3D%20analogRead(A0)%3B%0A%0A%09int%20msg%20%3D%20map(val%2C%200%2C%201023%2C%200%2C%205)%3B%0A%0A%09Serial.println(msg)%3B%0A%09delay(200)%3B%0A%7D” message=”” highlight=”” provider=”manual”/]

Schemat połączenia:

 

Analiza kodu Processing:

float num, ax = 0, ay = 250; // zmienne wykorzystane do obliczeń
stroke(0,255,0); // kolor linii

strokeWeight( 2 ); // grubość linii
line(ax,ay,bx,by); // linia z punktu ax,ay do punktu bx,by

Analiza kodu Arduino:

int msg = map(val, 0, 1023, 0, 5); 

Funkcja map przyjmuje pięć parametrów i na ich podstawie oblicza wartość średnią. 

map(wartość_podana, minimum_zakresu, maksimum_zakresu, minimum_zwracane, maksimum zwracane);

Efekt działania programu:

Na dzisiaj to tyle, nowy projekt z wykorzystanie Arduino i Processingu już niedługo 🙂

Poprzednia informacja Aktualizacja USBasp za pomocą Arduino
Kolejna informacja Wyświetlacz TFT 1.8'' 128x160 ST7735S

Brak komentarzy

Zostaw odpowiedź

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *