Nifty Effect Question

Troubleshooting gui
1

Hi, I have just started working with nifty GUI and have been reading about effects in the GUI 1.3.2 manual. I am making an effect where I have a panel fade from 25% opacity to 0% opacity when a mouse moves over it and from 0% back to 25% when the mouse leaves the panel. It does both of these fades over 500 ms. However, after the first fade in effect is done the panel switches back to its original state of 25% opacity (I have the panels backgroundColor set at fff4). I don’t want to use neverStopRendering=“true” because then if the user would hover over the panel again it will cause problems with the other fade in/out effect. Is there a way to have nifty actually change the attributes in these effects instead of just temporarily changing them? Thanks for the help in advance and sorry if this post is in the wrong spot for what I am asking. This is my first time posting on the forums :slight_smile:

1 Like
2

Welcome to the forum @cats00cats!

Could you please show us your (relevant) code? This might help.

The Nifty Manual is good but did you also have a look in the internet? There is a good wiki about Nifty as well and maybe you find the answer to your problem there.

In the case you can’t get it to work by XML, I would suggest doing your effect in code, but that should be the really last option.

1 Like
3

Never stop rendering means for as long as the effect is active. In this case onMouseover would last until the mouse leaves the panel and the mouseover effect ends. Its not infinite duration always.

1 Like
4

I think I see the problem. I’m not using the onMouseover effect im using the onStartHover and onEndHover effects because it might consider them always active once they start. I think this is causing my neverStopRendering’s to interfere. So for onMouseover I know that can be used in the “interact” tag. I could call a method that starts my fade in effect. However can I make it call a method once it stops doing onMouseover? If so I could just start the fade out effect in a separate method.

Here is the part of my xml file giving me trouble as of now. (Sorry for the > symbols, I was trying to display this in a fancy way and I eventually I got this but for some reason those symbols went in :expressionless:)

> <panel id="panel1" childLayout="absolute" backgroundColor="#fff4" width="10%" x="0" y="0" style="nifty-panel-simple" height="50%">
>                     <interact onClick="testEvent()"/>
>                     <effect>
>                         <onStartHover name="fade" start="#4" end="#0" length="500" neverStopRendering="true"/>
>                         <onEndHover name="fade" start="#0" end="#4" length="500" neverStopRendering="true"/> 
>                     </effect>    
>                 </panel>
1 Like
5

Interesting… I haven’t used onStartHover or onEndHover often but it looks like it does something funky with neverStopRendering compared to other effects. I was able to get what you are trying to do working by doing the following:

<panel childLayout="center" width="64px" height="64px" backgroundColor="#f004" visibleToMouse="true">
    <effect>
        <onStartHover name="fade" start="#4" end="#0" length="1000" />
        <onHover name="fade" start="#0" end="#0" length="1000" neverStopRendering="true"/>
        <onEndHover name="fade" start="#0" end="#4" length="1000" /> 
    </effect> 
</panel>
1 Like
6

That worked glh! Thanks. I have a few questions regarding this though just simply about it performing. First off is the program constantly calling the onHover effect when the mouse is over it? If so would this cause multiple onHover effects to be going on at once (and just be bad for performance)? Also, this is something that might not be able to be fixed, but since my panel is positioned at the top left of the applications screen I can hover the mouse over the panel and then leave the application and the transparency will glitch out. When I move my mouse back into the application it seems to do the onEndHover effect but then it switches back to a transparency of 0. This fixes itself when I move the mouse over the panel again. Is there anyway you know how to fix this or a part of the nifty manual that might propose a fix for this?

1 Like
7

My guess would be that nifty isn’t getting any mouse updates once the cursor leaves the window. Once you move it back into the window it does but the mouse isn’t initially inside of the element so it thinks it moved out and cancels the hover effect which then plays until it finishes even though your mouse is hovering again. You could try putting a callback on the onEndHover using the onStartEffect property that then checks to see if the mouse is over the element and canceling it. If that doesn’t work I have no idea because its not really a bug per say.

1 Like