Is it possible to not have the generic windows close buttons and make your own close button?

Processing Coding Questions
1

So I’m talking about applications like discord, they don’t have that ugly windows border around their application, the league of legends client also doesn’t have it, Photoshop also has a custom one. So I know it’s possible but is it possible in processing? And if not, in what language would this be possible?

2 Likes
2

I’m not quite sure if that’s what you wanted, but you could do it by removing the frameborder.
In Processing 2, it was very easy to do so:

frame.removeNotify();
frame.setUndecorated(true);
frame.addNotify();

In Processing 3, the frame variable was replaced with the surface variable.
I don’t think that there is a way to remove the border using surface (I could be wrong), but you can still access the frame using processing.awt.PSurfaceAWT.
So you could do it like this:

import processing.awt.PSurfaceAWT;

void setup(){
  size(800, 600);
  
  PSurfaceAWT awtSurface = (PSurfaceAWT)surface;
  PSurfaceAWT.SmoothCanvas smoothCanvas = (PSurfaceAWT.SmoothCanvas)awtSurface.getNative();
  smoothCanvas.getFrame().removeNotify();
  smoothCanvas.getFrame().setUndecorated(true);// Hide the window border
  smoothCanvas.getFrame().setLocation(100, 100);// Move the window
  smoothCanvas.getFrame().addNotify();
}

void draw(){
  background(200);
  fill(200, 0, 0);
  noStroke();
  rect(width - 50, 0, 50, 25, 5);
}

void mousePressed(){
  if(mouseX > width - 50 && mouseY < 50){
    exit();// If the mouse is touching the red rectangle, close the sketch
  }
}

Note: You won’t be able to move the window if you do it like this (the only way is to use smoothCanvas.getFrame().setLocation(100, 100);).

2 Likes
3

Thank you very much, do you also have an idea how to remove the little grey border it now makes on the right and bottom side?

4

With the above code you shouldn’t be getting a border at all. But this might depend on your operating system. Are you using a call to background() (and not just drawing a rect())? Can we see your code? Can you show us an image of the sketch?

5

The smallest window size you can get in Processing is 128 * 128, so if you call size() and make your window at least 128 * 128 pixels big, you shouldn’t see any grey border.

6

Added a bit of code, now you can drag it:

import processing.awt.PSurfaceAWT;
import java.awt.MouseInfo;
import java.awt.Point;

boolean isInFullscreen;
boolean dragging;
int dragX, dragY;
Button hide, full, close;
PSurfaceAWT awtSurface;
PSurfaceAWT.SmoothCanvas smoothCanvas;

void setup(){
  size(800, 600);
  noStroke();
  
  awtSurface = (PSurfaceAWT)surface;
  smoothCanvas = (PSurfaceAWT.SmoothCanvas)awtSurface.getNative();
  smoothCanvas.getFrame().removeNotify();
  smoothCanvas.getFrame().setUndecorated(true);// Hide the window border
  smoothCanvas.getFrame().setLocation(100, 100);// Move the window
  smoothCanvas.getFrame().addNotify();
  surface.setResizable(true);
  
  // Menu Buttons
  hide = new Button(width - 115, -5, 40, 25, color(100), 5);
  full = new Button(width - 80, -5, 40, 25, color(150), 5);
  close = new Button(width - 45, -5, 50, 25, color(200, 0, 0), 5);
}

void draw(){
  background(200);
  // Draw Menu Bar
  fill(225);
  rect(0, 0, width, 20);
  hide.display();
  full.display();
  close.display();
}

void mousePressed(){
  if(hide.isMouseOver()){
    smoothCanvas.getFrame().toBack();// Hide window
  }
  if(full.isMouseOver()){
    isInFullscreen = !isInFullscreen;
    if(isInFullscreen){
      smoothCanvas.getFrame().setLocation(0, 0);
      smoothCanvas.getFrame().setSize(displayWidth, displayHeight);
    }else{
      smoothCanvas.getFrame().setLocation(100, 100);
      smoothCanvas.getFrame().setSize(800, 600);
    }
  }
  if(close.isMouseOver()){
    exit();// Close window
  }
  // Drag window
  if(mouseY < 20){
    dragging = true;
    dragX = mouseX;
    dragY = mouseY;
  }
}

void mouseDragged(){
  if(dragging){
    // Get mouse position and move the window
    Point mouse = MouseInfo.getPointerInfo().getLocation();
    smoothCanvas.getFrame().setLocation(mouse.x - dragX, mouse.y - dragY);
  }
}

void mouseReleased(){
  dragging = false;
}

// Menu Button Class
class Button{
  int xpos, ypos;
  int sizeX, sizeY;
  color buttonColor;
  int borderRadius;
  
  Button(int x, int y, int sx, int sy, color c, int br){
    xpos = x;
    ypos = y;
    sizeX = sx;
    sizeY = sy;
    buttonColor = c;
    borderRadius = br;
  }
  
  void display(){
    fill(buttonColor);
    rect(xpos, ypos, sizeX, sizeY, borderRadius);
  }
  
  boolean isMouseOver(){
    if(mouseX > xpos && mouseX < xpos + sizeX && mouseY > ypos && mouseY < sizeY){
      return true;
    }
    return false;
  }
}

“How to create your own OS with just 104 lines of code” :slight_smile:

3 Likes
7

You can also define in as fullScreen(); on setup and then do “surface.setSize(400, 400);” and “surface.setLocation((displayWidth/2)-(width/2), (displayHeight/2)-(height/2));”

The code:

void setup(){
  fullScreen();
  surface.setSize(400, 400);
  surface.setLocation((displayWidth/2)-(width/2), (displayHeight/2)-(height/2));
}

(Then you create your own close button)

1 Like