How is the -fx-background-insets value evaluated if the node's shape is not rectangle, i.e. there are no -meaningful- top-right-bottom-left sides? (The question also arises for -fx-border-width etc.)
What I am trying to achieve is to have a Pane having triangle shape with different border widths on each side.
.triangle-pane {
-fx-background-color: outer-color, inner-color;
-fx-shape: "M 0 4 L 10 1 L 10 7 z";
-fx-background-insets: 0, ?; // what to write here?
}
If I write a single value, it works as expected. If I write more, it behaves weird. I could not figure it out. Any help is appreciated.
Related
I'm trying to remove the border glow (please see screenshot below) that appears by default when a JavaFX button is selected:
I also want to do this using CSS, and not declaratively from within the main JavaFX script. However, I am having trouble figuring out what CSS property I need to use (er, set to 0?) in order to remove that border.
To remove the focus ring display from any control from within code:
control.setStyle("-fx-focus-color: transparent;");
To remove the focus ring for all controls, apply a stylesheet:
.root { -fx-focus-color: transparent; }
To only remove the ring for all buttons, use:
.button { -fx-focus-color: transparent; }
I find the -fx-focus-color attribute setting more straight-forward than relying on some weird combination of insets to remove the focus ring.
In addition, you can use the same setting to change the focus ring to a different color, such as -fx-focus-color: firebrick.
Update Jan 20, 2015
JavaFX 8 shipped with a new default user agent stylesheet (modena). This new user agent stylesheet shipped with an additional setting for focus highlights: -fx-faint-focus-color. For Java 8 applications, it is necessary to set both -fx-focus-color and -fx-faint-focus-color to transparent to remove all traces of the focus ring. See good4m's answer to this question.
Update Dec 10, 2015
If you only set the focus colors to transparent as previously recommended in this answer, for some controls you may see some subtle differentiation between when a control is focused and when it is not. For many applications this will not be an issue and setting the focus colors to transparent will be sufficient.
For more information and alternate solutions, review James_D's answer to Remove blue frame from JavaFX input field and Jens Deter's blog post about How to get rid of focus highlighting in JavaFX. Be aware that the link to Jens Deter's blog unfortunately has some annoying pop-ups.
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
There is several way to do this. You can try any of this.
button.setStyle("-fx-focus-color: transparent;");
or
.button{
-fx-focus-color: transparent;
}
or
.button:focused{
-fx-focus-color: transparent;
}
If you want to remove this focus ring in JavaFX 8, rewrite the :focus selector with the .button selector style from modena.css.
.button:focused {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5, 4, 3;
}
The answer from Stelios Adamantidis is correct, which is
.button:focused {
-fx-background-insets: 0, 0, 1, 2;
}
Here is my explanation:
For example the definition
-fx-background-color: red, green, deepskyblue, blue;
seems to define four layers of background colors, with red as the color for the backmost layer.
For example the definition
-fx-background-radius: 0, 1, 4, 10;
sets the radius for all corners for each color layer. Here, the red layer has all corners with the radius of 0, the green layer has all corners with the radius of 1 and so on.
For example the definition
-fx-background-insets: -10, 0, 3, 5;
sets the padding for the color layers. You can also set negative values then the color will be around the control.
The default values for a button seem to be something like this:
.button:focused {
-fx-background-color: <blueGlowingColor>, <?>, <?>, linear-gradient(to bottom, <?>, <?>);
-fx-background-insets: -1, 0, 1, 2;
}
Setting the first value of insets to 0 hides the glowing color behind the second color.
More about JavaFX CSS you can find here:
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
To completely disable this button selecting do:
button.setFocusTraversable(false);
It's much cleaner than editing in css.
I want to add two strokes of two different colors around d3 circle.
I have code for adding blue colored stroke around the circle. I want to edit this stroke, so that I may have two different strokes (say red and blue) around circle.
I need to use setting up of stroke using style only.
svg.append("circle")
.attr("r", function (d) {
return (5);
}).style("stroke", function (d, i) {
return "blue";
})
I have this three js scene: http://codepen.io/giorgiomartini/pen/ZWLWgX
The scene contains 5 things:
Camera - Not Visible
origen (3D vector) - At 0,0,0.
objOne - Green
objParent - Red
CenterOfscene - Blue
objOne is a child of objParent. And ObjOne looksAt origen, which is a 3d vector at 0,0,0.
But the objOne instead of looking at the 0,0,0. where the origin vector is, It looks at objParent....?
Got any ideas?
What i want is the objOne to look at the 0,0,0. Which is the origen vector.
Any ideas why this is misbehaving? thanks.
THREE.SceneUtils.detach( objOne, objParent, scene );
THREE.SceneUtils.attach( objOne, scene, objParent );
var origen = new THREE.Vector3( 0, 0, 0 );
var render = function () {
objOne.lookAt(origen);
requestAnimationFrame( render );
xOffset += 0.01;
yOffset += 0.011;
zOffset += 0.012;
xOffsetParent += 0.0011;
yOffsetParent += 0.0013;
zOffsetParent += 0.0012;
camXPos = centeredNoise(-1,1,xOffset);
camYPos = centeredNoise(-1,1,yOffset);
camZPos = centeredNoise(-1,1,zOffset);
objOne.position.x = camXPos*4;
objOne.position.y = camYPos*4;
objOne.position.z = camZPos*4;
camParentXPos = centeredNoise(-1,1,xOffsetParent);
camParentYPos = centeredNoise(-1,1,yOffsetParent);
camParentZPos = centeredNoise(-1,1,zOffsetParent);
objParent.position.x = camParentXPos*10;
objParent.position.y = camParentYPos*10;
objParent.position.z = camParentZPos*10;
renderer.render(scene, camera);
};
render();
Object3D.lookAt() does not support objects with rotated and/or translated parent(s).
Your work-around is to (1) add the child as a child of the scene, instead, and (2) replace the child object with a dummy Object3D, which, as a child of the parent object, will move with the parent.
Then, in your render loop,
child.position.setFromMatrixPosition( dummy.matrixWorld );
child.lookAt( origin );
three.js r.75
Here is the corrected codepen:
http://codepen.io/anon/pen/oxGpPQ?editors=0010
Now the green disk rides around its parent (the red sphere) all while looking at the blue disk (or the 'origen' vector).
Uncomment lines 163 and 164 to make the camera be at the green disk's location and have the camera also look at the blue disk ('origen' vector) while it orbits its parent red sphere.
How I accomplished this is:
1. make parent Red Mesh
2. make dummyChild Object3D (this is an invisible math object)
3. make child Green Mesh
4. make origen centerOfScene Blue Mesh
5. attach parent, child, and centerOfScene mesh to Scene (not dummyChild though)
6. attach dummyChild to parent like so: parent.add(dummyChild);
In render function:
1. Move parent around with noise function (which offsets dummyChild)
2. Move dummyChild with another noise function (which revolves around its parent position, the center of dummyChild's world is its red parent's position)
3. Stick the green child mesh wherever the invisible dummyChild is. But since dummyChild is offset by red parent, we need to get it's world coordinates in relation to Scene, not its coordinates in red's world, so we use
child.setFromMatrixPosition(dummyChild.matrixWorld);
Notice its matrixWorld and not matrix - matrix holds its local system and matrixWorld holds its coordinated relative to the Scene or World coordinate system.
4. Use lookAt to make the green child disk 'lookAt' the blue centerOfScene Mesh which is at the origen vector or the center of the Scene.
Hope this helps! :)
I have to draw multiple lines using javafx line chart. Since one line can overlap other lines. I want to use dashed line or line with different thickness to represent each line.
Below is my code snippet:-
for (XYChart.Series<Number, Number> s : chart.getData()) {
// Used for Line color
if (("Current Threshold").equals(s.getName())) {
s.getNode().setStyle(" -fx-stroke-width: 10; ");
s.getNode().setStyle("-fx-stroke: #00FF00; ");
s.getNode().setStyle("-fx-stroke-dash-array: 2 12 12 2; ");
}
else if(some condition)
{
// Some other condition to draw other lines
}
}
where chart is instance of LineChart.
Node.setStyle() methods override each other. I am unable to set multiple style together. Last style persists and others are overridden. ie for above sequence, dashed line is drawn. I am using css styles in java code.
Is there any way to apply multiple style, without overriding others.
Thanks
Node.setStyle() is, as the name should suggest, a setter method for the style attribute of a JavaFX Node.
By calling this method three times in a row, only the last invocation has an effect as the previous ones get overwritten.
So if you want to apply all three styles you should write:
node.setStyle("-fx-stroke-width: 10; -fx-stroke: #00FF00; -fx-stroke-dash-array: 2 12 12 2;");
Or even better, use a CSS File, see this answer for further reference: JavaFX Text styling for dynamic objects
I am currently studying a module in computer vision called edge detection.
I am trying to understand the meaning of gradient orientation and gradient magnitude.
As explained by Dima in his answer, you should be familiar with the mathematical concept of gradient in order to better understand the gradient in the field of image processing.
My answer is based on the answer of mevatron to this question.
Here you find a simple initial image of a white disk on a black background:
you can compute an approximation of the gradient of this image. As Dima explained in his answer, you have two component of the gradient, an horizontal and a vertical component.
The following images shows you the horizontal component:
it shows how much the gray levels in your image change in the horizontal direction (it is the direction of positive x, scanning the image from left to right), this change is "encoded" in the grey level of the image of the horizontal component: the mean grey level means no change, the bright levels mean change from a dark value to a bright value, the dark levels mean a change from a bright value to a dark value. So, in the above image you see the brighter value in the left part of the circle because it is in the left part of the initial image that you have the black to white transition that gives you the left edge of the disk; similarly, in the above image you see the darker value in the right part of the circle because it is in the right part of the initial image that you have the white to black transition that gives you the right edge of the disk. In the above image, the inner part of the disk and the background are at a mean grey level because there is no change inside the disk and in the background.
We can make analogous observations for the vertical component, it shows how the image change in the vertical direction, i.e. scanning the image from the top to the bottom:
You can now combine the two components in order to get the magnitude of the gradient and the orientation of the gradient.
The following image is the magnitude of the gradient:
Again, in the above image the change in initial image is encoded in the gray level: here you see that white means an high change in the initial image while black means no change at all.
So, when you look at the image of the magnitude of the gradient you can say "if the image is bright it means a big change in the initial image; if it is dark it means no change or very llittle change".
The following image is the orientation of the gradient:
In the above image the orientation is again encoded as gray levels: you can think at the orientation as the angle of an arrow pointing from the the dark part of the image to the bright part of the image; the angle is referred to an xy frame where the x runs from left to right while the y runs from top to bottom. In the above image you see all the grey level from the black (zero degree) to the white (360 degree). We can encode the information with color:
in the above image the information is encode in this way:
red: the angle is between 0 and 90 degree
cyan: the angle is between 90 and 180 degree
green: the angle is between 180 and 270 degree
yellow: the angle is between 270 and 360 degree
Here it is the C++ OpenCV code for producing the above images.
Pay attention to the fact that, for the computation of the orientation, I use the function cv::phase which, as explained in the doc, gives an angle of 0 when both the vertical component and the horizontal component of the gradient are zero; that may be convenient but from a mathematical point of view is plainly wrong because when both components are zero the orientation is not defined and the only meaningful value for an orientation kept in a floating-point C++ type is a NaN.
It is plainly wrong because a 0 degree orientation, for example, is already related to an horizontal edge and it cannot be used to represent something else like a region with no edges and so a region where orientation is meaningless.
// original code by https://stackoverflow.com/users/951860/mevatron
// see https://stackoverflow.com/a/11157426/15485
// https://stackoverflow.com/users/15485/uvts-cvs added the code for saving x and y gradient component
#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>
#include <opencv2/imgproc/imgproc.hpp>
#include <iostream>
#include <vector>
using namespace cv;
using namespace std;
Mat mat2gray(const cv::Mat& src)
{
Mat dst;
normalize(src, dst, 0.0, 255.0, cv::NORM_MINMAX, CV_8U);
return dst;
}
Mat orientationMap(const cv::Mat& mag, const cv::Mat& ori, double thresh = 1.0)
{
Mat oriMap = Mat::zeros(ori.size(), CV_8UC3);
Vec3b red(0, 0, 255);
Vec3b cyan(255, 255, 0);
Vec3b green(0, 255, 0);
Vec3b yellow(0, 255, 255);
for(int i = 0; i < mag.rows*mag.cols; i++)
{
float* magPixel = reinterpret_cast<float*>(mag.data + i*sizeof(float));
if(*magPixel > thresh)
{
float* oriPixel = reinterpret_cast<float*>(ori.data + i*sizeof(float));
Vec3b* mapPixel = reinterpret_cast<Vec3b*>(oriMap.data + i*3*sizeof(char));
if(*oriPixel < 90.0)
*mapPixel = red;
else if(*oriPixel >= 90.0 && *oriPixel < 180.0)
*mapPixel = cyan;
else if(*oriPixel >= 180.0 && *oriPixel < 270.0)
*mapPixel = green;
else if(*oriPixel >= 270.0 && *oriPixel < 360.0)
*mapPixel = yellow;
}
}
return oriMap;
}
int main(int argc, char* argv[])
{
Mat image = Mat::zeros(Size(320, 240), CV_8UC1);
circle(image, Point(160, 120), 80, Scalar(255, 255, 255), -1, CV_AA);
imshow("original", image);
Mat Sx;
Sobel(image, Sx, CV_32F, 1, 0, 3);
Mat Sy;
Sobel(image, Sy, CV_32F, 0, 1, 3);
Mat mag, ori;
magnitude(Sx, Sy, mag);
phase(Sx, Sy, ori, true);
Mat oriMap = orientationMap(mag, ori, 1.0);
imshow("x", mat2gray(Sx));
imshow("y", mat2gray(Sy));
imwrite("hor.png",mat2gray(Sx));
imwrite("ver.png",mat2gray(Sy));
imshow("magnitude", mat2gray(mag));
imshow("orientation", mat2gray(ori));
imshow("orientation map", oriMap);
waitKey();
return 0;
}
The gradient of a function of two variables x, y is a vector of the partial derivatives in the x and y direction. So if your function is f(x,y), the gradient is the vector (f_x, f_y). An image is a discrete function of (x,y), so you can also talk about the gradient of an image.
The gradient of the image has two components: the x-derivative and the y-derivative. So, you can think of it as vectors (f_x, f_y) defined at each pixel. These vectors have a direction atan(f_y / fx) and a magnitude sqrt(f_x^2 + f_y^2). So, you can represent the gradient of an image either an x-derivative image and a y-derivative image, or as direction image and a magnitude image.