processing interaction with a pic

[dazz]

So owning an arduino as well as pics, i've came across lots of referances to a program called processing, so what is it and what does it do, in simple terms it adds interaction betwix your program and your pc, and as the arduino code is almost identical to processing they integrate seamlessly, so i wanted to find out if it would work with a pic and an arduino that had been programmed in flowcode, before i begin im not an expert merely a medling monkey,and have only been playing with the software for a few days, and have managed to send and recieve data to a pic, now as processing and serial comms on a pic are new to me what follows will be rough n ready, but if i can do it anyone can, if you want to carry on ,then read on, if you want me to carry on ask as theres little point in typing lots of stuff if theres no interest.

Requirements
Processing http://processing.org/

Download and unzip, start the program and we can begin, Lets make a dead simple program and slowly add to it, as ive already said im a novice, so the code will be at beginer level. type the following in the code window and click the arrow icon to run ,

Code: Select all

void setup(){
size (600,600);
}

so what happened , we used void setup(){ } to create an area for all our setup data
the instruction Size(600,600) creates a window with those dimentions, have a play change the sizes, there your first bit of processing code not very inspiring i know but it works.
So lets start changing a few bits and adding some more

Code: Select all

void setup(){
      size(600,600);
background (21,45,120);
}

now we added the background() if you add a number betwix 1 and 255 in the () part you will get a grey scale background, but you will notice ive added (21,45,120) which is an rgb value to give us blue, you can also add the hex representation of the colour, so now put the value (#BB2AD) and we get a purple ,in the tools section of the software theres a colour selector use it and you can choose your own colours

Right lets add a few more bits, im jumping ahead a bit here but it will make everything later easier, add the lines below to your code above,run it you will notice when you move your mouse the coordinates will appear in the bottom of the processing window, but notice it only works in the window ,if you move it out of the bounds of the window it doesnt work, we added the draw function all your graphic changes will go in there, we also used println this simply means print at the bottom of the processing window, and the mousex and mousey get the coordinates try it

Code: Select all

void draw(){ 
 {
      println(mouseX);
      println(mouseY);
     }
    }

now we will add a few more lines in the setup area and add a plain old box , we will add fill() and rect(),
lets look at rect first you define the start and end points move the mouse to each corner of the top box and you will see how you need to set it up again playwith it(i cheated i simply moved the mouse to where i wanted my box to start and noted the numbers and the same for the oppsite end, try it, next the fill() again its for a colour either greyscale, rgb,hex , ok so i added two boxes of the same colour, you can also add transparency to a colour by addin another number, so find the line fill(13,200,10,); and add another comma and a value on the end try fill(13,200,10,4); run it again see what happened the bottom box changed colour. your code should now look like below .

Code: Select all

void setup(){
      size(600,600);
      background (21,45,120);
      fill(13,255,10);
      rect(13,577,10,76);
      fill(13,200,10,);
      rect(13,30,500,76);
      
} 

Code: Select all

void draw(){ 
 {
      println(mouseX);
      println(mouseY);
     }
    }

Well see tthat bottom box it annoying me as its not square so change the bottom rectangle to a sqaure, see below if you get stuck, then change it back to its original size

Code: Select all

background (21,45,120);
      fill(13,255,10,125);
      rect(13,570,33,590);// made the box a square
      fill(13,255,10);
      rect(13,30,500,76); // added an alpha value 76 play with this and see

now we can start adding interaction we will add a mouse press and change the colour of the lower box add the code bellow after the println(mouseY);

Code: Select all

if (mousePressed == true) {
      fill(200,175,10);
      rect(13,570,33,590);  // if mouse button pressed change colour and size of box

Run again and press the mouse button, now were getting somewhere as with tiding up this can control say a light etc, change the mousepressed so you get a differen colour for each button (hint use the help files)

I will add a few more posts as ive got time
Regards
Dazz

[dazz]

last time we finished with a few boxes, and a mouse press, this time we will make it a bit more usefull, the code below will detect if the left mouse button is pressed and react accordingly so replace the mouse pressed with the following,run the sketch and see what happens.

Code: Select all

if (mousePressed && (mouseButton == LEFT)) {
   
      fill(255,0,0);
      rect(13,577,10,76);

now as we want the box to be the basis of a switch lets change the box colour to green to signify on so change the fill above to green see below, once you have finished with that change the box to red as a default simply find the box in the setup section and change the fill to (255,0,0) .

Code: Select all

 fill(0,255,0);
      rect(13,577,10,76);//  box red to green

once you have finished with that change the box to red as a default simply find the box in the setup section and change the fill to (255,0,0) .

next up lets work on the other mouse button simply replace the mousepressed with the following

Code: Select all

if (mousePressed && (mouseButton == LEFT)) {
  
      fill(0,255,0);
      rect(13,460,33,30);
     
  } else if (mousePressed && (mouseButton == RIGHT)) {
      delay(600);
      fill(0,255,0);
      rect(13,460,33,30);;
     
}

at this point we need a quick check of the code to see if everything is in the right places etc, you will need to do some changes to the setup simply delete the fill and rect of the two lowwer boxes and replace it with the following all we are doing is setting the lower boxes to default red

Code: Select all

fill(255,0,0);
      rect(13,460,33,30);
      fill(255,0,0);
      rect(539,460,33,30);

so now we have a quick set of boxes which respond to a mouse press, now lets add some text to the boxes, you can use the default font or change it, as im learning the software i decided to go down the change route,so to define the font(were going to refer to our font as dave in the program). we add PFont to the top of our sketch above the set up area,add the code below

Code: Select all

PFont Dave;     // The display font:

But as we are using a different font than the default we need to save it to the folder containing the sketch, so click on tools then create font (for now find SegoePrint-Bold-48.) select it and click ok ,this save the font in the sketch folder, now we simply need to set it all up in the setup section of our sketch, add the following lines at the bottom of the setup'

Code: Select all

Dave = loadFont("SegoePrint-Bold-48.vlw");
  textFont(Dave, 18);

what we did above is to call our font for use Dave = loadFont("SegoePrint-Bold-48.vlw"); the next line sets up the default size ( textFont(Dave, 18); ) this can be called anywhere in draw to change the size on the fly, replace the code in the left mouse button bit of code, run your sketck and see it in action, when your done delete the textFont(dave,28) bit and run again , nowthe text is the same size, and when we click our boxes they change fron red to green with the word on.

Code: Select all

  delay(600);
     fill(0,255,0);
     rect(539,460,33,30);
     fill(0,0,255);
     textFont(Dave, 28);
     text("On",542,480);

Next time we will add some serial functionality so you can turn on an led or two, but before we do that we will tighten up our sketch a little as at present if we click the mouse anywhere in the window the boxes change ,so next time we will make sure the boxes only change when we click within them. here is the full code for what we have done so far.

Code: Select all

PFont Dave;     // The display font we will call ours dave(call it what you want)
void setup(){
      size(600,600);//Size of our window
      background (21,45,120); //background colour (rgb)
      fill(255,0,0); //fill for left box
      rect(13,460,33,30);//size and position of right box
      fill(255,0,0);//fill for left box
      rect(539,460,33,30);//size and position of right box
      Dave = loadFont("SegoePrint-Bold-48.vlw"); // load our font
      textFont(Dave, 18);// set font size
}     

void draw(){ 
 
if (mousePressed && (mouseButton == LEFT)) {
    
      fill(0,255,0);
      rect(13,460,33,30);
      fill(0,0,255);
      text("On",16,480);//add text to box
  
  } else if (mousePressed && (mouseButton == RIGHT)) {
      delay(600);
      fill(0,255,0);
      rect(539,460,33,30);
      fill(0,0,255);
      text("On",542,480);  //add text to box  
 }
}

Reagards
Dazz

[JohnCrow]

Looks an interesting program
Downloaded it, will have a play when I get time.

[dazz]

in the last post we got as far as clicking and changing the box, i did say we will tighten the code i spent hours trying to get the box switched off, so wrote a flowchart for something else to take my mind of this and had one of those moments where the answer jumps out of the pc and slaps you silly for being stupid .
The answer was boolean either 1 or 0 or true or false(depending how you look at it)
so simple put the following lines of code above the PFont Dave at the top of your sketch

Code: Select all

boolean buttonr = false;
boolean buttonl = false;

so next up we need to make sure that the box only changes when we click inside it

so we add the following to our mousepressed function in the draw secion, run the sketch and see what happens now the left button will only toggle inside the bounds of the box.

Code: Select all

if (mousePressed && (mouseButton == LEFT&& mouseX > 13 && mouseX < 13+33 && mouseY > 460 && mouseY < 460+30))

cool huh next we add our boolean function to the mousepressed we add the following code

Code: Select all

buttonl = !buttonl

that tells us if the button is pressed or not to prove it add the following code underneath the bit of code you just added what this does is prints out to the watch window(sames as add variable in flowcode simulation).run the sketch again and see what happens,yup when you press the left mouse button it prints true or false (this is a great way to debug your sketch)

Code: Select all

println(buttonl);

now its time to combine everything so far into a far better easier sketch, but to do so we need to create a mousepressed function, so at this point we will jump ahead delete everythin beneath the void draw function and add the following code

Code: Select all

void mousePressed() {

   if (mousePressed && (mouseButton == LEFT&& mouseX > 13 && mouseX < 13+33 && mouseY > 460 && mouseY < 460+30)) {
    buttonl = !buttonl;

  } else if (mousePressed && (mouseButton == RIGHT && mouseX > 539 && mouseX < 539+33 && mouseY > 460 && mouseY < 460+30)) {
    buttonr = !buttonr;
   println(buttonr);
 }

so weve set up a nice little function for pressing our mouse, you will notice if you try to run the sketch it will grumble or work in a strange way, we now need to rewrite our draw function to update the state of the boxes, so add the following beneth the void draw and above the void mousepressed, run it and see what it does, when everything is running ok we can delete all the println statements but for now leave em be

Code: Select all

 if (buttonr==true) {   // detects our right mouse press
    delay(600);//you may have noticed that when pressing the mouse button it kept on going from true to false several times, theres a few ways to cure this at this stage ive added a delay try it and see.
   
    fill(0,255,0);// selects green as our box colour

    rect(539,460,33,30); 
    fill(0,0,255);// selects blue for our text
    text("On",542,480);//adds text to our box
    
  } else if (buttonl==false){// our default for off
    fill(255,0,00);
    rect(539,460,33,30);   
    fill(#3F25A1);
    text("Off",541,480); 
  }

Try it now we get a nice easy response one state at a time,copy the above and paste it beneth itself in the sketch, i will leave you to change the values etc to use the left button .

I said i would add serial to this post but as i had to rewrite the whole sketch (the joys of learning i will do it next time, as i said previously i've only been using this software for a few days so all my posts are at a basic noob level, hence the complete rewriting of the sketch already . I promise the next post will add serial comms albeit at a beginers level and at the same time a flowchart to talk to the pc using the uart.
Sorry its in dribbs and drabs but i get things running then type it up, heres the sketch with all this posts changes

Code: Select all

boolean buttonr = false;
boolean buttonl = false;
PFont Dave;     // The display font we will call ours dave(call it what you want)
void setup(){
      size(600,600);
      background (21,45,120);
      fill(255,0,0);
      rect(13,460,33,30);
      fill(255,0,0);
    rect(539,460,33,30);
      Dave = loadFont("SegoePrint-Bold-48.vlw");
      textFont(Dave, 18);
}     

void draw(){ 
  if (buttonr==true) {
    delay(600);
    fill(0,255,0);
    rect(539,460,33,30);
    fill(0,0,255);
    text("On",542,480);
    
  } else if (buttonl==false){
    fill(255,0,00);
    rect(539,460,33,30);   
    fill(#3F25A1);
    text("Off",541,480); 
  }
 if (buttonl==true) {
    delay(600);
    fill(0,255,0);
    rect(13,460,33,30);
    fill(0,0,255);
    text("On",16,480);
    
  } else if (buttonl==false){
    fill(255,0,00);
    rect(13,460,33,30);   
    fill(#3F25A1);
    text("Off",14,480); 
  }
  }
  void mousePressed() {

   if (mousePressed && (mouseButton == LEFT&& mouseX > 13 && mouseX < 13+33 && mouseY > 460 && mouseY < 460+30)) {
    buttonl = !buttonl;
println(buttonl);
  } else if (mousePressed && (mouseButton == RIGHT && mouseX > 539 && mouseX < 539+33 && mouseY > 460 && mouseY < 460+30)) {
    buttonr = !buttonr;
   
 }
  }

[dazz]

This time we will actualy start with the serial comms bit yup i know it's late but my brain has gone into writing mode, the first thing we need to do is import the serial libs so for now create a new sketch and paste the following at the top

Code: Select all

import processing.serial.*;

now we add a port call it what ever you want we will call our port monkeyPort (you need a capital P on Port), so add the following we are simply loading the serial library and naming the port function monkeyPory(call it whatever you want)

Code: Select all

Serial monkeyPort;    // The serial port:

we now need a setup area for our window etc,yup you guesses it more code

Code: Select all

void setup(){
      size(600,600);
      background (21,45,120);
      fill(13,255,10,34);
      rect(13,577,10,76);
      fill(13,200,10);
      rect(13,30,500,76);
} 

Run it and see what happens yup just a few boxes, now add the following its that printlf again

Code: Select all

println(Serial.list());

run the sketch again now you will see it lists all the available serial ports, if you dont know which port you will be using run the sketch make a note of the ports,connect your hardware and run it again, if alls well you should see an extra port make a note of this number, and add the following code we add our port number to the [] in the following code mine is [3] after that we add our baud rate

Code: Select all

monkeyPort = new Serial(this, Serial.list()[3], 9600);

run the sketch without your hardware connected and it will grumble and highlight the line its not happy with, i think its fantastic as if you connect your hardware and try again it doesnt grumble proving that theres comms betwixt your pc and your pic.


this posts sketch

Code: Select all

import processing.serial.*;
Serial monkeyPort;    // The serial port:


void setup(){
      size(600,600);
      background (21,45,120);
      fill(13,255,10,34);
      rect(13,577,10,76);
      fill(13,200,10);
      rect(13,30,500,76);
      println(Serial.list());
      monkeyPort = new Serial(this, Serial.list()[3], 9600);

} 

next time a simple flowchart and our first data exchange

Regards
Dazz

[Spanish_dude]

Even though I don't like Arduino and Arduino code, I must say you put a lot of effort into this so keep it up !

[dazz]

Hi Spanish dude
I've done this as a simple way to interface a pic with a pc, as i cant do c or vb etc, i thought i'd try this, and so far its going well, i will post another part in a few days, just need to find the time

Regards
Dazz

[dazz]

Sorry its been a day or two, but have you ever wondered how your chosen microprocessor keeps acurate time, well look here, http://micro.magnet.fsu.edu/creatures/pages/rolex.html , i spent most of yesterday being amazed,by what was on that site worth a look but dont blame me if you spend far too long on there.

Last time i did a short sketch introducing serial comms, if you tried it you would have noticed that if the choosen com port was wrong or the comport not connected then it would error, but if you were connected and using the right comm port all was well, it was a quick way of showing how easy it is to establish comms, Did i say easy well that bit was but getting flowcode and processing to talk took a while, why because im stupid, yup had a homer simpson day trying to sort it out and in the end it was simple, both processing and flowcode communicate very well, but i had made a school boy error what i wanted to do was to send a capital A to switch on an output, i tried everyway in flowcode, but just could not get it to work, basically i set up a decision saying if "A" is received switch on port c0# instead of "A" i should of used 'A' , simple errors take the longest to sort out, moving swiftly on we will combine our last two sketches below is the sketch as we finished a couple of posts ago and this is the one we will modify.

Code: Select all

boolean buttonr = false;
boolean buttonl = false;
PFont Dave;     // The display font we will call ours dave(call it what you want)
void setup(){
      size(600,600);
      background (21,45,120);
      fill(255,0,0);
      rect(13,460,33,30);
      fill(255,0,0);
    rect(539,460,33,30);
      Dave = loadFont("SegoePrint-Bold-48.vlw");
      textFont(Dave, 18);
}     

void draw(){ 
  if (buttonr==true) {
    delay(600);
    fill(0,255,0);
    rect(539,460,33,30);
    fill(0,0,255);
    text("On",542,480);
    
  } else if (buttonl==false){
    fill(255,0,00);
    rect(539,460,33,30);   
    fill(#3F25A1);
    text("Off",541,480); 
  }
 if (buttonl==true) {
    delay(600);
    fill(0,255,0);
    rect(13,460,33,30);
    fill(0,0,255);
    text("On",16,480);
    
  } else if (buttonl==false){
    fill(255,0,00);
    rect(13,460,33,30);   
    fill(#3F25A1);
    text("Off",14,480); 
  }
  }
  void mousePressed() {

   if (mousePressed && (mouseButton == LEFT&& mouseX > 13 && mouseX < 13+33 && mouseY > 460 && mouseY < 460+30)) {
    buttonl = !buttonl;
println(buttonl);
  } else if (mousePressed && (mouseButton == RIGHT && mouseX > 539 && mouseX < 539+33 && mouseY > 460 && mouseY < 460+30)) {
    buttonr = !buttonr;
   
 }
  }

we shall start by adding what we did last time add the 4 lines of code below to the top of your sketch, the 1st line simply imports the serial libray, 2nd line we define our port name, the 3rd line we will add for future functionality basically we are setting up a string for recieving from the pic, 4th line is an ascii line feed so any time we send a 10 then the pic will know its the end of the message

Code: Select all

import processing.serial.*;

 Serial monkeyPort;    // The serial port:
 String inString;  // Input string from serial port:
 int lf = 10;      // ASCII linefeed

the following line go in the setup under the trextfont (Dave,18); bit you will remember from last time we used this to list our available ports and to choose our port and baud, the extra n,8,1.0 are just extra definitions and can be left out

Code: Select all

println(Serial.list());
      monkeyPort = new Serial(this, Serial.list()[3], 9600,'N', 8, 1.0); 

now we will add an action to our buttons and send a capital A and B to switch on led's connected to the pic, so in the mousepressed function you will notice two writes the first write sends Ascii 65 ( A ) to our pic, the second line sends a linefeed to signal the pic its finished sending data so beneth our println(buttonl); bit we add the following, at the same time add the same code to the buttonr bit but change the 65 A to 66 B

Code: Select all

monkeyPort.write(65);
monkeyPort.write(10);

now remember we set up a define for instring at the top now we are going to use it we create a function so at the bottom of your sketch add the following code, all we are doing is waiting for an incoming message then if one comes in we print it out in the bottom of the window,

Code: Select all

 void serialEvent(Serial monkeyPort) {
      inString = (monkeyPort.readString());
      println(inString);
   }

the last bit of code is all well and good but we need to add one last bit so that when you send data the sketch knows when it ends, so we add the following this needs to go into the last line of set up.

monkeyPort.bufferUntil(lf);


thats it for now, nearly forgot to add the flowcode its a simple comms using the uart of your pic, it runs of the intosc at 4Mhz so this needs to be set up by you( THIS IS NOT MY FLOWCHART I COPIED ONE OFF THE FORUM AND ADDED MY BITS(i hope the createor of the flowchart doesnt mind)), if your chip has an extended instruction set entry turn it off and also turn off watchdog timer and low voltage program. You will notice that our flowchart has four decisions and we only use Two A and B . C and D are there for you to workout how to switch the leds back off in processing. im adding the complete sketch here ,it is working fine, my hardware im using is a pic 18F27j53, easypic 7 dev board and a lot of luck.

There is so much more you can do with processing but its beyond my abilities t present to do fancy stuff, but you should by now see how simple it is to allow your pc and pic or avr to communicate, other things you could try is set up an LDR and send the values to processing then graph the data. Examples are on the web, you can also set up a wireless connection to talk to your pics etc.


code for this post bellow

Code: Select all

import processing.serial.*;

 Serial monkeyPort;    // The serial port:
 String inString;  // Input string from serial port:
 int lf = 10;      // ASCII linefeed
 boolean buttonr = false;
 boolean buttonl = false;
 PFont Dave;     // The display font we will call ours dave(call it what you want)

  
  void setup(){
      size(600,600);
      background (21,45,120);
      fill(255,0,0);
      rect(13,460,33,30);
      fill(255,0,0);
      rect(539,460,33,30);
      Dave = loadFont("SegoePrint-Bold-48.vlw");
      textFont(Dave, 18);
      println(Serial.list());
      monkeyPort = new Serial(this, Serial.list()[3], 9600,'N', 8, 1.0);
      monkeyPort.bufferUntil(lf);
  
    }     

  void draw(){ 
  
  if (buttonr==true) {
      delay(600);
      fill(0,255,0);
      rect(539,460,33,30);
      fill(0,0,255);
      text("On",542,480);
    }
  else if (buttonl==false){
      fill(255,0,00);
      rect(539,460,33,30);   
      fill(#3F25A1);
      text("Off",541,480); 
    }
  if (buttonl==true) {
      delay(600);
      fill(0,255,0);
      rect(13,460,33,30);
      fill(0,0,255);
      text("On",16,480);
   // monkeyPort.write("240");
   // monkeyPort.write(10);
    } 
  else if (buttonl==false){
      fill(255,0,00);
      rect(13,460,33,30);   
      fill(#3F25A1);
      text("Off",14,480);
   //monkeyPort.write("24");
    //monkeyPort.write(10); 
    }
  
 
 // while (monkeyPort.available() > 0) {
     // int lastIn = monkeyPort.last();
     // println(lastIn);
  //  }
  } 

  void mousePressed() {

  if (mousePressed && (mouseButton == LEFT&& mouseX > 13 && mouseX < 13+33 && mouseY > 460 && mouseY < 460+30)) {
      buttonl = !buttonl;
      println(buttonl);
      monkeyPort.write(65);
      monkeyPort.write(10);
  }
  else if (mousePressed && (mouseButton == RIGHT && mouseX > 539 && mouseX < 539+33 && mouseY > 460 && mouseY < 460+30)) {
      buttonr = !buttonr;
      println(buttonr);    
      monkeyPort.write(66);
      monkeyPort.write(10);
   }
 }
  

  void serialEvent(Serial monkeyPort) {
      inString = (monkeyPort.readString());
      println(inString);
   }
   

rs232StringMacro.fcf

(14.81 KiB) Downloaded 545 times

If anyone want me to carry on with these posts just holler

Regards
Dazz 0) {
// int lastIn = monkeyPort

[christoph]

Hi Dazz,
I hopped over to here 'cos best as a continuation with THIS post rather than my original pic-driven piezo post.
I cant download rs232StringMacro.fcf - I get the message "the file you are loading was made by a newer version of FlowCode(42>31) and may not load correctly"
When I continue, the next message says "unable to create microcontrller pic8as the definition file pic8.FCD is missing or corrupt.[0x200]"

Thinking back over some of your last @piezo posts Dazz, is this to do with configuration options again?

Chris

[medelec35]

Hi Chris,

cant download rs232StringMacro.fcf - I get the message "the file you are loading was made by a newer version of FlowCode(42>31) and may not load correctly"

You will get that message when you try to open a flowchart that was created with a later version (e.g Flowcode V5.X) with an earlier version e.g Flowocde V4.X

Martin

[dazz]

Hi Chris
again i forgot you were using v4, if i got time tommorow i will add a v4 fcf file to this thread
Regards
Dazz

[christoph]

Ahh, many thanks Dazz - in the meantime I have downloaded 'processing' and printed off the pages from this post and I will go through your tutorial and should be ready when you are very kindly able to do the mod for V4 - I have been thinking for a while now how incredibly useful it would be to be able to interface with my lap top and/or desk top but couldn't see a way to do it.

Please know how grateful I am for your help and expertise and to Martin too - I did see you noted what I thought would be the answer Martin but great that Dazz can do something for us at V4! I am sure a lot of other forum-followers will be interested as well.

Thanks fellars - one day I may be helping others too although please don't hold your breaths, I got a long way to go yet!
Cheers'
Chris

[dazz]

Hi
attached is a V4.5 version, v busy at the mo so copied it over but havent tested it

Regards
Dazz

rs232StringMacroV4.5.fcf

(11.5 KiB) Downloaded 408 times

[christoph]

Many thanks and much appreciated Dazz - will see how I get on and thanks for sparing the time doing that.
Best regards,
Chris