We Keep Coding

How to insert HTML text inside a JavaFX shape?

I want to create a tree-based algorithm visualization in JavaFx, and there are many sub scripts and super scripts in the notations. I want to add these notations to shapes like circles.
I have tried using WebView object for doing that, but it just covers up the entire screen.
public void start(Stage primaryStage) throws Exception{
primaryStage.setTitle("Shape Text");
Group circles = new Group();
Circle circle = new Circle(50, Color.web("white", 0.7));
circle.setCenterX(500.0f);
circle.setCenterY(200.0f);
circle.setStrokeType(StrokeType.OUTSIDE);
circle.setStroke(Color.web("white", 0.16));
circle.setStrokeWidth(4);
circles.getChildren().add(circle);
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.loadContent("<h1>B<sub>0</sub></h1>");
StackPane stack = new StackPane();
stack.getChildren().addAll(circles, webView);
Scene scene = new Scene(stack, 1000, 800, Color.BLACK);
primaryStage.setScene(scene);
primaryStage.show();
}
The above code replaces the entire view with HTML text. I also tried javafx.scene.text.Text class, but it does not support the HTML content.
Thank you in advance!

There are three things you might want to do:
Size the WebView to the HTML content (or the inner display region of the shape).
Make the background of the WebView pages transparent.
Center the HTML content in the WebView, with the WebView centered in the Shape.
Code below demonstrates some of these tricks:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.StrokeType;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import java.lang.reflect.Field;
public class ShapedHTML extends Application {
#Override
public void start(Stage stage) throws Exception{
stage.setTitle("Shape Text");
Group circles = new Group();
Circle circle = new Circle(50, Color.web("white", 0.7));
circle.setCenterX(500.0f);
circle.setCenterY(200.0f);
circle.setStrokeType(StrokeType.OUTSIDE);
circle.setStroke(Color.web("white", 0.16));
circle.setStrokeWidth(4);
circles.getChildren().add(circle);
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webView.maxWidthProperty().bind(circle.radiusProperty().multiply(2));
webView.maxHeightProperty().bind(circle.radiusProperty().multiply(2));
webEngine.documentProperty().addListener(observable -> {
try {
// Use reflection to retrieve the WebEngine's private 'page' field.
Field f = webEngine.getClass().getDeclaredField("page");
f.setAccessible(true);
com.sun.webkit.WebPage page = (com.sun.webkit.WebPage) f.get(webEngine);
page.setBackgroundColor((new java.awt.Color(0, 0, 0, 0)).getRGB());
} catch (Exception e) {
System.out.println("Difficulty to make WebView background transparent");
e.printStackTrace();
}
});
webEngine.loadContent("<h1 id='root' style='background : rgba(0,0,0,0); margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);'>B<sub>0</sub></h1>");
StackPane stack = new StackPane();
stack.getChildren().addAll(circles, webView);
Scene scene = new Scene(stack, 1000, 800, Color.BLACK);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Note on com.sun class usage
The above code uses com.sun classes (which is usually not recommended as it is not publicly supported API). But, it worked for me (on Java 8) and I don't know a better way to accomplish the transparency of the WebView background.
If you are using later versions of Java (e.g. Java 11+), then you will need to provide some VM arguments to allow usage of the relevant com.sun classes to work. See, for instance, the stack overflow question Cannot access JavaFX class "WebPage" in IntelliJ-IDEA for resolving accessibility issues for com.sun.webkit.WebPage in Java 11+. An answer to that question suggests using the following VM arguments (which I haven't tried):
--add-exports javafx.web/com.sun.webkit=projectname
where the last argument is your module name as declared in the module-info.java of your project.

Try setting the maxSize of the WebView.
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class JavaFXTestingGround extends Application
{
#Override
public void start(Stage primaryStage) throws Exception
{
Circle circle = new Circle(100, Color.web("white", 0.7));
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.loadContent("<h1>B<sub>0</sub></h1>");
webView.setMaxSize(50, 50);
StackPane stack = new StackPane();
stack.getChildren().addAll(circle, webView);
Scene scene = new Scene(stack, 1000, 800, Color.BLACK);
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args)
{
launch(args);
}
}

How do I make JavaFX MediaView stretch media to fill parent?

I want make JavaFX MediaView stretch to fill parent container.
I tried some methods from google before,but nothing helpful(maybe i'm not apply it right),and there is a question with same name as this,but solutions in that question maybe not suit me.
first i use the ahchorpane to anchor mediaview but find it can not stretch mediaview,and I don't know why because other controls like button can work.
Then i try bind its width and height to anchorpane(parent of mediaview)
Region region=(Region) mediaplayer.getParent();
mediaplayer.setPreserveRatio(false);
mediaplayer.fitWidthProperty().bind(region.widthProperty());
mediaplayer.fitHeightProperty().bind(region.heightProperty());
it's can expand mediaview exactly when i resize window,but can't Shrink down!
I guess it's maybe because size of region depend on it childs?
finally,i try to bind mediaview'size to stage'size,it's work,but the code looks like ugly,because i need calculate size manully.
mediaplayer.setPreserveRatio(false);
mediaplayer.fitWidthProperty().bind(stage.widthProperty().subtract(200));
mediaplayer.fitHeightProperty().bind(stage.heightProperty().subtract(135));
are there have any better solutions?

Using the code below you will see that you are able to stretch and shrink the mediaView as much as you like ( depending of the stage dimensions)
import java.io.File;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;
import javafx.stage.FileChooser;
import javafx.stage.Stage;
public class TestApp extends Application {
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) {
BorderPane pane = new BorderPane();
FileChooser fc = new FileChooser();
File mediaFile = fc.showOpenDialog(null);
MediaView moviePlayer;
if (mediaFile != null) {
MediaPlayer player = new MediaPlayer(new Media(mediaFile.toURI().toString()));
moviePlayer = new MediaView(player);
moviePlayer.setPreserveRatio(false);
moviePlayer.fitWidthProperty().bind(pane.widthProperty());
moviePlayer.fitHeightProperty().bind(pane.heightProperty());
pane.getChildren().add(moviePlayer);
player.play();
}
Scene scene = new Scene(pane, 300, 300);
stage.setScene(scene);
stage.show();
}
}
This code works with AnchorPane as well so I guess there is something else wrong with your code if you still have the issue or I haven't understand what you need. Make a simple runnable program to demonstrate the issue.

Try to add this Action-Listener for rescaling the size:
MediaView.getParent().layoutBoundsProperty().addListener(new ChangeListener<Bounds>() {
#Override
public void changed(ObservableValue<? extends Bounds> observable, Bounds oldValue, Bounds newValue) {
mediaView.setFitHeight(newValue.getHeight());
mediaView.setFitWidth(newValue.getWidth());
}
});
This should be called every time the parent-size got changed or maximized and then the view should be resized to parent, too.

Custom minimize button do not call MouseLeave event

I have a simple stage with StageStyle.TRANSPARENT (no default buttons).
Therefore I tried to create my own custom buttons, represented each by an ImageView with the next events activated: setOnMouseEntered, setOnMouseExited and of course setOnMouseClicked.
Problem is for the Minmized Button. Is a simple implementation like below
ImageView.setOnMouseClicked((MouseEvent event) -> {
stage.setIconified(true);
});
Lets imagine that my ImageView is a White rectangle. On mouse enter event, it changes its color into Black. On mouse exit, it is going back to White color.
When the ImageView is clicked, the window will be minimized, everything perfectly workable until now.
Problem is when the application is restored (maximized), the Minimized custom button is stuck with color Black (the color that represent the button is hovered), instead of White (default color when is not focused).
P.S. it seems that everything like relocate, setImage etc. inside the onMouseClicked handler is cut by the the setInconified(true);
Any help would be most appreciated.
Thank you for your time of reading this.
Updates to clear a bit the question
The normal print-screen image (when it is not hovered)
The hover print-screen (when it is hovered)
As you can observe, everything works perfectly. In the moment when "-" button (minimize button) is pressed, when the application is restored, it will remain stuck in hover mode, until the mouse cursor will hover again the button (then everything comes back to normal). Sadly neither CSS approach or event listeners on image view dose not seems to solve this issue.
Update code loaded
This is a simple one source file with just a button that call minimize
package application;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class Main extends Application {
private Scene scene;
private Stage stage;
#Override
public void start(Stage stage) {
try {
this.stage = stage;
stage.initStyle(StageStyle.TRANSPARENT);
stage.setAlwaysOnTop(true);
stage.setFullScreen(true);
stage.setFullScreenExitHint("");
createScene(stage);
stage.setScene(scene);
stage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
private void createScene(Stage stage) {
Pane layer = new Pane();
layer.setPickOnBounds(false);
scene = new Scene(layer, 800, 600);
scene.getStylesheets().add("application/application.css");
layer.getChildren().add(buildMinimizeImage());
}
private ImageView buildMinimizeImage() {
ImageView imv = new ImageView();
int width = 43 ;
int height = 36;
imv.setId("myImage");
imv.setFitWidth(width);
imv.setFitHeight(height);
imv.setOnMouseClicked((MouseEvent event) -> {
stage.setIconified(true);
});
imv.relocate(100, 100);
return imv;
}
public static void main(String[] args) {
launch(args);
}
}
And the application.css is very simple as well
#myImage
{
-fx-image: url("minimize.png");
}
#myImage:hover
{
-fx-image: url("minimizeIn.png");
}
Issue is reproducible on Ubuntu 14.04 and Windows 10. I do not think is an OS problem
RESOLVED
Please find enclose the Harry Mitchel solution (thank you one more time for it). It is perfectly workable.
If you want to fix the code from above I by adding the setOnMousePressed event.
imv.setOnMousePressed((MouseEvent event) -> {
imv.setImage(image);
});

You can listen to the maximized property of the Stage class. Inside the changed() method, set the ImageView's image.
stage.maximizedProperty().addListener(new ChangeListener<Boolean>() {
#Override
public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
//Display the desired icon here.
}
});
Here is a custom minimize button. You provide the two images and the stage as parameters. When the mouse is not over the button, it will show the image referenced in the constructor's first parameter. When the mouse is over the button, it will show the image referenced in the constructor's second parameter. When you click the image the stage will be minimized.
import javafx.event.ActionEvent;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;
public class MinimizeButton extends Button {
/**
*
* #param img the image when the button is NOT selected
* #param imgHover the image when button is selected
* #param stage the stage that will be minimized
*/
public MinimizeButton(Image img, Image imgHover, Stage stage) {
ImageView imgView = new ImageView(img);
this.setGraphic(imgView);
this.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {
imgView.setImage(imgHover);
});
this.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {
imgView.setImage(img);
});
this.setOnAction((ActionEvent event) -> {
stage.setIconified(true);
imgView.setImage(img);
});
}
}
Here is an example app that uses the MinimizeButton class.
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class CustomMinimize extends Application {
#Override
public void start(Stage stage) {
Image imgWhite = new Image(getClass().getResourceAsStream("imgWhite.png")); //your image here
Image imgGreen = new Image(getClass().getResourceAsStream("imgGreen.png")); //your hover image here
MinimizeButton btnMinimize = new MinimizeButton(imgWhite, imgGreen, stage);
btnMinimize.setStyle("-fx-background-color: black;");
btnMinimize.setPrefSize(50, 50);
Button btnExit = new Button("X");
btnExit.setMinSize(50,50);
btnExit.setOnAction((ActionEvent event) -> {
System.exit(0);
});
btnExit.setStyle("-fx-background-color: black;");
HBox hBox = new HBox();
hBox.setSpacing(2);
hBox.getChildren().addAll(btnMinimize, btnExit);
AnchorPane anchorPane = new AnchorPane();
anchorPane.getChildren().addAll(hBox);
AnchorPane.setRightAnchor(hBox, 5.0);
AnchorPane.setTopAnchor(hBox, 5.0);
Scene scene = new Scene(anchorPane);
stage.initStyle(StageStyle.TRANSPARENT);
stage.setScene(scene);
stage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
}

Your question is not very clear (not that it is very unclear though), so I will attempt to solve your problem.
I am assuming that your color change is done through ImageView.setOnMouseEntered() and ImageView.setOnMouseExited(). If this is so, you should instead use CSS.
.myImageView
{
-fx-image: url("my_white_image.png");
}
.myImageView:hovered
{
-fx-image: url("my_black_image.png");
}
For the things in your "PS" section, I couldn't understand, so I would not be able to give any advice on that.

Why is my object not displaying in JavaFX?

This should be a relatively simple problem, but it is driving me insane. I am trying to create Mine Sweeper in JavaFX (mostly just for practice) but I can not get even a simple rectangle to display. I had the game running once before, but I am trying to make the game more abstract, and hence easier to code, but I am running into the issue of nothing being displayed.
I eliminated all extraneous code so it is as simple as possible. I am basically trying to create a Rectangle with a certain color and size called Box, add the box to the pane, and display the pane. In order to make Box a node that can be displayed on the pane, I made the Box class extend Rectangle, so that a Box would have the same properties as a Rectangle. But when I run the code, it gives just an empty pane with no box in it.
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;
public class Minesweeper extends Application {
#Override
public void start(Stage stage) {
Pane pane = new Pane();
Box box = new Box();
pane.getChildren().addAll(box);
// Create the scene
Scene scene = new Scene(pane);
stage.setTitle("Minesweeper");
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
public class Box extends Rectangle {
public Box() {
Rectangle box = new Rectangle(100, 100, 100, 100);
box.setFill(Color.BLUE);
}
}
I realized if I put the code from Box into the main Minesweeper class, it will display the box. But Box will have a ton of other properties and therefore needs to be a class on its own.
What am I doing wrong that does not allow the box to be displayed?
Thanks in advance for your help and consideration.

You create a new Rectangle in your Box class. This Rectangle is not added to any Parent container, so it's not visible.
Change your code to:
public Box() {
super(100, 100, 100, 100);
setFill(Color.BLUE);
}

How to get narrow progres bar in JavaFX?

As the title says, I need to make a thin progress bar. I used this:
progressBar.setMaxHeight(0.1);
progressBar.setPrefHeight(0.1);
but that doesn't work. Does anyone have an idea?

You'll have to mess around with the styling to get it any smaller. I really recommend taking a look a the caspian.css that's included with Javafx - that's the default style sheet. It helps a lot when trying to override the look and feel of the default skins. Here's an example I put together that shows how it can be done:
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class ProgressBarTest extends Application {
public static void main(String[] args) { launch(args); }
#Override
public void start(final Stage stage) throws Exception {
//All the controls are added here
VBox box = new VBox();
box.getStylesheets().add("test.css");
ProgressBar pb = new ProgressBar(50);
box.getChildren().add(pb);
//Setting up your scene
Scene scene = new Scene(box);
stage.setScene(scene);
stage.show();
}
}
And here's the test.css I loaded up:
.progress-bar .bar {-fx-padding:1px; -fx-background-insets:0;}
And here is the output of the test app: