serge
serge

Reputation: 1609

Nifty GUI "onClickRepeat" not working in "controlDefinition" in JME3

I'm trying to make an image button in Nifty GUI in JME3 but my interact events are not working. I'm running my app in android. The button seem to be drawing but the events are not working.

Here is my control:

<?xml version="1.0" encoding="UTF-8"?>
<nifty-controls xmlns="http://nifty-gui.sourceforge.net/nifty-1.3.xsd" 
            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
            xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd">
<controlDefinition name="ddButton" 
                   controller="com.myapp.gui.ButtonController">
    <panel id="bPanel" childLayout="overlay" focusable="true" 
           visibleToMouse="true" width="$width" heigth="$height">
        <interact onClickRepeat="buttonDown()" onRelease="buttonUp()" />
        <image id="img-1" name="image-1" filename="Interface/res/button.png" 
               imageMode="resize:0,255,0,0,0,255,0,101,0,255,0,0" visibleToMouse="false" 
               width="100%" heigth="100%"/>
        <image id="img-2" name="image-2" filename="Interface/res/button-pressed.png" 
               imageMode="resize:0,255,0,0,0,255,0,101,0,255,0,0" visibleToMouse="false" 
               width="100%" heigth="100%"/>
        <text id="test" name="text" font="Interface/Fonts/MinionPro.fnt" 
              color="#000f" text="$text" align="center" valign="center" 
              width="80%" heigth="80%" visibleToMouse="false"/>
    </panel>
</controlDefinition>
</nifty-controls>

Here is my controller:

package com.myapp.gui;

import de.lessvoid.nifty.Nifty;
import de.lessvoid.nifty.controls.Controller;
import de.lessvoid.nifty.controls.FocusHandler;
import de.lessvoid.nifty.elements.Element;
import de.lessvoid.nifty.elements.render.ImageRenderer;
import de.lessvoid.nifty.input.NiftyInputEvent;
import de.lessvoid.nifty.render.NiftyImage;
import de.lessvoid.nifty.screen.Screen;
import de.lessvoid.xml.xpp3.Attributes;
import java.util.Properties;

/**
 *
 * @author Paul
 */
public class ButtonController implements Controller {

    private Element img1;
    private Element img2;

    @Override
    public void bind(
            final Nifty nifty,
            final Screen screen,
            final Element element,
            final Properties parameter,
            final Attributes controlDefinitionAttributes) {
        img1 = element.getElements().get(0);
        img2 = element.getElements().get(1);
    }

    @Override
    public void init(Properties prprts, Attributes atrbts) {
    }

    @Override
    public void onStartScreen() {
        img1.show();
        img2.hide();
    }

    @Override
    public void onFocus(final boolean getFocus) {
    }

    @Override
    public boolean inputEvent(NiftyInputEvent inputEvent) {
        return false;
    }

    public void buttonDown() {
        img1.hide();
        img2.show();
    }

    public void buttonUp() {
        img1.show();
        img2.hide();
    }
}

Here is my screen:

<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns="http://nifty-gui.sourceforge.net/nifty-1.3.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd">
    <useStyles filename="nifty-default-styles.xml" />
    <useControls filename="Interface/custom-controls.xml" />

    <!-- +++++++++++++++++++++++++++++++++++++++ -->
    <!-- start screen -->
    <!-- +++++++++++++++++++++++++++++++++++++++ -->
    <screen id="start" controller="com.myapp.Main">
        <layer id="back" childLayout="center">
            <panel id="panel" height="100%" width="100%" align="center" valign="center" 
                   childLayout="horizontal" visibleToMouse="true">
            <image filename="Interface/res/DD_Main.png"     imageMode="resize:0,1900,0,0,0,1900,0,1080,0,1900,0,0" height="100%"     width="100%"></image>
            </panel>
        </layer>
        <layer id="layer" childLayout="center">
            <panel id="panel" height="100%" width="100%" align="center" valign="center" 
                   childLayout="horizontal" visibleToMouse="true">
                <panel height="100%" width="30%" childLayout="vertical">
                    <panel height="39%" width="100%" childLayout="center"></panel>
                    <panel height="10%" width="100%" childLayout="center">
                        <control id="ddButton1" name="ddButton" text="Test" width="70%" visibleToMouse="true"/>
                    </panel>
                    <panel height="1%" width="100%" childLayout="center">    </panel>
                    <panel height="10%" width="100%" childLayout="center">
                        <interact onClick="quit()"/>
                        <effect>
                            <onStartScreen name="move" mode="in" direction="top" 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"/>
                        </effect>
                        <text id="text" font="Interface/Fonts/SegoeScript.fnt" color="#000f" text="Hello World!" align="center" valign="center" />
                    </panel>
                    <panel height="40%" width="100%" childLayout="center"></panel>
                </panel>      
                <panel height="100%" width="70%" childLayout="center">    </panel>      
            </panel>
        </layer>
    </screen>
</nifty>

And my app:

package com.myapp;

import com.jme3.app.SimpleApplication;
import com.jme3.material.Material;
import com.jme3.math.ColorRGBA;
import com.jme3.niftygui.NiftyJmeDisplay;
import com.jme3.renderer.RenderManager;
import com.jme3.scene.Geometry;
import com.jme3.scene.shape.Box;

import de.lessvoid.nifty.Nifty;
import de.lessvoid.nifty.screen.Screen;
import de.lessvoid.nifty.screen.ScreenController;

/**
 * test
 *
 * @author Serge
 */
public class Main extends SimpleApplication implements ScreenController {

    private Nifty nifty;

    public static void main(String[] args) {
        Main app = new Main();
        app.start();
    }

    @Override
    public void simpleInitApp() {

        Box b = new Box(1, 1, 1);
        Geometry geom = new Geometry("Box", b);

        Material mat = new Material(assetManager, "Common/MatDefs/Misc/Unshaded.j3md");
        mat.setColor("Color", ColorRGBA.Blue);
        geom.setMaterial(mat);

        rootNode.attachChild(geom);

        NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(assetManager,
            inputManager,
            audioRenderer,
            guiViewPort);
        nifty = niftyDisplay.getNifty();

        nifty.setDebugOptionPanelColors(false);

        nifty.fromXml("Interface/screens.xml", "start", this);

        // attach the nifty display to the gui view port as a processor
        guiViewPort.addProcessor(niftyDisplay);

        // disable the fly cam
//        flyCam.setEnabled(false);
//        flyCam.setDragToRotate(true);
        inputManager.setCursorVisible(true);

    }

    @Override
    public void simpleUpdate(float tpf) {
        //TODO: add update code
    }

    @Override
    public void simpleRender(RenderManager rm) {
        //TODO: add render code
    }

    public void bind(Nifty nifty, Screen screen) {
        System.out.println("bind( " + screen.getScreenId() + ")");
    }

    public void onStartScreen() {
        System.out.println("onStartScreen");
    }

    public void onEndScreen() {
        System.out.println("onEndScreen");
    }

    public void buttonDown() {
        System.out.println("buttonDown");
    }

}

There are very few examples of making Nifty GUI controls out there, please help me out.

EDIT

So far I figured out if I do this

flyCam.setEnabled(false);
flyCam.setDragToRotate(false);

I receive the events in my controller but still can not get onClick in the app

Upvotes: 1

Views: 243

Answers (1)

reden
reden

Reputation: 1003

A bit rusty on the nifty stuff, so this may not be the answer, but maybe it helps. See if the interact tag only works in the context of

<control id="ddButton1" name="ddButton" text="Test" width="70%" visibleToMouse="true">
    <interact ...>
</control>

Looking at the nifty-button.xml it seems to be using an inputMapping tag. So maybe it's not so straight forward to make your custom button.

Otherwise you could try the pattern with event subscribers: @NiftyEventSubscriber(id="ddButton1") onButtonDown(final String topic,final ButtonClickedEvent event){ in the controller

I've found the nifty-gui wiki to be quiet resourceful when it comes to controls: https://github.com/void256/nifty-gui/wiki/Controls Also, looking at the source code examples has given a lot.

Good luck

Upvotes: 0

Related Questions