I hope someone can help me here. I'm pretty much a noob trying to make an interactive graphic showing soccer teams moving up or down FIFA rankings. I loaded pictures I created outside of Processing to represent the teams and I want them to move based on a mouseclick event.
My problem right now is that when I test the app it doesn't size according to the settings I put in. Most of the images get cut off. I tried frame.setResizable() and while I can manipulate the size of the window to a degree my images are still cut off.
Below is my code and I am working on Processing 2.0B7 on a Macbook Pro running on OS X:
//Setting up the images that will go into the sketch
PImage img1;
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;
PImage img7;
PImage img8;
PImage img9;
PImage img10;
PImage img11;
PImage img12;
PImage img13;
PImage img14;
PImage img15;
PImage img16;
PImage img17;
//loading the images from the file
void setup() {
size(600, 1200);
frame.setResizable(true);
img1 = loadImage("Click.png");
img2 = loadImage("Team_Algeria.png");
img3 = loadImage("Team_Angola.png");
img4 = loadImage("Team_BurkinaFaso.png");
img5 = loadImage("Team_CapeVerde.png");
img6 = loadImage("Team_DRCongo.png");
img7 = loadImage("Team_Ethiopia.png");
img8 = loadImage("Team_Ghana.png");
img9 = loadImage("Team_IvoryCoast.png");
img10 = loadImage("Team_Mali.png");
img11 = loadImage("Team_Morocco.png");
img12 = loadImage("Team_Niger.png");
img13 = loadImage("Team_Nigeria.png");
img14 = loadImage("Team_SouthAfrica.png");
img15 = loadImage("Team_Togo.png");
img16 = loadImage("Team_Tunisia.png");
img17 = loadImage("Team_Zambia.png");
}
int a = 0;
//Drawing the images into the sketch
void draw() {
background(#000000);
image(img1, 400, 100);
image(img2, 100, 200);
image(img3, 100, 260);
image(img4, 100, 320);
image(img5, 100, 380);
image(img6, 100, 440);
image(img7, 100, 500);
image(img8, 100, 560);
image(img9, 100, 620);
image(img10, 100, 680);
image(img11, 100, 740);
image(img12, 100, 800);
image(img13, 100, 860);
image(img14, 100, 920);
image(img15, 100, 980);
image(img16, 100, 1040);
image(img17, 100, 1100);
}
I am not sure what you mean by cutoff, but remember you are only stating positions, so if the image is bigger (in your case than 60 height), they will overlap on top of each other. What is the exact size of the png images you are loading?
Try assigning also size to the images, i.e. adding two more arguments as per the ref:
image(img2, 100, 200, whateverWidth, 60); // I put 60 since it is the vertical space you are leaving between images
Does this help?
Related
I'm creating a domino game in java. I have the following code that loads, resizes and then display the domino image on the screen:
ImageIcon imageIcon = new ImageIcon("images\\4-4.png");
Image image = imageIcon.getImage();
Image newimg = image.getScaledInstance(60, 120, java.awt.Image.SCALE_SMOOTH);
imageIcon = new ImageIcon(newimg);
JLabel img = new JLabel(imageIcon);
img.setBounds(100, 100, 60, 120);
getContentPane().add(img);
What I want to do is rotate the image either 90 or -90 degrees. I've searched the internet but the examples I've found seems very complicated.
Any idea how I can rotate my image?
Btw, if you think that this is not the correct way to display dominoes in a domino game then please let me know. I'me a java newbie.
Rotating an image is non-trival, even just 90 degrees requires a certain amount of work.
So, based on pretty much every other question about rotating images, I'd start with something like...
public BufferedImage rotate(BufferedImage image, Double degrees) {
// Calculate the new size of the image based on the angle of rotaion
double radians = Math.toRadians(degrees);
double sin = Math.abs(Math.sin(radians));
double cos = Math.abs(Math.cos(radians));
int newWidth = (int) Math.round(image.getWidth() * cos + image.getHeight() * sin);
int newHeight = (int) Math.round(image.getWidth() * sin + image.getHeight() * cos);
// Create a new image
BufferedImage rotate = new BufferedImage(newWidth, newHeight, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = rotate.createGraphics();
// Calculate the "anchor" point around which the image will be rotated
int x = (newWidth - image.getWidth()) / 2;
int y = (newHeight - image.getHeight()) / 2;
// Transform the origin point around the anchor point
AffineTransform at = new AffineTransform();
at.setToRotation(radians, x + (image.getWidth() / 2), y + (image.getHeight() / 2));
at.translate(x, y);
g2d.setTransform(at);
// Paint the originl image
g2d.drawImage(image, 0, 0, null);
g2d.dispose();
return rotate;
}
While you're only rotate 90 degrees, this takes care of calculating the required size the new image needs in order to be able to paint the rotated image, at any angle.
It then simply makes use of AffineTransform to manipulate the origin point from which painting occurs - get use to this, you will do it a lot.
Then, I load the images, rotate them and display them...
try {
BufferedImage original = ImageIO.read(getClass().getResource("domino.jpg"));
BufferedImage rotated90 = rotate(original, 90.0d);
BufferedImage rotatedMinus90 = rotate(original, -90.0d);
JPanel panel = new JPanel();
panel.add(new JLabel(new ImageIcon(original)));
panel.add(new JLabel(new ImageIcon(rotated90)));
panel.add(new JLabel(new ImageIcon(rotatedMinus90)));
JOptionPane.showMessageDialog(null, panel, null, JOptionPane.PLAIN_MESSAGE, null);
} catch (IOException ex) {
ex.printStackTrace();
}
I prefer to use ImageIO to load images, because it throws an IOException when something goes wrong, rather then failing silently like ImageIcon.
You should also be embedding your resources within your application's context, this makes it easier to load them at runtime. Depending on IDE and how your project is set up, how you do this will change, but in "most" cases, you should be able to add the resource directly to your source directory (preferably in sub directory) and the IDE will make it available for you and package it when you export the project
Solution from: http://www.java2s.com/Code/Java/Advanced-Graphics/RotatingaBufferedImage.htm
AffineTransform tx = new AffineTransform();
tx.rotate(0.5, bufferedImage.getWidth() / 2, bufferedImage.getHeight() / 2);
AffineTransformOp op = new AffineTransformOp(tx,
AffineTransformOp.TYPE_BILINEAR);
bufferedImage = op.filter(bufferedImage, null);
I'm trying to detect similar objects in a picture. The purpose of the code is to detect the gold and click on it.
I have tried scanning pixel by pixel but it wasn't efficient and the results weren't satisfying.
I'll add that the game is running on windows mode and classes like robot are working fine. Also the gold might be in different places every time.
As a very quick example I wrote up this using your image:
public class OpenCVTest {
public static void main(String[] args) {
OpenCV.loadLibrary();
Mat m = Highgui.imread("/home/artur/Pictures/test.png", Highgui.CV_LOAD_IMAGE_GRAYSCALE);
LoadImage( m);
Mat res = Mat.zeros(m.size(), m.type());
Imgproc.adaptiveThreshold(m, res, 255, Imgproc.ADAPTIVE_THRESH_MEAN_C, Imgproc.THRESH_BINARY, 15, 20);
LoadImage(res);
Mat cannyRes = Mat.zeros(m.size(), m.type());
Imgproc.Canny(res, cannyRes, 55, 5.2);
LoadImage(cannyRes);
Imgproc.dilate(cannyRes, cannyRes, new Mat(), new Point(-1, -1), 2);
Imgproc.erode(cannyRes, cannyRes, new Mat(), new Point(-1, -1), 2);
LoadImage(cannyRes);
List<MatOfPoint> contours = new ArrayList<>();
Imgproc.findContours(cannyRes, contours, new Mat(), Imgproc.RETR_LIST,Imgproc.CHAIN_APPROX_SIMPLE);
System.err.println(contours.size());
contours = contours.stream().filter(s -> s.size().area() > 50 && s.size().area() <= 100).collect(Collectors.toList());
for(MatOfPoint p : contours) {
Size size = p.size();
System.err.println("-- -- --");
System.err.println(size.area());
}
Imgproc.drawContours(cannyRes, contours, 20, new Scalar(233, 223,212));
LoadImage(cannyRes);
}
public static void LoadImage( Mat m) {
Path path = Paths.get("/tmp/", UUID.randomUUID().toString() + ".png");
Highgui.imwrite(path.toString(), m);
JFrame frame = new JFrame("My GUI");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setResizable(true);
frame.setLocationRelativeTo(null);
// Inserts the image icon
ImageIcon image = new ImageIcon(path.toString());
frame.setSize(image.getIconWidth() + 10, image.getIconHeight() + 35);
// Draw the Image data into the BufferedImage
JLabel label1 = new JLabel(" ", image, JLabel.CENTER);
frame.getContentPane().add(label1);
frame.validate();
frame.setVisible(true);
}
}
I read the image
I use adaptive threshhold to create a binary image
I use canny to detect the edges in my image
I use dilate/erode to remove background noise
I use the contour finder to find objects in my image
I dismiss any contour that has a arbitrary size
The resulting contours are roughly your yellow spots. This is not very accurate as I didn't invest time playing with the different parameters, but you can fine tune that.
Hope that helps,
Have fun playing. You can see how to set up OpenCV here: Java OpenCV from Maven
I know this question has been asked many times, but I can't get any of the answers to work for me.
here is the code produced by netbeans for my image:
jLabel2 = new javax.swing.JLabel();
jLabel2.setIcon(new javax.swing.ImageIcon(getClass().getResource("/pathtomastery/pathToMastery.png"))); // NOI18N
progressPanel.add(jLabel2);
jLabel2.setBounds(130, 20, 460, 80);
What can I add to this code to make my image resize to fit the size of the label?
You can check out Darryl's Stretch Icon. The image will automatically be scaled to fill the space available to the label.
Have you tried:
jLabel2.setPreferredSize(new Dimension(460, 80));
Set the label with a new icon and use BufferedImage like:
BufferedImage bi = new BufferedImage(
100, 100, BufferedImage.TYPE_INT_ARGB);
bi.getGraphics().drawImage(image, 0, 0, null);
label.setIcon(new ImageIcon(bi));
I am trying to draw characters from Wingding.ttf font with Java Graphics.DrawString. But resulting image contains only rectangle instead of char.
BufferedImage image = new BufferedImage(100, 100, BufferedImage.TYPE_4BYTE_ABGR);
Graphics graphics = image.getGraphics();
Font font = new Font("Wingdings", Font.PLAIN, 20);
graphics.setFont(font);
graphics.setColor(Color.BLACK);
graphics.drawString("\u00d8", 10, 10); // THREE-D TOP-LIGHTED RIGHTWARDS ARROWHEAD char
ImageIO.write(image, "PNG", new File(TEST_DATA_DIR + "bullet_char.png"));
How can I do this?
I dont think wingdings is one of the "standard" fonts
Font font = null;
try {
font=Font.createFont( Font.TRUETYPE_FONT,
new FileInputStream(new File("/pathto/WINGDINGS.TTF")) );
} catch(Exception e) {
System.out.println(e);
}
font=font.deriveFont(Font.PLAIN, 200);
graphics.setFont(font);
once you load the font (its always PLANE 1 pnt) you can the derive the style and size you want....
As similar questions has been answered here: Drawing exotic fonts in a java applet, you need to pass \uF0d8 instead of \u00d8.
graphics.drawString("\uF0d8", 10, 10);
I am new to Android and I am having trouble to save he multiple pictures in onDraw(Canvas canvas);
Here my code to draw the images in canvas
canvas.drawBitmap(resize, 40, 100, null);
canvas.drawBitmap(resizeImage1, 400, 100, null);
canvas.drawText(CameraText, 100, 175, paint);
Here my code to save the images.
Bitmap toDisk = Bitmap.createBitmap(resizeImage1);
canvas.setBitmap(toDisk);
toDisk.compress(Bitmap.CompressFormat.JPEG, 100, new FileOutputStream(new File("/mnt/sdcard/pig.jpg")));
My problem here is that I can pass the single variable only resizeImage1. I cannot pass CameraText,resize. How can I do this?
Don't you need to try to save the canvas graphic not the bitmap?
That way you can apply your modification to the image (via canvas) then save
The canvas object changes the bitmap you assigned using setBitmap and then you apply changes to the bitmap using the canvas functions. So something along this lines should be similar to what you're looking (copied from your example code)
Bitmap toDisk = Bitmap.createBitmap(resizeImage1);
canvas.setBitmap(toDisk);
canvas.drawBitmap(resize, 40, 100, null);
canvas.drawBitmap(resizeImage1, 400, 100, null);
canvas.drawText(CameraText, 100, 175, paint);
toDisk.compress(Bitmap.CompressFormat.JPEG, 100, new FileOutputStream(new File("/mnt/sdcard/pig.jpg")));