How to overlay on top of JavaFX 2 webview?

Question

Is it possible to overlay any JavaFx2 widgets or canvas on top of the JavaFX 2 webview?

I want to create a transparent heatmap using JavaFX 2 on top of a web view.

Answer 1

You mean something like this:

import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.scene.layout.StackPane; import javafx.scene.paint.Color; import javafx.scene.shape.Rectangle; import javafx.scene.shape.RectangleBuilder; import javafx.scene.text.Font; import javafx.scene.text.FontWeight; import javafx.scene.text.Text; import javafx.scene.text.TextBuilder; import javafx.scene.web.WebView; import javafx.stage.Stage; public class Demo extends Application { @Override public void start(Stage primaryStage) { WebView webView = new WebView(); webView.getEngine().load("http://www.google.com"); StackPane root = new StackPane(); root.getChildren().addAll(webView, getOverlay()); primaryStage.setScene(new Scene(root, 300, 250)); primaryStage.show(); } private Pane getOverlay() { StackPane p = new StackPane(); Rectangle r = RectangleBuilder.create() .height(100).width(100) .arcHeight(40).arcWidth(40) .stroke(Color.RED) .fill(Color.web("red", 0.1)) .build(); Text txt=TextBuilder.create().text("Overlay") .font(Font.font("Arial", FontWeight.BOLD, 18)) .fill(Color.BLUE) .build(); p.getChildren().addAll(r, txt); return p; } public static void main(String[] args) { launch(args); } } 

Answer 2

Adding an overlay is very simple: just put the webview and any panel in StackPane.

Another story is the synchronization of overlay data and web browsing. For this you need to ask webview for the coordinates of the object via javascript. Here is an example that finds the stackoverflow question area and marks it on overlay:

the open WebOverlay class extends the application {

  @Override public void start(Stage stage) { StackPane root = new StackPane(); WebView webView = new WebView(); final WebEngine webEngine = webView.getEngine(); Canvas overlay = new Canvas(600,600); overlay.setOpacity(0.5); final GraphicsContext gc = overlay.getGraphicsContext2D(); gc.setFill(Color.RED); root.getChildren().addAll(webView, overlay); stage.setScene(new Scene(root, 600, 600)); webEngine.getLoadWorker().workDoneProperty().addListener((observable, oldValue, newValue) -> { if (newValue.intValue() == 100) { // find coordinates by javascript call JSObject bounds = (JSObject)webEngine.executeScript("document.getElementsByClassName('question-hyperlink')[0].getBoundingClientRect()"); Number right = (Number)bounds.getMember("right"); Number top = (Number)bounds.getMember("top"); Number bottom = (Number)bounds.getMember("bottom"); Number left = (Number)bounds.getMember("left"); // paint on overlaing canvas gc.rect(left.doubleValue(), top.doubleValue(), right.doubleValue(), bottom.doubleValue()); gc.fill(); } }); webEngine.load("http://stackoverflow.com/questions/10894903/how-to-make-an-overlay-on-top-of-javafx-2-webview"); stage.show(); } public static void main(String[] args) { launch(); } }