#include <TimerOne.h>            
      #include <PZEM004T.h>
      #include <LiquidCrystal.h>


      int dutycycle = 0;     // Initailize duty cylce variable as integer data type
      int incomingByte = 0;
      PZEM004T pzem(2,3);  // (RX,TX) connect to TX,RX of PZEM
      IPAddress ip(192,168,1,1);
      LiquidCrystal lcd(12, 11, 4, 5, 6, 7);


       void setup()               // Setup function
      {
        Serial.begin(9600);
        pinMode (9, OUTPUT);             // set pin 9 as an output pin for pwm
        pinMode (10, OUTPUT);            // set pin 10 as an output pin for pwm
        Timer1.initialize(20000);             // Initailize timer1 time period as 20 milli second (50 Hz frequency)
        TCCR1A = (TCCR1A & 0x0F) | 0xB0 ;             // set pin 10 inverted of pin 9
        pzem.setAddress(ip);
        lcd.begin(16, 2); // lcd rows and columns
       }


      void loop()              // loop function starts
      { 
      if (Serial.available() > 0)
      {
      incomingByte = Serial.read ();  
      dutycycle = map(incomingByte, 0, 255, 0, 1023);
      Timer1.pwm(9, dutycycle, 20000);            // Timer1.pwm function takes argument as (pin no. , dutycycle , time period)
      Timer1.pwm(10, 1023-dutycycle, 20000);


      float v = pzem.voltage(ip);
      if (v < 0.0) v = 0.0;

      Serial.print(v);Serial.print("V; ");
      lcd.clear();
      lcd.setCursor(0,0);
      lcd.print("V= ");
      lcd.setCursor(2,0);
      lcd.print(v);


      float i = pzem.current(ip);
      if (i < 0.0) i = 0.0;

      Serial.print(i);Serial.print("A; ");
      lcd.clear();
      lcd.setCursor(9,0);
      lcd.print("A= ");
      lcd.setCursor(11,0);
      lcd.print(i);


      float p = pzem.power(ip);
      if (p < 0.0) p = 0.0;

      Serial.print(p);Serial.print("W; ");
      lcd.clear();
      lcd.setCursor(9,1);
      lcd.print("W= ");
      lcd.setCursor(11,1);
      lcd.print(p);


      float e = pzem.energy(ip);

      Serial.print("PF= ");Serial.print((p)/(v*i));
      lcd.setCursor(0,1);
      lcd.print("PF=");
      lcd.setCursor(3,1);
      lcd.print((p)/(v*i));

      Serial.println(v);
      Serial.println(i);
      Serial.println(p);
      Serial.println((p)/(v*i));

     delay(100);  
     }
     }               // loop function ends

i want to send the value of "v","i","p" and "pf" and show it in processing window, this is my processing code :

      import controlP5.*;
      import processing.serial.*;

      ControlP5 cP5;

      Serial arduino;
      String val= "0";

      void setup() 
      {
      size(800, 550);
      println(Serial.list());
      String portName = Serial.list()[0];
      arduino = new Serial(this, portName, 9600);

      cP5 = new ControlP5(this);
      cP5.addSlider("ATUR DUTY CYCLE", 0, 255, 0, 210, 155, 350, 50);
      }

      void draw() 
      {
      background(#614DED);
      textSize(20);
      fill(#F5ED00);
      text("PENGENDALIAN INVERTER FULL BRIDGE SATU FASA", 140, 30);
      textSize(20);
      text("SECARA WIRELESS BERBASIS ARDUINO", 200,60);
      text("ARUS", 210, 300);
      text("TEGANGAN", 460, 300);
      text("DAYA", 210, 400);
      text("FAKTOR DAYA", 460, 400);

      if (arduino.available() >0){
      delay(100);
      val=arduino.readString();}  

      textSize(18);
      fill(#FAFF08);
      text(val, 210 ,330 );

      textSize(18);
      fill(#FAFF08);
      text(val, 460, 330);

      textSize(18);
      fill(#FAFF08);
      text(val, 210, 430);

      textSize(18);
      fill(#FAFF08);
      text(val, 460, 430);

      }

       void controlEvent(ControlEvent theEvent) {
       if(theEvent.isController()) {

       int val = int(theEvent.getController().getValue());
       arduino.write(val);
       } 
       }

Thank you very much

I`ve a array of ellipse Objects. Every object has his variable of size in the constructor. In a second screen, via controlP5, a slider that change the size of every ellipse. What i want is change the size of an ellipse object when isClicked is true, and in that particular object, and store that value. But i cant, and i dont know exaclty why. I think that when i change the size in the constructor every object take the same value.

here the code, sorry for my very bad english, hope you understand:

(in resume: click the object, change it value, store the value. click in another object, and change it value (different of object 1)…etc.)

import controlP5.*;

ArrayList<Sphere>s;
PWindow controller;


void settings() {
  size(500, 500, P3D);
}


void setup() {
  controller = new PWindow();

  s = new ArrayList<Sphere>();
  s.add(new Sphere(new PVector(random(width), random(height)), 255, 50, 0));
}

void draw() {
  background(0);
  pushMatrix();
  select();

  for (Sphere s : s) {
    s.display();
    s.isOver(mouseX, mouseY);
  }
  popMatrix();
}

void select() {
  for (Sphere s : s) {
    if (s.isClick) {
      println(s.id, "HOLA");
      s.c = 25;
      println("");
    }
  }
}

void mousePressed() {

  if (mouseButton==RIGHT) s.add(new Sphere(new PVector(mouseX, mouseY), 255, 50, s.size()+1));

  for (Sphere s : s) {
    if (mouseButton==LEFT && s.over) {
      s.isClick = true;
    } else {
      s.isClick = false;
    }
  }
}

class Sphere {

  float c, size;
  float x, y;
  ArrayList<PVector> p = new ArrayList<PVector>();
  boolean over = false;
  boolean isClick = false;
  int id;
  int initialValue = 50;

  Sphere(PVector pos, float _color, float _size, int _id) {
    p.add(pos);
    c = _color;
    size = _size;
    id = _id;
  }

  void display() {
    for (PVector pos : p) {
      pushMatrix();
      translate(pos.x, pos.y);
      fill(c);  
      ellipse(0, 0, size, size);
      popMatrix();
    }
  }

  boolean isOver(float px, float py) {
    ellipseMode(RADIUS);
    for (PVector pos : p) {
      float d = dist(px, py, pos.x, pos.y);
      if (d < size) {
        over = true;
        c = 150;
        return true;
      } else {
        over = false;
        c = 255;
        return false;
      }
    }
    return false;
  }
}
public class PWindow extends PApplet {  

  PWindow() {
    super();
    PApplet.runSketch(new String[] {this.getClass().getSimpleName()}, this);
  }

  ControlP5 cp5;

  int vertices = 50;
  float ss;


  Slider abc;


  void settings() {
    size(500, 250, P2D);
  }

  void setup() {
    cp5 = new ControlP5(this);
    background(0);


    cp5.addSlider("vertices")
      .setPosition(25, 50)
      .setSize(200, 20)
      .setRange(0, 50)
      ;
  }

  void draw() {
    background(0);

    for (int i = s.size()-1; i >= 0; i--) {
      Sphere obj = s.get(i); 
      ss = vertices;

      if (obj.isClick==true) {
        fill(255);
        stroke(255);
        textSize(13);
        text(i, width/2, 150);
        println(i);
        obj.size = vertices;
      }
    }
  }

}

import controlP5.*;

ControlP5 cp5;

void setup(){
  fullScreen();
  cp5 = new ControlP5(this);

  cp5.addSlider("ONE")
  .setPosition(50,100)
  .setSize(width-100, 50);

  cp5.addSlider("TWO")
  .setPosition(50,200)
  .setSize(width-100, 50);
}

void draw(){
}

//See draw method to change the shape that appears when program is run.

import peasy.*;
import controlP5.*;

PeasyCam cam;
ControlP5 cp5;
PShape shape;
Accordion accordion;

float Tx, Ty, Tz, Rx, Ry, Rz, Sx, Sy, Sz; //variables for each axis that will be used for the transformations. T - translate, R - rotate, S - scale

  void keyPressed() {
    cam.setActive(false); //stops camera from moving after pressing any key
  }

  void setup() {
    size(800, 400, P3D);  
    cam = new PeasyCam(this, 500);
    gui();

  }

  //sets up the sliders used to controll the transformations
  void gui() {

    cp5 = new ControlP5(this);
    cp5.setAutoDraw(false);

    Group g1 = cp5.addGroup("translations")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(70)
                ;

    cp5.addSlider("Tx")
       .setPosition(0, 0)
       .setSize(100, 20)
       .setRange(-200, 200)
       .setValue(0)
       .moveTo(g1);

       cp5.addSlider("Ty")
       .setPosition(0, 30)
       .setSize(100, 20)
       .setRange(-200, 200)
       .setValue(0)
       .moveTo(g1);

       cp5.addSlider("Tz")
       .setPosition(0, 60)
       .setSize(100, 20)
       .setRange(-200, 200)
       .setValue(0)
       .moveTo(g1);

    Group g2 = cp5.addGroup("rotations")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(70)
                ;

    cp5.addSlider("Rx")
       .setPosition(0, 0)
       .setSize(100, 20)
       .setRange(-360, 360)
       .setValue(0)
       .moveTo(g2);

       cp5.addSlider("Ry")
       .setPosition(0, 30)
       .setSize(100, 20)
       .setRange(-360, 360)
       .setValue(0)
       .moveTo(g2);

       cp5.addSlider("Rz")
       .setPosition(0, 60)
       .setSize(100, 20)
       .setRange(-360, 360)
       .setValue(0)
       .moveTo(g2);   

    Group g3 = cp5.addGroup("scaling")
                .setBackgroundColor(color(0, 64))
                .setBackgroundHeight(70)
                ;

    cp5.addSlider("Sx")
       .setPosition(0, 0)
       .setSize(100, 20)
       .setRange(0, 5)
       .setValue(1)
       .moveTo(g3);

       cp5.addSlider("Sy")
       .setPosition(0, 30)
       .setSize(100, 20)
       .setRange(0, 5)
       .setValue(1)
       .moveTo(g3);

       cp5.addSlider("Sz")
       .setPosition(0, 60)
       .setSize(100, 20)
       .setRange(0, 5)
       .setValue(1)
       .moveTo(g3); 

       accordion = cp5.addAccordion("acc")
                 .setPosition(40,40)
                 .setWidth(100)
                 .addItem(g1)
                 .addItem(g2)
                 .addItem(g3)
                 ;

       accordion.setCollapseMode(Accordion.MULTI);

  }


void move (float x, float y, float z) {
  translate(x, y, z);
}
void turn (float x, float y, float z) {
  rotateX(radians(x));
  rotateY(radians(y));
  rotateZ(radians(z));
}
void stretch (float x, float y, float z) {
  scale(x, y, z);  
}

void draw(){
  background(0);
  lights();
  fill(156, 85, 232);
  stroke(255);

  //to display a different shape, add comments to whichever line is not commented below and remove comments from a different line
  //example: add comments to line 142 and remove comments from 143 to draw a torus

  //shape = createShape(BOX, 100,200,300); //stores box in shape
  //shape = getTorus(100,50,32,32); //stores torus in shape
  shape = loadShape("deer.obj"); //stores deer.obj in shape

  move (Tx, Ty, Tz);
  turn (Rx, Ry, Rz);
  stretch (Sx, Sy, Sz);
  shape(shape); //draws shape

  inFront();
  }

  //allows for drawing the 2D gui in front of the 3D objects
  void inFront() {
  hint(DISABLE_DEPTH_TEST); 
  cam.beginHUD();
  cp5.draw();
  cam.endHUD();
  hint(ENABLE_DEPTH_TEST);
}

//creates torus shape
PShape getTorus(float outerRad, float innerRad, int numc, int numt) {

  PShape sh = createShape();
  sh.beginShape(TRIANGLE_STRIP);
  sh.noStroke();

  float x, y, z, s, t, u, v;
  float nx, ny, nz;
  float a1, a2;
  int idx = 0;
  for (int i = 0; i < numc; i++) {
    for (int j = 0; j <= numt; j++) {
      for (int k = 1; k >= 0; k--) {
         s = (i + k) % numc + 0.5;
         t = j % numt;
         u = s / numc;
         v = t / numt;
         a1 = s * TWO_PI / numc;
         a2 = t * TWO_PI / numt;

         x = (outerRad + innerRad * cos(a1)) * cos(a2);
         y = (outerRad + innerRad * cos(a1)) * sin(a2);
         z = innerRad * sin(a1);

         nx = cos(a1) * cos(a2); 
         ny = cos(a1) * sin(a2);
         nz = sin(a1);
         sh.normal(nx, ny, nz);
         sh.vertex(x, y, z);

      }
    }
  }
   sh.endShape(); 
  return sh;
}

I have been making an app for my students called Pattern maker (https://github.com/digitalcoleman/generativeExamples/tree/master/patternMaker_v2) which includes the ability to drag and drop svg files, create patterns with them, and export a pdf which we will later translate for a plotter.

The problem is that the more complex the svg file, the less likely that a pdf is generated. I do not know if there is a crazy lag time and that is affecting the button from the GUI or what, but some svg might take upwards of 30 clicks on the export button, and others never produce a pdf at all. Is there any way to better understand what is going on with the pdf export to know if it is working at all, so I know if it is a GUI or library issue?

Any ideas are appreciated!

import controlP5.*; //add the GUI library
import drop.*; //add the drag and drop library
import processing.pdf.*; //add the pdf library

SDrop drop; //make an instance of the sDrop library

PShape myShape; //make a shape variable to hold the svg file

ControlFrame cf; //will help us make a second window for the controls

int space = 40; //some initial settings = spacing
float scl = 40.0; //the scale of each object
float noiseScale = 200.0; //the scale of the noise (how smooth)
float noiseEffect = 0.0; //the strength of the noise affecting the position
float noiseRot = 0.0; //the strength of the noise affecting the rotation
float seed = 1; //the noise seed
boolean pdf = false;
int pdfCount = 1; //starting number for the exported pdf

void settings(){
  size(800, 800); //setup our stage/canvas
}

void setup(){
  noFill();
  smooth();
  rectMode(CENTER); //for the starting rectangles, center them
  cf = new ControlFrame(this, 300, 300, "Controls"); //make a new window at 300 wide and 300 tall
  surface.setLocation(320, 10); //move the main window over to make room for the control window
  drop = new SDrop(this); //setup the drag and drop
}

void draw(){
  background(255);

  if(pdf)beginRecord(PDF, "pattern" + pdfCount + ".pdf"); //if the button is pressed, begin recording to make the pdf
  noFill();
  for(int x = space/2; x < width; x+= space) { //iterate across the canvas
    for(int y = space/2; y < width; y+= space) { //iterate down the canvas
      float nx = x + noiseEffect * 2*(noise(seed, y/noiseScale, x/noiseScale)-0.5); //compute the x position noise
      float ny = y + noiseEffect * 2*(noise(x/noiseScale, seed, y/noiseScale)-0.5); //compute the y position noise
      float rot = 4 * PI * (noise(x/noiseScale, y/noiseScale, seed)-0.5) * noiseRot; //compute the rotation noise
      pushMatrix();
      translate(nx, ny); //move the shape into place
      rotate(rot); //rotate the shape
      //scale(scl);
      if(myShape !=null){ //if we have dropped on an svg, then use it
        shape(myShape, 0, 0, scl, scl); //draw the svg
      }else{
        rect(0, 0, scl, scl); //otherwise, use some squares
        //ellipse(0, 0, scl, scl); //or some ellipses
      }
      popMatrix();
    }
  }
  if(pdf) {
    endRecord();
    pdfCount++;
    pdf = false;
  }
}

void dropEvent(DropEvent theDropEvent) { //this takes care of the drag and drop
   if(theDropEvent.isFile()) {
    // for further information see
    // http://java.sun.com/j2se/1.4.2/docs/api/java/io/File.html
      String myFile = theDropEvent.filePath(); //get the filepath
      myShape = loadShape(myFile); //load the svg into our shape variable
   }
}

//everything below this makes the control window

class ControlFrame extends PApplet {

  int w, h;
  PApplet parent;
  ControlP5 cp5;

  public ControlFrame(PApplet _parent, int _w, int _h, String _name) {
    super();   
    parent = _parent;
    w=_w;
    h=_h;
    PApplet.runSketch(new String[]{this.getClass().getName()}, this);
  }

  public void settings() {
    size(w, h);
  }

  public void setup() {
    surface.setLocation(10, 10);
    cp5 = new ControlP5(this);

    cp5.addSlider("spacing")
       .plugTo(parent, "space")
       .setRange(1, 400)
       .setValue(40)
       .setPosition(20, 20)
       .setSize(200, 30);

    cp5.addSlider("scaling")
       .plugTo(parent, "scl")
       .setRange(10.0, 400.0)
       .setValue(40.0)
       .setPosition(20, 60)
       .setSize(200, 30); 

    cp5.addSlider("noise scale")
       .plugTo(parent, "noiseScale")
       .setRange(20.0, 1000.0)
       .setValue(200.0)
       .setPosition(20, 100)
       .setSize(200, 30);

    cp5.addSlider("noise effect - pos")
       .plugTo(parent, "noiseEffect")
       .setRange(0.0, 300.0)
       .setValue(0.0)
       .setPosition(20, 140)
       .setSize(200, 30);

    cp5.addSlider("noise effect - rot")
       .plugTo(parent, "noiseRot")
       .setRange(0.0, 1.0)
       .setValue(0.0)
       .setPosition(20, 180)
       .setSize(200, 30);

    cp5.addSlider("noise seed")
       .plugTo(parent, "seed")
       .setRange(0.0, 10.0)
       .setValue(0.0)
       .setPosition(20, 220)
       .setSize(200, 30);

    cp5.addButton("exportPDF")
       .plugTo(parent, "pdf")
       .setSwitch(false)
       .setPosition(20, 260)
       .setSize(50, 30);
  }

  void draw() {
    background(190);
  }

}

For a while I've been looking to control several banks of LED lights independently by using a GUI with a couple sliding bars. The idea is by moving each sliding bar around, the PWM value of the corresponding LED bank would change and the LEDs would get brighter or darker. Through this forum and other resources I have been able to accomplish this with one slider bar and one bank of LEDs. However, I am struggling to scale this project up because I don't know how to send and read multiple PWM values from several slider bars. I've seen some people mentioning splitting up the communication into several bits and then reading each bit in Arduino to correspond to each LED bank. I do not know how to accomplish this with the slider bars though. If you do have a solution, please by thorough. My Processing and Arduino code is below (currently aimed at using 2 slider bars for 2 corresponding LED banks), thanks in advance.

Processing

import controlP5.*;

import processing.serial.*;

ControlP5 cp5;

Serial port;

PFont font, font2;


int Brightness_1 = 0;

int Brightness_2 = 0;

void setup() 
{

 size(450, 200);

 String portName = Serial.list()[0];

 port = new Serial(this, "COM9", 9600);

  cp5 = new ControlP5(this);

 font = createFont("calibri light", 20);

 font2 = createFont("calibri light", 12);

  cp5.addSlider("Brightness_1", 0, 255, 0, 50, 125, 255, 12)
     .setPosition(50,125)
     .setSize(255,12)
     .setRange(0,255)
     .setFont(font);

  cp5.addSlider("Brightness_2", 0, 255, 0, 50, 125, 255, 12)
     .setPosition(50,125)
     .setSize(255,12)
     .setRange(0,255)
     .setFont(font);
}

void draw() 
{
  background(200, 10, 30);
  fill(100, 0, 150);
  textFont(font);

  text(Brightness_1, 25, 50);

  port.write(Brightness_1);

  port.write(Brightness_2);



}

Arduino

int incomingData;

void setup()
{

pinMode(4, OUTPUT);   //set pin4 as output 

pinMode(5, OUTPUT);   //set pin5 as output 

//pinMode(6, OUTPUT);   //set pin6 as output

Serial.begin(9600);

}

void loop()
{
if(Serial.available())

 {
    incomingData = Serial.read();

    analogWrite(4, incomingData);

    analogWrite(5, incomingData);

      }


  }

import controlP5.*;

ControlP5 cp5;

void setup() {
  size(400,400);


}

void draw() {
  fill(255,0,0);
  rect(0,0,200,100);
  fill(0,255,0);
  rect(200,0,200,100);
     if (mousePressed) {
      if (mouseX > 0 && mouseX < 200 && mouseY > 0 && mouseY < 100) {
          cp5 = new ControlP5(this);
  cp5.addSlider("slider")
  .setPosition(100,150)
  .setSize(200,30);
      }
    } 

         if (mousePressed) {
      if (mouseX > 200 && mouseX < 400 && mouseY > 0 && mouseY < 100) {

      }
    } 
}

import controlP5.*;
import java.util.*;

PVector middle;
float numbera = 0;
float numberb = 0;
float numberc = 0;
float numberd = 0;

ControlP5 cp5;
Slider mySlider;
Knob Knob;

void setup()
{
  size(800, 800);
  middle = new PVector(width/2, height/2, 0);

  cp5 = new ControlP5(this);

  cp5.addSlider("numbera")
    .setPosition(0, 0)
    .setSize(width, height/50)
    .setRange(-1000, 1000)
    .setSliderMode(Slider.FLEXIBLE)
    .setValue(0)
    ;

  cp5.addSlider("numberb")
    .setPosition(0, height/50)
    .setSize(width, height/50)
    .setRange(-5, 5)
    .setSliderMode(Slider.FLEXIBLE)
    .setValue(0)
    ;


  cp5.addSlider("numberc")
    .setPosition(0, (height/50)*2)
    .setSize(width, height/50)
    .setRange(-100, 100)
    .setSliderMode(Slider.FLEXIBLE)
    .setValue(0)
    ;


  cp5.addSlider("numberd")
    .setPosition(0, (height/50)*3)
    .setSize(width, height/50)
    .setRange(-height, height)
    .setSliderMode(Slider.FLEXIBLE)
    .setValue(0)
    ;

  Knob = cp5.addKnob("grade")
    .setRange(1, 4)
    .setValue(0)
    .setPosition(10, height/2+height/3)
    .setRadius(50)
    .setNumberOfTickMarks(3)
    .snapToTickMarks(true)
    .setDragDirection(Knob.VERTICAL)
    ;
}


void draw()
{
  frameRate(60);
  colorMode(RGB);
  int grade = int(cp5.get(Knob.class, "grade").getValue());
  float numbera = -(1/(cp5.get(Slider.class, "numbera").getValue()));
  float numberb = (cp5.get(Slider.class, "numberb").getValue());
  float numberc = -(cp5.get(Slider.class, "numberc").getValue());
  float numberd = -(cp5.get(Slider.class, "numberd").getValue());
  background(200);
  String desc = "f(x) = "+(int(-1/numbera))+"X³ +("+(int(numberb))+")X² +("+(int(-numberc))+")X+("+(int(-numberd))+")";
  textSize(20);
  text(desc, 0, 85);
  ellipse(middle.x, middle.y, 5, 5);
  fill(0);
  line(middle.x, height, middle.x, 0);
  line(width, middle.y, 0, middle.y);
  stroke(0);
  switch(grade)
  {
    case(1):
    {
      linearPoints(numberc, numberd, -height, height);
      break;
    }
    case(2):
    {
      quadraticPoints(numberb, numberc, numberd, -height, height);
      break;
    }
    case(3):
    {
      cubicPoints(numbera, numberb, numberc, numberd, -height, height);
      break;
    }
  }

  stroke(0);
}

void linearPoints(float a, float b, float xmin, float xmax)
{
  float y;
  for (float x = xmin; x < xmax; x = x + 0.09)
  {
    y = a*x + b;
    point(middle.x+x, middle.y+y);
    stroke(255, 0, 0);
  }
}

void quadraticPoints(float a, float b, float c, float xmin, float xmax)
{
  float y;
  for (float x = xmin; x < xmax; x = x + 0.8)
  {
    y = a*x*x + b*x + c;
    point(middle.x+x, middle.y+y);
    stroke(255, 0, 0);
    textSize(20);
  }
}

void cubicPoints(float a, float b, float c, float d, float xmin, float xmax)
{
  float y;
  for (float x = xmin; x < xmax; x = x+0.02)
  {
    y = a*x*x*x + b*x*x + c*x + d;
    point(middle.x+x, middle.y+y);
    stroke(255, 0, 0);
  }
} 

I am trying to output values from a slider in Android Mode (using the Controlp5 and Ketai libraries) to an Arduino. I am posting my working code (built from some example codes I found online) here for reference. The original code used simple on/off buttons to send characters to the Arduino. I am a newbie, so from building this example I taught myself some basics of how to send characters from the Android over Bluetooth.

Now I would like to send a range of values corresponding to a couple of sliders. I have been able to successfully create the sliders in my code, but I am really struggling to understand how to get these values to output to an Arduino like I did for each button.

I have since gone through and commented out all of the old, unnecessary lines corresponding to the buttons, but I was hoping to use them for reference/modify them to output the slider values.

Any help at all would be greatly appreciated. Thank you.

// reference for basic button control code:  http://stormkitz.blogspot.com/
// references for adding sliders:  http://wiki.bk.tudelft.nl/toi-pedia/Processing_Buttons_and_Sliders
//                                  https://www.kasperkamperman.com/blog/processing-code/controlp5-library-example1/
//                                  http://coretechrobotics.blogspot.com/2013/12/controlling-arduino-with-android-device.html
//                                  http://forum.arduino.cc/index.php?topic=194265.0
//                                  http://forum.arduino.cc/index.php?topic=193316.0


import android.content.Intent;
import android.os.Bundle;
import ketai.net.bluetooth.*;
import ketai.ui.*;
import ketai.net.*;
import controlP5.*;                                                  //KZ: slider
import cc.arduino.*;                                                  //KZ: slider

PFont fontMy;                                                        //declaring font
boolean bReleased = true;                                           //no permament sending when finger lets off the button
KetaiBluetooth bt;                                                  // Create object from BtSerial class
boolean isConfiguring = true;
String info = "";
KetaiList klist;
ArrayList devicesDiscovered = new ArrayList();                     //store in array the discovered device
boolean rectOver = false;
int rec = 0;

ControlP5 controlP5;                                                //KZ: slider
Arduino arduino;                                                     //KZ: slider

int DC_speed = 0; // 0-6                                         //KZ: slider
int DC2_speed = 0; // 0-6                                        //KZ: slider
int DC3_speed = 0; // 0-6                                          //KZ: slider

// The following code is required to enable bluetooth at startup.
void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
bt = new KetaiBluetooth(this);                                    //create the BtSerial object that will handle the connection
}

void onActivityResult(int requestCode, int resultCode, Intent data)
 {
bt.onActivityResult(requestCode, resultCode, data);                 //to show the discovered device
}

void setup()
{
size(displayWidth, displayHeight);                                 //size of the phone screen
smooth();
frameRate(10);                                                    //the frame rate of my screen
orientation(PORTRAIT);                                            //vertical
bt.start();                                                       //start listening for BT connections
isConfiguring = true;                                             //at my phone start select device…
fontMy = createFont("SansSerif", 30);                             //font size
textFont(fontMy);

controlP5 = new ControlP5(this);
 controlP5.addSlider("DC_speed",0,6,DC_speed,100,200,50,500);     //KZ: slider
 controlP5.addSlider("DC2_speed",0,6,DC2_speed,330,200,50,500);    //KZ: slider
 controlP5.addSlider("DC3_speed",0,6,DC3_speed,550,200,50,500);    //KZ: slider
}

void draw()
{
//at app start select device
if (isConfiguring)

{
ArrayList names;

//create the BtSerial object that will handle the connection
//with the list of paired devices
klist = new KetaiList(this, bt.getPairedDeviceNames());

isConfiguring = false;                                             //stop selecting device
}

//else
//{
//color a = color(255,0,0);                                          //KZ: red- main axis
//color b = color(255,0,0);                                          //KZ: red- main axis
//color d = color(255,0,0);                                          //KZ: red- main axis
//color i = color(95, 191, 187);                                     //KZ: aqua- background of dots???

//update(mouseX, mouseY);                                             //update our finger point at where of the screen
//background(95, 191, 187);                                            //background color

//if
//((mousePressed)&&(rectOver)&&(rec==2))  
//{       d = color(10,237,26);                                       //KZ: changes d from red to green
//}
//else if ((mousePressed)&&(rectOver)&&(rec==3))
//{       a = color(10,237,26);                                       //KZ: changes a from red to green
//}
//else if ((mousePressed)&&(rectOver)&&(rec==4))
//{       b = color(10,237,26);                                       //KZ: changes a from red to green
//}

  // if ((rec == 2) && (rectOver)&&(mousePressed) && (bReleased == true)) {            // If our finger is on the square,
   // byte[] data = {'w'};                                                             // send w to arduino when we click the button 2
   // bt.broadcast(data);                                                              //send with bt
    //bReleased = false;                                                               // send data for once until next time we click the button again
 // }
 // if ((rec == 3) && (rectOver)&&(mousePressed) && (bReleased == true)) {
 //   byte[] data = {'a'};                                                             // send a to arduino when we click the button 3
 //   bt.broadcast(data);                                                              //send with bt
 //   bReleased = false;
 // }
 // if ((rec == 4) && (rectOver)&&(mousePressed) && (bReleased == true)) { 
 //   byte[] data = {'d'};                                                             // send d to arduino when we click the button 4
 //   bt.broadcast(data);                                                              //send with bt
 //   bReleased = false;
 // }
 // if((rectOver)&&(mousePressed == false)&& (bReleased == false)) {                   //when our finger move up from the button, send stop command to arduino                                                                              
  //  byte[] data = {' '};             
   // bt.broadcast(data);
   // bReleased = true;
  //}

  //fill(a);                                                                //fill each area of button with the color declared above
  //stroke(162); //the shape covered with a grey color line
  //triangle(350,600,450,550,350,500);                                      //draw the triangle with the coordinates   //KZ: FR
  //fill(b);
  //triangle(350,350,450,300,350,250);                                      //KZ: 2x. FL
  //fill(d);
  //triangle(150,250,50,300,150,350);                                      //KZ: 4x. BL 
//}

//to print received data and show on screen
fill(255);
noStroke();
textAlign(LEFT);
text(info, 20, 104);
noFill();
}

//void update(int x, int y) {                                       //to control the flag when we click a button
// if ( overRect(350, 500, 100, 100) ) {                            //x, y, width, height
 //   rectOver = true;                   
  //  rec = 3;                                                      //Confirmed: Front Right
  //}
  //else if
  //( overRect(350, 250, 100, 100) ) {                              //x, y, width, height
  //  rectOver = true;                   
   // rec = 4;                                                      //Confirmed: Front Left
 // }
//  else if
 // ( overRect(50, 250, 100, 100) ) {                                //x, y, width, height
  //  rectOver = true;                   
  //      rec = 2;                                                  //Confirmed: Back Left
 // }
  //else
 // {
   // rectOver = false;                                             //nothing s touched on screen
  //}
//}
//boolean overRect(int x, int y, int width, int height)  {           //KZ: to scan what area is touched
//  if (mouseX >= x && mouseX <= x+width &&
//      mouseY >= y && mouseY <= y+height)                           //to see if the mouse cursor inside rect
  //{
 //   return true;
 // } else {
 //   return false;
 // }
//}

void onKetaiListSelection(KetaiList klist)
{
String selection = klist.getSelection();                                //select the device to connect
bt.connectToDeviceByName(selection);                                    //connect to the device
klist = null;                                                          //dispose of bluetooth list for now
}

//Call back method to manage data received
void onBluetoothDataEvent(String who, byte[] data)
{
if (isConfiguring)
return;
//received
info += new String(data);
if(info.length() > 150)                                               //clean the words on screen if string to long
info = "";
}//END of Android processing coding

So:

Is it possible to make vertical tabs with the controlp5 library? I want to make many of them so there is not enough space horizontally.

And ist it possible that the tab is a button at the same time?

Currently I'm working with the example Code from the controlp5 library:

/**
* ControlP5 Tab
*
*
* find a list of public methods available for the Tab Controller
* at the bottom of this sketch.
*
* by Andreas Schlegel, 2012
* www.sojamo.de/libraries/controlp5
*
*/

import controlP5.*;

ControlP5 cp5;

int myColorBackground = color(128);

int sliderValue = 100;

void setup() {
  size(700,400);
  noStroke();
  cp5 = new ControlP5(this);

  // By default all controllers are stored inside Tab 'default' 
  // add a second tab with name 'extra'

  cp5.addTab("extra")
     .setColorBackground(color(0, 160, 100))
     .setColorLabel(color(255))
     .setColorActive(color(255,128,0))
     ;

  // if you want to receive a controlEvent when
  // a  tab is clicked, use activeEvent(true)

  cp5.getTab("default")
     .activateEvent(true)
     .setLabel("my default tab")
     .setId(1)
     ;

  cp5.getTab("extra")
     .activateEvent(true)
     .setId(2)
     ;


  // create a few controllers

  cp5.addButton("button")
     .setBroadcast(false)
     .setPosition(100,100)
     .setSize(80,40)
     .setValue(1)
     .setBroadcast(true)
     .getCaptionLabel().align(CENTER,CENTER)
     ;

  cp5.addButton("buttonValue")
     .setBroadcast(false)
     .setPosition(220,100)
     .setSize(80,40)
     .setValue(2)
     .setBroadcast(true)
     .getCaptionLabel().align(CENTER,CENTER)
     ;

  cp5.addSlider("slider")
     .setBroadcast(false)
     .setRange(100,200)
     .setValue(128)
     .setPosition(100,160)
     .setSize(200,20)
     .setBroadcast(true)
     ;

  cp5.addSlider("sliderValue")
     .setBroadcast(false)
     .setRange(0,255)
     .setValue(128)
     .setPosition(100,200)
     .setSize(200,20)
     .setBroadcast(true)
     ;

  // arrange controller in separate tabs

  cp5.getController("sliderValue").moveTo("extra");
  cp5.getController("slider").moveTo("global");

  // Tab 'global' is a tab that lies on top of any 
  // other tab and is always visible

}

void draw() {
  background(myColorBackground);
  fill(sliderValue);
  rect(0,0,width,100);
}

void controlEvent(ControlEvent theControlEvent) {
  if (theControlEvent.isTab()) {
    println("got an event from tab : "+theControlEvent.getTab().getName()+" with id "+theControlEvent.getTab().getId());
  }
}

void slider(int theColor) {
  myColorBackground = color(theColor);
  println("a slider event. setting background to "+theColor);
}


void keyPressed() {
  if(keyCode==TAB) {
    cp5.getTab("extra").bringToFront();
  }
}

Here is a dumbed-down version of the code; for clarity's sake I'm just using one Package and have altered the position data. Right now, I'm trying to just use one bang to make the object, and the other to remove it.

    import controlP5.*;
    ControlP5 gui;

    ArrayList<SvoPkg> layout;
    int PkgTot = 1;

    void setup(){
      size (300, 150);
    gui = new ControlP5(this);
      layout = new ArrayList<SvoPkg>();
      fill(230,170,90);

    gui.addBang ("Make")
      .setPosition(200,95)
      .setSize(40,30)
      ;
    gui.addBang ("Kill")
      .setPosition(250,95)
      .setSize(40,30)
      ;
    }
    void draw(){
     background(190,130,30);
        }

    void Make(){
      for(int i=0; i<PkgTot;i++){
          layout.add(new SvoPkg(this, 20, 30));
         }     
     }
     void kill(){ //I've left this blank for now, but is where I'd like to remove the object
     }

     class SvoPkg {
      PApplet app;
      ControlP5 Objgui;

    SvoPkg(PApplet papp, float Xpos, float Ypos){
     app = papp;
     Objgui = new ControlP5(papp);

    Objgui.addSlider("Angle")
       .setPosition(Xpos+15, Ypos+ 15)
       .setSize(120, 10)
       .setRange(600,2400)
       ;
    Objgui.addSlider("Speed")
      .setPosition(Xpos+15, Ypos + 30)
      .setSize(120, 10)
      .setRange(50,1000)
      ;
    }
    }

Thanks for your input

import processing.serial.*;          //imports serail library
import cc.arduino.*;                 //imports arduino library so I don't have to use arduino IDE
import controlP5.*;                  //Part of processing library


Arduino arduino;
ControlP5 cp5;

Slider Servo1;

void setup() 
{
  size(950, 900);

  println(Arduino.list());                                  //sends data to serial port for arduino
  arduino = new Arduino(this, Arduino.list()[0], 57600);    //sets COMM Port Baud Rate
  cp5 = new ControlP5(this);                                //dynamic variable of control class

  arduino.pinMode(3, Arduino.SERVO);

 Servo1 = cp5.addSlider(".").setRange(0,180).setValue(90).setPosition(110,134).setSize(270,25).setNumberOfTickMarks(270).setLabelVisible(true).setColorForeground(color(102,102,102)).setColorBackground(color(255,153,0)).setColorActive(color(102,102,102));
cp5.addButton("PressButton")
     .setValue(1)
     .setPosition(400,600);
 }

void draw() 
{
 arduino.servoWrite(3, int(Servo1.getValue()));
 }

When I say verify I mean, since the ports are configured and once a connection has been established how do I ensure programmatically that the servos are receiving the data instead of looking at them to see if they move?

here is code:

import processing.serial.*;          //imports serail library
import cc.arduino.*;                 //imports arduino library so I don't have to use arduino IDE
import controlP5.*;                  //Part of processing library

Arduino arduino;
ControlP5 cp5;

Slider Servo1;


void setup() 
{
  size(950, 900);

  println(Arduino.list());                                  //sends data to serial port for arduino
  arduino = new Arduino(this, Arduino.list()[0], 57600);    //sets COMM Port Baud Rate
  cp5 = new ControlP5(this);                                //dynamic variable of control class

  arduino.pinMode(3, Arduino.SERVO);                        //sets this output pin for byte transfer


  Servo1 = cp5.addSlider(".").setRange(0,180).setValue(90).setPosition(110,134).setSize(270,25).setNumberOfTickMarks(270).setLabelVisible(true).setColorForeground(color(102,102,102)).setColorBackground(color(255,153,0)).setColorActive(color(102,102,102));


}

void draw() 
{
 //will fill alter

  background(color(51,102,153));                        //background of GUI color in RGB format

  arduino.servoWrite(3, int(Servo1.getValue()));      //get value from slider and write info to the pins


  textSize(50);
  text("Robot Arm", 300, 75);                              //Title

  textSize(25);
  text("Finger", 20, 125);                                //labels for each servo


  textSize(18);
  text("[Pin 3]", 25, 150);                                //Labels for the pins each servo is connected to


}

import processing.serial.*;          //imports serail library
import cc.arduino.*;                 //imports arduino library so I don't have to use arduino IDE
import controlP5.*;                  //Part of processing library

Arduino arduino;
ControlP5 cp5;

Slider Servo1;


void setup() 
{
  size(950, 900);

  println(Arduino.list());                                  //sends data to serial port for arduino
  arduino = new Arduino(this, Arduino.list()[0], 57600);    //sets COMM Port Baud Rate
  cp5 = new ControlP5(this);                                //dynamic variable of control class

  arduino.pinMode(3, Arduino.SERVO);                        //sets this output pin for byte transfer


  Servo1 = cp5.addSlider(".").setRange(0,180).setValue(90).setPosition(110,134).setSize(270,25).setNumberOfTickMarks(270).setLabelVisible(true).setColorForeground(color(102,102,102)).setColorBackground(color(255,153,0)).setColorActive(color(102,102,102));


}

void draw() 
{
 //will fill alter

  background(color(51,102,153));                        //background of GUI color in RGB format

  arduino.servoWrite(3, int(Servo1.getValue()));      //get value from slider and write info to the pins


  textSize(50);
  text("Robot Arm", 300, 75);                              //Title

  textSize(25);
  text("Finger", 20, 125);                                //labels for each servo


  textSize(18);
  text("[Pin 3]", 25, 150);                                //Labels for the pins each servo is connected to


}

Even though its long its simple. So basically this creates a graphical user interface with sliders that are sending data to pin 3 on my arduino UNO. Now by default the servos are at 90 degrees, so you move the slider left or right an the servo moves accordingly. My issue is the code was working on my servo one week ago, and now for some reason when I hook up my UNO to the servo and run the code, it uploads successfully but when you move the sliders on the interface, the servo does not move. Its like its not getting the data?

I tried a sample sweep program on the arduio website using the REGULAR IDE not processing IDE, an the sweep works fine. So I know its not the board, servos, or usb port that is an issue? Any ideas?

I am using processing version 3.2.3 Also if you can, run the code an hook up a small servo like a vilros SG90 and see if it works

Could you give me a topic just to fixe my code?

Tks in advance. Jose Peres.

// JPeres: 20-MAR-2017 import controlP5.*; ControlP5 cp5;

float x, y; float angle1, angle2, angle3 = 0.0;

float segLength = 100; float segLength1 = 100; // Must be equal to var segLength!!! - How to fix ?? float segLength2 = 100; // Must be equal to var segLength!!! - How to fix ??

int V01 = 0; int V02 = 0; int V03 = 0;

void setup() { size(1080, 640); strokeWeight(25); stroke(255, 160);

x = width * 0.40; y = height * 0.7;

cp5 = new ControlP5(this);

cp5.addSlider("V01") .setPosition(900, 80) .setSliderMode(Slider.FLEXIBLE) .setValue(0) .setSize(20, 300) .setRange(-90, 90);

cp5.addSlider("V02") .setPosition(940, 80) .setSliderMode(Slider.FLEXIBLE) .setValue(0) .setSize(20, 300) .setRange(-90, 90);

cp5.addSlider("V03") .setPosition(980, 80) .setSliderMode(Slider.FLEXIBLE) .setValue(0) .setSize(20, 300) .setRange(-90, 90);

cp5.addSlider("H00") .setPosition(280, height-40) .setSliderMode(Slider.FLEXIBLE) .setValue(0) .setSize(300, 30) .setRange(-90, 90);

cp5.addButton("ARM_RESET") .setPosition(900, height-100) .setSize(140, 40) .setValue(0) .activateBy(ControlP5.RELEASE);

cp5.addButton("ARM_HOME") .setPosition(900, height-50) .setSize(140, 40) .setValue(0) .activateBy(ControlP5.RELEASE); } void draw() { background(80); angle1 = ((-V01+90)/float(180)) * -PI; angle2 = (-90+V02/float(180)) * PI;

pushMatrix(); segment(x, y, angle1); segment(segLength1, 0, angle2); segment(segLength2, 0, angle3);

popMatrix(); line(x, y, x, y+80); rect(0, y+80, width, y+80); } void segment(float x, float y, float a) { translate(x, y); rotate(a); line(0, 0, segLength, 0); } public void ARM_RESET(int value) { cp5.getController("V01").setValue(0); cp5.getController("V02").setValue(0); cp5.getController("V03").setValue(0); cp5.getController("H00").setValue(0); } public void ARM_HOME(int value) { cp5.getController("V01").setValue(90); cp5.getController("V02").setValue(-90); cp5.getController("V03").setValue(-90); cp5.getController("H00").setValue(0); } // That's the end!

I'm trying to connect my Ableton Live 9 with Max 6.1 to my processing sketch (latest version).

This is the code I'm borrowing:

//"Live 2 Processing" Sample Code
//Taps into OSC to receive audio peak data from Live.
//Use in conjunction with Live 2 Processing (Max4Live plugin)
//by WIGGLE (www.unsound.com)
//Plugin available at: http://www.unsound.com/M4L/
//You will need the OSCp5 library: http://www.sojamo.de/libraries/oscP5/
//and controlP5 library: http://www.sojamo.de/libraries/controlP5/
//thanks: Ableton, Ash Oakenfold, Andreas Schlegel, and Casey Reas

import controlP5.*;
import oscP5.*;
import netP5.*;

ControlP5 controlP5;
Slider xSlider;
Slider ySlider;

OscP5 oscP5;
NetAddress myRemoteLocation;

int varY = round(32 / 8.0f);
int varX = round(32 / 8.0f);

void setup()
{
size(180, 150);
createSliders();
initOsc();
}

void initOsc()
{
oscP5 = new OscP5(this,12000);

myRemoteLocation = new NetAddress("192.168.0.3",12000);
oscP5.plug(this,"onX","/varX");
oscP5.plug(this, "onY", "/varY");
}


void createSliders()
{
controlP5 = new ControlP5(this);
xSlider = controlP5.addSlider("varX",
0, // min
127, // max
32, // default value
20, // x
55, // y
100, // width
10); // height<del><del></del></del>

ySlider = controlP5.addSlider("varY", 0, 127, 32, 20, 75, 100, 10);
}

void draw()
{
background(0x000000);
fill(128);
rect(10, 45, 160, 50);
}

void onX(int value)
{
xSlider.setValue(value);
}

void onY(int value)
{
ySlider.setValue(value);
}

And here are some images in ableton with max:

And this is how it should look like in processing:

So in the past I've managed to connect Oscp5 to max for live reasonably well but its been a while, and I'm unsure If I'm missing something. Basically I want audio from max for live to send audio data/messages from ableton to processing. I'm expecting the VarX VarY to respond to the audio just like the Live2Processing plugin reads the audio. I'm unsure if Its a version probably on processing or max for live. I remember the last time I tried connecting I ran into some version problems with max and ableton but I had solved that problem in the past. I'm unsure if this is an IP or Port issue. If anyone could hint me towards a solution to my problem, I'd gladly appreciate it. Thanks.

found this code and handy plugin at unsound.com/M4L/

Thanks A lot,

Wini

Edit: My apologies but I may have post this in the wrong forum.

I added the sliders to control these parameters but It's not changing the visuals live for some reason. I think it might be because of the positioning of the elements in my code, so I will past it here a section of my code and hopefully someone with experience can point me where i'm getting this wrong?

int sParticles = 5000;
int sNoiseScale = 5000;
int sLength = 5;

float sRandomA = .5;
float sRandomB = 2;



int num = sParticles;
Particle[] particles = new Particle[num];
float noiseScale=sNoiseScale, noiseStrength=5; // Turbulence

void setup() {

  cp5 = new ControlP5(this);
  cp5.addSlider("sParticles").setPosition(0,0).setRange(0,10000);
  cp5.addSlider("sNoiseScale").setPosition(160,0).setRange(0,10000);
  cp5.addSlider("sLength").setPosition(330,0).setRange(0,20);

  cp5.addSlider("sRandomA").setPosition(490,0).setRange(0,5);
  cp5.addSlider("sRandomB").setPosition(650,0).setRange(0,5);

  size(1920, 1080);
  noStroke();
  for (int i=0; i<num; i++) { 
    PVector loc = new PVector(random(width*1.2), 
    random(height), random(sRandomA, sRandomB)); // Thickness

    float angle = random(TWO_PI);
    PVector dir = new PVector(cos(angle), sin(angle));
    float speed = random(.5, 2);
    particles[i]= new Particle(loc, dir, speed);
  }
}

First tab, for the demo to work right out of the box this sketch has to be called "SecondWindowTest"

/**
 * Demo on how to spawn a second sketch from Processing
 * Facilitated by ControlP5, but not necessary for this purpose
 * by CMB, 2016
 *
 */



import controlP5.*;

ControlP5 cp5;

//Reference to the secondary sketch so we can call its methods and access its variables from outside
SecondSketch second;

//This value will be accessed by the other sketch
int backgroundValue = 0;

public void settings()
{
  size(800, 600);
}

public void setup()
{
  surface.setResizable(true);

  cp5 = new ControlP5(this);

  cp5.addButton("secondWindow")
    .setPosition(20, 20)
    .setSize(125, 25)
    .setLabel("Second Window")
    .getCaptionLabel().alignY(CENTER).alignX(CENTER);

  cp5.addTextfield("textField")
    .setSize(125, 25)
    .setPosition(20, 75);
}

public void draw()
{
  background(backgroundValue);
}

public void secondWindow()
{
  //Launch the other sketch!

  //This structure assumes you only want one instance of the other sketch
  //If that's not what you want simply call the constructor to launch a new, independent instance

  //if the other sketch is closed, start a new one
  if (second== null) second = new SecondSketch(this);
  else
  {
    //if it's already running, bring it to the front
    second.moveToTop();
  }
}

public void textField(String input)
{
  //Send some text to the other sketch
  if (second != null)
  {
    second.someText = input;
  }
}

Second tab

//Code in this class like in any other sketch
//However, this class can't have any nested classes like a regular sketch:
//if you want to use another class inside this secondary sketch and draw in it,
//you gotta pass it a reference to this class and draw on its internal PGraphics "g"
class SecondSketch extends PApplet
{
  //A reference to the main sketch
  //notice how the file name of the main sketch is important as that becomes the name of the class upon compiling
  SecondWindowTest parent;

  ControlP5 gui;

  //This String will be sent to us from the main sketch
  String someText= "";

  //The constructor will take care of everything
  public SecondSketch(SecondWindowTest parent)
  {
    //store a reference to the first sketch so we can do things with it
    this.parent = parent;

    //This will actually launch the new sketch
    runSketch(new String[] {
      "SecondSketch"  //must match the name of this class
      }
      , this);  //the second argument makes sure this sketch is created instead of a brand new one...
  }

  public void settings()
  {
    size(700, 500);
  }

  public void setup()
  {

    super.surface.setResizable(true);

    //give it some GUI to interact with
    gui = new ControlP5(this);
    gui.addSlider("mainBackground")
      .setRange(0, 255)
      .setPosition(20, 50)
      .setLabel("Main sketch background colour")
      .setSize(125, 25);
  }

  public void draw()
  {
    background(50);
    fill(255);

    //Display the text that can be altered from the main sketch
    text(someText, 20, 20);
  }

  //Without this, the main sketch would close if the user clicked on the second sketch' close button!
  //(it appears to work funky with the escape button though, beware)
  public void exit()
  {
    parent.second = null;
    dispose();
  }

  //Callback from ControlP5
  public void mainBackground(float value)
  {
    //Change main sketch' background value
    parent.backgroundValue = (int) value;
  }

  //Little hack to bring the frame to the top
  public void moveToTop()
  {
    surface.setAlwaysOnTop(true);
    surface.setAlwaysOnTop(false);
  }
}

import controlP5.*;
ControlP5 controlP5;  
import processing.io.*;
SoftwareServo servo;


void setup() {
  size(255,100);
  controlP5 = new ControlP5(this);
  controlP5.addSlider("Speed",0,180,0,10,10,200,30);
  servo = new SoftwareServo(this);
  servo.attach(4);
  servo.write(left);
  delay(200);
  exit();
  }

void draw(){
  background(100);

}

thanks _ö

PS: I just patched the interface into a scene, the content is basically just for me to be able to visualise it.

int margin;
Top [] tops = new Top[100];
Interface gui;
String s;
float val;
color col;

void setup() {
  size(600, 400);
  margin = 200;
  col = 127;

  gui  = new Interface(this);
  gui.build();

  for (int i = 0; i < tops.length; i++) {
    tops[i] = new Top(margin);
  }
}


void draw() {
  background(80);
  fill(col);
  rectMode(CENTER);
  rect(width/2, height/2, width - margin, height - margin);


  for (int i = 0; i < tops.length; i++) {
    tops[i].display();
    //tops[i].update();
    //tops[i].borders();
  }
}

// to be mapped: col, margin, tops[i].maxSpeed, tops[i].maxForce

void controlEvent(CallbackEvent theEvent) {
  s = theEvent.getController().getName();
  val = theEvent.getController().getValue();
  println(s, val);
  margin = (int)map(val, 100, 500, 100, 300);
  for (int i = 0; i < tops.length; i++) {
    tops[i].r = (int)map(val, 100, 500, 5, 20);
  }
}


class Top {
  int margin, r;
  float x, y;
  PVector location, velocity, acceleration;
  float maxSpeed, maxForce;
  PVector noff;

  Top(int margin_) {
    margin = margin_;
    r = 5;
    int side = int(random(0, 3.9));
    switch(side) {
    case 0: 
      x= random(width);
      y= random(margin/2);
      break;
    case 1: 
      x= random(width);
      y= random(height-margin/2, height);
      break;
    case 2: 
      x= random(margin/2);
      y= random(height);
      break;
    case 3: 
      x= random(width-margin/2, width);
      y= random(height);
      break;
    }


    location = new PVector(x, y);
    velocity = new PVector();
    acceleration = new PVector(0, 0);
    noff = new PVector (random(1000), random(1000), random(1000));
    maxSpeed = 3;
    maxForce = 0.15;
  }
  void update() {
    acceleration.x = map(noise(noff.x), 0, 1, -1, 1);
    acceleration.y = map(noise(noff.y), 0, 1, -1, 1);
    //acceleration.z = map(noise(noff.z), 0, 1, -1, 1);
    noff.add(0.001, 0.001, 0.001);


    velocity.add(acceleration);
    velocity.limit(maxSpeed);
    location.add(velocity);
    acceleration.mult(0);

    if (location.x<0||location.x>width) velocity.x *=-1;
    if (location.y<0||location.y>height) velocity.y *=-1;

    /*
    boolean A,B,C,D;

     if(location.y<margin/2) A = true;
     else A = false;
     if(location.x>width-margin/2) B = true;
     else B = false;
     if(location.y>height-margin/2) C = true;
     else C = false;
     if(location.x<margin/2) D = true;
     else D = false;

     if(location.y>margin/2 && !B && !C && !D || y<height-margin/2 && !A && !B && !D) velocity.y *= -1;
     if(location.x>margin/2 && !A && !B && !C || x<width-margin/2 && !A && !C && !D) velocity.x *= -1;
     */
  }
  void display() {
    stroke(0);
    fill(50);
    ellipse(location.x, location.y, r, r);
  }
  /*void borders(){
   if(location.x<0||location.x>width) x *=-1;
   if(location.y<0||location.y>height) y *=-1;

   }*/
}


import controlP5.*;

class Interface {

  ControlP5 cp5;
  Group g1, g2, g3;
  Accordion accordion;
  DropdownList d2;
  int env_H, bo_H, ou_H;
  int sliderPosX, sliderPosY, sliderGap;
  int sliderSizeX, sliderSizeY;
  int groupWidth;


  //String [] sliderNames;
  //String [] groupNames;
  //String slider, group;
  //Group gCreate;


  Interface(PApplet this_) {
    cp5  = new ControlP5(this_);
    //s1 = new CallbackListener(this);
    sliderPosX = 10;
    sliderPosY = 10;
    sliderGap = 25;
    sliderSizeX = 160;
    sliderSizeY = 10;
    groupWidth = 180;
    env_H = sliderSizeY*2 + sliderGap*1;
    bo_H = sliderSizeY*2 + sliderGap*3;
    ou_H = sliderSizeY*2 + sliderGap*5;

    //sliderNames = new String [] {"TOLERANCE", "BOUNDARY VISIBILITY", "INFLUENCE", "FALLOFF", "QUALITY", "POPULATION", "OBEDIENCE", "INFLUENCE "};
    //groupNames = new String [] {"ENVIRONMENT", "OURO", "BOROS"};
  }

  void build() {
    cp5.addCallback();

    color gFg = color(200, 50, 100, 100);
    color gLabel = color(255);
    color gBg = color(50, 200, 100, 120);
    color sFg = color(10, 150);
    color sAct = color(50);
    color sBg = color(50, 120);
    color rBg = sBg;
    color rAct = sAct;

    String g1_slider1 = "g1_slider1";
    String g1_slider2 = "g1_slider2";
    String g2_slider1 = "g2_slider1";
    String g2_slider2 = "g2_slider2";
    String g2_slider3 = "g2_slider3";
    String g3_slider1 = "g3_slider1";
    String g3_slider2 = "g3_slider2";
    String g3_slider3 = "g3_slider3 "; // added a space to fix the identical name problem!--------



    g1 = cp5.addGroup("g1")
      .setPosition(100, 50)
      .setBarHeight(10)
      .setColorForeground(gFg)
      .setColorLabel(gLabel)
      .setColorBackground(gBg)
      .setColorValue(color(255, 126, 240))
      .setBackgroundHeight(env_H)
      .setBackgroundColor(color(100, 100))
      ;

    g2 = cp5.addGroup("g2")
      .setPosition(100, 150)
      .setBarHeight(10)
      .setColorForeground(gFg)
      .setColorLabel(gLabel)
      .setColorBackground(gBg)
      .setBackgroundHeight(ou_H)
      .setBackgroundColor(color(100, 100))
      ;

    g3 = cp5.addGroup("g3")
      .setPosition(100, 270)
      .setBarHeight(10)
      .setColorForeground(gFg)
      .setColorLabel(gLabel)
      .setColorBackground(gBg)
      .setBackgroundHeight(bo_H)
      .setBackgroundColor(color(100, 100))
      ;

    // environment sliders
    cp5.addSlider(g1_slider1)
      .setPosition(sliderPosX, sliderPosY)
      .setSize(sliderSizeX, sliderSizeY)
      .setColorForeground(sFg)
      .setColorBackground(sBg)
      .setColorActive(sAct)
      .setRange(100, 500)
      .setValue(100)
      .setGroup(g1)
      ;

    cp5.addSlider(g1_slider2)
      .setPosition(sliderPosX, sliderPosY+sliderGap)
      .setSize(sliderSizeX, sliderSizeY)
      .setColorForeground(sFg)
      .setColorBackground(sBg)
      .setColorActive(sAct)
      .setGroup(g1)
      ;

    // g2 sliders
    cp5.addSlider(g2_slider1)
      .setPosition(sliderPosX, sliderPosY)
      .setSize(sliderSizeX, sliderSizeY)
      .setColorForeground(sFg)
      .setColorBackground(sBg)
      .setColorActive(sAct)
      .setGroup(g2)
      ;

    cp5.addSlider(g2_slider2)
      .setPosition(sliderPosX, sliderPosY+sliderGap)
      .setSize(sliderSizeX, sliderSizeY)
      .setColorForeground(sFg)
      .setColorBackground(sBg)
      .setColorActive(sAct)
      .setGroup(g2)
      ;

    cp5.addSlider(g2_slider3)
      .setSliderMode(Slider.FLEXIBLE)
      .setRange(-100, 100)
      .setDefaultValue(0)
      .setHandleSize(20)
      .setPosition(sliderPosX, sliderPosY+sliderGap*2)
      .setSize(sliderSizeX, sliderSizeY)
      .setColorForeground(sFg)
      .setColorBackground(sBg)
      .setColorActive(sAct)
      .setGroup(g2)
      ;

    // CHECKBOX g2

    cp5.addCheckBox("check1")
      .setPosition(10, 90)
      .setSize(20, 20)
      .setColorActive(rAct)
      .setColorLabel(color(255))
      .setColorBackground(rBg)
      .setItemsPerRow(1)
      .setSpacingColumn(60)
      .addItem("check1", 0)
      .moveTo(g2)
      ;

    cp5.addCheckBox("check2")
      .setPosition(10, 112)
      .setSize(20, 20)
      .setColorActive(rAct)
      .setColorLabel(color(255))
      .setColorBackground(rBg)
      .setItemsPerRow(1)
      .setSpacingColumn(60)
      .addItem("check2", 0)
      .moveTo(g2)
      ;

    //g3 sliders
    cp5.addSlider(g3_slider1)
      .setPosition(sliderPosX, sliderPosY)
      .setSize(sliderSizeX, sliderSizeY)
      .setColorForeground(sFg)
      .setColorBackground(sBg)
      .setColorActive(sAct)
      .setGroup(g3)
      ;

    cp5.addSlider(g3_slider2)
      .setPosition(sliderPosX, sliderPosY+sliderGap)
      .setSize(sliderSizeX, sliderSizeY)
      .setColorForeground(sFg)
      .setColorBackground(sBg)
      .setColorActive(sAct)
      .setGroup(g3)
      ;

    cp5.addSlider(g3_slider3)
      .setPosition(sliderPosX, sliderPosY+sliderGap*2)
      .setSize(sliderSizeX, sliderSizeY)
      .setColorForeground(sFg)
      .setColorBackground(sBg)
      .setColorActive(sAct)
      .setGroup(g3)
      ;




    // caption alignment
    cp5.getController(g1_slider1).getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
    cp5.getController(g1_slider2).getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
    cp5.getController(g2_slider1).getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
    cp5.getController(g2_slider2).getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
    cp5.getController(g2_slider3).getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
    cp5.getController(g3_slider1).getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
    cp5.getController(g3_slider2).getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);
    cp5.getController(g3_slider3).getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);


    accordion = cp5.addAccordion("acc")
      .setPosition(0, 0)
      .setWidth(180)
      .addItem(g1)
      .addItem(g2)
      .addItem(g3)
      ;

    accordion.setCollapseMode(Accordion.MULTI);



    // unsuccesful looping efforts ----------------------------------------

    /*
        for(int i = 0; i < groupNames.length; i++){
                group = "g" + i;
                for(int j = 0; j < groupNames.length; j++){
                    String groupTitle = groupNames[j];
                    gCreate = cp5.addGroup(groupTitle)
                                .setPosition(100,50)
                                .setWidth(groupWidth)
                                .setBackgroundHeight(100)
                                .setBackgroundColor(color(100))
                                ;
                }

            } 
            for(int i = 0; i < sliderNames.length; i++){
                String sliderTitle = sliderNames[i];
                            cp5.addSlider(sliderTitle)
                            .setPosition(sliderPosX,sliderPosY)
                            .setSize(sliderSizeX,sliderSizeY)
                            .setGroup(group)
                            ;
                            cp5.getController(sliderTitle).getCaptionLabel().align(ControlP5.LEFT, ControlP5.BOTTOM_OUTSIDE).setPaddingX(0);

                }
            */
  }
}


// add the above callback to controlP5


// add another callback to slider s1, callback event will only be invoked for this 
// particular controller.

import controlP5.*; ControlP5 cp5;

public float sliderBredd = 0; public float sliderHojd = 0;

PFont myFont;

void setup() { size(800, 800); cp5 = new ControlP5(this);

cp5.addSlider("sliderBredd") .setRange(-255, 255) .setPosition(40, 40) .setSize(200, 29) ;

cp5.addSlider("sliderHojd") .setRange(-255, 255) .setPosition(40, 80) .setSize(200, 29) ; }

void draw () { background(255, 255, 255); myFont = createFont("Times-Roman", 48); textFont(myFont, 272); translate(400, 400);

for (int i=0; i<12; i=i+1) {

fill(14, 105, 237);
textAlign(CENTER);
rotate(PI*1/3);
text("Q", sliderBredd, sliderHojd);

} }

//hexagonal fractal
import controlP5.*;
ControlP5 cp5;

int radius = 400;
int num  = 4;

void setup() {
  size(800, 800);
  background(32);
  cp5 = new ControlP5(this);

  smooth();
  noFill();
  noLoop();
  frameRate(2);

  cp5.addSlider("num")
    .setRange(0, 6)
    .setPosition(100, 100)
    .setSize(10, 100)
    .setNumberOfTickMarks(5)
    ;

  cp5.addSlider("radius")
    .setRange(150,450)
    .setPosition(0, 100)
    .setSize(10, 100)
    .setNumberOfTickMarks(5)
    ;
}

void draw() {
  translate(width/2, height/2);
  drawHexagon(radius, num);
}

void drawHexagon(float radius, int num ) {
  stroke(255);
  float x, y = 0;
  beginShape();
  for (int i = 0; i < 6; i++) {
    x = cos(radians(60*i))*radius;
    y = sin(radians(60*i))*radius;
    vertex(x, y);
  }
  endShape(CLOSE);
  //////////////////////////////////////////////////////////////

  if (num-- > 1) {

    pushMatrix();
    translate(radius/2, 0);
    drawHexagon(radius/2, num);
    popMatrix();

    pushMatrix();
    translate(-radius/4, -radius*cos(radians(30))/2);
    drawHexagon(radius/2, num);
    popMatrix();

    pushMatrix();
    translate(-radius/4, radius*cos(radians(30))/2);
    drawHexagon(radius/2, num);
    popMatrix();
  }
}

Has anyone had this issue before? I'm wanting to have a control window setup which would have sliders to control graphics on the main canvas, but in a separate window.

Here's my code - thanks for any ideas people. (Still can't get this code to output right in these forums - ctrl & O not working again for some reason).

`import controlP5.*;

//Declare Controls ControlP5 controlP5; ControlWindow myControlWindow; //initialize control window Controller slider; //initialize slider

//Setup

void setup() { //Initalize Main Canvas size(1480, 360);

//Initialize ControlP5 and Control Window controlP5 = new ControlP5(this);

myControlWindow = controlP5.addControlWindow("Control Window", 200, 200, 480, 360);

//Initialize Controls slider = controlP5.addSlider("X", 0, 30, 15, 88, 70, 320, 24);

}

//Draw

void draw() {

}`

import controlP5.*;

ControlP5 cp5;

int sliderValue2 = 100;
color sliderValue = color(255, 0, 255);
Slider abc;

void setup() {
  size(700, 400);
  noStroke();
  cp5 = new ControlP5(this);

  cp5.addSlider("sliderValue2")
    .setPosition(width/2 - 100, 50)
    .setSize(200, 20)
    .setRange(0, 255)
    .setNumberOfTickMarks(5) 
    .setSliderMode(Slider.FLEXIBLE)
    ;

  cp5.addSlider("sliderValue")
    .setPosition(width/2 - 100, 150)
    .setSize(200, 20)
    .setRange(0, 255)
    .setNumberOfTickMarks(5) 
    .setSliderMode(Slider.FLEXIBLE)
    ;
}

void draw() {
  background(sliderValue);

  fill(sliderValue2);
  rect(0, 0, width, 100);

}

Thanks.

Thanks!

Here is my code:

PImage img; PImage dest; ControlP5 cp5; int sliderValue = 127; int textValue = 0;

void setup() { background(255, 255, 255); noStroke(); colorMode(HSB, 100); for (int i = 0; i < 100; i++) { for (int j = 0; j < 100; j++) { stroke(i, j, 100); point(i, j); } }

size(960, 540); img = loadImage("car1.png"); strokeWeight(10); cp5 = new ControlP5(this); cp5.addSlider("slide", 0, 255, sliderValue, 100, 50, 100, 20); cp5.addTextfield("text", 100, 100, 100, 20); }

void draw() { textSize(25); { fill(0); text("Real-Time Tuning", 370, 60); } fill(1000); image(img, 0, 0); fill(sliderValue); stroke(textValue); }

public void slider(int val) { sliderValue = val; }

public void text(String val) { textValue = Integer.parseInt(val); }

cp5.get("nameofslider").hide();

works in the draw() function (outside of the keyPressed() routine so I know the command works - it just doesn't work where it should). Code pasting worked and is shown below - hoping for anyone that has tried the same thing to please wise me up to what needs to happen. Thank you in advance.

btw - the keyPressed routine that I'm needing to run the above hide command works fine for the saveFrame command so I know that's programmed correctly.