# Transparent/translucent window (drawing graphics on desktop). How to capture mouse and keyboard?

**URL:** <https://discourse.processing.org/t/transparent-translucent-window-drawing-graphics-on-desktop-how-to-capture-mouse-and-keyboard/1390>\
**Category:** Coding Questions\
**Created:** [June 30, 2018, 5:04pm UTC](https://discourse.processing.org/t/transparent-translucent-window-drawing-graphics-on-desktop-how-to-capture-mouse-and-keyboard/1390 "2018-06-30T17:04:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rsb](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rsb](https://discourse.processing.org/u/rsb)\
**Post date:** [June 30, 2018, 5:04pm UTC](https://discourse.processing.org/t/transparent-translucent-window-drawing-graphics-on-desktop-how-to-capture-mouse-and-keyboard/1390/1 "2018-06-30T17:04:09Z")

</div>

Hello forum 🙂

I found a fairly simple way to use processing to draw graphics directly to your screen, to make it seem like your window is transparent or translucent, or that your graphics background has full transparency.

The problem though is user input no longer works ☹

`keyPressed()` and `mousePressed()` don’t get called, and `mouseX` and Y are always 0.

You can use `import java.awt.MouseInfo;` and `MouseInfo.getPointerInfo().getLocation().x` to somewhat solve the problem, but I was hoping to find a way that fairly seamlessly integrated with processing.

I wonder if anyone has a clever way to solve this? I think plenty of people would be interested in way to draw graphics without an opaque background.

Here’s my code, hope it helps if you we’re looking for way to do what is does:

```auto
//Import Libraries
import processing.awt.PSurfaceAWT;
import javax.swing.JPanel;
import javax.swing.JFrame;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;

//Declare Gobal Variables
PGraphics pg;
JFrame frame;
JPanel panel;

void setup()
{

size(200, 200); 

frame = (JFrame)((PSurfaceAWT.SmoothCanvas) getSurface().getNative()).getFrame();
frame.removeNotify();
frame.setUndecorated(true);
frame.setLayout(null);
frame.addNotify();

pg = createGraphics(width, height);

JPanel panel = new JPanel() {
 @Override
   protected void paintComponent(Graphics graphics) {
   if (graphics instanceof Graphics2D) {
     Graphics2D g2d = (Graphics2D) graphics;
     g2d.drawImage(pg.image, 0, 0, null);
   }
 }
};

frame.setContentPane(panel);
}

void draw()
{
if(mouseX!=0) {
 println(mouseX);
}
pg.beginDraw();
pg.background(0, 0);
pg.fill(0, 153, 204, frameCount%255);  
pg.ellipse(frameCount%width, frameCount%height, 60, 60);
pg.endDraw();
frame.setBackground(new Color(0, 0, 0, 0));
}

void mousePressed() {
println(mouseX);  
}

void keyPressed() {
println(key); 

}

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 1, 2018, 3:56am UTC](https://discourse.processing.org/t/transparent-translucent-window-drawing-graphics-on-desktop-how-to-capture-mouse-and-keyboard/1390/2 "2018-07-01T03:56:53Z")

</div>

Adding a listener is the way to go. This below hopefully get you started. Idea from [this](https://stackoverflow.com/questions/2668718/java-mouselistener). Now, you need to see if you can hook this up to P3 keyboard/mouse events. Check the mouseEvent header in the [Library Basics](https://github.com/processing/processing/wiki/Library-Basics) as it could provide some guidance.

Kf

```java
  panel.addMouseListener(new MouseAdapter() {
    public void mouseClicked(MouseEvent e) {
      System.out.println("Clicked!");
    }
  }
  );

  frame.setContentPane(panel); //THIS line is in your demo above

```

---

<div class="post-metadata">

**Author:** ![rsb](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rsb](https://discourse.processing.org/u/rsb)\
**Post date:** [July 1, 2018, 11:19pm UTC](https://discourse.processing.org/t/transparent-translucent-window-drawing-graphics-on-desktop-how-to-capture-mouse-and-keyboard/1390/3 "2018-07-01T23:19:10Z")

</div>

Thanks for the help @kfrajer! Yes, your code example was just what I needed. The chunk of code I ended up adding looked like this:

```Java
  MouseAdapter mA = 
    new MouseAdapter() {
    public void mousePressed(MouseEvent me) {
      mousePressed = true;
      applet.mousePressed();
    }
    public void mouseReleased(MouseEvent me) {
      mousePressed = false;
      applet.mouseReleased();
    }
  };

  panel.addMouseListener(mA);

```

which required some importing:  
`import java.awt.event.MouseAdapter; import java.awt.event.MouseMotionListener; import java.awt.event.MouseEvent; import java.awt.MouseInfo;`

and a global applet object

`PApplet applet = this;`

I updated the demo to include mouse motion and keyboard input as well as the mouse clicking. More or less ready for someone to play around with now I think!

```Processing
//Import Libraries
import processing.awt.PSurfaceAWT;
import javax.swing.JPanel;
import javax.swing.JFrame;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseMotionListener;
import java.awt.event.MouseEvent;
import java.awt.MouseInfo;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;

//Declare Gobal Variables
PGraphics pg;
JFrame frame;
JPanel panel;
PApplet applet = this;

void setup()
{

  size(200, 200); 

  frame = (JFrame)((PSurfaceAWT.SmoothCanvas) getSurface().getNative()).getFrame();
  frame.removeNotify();
  frame.setUndecorated(true);
  frame.setLayout(null);
  frame.addNotify();

  pg = createGraphics(width, height);

  JPanel panel = new JPanel() {
    @Override
      protected void paintComponent(Graphics graphics) {
      if (graphics instanceof Graphics2D) {
        Graphics2D g2d = (Graphics2D) graphics;
        g2d.drawImage(pg.image, 0, 0, null);
      }
    }
  };

  frame.setContentPane(panel);
  panel.setFocusable(true);
  panel.setFocusTraversalKeysEnabled(false);
  panel.requestFocus();
  panel.requestFocusInWindow();

  MouseAdapter mA = 
    new MouseAdapter() {
    public void mousePressed(MouseEvent me) {
      mousePressed = true;
      applet.mousePressed();
    }
    public void mouseReleased(MouseEvent me) {
      mousePressed = false;
      applet.mouseReleased();
    }
  };

  panel.addMouseListener(mA);

  mA = new MouseAdapter() {

    public void mouseDragged(MouseEvent me) {
      mouseX = MouseInfo.getPointerInfo().getLocation().x-frame.getLocation().x;
      mouseY = MouseInfo.getPointerInfo().getLocation().y-frame.getLocation().y;
      applet.mouseDragged();
    }
    public void mouseMoved(MouseEvent me) {
      mouseX = MouseInfo.getPointerInfo().getLocation().x-frame.getLocation().x;
      mouseY = MouseInfo.getPointerInfo().getLocation().y-frame.getLocation().y;
      applet.mouseMoved();
    }
  };

  panel.addMouseMotionListener(mA);

  KeyListener kL = 
    new KeyListener() {

    public void keyTyped(KeyEvent e) {
      key = e.getKeyChar();
      keyCode = e.getKeyCode();
      applet.keyTyped();
    }

    public void keyReleased(KeyEvent e) {
      key = e.getKeyChar();
      keyCode = e.getKeyCode();
      applet.keyReleased();
      keyPressed = false;
    }

    public void keyPressed(KeyEvent e) {
      key = e.getKeyChar();
      keyCode = e.getKeyCode();
      applet.keyPressed();
      keyPressed = true;
    }
  };

  panel.addKeyListener(kL);
}

void draw()
{
  pg.beginDraw();
  pg.background(0, 0);
  if (mousePressed) {
    pg.fill(0, 153, 204, 126);
  } else {
    pg.fill(0, 204, 153, 126);
  }
  pg.ellipse(mouseX, mouseY, 60, 60);
  pg.fill(0, 255);
  pg.stroke(0, 255);
  pg.text(key, mouseX-3, mouseY-10);
  pg.endDraw();
  frame.setBackground(new Color(0, 0, 0, 0));
}

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [July 2, 2018, 12:09am UTC](https://discourse.processing.org/t/transparent-translucent-window-drawing-graphics-on-desktop-how-to-capture-mouse-and-keyboard/1390/4 "2018-07-02T00:09:23Z")

</div>

Thxs for sharing. Really good example. I can see what you need that extra Applet object. Here I want to add a previous [post](https://forum.processing.org/two/discussion/20499/moving-a-translucent-window-around-the-screen/p1) from the older forum although yours takes it to a different level.

Kf