As I started working with my shiny new Arduino board I quickly learned how to build basic circuits and program the micro controller to respond to various stimuli, but what really interested me in the technology was the ability to send information between the board and a computer. I’ve done a fair amount of programming in Processing and was excited to bring some of my work off screen. There is a nice script on the Arduino site on sending data from the board to a computer to control elements within a processing sketch. Unfortunately, the reverse is not as well documented.
I needed a script to send multiple variables from Processing to an Arduino to control a few components. After a bit of research, and more trial and error, I put together a script which controls the brightness of three LED’s through a virtual interface on a monitor. Here are my scripts and the circuit I came up with. It seems simple enough to me but if anyone has suggestions I’d love to hear them.
Here three color LED’s are connected to pins 9, 10, and 11 which can use Pulse Width Modulation (PWM) to control the brightness of each LED. They are connected to their respective pins through appropriate resistors and also connected to a grounded row in the bread board. In the image I am using the prototyping shield from Adafruit which makes it easy to build small circuits.
arduino code
code formatterLED Pixel
/* Led Pixel script - www.anthonymattox.com * recieves input from processing script */ int led0=9; int led1=10; int led2=11; int rval=0; int gval=0; int bval=0; char buff[]= "0000000000"; void setup() { Serial.begin(9600); pinMode(led0,OUTPUT); pinMode(led1,OUTPUT); pinMode(led2,OUTPUT); } void loop() { analogWrite(led0,bval); analogWrite(led1,gval); analogWrite(led2,rval); while (Serial.available()>0) { for (int i=0; i<10; i++) { buff[i]=buff[i+1]; } buff[10]=Serial.read(); if (buff[10]=='R') { rval=int(buff[9]); } if (buff[10]=='G') { gval=int(buff[9]); } if (buff[10]=='B') { bval=int(buff[9]); } } delay(10); }
The script uses an array called buff to store all the incoming serial data. The While loop takes each incoming character and adds it to the end of the buff array after shifting all the values in the array down one. If it receives an indicator character, something created arbitrarily, it takes the previous character and puts it into another variable to be used later. Processing is sending a continues stream of data and this system of indicators allows the Arduino to take out the necessary information and use it to control the LED’s. Processing sends the indicator after the information so if a value is ever multiple characters when it gets the indicator the values are already in the buff array and can be used.
The Processing script creates three instances of a slider object and in every loop of draw sends the value of each slider, serially through a USB cable, followed by the appropriate indicator character.
processing code
code formatterLED Pixel Processing Script
import processing.serial.*; Serial port; slider s1; slider s2; slider s3; void setup() { size(200, 296); smooth(); println("Available serial ports:"); println(Serial.list()); port = new Serial(this, Serial.list()[0], 9600); s1=new slider(70,20,255, color(255,0,0)); s2=new slider(100,20,255, color(0,255,0)); s3=new slider(130,20,255, color(0,0,255)); } void draw() { background(0); s1.render(); s2.render(); s3.render(); port.write(s1.p); port.write('R'); port.write(s2.p); port.write('G'); port.write(s3.p); port.write('B'); }
And the slider class which builds the interface looks like this
processing code
code formatterSlider UI Element Class
/* Slider Class - www.anthonymattox.com */ class slider { int xpos, ypos, thesize, p; boolean slide; color c, cb; slider (int x, int y, int s, color col) { xpos=x; ypos=y; thesize=s; p=0; slide=true; c=col; cb=color(red(c),green(c),blue(c),150); } void render() { stroke(40); strokeWeight(10); noFill(); line(xpos,ypos,xpos,ypos+thesize); stroke(80); strokeWeight(2); noFill(); line(xpos,ypos,xpos,ypos+thesize); noStroke(); fill(cb); ellipse(xpos, thesize-p+ypos, 17, 17); fill(c); ellipse(xpos, thesize-p+ypos, 13, 13); //text(thesize-dialy,xpos+10,dialy+ypos+5); // replace the +'s with double ampersands (web display issues) if (slide=true + mousePressed==true + mouseX<xpos+15 + mouseX>xpos-15){ if ((mouseY<=ypos+thesize+10) && (mouseY>=ypos-10)) { p=(3*p+(thesize-(mouseY-ypos)))/4; if (p<0) { p=0; } else if (p>thesize) { p=thesize; } } } } }
Let me know is this is helpful or if you have any questions or problems.
Frex.
Wow, that’s a very great job.
Thank you very much. It is extactly what I was looking for.
The guy that doesn’t know any further (ShowgetteR)
I tried everything, but I always get the same error:
“A web color (such as #ffcc00) must be six digits.”
Below that:
“Bad error line: -2″
I really don’t know how to move on, what am I doing wrong? I just need to send these values quickly, as I just want to regulate 2 motors because I have no Potentiometers left…
Any help would be appretiated.
tony
The problem is on line 38 of the slider class.
I have a little problem with my CMS which will be fixed very soon. The ampersands in my code turn into funny strings. If you just fix that in the conditional statement on line 38 it should work fine. It should look like this
if ((mouseY<=ypos+thesize+10) && (mouseY>=ypos-10)) {
Louw H
Hi there, I know this sounds stupid, but is that code (not the arduino code – the processing and slider class) written in Java? It looks the same? If not please inform me. BTW, i like your idea very much! Great work!
tony
The other code, run on the computer which communicates to the external Arduino board via usb, is scripted in a language called Processing. The language is based on Java and remains quite similar to it, aside from some nice simplifications and many built in functions for working with graphics. The basic structure of the language is the same.
You can see more information about it on the Processing site as well as download it for free. Arduino is actually a sister project of Processing and the Arduino language, although built on C is modeled after Processing.
Pingback: Guilherme Martins : RGB Mixer – Processing to Arduino
Mark
Hi, thanks for your example. Was wondering if you could explain the formula for the p variable. p=(3*p+(thesize-(mouseY-ypos)))/4; I can’t seem to grasp what this is doing!! I know it works, but would like to understand it.
Anthony
It’s been a while since I’ve looked at this code, but I believe it adds a bit of easing to the motion of the slider by averaging the current position and the mouse position. If I’m understanding it right, p=thesize-(mouseY-ypos) should work fine to.
Mark
Thank you very much, I considered that might be the case, As I am still learning the basics, I don’t always understand the aesthetics written into the code! This is very instructional as well.
Nathan
I keep getting the error message “cannot convert from String to char[]” for the line char buff[]= “)000000000″; when trying to export as an applet. Any suggestions?
Robin Pooley
Really great work!
Thank you.
I am looking to build an LED cube and want it to represent activity on my companies system. I want the cubes lights to flicker when a user connects to the site or requests a page and want red LED’s to light up when an error occurs. I will keep you posted as to my progress :-) Thanks again.