Processing does not provide any direct mechanism for manipulating the look of the sketch Window, but Java natively supports tricks like turning off the window chrome, explicitly setting window position and making a window “float” over all other UI elements. All of this can be accessed via PApplet’s internal “frame” field, which holds an instance of a Frame object representing the window your sketch is running in. But even so, Java won’t let you have free reign without a little trickery.

The following hack demonstrates how to make a window that has no OS chrome, always stays on top of the UI and has an explicitly set screen position. You can even use the cursor keys to move the window around the screen.

Personally, what I like most about this hack is that it gets around Processing’s (or possibly Java’s) assumptions about a minimum window size of ~120×120. If you specify a size that’s less than 120 on one side, Processing will be pad that side with grey pixels to reach the minimum. But with this hack you can have tiny windows that you can micro-manage to your heart’s delight. I use it to make debug dispays, small control panels and other useful things.

Update: @CedricKiefer pointed out another Processing example that allows for transparent and even irregularly shaped windows. It’s Windows-only apparently, I bet this kind of thing is a major violation of Apple GUI laws anyhow.

Update 2: @ideoforms took my post literally and made a sketch with multiple bouncing windows. Nice.

Code: FloatingWindow.pde

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
// FloatingWindow.pde
// Marius Watz - http://workshop.evolutionzone.com
// 
// Provides a method for creating frame-less windows with smaller 
// than typical sizes. Also demonstrates how to set the precise
// location of the window on screen, as well as make it float over
// all other windows.
//
// Can be useful if you'd like to make a persistent "debug" app of
// some sort, or just because it's neat when things don't look like
// your everyday operating system.
//
// Works both with P2D and OPENGL.Uses a trick from this Processing hack:
// http://processing.org/hacks/hacks:undecoratedframe
 
PFont fnt;
int W,H,PX,PY;
 
void setup() {
  // W x H == desired size of frame. 
  // Normally, Processing will not create a frame smaller than ~120x120,
  // but will pad the window with blank pixels.
  W=100;
  H=40;
 
  // initial position of frame
  PX=100;
  PY=100;
 
  size(W,H);
  fnt=createFont("Arial",12,false);
}
 
// overriding PApplet.init() to add a hack of our own
void init() {
 
  // trick to make it possible to change the frame properties
  frame.removeNotify(); 
 
  // comment this out to turn OS chrome back on
  frame.setUndecorated(true); 
 
  // comment this out to not have the window "float"
  frame.setAlwaysOnTop(true); 
 
  frame.setResizable(true);  
  frame.addNotify(); 
 
  // making sure to call PApplet.init() so that things 
  // get  properly set up.
  super.init();
}
 
void draw() {
  background(0);
 
  // resize and set initial location a few frames after sketch start. 
  // our window will now be tiny and located at position PX,PY.
 
  if(frameCount==5) {
    frame.resize(W,H);
    frame.setLocation(PX,PY);
  }
 
  // draw window outline
  noStroke();
  fill(255,100,0);
  rect(0,0, width,height);
  fill(0);
  rect(3,3, width-6,height-6);
 
  textFont(fnt);
  fill(255,255,0);
  text(frameCount/10+" | "+
    frame.getLocation().x+","+
    frame.getLocation().y,16,24);
}
 
// the cursor keys may be used to move the window around
void keyPressed() {
  if(key==CODED) {
    if(keyCode==LEFT) frame.setLocation(
      frame.getLocation().x-5,
      frame.getLocation().y);
    if(keyCode==RIGHT) frame.setLocation(
      frame.getLocation().x+5,
      frame.getLocation().y);
    if(keyCode==UP) frame.setLocation(
      frame.getLocation().x,
      frame.getLocation().y-5);
    if(keyCode==DOWN) frame.setLocation(
      frame.getLocation().x,
      frame.getLocation().y+5);
  }  
}

2 Comments »

There are 2 comments to "Hack: Non-standard windows in Processing". You may leave your own comment.
1. Code & form » The L on my keyboard is missing., September 29th, 2009 at 13:38

[...] widget that copies the character L into memory whenever I click on it (that’s why I wrote the floating window hack.) I’m coping better every day. A few days ago I would simply wiggle the little stump [...]

2. Imperdibles (September 29th – September 30th) » Hipertextos [desde La Plata], September 30th, 2009 at 22:07

[...] Hack: Non-standard windows in Processing – Processing does not provide any direct mechanism for manipulating the look of the sketch Window, but Java natively supports tricks like turning off the window chrome, explicitly setting window position and making a window “float” over all other UI elements. All of this can be accessed via PApplet’s internal “frame” field, which holds an instance of a Frame object representing the window your sketch is running in. But even so, Java won’t let you have free reign without a little trickery. [...]

Comment on this entry

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">