14 interface and application programming

fernando meneses

base3

14_write an application that interfaces with an input &/or output device

This week, I will begin with the interface to work with my final project.

For now, the plan is to have a color sensor input, and a display with LED matrix output.

Adafruit_TCS34725
ControlP5
processing.serial
java.awt.datatransfer
java.awt.Toolkit

Here I share some screenshots of the interface.

15-1

And here the code:

  1. /*Basado en Adafruit_TCS34725 & ControlP5
  2. Reconocedor de bacterias 0.0 / 05-2015
  3. FabAcademy 2015, FabLab Monterrey
  4. Fernando Meneses/fernandomeneses@nodolab.com
  5. */
  6. import processing.serial.*;
  7. import java.awt.datatransfer.*;
  8. import java.awt.Toolkit;
  9. import controlP5.*;
  10. Serial port;
  11. ControlP5 cp5;
  12. Accordion accordion;
  13. color c = color(0, 160, 100);
  14. int dx= 200;
  15. int dy = 50;
  16. // /*
  17. int wR1=200, wG1=200, wB1=200;
  18. int wR2=200, wG2=200, wB2=200;
  19. int wR3=200, wG3=200, wB3=200;
  20. int wR4=200, wG4=200, wB4=200;
  21. int wR5=200, wG5=200, wB5=200;
  22. int wR6=200, wG6=200, wB6=200;
  23. int wR7=200, wG7=200, wB7=200;
  24. int wR8=200, wG8=200, wB8=200;
  25. int wR9=200, wG9=200, wB9=200;
  26. int wR10=200, wG10=200, wB10=200;
  27. int wR11=200, wG11=200, wB11=200;
  28. int wR12=200, wG12=200, wB12=200;
  29. // /*
  30. void setup(){
  31. size(900,600);
  32. //port = new Serial(this, "/dev/cu.usbmodem1411", 9600);
  33. noStroke();
  34. smooth();
  35. gui();
  36. }
  37. /*
  38. String buff = "";
  39. int wR1, wG1, wB1, wClear1;
  40. int wR2, wG2, wB2, wClear2;
  41. int wR3, wG3, wB3, wClear3;
  42. int wR4, wG4, wB4, wClear4;
  43. int wR5, wG5, wB5, wClear5;
  44. int wR6, wG6, wB6, wClear6;
  45. int wR7, wG7, wB7, wClear7;
  46. int wR8, wG8, wB8, wClear8;
  47. int wR9, wG9, wB9, wClear9;
  48. int wR10, wG10, wB10, wClear10;
  49. int wR11, wG11, wB11, wClear11;
  50. int wR12, wG12, wB12, wClear12;
  51. String hexColor = "ffffff";
  52. */
  53. void gui(){
  54. cp5 = new ControlP5(this);
  55. Group g1 = cp5.addGroup("Iniciar")
  56. .setBackgroundColor(color(0, 64))
  57. .setBackgroundHeight(150)
  58. ;
  59. cp5.addBang("reset")
  60. .setPosition(10,20)
  61. .setSize(180,50)
  62. .moveTo(g1)
  63. .plugTo(this,"shuffle");
  64. ;
  65. Group g2 = cp5.addGroup("RGB")
  66. .setBackgroundColor(color(0, 64))
  67. .setBackgroundHeight(150)
  68. ;
  69. cp5.addRadioButton("radio")
  70. .setPosition(10,20)
  71. .setItemWidth(20)
  72. .setItemHeight(20)
  73. .addItem("red", 0)
  74. .addItem("green", 1)
  75. .addItem("blue", 2)
  76. .addItem("Clear", 3)
  77. .setColorLabel(color(255))
  78. .activate(2)
  79. .moveTo(g2)
  80. ;
  81. Group g3 = cp5.addGroup("parámetros")
  82. .setBackgroundColor(color(0, 64))
  83. .setBackgroundHeight(150)
  84. ;
  85. cp5.addBang("play")
  86. .setPosition(10,20)
  87. .setSize(40,50)
  88. .moveTo(g3)
  89. ;
  90. cp5.addSlider("temp")
  91. .setPosition(60,20)
  92. .setSize(100,20)
  93. .setRange(100,500)
  94. .setValue(100)
  95. .moveTo(g3)
  96. ;
  97. cp5.addSlider("tiempo")
  98. .setPosition(60,50)
  99. .setSize(100,20)
  100. .setRange(100,500)
  101. .setValue(200)
  102. .moveTo(g3)
  103. ;
  104. accordion = cp5.addAccordion("acc")
  105. .setPosition(40,40)
  106. .setWidth(200)
  107. .addItem(g1)
  108. .addItem(g2)
  109. .addItem(g3)
  110. ;
  111. cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.open(0,1,2);}}, 'o');
  112. cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.close(0,1,2);}}, 'c');
  113. cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setWidth(300);}}, '1');
  114. cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setPosition(0,0);accordion.setItemHeight(190);}}, '2');
  115. cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setCollapseMode(ControlP5.ALL);}}, '3');
  116. cp5.mapKeyFor(new ControlKey() {public void keyEvent() {accordion.setCollapseMode(ControlP5.SINGLE);}}, '4');
  117. cp5.mapKeyFor(new ControlKey() {public void keyEvent() {cp5.remove("myGroup1");}}, '0');
  118. accordion.open(0,1,2);
  119. accordion.setCollapseMode(Accordion.MULTI);
  120. }
  121. void draw(){
  122. background(255,255,255);
  123. /*
  124. while (port.available() > 0) {
  125. serialEvent(port.read());
  126. }
  127. */
  128. S1();
  129. S2();
  130. S3();
  131. S4();
  132. S5();
  133. S6();
  134. S7();
  135. S8();
  136. S9();
  137. S10();
  138. S11();
  139. S12();
  140. titulo();
  141. area();
  142. }
  143. /*
  144. void serialEvent(int serial) {
  145. if(serial != '\n') {
  146. buff += char(serial);
  147. } else {
  148. //println(buff);
  149. int cRed = buff.indexOf("R");
  150. int cGreen = buff.indexOf("G");
  151. int cBlue = buff.indexOf("B");
  152. int clear = buff.indexOf("C");
  153. if(clear >=0){
  154. String val = buff.substring(clear+3);
  155. val = val.split("\t")[0];
  156. wClear = Integer.parseInt(val.trim());
  157. } else { return; }
  158. if(cRed >=0){
  159. String val = buff.substring(cRed+3);
  160. val = val.split("\t")[0];
  161. wR = Integer.parseInt(val.trim());
  162. } else { return; }
  163. if(cGreen >=0) {
  164. String val = buff.substring(cGreen+3);
  165. val = val.split("\t")[0];
  166. wG = Integer.parseInt(val.trim());
  167. } else { return; }
  168. if(cBlue >=0) {
  169. String val = buff.substring(cBlue+3);
  170. val = val.split("\t")[0];
  171. wB = Integer.parseInt(val.trim());
  172. } else { return; }
  173. print("Red: "); print(wR);
  174. print("\tGrn: "); print(wG);
  175. print("\tBlue: "); print(wB);
  176. print("\tClr: "); println(wClear);
  177. wR *= 255; wR /= wClear;
  178. wG *= 255; wG /= wClear;
  179. wB *= 255; wB /= wClear;
  180. hexColor = hex(color(wR, wG, wB), 6);
  181. println(hexColor);
  182. buff = "";
  183. }
  184. }
  185. */
  186. void radio(int theC) {
  187. switch(theC) {
  188. case(0):c=color(255,0,0,200);break;
  189. case(1):c=color(0, 200, 140,200);break;
  190. case(2):c=color(0, 128, 255,200);break;
  191. case(3):c=color(50,128);break;
  192. }
  193. }
  194. void shuffle() {
  195. c = color(random(255),random(255),random(255),random(128,255));
  196. }
  197. void S1(){
  198. stroke(c);
  199. fill(wR1,wG1,wB1);
  200. ellipse(241.3+dx,402.6+dy, 98, 98);
  201. textSize(12);
  202. fill(c);
  203. text("1", 241.3-3+dx,402.6+dy);
  204. }
  205. void S2(){
  206. stroke(c);
  207. fill(wR2,wG2,wB2);
  208. ellipse(358.7+dx,402.6+dy, 98, 98);
  209. textSize(12);
  210. fill(c);
  211. text("2", 358.7-3+dx,402.6+dy);
  212. }
  213. void S3(){
  214. stroke(c);
  215. fill(wR3,wG3,wB3);
  216. ellipse(417.5+dx,300.9+dy, 98, 98);
  217. textSize(12);
  218. fill(c);
  219. text("3", 417.5-3+dx,300.9+dy);
  220. }
  221. void S4(){
  222. stroke(c);
  223. fill(wR4,wG4,wB4);
  224. ellipse(476.2+dx,199.1+dy, 98, 98);
  225. textSize(12);
  226. fill(c);
  227. text("4", 476.2-3+dx,199.1+dy);
  228. }
  229. void S5(){
  230. stroke(c);
  231. fill(wR5,wG5,wB5);
  232. ellipse(417.5+dx,97.4+dy, 98, 98);
  233. textSize(12);
  234. fill(c);
  235. text("5", 417.5-3+dx,97.4+dy);
  236. }
  237. void S6(){
  238. stroke(c);
  239. fill(wR6,wG6,wB6);
  240. ellipse(300.0+dx,97.4+dy, 98, 98);
  241. textSize(12);
  242. fill(c);
  243. text("6", 300.0-3+dx,97.4+dy);
  244. }
  245. void S7(){
  246. stroke(c);
  247. fill(wR7,wG7,wB7);
  248. ellipse(182.5+dx,97.4+dy, 98, 98);
  249. textSize(12);
  250. fill(c);
  251. text("7", 182.5-3+dx,97.4+dy);
  252. }
  253. void S8(){
  254. stroke(c);
  255. fill(wR8,wG8,wB8);
  256. ellipse(123.8+dx,199.1+dy, 98, 98);
  257. textSize(12);
  258. fill(c);
  259. text("8", 123.8-3+dx,199.1+dy);
  260. }
  261. void S9(){
  262. stroke(c);
  263. fill(wR9,wG9,wB9);
  264. ellipse(182.5+dx,300.9+dy, 98, 98);
  265. textSize(12);
  266. fill(c);
  267. text("9", 182.5-3+dx,300.9+dy);
  268. }
  269. void S10(){
  270. stroke(c);
  271. fill(wR10,wG10,wB10);
  272. ellipse(300.0+dx,300.9+dy, 98, 98);
  273. textSize(12);
  274. fill(c);
  275. text("10", 300.0-5+dx,300.9+dy);
  276. }
  277. void S11(){
  278. stroke(c);
  279. fill(wR11,wG11,wB11);
  280. ellipse(358.7+dx,199.1+dy, 98, 98);
  281. textSize(12);
  282. fill(c);
  283. text("11",358.7-5+dx,199.1+dy);
  284. }
  285. void S12(){
  286. stroke(c);
  287. fill(wR12,wG12,wB12);
  288. ellipse( 241.3+dx,199.1+dy, 98, 98);
  289. textSize(12);
  290. fill(c);
  291. text("12",241.3-5+dx,199.1+dy);
  292. }
  293. void titulo(){
  294. textSize(16);
  295. fill(153,153,153);
  296. text("RGBactéria 0.0",450,25);
  297. }

Here’s a video demonstration.

_sql

Initial references:
SQLite
SQLite browser

Data management for use “SQLite” is a processing library, it is a database of local management, here the steps for implementation:

1. First, create a database, for this we use “SQLite browser”, it is a reader open for States database management code.

1

2. In the “SQLite browser” manage data entry and here we can add the parameters, here a screenshot with some sample data.

2

3. To connect the database, we need to place the database in the same folder as the processing code must be in a folder called “data”.

3

4. In the code, you must first load the library and define the name of the call, in this case.


de.bezier.data.sql import. *;
SQLite db;

5. To connect the database it is called a new base.

db = new SQLite (this, "RGBacteria.db");

6. To take the call to the database we will use the functions “if” and “while”..


if (test) {
statements
}

while (expression) {
statements
}

7. Finally to call a specific row and column we will use.

db.get "data type" ("position")

8. The full code.

  1. import de.bezier.data.sql.*;
  2. SQLite db;
  1. void setup()
  2. {
  3. size( 100, 100 );
  4. db = new SQLite( this, "RGBacteria.db" );
  5. if ( db.connect() )
  6. {
  7. db.query( "SELECT name as \"Name\" FROM SQLITE_MASTER where type=\"table\"" );
  8. while (db.next())
  9. {
  10. println( db.getString("Name") );
  11. }
  12. db.query( "SELECT * FROM table_one" );
  13. while (db.next())
  14. {
  15. println( db.getString("field_one") );
  16. println( db.getString("M03") );
  17. }
  18. }
  19. }

Here’s a video demonstration.

_conclusions

This activity develops the first draft to the final draft interface, the general idea is to the graphical representation that will help reading physics bacteria, in the part of the learned programming color sensor connection, data management SQL and use graphical interface for libraries.

I think the interface is an important part of the project, the end is how the processes communicate with the device and how to manage them.

_files

RGBacteria-code
RGBacteria-db
_
Original source: http://academy.cba.mit.edu/classes/interface_application_programming/index.html

Contact:  fernando.meneses@udem.edu / fernandomeneses@nodolab.com /  f  /  in  /  g+ / b / vmx / w