{"id":522,"date":"2017-01-11T18:40:42","date_gmt":"2017-01-11T18:40:42","guid":{"rendered":"http:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/?p=522"},"modified":"2017-01-18T20:47:21","modified_gmt":"2017-01-18T20:47:21","slug":"processing-wizualizacja-danych-z-arduino","status":"publish","type":"post","link":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/?p=522","title":{"rendered":"Processing &#8212; wizualizacja danych z Arduino"},"content":{"rendered":"<h2>processing.org<\/h2>\n<p>\u015awietny program do nauki programowania &#8211; gdy\u017c w bardzo prosty spos\u00f3b wy\u015bwietla grafik\u0119. IDE jest proste, intuicyjne, bardzo podobne do Arduino IDE (w rzeczy samej &#8211; to te\u017c produkt MIT). Wiele os\u00f3b, w tym tak\u017ce my, b\u0119dziemy u\u017cywa\u0107 processing do graficznego przedstawienia tego, co &#8222;m\u00f3wi&#8221; do nas Arduino (czyli Serial.print z Arduino trafi do processinga, kt\u00f3ry wy\u015bwietli stosown\u0105 grafik\u0119). Warto wspomnie\u0107 o kilka zalet tego softwaru:<\/p>\n<ul>\n<li>wieloplatfromowy (Linux, Mac, Windows)<\/li>\n<li>darmowy (w tym tak\u017ce do cel\u00f3w komercyjnych)<\/li>\n<li>wy\u015bwietla grafik\u0119 2D, ale tak\u017ce 3D<\/li>\n<li>obs\u0142uguje OpenGL<\/li>\n<li>ogromna liczba dodatkowych bibliotek, rozszerzaj\u0105cych mo\u017cliwo\u015bci<\/li>\n<li>du\u017co manuali online (a tak\u017ce ksi\u0105\u017cek).<\/li>\n<\/ul>\n<h2>Podstawy<\/h2>\n<p>J\u0119zyk programowania to C++ (Java, JavaScript, Ruby, Python) wi\u0119c nie powinni\u015bmy si\u0119 czu\u0107 si\u0119 nieswojo. Przyjrzyjmy si\u0119 szkieletowi typowego programu (&#8222;skeczu&#8221;)<\/p>\n<pre class=\"lang:arduino decode:true\">void setup(){\r\n  size(800,600);\r\n  background(0);\r\n}\r\n\r\nvoid draw(){\r\n  ellipse(10,10, 60, 100);\r\n  fill(12, 23, 34);\r\n  rectangle(50,50, 100, 200);\r\n}\r\n<\/pre>\n<p>Widzimy dwie funkcje &#8211; <strong>setup()<\/strong> oraz <strong>draw()<\/strong> &#8211; podobnie, jak programuj\u0105c w Arduino IDE. To podobie\u0144stwo nie jest przypadkowe, bo jak ju\u017c wspomnia\u0142em projekt powsta\u0142 przez ludzi z MIT. Dlatego te\u017c znaczenie funkcji <strong>setup()<\/strong> jest takie samo jak w Arduino &#8211; funkcja wykona si\u0119 tylko jeden raz, na pocz\u0105tku programu. Kolejna funkcja &#8211;&nbsp;<strong>draw()<\/strong> &#8211; b\u0119dzie si\u0119 wykonywana &#8222;w k\u00f3\u0142ko&#8221;, czyli po zako\u0144czeniu wykona si\u0119 ponownie &#8211; czyli tak, jak funkcja&nbsp;<strong>loop()<\/strong> w Arduino IDE (co prawda w przypadku processinga mo\u017cna zmieni\u0107 takie zachowanie, ale nie wnikajmy w takie szczeg\u00f3\u0142y).<\/p>\n<p>Po zapoznaniu si\u0119 z podstawowymi prymitywami graficznymi processinga (prostok\u0105t, linia, elipsa) przeszli\u015bmy do cz\u0119\u015bci g\u0142\u00f3wnej dzisiejszych zaj\u0119\u0107 &#8211; po\u0142\u0105czenia Arduino z grafik\u0105.<\/p>\n<h2>Wysy\u0142amy liczby z Arduino<\/h2>\n<p>W przysz\u0142o\u015bci &nbsp;b\u0119dziemy wy\u015bwietla\u0107 odczyty z pod\u0142\u0105czonych czujek (np. czujki pola <a href=\"http:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/?p=508\">magnetycznego SS49e<\/a>, o czym by\u0142o na poprzednich zaj\u0119ciach), ale teraz upraszczamy maksymalnie i wykorzystujemy Arduino do nadawania pseudolosowych liczb ca\u0142kowitych. Uruchamiamy Arduino IDE i wpisujemy poni\u017cszy skech<\/p>\n<pre class=\"lang:arduino decode:true\">void setup(){\r\n  Serial.begin(9600);\r\n}\r\n\r\nvoid draw(){\r\n  Serial.println(random(1024));\r\n  delay(200);\r\n}\r\n<\/pre>\n<h2>Odczyt danych z portu COM w processingu<\/h2>\n<pre class=\"lang:arduino decode:true\">import processing.serial.*;\r\nSerial moj_port;\r\n\r\nvoid setup(){\r\n println(\"lista dostepnych portow COMM: \");\r\n println(Serial.list());\r\n println(\"probuje port: \", Serial.list()[0]);\r\n moj_port = new Serial(this, Serial.list()[0], 9600);\r\n}\r\n\r\nint dane;\r\nvoid draw(){\r\n  if (moj_port.available() &gt; 0){\r\n    dane = moj_port.read();\r\n    println(\"wczytalem: \", dane);\r\n  }\/\/if\r\n}\r\n<\/pre>\n<p>Wa\u017cne w powy\u017cszym programie jest wyb\u00f3rk konkretnego portu szeregowego, czyli linijka&nbsp;<\/p>\n<p>moj_port = new Serial(this, Serial.list()<strong>[0]<\/strong>, 9600);<\/p>\n<p>gdzie ja wybra\u0142em pierwszy element (indeks zerowy tablic, czyli&nbsp;<strong>[0]<\/strong>) z listy dost\u0119pnych port\u00f3w (<strong>Serial.list()<\/strong>) &#8211; ale mo\u017ce si\u0119 zdarzy\u0107, \u017ce u Was nie b\u0119dzie to pierwszy, a jaki\u015b inny element &#8211; dlatego wypisa\u0142em na ekranie ca\u0142\u0105 list\u0119 i port, z kt\u00f3rym pr\u00f3buj\u0119 si\u0119 po\u0142\u0105czy\u0107. Prosz\u0119 przyjrze\u0107 si\u0119 tym komunikatom, je\u015bli co\u015b nie idzie tak jak powinno.<\/p>\n<p>Oczywi\u015bcie programik nic nie wy\u015bwietla graficznego, tylko odczytuje dane (i to b\u0142\u0119dnie! o czym wspomnia\u0142em na ko\u0144cu zaj\u0119\u0107 &#8211; problem ten rozwi\u0105\u017cemy p\u00f3\u017aniej) i wypisuje je na ekranie. Przechodzimy do grafiki (prostej).<\/p>\n<h2>Kre\u015blimy wykres<\/h2>\n<p>Lekko modyfikujemy programik.&nbsp;<\/p>\n<pre class=\"lang:arduino decode:true\">import processing.serial.*;\r\nSerial moj_port;\r\n\r\nint xPos;\r\n\r\nvoid setup(){\r\n println(\"lista dostepnych portow COMM: \", Serial.list());\r\n println(\"probuje port: \", Serial.list()[0]);\r\n moj_port = new Serial(this, Serial.list()[0], 9600);\r\n}\r\n\r\nint dane;\r\nvoid draw(){\r\n  if (moj_port.available() &gt; 0){\r\n    dane = moj_port.read();\r\n    println(\"wczytalem: \", dane);\r\n\r\n    rect(xPos, height\/2, 10, dane);\r\n    xPos+=10;\r\n    if (xPos &gt;= width) {\r\n      xPos = 0;\r\n      background(0);\r\n    }\r\n  }\/\/available\r\n}\r\n<\/pre>\n<p>Bardzo prymitywna grafika, ale niech to wystarczy na dzisiaj.&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-523\" src=\"http:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/wp-content\/uploads\/sites\/6\/2017\/01\/procc0.png\" alt=\"procc0\" width=\"802\" height=\"629\" srcset=\"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/wp-content\/uploads\/sites\/6\/2017\/01\/procc0.png 802w, https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/wp-content\/uploads\/sites\/6\/2017\/01\/procc0-300x235.png 300w, https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/wp-content\/uploads\/sites\/6\/2017\/01\/procc0-768x602.png 768w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\" \/><\/p>\n<p>Pozostaje kilka kwestii do rozwi\u0105zania:<\/p>\n<ul>\n<li>poprawne wczytywanie liczb (z Arduino wysy\u0142amy 0..1023, a processing &#8222;widzi&#8221; tylko jakie\u015b ma\u0142e liczby, &lt;30?)<\/li>\n<li>\u0142adniejsza grafika.<\/li>\n<\/ul>\n<p>Zapraszam na kolejne zaj\u0119cia!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>processing.org \u015awietny program do nauki programowania &#8211; gdy\u017c w bardzo prosty spos\u00f3b wy\u015bwietla grafik\u0119. IDE jest proste, intuicyjne, bardzo podobne do Arduino IDE (w rzeczy samej &#8211; to te\u017c produkt MIT). Wiele os\u00f3b, w tym tak\u017ce my, b\u0119dziemy u\u017cywa\u0107 processing do graficznego przedstawienia tego, co &#8222;m\u00f3wi&#8221; do nas Arduino (czyli Serial.print z Arduino trafi do [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":524,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[52],"tags":[109,42,108],"class_list":{"0":"post-522","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-fibot","8":"tag-grafika","9":"tag-processing","10":"tag-random","12":"post-with-thumbnail","13":"post-with-thumbnail-large"},"_links":{"self":[{"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=\/wp\/v2\/posts\/522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=522"}],"version-history":[{"count":3,"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=\/wp\/v2\/posts\/522\/revisions"}],"predecessor-version":[{"id":541,"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=\/wp\/v2\/posts\/522\/revisions\/541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=\/wp\/v2\/media\/524"}],"wp:attachment":[{"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/physics.uwb.edu.pl\/wf\/fi-bot\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}