Processing Forum

ControlP5 and JS mode problem

[8 Replies]
- 27-Aug-2013 09:14 AM
- Forum: Integration and Hardware
Hi there,
I'm using ControlP5 control library in my project and it works nicely in Java mode, but when I try to run it in JavaScript mode in Chrome browser it says:

Uncaught Processing.js: Unable to execute pjs sketch: ReferenceError: ControlP5 is not defined

probably the next error is related to the first too:

Uncaught TypeError: Cannot call method 'draw' of null

What I have to do to make it working on-line ?

Processing 2 sj and Moodle

[0 Replies]
- 22-Aug-2013 03:12 AM
- Forum: Integration and Hardware
Hello,
I was wondering if it's possible to run processing 2 js sketches directly from course on Moodle, and if so, what plagins have to be installed on Moodle plateform for it ?

Scale using controlp5 controler

[2 Replies]
- 19-Jul-2013 09:46 AM
- Forum: Contributed Library Questions
Hi,
I'm trying to scale the rectaingles using slider from controlp5 library. I've found some similar example at http://www.stefanstubbe.com/blog/wp-content/uploads/2008/05/difa_07_s_ringplant.pde, but unfortunatelly I can't run this example, because P3D is not supported by my hardware/diver, so I can't really figure out how it works.

I've written some piece of code, with 2d rectangles, but it seems to not be working... Can somebody tell me what is wrong here, please ?
2. import controlP5.*;
3. ControlP5 controlP5;
5. float x1, y1, x2, y2, x3, y3, h1, h2, h3, w;
6. float scale = 0.92;
8. void setup(){
10. controlP5 = new ControlP5(this);
11. Controller mySlider4 = controlP5.addSlider("scale",0.7,1.3,scale,20,80,100,10);
13. size(779, 500);
14. background(2, 240, 222);
15. x1 = 0;
16. y1 = 140;
17. x2 = 0;
18. y2 = 250;
19. y3 = 0;
20. y3 = 380;
21. w = 2;
22. h1 = 2.5;
23. h2 = 5;
24. h3 = 10;
25. noStroke();
26. }
28. void draw(){
29. fill(255);
30. rect(x1, y1, h1, w);
31. rect(x1 + 2.5, y1, h1, w);
32. rect(x1 +5, y1, h1, w);
33. rect(x1 +7.5, y1, h1, w);
35. rect(x2, y2, h2, w);
36. rect(x2+5, y2, h2, w);
38. rect(x3, y3, h3, w);
40. rect(x1*10, y1, h1, w);
41. rect((x1*10) + 2.5, y1, h1, w);
42. rect((x1*10) + 5, y1, h1, w);
43. rect((x1*10) + 7.5, y1, h1, w);
45. rect(x2*10, y2, h2, w);
46. rect((x2*10) + 5, y2, h2, w);
48. rect(x3*10, y3, h3, w);
49. }
52. void controlEvent(ControlEvent theEvent) {
53. if (theEvent.isGroup()) {
54. println(theEvent.getGroup().getName());
55. }
56. else if (theEvent.isController()) {
57. println(theEvent.getController().getName());
58. if (theEvent.controller().name()=="scale") {
59. scale(scale*y1*x1*x2*y2*x3*y3*h1*h2*h3*w); }
60. }
61. }

Show button by selecting item from dropdown list

[3 Replies]
- 17-Jul-2013 06:05 AM
- Forum: Contributed Library Questions
I tryed to set Id to each item and then use this Id to show the button, but probably I'm doing something very wrong...
Here is the code:

import controlP5.*;

ControlP5 cp5;

DropdownList d1, d2, d3;

// define an array of images and the variable to select between them

PImage[] images1 = new PImage[3];

PImage[] images2 = new PImage[3];

PImage[] images3 = new PImage[3];// array of images

int selectedImage1;

int selectedImage2;// the variable used to select the image to show on screen

int selectedImage3;

String selectedGroup = "ImageSelect1";

int selectedImage;

int selectedItem;

Button b1, b2;

int cnt = 0;

void setup() {

size(775, 500);

// create the controlP5dropdownlist and give it the name you will use later, in this case ImageSelect

cp5 = new ControlP5(this);

d1 = cp5.addDropdownList("ImageSelect1", width/2-50, 100, 100, 120).setPosition(0, 22);

//customize(d1);// customize the first list

d1.setBackgroundColor(color(250));

d1.setItemHeight(20);

d1.setBarHeight(20);

d1.setLabel("Interval view");

d1.captionLabel().style().marginTop = 5;

d1.captionLabel().style().marginLeft = 5;

d1.valueLabel().style().marginTop = 5;

d1.addItem("1st layer", 0) .setId(0);

d1.addItem("2nd layer", 1) .setId(1);

d1.addItem("3rd layer", 2) .setId(2);

d1.setColorBackground(color(60));

d1.setColorActive(color(255, 128));

images1[0] = loadImage("visuals_1.png");

images1[1] = loadImage("visuals_2.png");

images1[2] = loadImage("visuals_3.png");

d2 = cp5.addDropdownList("ImageSelect2", width/2-50, 00, 100, 120).setPosition(102, 22);

images2[0] = loadImage("1visuals_1.png");

images2[1] = loadImage("1visuals_2.png");

images2[2] = loadImage("1visuals_3.png");

//d2.setBackgroundColor(color(250));

d2.setItemHeight(20);

d2.setLabel("Harmonic rythm view");

d2.setBarHeight(20);

d2.captionLabel().style().marginTop = 5;

d2.captionLabel().style().marginLeft = 5;

d2.valueLabel().style().marginTop = 5;

d2.addItem("1st l", 0); // give each item a value, in this example starting from zero

d2.addItem("2nd l", 1);

d2.addItem("3rd l", 2);

d2.setColorBackground(color(60));

d2.setColorActive(color(255, 128));

d3 = cp5.addDropdownList("ImageSelect3", width/2-50, 00, 100, 120).setPosition(204, 22);

images3[0] = loadImage("1visuals_1.png");

images3[1] = loadImage("1visuals_2.png");

images3[2] = loadImage("1visuals_3.png");

//d2.setBackgroundColor(color(250));

d3.setItemHeight(20);

d3.setLabel("Bind layers");

d3.setBarHeight(20);

d3.captionLabel().style().marginTop = 5;

d3.captionLabel().style().marginLeft = 5;

d3.valueLabel().style().marginTop = 5;

d3.addItem("1st l", 0);

d3.addItem("2nd l", 1);

d3.addItem("3rd l", 2);

d3.setColorBackground(color(60));

d3.setColorActive(color(255, 128));

b1 = cp5.addButton("1")

.setValue(0)

.setPosition(20, 200)

.setSize(20, 20);

b1.hide();

b2 = cp5.addButton("2")

.setValue(0)

.setPosition(20, 300)

.setSize(20, 20);

b2.hide();

}

void draw() {

background(128);

if (selectedGroup.equals("ImageSelect1")) {

image(images1[selectedImage], 0, 0);

if (selectedItem.equals(Id(0))) {

b1.show();

}

if (selectedItem.equals(Id(1))) {

b2.show();

}

}

else if (selectedGroup.equals("ImageSelect2")) {

image(images2[selectedImage], 0, 0);

}

else if (selectedGroup.equals("ImageSelect3")) {

image(images3[selectedImage], 0, 0);

}

}

void controlEvent(ControlEvent theEvent) {

if (theEvent.isGroup()) {

selectedGroup = theEvent.group().name();

selectedImage = int(theEvent.group().value());

selectedItem = int(theEvent.group().getId());

}

else if (theEvent.isController()) {

}

How to play different files from different items in dropdown menu from controlp5 ?

[8 Replies]
- 15-Jul-2013 04:59 PM
- Forum: Contributed Library Questions
Hi, I have created 3 sketches which play music, animate things and load background images.
I'd like to join all them together into one sketch by using dropdown menu from controlp5 library.
I've done the dropdown menu which displays different images when the different items have been choosen, but I need more fuctionality - music and animation, different for different items.

How can I make these items appear different objects, players, for example ?

Here is my code:
2. import controlP5.*;
4. ControlP5 cp5;
6. DropdownList d1;
7. PImage[] images = new PImage[3];
8. int selectedImage;
10. int cnt = 0;
12. void setup() {
13. size(775, 500);
15. cp5 = new ControlP5(this);
16. d1 = cp5.addDropdownList("ImageSelect",width/2-50,100,100,120).setPosition(0, 22);
17. customize(d1);
19. images[0] = loadImage("visuals_1.png");
20. images[1] = loadImage("visuals_2.png");
21. images[2] = loadImage("visuals_3.png");
23. }
26. void customize(DropdownList ddl) {
27. ddl.setBackgroundColor(color(250));
28. ddl.setItemHeight(20);
29. ddl.setBarHeight(20);
30. ddl.captionLabel().set("Interval view");
31. ddl.captionLabel().style().marginTop = 5;
32. ddl.captionLabel().style().marginLeft = 5;
33. ddl.valueLabel().style().marginTop = 5;
34. ddl.addItem("1st layer", 0);
35. ddl.addItem("2nd layer", 1);
36. ddl.addItem("3rd layer", 2);
38. ddl.setColorBackground(color(60));
39. ddl.setColorActive(color(255, 128));
40. }
42. void draw() {
43. background(128);
44. image(images[selectedImage],0,0);
45. }
47. void controlEvent(ControlEvent theEvent) {
48. if (theEvent.isGroup()) {
49. if (theEvent.group().name() == "ImageSelect") {
50. selectedImage = int(theEvent.group().value());
51. }
52. } else if(theEvent.isController()) {
54. }
55. }

Activity Trend