We Keep Coding

How can i add movable objects inside a jpg pic?

I am new in java.
I am trying to build a three bead game.
I am having problems to place 6 movable objects inside a jpg file.
I have tried using JPanel but the objects doesn't show.

Not sure if I understood you correctly, but I suppose you want to display background (a JPG image) and then programatically move three beads on it. If that's the case, there's Simple tutorial on how to work with images in JavaFX. To just display image, you need to do the following:
public void start(Stage stage) throws FileNotFoundException {
//Creating an image
Image image = new Image(new FileInputStream("file path"));
//Setting the image view 1
ImageView imageView1 = new ImageView(image);
//Creating a Group object
Group root = new Group(imageView1);
//Creating a scene object
Scene scene = new Scene(root, 600, 400);
//Adding scene to the stage
stage.setScene(scene);
//Displaying the contents of the stage
stage.show();
}
To move beads, you need to keep their state in your application and re-draw it periodically. The tutorial I've mentioned describes basics of pixel manipulation so you may want to check that too.

JavaFX - Displaying an image in the GUI

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?

JavaFx canvas filltext rendering quality

I am working on a JavaFx application which use canvas to represent a diagram. The canvas is painting text using graphicsContext.fillText(). In the image below the canvas is on the right, on the left is a Label using the same font. My question is which renering parameter should I use to make the right text look the same as on the left ?
public class SampleRenderingIssue extends Application {
private final StackPane root = new StackPane();
private final Scene scene = new Scene(root, 300, 250);
private final BorderPane pane = new BorderPane();
private final Canvas canvas = new Canvas();
#Override
public void start(Stage stage) {
stage.setTitle("Sample Canvas");
VBox vbox = new VBox();
VBox.setVgrow(pane, Priority.ALWAYS);
vbox.getChildren().addAll( pane );
pane.getChildren().add(canvas);
root.getChildren().add(vbox);
stage.setScene(scene);
stage.sizeToScene();
setupCanvasPane();
stage.show();
Platform.runLater(()-> paint());
}
private void setupCanvasPane(){
canvas.widthProperty().bind(pane.widthProperty());
canvas.heightProperty().bind(pane.heightProperty());
pane.widthProperty().addListener((o,p,c)-> paint());
paint();
}
public void paint(){
GraphicsContext gr = canvas.getGraphicsContext2D();
gr.clearRect( 0,0, canvas.getWidth(), canvas.getHeight() );
gr.setFill( Color.web("#222222") );
gr.fillRect( 0,0,canvas.getWidth(), canvas.getHeight());
gr.setStroke( Color.WHITE );
gr.setFill( Color.WHITE );
gr.setLineWidth( 1d );
gr.strokeLine( 0,0, canvas.getWidth(), canvas.getHeight() );
gr.setFont( Font.font( "Candara"));
gr.fillText("This is a text", 100, 100 );
gr.setFont( Font.font( "Monospaced"));
gr.fillText("This is a text", 100, 120 );
}
public static void main(String[] args) {
launch(args);
}
}
The issue reproduces on a FullHd display where the Windows scale in Control Panel is set to 125% ( default value for a notebook ).

I also had poor text rendering quality in a Canvas. I display dense text in a small font size and it looked quite ugly before.
This may or may not be the same problem you have been running up against, since my Windows scaling is at 100%, but I've discovered in my case it was caused by the Canvas not using the same ClearType implementation as the rest of the UI widgets do. It seems to be set to GREY mode instead of LCD. It's a simple one line fix:
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.setFontSmoothingType(FontSmoothingType.LCD);
gc.setFont(Font.font("Consolas", 10));
gc.fillText("Example ABC 123", 10, 10);
Here is the result, in each case the top line is the rendered version, and the bottom line is a Label in the scene. I've included a zoomed in version, where you can clearly see Canvas is not doing the LCD subpixel rendering correctly
In the right handle example they appear to be identical, and my visual quality is restored.

Invalid Image url

I can't seem to use the Image class. My colleague and I are working on a project together and he seems to be able to run all the code fine without any errors. When I try to run the same code, with the src organized the same way, I get an invalid URL or resource not found error. I have had this problem on other projects and it seems like it is specific to my computer or file system. Any help would be much appreciated. Here is a sample of the code.
public class HomePageGUI extends Application {
//Create the dispenser. Generates 5 Products in an array within the dispenser class.
private final Dispenser dispenser = new Dispenser();
//Get background image and add it to the stack pane
private final Image bgImage = new Image("/Dispenser Design/Background & Button Images/Background.png");
private final Button backButton = new Button("", new ImageView(
new Image("/Dispenser Design/Background & Button Images/Navigation Buttons/Back Button.png")));
private StackPane backgroundPane = new StackPane();
private Scene scene;
#Override
public void start(Stage primaryStage) {
primaryStage = homePage(primaryStage);
primaryStage.show();
}
//Display the home page
private Stage homePage(Stage stage) {
//IMAGE CREATION
Image drinksCategoryImage = new Image (
"/Dispenser Design/Background & Button Images/Starter Page/Drinks Button.png");
Image gumCategoryImage = new Image (
"/Dispenser Design/Background & Button Images/Starter Page/Gum Button.png");
Image sweetsCategoryImage = new Image (
"/Dispenser Design/Background & Button Images/Starter Page/Sweets Button.png");
//END IMAGE CREATION
//Create the buttons with the image displayed on them.
Button drinksCategoryButton = new Button(
"", new ImageView(drinksCategoryImage));
drinksCategoryButton.setOnAction(e -> {
drinksCategory(stage); });
Button gumCategoryButton = new Button(
"", new ImageView(gumCategoryImage));
gumCategoryButton.setOnAction(e -> {
gumCategory(stage); });
Button sweetsCategoryButton = new Button(
"", new ImageView(sweetsCategoryImage));
sweetsCategoryButton.setOnAction(e -> {
sweetsCategory(stage); });
//END BUTTON CREATION

Ok so after many hours of troubleshooting I figured out that I needed to add file: to the image path. I am not sure why my colleagues did not need to add the file: extension to make the images work, but that is how it ended up working for me.
productsForSale[ 4] = new Gum("Wriggleys", "Big Red", .75, 1, new Image(
"file:src/DispenserDesign/IndividualProducts/BigRedGum.jpg"));

How to set up and transform a Camera in a SubScene?

I am trying to get an isometric view of a grid. The grid is only part of the main scene so I created a subscene and I want add a camera to it. I will want to be able to zoom the camera in and out and pan it around preserving the viewing angle throughout all these operation.
Here is what I have without the camera:
public class MyApp extends Application {
#Override
public void start(Stage stage) throws Exception {
Button actionButton = new Button("Placeholder\t\t\t\t\t\t\t\t\t\t\t\t");
HBox hbox = new HBox(actionButton);
BorderPane mainPane = new BorderPane(new MyView(), null, null, hbox, null);
Scene scene = new Scene(mainPane);
stage.setScene(scene);
stage.show();
}
private class MyView extends Group {
MyView() {
super();
GridPane grid = new GridPane();
for (int i = 0; i < 64; i++) {
Rectangle tile = new Rectangle(30, 30, Color.GREEN);
BorderPane pane = new BorderPane(tile);
pane.setBorder(new Border(new BorderStroke(null, BorderStrokeStyle.SOLID,
null, null, null)));
grid.add(pane, i / 8, i % 8);
}
Group root = new Group();
root.getChildren().add(grid);
SubScene scene = new SubScene(root, 300, 300, true, SceneAntialiasing.BALANCED);
scene.setFill(Color.DARKCYAN); // just to see the area
getChildren().add(scene);
}
}
public static void main(String[] args) throws Exception {
launch(args);
}
}
Now I add the camera like this in the MyView constructor:
Camera camera = new PerspectiveCamera(true);
scene.setCamera(camera);
and the grid disappears.
I didn't even do any transformation yet (i would do camera.getTransforms().addAll(new Rotate(-15, Rotate.Y_AXIS));). What am i doing wrong?
also, how can I tell the subscene to take whatever space is available? I don't want to need to specify specific size because the program can run on all sorts of screens.

Your camera is positioned at the same z coordinates as the Group. However you have to make sure it's at a distance between farClip and nearClip:
PerspectiveCamera camera = new PerspectiveCamera(true);
camera.setTranslateZ(-100);
camera.setFieldOfView(120);
Furthermore for isometric views PerspectiveCamera is the wrong Camera to use. Use ParallelCamera instead:
Camera camera = new ParallelCamera();
//camera.setRotationAxis(new Point3D(1, 1, 0));
//camera.setRotate(30);
scene.setCamera(camera);
also, how can I tell the subscene to take whatever space is available?
Change the type extended by MyView to something that is resizable and bind the size of the SubScene to the size of MyView:
private class MyView extends Pane {
MyView() {
...
setPrefSize(300, 300);
scene.widthProperty().bind(widthProperty());
scene.heightProperty().bind(heightProperty());
}