An off-topic question regarding basic Java Programming

[tr4nquility]

Hello. I know that this is a board for emulation news, specifically JPCSP.
However, since it is using Java as primary language, I would like to ask a little thing on Java programming, hoping some users with knowledge of Java can help me out..
(To moderators : please feel free to delete this thread if it is inappropriate in any ways ^_^ )

Here's my problem description :
I would like to build a simple highlighter program. The idea is to set an image to change the cursor so that it will look like a highlighter. And then, when we move the cursor, it will trace a line along with our movement. The requirement here is to be able to draw the line on a transparent background (not fully transparent though, just about 55% and the line itself should be fully opaque).

My progress so far is being able to draw the line, with transparent background. However, the line is also transparent. Here's my code : left click to begin drawing, right click to stop, and press space to change color.

Code:

import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;

public class FreehandExample extends JFrame implements MouseListener, MouseMotionListener, KeyListener {
     private int counter = 0;
     private int draw = 0;
     private int red[] = {58,71,231,243,255};
     private int green[] = {54,224,235,109,40};
     private int blue[] = {241,95,61,52,40};
     private Point start, end;
     private Graphics gd;

     public FreehandExample()
     {
        setUndecorated(true);
        setBackground(new Color(255,0,0));
        setSize(new Dimension(300,200));
        setLocationRelativeTo(null);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        addKeyListener(this);
        addMouseListener(this);
        addMouseMotionListener(this);
        setOpacity(0.55f);
        setVisible(true);
     }

    public void mousePressed(MouseEvent e) {
        start = new Point(e.getX(), e.getY());
    }
    public void mouseClicked(MouseEvent e) {
        if(e.getButton() == MouseEvent.BUTTON1) draw = 1;
        if(e.getButton() == MouseEvent.BUTTON3) draw = 0;
    }
    public void mouseEntered(MouseEvent e) {}
    public void mouseExited(MouseEvent e) {}
    public void mouseReleased(MouseEvent e) {}
    public void mouseDragged(MouseEvent e)  {}

    public void mouseMoved(MouseEvent e) {
       gd = this.getGraphics();

       if(draw==1){
          end = new Point(e.getX(), e.getY());
          gd.setColor(new Color( red[counter],green[counter],blue[counter]));
          gd.drawLine(start.x, start.y, end.x, end.y);
          start = end;
       }
    }

    public static void main(String []args){
         new FreehandExample();
    }

    public void keyPressed(KeyEvent e) {
         if(e.getKeyCode() == KeyEvent.VK_SPACE) {
            counter++;
            if(counter>4) counter=0;
         }
    }
    public void keyReleased(KeyEvent e) {}
    public void keyTyped(KeyEvent e) {}
}

I have tried the concept of per-pixel transparency (as referrred in here)... but the line is not being drawn immediately... there is some kind of delay before the line is drawn. However, it indeed produced the correct result e.g the line is not transparent while the frame is transparent.

The second idea is to capture screenshot using Robot class, and then apply it as frame background in fullscreen. This way we will have a window as being "transparent".. Though when we have a video working in background, this method will definitely fail.. Even if we set the program to take screenshot every seconds, it's still not a good way to achieve transparency...

Could someone please help me modify this code (or at least give some insights ^_^ ) to meet the requirement...?

Thanks.

[gid15]

Code:

gd.setColor(new Color( red[counter],green[counter],blue[counter]));
          gd.drawLine(start.x, start.y, end.x, end.y);

Have you tried to also set the alpha value of the line's color?

[tr4nquility]

Code:

gd.setColor(new Color( red[counter],green[counter],blue[counter]));
          gd.drawLine(start.x, start.y, end.x, end.y);

Have you tried to also set the alpha value of the line's color?

Yes, I have...

Code:

gd.setColor(new Color( red[counter],green[counter],blue[counter], 255 ));

Using maximum alpha value 255 still no good. The color itself indeed will adjust to its own alpha value, but it is contained within the main panel / frame which has its own opacity. It the end, the opacity of line will be adjusted with the opacity of its container...
If we set the container's opacity to 0f, then no line will be showed...

P.S : my final objective is to get this line drawn in fully transparent background ^_^. The cursor image will act like a "laser pointer" used in presentations... so when the pointer is moved, we will have a line drawn to imitate a highlighter.

[tr4nquility]

Here's the update on my progress using per-pixel translucency... The line is fully opaque while the background is transparent.
Sample result can be seen here

Code:

import java.awt.Color;
import java.awt.Dimension;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagLayout;
import java.awt.Paint;
import java.awt.Point;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class GradientTranslucentWindow extends JFrame implements KeyListener, MouseListener, MouseMotionListener {
    
    private int counter = 0;
    private int draw = 0;
    private int red[] = {58,71,231,243,255};
    private int green[] = {54,224,235,109,40};
    private int blue[] = {241,95,61,52,40};
    private Point start, end;
    private Graphics gd;
    private JPanel panel;
    
    public GradientTranslucentWindow() {
  

        setBackground(new Color(0,0,0,0));
        setSize(new Dimension(500,500));
        setLocationRelativeTo(null);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

         panel = new JPanel() {
            @Override
            protected void paintComponent(Graphics g) {
                if (g instanceof Graphics2D) {
                    final int R = 240;
                    final int G = 240;
                    final int B = 200;

                    Paint p =
                        new GradientPaint(0.0f, 0.0f, new Color(R, G, B, 50),
                            0.0f, getHeight(), new Color(R, G, B, 255), true);
                    Graphics2D g2d = (Graphics2D)g;
                    g2d.setPaint(p);
                    g2d.fillRect(0, 0, getWidth(), getHeight());
                  
                }
            }
        };
        setContentPane(panel);
        setLayout(new GridBagLayout());
        addKeyListener(this);
        addMouseListener(this);
        addMouseMotionListener(this);
    }

    public static void main(String[] args) {
       JFrame.setDefaultLookAndFeelDecorated(true);
       GradientTranslucentWindow gtw = new GradientTranslucentWindow();
      
       gtw.setVisible(true);
      
    }
    
    public void mousePressed(MouseEvent e)   { start = new Point(e.getX(), e.getY()); }
    public void mouseClicked(MouseEvent e) {
        if(e.getButton() == MouseEvent.BUTTON1) draw = 1;
        if(e.getButton() == MouseEvent.BUTTON3) draw = 0;
        
    }
    public void mouseEntered(MouseEvent e) {}
    public void mouseExited(MouseEvent e) {}
    public void mouseReleased(MouseEvent e) {}
    public void mouseDragged(MouseEvent e)  {}
    
     public void mouseMoved(MouseEvent e) {
         gd = this.getGraphics();

         if(draw==1){
             end = new Point(e.getX(), e.getY());
        
             gd.setColor(new Color( red[counter],green[counter],blue[counter]));
             gd.drawLine(start.x, start.y, end.x, end.y);
             start = end;
                        
             System.out.println(start.x + " - " + start.y);
         }
        
    }
    
    public void keyPressed(KeyEvent e) {
        if(e.getKeyCode() == KeyEvent.VK_SPACE) {
            counter++;
            if(counter>4) counter=0;
        }
    }
    public void keyReleased(KeyEvent e) {}
    public void keyTyped(KeyEvent e) {}
}

There's delay before the line is drawn... and when it is over, the lines are drawn altogether.. If this problem is eliminated, then it will be perfect

[Itaru]

Here you go:

Code:

import java.awt.Color;
import java.awt.Dimension;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Paint;
import java.awt.Point;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class GradientTranslucentWindow extends JFrame implements KeyListener, MouseListener, MouseMotionListener {
    private int counter = 0;
    private int draw = 0;
    private Point start, end;
    private JPanel panel;
    private static final int red[] = {58, 71, 231, 243, 255};
    private static final int green[] = {54, 224, 235, 109, 40};
    private static final int blue[] = {241, 95, 61, 52, 40};
    private static final int R = 240;
    private static final int G = 240;
    private static final int B = 200;

    public GradientTranslucentWindow() {
        setBackground(new Color(0, 0, 0, 0));
        setSize(new Dimension(500, 500));
        setLocationRelativeTo(null);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        panel = new JPanel() {
            protected void paintComponent(Graphics g) {
                if (g instanceof Graphics2D) {
                    Paint p = new GradientPaint(0.0f, 0.0f, new Color(R, G, B, 50),
                            0.0f, getHeight(), new Color(R, G, B, 255), true);
                    Graphics2D g2d = (Graphics2D) g;
                    g2d.setPaint(p);
                    g2d.fillRect(0, 0, getWidth(), getHeight());
                    if (draw == 1) {
                        g2d.setColor(new Color(red[counter], green[counter], blue[counter]));
                        g2d.drawLine(start.x, start.y, end.x, end.y);
                        start = end;
                    }
                }
            }
        };
        setContentPane(panel);
        addKeyListener(this);
        addMouseListener(this);
        addMouseMotionListener(this);
    }

    public static void main(String[] args) {
        JFrame.setDefaultLookAndFeelDecorated(true);
        new GradientTranslucentWindow().setVisible(true);
    }

    public void mousePressed(MouseEvent e) {
        start = e.getPoint();
        if (e.getButton() == MouseEvent.BUTTON1) draw = 1;
        else if (e.getButton() == MouseEvent.BUTTON3) draw = 0;
    }

    public void mouseClicked(MouseEvent e) {}

    public void mouseEntered(MouseEvent e) {}

    public void mouseExited(MouseEvent e) {}

    public void mouseReleased(MouseEvent e) {}

    public void mouseDragged(MouseEvent e) {
        start = e.getPoint();
    }

    public void mouseMoved(MouseEvent e) {
        if (draw == 1) {
            end = e.getPoint();
            int x = (start.x < end.x) ? start.x : end.x;
            int y = (start.y < end.y) ? start.y : end.y;
            panel.repaint(x, y, Math.abs(start.x - end.x) + 1, Math.abs(start.y - end.y) + 1);
            System.out.println(start.x + " - " + start.y);
        }
    }

    public void keyPressed(KeyEvent e) {
        if (e.getKeyCode() == KeyEvent.VK_SPACE) {
            counter++;
            if (counter > 4) counter = 0;    
        }
    }

    public void keyReleased(KeyEvent e) {}

    public void keyTyped(KeyEvent e) {}
}

[tr4nquility]

It works ^^ Thanks Itaru

It seems that all kinds of drawing activities must be done inside paintComponent, and the listeners are meant to provide data necessary for drawing... Am I right ?

Would you please explain what this piece of code do ? (I know that it is another way to write "if" statement, but what is the logic behind this ?)

Code:

int x = (start.x < end.x) ? start.x : end.x;
int y = (start.y < end.y) ? start.y : end.y;
panel.repaint(x, y, Math.abs(start.x - end.x) + 1, Math.abs(start.y - end.y) + 1);

*Edit : I've managed to find my mistake... Before, I only call repaint(). It should be panel.repaint().... And then we must set a flag so that the paintComponent will fill the rectangle just once. This way, when mouseMoved() calls panel.repaint() , only the line is drawn. The rectangle is not refilled again.

[Itaru]

Yes, all drawings should be done in the paint...() methods since they will not be drawn immediately anywhere else. The listeners just update the state of the objects to be drawn and call the proper repaint() method to tell the system to draw them.

That piece of code is to determine the position and size of the rectangle that contains the line to be drawn. That panel.repaint() method will only repaint the area bounded by that rectangle (which contains the line) to avoid repainting the whole panel. The logic for x and y determines the top-left most position of the rectangle, and the calculations inside Math.abs determine its width and height. I added 1 to the size calculations since the line to be drawn is 1 pixel wide.

BTW, which flag are you talking about? To optimize the panel drawing, it's probably a good idea to set the doublebuffering flag to true and the opaque flag to false.

[tr4nquility]

BTW, which flag are you talking about? To optimize the panel drawing, it's probably a good idea to set the doublebuffering flag to true and the opaque flag to false.

I haven't included the flag (and it's not a new variable either... just set "draw" to -1, 0, or 1) in my previous code ^_^
Here it is, with the same result as your code :

Code:

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.GradientPaint;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GridBagLayout;
import java.awt.Paint;
import java.awt.Point;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import javax.swing.JFrame;
import javax.swing.JPanel;

public class GradientTranslucentWindow extends JFrame implements KeyListener, MouseListener, MouseMotionListener {
    
    private int counter = 0;
    private int draw = -1;
    private int red[] = {58,71,231,243,255};
    private int green[] = {54,224,235,109,40};
    private int blue[] = {241,95,61,52,40};
    private int R = 240;
    private int G = 240;
    private int B = 200;
    private Point start, end;
    private Graphics gd;
    private JPanel panel;
    
    public GradientTranslucentWindow() {
        setBackground(new Color(0,0,0,0));
        setSize(new Dimension(500,500));
        setLocationRelativeTo(null);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        panel = new JPanel() {
            @Override
            protected void paintComponent(Graphics g) {
                if (g instanceof Graphics2D) {
                    Paint p =  new GradientPaint(0.0f, 0.0f, new Color(R, G, B, 0), 0.0f, getHeight(), new Color(R, G, B, 150), true);
                    Graphics2D g2d = (Graphics2D)g;
                    g2d.setPaint(p);
                    if(draw==-1) g2d.fillRect(0, 0, getWidth(), getHeight());
                }
            }
        };
        setContentPane(panel);
        addKeyListener(this);
        addMouseListener(this);
        addMouseMotionListener(this);
    }

    public static void main(String[] args) {
       JFrame.setDefaultLookAndFeelDecorated(true);
       new GradientTranslucentWindow().setVisible(true);
    }
    
    public void mousePressed(MouseEvent e) { start = new Point(e.getX(), e.getY()); }
    public void mouseClicked(MouseEvent e) {
        if(e.getButton() == MouseEvent.BUTTON1) draw = 1;
        if(e.getButton() == MouseEvent.BUTTON3) draw = 0;
    }
    public void mouseEntered(MouseEvent e) {}
    public void mouseExited(MouseEvent e) {}
    public void mouseReleased(MouseEvent e) {}
    public void mouseDragged(MouseEvent e)  {}
    
     public void mouseMoved(MouseEvent e) {
         gd = this.getGraphics();

         if(draw==1){
             end = new Point(e.getX(), e.getY());
             gd.setColor(new Color( red[counter],green[counter],blue[counter]));
             gd.drawLine(start.x, start.y, end.x, end.y);
             start = end;
             panel.repaint();           
             System.out.println(start.x + " - " + start.y);
         }
    }
    
    public void keyPressed(KeyEvent e) {
        if(e.getKeyCode() == KeyEvent.VK_SPACE) {
            counter++;
            if ( counter > 4 ) counter = 0;
        }
    }
    public void keyReleased(KeyEvent e) {}
    public void keyTyped(KeyEvent e) {}
}

This is where I'm wrong ...

Code:

g2d.fillRect(0, 0, getWidth(), getHeight());

should be like this, so that the background will be painted just once and the line won't disappear :

Code:

if(draw==-1) g2d.fillRect(0, 0, getWidth(), getHeight());

And this one, in the mouseMoved() listener :

Code:

repaint();

should be like this...

Code:

panel.repaint();

But I realized that this is not a good practice although it still yields the same result...
Thank you once again Itaru

[Itaru]

But I realized that this is not a good practice although it still yields the same result...
Thank you once again Itaru

No problem, whatever works.