JavaFX - Displaying an image in the GUI - java

So, i've set up a GUI that has a text field and a button. I have some images in my file, as shown below.
Also this is the GUI;
I wanna be able to input in the textField "A0" and it show (anywhere at this point) the image on the GUI. I'm not sure how to approch this, any help or example would be appreciated.
EDIT:
private void getImage(){
char key;
Image img = new Image("gui/assets/" + textField.getText() + ".png", 100, 100, false, false);
ImageView image = new ImageView();
image.setImage(img);
image.setX(40);
image.setY(480);
pane.getChildren().add(image);
}
So this is what i've done (pane is just a group).
Also, this is the primaryStage;
#Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("StepsGame Viewer");
Scene scene = new Scene(root, VIEWER_WIDTH, VIEWER_HEIGHT);
root.getChildren().add(controls);
root.getChildren().add(pane);
makeControls();
primaryStage.setScene(scene);
primaryStage.show();
}
So i added the group that adds the image into primaryStage, however when i input an image name e.g "A0", nothing comes up. What am i missing?

Related

Mouse coordination just work in short specific range javafx [duplicate]

This question already has answers here:
How to get location of mouse in JavaFX?
(3 answers)
Closed 11 months ago.
I'm new to javafx.
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) throws Exception {
Label mouseCoordination = new Label("?,?");
mouseCoordination.setOnMouseMoved(e ->
mouseCoordination.setText(e.getX()+","+ e.getY())
);
StackPane root = new StackPane();
root.setPrefHeight(100);
root.setPrefWidth(400);
root.getChildren().add(mouseCoordination);
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
Here i tried to get mouse coordination, So i wrote this but it just work in short range like (0,0) to (48,17) and it doesn't update label after that. i actually wrote that in base of a question in site
That is because the label isn't width × height and you added the mouse listener to the label; if you add the listener to root, it will work the way you wanted.
#Override
public void start(Stage stage) throws Exception {
Label mouseCoordination = new Label("?,?");
StackPane root = new StackPane();
root.setPrefWidth(400);
root.setPrefHeight(100);
root.getChildren().add(mouseCoordination);
root.setOnMouseMoved(e -> {
mouseCoordination.setText(e.getX() + "," + e.getY());
});
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
Just to be clear, you added the mouse listener to the label which only has a width of 30 and a height of 40, for example; the size depends on the text being displayed and how much space it takes up. The mouse listener is only called if your mouse is on the label; however, since you wanted it to show your current mouse position, it wouldn't work unless the label had the same width and height as the window.

JavaFX: Trouble binding properties to panes

I am a beginner who just recently started learning JavaFX, and I seem to be making the same reoccurring mistake within my programs. For example, in the following code I am trying to draw the X-Axis and Y-Axis and have it binded to half the width and height of the pane. When executed, the axes are very small and located at the topleft corner, but as you resize the window of the application, the axes slowly increase in size until the window not being resized anymore.
public class Debug extends Application {
#Override
public void start(Stage primaryStage) {
Pane pane = new Pane();
GraphFunc test = new GraphFunc();
pane.getChildren().add(test);
Scene scene = new Scene(pane, 500, 500);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
class GraphFunc extends Pane {
private double xAxisSpan, yAxisSpan;
public GraphFunc() {
xAxisSpan = 100;
yAxisSpan = 100;
drawAxes();
}
private void drawAxes() {
Line xAxis = new Line(0, 50, 100, 50);
Line yAxis = new Line(50, 0, 50, 100);
xAxis.setStartX(0);
xAxis.startYProperty().bind(heightProperty().divide(2));
xAxis.endXProperty().bind(widthProperty());
xAxis.endYProperty().bind(heightProperty().divide(2));
yAxis.startXProperty().bind(widthProperty().divide(2));
yAxis.setStartY(0);
yAxis.endXProperty().bind(widthProperty().divide(2));
yAxis.endYProperty().bind(heightProperty());
getChildren().addAll(xAxis, yAxis);
}
}
I am confused because when pane is change to a StackPane, this does not happen. Also if I moved the code in drawAxes() to start() and added the lines to pane it would also not do this. Please explain, I cannot seem to understand what is happening after researching and playing around with it.
This is happening because of Pane. Pane is meant to be used when absolute positioning of children is required.
This is from Oracle documentation:
This class may be used directly in cases where absolute positioning of children is required since it does not perform layout beyond resizing resizable children to their preferred sizes. It is the application's responsibility to position the children since the pane leaves the positions alone during layout.
Pane pane = new Pane();
GraphFunc test = new GraphFunc();
pane.getChildren().add(test);
Scene scene = new Scene(pane, 500, 500);
If you remove the width and height from the scene and instead set the width and height directly on to test like this:
public void start(Stage primaryStage) {
GridPane pane = new GridPane();
GraphFunc test = new GraphFunc();
test.setPrefSize(500, 500);
pane.getChildren().add(test);
Scene scene = new Scene(pane);
primaryStage.setScene(scene);
primaryStage.show();
}
You will get this:
drawn image
However you will not be able to span.
From Oracle documentation:
Note: if an application needs children to be kept aligned within a
parent (centered, positioned at top-left, etc), it should use a
StackPane instead.
Also from Oracle documentation:
Pane does not clip its content by default, so it is possible that
childrens' bounds may extend outside its own bounds, either if
children are positioned at negative coordinates or the pane is resized
smaller than its preferred size.

JavaFX let user set a picture

So
I am trying to let the user set a path to a picture and then display it but I am not able to display it.
Currently, I am using Eclipse and Scene Builder to accomplish my goals
Code so far:
#FXML
public void choseFile() {
fc = new FileChooser();
File tmp = fc.showOpenDialog(dialogStage);
Image img = new Image(tmp.getAbsolutePath);
image1 = new ImageView();
image1.setImage(img);
}
image1 is set to an ImageView in the SceneBuilder and the choseFile() method is set to a button that is next to that picture
Thanks in advance
As James_D mentioned, you need to add ImageView in your code.
Import javax.scene.image.ImageView.
According to the documentation,
The ImageView is a Node used for painting images loaded with Image class. This class allows resizing the displayed image (with or without preserving the original aspect ratio) and specifying a viewport into the source image fro restricting the pixels displayed by this ImageView.
Sample code from the document :
public class HelloMenu extends Application {
#Override public void start(Stage stage) {
// load the image
Image image = new Image("flower.png");
// simple displays ImageView the image as is
ImageView iv1 = new ImageView();
iv1.setImage(image);
// resizes the image to have width of 100 while preserving the ratio and using
// higher quality filtering method; this ImageView is also cached to
// improve performance
ImageView iv2 = new ImageView();
iv2.setImage(image);
iv2.setFitWidth(100);
iv2.setPreserveRatio(true);
iv2.setSmooth(true);
iv2.setCache(true);
// defines a viewport into the source image (achieving a "zoom" effect) and
// displays it rotated
ImageView iv3 = new ImageView();
iv3.setImage(image);
Rectangle2D viewportRect = new Rectangle2D(40, 35, 110, 110);
iv3.setViewport(viewportRect);
iv3.setRotate(90);
Group root = new Group();
Scene scene = new Scene(root);
scene.setFill(Color.BLACK);
HBox box = new HBox();
box.getChildren().add(iv1);
box.getChildren().add(iv2);
box.getChildren().add(iv3);
root.getChildren().add(box);
stage.setTitle("ImageView");
stage.setWidth(415);
stage.setHeight(200);
stage.setScene(scene);
stage.sizeToScene();
stage.show();
}
public static void main(String[] args) {
Application.launch(args);
}
}

How to play the TranslateTransition continuously with no stop

I have a Text that contains a String of 7 lines. I want to put this Text in a panel width 500 and height 70 This text should smoothly move slowly from the bottom up and play again and again without stopping.
I did the following code.
But the text only once playing and floating movement is done with small jumps rather smoothly.
How I can do smooth motion and play it again and again without ever stop?
public class TextSh extends Application {
#Override
public void start(Stage primaryStage) {
String message =" Here is the text of seven lines";
Text textRef = TextBuilder.create()
.layoutY(100)
.textOrigin(VPos.TOP)
.textAlignment(TextAlignment.CENTER)
.wrappingWidth(400)
.text(message)
/*.fill(Color.rgb(187, 195, 107))*/
.fill(Color.OLIVE)
.font(Font.font("SansSerif", FontWeight.BOLD, 18))
.build();
TranslateTransition transTransition = TranslateTransitionBuilder.create()
.duration(new Duration(75000))
.node(textRef)
.toY(-1640)
.interpolator(Interpolator.LINEAR)
.cycleCount(Timeline.INDEFINITE)
.autoReverse(true)
.build();
StackPane root = new StackPane();
root.getChildren().add(textRef);
StackPane r = new StackPane();
r.getChildren().add(root);
Scene scene = new Scene(r, 500, 70);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
transTransition.play();
}
public static void main(String[] args) {
launch(args);
}
}

JavaFX Anchor Constraints

I have an FXML file which has a split pane and 2 rectangles in it. I have both rectangles anchored properly via the FXML but from the code I am generating new rectangles but I can't seem to get the constraints on them working, I set them to the same settings as the rectangles in the FXML(constraint wise) but nothing. I think the issue is the rectangles in the FXML are inside a Split Pane where as the ones generated from the Java code are in the Main AnchorPane. Here is the code any ideas?
public void start(Stage stage) throws Exception {
//GridPane root = new GridPane();
AnchorPane root = fxmlLoader.load(getClass().getClassLoader().getResource("fxml/TestConveyorView.fxml")).getRoot();
Box box = new Box(1);
Rectangle rect = new Rectangle(50,50, box.getStatus().getColor());
rect.setX(385.0);
AnchorPane.setLeftAnchor(rect, 385.0);
AnchorPane.setRightAnchor(rect, 294.0);
root.getChildren().addAll(rect);
Scene scene = new Scene(root);
// BackgroundImage background = new BackgroundImage(null, BackgroundRepeat.REPEAT, BackgroundRepeat.REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT);
stage.setScene(scene);
stage.show();
}
Fixed by removing all the extra code in the main class like below.
public void start(Stage stage) throws Exception {
AnchorPane root = fxmlLoader.load(getClass().getClassLoader().getResource("fxml/TestConveyorView.fxml")).getRoot();
Scene scene = new Scene(root);
// BackgroundImage background = new BackgroundImage(null, BackgroundRepeat.REPEAT, BackgroundRepeat.REPEAT, BackgroundPosition.DEFAULT, BackgroundSize.DEFAULT);
stage.setScene(scene);
stage.show();
}
And adding these to things to my controller
#FXML
AnchorPane Splitright;
Splitright.getChildren().add(rectangle);
As it turns out the shapes were just being thrown on top of everything not actually being placed in the proper AnchorPane, which is what I suspected was happening.

Categories