Reputation: 1609
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
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