javaFx Image Height and Width got backwards? - java

I am making a game in javaFx. The way entities in my game is rendered is dependent on one of their fields called "angle", like this:
gc.save();
gc.transform(new Affine(new Rotate(angle, getCenterX(), getCenterY())));
gc.drawImage(image, x, y);
gc.restore();
"Gc" is the GraphicsContext. The getCenter methods will use the height and width of the images. However, the images are not rendered properly. I ran some tests and found that when I use the get Width method, it actually returns the height of the image. When I call the get Height method, it returns the width. My guess is that it's because the png images I use have been rotated 90 degrees in respect to their original state. However, when I go to preview and look at their size, it seems that everything is fine. I tried duplicating the images, but it doesn't really work. Any ideas how to fix this? I don't have a verifiable code example because I believe this question is more related to properties of png files and javaFx's Image methods than my program's logic.
Here is the verifiable code example:
import javafx.embed.swing.JFXPanel;
import javafx.scene.image.Image;
public class TestImage {
public static void main(String[] args) {
// TODO Auto-generated method stub
JFXPanel jfxPanel = new JFXPanel();
Image BLUE01 = new Image("/blue01.png");
System.out.println("height : "+ BLUE01.getHeight());
System.out.println("wdith : "+ BLUE01.getWidth());
}
}
And here is the image:

It seems that the problem comes from not my code but my use of IDE... It turns out that after I edit or add image in my resource folder, I need to click "refresh" in eclipse...

Related

How to convert an image into a shape in Java?

I'm currently working on a stock market program that teaches students how to interact with the stock market. An issue that I'm working on right now revolves around the issue of efficiency and memory. I make all of my 2D icons (such as a settings icon, portfolio icons, etc) in adobe illustrator, I export those files as png files, and throw them into my program. I currently use JavaFX, and one of the features of JavaFX is what's called imageView, which is a method that handles the opening and viewing of images.
So let's say that the user would like to press on the Settings icon in the game, I would like to change the settings icon to a darker or lighter color when the user hovers over that icon in order to provide the user with a better user experience (UX) at the moment, I use two different images and remove one from the frame, and replace it with another, which is highly inefficient.
I know that JavaFX has a Shape class that inherits many methods such as Fill, or setFill, but these methods can only affect those of the Shape class.
My question is, "How can I convert an image that is imported into the project, into something that I can use methods such as setFill and Fill on"
If you're only aiming for basic changes such as darkening or lightning your icons, you can look at the Effects part of javaFx, you can read about it here, or else you can import your images as SVG as suggested in the comments
If you're planning to do it using Effects, you can achieve a darken-on-hover effect using the ColorAdjust Effect by setting the brightness value to something negative (the brightness in ColorAdjust ranges between -1 and +1 where 0 is the default) as in the following example
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Main extends Application {
#Override
public void start(Stage s) {
ImageView image = new ImageView(new Image("img.png"));
ColorAdjust darker = new ColorAdjust();
darker.setBrightness(-.3);
image.setOnMouseEntered(e-> {
image.setEffect(darker);
});
image.setOnMouseExited(e-> {
image.setEffect(null);
});
s.setScene(new Scene(new StackPane(image)));
s.show();
}
public static void main(String[] args) {
launch(args);
}
}
Changing the color of an image might involve adjusting the hue using ColorAdjust by setting the hue value
ColorAdjust hueShift = new ColorAdjust();
hueShift.setHue(-.3);
image.setOnMouseEntered(e-> {
image.setEffect(hueShift);
});
image.setOnMouseExited(e-> {
image.setEffect(null);
});
You can combine effects by setting effects as input to other effects, so for example, if you want to darken a Node and blur it at the same time you can set the blur effect as input to the darkening colorAdjust
GaussianBlur blur = new GaussianBlur();
blur.setRadius(10);
ColorAdjust darker = new ColorAdjust();
darker.setBrightness(-.3);
darker.setInput(blur);
image.setOnMouseEntered(e-> {
image.setEffect(darker);
});
image.setOnMouseExited(e-> {
image.setEffect(null);
});

Java Icon Image Maximum File Size

I am working on a chess game on Java. I have been importing images onto Eclipse and then assigning them to ImageIcons, and then subsequently assigning these ImageIcons onto buttons to form a grid.
At one point three out of my four bishop images were not being assigned to their respective buttons and so I looked at the file size and it turns out that the sizes of the three images that weren't being assigned were ~1,100KB, ~1,200KB, and ~40KB. The image that was being assigned to the button was around 25KB. I thought this was odd (especially since all four images are very similar) so I exported the three problematic images in a lower resolution (all under 30KB), and then re-imported them into Eclipse. When I ran my program again they were assigned to the right buttons and everything ran smoothly again.
The buttons that I am using are all 75 x 75 pixels, and the pixels were the same for each image (75 x 75), so I am confused why this happened. I looked for any questions relating to this, but I could not find any. If anyone could help explain why this could happen to me that would be very helpful so I can avoid this problem in the future.
I've definitely loaded images much bigger than that into ImageIcons and other components, so I suspect that your issue is that when you are assigning the Image to the ImageIcon before the Image is fully loaded. You can use MediaTracker to help solve this problem. From ImageIcon:
/** * Loads an image into memory */
public static Image loadImage(String fn){
try {
Image image=java.awt.Toolkit.getDefaultToolkit().createImage(fn);
MediaTracker tracker=new MediaTracker(lblForFM); tracker.addImage(image,0);
tracker.waitForID(0);
if (MediaTracker.COMPLETE != tracker.statusID(0,false)) throw new
IllegalStateException("Unable to load image from " + fn);
else return image; } catch ( InterruptedException e) {
throw new RuntimeException("Interrupted while loading image from " + fn,e);
}
}
I recommend using png for transparent images and icons, jpg for non-transparent images - and only if compression artifacts don't matter (lossless JPEG sadly isn't widely spread). bmp is one of the worst file formats out there if it comes to file size. As suggested by the others, load images in java with the ImageIO API:
public class Program {
public static void main(String[] args) {
InputStream imageSource = Program.class.getResourceAsStream("bishop"); // may be a URL, File or ImageInputStream instead
try {
BufferedImage bishopImage = ImageIO.read(imageSource); // read image
ImageIcon bishopIcon = new ImageIcon(bishopImage); // use adapter for Icon interface
System.out.println(bishopIcon); // do something with it
} catch (IOException e) {
e.printStackTrace(); // read failed
}
}
}

Loading an image from folder in project

I am currently working on a text-based RPG with a GUI and I can't seem to get the image I want to use to load.
class BackgroundPanel extends Panel
{
// The Image to store the background image in.
Image img;
public BackgroundPanel(String location)
{
// Loads the background image and stores in img object.
img = Toolkit.getDefaultToolkit().createImage(location);
}
public void paintComponent(Graphics g)
{
// Draws the img to the BackgroundPanel.
g.drawImage(img, 0, 0, null);
img.setAccelerationPriority(SCALE_FAST);
}
}
This is the code I use for the panel itself. I tried putting the image file in the root directory of my project but it doesn't seem to help. I have created a folder within the project which I intend to use for all of my images.
I'm not sure what the issue is here. I know I tried using paint() instead of paintComponent(), but then the buttons and other components won't draw until you mouse over them, for some reason.
Any ideas?
I have already posted it at below links in the same context. Please have a look:
ImageIcon does not work with me
How to retrieve image from project folder?
Read image from another directory
It's already described in Oracle Java Tutorial on Loading Images Using getResource
Note: Don't forget to call super.paintComponent() in the overridden paintComponent() method.

Detecting position of crop marks in a scanned document

I am working on a project in which user gives us a scanned copy of a form, and we need to identify various fields within the image.
I have a form like this:
The form has four crop marks/ registration marks at four corners of the page. Now the user is supposed to fill the form and give back a scanned copy of his filled form. The scanned form that we get may have been rotated by some angle. For instance see the rotated form below:
Now to extract the exact fields out of form, i.e. to extract any particular field like Title in the scanned form, we need to have exact coordinates but since our image has been rotated by unknown angle. We are unable to do so.
I read about registration marks and their use to align the page to a standard form.
I tried searching for these registration marks in the image, but since it is rotated we may not find the position of the mark in the rotated image.
I tried searching for the issue and found some questions on SO which although gave some direction but couldn't help much.
This Question gave me reference to LEADTools SDK which has functions to perform this tasks. Unfortunately this SDK is not for JAVA and along with that it's proprietary and not free.
Is there any other open source tools for the same purpose.
Additionally I am open to suggestions about other methods used to align the form.
You could use the coordinates of the markers in the corner of the document. Using the coordinates of the corners of the lines, you could measure the rotation angle of the paper in order to compensate it.
The post below addresses a similar issue:
"Image Processing Edge Detection in Java"
Below an approach to detect the coordinates using Java and Marvin.
output (some noise cause of the JPEG compression):
source code:
import marvin.image.MarvinImage;
import marvin.io.MarvinImageIO;
import marvin.util.MarvinAttributes;
import static marvin.MarvinPluginCollection.*;
public class DocumentMarks {
public DocumentMarks(){
MarvinImage image = MarvinImageIO.loadImage("./res/document.jpg");
thresholding(image, 250);
MarvinAttributes ret = moravec(image.clone(), image, 5, 100000);
image = showCorners(image, ret, 4);
MarvinImageIO.saveImage(image, "./res/document_out.jpg");
}
private static MarvinImage showCorners(MarvinImage image, MarvinAttributes attr, int rectSize){
MarvinImage ret = image.clone();
int[][] cornernessMap = (int[][]) attr.get("cornernessMap");
int rsize=0;
for(int x=0; x<cornernessMap.length; x++){
for(int y=0; y<cornernessMap[0].length; y++){
// Is it a corner?
if(cornernessMap[x][y] > 0){
rsize = Math.min(Math.min(Math.min(x, rectSize), Math.min(cornernessMap.length-x, rectSize)), Math.min(Math.min(y, rectSize), Math.min(cornernessMap[0].length-y, rectSize)));
ret.fillRect(x, y, rsize, rsize, Color.red);
}
}
}
return ret;
}
public static void main(String[] args) {
new DocumentMarks();
System.exit(0);
}
}
I successfully identified crop marks in the scanned document. I've described the approach on my blog here.

JFrame Icon Resolution

I'm quite new to working with java GUIs. To start me up, I had a look into JFrame. While playing around with it, I used the setIconImage() method to set the logo of my JFrame. However, when I run the file, the logo resolution gets reduced so much that I can barely recognise it. Here's my current code and the dimensions of my image is 1280 x 1280 (I have tried reducing it down to 100 x 100 but it still returned the same results.):
#SuppressWarnings("serial")
public class GUIManager extends JFrame{
public void openGUI(String value){
if(value.equalsIgnoreCase("startMenu")){
GUIManager manager = new GUIManager();
ImageIcon logo = new
ImageIcon(ResourcesLoader.class.getResource("Logo.png"));
manager.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
manager.setVisible(true);
manager.setResizable(false);
manager.setLocationRelativeTo(null);
manager.setSize(300, 500);
manager.setBackground(Color.WHITE);
manager.setTitle("FileLocker");
manager.setIconImage(logo.getImage());
} //value check
} //openGUI
} //GUIManager
The answer is given Before go to following link
Sizes of frame icons used in Swing
Which icon sizes to use with a JFrame's setIconImages() method?

Categories

Resources