I'm developing gant chart with JavaFx. My main content is placed inside of ScrollPane.
I have zoom option which is changing content width.
This is performance related to content size:
zoom:
x1 - 2880px // smooth scrolling
x2 - 5760px // smooth scrolling
x3 - 8640px // smooth scrolling
x4 - 11520px // bad/jumps
x5 - 14410px // very bad/ not smooth at all
x6 - ... // :-/
Is it possible to fix it some how? Which way to go ... I don't have any idea how to start or even is it possible to fix it :-/
Please help.
SOLUTION
I found out what was the problem. Hope that will help some of You. Problem was with CSS of content of ScrollPane. I'm developing gant chart. Inside of ScrollPane I has rows ( HBox'es ) and this is CSS class for class row:
.opertationRow{
-fx-background-color: #171717;
-fx-border-color: #323232;
-fx-border-width: 0 0 1 0;
/*-fx-border-style: dashed;*/
-fx-padding: 1 0 1 0;
}
-fx-border-style: dashed; <----- after I've commented this everything is working smooth! I'm not answering this question as not enough input from my site was added
For standard Nodes (and probably JavaFX built-in charts as well), you can set 'cache' to true on the Node. This causes the Node's contents to be cached as an image. Since images and simple shapes are handled by graphics hardware acceleration, it can speed things up a lot (and is one of the first things to try if you're having performance problems).
The downside of using this is that the cached image uses some memory, but I haven't seen this to be an issue for my app. If the Node is animating / changing often, you may want to use caution with this approach.
API docs for 'cache':
http://docs.oracle.com/javafx/2/api/javafx/scene/Node.html#cacheProperty
Related
I have an Exoplayer view in a fragment, when I animate the fragment container view from the activity the exo player will become black. I used setKeepContentOnPlayerReset(true); to keep the last frame and it's working fine. But when I call the animate (sliding animation) on fragment container view (that's a Frame Layout) after the video is over, Exo player will display the black screen. (even the fragment exit transition also creates the same issue on Exo player, this time I didn't replaced the fragment just animated the container view, the issue is still present) I haven't any clue related to this issue, It would be very helpful if anyone can share some idea related to this. welcomes every suggestion and answers related to this. Thank you.
It's turned out that using "texture_view" for "app:surface_type" will resolve the issue, This will make the Exo player use texture view instead of the surface view and that makes animations and scrolling smooth.
In documentation its says
On earlier releases, this could result in unwanted effects when a
SurfaceView was placed into a scrolling container, or when it was
subjected to animation. Such effects included the SurfaceView’s
contents appearing to lag slightly behind where it should be
displayed, and the view turning black when subjected to animation
In xml file, we can enable texture view as follows
<com.google.android.exoplayer2.ui.SimpleExoPlayerView
android:id="#+id/playerView"
android:layout_width="match_parent"
android:layout_height="200dp"
app:surface_type="texture_view"/>
You can use this 2 solutions...
add this attribute to PlayerView :
app:surface_type="texture_view"
use this in your code :
val simpleExoPlayer = SimpleExoPlayer.Builder(requireContext())
.setMediaSourceFactory(
DefaultMediaSourceFactory(requireContext())
)
.build()
simpleExoPlayer.addAnalyticsListener(object : AnalyticsListener {
override fun onSurfaceSizeChanged(
eventTime: AnalyticsListener.EventTime,
width: Int,
height: Int
) {
super.onSurfaceSizeChanged(eventTime, width, height)
val surfaceView = playerView.videoSurfaceView
if (surfaceView is SurfaceView) {
surfaceView.holder.setFixedSize(width, height)
}
}
})
I'm trying to make an application that uses a tab widget as its top-most layout element besides the MainWindow and the central widget (as created by default by Qt Designer). For that purpose, I don't need any margins on my QtTabWidget.
Unfortunately, I can't seem to fully get rid of them. I basically want the QtTabWidget to take all the space available except for the menubar and the status bar.
I came darn close to having it sorted out, but the right margin refuses to subsede even after I've set it to 0 (central widget's layoutRightMargin is set to 0). Here's an image of the issue:
If you zoom in, you'll notice the right margin between the tab and the application frame border. SO squishes the image a bit so you might have to zoom it to see it, but trust me it's really visible (and annoying) at full resolution.
Sounds like you might want documentMode:
In a stylesheet, this seemed to work for me:
#tabWidget::pane { border: none; }
You may or may not also need
#tabWidget { border: none; }
I am unable to find a way to set the distance to the border in a GridPane. Now, the text starts immediately after the border stops, which is not very nice for the design. I could give all the children a padding, but I was thinking there must be a shorter way to do this (just some property of the GridPane).
Unfortunately, I was not able to find this anywhere online. I prefer a solution which uses FXML or CSS (preferably CSS), but if this must be done with some Java code, it is not a problem.
I have already tried:
Setting the margin of the GridPane in the CSS:
#someGridPane { -fx-border-insets: 5; }, but these insets are outside the border (and I want them inside).
Setting padding on all of the child elements, which is not as efficient as I had hoped).
So the question is: How to set the distance to the border in a GridPane?
Notes:
I am using JavaFX8
If the solution is somewhere online already, please let me know. (I searched for it for some time now)
Depending on what's in your grid pane you could cheat a bit.
GridPane > Text {-fx-translate-x : 5;}
GridPane > Label {-fx-label-padding: 0 0 0 5;}
Of course, add some style class names, but you get the idea.
There is a simpler, more natural solution:
GridPane {
-fx-padding: 5;
-fx-hgap: 5;
-fx-vgap: 5;
}
It does the same as using GridPane.setHgap(5) etc, but with CSS.
I'm making an app using JQuery Mobile on top of PhoneGap (Cordova). I used Codiqa to come up with a wireframe for my UI. It looks OK so far, but the group of radio buttons I'm going to use to change views with wasn't centred - it was off to the left by about 25px on a WVGA800-sized webkit browser. When scaled to a tablet shape, the group got further and further from the centre of the viewport.
Here's a jsFiddle link to my project with the problem unfixed - http://jsfiddle.net/jaspermogg/sahXy/1/
Here's a jsFiddle link to my project as fixed by me - http://jsfiddle.net/jaspermogg/NvMsK
I came up with a solution using JQuery, but I'm inexperienced and don't know which event to fire on.
When I load the UI in Webkit, it renders the UI pre-script, before refreshing after <1s to a post-script state. This looks lame. I have my script set up to run on $(window).load.
Questions:
What event should I be looking for, and could you show me how to implement that?
Is my script in the right place - should it be inside the page, the way it is, or outside? Or in head even?
It feels really stupid to be doing this with JQ - surely there's a way to do this with CSS?
Thanks in advance for any help offered! Cheers!
I guess I answered my own question in the comments above, so gonna formalise it by accepting my answer.
What I did in the end was -
(1) Set the radio button-containing div to visibility: hidden in the CSS.
(2) Find the widths of each radio button and add them together.
(3) Set the width of the radio button-containing div to the total width.
(4) Chain a change of the visibility property onto (3).
The CSS has to be set up like this -
#viewselector{
margin: 0 auto;
text-align: center;
visibility: hidden;
}
The code to do (1) to (4) is as follows -
$(document).ready(function(){
var idealwidth = 0
$(".ui-radio").each(function(){
idealwidth = idealwidth + $(this).width();
});
$("#viewselector").width(idealwidth).css('visibility','visible');
});
Hope this helps someone!
Alright, so here is the situation...
Say I have a navbar for a site, and I allow users to change the number of links they want on this navbar. This means they could have 3, 5, 10, etc.
What I want to do is make it so that if one link is up, it only takes up, say, 1/5th of the space on the navbar. If I weren't using borders, I might do something like:
width: 18%;
padding: 0 1%;
However, I have two problems with this:
1) For 4 buttons, that's fine that it doesn't fill up the whole row. It would look ugly if the links were too wide... but when I have 6 or 7 buttons, it's got huge overflow!
2) Since I have borders, I can't use a percentage value for the borders or the widths, because I can't properly estimate how much of the percentage it will be.
Now, I know I don't have to use percentage values, but what I would ideally prefer is that the first button is the smallest possible size necessary for all the other buttons to fit properly, meaning that if I have 950px and 6 links, the first link can be about 150px while the others are 160px... that's fine. I want all the other buttons on the navbar to be equally sized, regardless of how many links there are.
I also need for it to accept a border... I figure the way to do this is to put a border in the nested div, so that way it doesn't effect the overall width of the button? This is all well and good, but I'm still plagued by the issue of not being able to design a dynamic site using the style I want if I can't get all the nav buttons to fit the width properly.
Are there some js tricks I could use? I don't even know...
Thanks
Edit: Here is my demo fiddle
A pure CSS solution, based on justification of the links, though still as semantic list items:
See demo fiddle.
Tested on W7 in IE7, IE8, IE9, Chrome 12, SafariWin 5, Opera 11, FF 4.
Update:
Concerning the width: Since you dynamically inject the navigation links into the HTML page, it likely is also possible to classify the navigation bar style.
See updated fiddle.
Here's a solution with jQuery
http://jsfiddle.net/pxfunc/kKJcr/
The menu is dynamically sized based on number of menu items and the width of the nav ul
var $nav = $('#nav');
var formatNav = function() {
var menuItemCount = $nav.children().length,
// base width
menuItemWidth = $nav.children().width(),
// border + padding + margin + base width of the menu item
menuItemOuterWidth = $nav.children().outerWidth(true),
// border + padding + margin only for the menuItem
menuItemDiff = menuItemOuterWidth - menuItemWidth,
// menu item container width (the <ul>)
navWidth = $nav.width();
$nav.children().width(Math.round(navWidth / menuItemCount) - menuItemDiff);
};
I did something like this at a previous job, but it did require a blend of JS and CSS.
One way to do it with JS - you need to simply take the total width of the navbar (minus padding, borders, etc, of course) and divide the number of buttons shown - then dump that out as the css width:width/numbOfbuttons%; on each button.
Just be careful not to hit exactly 100% cause this may cause wrap.
However - ideally (and the way we did it) this is much easier if you have a known number of potential buttons, or combinations.
Then, the solution is to set up a series of css classes designed to each scenario:
.oneButt a{width:widthThatLooksNotStupid%;}
.twoButt a{width:49%;}
/* etc */
And then just have the JS evaluate and set the specially designed class on the parent. Yeah..this requires a bit more CSS writing, and requires that you don't have an infinite number of potentials...
.ninehundredsevetyfiveButt a {width:FFFF;}
.ninehundredsevetysixButt a {width:UUUUU;}
...right. BUT - you get to set up a nice styling that actually fits various scenarios.
UPDATE from my comment below. Use general uh...classes...of situations, and apply these via JS:
.notEnoughToFillSpaceCruizer {width:wide;}
.enoughToFillSpaceCruizer {width:notAsWide;}
.jekPorkins {color:fuschia; font-size:99em; content:"You've got a problem..."; /* the user has failed, administer punishment*/}
Maybe you should question your design of trying to fit a dynamic number of buttons onto single row. I think the best design for you is a drop down navigator (like a window menu). That way it doesn't matter how many nav options the users adds, the design is still useable.
If you simply must have a nav bar with no drop downs, the short answer is to use a <table> if you need to support older browsers. At least a table will not wrap, but at some point the design of your site will look awful if it's squashed too much.
I'm sure there could CSS3 answers but I dont know them.