We Keep Coding

How to draw both graphics and buttons properly in Jframe?

I am having a hard time figuring out how to set up both graphics and buttons at thee same time without the buttons flickering.
I am trying to make a navigation program for my robot. I tried to add buttons to my program for the last week or two and nothing works out for me, thanks in advance!
Here is my code:
public static void main (String [] args) throws IOException{
image = ImageIO.read(new File("images/2020.jpg"));
double ratio = (double) image.getHeight() / (double) image.getWidth();
double Yscaled = (int) (Xscaled*ratio);
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setSize((int) Xscaled+15 + 2*ButtonSpace + ButtonWidth,(int) Yscaled+34);
JButton clear = new JButton("Clear");
clear.setBounds((int)Xscaled+ButtonSpace, (int)Yscaled/4 - ButtonHeight/2, ButtonWidth, ButtonHeight);
window.add(clear);
cordList.add((int) Xs);
cordList.add((int) Ys);
JPanel painting = new JPanel() {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
y1 = Math.sin(Math.toRadians(a))*c;
x1 = Math.cos(Math.toRadians(a))*c;
y2 = -Math.cos(Math.toRadians(a))*h;
x2 = -Math.sin(Math.toRadians(a))*h;
g.drawImage(image, 0, 0, (int) Xscaled, (int) Yscaled, null);
if (cordList.size() > 0){
if (cordList.get(cordList.size()-2) > Xscaled || cordList.get(cordList.size()-1) > Yscaled){
cordList.remove(cordList.size()-2);
cordList.remove(cordList.size()-1);
}
}
for (int i = 0; i < cordList.size(); i+=2){
int size = 5;
g.setColor(new Color(220, 242, 19));
g.fillOval(cordList.get(i)-size/2, cordList.get(i+1)-size/2, size, size);
g.setColor(new Color(0, 0, 0));
g.drawOval(cordList.get(i)-size/2, cordList.get(i+1)-size/2, size, size);
if(i < cordList.size()-2){
g.drawLine(cordList.get(i), cordList.get(i+1), cordList.get(i+2), cordList.get(i+3));
}
}
Triangle_Shape triangleShape = new Triangle_Shape(new Point2D.Double(Xs - x1, Ys - y1),
new Point2D.Double(Xs + x1, Ys + y1), new Point2D.Double(Xs - x2, Ys + y2));
Graphics2D g2d = (Graphics2D) g.create();
g2d.draw(triangleShape);
g2.setColor(new Color(19, 191, 15));
g2.fill(triangleShape);
repaint();
}
};
painting.setBounds(0, 0 ,(int) Xscaled ,(int) Yscaled);
window.add(painting);
window.getContentPane().addMouseListener(new Field());
window.setVisible(true);
}

I had the same problem a few years ago. JPanels can be pretty helpful, but drawing on your JFrame and adding buttons without flickering only works with JLabels for some reason. Just try replacing the JPanel with a JLabel as shown:
public static void main(String[] args) {
// init Frame
JFrame window = new JFrame();
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
window.setSize(800, 600);
// !! add Buttons before you add the JLabel to the Frame !!!!
JButton clear = new JButton("Clear");
window.add(clear);
clear.setBounds(100, 100, 100, 100);
// !! change to JLabel!!
JLabel painting = new JLabel() {
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
// adds Antialising for rounded edges when adding text
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
// test draw
g.setColor(Color.green);
g.fillRect(0, 0, 500, 500);
g.setColor(Color.black);
g.setFont(new Font("Consolas", 0, 100));
g.drawString("Test123'*#", 100, 300);
repaint();
}
};
window.add(painting);
window.setVisible(true);
}
Working Window without flickering
SIDENOTE: You need to add the buttons and other Components before you add the JLabel to the JFrame!
Also added Antialising as a small trick you can use for better visuals.
I Hope it'll help you!

(JAVA) How to differentiate 2d object

one simple question. I try to use graphic 2d to make objects . My question is how can we differentiate the variable between 2 object.
For example the below code;
public void paintComponent(Graphics g) {
super.paintComponent(g);
r1 = new Rectangle(10, 10, 50, 30);
r2 = new Rectangle(450, 10, 50, 30);
g.setColor(Color.BLUE);
g.fillRect(10, 10, 50, 30);
g.setColor(Color.RED);
g.fillRect(450, 10, 50, 30);
}
public void actionPerformed(ActionEvent e) {
if (r1.intersects(r2)) {..............
}
from above code,i have 2 rectangle variable r1 and r2, and i can do "if (r1.intersects(r2))"
in the actionPerformed method.
But how about below code when using Graphic2d, how can i differentiate between these 2 triangle, so that it can fit into "if (r1.intersects(r2))", as only one variable "lukis" only exist and it is used to make 2 triangle. Thank you.
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D lukis = (Graphics2D) g;
int[] x = {100, 200, 300};
int[] y = {300, 100, 300};
lukis.setColor(Color.RED);
lukis.drawPolygon(x, y, 3);
int[] x1 = {600, 700, 800};
int[] y1 = {300, 100, 300};
lukis.setColor(Color.RED);
lukis.drawPolygon(x1, y1, 3);
}

I'm trying to make my triangles redraw themselves when I click the mouse, but they only just multiply when I mouse click

When I run this program the green triangles appear all over the place when I click instead I want it to reposition itself to a random place and remove the original green triangle
float x;
void setup()
{
size (800, 600);
background(29, 154, 178);
x=random(width);
frameRate(30);
}
void draw()
{
noStroke();
fill(91, 180, 118 );
triangle(x, 20, 0, height, width, height);
fill(82, 45, 80);
triangle(width/2-200, 120, 0, height, width, height);
fill(82, 45, 60);
triangle(width/2+150, 220, 0, height, width, height);
fill(82, 45, 28);
triangle(width/2-100, 320, 0, height, width, height);
fill(243, 245, 158);
rect(0, 525, 800, 100);
if(mousePressed == true)
{
x=random(width);
}
}

Then add noLoop() in your setup so you're not drawing the same thing 60 times a second, and use mouse click handling instead, with a redraw call so you only draw when there is something new to draw:
float x, y, triangleSideLength;
void setup() {
size(300,300);
noLoop();
triangleSideLength = 30; // or whatever value it needs to be of course
}
void draw() {
x = random(0, width - triangleSideLength);
y = random(0, height - triangleSideLength);
drawTriangleAt(x, y);
}
void drawTriangleAt(float x, float y) {
//...triangle drawing code here...
}
void mouseClicked() {
redraw();
}
Also note that you usually want to constrain your x/y coordinates so that a triangle will always "fit on the screen" instead of getting an x/y coordinate that happens to have x=width and now your triangle is basically 100% out of view.

Rectangle thickness java

I need to outline in blue 1 rectangle at a time when selected. The code works but I cant see the blue outline very well. what is the easiest way to make the outline thicker. Wither that be drawing another shape over it or something else.
private void displayBlock(Graphics g)
{
for(int i = 0; i < 10; i++)
{
if (occupant[i].equals("Empty"))
{
//Sets the rectangle red to show the room is occupied
g.setColor(emptyColor);
g.fillRect(150+(i*50), 120, aptWidth, aptHeight);
}
else
{
//Sets the rectangle green to show the room is free
g.setColor(Color.red);
g.fillRect(150+(i*50), 120, aptWidth, aptHeight);
}
if (i == selectedApartment)
{
g.setColor(Color.blue);
g.drawRect(150+(i*50), 120, aptWidth, aptHeight);
}
else
{
g.setColor(Color.black);
g.drawRect(150+(i*50), 120, aptWidth, aptHeight);
}
// Draws the numbers in the Corresponding boxes
g.setColor(Color.black);
g.drawString(Integer.toString(i+1), 150+(i*50)+15, 120+25);
}
//Drawing the key allowing the user to see what the colours refer to
g.setFont(new Font("TimesRoman", Font.PLAIN, 14));
g.drawString("Key", 20,120);
g.drawString("Occupied",60,150);
g.drawString("Empty", 60, 170);
// Drawing the boxes to show what the colours mean in the key
g.setColor(Color.red);
g.fillRect(20, 130, 25, 25);
g.setColor(Color.black);
g.drawRect(20, 130, 25, 25);
g.setColor(Color.green);
g.fillRect(20,150,25,25);
g.setColor(Color.black);
g.drawRect(20,150,25,25);
} // End of displayBlock

You can set the thickness of the rectangle by creating a Graphics2D object and setting its stroke.
java.awt.Graphics2D g2 = (java.awt.Graphics2D) g.create();
g2.setStroke(new java.awt.BasicStroke(3)); // thickness of 3.0f
g2.setColor(Color.blue);
g2.drawRect(10,10,50,100); // for example

Maybe you could draw a second rectangle immediately inside the first one. Or multiple of them.
public static void drawRectangle(Graphics g, int x, int y, int width, int height, int thickness) {
g.drawRect(x, y, width, height);
if (thickness > 1) {
drawRectangle(g, x + 1, y + 1, width - 2. height - 2, thickness - 1);
}
}

Paint in a part of JPanel without repaint the rest

I'm trying to make a Mastermind in Java. The code isn't really difficult, but I want to have a very good interface. I have a JPanel which take all my JFrame, and I paint this JPanel with surchargind repaint() method:
//method to draw elements on the map
public void paint(Graphics g) {
super.paintComponents(g);
Graphics gr;
gr = MasterMindPane.getGraphics();
img = MasterMindPane.getToolkit().getImage("images/plateau4-8.jpg");
gr.drawImage(img, 0, 0, 600, 720, this);
gr = bouleRougePane.getGraphics();
img = bouleRougePane.getToolkit().getImage("images/bouleRouge.png");
//gr.drawImage(img, 535, 303, 45, 45, this);
gr.drawImage(img, 0, 0, 45, 45, this);
gr = bouleOrangePane.getGraphics();
img = bouleOrangePane.getToolkit().getImage("images/bouleOrange.png");
//gr.drawImage(img, 535, 303, 45, 45, this);
gr.drawImage(img, 0, 0, 45, 45, this);
}
When I click on one image, which have a Panel, I draw a yellow circle like that :
private void bouleRougePaneMouseClicked(java.awt.event.MouseEvent evt) {
Graphics2D g2d = (Graphics2D) MasterMindPane.getGraphics();
for(int i = 0; i<4; i++)
{
g2d.setColor(Color.ORANGE);
g2d.setStroke(new BasicStroke(3));
g2d.drawOval(78+i*70, 106+etape*50, 35, 35);
}
}
And when I select a hole, I want to delete the circle, which only indicates where the gamer can play.
But I don't know how to delete the circle or repaint just a part of my Image because it costs a lot to repaint all.

A very simple way is to use paintImmediately(x,y,w,h);
This repaints only the specified area that starts at pixel (x,y) with width w and height h.

You can set clip Shape to the thick oval and fill it.
Create the big oval Shape via BasicStroke with thick line.