Nifty Pop up not displaying anything

[robacityleg]

I am having a problem in creating a Nifty GUI pop up menu. I have created a basic example where I click a button and it should display a pop up menu however when I click it only shows a black and white rectangle thing (not sure how to describe it, I would take a screenshot but when I do it shows a black screen) and does not show the text or image I wanted to show. Why I am unable to create a pop up menu to show simple elements like text or image, or even see a empty panel?

My xml pop up is (note it is outside the screen)-

[java]</screen>

    <popup id="niftyPopupMenu" childLayout="center"  width="80%" height="80%">
        <panel id="testPanel" width="100%" height="100%" childLayout="vertical" align="center">
            <control id="label" name="label" text="test"></control>
            <images filename="Images/default.png"></images>
        </panel>
    </popup>

</nifty>[/java]

When the button is pressed the popup() method is called, the screen controller java is as follows-

[java]
public void popup()
{
createMyPopupMenu();
nifty.showPopup(nifty.getCurrentScreen(), popup.getId(), null);
}

public void createMyPopupMenu()
{
   popup = nifty.createPopup("niftyPopupMenu");
}[/java]

[glh3586]

That id is probably conflicting with the internal nifty popup that has that same name… its possible you are displaying that and not the popup you defined. That would be my guess.

[robacityleg]

For some reason my replies keep disappearing so ill try not adding any links as I think that’s what is causing the issue.

Thanks Greg that was exactly the problem. Could you please explain what the internal nifty popup is? Also on the wiki page -Nifty GUI: create a PopUp Menu they use the id niftyPopupMenu so maybe this should be changed to avoid others having this issue?

[glh3586]

I’m not sure which wiki page you are referring to so i’m not sure if that makes sense or not. From just taking a quick glance at it… it looks like it is part of the nifty menu control. It looks like it is used in order to popup the menu. If you don’t include that control it wouldn’t be a problem.

[hello123]

Try like this example: it should work also for u
switch on the debug mode to see the panels

screen.xml
[java]
<?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://niftygui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd”>

<useStyles filename="nifty-default-styles.xml" />
<useControls filename="nifty-default-controls.xml" />
<registerSound id="myclick" filename="Sounds/GUI/ButtonClick.ogg" />

<popup id="popupQuit" childLayout="center" width="10%">
    <interact onClick="closePopup()" onSecondaryClick="closePopup()" onTertiaryClick="closePopup()"/>
    <control id="#menu" name="niftyMenu" />
</popup>

<!-- popup from the top, in the center of the screen -->
<popup id="consolePopup" childLayout="center" backgroundColor="#000a">
    <effect>
        <onStartScreen name="fade" start="#0" end="#a" length="200" inherit="true"/>
        <onEndScreen name="fade" start="#a" end="#0" length="200" startDelay="100" inherit="true"/>
    </effect>
    <panel childLayout="center" width="95%" align="center" valign="center">
        <control id="console" name="nifty-console" lines="25" align="center" valign="center">
            <effect>
                <onStartScreen name="move" direction="top" mode="in" length="200" startDelay="100" inherit="true"/>
                <onEndScreen name="move" direction="top" mode="out" length="200" startDelay="0" inherit="true"/>
            </effect>
        </control>
    </panel>
</popup>

<!-- rezise Image, mark the edges"15,x,x,x" ... and stretches it -->
<controlDefinition name = "loadingbar" controller = "com.example.game.Game" >
    <image filename="Interface/border.png" childLayout="absolute" 
       imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15" >
        <image id="progressbar" x="0" y="0" filename="Interface/inner.png" width="32px" height="100%"
       imageMode="resize:15,2,15,15,15,2,15,2,15,2,15,15" />
    </image>
</controlDefinition>

<!-- opens a popup to exit the game -->
<popup id="popupExit" childLayout="center" backgroundColor="#0001" >
    <panel style="nifty-panel" childLayout="center" height="50%" width="50%" align="center" valign="center">
        <panel childLayout="vertical" align="center" valign="center">
            <panel childLayout="center" height="50%" width="100%">
                <image filename="Interface/popupExitInfo.png" name="popupExitInfo" label="popupExitInfo" id="popupExitInfo" height="100%" width="100%" align="center" >                      
                </image>        
            </panel>
            <panel childLayout="center" height="25%" width="100%">
            </panel>
            <panel childLayout="horizontal" height="25%" align="center">
                <panel childLayout="center" height="100%" width="50%">
                    <image filename="Interface/spielBeenden.png" name="exitSpielBeenden" label="exitSpielBeenden" id="exitSpielBeenden" height="75%" width="75%" align="center" >                      
                        <interact onClick="popupExit(yes)" /> 
                        <effect>
                            <onClick name="playSound" sound="myclick"/>
                        </effect> 
                    </image>
                </panel>
                <panel childLayout="center" height="100%" width="50%">
                    <image filename="Interface/weiter.png" name="exitWeiter" label="exitWeiter" id="exitWeiter" height="75%" width="75%" align="center" >                      
                        <interact onClick="popupExit(no)" /> 
                        <effect>
                            <onClick name="playSound" sound="myclick"/>
                        </effect> 
                    </image>
                </panel>
            </panel>
        </panel>
    </panel>
</popup>

<!-- opens a Intro popup to explain the player who he is -->
<popup id="popupIntro" childLayout="center" backgroundColor="#0001" >
    <effect>
        <onStartScreen name="move" direction="right" mode="in" length="400" startDelay="250" inherit="true"/>
        <onEndScreen name="move" direction="left" mode="out" length="400" startDelay="250" inherit="true"/>
    </effect>
    <panel style="nifty-panel" childLayout="center" height="80%" width="80%" align="center" valign="center">
        <panel childLayout="vertical" align="center" valign="center">
            <panel childLayout="center" height="85%" width="100%">
                <image filename="Interface/popupIntro.png" name="introImage" id="introImage" height="100%" width="100%" align="center" >                      
                </image>        
            </panel>
            <panel childLayout="center" height="0%" width="100%">
            </panel>
            <panel childLayout="horizontal" height="15%" align="center">
                <panel childLayout="center" height="100%" width="50%">
                </panel>
                <panel childLayout="center" height="100%" width="50%">
                    <image filename="Interface/popupIntroTutorial.png" name="tutorial" id="tutorial" height="75%" width="75%" align="center" >                      
                        <interact onClick="popupTutorial(popupTutorialControls)" /> 
                        <effect>
                            <onClick name="playSound" sound="myclick"/>
                        </effect> 
                    </image>
                </panel>
            </panel>
        </panel>
    </panel>
</popup>

…
</nifty>
[/java]

[java]
@Override
public void simpleInitApp() {
app = this;
System.out.println("simpleInitApp mResults: "+Arrays.toString(mResults));
startScreenState = new StartScreenState(this);
startNifty();
bulletAppState = new BulletAppState();
stateManager.attach(bulletAppState);
//physics debugger
// bulletAppState.getPhysicsSpace().enableDebug(assetManager);
// makes statics (frames, vertices) visible on display if set to true
setDisplayFps(true);
setDisplayStatView(false);
}
[/java]

ingame call:
[java]
private void startNifty() {
niftyDisplay = new NiftyJmeDisplay(assetManager, inputManager, audioRenderer, guiViewPort);
nifty = niftyDisplay.getNifty();
validate();
// nifty.fromXml() generates a Nifty Screen out of a XML file
nifty.fromXml(“Interface/screen.xml”, “startScreen”, startScreenState);
// guiViewPort.addProcessor shows the nifty predefined object on the display
guiViewPort.addProcessor(niftyDisplay);
// colors the panels of the Nifty Screen, makes it easy to find failures
nifty.setDebugOptionPanelColors(false);
inputManager.setCursorVisible(false);
flyCam.setDragToRotate(true);
}
[/java]

[java]
public void validate() {
try{
nifty.validateXml(“Interface/screen.xml”);
}catch(Exception except){
System.out.println("Nifty, validateXml Exception: "+except);
}
}
[/java]

…
… load stuff methods
…

[java]
update loop
@Override
public void simpleUpdate(float tpf) {
// main update method
if (load) {
if (frameCount == 1) {
element = nifty.getScreen(“loadLevel”).findElementByName(“loadingtext”);
textRenderer = element.getRenderer(TextRenderer.class);
progressBarElement = nifty.getScreen(“loadLevel”).findElementByName(“progressbar”);
setProgress(0.0f, “Loading Light”);
createLight();
} else if (frameCount == 2) {
setProgress(0.16f, “Loading Terrain”);
createTerrain();
} else if (frameCount == 3) {
setProgress(0.33f, “Loading Character”);
initCharacter();
System.out.println("mResults: "+Arrays.toString(mResults));
loadStone();
} else if (frameCount == 4) {
setProgress(0.50f, “Loading Camera”);
addCameraToPlayer();
} else if (frameCount == 5) {
setProgress(0.66f, “Loading Sky”);
createSkyBox();
} else if (frameCount == 6) {
setProgress(0.83f, “Initialize Music”);
initBackgroundAudio();
setProgress(1.0f, “Starting”);
} else if (frameCount == 7) {
try {
Thread.sleep(1000);
} catch (Exception exec) {
}
nextScreen(“hud”);
nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”).disable();
nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”).hide();
load = false;
gameLoaded = true;
}
frameCount++;
System.out.println(“frameCount:” + frameCount);
}
if (gameLoaded) {
time += tpf;
if (time >= 10) {
checkPosition();
time = 0;
}
if (introScreen==true){
if (nifty.getCurrentScreen().getScreenId().matches(“hud”)){
startScreenState.pause(“popupIntro”);
introScreen=false;
}
}
if (!gameStarted) {
// checks distance player to object
checkPosition = myPlayer.getWorldTranslation();
checkPlayerPosition(object1, “kugelWelle”);
checkPlayerPosition(object2, “ebeneWelle”);
checkPlayerPosition(object3, “interferenz”);
checkPlayerPosition(object4, “eindim”);
checkPlayerPosition(object5, “gitter”);
checkPlayerPosition(object6, “kugelWelle2”);
checkPlayerPosition(object7, “ebeneWelle2”);
checkPlayerPosition(object8, “interferenz2”);
}
if (testObject!=null) {
checkPosition = myPlayer.getWorldTranslation();
if(testObject.distanceSquared(checkPosition)> 120f){
nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”).disable();
nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”).hide();
System.out.print("panel?: "+nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”));
System.out.println("panel? "+nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”).isEnabled());
testObject=null;
gameStarted=false;
System.out.println("Game can be started now: ");
}
}
}
if (mResultsChanged) {
mResultsChanged = false;
System.out.println("Game show results: " + Arrays.toString(mResults));
}
}
[/java]

[java]
private void checkPlayerPosition(Vector3f object, String activityToStart) {
if (object.distanceSquared(checkPosition)< 80f){
nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”).enable();
nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”).show();
System.out.print("panel?: "+nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”));
System.out.println("panel? "+nifty.getScreen(“hud”).findElementByName(“panelLeftTop2”).isEnabled());
this.activityToStart=activityToStart;
gameStarted = true;
testObject=object;
System.out.println("GameStarted: "+activityToStart);
}
}
[/java]

Controller:
[java]
package com.example.game;

import java.util.Properties;

import com.jme3.app.Application;
import com.jme3.app.state.AbstractAppState;
import com.jme3.app.state.AppStateManager;

import de.lessvoid.nifty.Nifty;
import de.lessvoid.nifty.controls.Controller;
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.nifty.screen.ScreenController;
import de.lessvoid.xml.xpp3.Attributes;
import java.util.Arrays;

public class StartScreenState extends AbstractAppState implements ScreenController, Controller {

private Game app;
/*
 * private NiftyJmeDisplay niftyDisplay; private Nifty nifty; private Screen
 * screen; private Element popupElement; AppStateManager stateManager;
 */
public StartScreenState(Game application) {
	app = application;
}

@Override
public void initialize(AppStateManager stateManager, Application application) {
	super.initialize(stateManager, application);
}

public void startGame() {
	app.getNifty().gotoScreen("startScreen");
}

public void quitGame(String number) {
	app.setSave(Integer.parseInt(number));
}

public void nextScreen(String name) {
	app.getNifty().gotoScreen(name);
}

public void loadGameSave(String number) {
	System.out.println("");
	System.err.println("loadGame: " + number);
	System.out.println("");
	app.setSave(Integer.parseInt(number));
	System.out.println("loadGameSave: " + number + "; " + number.getClass());
	nextScreen("loadLevel");
	app.setLoad(true);
}

public void exit() {
	// creates a new popup with 2 buttons, yes,no,
	app.setPopupElement2(app.getNifty().createPopup("popupExit"));
	app.getNifty().showPopup(app.getNifty().getCurrentScreen(), app.getPopupElement2().getId(), null);
}

public void popupExit(String action) {
	// yes-button destroys application, no-button closes popupExit popup
	System.out.println("Popup: " + action);
	if (action.equals("yes")) {
		System.out.println("StartScreenState Stop Called");
		app.stop();
	} else if (action.equals("no")) {
                    System.out.println("exit?CSFindElement: "+app.getNifty().getCurrentScreen().findElementByName("popupExit"));
                    System.out.println("exit?CSTopMostPopup: "+app.getNifty().getCurrentScreen().getTopMostPopup());
                    System.out.println("exit?CSgetLayerElemnts: "+app.getNifty().getCurrentScreen().getLayerElements());
                    System.out.println("exit?N_findPopupByName: "+app.getNifty().findPopupByName("popupExit"));
                    System.out.println("exit?N_getTopMostPopup"+app.getNifty().getTopMostPopup());
                    app.getNifty().getCurrentScreen().findElementByName("popupExit").markForRemoval();
	}
}

public void showPopupScreen(String id) {
        System.out.println("ID: "+id);
        pause(id);
}
public void popupSave(String number) {
	// click save game button, saves to chosen number, closes savepopup,
	// moves back to game
	System.out.println("Popup: " + number);
	app.setSave(Integer.parseInt(number));
	app.getNifty().closePopup(app.getPopupElement().getId());
	app.save();

// app.pauseWindow = false;
app.attachPlayerModelAndControl();
}

public void popupWeiter() {
	// click weiter button, closes popup
	app.getNifty().closePopup(app.getPopupElement().getId());

// app.getNifty().gotoScreen(“hud”);
// app.pauseWindow = false;
app.attachPlayerModelAndControl();
}

public void pause(String id) {
	// stops moving of character while popup open

// if (app.pauseWindow == false) {
app.detachPlayerModelAndControl();
System.out.println(“app.pause() Started”);
System.out.println("pause ID: "+id);
app.setPopupElement(app.getNifty().createPopup(id));
app.getNifty().showPopup(app.getNifty().getScreen(“hud”), app.getPopupElement().getId(), null);
// app.pauseWindow = true;
if(app.getPopupElement().getId().matches(“popupQuest”)){
checkPictures();
}
// }
}
public void startMinigame() {
// mActivity.startMyActivity(app.getActivityToStart());
// boolean [] results = {true,true,true,true,false,false,false,false,false,false};
// app.updateResults(results);
}
public void popupQuest(String position) {
int number = Integer.parseInt(position);
}
public void checkPictures(){
boolean [] results = app.getmResult();
System.out.println(“checkPictures:”);
// int number = Integer.parseInt(position);
for (int i=0; i<results.length; i++){
if(results[0]==true){
changeImage(“kugelWelle1”,“kugelTrue.png”);
}
if(results[1]==true){
changeImage(“ebeneWelle1”,“ebeneTrue.png”);
}
if (results[2]==true){
changeImage(“interferenz1”,“interferenzTrue.png”);
}
if (results[3]==true){
changeImage(“einDim1”,“1dimTrue.png”);
}
if (results[4]==true){
changeImage(“kugelWelle2”,“kugelTrue.png”);
}
if (results[5]==true){
changeImage(“interferenz2”,“interferenzTrue.png”);
}
if (results[6]==true){
changeImage(“ebeneWelle2”,“ebeneTrue.png”);
}
if (results[7]==true){
changeImage(“einDim2”,“1dimTrue.png”);
}
}
}
public void changeImage(String pictureId, String newPicture) {
Element imageElement = app.getNifty().findPopupByName(“popupQuest”).findElementByName(pictureId);
ImageRenderer imageRenderer = imageElement.getRenderer(ImageRenderer.class);
NiftyImage newImage = app.getNifty().getRenderEngine().createImage(null,“Interface/”+newPicture, false); //false = dont linear filter image
imageRenderer.setImage(newImage);
}
public void popupTutorial(String id){
app.getNifty().getScreen(“hud”).findElementByName(app.getPopupElement().getId()).markForRemoval();
app.setPopupElement(app.getNifty().createPopup(id));
app.getNifty().showPopup(app.getNifty().getScreen(“hud”), app.getPopupElement().getId(), null);
}

public boolean inputEvent(NiftyInputEvent inputEvent) {
	return false;
}
    
    public void nextWithCoords(int x, int y) {
    //Gets the coordinates of an onClick or onClickMouseMoved, nifty calls automaticali
        System.out.println("next() clicked at: " + x + ", " + y);
    }
public String getPlayerName() {
	return System.getProperty("user.name");
}

public void bind(Nifty nifty, Screen screen) {
}

public void onStartScreen() {
}

public void onEndScreen() {
}

public void bind(Nifty nifty, Screen screen, Element element, Properties parameter,
		Attributes controlDefinitionAttributes) {
}

public void init(Properties parameter, Attributes controlDefinitionAttributes) {
}

public void onFocus(boolean getFocus) {
}

@Override
public void update(float tpf) {
	/** jME update loop! */
}

}
[/java]

[hello123]

Check out ure nifty, what should be displayed? what does it display?

[java]
System.out.println("ScreenNames: "+app.getNifty().getAllScreensName());

System.out.println("ActualScreen: "+app.getNifty().getCurrentScreen();

System.out.println("Layers: "+app.getNifty().getCurrentScreen().getLayerElements());
[/java]

app is a pointer to my game instance in startScreenState.
getNifty is a getter method in mygame, because nifty is set to private there.
[java]
public Nifty getNifty() {
return nifty;
}
[/java]