I am looking for a way to load an AFrame Scene through the click on a thumb.
I am trying to use a picture slider, and every picture should have a 3d scene behind it. So if i click a picture in the slider, the aframe scene should pop up in the foreground, with a different sky texture for example.
I tried multiple ways, but nothing really works. I can load a new scene through a new window, but that's not a good way.
I would appreciate any help that could lead me on the right path. :) :D
Cheers, Max
Have an A-Frame scene in the background (or somewhere on the page) <a-scene embedded style="z-index: -1"></a-scene>. On the click of the picture, set the scene's z-index to the foreground and change whatever else you need in the scene to match the picture.
var aframeScene = AFRAME.scenes[0];
yourPic.addEventListener('click', function () {
aframeScene.style.zIndex = 9999;
aframeScene.querySelector('a-sky').setAttribute('src', 'newImage.jpg');
});
Related
So, I've been programming an analog clock in JavaFX and have gotten the base functionality down. Now, I'm trying to add a drop-down menu when I click a custom button (triangle made with a Polygon). So far it all works fine, except the fact that the background of my StackPane is white when I try to add a ContextMenu either before or after clicking the button. So far Transparency has been fine up until now. Here's some pictures of the issue.
This is what it should look like (you can see my wallpaper because of the transparent window, as it should be.)
enter image description here
After I press the button for the drop down menu, the background changes.
enter image description here
JavaFX controls are styled by CSS. The first time you create a control, the default user agent stylesheet (modena.css) is loaded and the styles defined in it are applied to the scene graph. Other JavaFX node classes, such as shapes, image views, and layout panes, do not enforce CSS loading (this is to enhance performance for graphically-intensive applications that do not need CSS).
So it sounds as though the context menu is the first control you create: when you create and display it, it will apply the default CSS to the scene. The default background color for the root pane is a non-transparent color, so while your Scene and Stage may be transparent, once the CSS is applied the scene's content is not.
The fix is to specify transparency for the root pane:
root.setStyle("-fx-background-color: transparent;");
or the equivalent in an external stylesheet.
To answer my own question in case anyone else wants to know, it seems that when the ContextMenu is added to the scene, the Stage's initStyle(StageStyle.TRANSPARENT) gets overridden and shows the Parent's colors. Since I didn't initialize any CSS styles for the root, it just showed white. The fix would be to:
//the Parent layout Pane
parent.setStyle("-fx-background-color: rgba(0, 0, 0, 0.0)");
I am making a view in SceneBuilder for my JavaFX application. I want my view to be maximized. How can I achieve this in SceneBuilder or the .fxml file?
You cannot do that using Scene Builder, since maximize or fullScreen are properties of the Stage and not the layouts set on the scene.
You can load and set the .fxml on the scene and later set the scene on the stage.
The following methods can be used on the stage :
setMaximized(boolean) - To maximize the stage and fill the screen.
setFullScreen(boolean) - To set stage as full-screen, undecorated window.
As you cannot maximize your view in fxml, you have to set the size of the stage to be maximized. There is no direct method for setting the size of the stage to be maximized in javafx 2 but there is another way you can do this. It is by manually setting the size of the stage. You can use this code:
Screen screen = Screen.getPrimary();
Rectangle2D bounds = screen.getVisualBounds();
primaryStage.setX(bounds.getMinX());
primaryStage.setY(bounds.getMinY());
primaryStage.setWidth(bounds.getWidth());
primaryStage.setHeight(bounds.getHeight());
This is the code that works for me
primaryStage.setMaximized(true);
it miximizes my window screen on the launch of the app.
I agree with Yemmy1000. primaryStage.setMaximized(true) works fine for me.
primaryStage.setScene(new Scene(root, 1800, 850));
primaryStage.setMaximized(true);
This code will go to width: 1800 and height:900 when restored down from maximum.
Two properties I found in stage which are useful.
First is setFullScreen(boolean) which will set your view to full screeb, but it will also hide all the taskbar and header of view.
Second is setMaximized(boolean) which will set you view to perfect like any other application view size.
I an using setMaximized(true) for my application.
My Question is how can i position a javafx button in a specific location.
All the time that i tried to do this simple code is resulting that the Button is only located in the Center of the screen and not on my desired location.
(I'm using StackPane)
Code:
Button button = new Button();
button.setLayoutX(x);
button.setLayoutY(y);
Thanks in advance ,
Amit.
If you want to specify the exact co-ordinates of your node, you can use a Pane instead of StackPane.
Your button, if added to a StackPane or similar layout which supports alignment, must use the translate properties to move the button. You cannot use setLayoutX() or setLayoutY() with these layouts.
Try using the following command to move the button from its initial location :
button.setTranslateX(10);
button.setTranslateY(20);
I Changed the scene of a stage by
((Stage) Node.getScene().getWindow()).setScene(scene);
but I am not able to add any timeline during scene changing.
can anyone suggest me an idea to do it ?? plz
I assume you want to anime a transition between screens in your GUI? For that I recommend you don't switch the Scene but instead switch out Panes (screens being Panes). The following steps should work:
Pick an appropriate root node. The screen (let's call it screen1) you want to show should be a child of that root node.
If you want to replace screen1 with screen2, using a fade transition for example, you could add screen2 to the root node and place below screen1.
Then create a FadeTransition to fade out screen1.
Screen2 should now be showing instead of screen1. Don't forget to remove screen1 from the root node to keep your scenegraph small.
You can adapt this technique to whatever transition you like.
I had a hard time figuring out why my transparent stage refuses to be transparent. Finally I found out, that it was caused by a Tooltip that was installed into an ImageView:
ImageView imageViewIcon = new ImageView();
imageViewIcon.setFitWidth(70);
imageViewIcon.setFitHeight(70);
imageViewIcon.setPreserveRatio(false);
imageViewIcon.setImage(new Image("./next.png"));
Tooltip tooltip = new Tooltip("Tooltip!");
if (this.config.getShowTooltip("true")) {
Tooltip.install(imageViewIcon, tooltip);
}
When I comment out the last 4 lines, the transparency works as expected, but with the Tooltip installed the stages background is grayish (e.g. the default window background). Though it's obvious what the button does and the tooltip is not essential for my layout it'd be nice to have, just to give a little hint...
Any suggestions or workarounds?
Solution
Set the style -fx-background-color: transparent on the root node of the scene.
Background
Similar behavior is discussed in an Oracle JavaFX Forum post on the JavaFX Scene/Fill Color.
Relevant comments from the thread by David Grieve, the lead developer for the JavaFX CSS features:
This happens because modena.css sets the background color of the root node. Setting the style -fx-background-color: transparent on the root node of the scene is the solution.
BorderPane root = new BorderPane();
root.setStyle("-fx-background-color: transparent;");
Scene scene = new Scene(root, 600, 400, Color.BLACK);
The default user agent stylesheet is loaded the first time a Control is instantiated. The reason for this is to avoid loading stylesheets and reduce CSS overhead in scene-graphs that contain nodes that don't use CSS.
The history behind it is that the designer of the modena theme felt that the controls looked better on this particular background color, which is a very light grey. Unfortunately, the Scene's background fill cannot be styled from CSS, so the style was set on the root node of the scene. There is an issue logged in JIRA to make Scene so that it can be styled by CSS (RT-31282)
The merit of loading in this way is to avoid css overhead in scene's that don't use controls. This would be typical of a splash screen, for example. Or maybe a game. This design choice was made a long time ago when CSS performance was a big issue, but it still makes sense for embedded devices.
In the case of your question, Tooltip is a control, so when you add it to the scene it implicitly triggers the default modena.css stylesheet to be loaded for the scene (which sets the background of the root node of the scene to gray rather than a null or transparent fill which is used when there are no controls in the scene). To retain the transparent background for the application when a control is used in the scene, it is necessary to explicitly set the scene root node background to transparent.
Sample code for a transparent stage:
//this is where the transparency is achieved:
//the three layers must be made transparent
//(i) make the VBox transparent (the 4th parameter is the alpha)
root.setStyle("-fx-background-color: rgba(0, 0, 0, 0);");
//(ii) set the scene fill to transparent
scene.setFill(null);
//(iii) set the stage background to transparent
stage.initStyle(TRANSPARENT);