User input click handling

[lisabe96]

I have only 1 option for the user to chose and it's kinda ridiculous to make a GUI for that,

so I'd like to draw a toggle button to the game screen and handle it when it's clicked by the user.

I have no experience what so ever with this, how would I go about implementing this?

Edited January 22, 2016 by lisabe96

[Flamezzz]

Drawing a button is of course just g.drawX(...) in onPaint. Next, you basically just implement MouseListener (or extend MouseAdapter) and tell osbot you want to receive mouse events bot.addMouseListener(yourListener).  Then you implement mouseClicked(MouseEvent e), e has a property which gives you the location of the click, you can use this to determine if the click was within the bounds of your button.

[lisabe96]

Drawing a button is of course just g.drawX(...) in onPaint. Next, you basically just implement MouseListener (or extend MouseAdapter) and tell osbot you want to receive mouse events bot.addMouseListener(yourListener).  Then you implement mouseClicked(MouseEvent e), e has a property which gives you the location of the click, you can use this to determine if the click was within the bounds of your button.

Oh so it's basically just default java implementation, I was expecting something more complex built into the API.

Thanks I think i can figure it out

[lisabe96]

@Override
public void onStart() {
	getBot().addMouseListener(this);
		
	try {
		normalImg = ImageIO.read(new URL("https://i.imgur.com/tXYml3w.png"));
		powerImg = ImageIO.read(new URL("https://i.imgur.com/LVpXu5C.png"));
		displayImage = normalImg;
	} catch (MalformedURLException e) {
		e.printStackTrace();
	} catch (IOException e) {
		e.printStackTrace();
	}
}

@Override
public void mouseClicked(MouseEvent event) {
	int x = event.getX();
	int y = event.getY();
		
	if (x > 413 && x < 471 && y > 388 && y < 458) {
		powerfishing = !powerfishing;
		displayImage = powerfishing ? powerImg : normalImg;
	}
}

@Override
public void mouseMoved(MouseEvent event) {
	int x = event.getX();
	int y = event.getY();

	tooltip = x > 413 && x < 471 && y > 388 && y < 458;
}

@Override
public void onPaint(Graphics2D graphics) {
	Graphics2D g = (Graphics2D) graphics;
	g.setRenderingHints(new RenderingHints(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_OFF));
		
		
	if (displayImage != null) {
		graphics.drawImage(displayImage, 420, 400, null);
	}
	if (tooltip) {
		g.setColor(Color.BLUE);
		g.drawString("Click to " + (powerfishing ? "disable" : "enable") 
			+ " powerfishing.", 311, 15);
	}
}

Got it all working perfectly

Thanks, code posted for people looking for this in the future

Edited January 22, 2016 by lisabe96

[Joseph]

instead of this boolean

 if (x > 413 && x < 471 && y > 388 && y < 458) { ​

 

you could grab the position of the click. Use the shape of your button and see if the click is within the shape. be sides that your good.

[lisabe96]

instead of this boolean

 if (x > 413 && x < 471 && y > 388 && y < 458) { ​

 

you could grab the position of the click. Use the shape of your button and see if the click is within the shape. be sides that your good.

The image is transparent, and I don't want users to have to click inside the fish, that would be a bad

case of UI handling. It has to work when they click the area around it as well.

Edited January 22, 2016 by lisabe96

[matt123337]

The image is transparent, and I don't want users to have to click inside the fish, that would be a bad

case of UI handling. It has to work when they click the area around it as well.

 

You would use a rectangle for that. Something along the lines of:

public static final Rectangle BUTTON_AREA = new Rectangle(413,388,58,70); // (x,y,width,height)

@Override
public void mouseClicked(MouseEvent event) {
	int x = event.getX();
	int y = event.getY();
		
	if (BUTTON_AREA.contains(x,y)) {
		powerfishing = !powerfishing;
		displayImage = powerfishing ? powerImg : normalImg;
	}
}

@Override
public void mouseMoved(MouseEvent event) {
	int x = event.getX();
	int y = event.getY();

	tooltip = BUTTON_AREA.contains(x,y);
}

[lisabe96]

 

You would use a rectangle for that. Something along the lines of:

public static final Rectangle BUTTON_AREA = new Rectangle(413,388,58,70); // (x,y,width,height)

@Override
public void mouseClicked(MouseEvent event) {
	int x = event.getX();
	int y = event.getY();
		
	if (BUTTON_AREA.contains(x,y)) {
		powerfishing = !powerfishing;
		displayImage = powerfishing ? powerImg : normalImg;
	}
}

@Override
public void mouseMoved(MouseEvent event) {
	int x = event.getX();
	int y = event.getY();

	tooltip = BUTTON_AREA.contains(x,y);
}

I feel like it's a bit overkill here as I have no other similar situations and only have to check twice.

However you'd be right if you said it's a more proper way of doing it

[Joseph]

The image is transparent, and I don't want users to have to click inside the fish, that would be a bad

case of UI handling. It has to work when they click the area around it as well.

Use a rectangle and do

Rectangle.contains (event.getPosition ())

[matt123337]

I feel like it's a bit overkill here as I have no other similar situations and only have to check twice.

However you'd be right if you said it's a more proper way of doing it

 

It's not overkill, it's managing your code better. You could also replace your image's x/y rendering with a call to that rectangles x/y coords, and use that in the future if you ever need to re-position your image/button.