Hello!

I have multiple sketches designed to have their own toolbar using ControlP5. Individually, they run fine, but when I try to put each in its own frame, the controls only render on the last window created.

I have seen the ControlWindow example ( http://www.sojamo.de/libraries/controlP5/reference/controlP5/ControlWindow.html). But I am trying to have multiple windows with their own controls, rather than one separate control window.

Here is the code in question:

CP5_manyWindows.pde (this is the "main" sketch that ties the others together)

1. //CP5_manyWindows.pde
2. View1 v1;
   View2 v2;
   
   void setup(){
     PFrame v1_frame = new PFrame(v1);
     PFrame v2_frame = new PFrame(v2); 
   }
   
   void draw(){
   }
   
   public class PFrame extends Frame {
      public PFrame(View1 app) {
           setBounds(100,100,400,300);
           setTitle("View1");
           app = new View1();
           add(app);
           app.init();
           show();
       }
   
       public PFrame(View2 app) {
           setBounds(100,100,400,300);
           setTitle("View2");
           app = new View2();
           add(app);
           app.init();
           show();
       }
   }

View1.pde

1. //View1
   
   import controlP5.*;
   
   
   class View1 extends PApplet{
   
   ControlP5 cp5;
   ListBox axisbox;
   Button resetbutton;
   
   void setup(){
     size(400, 300);
     //frame.setResizable(true);
     smooth();
   
     // controlP5 configuration
     cp5 = new ControlP5(this);
     //cp5.setAutoDraw(false);
   //  ControlGroup sc_gui = cp5.addGroup("sc_gui", 0, 0);
     axisbox = cp5.addListBox("items",5,30,60,60);//(name, x, y, w, h)
   //  axisbox.setGroup(sc_gui);
     axisbox.setBarHeight(25);
     axisbox.setItemHeight(15);
     axisbox.captionLabel().style().marginTop = 7;
     axisbox.valueLabel().style().marginTop = 10; // the +/- sign
     axisbox.addItem("item "+1,1);
     axisbox.addItem("item "+2,2);
   
     // controlP5 buttons
     resetbutton = cp5.addButton("reset_view1",0f,width-70,5,60,25);
   //    resetbutton.setGroup(sc_gui);//(name, val, x, y, w, h)
   }
   
   void draw(){
     //cp5.draw();
   }
   
   //BEGIN GUI CONTROLLERS
   /**
    * controlP5 event controller
    */
   public void controlEvent(ControlEvent event) {
     if (event.isGroup()) { // an event from a group e.g. scrollList
       if( event.group().name().equalsIgnoreCase("items") ){
           int listindex = int( event.group().value() );
           switch(listindex){
             case 1: println(listindex); break;
             case 2: println(listindex); break;
             default: println("function not yet defined");
           }
       } else {
         println("interface element not defined");
       }
     } else { 
       println(event.controller().name());
     }
   }
   //END GUI CONTROLLERS
   
   }// end class
   

View2.pde

1. //View2
   
   import controlP5.*;
   
   
   class View2 extends PApplet{
   
   ControlP5 cp5;
   ListBox axisbox;
   Button resetbutton;
   
   void setup(){
     size(400, 300);
     //frame.setResizable(true);
     smooth();
   
       // controlP5 configuration
     cp5 = new ControlP5(this); 
     cp5.setAutoDraw(false);
   //  ControlGroup th_gui = cp5.addGroup("th_gui", 0, 0); 
     axisbox = cp5.addListBox("options",5,130,60,60);
   //  axisbox.setGroup(th_gui);//(name, x, y, w, h)
     axisbox.setBarHeight(25);
     axisbox.setItemHeight(15);
     axisbox.captionLabel().style().marginTop = 7;
     axisbox.valueLabel().style().marginTop = 10; // the +/- sign
     axisbox.addItem("option 1",1);
     axisbox.addItem("option 2",2);
   
     // controlP5 buttons
     resetbutton = cp5.addButton("reset_view2",0f,width-70,105,60,25);
   //  resetbutton.setGroup(th_gui);//(name, val, x, y, w, h)
   }
   
   
   void draw(){
     cp5.draw();
   }
   
   //BEGIN GUI CONTROLLERS
   /**
    * controlP5 event controller
    */
   public void controlEvent(ControlEvent event) {
     if (event.isGroup()) { // an event from a group e.g. scrollList
       if( event.group().name().equalsIgnoreCase("options") ){
         int listindex = int( event.group().value() );
         switch(listindex){
           case 1: println(listindex); break;
           case 2: println(listindex); break;
           default: println("function not yet defined");
         }
       } else {
         println("interface element not defined");
       }
     } else { 
       println(event.controller().name());
     }
   }
   //END GUI CONTROLLERS
   
   } // end class
   

Hi!

My overall goal is to be able to allow someone with a touchscreen device (iPhone, for example) to be able to connect to a website running javascript, and for their touch coordinates (x, y) to be sent to a Processing sketch. I know that if I can get the below working (sending 'hi' from a .js client to a Processing server), that I will be set.

My current approach is to run a server in the Processing sketch and try to send data via Javascript. However, the output is a little off (shown below). Any ideas or suggestions are greatly appreciated.

The javascript (it uses http://socket.io/):

1. <script src="http://cdn.socket.io/stable/socket.io.js"></script>
   <script type="text/javascript">
   var socket = new io.Socket('localhost',{
               port: 10002
           });
           socket.connect(); }
   
           socket.send('hi');
2. </script>
   

The Processing (an example straight from Processing.org):

1. // Example by Tom Igoe
   
   import processing.net.*;
   
   int port = 10002;      
   Server myServer;       
   
   void setup()
   {
     size(400, 400);
     background(0);
     myServer = new Server(this, port);
   }
   
   void draw()
   {
     // Get the next available client
     Client thisClient = myServer.available();
     // If the client is not null, and says something, display what it said
     if (thisClient !=null) {
       String whatClientSaid = thisClient.readString();
       if (whatClientSaid != null) {
         println(thisClient.ip() + "t" + whatClientSaid);
       }
     }
   }

The resulting output server-side:

1. 0:0:0:0:0:0:0:1tGET /socket.io/xhr-multipart/ HTTP/1.1
   Host: localhost:10002
   User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
   Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
   Accept-Language: en-us,en;q=0.5
   Accept-Encoding: gzip, deflate
   Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
   Keep-Alive: 115
   Connection: keep-alive
   Origin: null
   Pragma: no-cache
   Cache-Control: no-cache