Clickable area over an Image (Nifty)

Question about clicking on images.

So, I create a GUI where images were the “buttons” that are supposed to move you from one screen to another. I’ve also implemented an onHover action to increase the size of the image as the mouse moves across it to the center (easy enough through nifty docs). My problem is, when I move into the panel containing it, the image starts to grow, even though I haven’t moved over the image yet. I’ve tried taking out the panel and just using the image with the effect, but the image happens to in a parallelogram shape, which I think Nifty may be using just the overall height and width as the area of clickable content. Catch my drift?

Has anyone dealt with this before and have a solution for it? While it’s not super duper bad (it’s hardly noticeable unless your looking for trouble), one of the higher ups on the project asked if I could do better.

Could I?

Can you post the xml you used? There are a few possible causes…but yes you can do better :slight_smile:

The only way I could post the xml was by taking out the brackets. So instead of doing a lot of work, i just provided to test cases, one with and one without a panel parent for the image (the images are exactly the same shape, even though they are different) Ok, the other panel didn’t copy in for some reason, so I guess I’m just asking about this image one. Anyone know why I’m having problems posting xml?

nifty xmlns=“” xmlns:xsi=“” xsi:schemaLocation=“

screen id="menu1" controller="jme3test.helloworld.TestNiftyMenu"
    layer id="background"  childLayout="vertical" 
    layer id="foreground" childLayout="absolute"
            image id = "Fight" filename= "Interface/Fight.png" width="35%" height="25%" x="10%" y="20%" visibleToMouse = "true"
                    onHover name="imageSize" maxSize="20%" 
                        hover hoverFalloffType="none" hoverWidth="100%" hoverHeight="100%" hoverFalloffConstraint="both" /                



And I realize I may have too many visibleToMouse attributes lying around :slight_smile:

Double post, sorry, but I felt this was needed to say, perhaps, for a quick solution?

By changing the hoverwidth and hoverheight to both 70% I was approximately able to achieve the “only when hovered over image” should it activate the imagesize effect.

Of course, the question is, is there a more generic approach? The way I’ve done it is picture width and height specific (or it could be the parallelogram thing) but if you had something like the JMonkey face for a certain image and wanted to make only that image grow when hovered over, how would one go about doing it? Because it sure won’t work but just adjusting the height and width for the hover constraints, due to the numerous curve and overall uneven pic.

Yes, there was a recent forum upgrade that went to a much more sophisticated backend but they are still ironing out the bugs - including posting of code/xml.
For now try putting the xml on pastebin or similar and linking to it from here.

Your visibleToMouse on the image looks fine. Why do I see two /effect things tho?

From the manual

Here is an explanation of all the available hover effect attributes: „hoverFalloffType“ one of „none“ or „linear“, Default: „none“ The falloff type to use. When being set to „none“ hover is actually disabled and „linear“ will take the linear distance between the center of the element the effect is applied to and the mouse position into account.

„hoverFalloffConstraint“ one of „none“, „vertical“, „horizontal“ or „both“,
Default: „none“
You can constraint the falloff of the hover effect to only „vertical“ or only „horizontal“ which
means that only the specified axis is being taken into account. With „none“ the falloff is disabled.

„hoverWidth“ as a Nifty SizeValue, Default: not set
You can specify the width of the hover area as a Nifty SizeValue. This means you can specify the
width as a pixel value (adding „px“ to the value) or as a percent value (adding „%“ to the value).

„hoverHeight“ as a Nifty SizeValue, Default: not set
You can specify the height of the hover area as a Nifty SizeValue. This means you can specify the
height as a pixel value (adding „px“ to the value) or as a percent value (adding „%“ to the value).

Based on that try changing the hover width and height to be the same as the element width and height (i.e. 35%, 25%)… or just not set it at all.

About the two effect things. Man, things were just getting weird while I was trying to post the xml…so here is the link to the actual one:

Okay, cool. So I tried changing the hoverwidth and hoverheights for the onHover, and it got the effect working pretty well, so we are good there.

But then, on a more theoretical basis, suppose you had a picture of a circle with a hole in the center? Is there a way to make sure the hover effect doesn’t occur over the hole, or will always occur, simply because the hole is part of that image (or is there something with transparency that can deal with this effect)?

Anyway, thanks for help on that main problem, and thank god the xml pasting issue wasn’t my computer :lol:

A circle with a hole in the center would be hard to do. For a click you could check the x/y co-ordinates of the clicked location against the formula for the inner and outer edge of the circle.For hover effects though there isn’t really anything you can do, without going in and doing your own custom effect.

Yeah, alright, I thought so. Thanks for the help zarch!

Alright, I’m back to this, cuz my partner in crime wanted to make it pretty much exact. So, my question now is, how does one go about checking the colors of the overlay nifty gui to determine when the color should be “hoverable” or not?

Unfortunately, I don’t think this is going to be possible. It would require that Nifty eval’d the contact point of the mouse pointer hotspot against the texture fragment for that pixel. Not that this would be impossible by any stretch… expensive, yes… but not impossible.

I don’t think that Nifty has anything like this available. And, honestly, I can’t remember what kind of access is available to events through Nifty… but what you’re looking to do would require you know about the eventPRIOR to Nifty and using ImagePainter’s or ImageRaster’s getPixel method to simulate fragment lookups for the pixel the mouse is currently over relative to the object/texture.

If you decide to try this… keep in mind, the pixels inside the resize borders are actual pixels of the texture… the rest is texture lookups withing the shader… meaning they could be 100 pixels, or 100th of a pixel.

If it really is a circle with a hole in the middle you could do it yourself by looking at the cursor co-ordinates and comparing it to your knowledge of the geometry of a circle … then trigger the appropriate nifty effects manually as the mouse moves on/off the circle.

Okay, so I’ve been able to do some stuff with this:

[java]public void methodWithCoordinates(int x, int y) throws AWTException {
System.out.println(x + " " + y);
Robot r = new Robot();
Color color = r.getPixelColor(x,y);
System.out.println(color.getRed() + " " + color.getBlue() + " " + color.getGreen());

It prints the coordinates correctly, but the the values for Reg, Blue, and Green are not consistent with a simple, solid background color for the layer I have put the interact in. Like, clicking on one spot in a solid orange backgroundColor may give me 240,240,240, but moving a centimeter to the left may report values of 163,160, 140. Clicking in the same place is consistent, just not across the same backgroundColor.
Is this something to do with the fact that I used Robot? I just found some code for using Robot online, I actually am not sure if this is the proper procedure for extracting the pixel from the view.