getting started

● I had never worked on any of the topics before Fab Academy so it was really good to know all of the diversified tools and languages which help me create a GUI that interfaces with my board from the output devices week.

● I planned on using the RGB LED board which I made for the assignment of output devices (Week 12), for this week's GUI assignment. And for programming the same I shall use the FabISP that I made in Week 04.

● I decided to work on Processing, which is an open source free software to download. It is a flexible software sketchbook and a language how to code within the context of the visual arts and visual literacy within technology. Wendy recommended me to go through a series of Tutorial videos by Dan, who very interactively explains everything about processing starting from the introduction to much more advanced practices of the same.

● I invested good amount of time and effort getting to know more about it by going through the tutorials and some previous year's students as well. One thing I found interesting was Processing was more or less similar to Arduino in terms of the javascript or the sketch that we create in the IDE software.

● I realized that writing a the code from scratch in processing would be a real strugle for me and as prof. Neil say's, stand on the shoulders of giant. So, I decided to research a bit more about what interesting GUI previous year students created using Processing for RGB LED.

● I found a rather interesting page of Israa Rabbaa, who is actually a student of Fab Academy 2018 at Fab Lab Irbid. She has documented really well and I genuinely appreciate her work which helped understanding processing and arduino for this particular assignment.

● She operated the RGB LED by creating a GUI on processing which had four buttons to operate the LED by displaying basic colors such as Red, Blue, Green, Random and an OFF Button to turn off the LED. It was a rather simple code to understand because she had explained it nicely as well.

● It was essential to import the serial library in processing to be able to connect through Arduino serial port, this is a very important step to start with.







● In order to create the buttons she instructed to download, unzip and a controlP5 library into processing from this LINK.

● controlP5 is a library written by Andreas Schlegel for the programming environment processing Controllers to build a graphical user interface on top of your processing sketch include Sliders, Buttons, Toggles, Knobs, Textfields, RadioButtons, Checkboxes amongst others and can be easily added to a processing sketch. They can be arranged in separate control PGraphics contexts, and can be organized in tabs or groups.

● The library has to be copied in the libraries folder in processing download location. Following these steps the library will appear in the processing software as shown below.







● So, the first step for me was to test the very same code on the board created by me and see if it worked. And it did work very well, which gave me a confidence booster that I could definitely play around with her code in Processing and also in Arduino to add more colors, changing the background color and size of the display screen.

● Then moving on, it was my turn now to add more color options with button in the original code.

● In the following series of images, I have tried my best to explain all the functions used in creating the GUI using processing.

● Starting with adding the libraries

● Defining objects for controlP5 and serial myPort

● Defining button font for all buttons

● Void setup for the main display window of the GUI with size command, to create new object with desired font type and size.







● Creating buttons for each new color I added such Brown, Pink, Yellow and Orange along with retaining the colors from before.

● Setting the positions for button, button font and the most important of all the color codes for respective color, also displayed as caption.

● Repeating the same code for all the colors.







● Following the same process for OFF button. ● Allowing the connection from myPort with COM9 where my Arduino was actually connected to my FabISP during the programming.







● Next step, to give a header name for the GUI as RGB LED Control on display screen with background color, text color and size and position of the content.







● Moving on to the most important part of the code to receive the data.

● defining function command myPort.write for each of the Color button, that once pressed, send the particular alphabet to Arduino, when Arduino receive then that particular color will be displayed on the LED and follow the same steps for all the color with different alphabets.







● Following the same command for OFF button as well.

final display screen

● Download the modified Procsessing code for GUI HERE

processing code (modified)

import controlP5.*; // import controlP5 library import processing.serial.*; // import serial library ControlP5 cp5; // define cp5 as a ControlP5 object Serial myPort; // define myPort as a Serial object PFont ButtonFont; void setup(){ // create display window size(650,650); // define size cp5= new ControlP5(this); // create new object ButtonFont =createFont("Georgia",20); // define font type cp5.addButton("BROWN") // create Brown button .setPosition(215,100) // position of button .setSize(95,95) // define size of button .setFont(ButtonFont) // font type for button .setColorCaptionLabel(color(139,69,19)); // font color for the button // follow the same commands for respective color codes cp5.addButton("PINK") .setPosition(350,100) .setSize(95,95) .setFont(ButtonFont) .setColorCaptionLabel(color(255,20,147)); cp5.addButton("YELLOW") .setPosition(215,300) .setSize(95,95) .setFont(ButtonFont) .setColorCaptionLabel(color(255,255,0)); cp5.addButton("ORANGE") .setPosition(350,200) .setSize(95,95) .setFont(ButtonFont) .setColorCaptionLabel(color(255,165,0)); cp5.addButton("RED") .setPosition(215,200) .setSize(95,95) .setFont(ButtonFont) .setColorCaptionLabel(color(255,0,0)); cp5.addButton("GREEN") .setPosition(350,300) .setSize(95,95) .setFont(ButtonFont) .setColorCaptionLabel(color(0,255,0)); cp5.addButton("BLUE") .setPosition(215,400) .setSize(95,95) .setFont(ButtonFont) .setColorCaptionLabel(color(0,0,255)); cp5.addButton("AQUA") .setPosition(350,400) .setSize(95,95) .setFont(ButtonFont) .setColorCaptionLabel(color(127,255,212)); cp5.addButton("OFF") .setPosition(282,500) .setSize(95,95) .setFont(ButtonFont); myPort = new Serial(this, "COM9",9600); // connect myPort to COM9 } void draw(){ // draw title text background(224,255,255); //set background color fill(0); // set fill textSize(30); // text size text("RGB LED CONTROL", 190,50); // wirte the title and position } void RED(){ myPort.write('r'); // when RED pressed, send 'r' to serial port and when arduino receives 'r', RED color will light up // follow the same commands for respective color characters to be sent } void BROWN(){ myPort.write('w'); } void PINK(){ myPort.write('p'); } void YELLOW(){ myPort.write('y'); } void ORANGE(){ myPort.write('e'); } void GREEN(){ myPort.write('g'); } void BLUE(){ myPort.write('b'); } void AQUA(){ myPort.write('a'); } void OFF(){ // to switch off the LED myPort.write('o'); }

● I also modified the Arduino code for the same, as explained below.
- Include SoftwareSerial library for communication
- Define integer for respective LED color.
- Setup respective pins as output
- Serial begin communication at 9600 bits per second
- Loop routine, send data when received..
- Read characters from incoming serial data for each color.
- Defining integers, setting value and setting brightness for Red, Blue and Green LEDs.

● Download the modified Arduino code for GUI HERE

arduino code (modified)

#include (SoftwareSerial.h) // include serial library for communication SoftwareSerial serial (0,1); int RED = 9; // Define integer for red color leg of RGB to pin 9 int GREEN = 7; // Define integer green color leg of RGB to pin 7 int BLUE = 10; // Define integer blue color leg of RGB to pin 10 void setup() { RGBcolor(0,0,0); pinMode(RED, OUTPUT); // Set RED pin as an output pin pinMode(GREEN, OUTPUT); // Set GREEN pin as an output pin pinMode(BLUE, OUTPUT); // Set BLUE pin as an output pin serial.begin(9600); // open serial port, sets data rate to 9600 bps } void loop() { if(serial.available() > 0){ // send data to serial only when data is received char Mycolor = serial.read(); // read character from incoming serial data if(Mycolor == 'r'){ // if received 'r' then turn LED into RED RGBcolor(255,0,0); // provide RGB code for red color } else if (Mycolor == 'w'){ RGBcolor(139,69,19); // for brown color } else if (Mycolor == 'p'){ RGBcolor(255,20,147); // for pink color } else if (Mycolor == 'y'){ RGBcolor(255,255,0); // for yellow color } else if (Mycolor == 'e'){ RGBcolor(255,165,0); // for orange color } else if (Mycolor == 'g'){ RGBcolor(0,255,0); // for green color } else if (Mycolor == 'b'){ RGBcolor(0,0,255); // for blue color } else if (Mycolor == 'a'){ RGBcolor(127,255,212); // for aqua color } else { RGBcolor(0,0,0); // to switch OFF } } } void RGBcolor(int Rval, int Gval, int Bval){ // defining integers for each of the three Rval = 255-Rval; // defining value for each of the LED Gval = 255-Gval; Bval = 255-Bval; analogWrite(RED,Rval); // to set the brightness of each LED analogWrite(GREEN,Gval); analogWrite(BLUE,Bval); }

successfully uploaded the codes

check out the gui video for
rgb led control

learning outcomes

● This was one of those week's which shall help me great deal in future, even after the Fab Academy. I learned a lot through processing, how to add libraries, create buttons, font, color for the same, setup serial port for connections and sending characters to operate the LED's for respective colors.

● Also the ability to connect Arduino and Processing to achieve GUI that has been created. I wish to work on similar projects in near future.

● Very new and fresh experience for me and I look forward to upcoming weeks.