[Nifty] Hover pulsate Effect setup in Java

Troubleshooting gui
1

Hi All,



I am trying to setup a dynamic menu in nifty, so I creating the initial components in .xml, then setting up the dynamic parts in Java. The layout is working just fine, but I wanted to add an onHover effect, but it does not appear to work at all…



Here is an image of what I am making, just for you reference ( Debug coloring is enabled… ) This shows that I correctly get the panel from the .xml and setup the buttons correctly, only the pulsate effect is missing when I hover over the buttons…

debug.png694×699
http://s18.postimage.org/elmpdxex5/debug.png



In .xml I declare the popup window. The dynamic menu 10x10 buttons are later added to the “popupPanel” in java.

[xml]

<popup id=“popupExit” childLayout=“center” backgroundColor="#000a">



<!-- Fade the background to black -->

<effect>

<onStartScreen name=“fade” start="#0" end="#f" length=“300” />

<onEndScreen name=“fade” start="#f" end="#0" length=“300” />

</effect>



<interact onClick=“closePopup()” onSecondaryClick=“closePopup()” onTertiaryClick=“closePopup()” />



<panel id=“popupPanel” height=“662” width=“662” align=“center” valign=“bottom”

backgroundColor="#333b" childLayout=“absolute” visibleToMouse=“true”>

<text id=“popupText” x=“220” y="-15px" font=“aurulent-sans-16.fnt” color="#ffff" text=“MODULE SELECTION MENU” align=“center” valign=“center”/>



<!-- Fade the panel in and out -->

<effect>

<onStartScreen name=“move” mode=“in” direction=“bottom” length=“300” startDelay=“0” inherit=“true”/>

<onEndScreen name=“move” mode=“out” direction=“bottom” length=“300” startDelay=“0” inherit=“true”/>

<!–onHover name=“pulsate” scaleFactor=“0.008” startColor="#f600" endColor="#ffff" post=“true”/–>

<onStartScreen name=“fade” start="#0" end="#f" length=“300” />

<onEndScreen name=“fade” start="#f" end="#0" length=“300” />

</effect>



</panel>

</popup>

[/xml]



In Java I do the following to setup the 10 x 10 grid and add the pulsate effect:

[java]

private void setupPopup( Element popup ){



// Get the panel

Element back = popup.findElementByName(“popupPanel”);



assert( back == null ) : “Could not find ‘popupPanel’ from .xml file!”;



// Declare the onHover effect:

final HoverEffectBuilder builder = new HoverEffectBuilder(“pulsate”){{

this.effectValue(“scaleFactor”,“0.008”);

this.effectValue(“startColor”,"#f600");

this.effectValue(“endColor”,"#ffff");

this.post( true );

}};



// Add a 10 x 10 grid on buttons.

for( int x = 0; x < 10; x++ ){

for( int y = 0; y < 10; y++ ){

final String x_pos = ( x * 66 + 2 ) + “px”;

final String y_pos = ( y * 66 + 2 ) + “px”;

Element icon = new PanelBuilder(“icon[”+x+"|"+y+"]") {{

childLayoutCenter();

valignCenter();

backgroundColor("#88f8");

x( x_pos );

y( y_pos );

height(“64px”);

width(“64px”);

onHoverEffect( builder );

}}.build( nifty, screen, back );

back.add( icon );

}

}

}

[/java]



I do get one warning in my console:

WARNING: class [jme3test.niftygui.TestNiftyGui] could not be instanziated (java.lang.ClassNotFoundException: jme3test.niftygui.TestNiftyGui)

I guess nifty is trying to use TestNiftyGui as the default controller, would that be a problem?

2

No replies, the internet is such a cold and lonely place. :frowning:



I randomly discovered a “solution” to the issue, though I do not understand why it works. If I add an interaction after adding the onHoverEffect, then it works… So basicly:



This does NOT work:

[java]

Element icon = new PanelBuilder(“icon[”+x+"|"+y+"]") {{

childLayoutCenter();

valignCenter();

backgroundColor("#88f8");

x( x_pos );

y( y_pos );

height(“64px”);

width(“64px”);

onHoverEffect( builder );

//interactOnClick(“test()”);

}}.build( nifty, screen, back );

[/java]



This DOES work:

[java]

Element icon = new PanelBuilder(“icon[”+x+"|"+y+"]") {{

childLayoutCenter();

valignCenter();

backgroundColor("#88f8");

x( x_pos );

y( y_pos );

height(“64px”);

width(“64px”);

onHoverEffect( builder );

interactOnClick(“test()”); // This has the bi-product of making the pulsate effect work…

}}.build( nifty, screen, back );

[/java]



Either I am missing some point, or there is a bug somewhere…

3

That does seem odd.

4

My only thought would be that you havnt defined what controller you are actually using.

But then again it shouldn’t be related to the issues you have.

… but then again nifty often doesnt work as you’d thought it would…

5
@perfecticus said:
My only thought would be that you havnt defined what controller you are actually using.
But then again it shouldn't be related to the issues you have.
... but then again nifty often doesnt work as you'd thought it would...


Do you mean ScreenController or de.lessvoid.nifty.controls.Controller or de.lessvoid.nifty.controls.NiftyControl... Haha. :p I have defined a custom ScreenController, now I am getting another warning in the console, not sure if I should be worried about that one:

20-08-2012 16:46:08 de.lessvoid.xml.tools.ClassHelper getInstance
WARNING: given class [test.GUI] does not implement [de.lessvoid.nifty.controls.Controller]

If I implement de.lessvoid.nifty.controls.Controller, I get this warning instead:
20-08-2012 16:49:47 de.lessvoid.xml.tools.ClassHelper getInstance
WARNING: class [test.GUI] could not be instanziated (java.lang.InstantiationException: test.GUI)

I thought a ScreenController was enough to control nifty elements? Maybe it is because popups are not considered a screens, and I am assigning a controller directly to the popup?
6

I ran into a number of problems with nifty popups, they just seemed to cause all sorts of little problems.



Try doing your tests in a normal screen not a popup.



In the end I rolled my own popups by placing a layer over the top of the screen and creating panels inside that.

7

see this feature request and especially the first comment by me

1 Like
8

Oh, that is great, and it makes a lot of sense too. Sorry I guess this wouldn’t be a problem if I was running a more current version of nifty.



Thank you for the explanation!



Cheers!