Multiple Processing applet windows

edited November 2013 in Questions about Code

Hi there,

I know this is a subject posted other times, but I'm checking all the possible solutions I've found and I'm getting some weird results. For example, this code (http://forum.processing.org/one/topic/how-to-shown-multiple-processing-applet-windows-again.html) works. But, for example, with width = 200 and height = 200, it draws a different ellipse if I use 100 instead of width/2... I.e.

width = 200;
height = 200;
ellipse(width/2, height/2, 30, 30);
ellipse(100, 100, 30, 30);             // It draws the ellipse in other position!!!

I need to draw accurately in the extra windows... Some idea what it's happening? I'm using Window 7, 64 bits and Processing 2.1, 2.03.

Thanks!

import java.awt.Frame;
import java.awt.BorderLayout;

ControlFrame cf;

int def;

void setup() {
  size(200, 200 );
  cf = addControlFrame("widow2", 200, 200);
}

void draw() {
  background(255, 0, 0);
  text("window 1", width/2, height/2);
}

ControlFrame addControlFrame(String theName, int theWidth, int theHeight) {
  Frame f = new Frame(theName);
  ControlFrame p = new ControlFrame(this, theWidth, theHeight);
  f.add(p);
  p.init();
  f.setTitle(theName);
  f.setSize(p.w, p.h);
  f.setLocation(900, 100);
  f.setResizable(false);
  f.setVisible(true);
  return p;
}

public class ControlFrame extends PApplet {

  int w, h;

  int abc = 100;

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

  public void draw() {
    background(255);
    fill(0); // weird, I have to add this to fill the ellipse…
    ellipse(width/2, height/2, 30, 30);
    ellipse(100, 100, 30, 30); // It draws the ellipse in other position!!!!
    this.text("window 2", width/2, height/2+70);
  }
  private ControlFrame() {
  }

  public ControlFrame(Object theParent, int theWidth, int theHeight) {
    parent = theParent;
    w = theWidth;
    h = theHeight;
  }


  Object parent;
}

Answers

  • I tried the program and it worked fine. The two ellipses (lines 44 & 45) occupied the same position as expected because the size of the second window is 200 x 200 pixels. If you change this in line 10 to a different size then you get two ellipses again as expected. So I can't see what the problem is. :-/

    The variables width and height are set by Processing during the call to size() and they must not be changed by assigning values to them e.g.

    // Never do this
    width = 200;
    height = 200;
    // It will NOT change the display window size.
    
  • Hi!

    The two ellipses (lines 44 & 45) occupied the same position as expected because the size of the second window is 200 x 200 pixels.

    That's the point... ! The previous code give me this result... processing

    Two ellipses in different positions.

    // Never do this width = 200; height = 200; // It will NOT change the display window size.

    Yes, yes it was pseudo-code to try to explain better my problem.

    Thanks!

  • Interesting problem. I must admit that I tested the code in Mac OSX and the circles lined up.

    It appears that the same sketch behaves differently in Windows and OSX - as you say weird.

    I suggest that you change the background colour to yellow and draw the circles using two other colours then save the display as a png. Then use a graphics program (e.g. Paint.NET) to check the size of the display and the positions of the two ellipses to see if that can give some hints as to the cause.

  • Another data point: I also see the circles line up in Mac OSX, but they're offset in Ubuntu 13.10. Curiouser and curiouser...

  • And yet another weirdness: the text "window 2" appears a little bit closer to the bottom of the window in Mac OS than it does in Linux.

  • the text "window 2" appears a little bit closer to the bottom of the window in Mac OS than it does in Linux.

    Yes. There is like a "zoom". In fact, the windows is 200x200, but a line of length 180 crosses the entire window.

    line (30, 0, 30, 180)

  • edited November 2013 Answer ✓

    I think I see the problem - in line 24

    f.setSize(p.w, p.h);

    you are setting the external-size of the frame to be the same as the PApplet display area. It means the display area will smaller than the size specified and different on different operating systems (the frame decoration is different thickness's in different OS).

    The trick here is to force the frame to resize so that the client area (inside) is big enough to hold the sketch of the right size.

    The code below is a mixture of yours and the code I used in the G4P library. It should work (fingers crossed) the same on different OS's.

    Perhaps Bilmor can test it in Linux and you in Windows.

    I don't promise that it will work but I am confident that the cause is the size of the frame.

    import java.awt.Frame;
    import java.awt.Dimension;
    import java.awt.BorderLayout;
    
    ControlFrame cf;
    
    public void setup() {
      size(200, 200 );
      cf = new ControlFrame("widow2", 400, 400);
    }
    
    public void draw() {
      background(255);
      text("window 1", width/2, height/2);
    }
    
    public class ControlFrame extends Frame {
      private ControlApplet papplet;
    
      public ControlFrame(String title, int w, int h) {
        papplet = new ControlApplet();
        papplet.frame = this;
        // So we can resize the frame to get the sketch canvas size reqd.
        setResizable(true);
        setTitle(title);
        setLocation(900, 100);
        papplet.appWidth = w;
        papplet.appHeight = h;
    
        // Set the papplet size preferences
        papplet.resize(papplet.appWidth, papplet.appHeight);
        papplet.setPreferredSize(new Dimension(papplet.appWidth, papplet.appHeight));
        papplet.setMinimumSize(new Dimension(papplet.appWidth, papplet.appHeight));
        add(papplet);
        papplet.init();
        pack();
        setVisible(true);
      }
    }
    
    public class ControlApplet extends PApplet {
    
      public int appWidth, appHeight;
    
      public void setup() {
        size(appWidth, appHeight);
      }
    
      public void draw() {
        background(255);
        fill(255, 0, 0); // weird, I have to add this to fill the ellipse…
        ellipse(width/2, height/2, 30, 30);
        fill(255, 255, 0);
        ellipse(100, 100, 30, 30); // It draws the ellipse in other position!!!!
        this.text("window 2", width/2, height/2+70);
      }
    }
    
  • Hi!

    Wow, yes, now with

        cf = new ControlFrame("widow2", 400, 400);
        ....
    `ellipse(width/2, height/2, 30, 30);`
        ellipse(200, 200, 30, 30)
    

    the circles lined up in Windows 7 and Processing 2.1 or 2.03!

    Will see if it's also fixed in Linux.

    Thank you very much!

  • Yep, looks good in Linux here.

Sign In or Register to comment.