Nifty Custom Control Trouble

Troubleshooting gui
1

I’m trying to define a custom control in the screen’s xml file with this code, but when I click the control, the event will not register

  <controlDefinition style="#panel" name="slantButton"  width="100%" height="100%" visibleToMouse="true">
       <panel childLayout="center" visibleToMouse="true">
           <text text="$text" font="Interface/Fonts/FangSong.fnt" color="#000000" marginTop="-5%"/>
           <image filename="Interface/InterfaceElements/blueSlantButton.png" visibleToMouse="true">              
                <effect>
                    <onHover name="changeImage" active ="Interface/InterfaceElements/blueSlantButtonHover.png" inactive="Interface/InterfaceElements/blueSlantButton.png"/>
                </effect>
               </image> 
         </panel>
    </controlDefinition>

Additionally, If I remove the panel tag, the button registers events correctly, but it only shows the first control or element placed within the control definition tag, so in this example only the text shows and the image doesn’t appear at all.

 <controlDefinition style="#panel" name="slantButton" childLayout="center" width="100%" height="100%" visibleToMouse="true">
          
           <text text="$text" font="Interface/Fonts/FangSong.fnt" color="#000000" marginTop="-5%"/>
           <image filename="Interface/InterfaceElements/blueSlantButton.png" visibleToMouse="true">              
             <effect>
                 <onHover name="changeImage" active ="Interface/InterfaceElements/blueSlantButtonHover.png" inactive="Interface/InterfaceElements/blueSlantButton.png"/>
             </effect>
            </image> 
            
    </controlDefinition>

Any ideas what I may be doing wrong?

2

My guess would be that the panel is grabbing the mouse event since you set visibleToMouse true on it. Especially since removing it fixes the problem. Once a nifty component accepts the event it doesn’t propagate to its children.

1 Like
3

I tried every combination of visibleToMouse="true" with the controlDefinition, the panel, and control and it still doesn’t seem to make a difference :frowning:

No matter what I’ve tried, adding a panel to the control definition so I can organize the elements and see both prevents the control from being clickable.

It will still hide the text if I try to remove the text from the control definition, and instead add the text per-control like this

<control id ="findMatchButton" name="slantButton" text="Matchmaking" height="14%" width="68%" marginTop="1%" marginLeft="1.8%" visibleToMouse="true">  
     <text text="Matchmaking" font="Interface/Fonts/FangSong.fnt" color="#000000" marginTop="-5%"/>
</control>
4

Then my only other guess is that adding that panel is doing something funky and the controller for the image changes. You could attach the nifty source and step through it to see whats going on. I usually look through the source pretty heavily when nifty doesn’t do what I think it should be.

1 Like
5

It seems like it had something to do with the image tag or how I’m using it, although I can’t quite figure out what. I ran into the problem again trying to register a NiftyMouseMovedEvent with a panel that contained an image (not using a control definition) and it was only registering the event along the edges of the panel (as if the image was blocking the panel).

I just got rid of the image tag and it’s working perfectly, from now on I’m going just use the backgroundImage attribute on panels instead.

   <controlDefinition style = "panel" backgroundImage="Interface/InterfaceElements/blueSlantButton.png" name="slantButton" childLayout="center" width="100%" height="100%">
        <panel>
            <effect>
                <onHover name="changeImage" active ="Interface/InterfaceElements/blueSlantButtonHover.png" inactive="Interface/InterfaceElements/blueSlantButton.png"/>
            </effect>
            <text text="$text" font="Interface/Fonts/FangSong.fnt" color="#000000" marginTop="-5%"/>  
        </panel>
    </controlDefinition>