I work in java Scenebuilder and I need to change shape of my button,
How can I do that. I can choose properties -> -fx-shape -> then what are the options to choose, I don't have drop down menu
There are no options. You need to come up with a string containing a SVG path on your own.
JavaFX CSS Reference Guide, -fx-shape property of Region:
Value: "<string>"
Default: null
Comments: An SVG path string.
By specifying a shape here the region takes on that shape instead of a
rectangle or rounded rectangle. The syntax of this path string is
specified in [3].
[...]
[3] SVG Paths: http://www.w3.org/TR/SVG/paths.html
An example path would e.g. be
-fx-shape: "M0,0 H100 V100 H0 Z";
For a square (which could be stretched to a rectangle based on the node size size/scaleShape property)
Related
I want to make a button with a shape of svg format and i have written the CSS code below:
.button {
-fx-background-color: #44c553;
-size: 100px;
-fx-min-height: -size;
-fx-min-width: -size;
-fx-max-height: -size;
-fx-max-width: -size;
-fx-shape: "m207.10955,279.95363l101.61276,-154.83848l101.61276,154.83848l-203.22552,0z" ;
}
the problem is that when i hover mouse on button i can press it from outside of its shape because the button borders are still rectangular. how can i make the button not clickable from outside of its shape?
Node has the pickOnBounds property:
Defines how the picking computation is done for this node when triggered by a MouseEvent or a contains function call. If pickOnBounds is true, then picking is computed by intersecting with the bounds of this node, else picking is computed by intersecting with the geometric shape of this node.
This property has a default value of false, which is what you want. However, the Region class sets this property to true in its only constructor:
Creates a new Region with an empty Background and and empty Border. The Region defaults to having pickOnBounds set to true, meaning that any pick (mouse picking or touch picking etc) that occurs within the bounds in local of the Region will return true, regardless of whether the Region is filled or transparent.
Since Button is a subclass of Region it also has its pickOnBounds property set to true. In order to have the behavior you want you'll need to set this property back to false. Unfortunately, pickOnBounds doesn't seem settable from CSS; meaning you'll need to set it from code or FXML.
I'm using Qt3D with a combination of this offscreen renderer and modified the framegraph to include a background image, like here.
Unfortunately, adding transparency to the objects drawn over the background image using QPhongAlphaMaterial only works unsatisfactorily.
This is th result:
What you can't see here is that the whole circle part is actually transparent, i.e. the renderer wrote the transparency value of the object for the whole pixel instead of adding it transparently on top of the background.
This is what the rendered object looks like wihtout transparency:
And this is the background:
The framegraph has two branches: one for the backgroun image, which is processed first, and one for the objects. I added a QRenderStateSet for the objects that contains a QBlendEquation with the blend function set to add and a QBlendEquationArguments with source RGB and alpha set to 1, and destination RGB and alpha set to 1 minus source alpha.
Any ideas how to fix this problem?
(For anyone wondering, I took the images from the T-Less dataset and wrote a program to create ground-truth data for 6D pose estimation)
Similarly to this question, the format of the texture that is being rendered to needs to be set to RGB8_UNorm and not RGBA8_UNorm, i.e. without the alpha channel.
I am very new to UI Automation and using Inspect tool (Inspect.exe Microsoft tool), so please explain.
I have a UWP application showing a list view, each list view item looks like this
The little circle in Image block above is the InteriorColor Image that is a solid color circle (black, gray or brown).
If I use Inspect.exe tool and hover over the little circle InteriorColor Image, it shows AutomationId = InteriorColorIcon which is the name I give it in my XAML:
<Image x:Name="InteriorColorIcon" Source="{Binding InteriorColor, Converter={Static Resource InteriorColorImageConverter}"
Above, bindable property InteriorColor is of string type and I use a converter to convert that string into the image of correct color.
So, if InteriorColor == "black", my converter returns resource image Black.png like:
return new BitmapImage(new Uri("ms-appx:///Black.png"));
I would like to write UI Automation to detect if the little circle InteriorColorIcon image is the image of correct color. If I hover over the image in Inspect.exe tool, it shows its AutomationId = InteriorColorIcon, that is great.
But how do I confirm that the image is Black, or Gray, or Brown?
Is there a way to add somehow a property to the image in XAML that Inspect tool can see and that I can use in my UI test to verify that the image showing is the correct image?
I assume that detecting color would be difficult, but is there a way to add a string property or something along these lines that could be used for this purpose?
Always set the AutomationProperties.Name for an Image. This is necessary for your Image to be read correctly from a screen reader. The Automation Name being "InteriorColorIcon" is an accessibility bug in your app. It should be something more descriptive, such as "Black image" (or whatever a black image indicates). Similarly, you can set the AutomationProperties.AutomationId to something useful to your testing.
See Expose basic accessibility information
<Image x:Name="InteriorColorIcon"
AutomationProperties.Id="{Binding InteriorColor}"
AutomationProperties.Name="{Binding InteriorColor}, Converter={Static Resource InteriorColorDescriptiveNameConverter}"
Source="{Binding InteriorColor, Converter={Static Resource InteriorColorImageConverter}"
If you want to check the actual image then that's more difficult. You'll need to screencapture the Image's location (see UIA_BoundingRectanglePropertyId) and then compare the pixels of the capture with your reference image.
I'm trying to display images instead of nodes using Cytoscape.js to create a network diagram, but I haven't had any success yet. I started with the Images and breadthfirst example (https://gist.github.com/maxkfranz/aedff159b0df05ccfaa5), but there are a couple key things I would like to change.
For starters, I'd like to display an image only instead of a node. The above example displays a circle node with an image inside it. Is there any way to make the node completely transparent, and just let the image show through? I just want to see my vector icon images. When I delete all style properties for my node selector except width and height, I still see a circle constraining my image. I just want to see my image.
Next, I'd like to use something on the element data to decide what image to use instead of the #nodeId mechanism in the example above.
.selector('#order-db')
.css({
'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
})
Using a unique selector for each id is not very scalable or easy to modify. I'd prefer a declarative approach where a property on the data element determines which image to display. I tried using the "classes" property on an element, and I added a "shape-database" value to it. Here is how the class is defined...
.shape-database {
width: 95px;
height: 95px;
/*background: url('images/network-icons.jpg') 0px -95px;*/
background: url('images/database-5-med.png');
}
I then tested that the "shape-database" class was working by adding a simple div to the page, and the class is working properly on a normal div. The cyto node I added the classes property to does not display the background image. It's as if the class was not applied to the node, or else the node is blocking the image somehow. This is with the exact same code I was using above, with all the node selector css properties removed except width and height, and the #order-db css selector removed. I just see a grey circle for the node.
When the classes property on the element didn't work, I even tried the following to no avail...
cy.$('#order-db').addClass('shape-database');
Any thoughts on what I'm doing wrong? A link to an example displaying just images instead of nodes would help as well.
Displaying an image instead of a node:
The key here was in hiding the node background and border completely, so that the background image alone shows through. The key to accomplishing that is through "background-opacity" and "border-opacity" (or "border-width") on the style objects. I added an image property (value is an img src) to the data object for each element that I wanted to swap out with an image, as well as the following style.
{
selector: 'node[image]',
style: {
'background-image': 'data(image)', // specify some image
'background-opacity': 0, // do not show the bg colour
'border-width': 0, // no border that would increase node size
'background-clip': 'none' // let image go beyond node shape (also better performance)
}
}
This also satisfied my requirement to use the element data to designate which elements are to be replaced with images and which images to use, instead of hard-coding a unique style and image for each element id.
I never got the classes data property to have any effect whatsoever on the background-image of a node. Perhaps there's a bug there.
Hopefully, this will help someone in the future because it was not obvious to me that background-opacity etc. made the entire node invisible. From the documentation, it sounded like it affected the node's background. Knowing that I was altering the background image for the node caused me quite a bit of confusion around nodes and backgrounds. I'm still quite fuzzy on all the layers and how they interact, but the above works and is better in my opinion than the image example given on the cytoscape site.
Recently I worked in a project using Flex. Its a Photo editing project. I have took a Canvas and take a image in that canvas using the code canvas.addChild(image) . Now i can move the image freely by using moving code. The image move inside the canvas and outside the canvas. I want to move the image/child only inside the canvas not outside. How can i do this?
There are two ways to do this:
Bounding Rectangle
Scroll Rectangle (or Mask)
Assuming your "moving code" is something like an Event.ENTER_FRAME handler initialized onClick, you want to make it so the image can't leave the bounds of the parent Canvas.
The first case (bounding rectangle) will allow you to drag the image within the retangle but you will always be able to see the whole image. This is how Image croppers work.
To create a bounding rectangle, you'll have to write a fairly detailed method, but the idea behind it is simple. Just get the bounding rectangle from the canvas, and don't let the image.x go below 0 and don't let image.x + image.width go beyond canvas.width. Same with height. Here's a sample Image Cropper in Flex (and the source). Check out how they did it for details.
The second case (scroll rectangle) would allow you to create more of a pan/zoom like container like you see on this Flex Pan/Zoom Map (here's the source). Also, the large image in the Flex Image Cropper on the right is an example of this second case, but they don't have the dragging. That requires that you manipulate the position of the scrollRect property on the canvas. The scrollRect property is a flash.geom.Rectangle defining the Canvas' "viewport". You then change/update the verticalScrollPosition and horizontalScrollPosition properties, so it's backwards (compared to the Bounding Rectangle).
I think if you set clipAndEnableScrolling to true on the canvas, and you drag a child image around inside of it (and image.includeInLayout = true), it should clip the image to only show up inside the canvas. But I'm guessing you want case 1. Just search those properties and you'll find some good examples on google.
Good luck, should be a fun project.
Lance