# Creating detached windows

**URL:** https://discourse.processing.org/t/creating-detached-windows/42987
**Category:** Coding Questions
**Created:** [October 16, 2023, 10:48pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987 "2023-10-16T22:48:33Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 16, 2023, 10:48pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/1 "2023-10-16T22:48:33Z")

</div>

Hi!  
I found some code by others here, who helped me to create processing applications that don’t have a default windows title bar. This inspired me to try this, I just don’t know on how to start.

Now, I want to know, if it is possible to create a processing window with P2D, that allows having the main Processing window & multiple other windows, that are positioned relative to the main processing window, which also use processing and not swing.  
The windows would also need to have an order, in which they are displayed.

This could result in something like this:

 ![Untitled109_20231017004139](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/4/94f4c27925b80e99573bd264ab7b2a633cf3d20e.png)

This would allow for a 3d environment, with 2d menus or other cool things. I’m thinking about an office software where the user can drag toolboxes around.

Also you could use multiple Processing instances or sketches, but then the taskbar would be full of multiple windows.

Thanks for any advice -Libby

---

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 17, 2023, 7:15pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/3 "2023-10-17T19:15:48Z")

</div>

Hi, Why did you delete your comment? Not trying to be weird.  
-Libby

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 17, 2023, 7:49pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/4 "2023-10-17T19:49:20Z")

</div>

I thought that the default window for Processing was a JFrame (which is a Swing component), but apparently it is an AWT Frame component that some code casts to a JFrame. I’m working on your question and can make three windows, but I’m not able to move them around the way I want. I found out you don’t have to use a Mouse Handler for the canvas; you can also use mouseX and mouseY but the result is not good enough to post so far.

---

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 17, 2023, 8:22pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/5 "2023-10-17T20:22:58Z")

</div>

Oh, that explains it. Thank you for working on my question, that’s really kind of you. 🙂  
-Libby

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 17, 2023, 9:08pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/6 "2023-10-17T21:08:28Z")

</div>

Apparently, the library g4p can also create multiple windows

> **[Quarks Place](http://www.lagers.org.uk/g4p/guides/g02-windows.html)**
>
> G4P and Processing

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 19, 2023, 7:02pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/7 "2023-10-19T19:02:42Z")

</div>

Looks like you’re happy with G4P so I’m not going to post the code for this. It uses two PApplet windows in additon to the default window and is a little complicated.

 ![multiWnd](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/b/7b6ea5e24c33d1830fa926ac710295710cd0115b.jpeg)

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [October 19, 2023, 8:11pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/8 "2023-10-19T20:11:46Z")

</div>

impressive.

besides, you can also in **one** window combine 3D and 2D elements (when this is your main interest). Sometimes named HUD: [Head-up display - Wikipedia](https://en.wikipedia.org/wiki/Head-up_display)

see #9: [25 life-saving tips for Processing | Amnon P5 - Experiments with Processing by Amnon Owed](https://amnonp5.wordpress.com/2012/01/28/25-life-saving-tips-for-processing/)

- so you could make two frames / boxes (2D) inside the 3D window

---

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 20, 2023, 2:42pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/9 "2023-10-20T14:42:48Z")

</div>

Hi! Thank you for this, but im not that good with coding, so would you be able to give the code for it?  
-Libby

---

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 20, 2023, 2:43pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/10 "2023-10-20T14:43:26Z")

</div>

That is also a great way! Thanks you for your help.  
-Libby

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 20, 2023, 5:10pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/11 "2023-10-20T17:10:17Z")

</div>

Reference for undecorated window: [https://kodejava.org/how-do-i-create-undecorated-frame/](https://kodejava.org/how-do-i-create-undecorated-frame/)

The following source code creates two PApplet windows (undecorated) in addition to the default window.  
_Addendum:_ Edited to condense to single class. Developed on Mac; however, should run on all three operating systems.

```auto
//https://kodejava.org/how-do-i-create-undecorated-frame/

import java.awt.*;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionAdapter;

Window wnd1;
Window wnd2;

class Window extends PApplet {
  Frame frame;
  Canvas canvas;

  Point offset = new Point();

  int x, y, w, h;
  color bkgrnd;
  
  public Window(int x, int y, int w, int h, color bkgrnd) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.bkgrnd = bkgrnd;
    
    PApplet.runSketch(new String[] {this.getClass().getSimpleName()}, this);
    frame = ((processing.awt.PSurfaceAWT.SmoothCanvas) surface.getNative()).getFrame();
    canvas = (processing.awt.PSurfaceAWT.SmoothCanvas) surface.getNative();
    
    frame.removeNotify();
    frame.setUndecorated(true);
    frame.addNotify();
    frame.setLocation(x, y);
   
    canvas.addMouseListener(new MouseAdapter() {
      void mousePressed(MouseEvent msEvnt) {
        offset.x = msEvnt.getX();
        offset.y = msEvnt.getY();
      }
    }
    );

    canvas.addMouseMotionListener(new MouseMotionAdapter() {
      void mouseDragged(MouseEvent msEvnt) {
        Point pt = frame.getLocation();
        frame.setLocation(pt.x + msEvnt.getX() - offset.x, pt.y + msEvnt.getY() - offset.y);
      }
    }
    );
  }

  void myBtnDisplay() {
    fill(255, 226, 13); // button color
    strokeWeight(4.0);
    stroke(255);
    rect( 160, 30, 100, 30, 15); // rounded rect
    fill(0); // text color
    textSize(20.0);
    textAlign(CENTER, CENTER);
    text("myBtn", 160, 30-4, 100, 30);
  }

  void settings() {
    size(w, h); // Sets size of canvas
  }

  void setup() {
    background(bkgrnd);
    frame.setResizable(true); // To avoid strip at bottom
  }

  void draw() {
    fill(0, 255, 255);
    circle(50, 50, 50);
    fill(0, 255, 0);
    rect(100, 100, 100, 30);
    myBtnDisplay();
    fill(0, 255, 0);
    textSize(20.0);
    text("hello", 50, 150, 100, 44);
  }

  void mousePressed() {
    if ((mouseX >= 160) && (mouseX <= 160 + 100) && (mouseY >= 30) && (mouseY <= 30 + 30)) {
      println("You hit the button.");
    }
  }
}

// ========= Default Window ========== //

void setup() {
  size(400, 400);
  surface.setTitle("Default Window");
  wnd1 = new Window(100,100,400,400,color(255,255,0));
  wnd2 = new Window(720,100,300,500,color(0,0,255));
}

void draw(){
  fill(255, 0, 0);
  circle(width/2, height/2, 200);
}

```

---

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 20, 2023, 11:40pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/12 "2023-10-20T23:40:22Z")

</div>

Wow! I’m impressed! Thanky you so much for that code! 🙂  
-Libby

---

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 21, 2023, 12:25am UTC](https://discourse.processing.org/t/creating-detached-windows/42987/13 "2023-10-21T00:25:07Z")

</div>

Hi!  
i get an Error, i don’t know if im missing a library or it is like this only on Linux, or im too stupid, but i can’t get anything out from this error 😨

```auto
java.lang.IllegalStateException: Component must have a valid peer
	at java.desktop/java.awt.Component$FlipBufferStrategy.flip(Component.java:4179)
	at java.desktop/java.awt.Component$FlipBufferStrategy.show(Component.java:4306)
	at processing.awt.PSurfaceAWT.render(PSurfaceAWT.java:250)
	at processing.awt.PSurfaceAWT$9.callDraw(PSurfaceAWT.java:1387)
	at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:356)
IllegalStateException: Component must have a valid peer

```

-Libby

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 21, 2023, 12:31am UTC](https://discourse.processing.org/t/creating-detached-windows/42987/14 "2023-10-21T00:31:27Z")

</div>

It’s a harmless error. Make sure that you’re on the main window when you hit ‘run’; not on one of the tabs.

---

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 21, 2023, 1:32am UTC](https://discourse.processing.org/t/creating-detached-windows/42987/15 "2023-10-21T01:32:33Z")

</div>

Hi! When I hit run it will give out one of these errors, but sometimes it runs, it doesn’t change when i’m on the main tab/window.

With a very small chance (i would say 5%) the windows open with 0 errors!

> **Error variant 1**
>
> java.lang.IllegalStateException: Component must have a valid peer  
> at java.desktop/java.awt.Component$FlipBufferStrategy.getBackBuffer(Component.java:4154)  
> at java.desktop/java.awt.Component$FlipBufferStrategy.updateInternalBuffers(Component.java:4137)  
> at java.desktop/java.awt.Component$FlipBufferStrategy.createBuffers(Component.java:4128)  
> at java.desktop/java.awt.Component$FlipBufferStrategy.(Component.java:4069)  
> at java.desktop/java.awt.Component$FlipSubRegionBufferStrategy.(Component.java:4601)  
> at java.desktop/java.awt.Component.createBufferStrategy(Component.java:3932)  
> at java.desktop/java.awt.Canvas.createBufferStrategy(Canvas.java:201)  
> at java.desktop/java.awt.Component.createBufferStrategy(Component.java:3856)  
> at java.desktop/java.awt.Canvas.createBufferStrategy(Canvas.java:176)  
> at processing.awt.PSurfaceAWT.render(PSurfaceAWT.java:234)  
> at processing.awt.PSurfaceAWT$9.callDraw(PSurfaceAWT.java:1387)  
> at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:356)  
> IllegalStateException: Component must have a valid peer

> **Error variant 2**
>
> java.lang.IllegalStateException: Component must have a valid peer  
> at java.desktop/java.awt.Component$FlipBufferStrategy.getBackBuffer(Component.java:4154)  
> at java.desktop/java.awt.Component$FlipBufferStrategy.updateInternalBuffers(Component.java:4137)  
> at java.desktop/java.awt.Component$FlipBufferStrategy.revalidate(Component.java:4258)  
> at java.desktop/java.awt.Component$FlipBufferStrategy.getDrawGraphics(Component.java:4235)  
> at processing.awt.PSurfaceAWT.render(PSurfaceAWT.java:243)  
> at processing.awt.PSurfaceAWT$9.callDraw(PSurfaceAWT.java:1387)  
> at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:356)  
> IllegalStateException: Component must have a valid peer

> **Error variant 3**
>
> java.lang.NullPointerException: Cannot invoke “java.awt.Image.getGraphics()” because “this.drawBuffer” is null  
> at java.desktop/java.awt.Component$FlipBufferStrategy.getDrawGraphics(Component.java:4236)  
> at processing.awt.PSurfaceAWT.render(PSurfaceAWT.java:243)  
> at processing.awt.PSurfaceAWT$9.callDraw(PSurfaceAWT.java:1387)  
> at processing.core.PSurfaceNone$AnimationThread.run(PSurfaceNone.java:356)  
> NullPointerException

Could it possible be because of my java version?

> **Version Info (java --version) gave this out:**
>
> `openjdk 18.0.2-ea 2022-07-19 OpenJDK Runtime Environment (build 18.0.2-ea+9-Ubuntu-222.04) OpenJDK 64-Bit Server VM (build 18.0.2-ea+9-Ubuntu-222.04, mixed mode, sharing) `

Its pretty weird, i don’t know why this happens, i’m sorry for the inconvienience! \</3  
-Libby

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 21, 2023, 2:20am UTC](https://discourse.processing.org/t/creating-detached-windows/42987/16 "2023-10-21T02:20:58Z")

</div>

I’ve rarely seen that error on MacOS also, but its usually because I was trying to ‘run’ from one of the tabs. I don’t know why it happens more on Linux and really don’t understand why it happens at all. I do have a Linux box and will try to run it on that system when I get a chance. I’m using a little later version of OpenJDK than you, but I don’t know if that makes any difference.

 ![jdk](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/8/284248d3b0aa4fe5f6c62d5fda74b442efdc2ea1.png)

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 21, 2023, 5:28am UTC](https://discourse.processing.org/t/creating-detached-windows/42987/17 "2023-10-21T05:28:17Z")

</div>

I’m very disappointed by the way the demo performs on Linux operating system; as far as I’m concerned it is unusable (for reasons unclear to me). It is acceptable on MacOS, although it occasionally throws the same error message as the one you have documented. I have no idea why it is so bad on Linux and will also try to test it on Windows. If it performs poorly there as well I will take down the post. Thanks for making me aware of this problem; it is not what I intended.

---

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 21, 2023, 2:26pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/18 "2023-10-21T14:26:20Z")

</div>

Hi! I think the problem is on processings side tho… ☹  
-Libby

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 21, 2023, 2:33pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/19 "2023-10-21T14:33:05Z")

</div>

> [@Noodlybanan](#):
>
> problem is on processings side

You may be right. There are other ways of getting multiple windows with JFrames or JavaFx which I avoided because you indicated you didn’t want to use Swing components, but that may be a better way to go. The undecorated window appears to have some issues also.

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 21, 2023, 4:05pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/20 "2023-10-21T16:05:11Z")

</div>

Are you able to run this demo on your Linux operating system:

```auto
//http://www.java2s.com/example/java/swing/managing-window-types.html

import java.awt.FlowLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
import javax.swing.JFrame;
import java.awt.GraphicsDevice;
import java.awt.GraphicsEnvironment;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;

class Utility extends JFrame {
  int x, y, w, h;

  public Utility(int x, int y, int w, int h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.setTitle("Utility Window");
    this.setBounds(x, y, w, h);
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    this.setType(Type.UTILITY);
    this.setLayout(new FlowLayout());
    JButton exitButton = new JButton("Quit");
    this.add(exitButton);
    exitButton.addActionListener(event->System.exit(0));
  }
}

void setup() {
  size(400, 400);
  surface.setTitle("Default Processing Window");
  SwingUtilities.invokeLater(() -> {
    Utility wnd1 = new Utility(100, 100, 400, 300);
    wnd1.setVisible(true);
    Utility wnd2 = new Utility(400, 100, 300, 200);
    wnd2.setVisible(true);
  }
  );
}

```

---

<div class="post-metadata">

### Author: ![Noodlybanan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noodlybanan/32/18897_2.png) [@Noodlybanan](https://discourse.processing.org/u/Noodlybanan)
#### Post date: [October 21, 2023, 4:27pm UTC](https://discourse.processing.org/t/creating-detached-windows/42987/21 "2023-10-21T16:27:22Z")

</div>

Hi! Thats also really cool, since you can pass variables through swing windows, could it be possible to pass 2 pgraphics objects through it?  
-Libby

[Next page](https://discourse.processing.org/t/creating-detached-windows/42987.md?page=2)
