getting blank white images only in GUI

angriff · Jul 13th 2018

Ok what image can be seen in this game. I have a .png with a transparent background that I would like to use as a button but seems I can draw the GUI and put a picture as a child but it is always white and blank? Any pointers?

Trevor · Jul 13th 2018

I recall reading somewhere that RW doesn't currently support partial transparency, just fully transparent or fully visible. Perhaps someone else can confim and you can test by making an image with full, partial and no transparency.

angriff · Jul 13th 2018

Right now it is full white rectangle

Trevor · Jul 13th 2018

Without your code, or even a description of what your image should look like, no one can troubleshoot for you.

I'm a java rookie myself. Following is how I adapted what an established author sent me a couple of days ago. Perhaps this will help.

Outside the code snippet:public static final String FILE_CONFIRMATION_GRAPHIC = "/resources/images/confirmation.png";This pulls the image data from the specified location under my ~/src folder.

Code

public static GuiImage createConfirmationGraphic(){
		ImageInformation confirmationGraphicFile = new ImageInformation(plugin, FILE_CONFIRMATION_GRAPHIC);
		GuiImage confirmationGraphic = new GuiImage(confirmationGraphicFile, 0.5f, 0.2f, true, 80, 32, false);
		confirmationGraphic.setPivot(PivotPosition.CenterBottom);
		confirmationGraphic.setVisible(false);
		return confirmationGraphic;
	}


public static GuiPanel createMainPanel(){
        GuiPanel mainPanel = new GuiPanel(0.5f, 0.5f, true, 0.65f, 0.9f, true);
        mainPanel.setColor(0.0f, 0.0f, 0.0f, 1.0f);
        mainPanel.setPivot(PivotPosition.Center);
        mainPanel.setBorderColor(0.0f, 0.6f, 0.933f, 1.0f);
        mainPanel.setBorderThickness(2, false);
        mainPanel.setVisible(false); //I use this as false so that the elements don't appear one I add them to the player but only when I call my show/hide function
        return mainPanel;
    }


public static GuiLabel createHeaderLabel(){
        GuiLabel headerLabel = new GuiLabel("SomeLabel", 0.0f, 1.0f, true);
        headerLabel.setPivot(PivotPosition.TopLeft);
        headerLabel.setFontSize(20);
        headerLabel.setFontColor(1.0f, 0.533f, 0.0f, 1.0f);
        headerLabel.setColor(0.0f, 0.0f, 0.0f, 0.0f);
        headerLabel.setVisible(false);
        return headerLabel;
    }


Then you need to instance your panel, add to the player as an atribute and add it to their Gui.
//This method should be called in the PlayerSpawnEvent
public static void setMainPanelAttributes(Player player){
    GuiPanel personalMainPanel = createMainPanel();
    GuiLabel personalHeaderLabel = createHeaderLabel();
	GuiImage personalConfirmationGraphic = createConfirmationGraphic();
    //if your element is a label or child to the panel you also need to call the .addChild Method here e.g. 
    personalMainPanel.addChild(personalHeaderLabel);
    player.setAttribute("MainPanel", personalMainPanel);
    player.setAttribute("HeaderLabel", personalHeaderLabel);
	player.setAttribute("ConfirmationGraphic", personalConfirmationGraphic);
    player.addGuiElement((GuiPanel) player.getAttribute("MainPanel"));
    player.addGuiElement((GuiLabel) player.getAttribute("HeaderLabel"));
	player.addGuiElement((GuiImage) player.getAttribute("ConfirmationGraphic"));
}
Then I create my show/hide method to display the panel and label
//This method can be called by e.g. a PlayerCommandEvent, or a PlayerKeyEvent to show the GUI, then you can call it with showhide-false to hide the GUI after the player has clicked something on it via the PlayerGuiClickEvent
public static void showHideMainGui(Player player, boolean showHide){
        GuiPanel personalMainPanel = (GuiPanel) player.getAttribute("MainPanel");
        GuiLabel personalHeaderLabel = (GuiLabel) player.getAttribute("HeaderLabel");
        personalMainPanel.setVisible(showHide);
        personalHeaderLabel.setVisible(showHide);
}

Display More

angriff · Jul 13th 2018

Thanks for that I am using the getPath method with file name for the information. I think it is not reading it.

angriff · Jul 13th 2018

public ImageInformation y = new ImageInformation(this, "singleyes.png");
public ImageInformation n = new ImageInformation(this.getPath() + "/singleno.png");

Neither one find the image and presents it. The image is just a white rectangle that is shown not the button .png

Trevor · Jul 13th 2018

From your description, and without access to the code, I don't know what's causing the white rectangle. Is it a gui element that's blocking the image from being seen? The result a result of a bad file? Improper sizing? Are you creating the gui in the right place? Are other elements working OK? There are so many possible problems and no one can nail it down from your descriptions thus far.

If you can upload your plugin to github, folks can take a look with a fresh pair of eyes.

angriff · Jul 13th 2018

forget it thanks

angriff · Jul 13th 2018

This is what I get

angriff · Jul 14th 2018

Cannot even recreate your example Trevor which is full of public void objects for something bigger. I am trying to simply turn on a picture and display it and the picture will not load PERIOD
I turned off the panel to see if it was covering even though it seems to be ontop and still a blank perfectly proportioned white rectangle. i am sure it is something as simple as the database read issue I had all the the examples everyone gave me did not have the "/" in front of the filename which was what was keeping it from being found. There is no examples in the JavaDoc that even remotely works for a picture other than turns on a blank rectangle. It would be nice if this system would use JAVAFX but it seems it wont display those either.

public ImageInformation singley = new ImageInformation(getPath() + "/assets/singleyes.jpg");
public ImageInformation n = new ImageInformation(getPath() + "/singleno");
// public GuiPanel panel = new GuiPanel(0.5f, 0.5f, true, 200, 200, false);
public GuiImage ybutton = new GuiImage(singley,0.5f,0.5f,true,178,68,false);

Trevor · Jul 14th 2018

I understand your frustration but if other people can get it working, then so can you!

Apologies if some of the following is already known. I'm not sure how much you already understand of the way RW works. All five parts of my sample code are important. We're right on the limits of my knowledge right now, so if you need further help, please put your code on github or wait for others to offer advice.

Code

public static GuiImage createConfirmationGraphic(){
...
public static GuiPanel createMainPanel(){
...
public static GuiLabel createHeaderLabel(){
...

These three define the Gui elements. This is where you get the image file and embed it in the GuiImage.

Code

public static void setMainPanelAttributes(Player player)
...

As noted in the comment, this must be called from a PlayerSpawnEvent. It creates a generic GUI template then copies the elements as player attributes that are unique to the player. This is necessary, otherwise a GUI operation (e.g. closing it) would affect everyone on the server.
In here, we create a GuiPanel mainPanel to hold the other elements. The other elements are added as children of the GuiPanel. (I see that in the prior example I forgot to add GuiImage as a child.)

In my case, I've put the GUI code in a separate class rwtpaGUI and I call setMainPanelAttributes() from the main class.

Code

@EventMethod
public static void onPlayerSpawn(PlayerSpawnEvent event) {
    Player player = event.getPlayer();
    // Prepare GUI
    setMainPanelAttributes(player);
}

Finally, the following toggles visibility of the player's personal GUI so you can turn it on and off as needed (in my case from within the teleportPlayer() method).

Code

public static void showHideMainGui(Player player, boolean showHide){
...

If you'd like to see it altogether... https://github.com/trevorjd/rw…er/src/com/trevorjd/rwtpa

angriff · Jul 14th 2018

Thanks Trevor.. I am trying to swim in the shallow end first. If I cannot get a pictures to be found all the coding the world to display it will not do me any good. I will review what you have shared and see if I can find out why my 6 line codes does not load the picture.

Trevor · Jul 14th 2018

Go big or go home

TBH I don't have a deep understanding myself but this method works for me. If you surrender and you're still reluctant to share your project with the public at large, you're welcome to PM me your files and I'll see if I can spot what's wrong.

angriff · Jul 14th 2018

My project is not a project it is just an experiment to see how it works. It will have a mishmash of different stuff being experimented with. I turned off all the panel stuff. It is about the 5th interaction on the path so what you see is not necessarily what I have tried in the past.
The name of the file has been changed the location of the file has been changed. The type of picture has been both png and jpg. The size of the picture has been checked to be the same pixels as called so I dont think it is off to one side outside of hte box but who knows at this point.

import net.risingworld.api.Plugin;
//import java.sql.ResultSet;
//import java.sql.Connection;
//import java.sql.SQLException;
//import net.risingworld.api.database.Database;
import net.risingworld.api.events.EventMethod;
import net.risingworld.api.events.Listener;
import net.risingworld.api.events.player.PlayerCommandEvent;
import net.risingworld.api.objects.Player;
import net.risingworld.api.gui.GuiElement;
import net.risingworld.api.gui.GuiLabel;
import net.risingworld.api.gui.GuiPanel;
import net.risingworld.api.gui.PivotPosition;
import net.risingworld.api.utils.ImageInformation;
import net.risingworld.api.gui.GuiImage;

public class GUIreply extends Plugin implements Listener {

public Plugin plugin = this;
// public void setImage(y);
// public void setImage(n);
String[] splitCommand;
public ImageInformation singley = new ImageInformation(getPath() + "/assets/singleyes.jpg");
public ImageInformation n = new ImageInformation(getPath() + "/singleno");
// public GuiPanel panel = new GuiPanel(0.5f, 0.5f, true, 200, 200, false);
public GuiImage ybutton = new GuiImage(singley,0.5f,0.5f,true,178,68,false);
public Player player;
@Override

@EventMethod
public void onPlayerCommand(PlayerCommandEvent event){
String command = event.getCommand();
String[] cmd = command.split(" ");
if (cmd.length >= 2 && cmd[0].equals("/respond")){
splitCommand = event.getCommand().split(" ");
if(splitCommand[0].equals("/respond")){
//3 in command line /antaz getArea areaID
if(splitCommand.length==2){
if(splitCommand[0].equals("/respond")){
{String[] cmds = command.split(" ");
if (cmds.length == 2){
if(splitCommand[1].equals("Yes")){
String key = cmds[1];
Player player = event.getPlayer();
player.sendTextMessage("setting up GUI") ;
// Set up GUI
//
// panel = new GuiPanel(0.5f, 0.5f, true, 200, 200, false);
// panel.setColor(1f, 0f, 0f, 0.8f);
// panel.setPivot(PivotPosition.Center);
// panel.setBorderThickness(4f, false);
// panel.setBorderColor(0f, .74f, 1f, 1f);
// panel.setClickable(false);
ybutton.setImage(singley);
ybutton.getImage();
ybutton.setClickable(true);
ybutton.setPivot(PivotPosition.Center);
// panel.addChild(ybutton);
Player p = event.getPlayer();
// p.addGuiElement(panel);
p.addGuiElement(ybutton);
// p.getAttribute("singley");
}
if(splitCommand[1].equals("remove")){
ybutton.destroy();
// panel.destroy();

Trevor · Jul 14th 2018

OK, that was only a few pieces of your code so I had to do a lot of reconstruction, but I got it working.
With images singleyes.png and singleno.png in the assets folder within the jar file, the commands /respond yes, no and off perform as you might expect.

As you can see, I've implemented the method I've been taught while preserving as much of your code as I could. I'm not sure if it's the best way, but it's modular, pretty easy to understand and it works.

* Called from a PlayerSpawnEvent, the setupGUI() method defines the GUI elements and sets them as attributes to the player that just spawned.
* Called from anywhere in the code, the showHideGUI (or variations therepon) can be used to show/hide various elements. As the images are children of the main panel object, in the code below I'm toggling that as well. I haven't tested if that's strictly necessary.

Anyway, I'm off to bed then away for about 3 days. Good luck. I hope this helps.

Code

import net.risingworld.api.Plugin;
import net.risingworld.api.events.EventMethod;
import net.risingworld.api.events.Listener;
import net.risingworld.api.events.player.PlayerCommandEvent;
import net.risingworld.api.events.player.PlayerSpawnEvent;
import net.risingworld.api.gui.GuiPanel;
import net.risingworld.api.objects.Player;
import net.risingworld.api.gui.PivotPosition;
import net.risingworld.api.utils.ImageInformation;
import net.risingworld.api.gui.GuiImage;


public class GUIreply extends Plugin implements Listener {


    // changed this to static
    public static Plugin plugin;
    // public void setImage(y);
    // public void setImage(singleNo);
    String[] splitCommand;


    // moved GUI elements to setupGUI()


    public Player player;


    @Override
    public void onEnable()
    {
        plugin = this;
        registerEventListener(this);
    }


    public void onDisable()
    {
        unregisterEventListener(this);
    }


    // added this method
    @EventMethod
    public static void onPlayerSpawn(PlayerSpawnEvent event)
    {
        Player player = event.getPlayer();
        // Set up GUI
        setupGUI(player);
        // show GUI
        showHideGUI(player, false);
    }


    public static void setupGUI(Player player)
    {
        // define a panel
        GuiPanel panel = new GuiPanel(0.5f, 0.5f, true, 200, 200, false);
        panel.setColor(1f, 0f, 0f, 0.8f);
        panel.setPivot(PivotPosition.Center);
        panel.setBorderThickness(4f, false);
        panel.setBorderColor(0f, .74f, 1f, 1f);
        panel.setClickable(false);
        panel.setVisible(false);
        // define a button
        GuiImage buttonYes = new GuiImage(0.5f,0.5f,true,178,68,false);
        buttonYes.setImage(new ImageInformation(plugin, "/assets/singleyes.png"));
        buttonYes.setClickable(true);
        buttonYes.setPivot(PivotPosition.Center);
        buttonYes.setVisible(false);
        // define a button
        GuiImage buttonNo = new GuiImage(0.5f,0.5f,true,178,68,false);
        buttonNo.setImage(new ImageInformation(plugin,"/assets/singleno.png"));
        buttonNo.setClickable(true);
        buttonNo.setPivot(PivotPosition.Center);
        buttonNo.setVisible(false);
        // add buttons as children of panel
        panel.addChild(buttonYes);
        panel.addChild(buttonNo);
        // assign GUI elements to player
        // I don't know if it's necessary to do them individually, but that's the way I was taught
        player.setAttribute("panel", panel);
        player.setAttribute("buttonYes", buttonYes);
        player.setAttribute("buttonNo", buttonNo);
        // add GUI elements to HUD
        player.addGuiElement((GuiPanel) player.getAttribute("panel"));
        player.addGuiElement((GuiImage) player.getAttribute("buttonYes"));
        player.addGuiElement((GuiImage) player.getAttribute("buttonNo"));
    }


    public static void showHideGUI(Player player, boolean visible)
    {
        GuiPanel myPanel = (GuiPanel) player.getAttribute("panel");
        GuiImage myButtonYes = (GuiImage) player.getAttribute("buttonYes");
        GuiImage myButtonNo = (GuiImage) player.getAttribute("buttonNo");
        myPanel.setVisible(visible);
        myButtonYes.setVisible(visible);
        myButtonNo.setVisible(visible);
    }


    public static void showButtonYes(Player player, boolean visible)
    {
        GuiPanel myPanel = (GuiPanel) player.getAttribute("panel");
        GuiImage myButtonYes = (GuiImage) player.getAttribute("buttonYes");
        myPanel.setVisible(visible);
        myButtonYes.setVisible(visible);
    }


    public static void showButtonNo(Player player, boolean visible)
    {
        GuiPanel myPanel = (GuiPanel) player.getAttribute("panel");
        GuiImage myButtonNo = (GuiImage) player.getAttribute("buttonNo");
        myPanel.setVisible(visible);
        myButtonNo.setVisible(visible);
    }


    @EventMethod
    public void onPlayerCommand(PlayerCommandEvent event){
        String command = event.getCommand();
        String[] cmd = command.split(" ");
        if (cmd.length >= 2 && cmd[0].equals("/respond")){
            splitCommand = event.getCommand().split(" ");
            if(splitCommand[0].equals("/respond")){
                //3 in command line /antaz getArea areaID
                if(splitCommand.length==2){
                    if(splitCommand[0].equals("/respond")){
                        {
                            String[] cmds = command.split(" ");
                            if (cmds.length == 2){
                                if(splitCommand[1].toLowerCase().equals("yes")){
                                    String key = cmds[1];
                                    Player player = event.getPlayer();
                                    player.sendTextMessage("setting up GUI") ;
                                    showHideGUI(player, false);
                                    showButtonYes(player, true);
                                }
                                if(splitCommand[1].toLowerCase().equals("no"))
                                {
                                    Player player = event.getPlayer();
                                    player.sendTextMessage("setting up GUI") ;
                                    showHideGUI(player, false);
                                    showButtonNo(player, true);
                                }
                                if(splitCommand[1].toLowerCase().equals("off"))
                                {
                                    Player player = event.getPlayer();
                                    player.sendTextMessage("Turning off GUI");
                                    showHideGUI(player, false);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Display More

angriff · Jul 15th 2018

Thanks Trevor more than I expected. I am not at my home computer right now but I will try to test it out.

wow took a minute to compile on this computer. You are using setVisible and player attributes which I would never have recognized that you had to assign it to a player as an attribute because I could turn it on and make it visible without that.

angriff · Jul 15th 2018

Well it loaded ok and seems to turn on and off the GUI exactly the same but seems I get the same exact issue. A white button rectangle in the middle of the red panel. There must be a compatibility issue in the .png or jpg. I will look for this issue. I left it up on my sever if you want to look. Maybe it needs to be in the main directory or in the script file when compiled. Not sure .

Well I should have read your original email closer as I was looking at the code. I fell into putting them in the jar then went back and read your post with the code.

So the good news is it works!!!!

Yes the directory has to be in the jar file which is sort of a problem if you want to keep to date pictures and a trick I did not see anyplace other than remembering something about that in a post for pnb plugin and the textures.

So in any case thank you verymuch. I left it on my server if you wish to go and look. I suspect my original code would have worked too. I might try it. Another small inside knowledge thing that I learned the hard way.

THANK YOU VERY MUCH. I am a bit of crab apple and was fully frustrated. I will study your code and see what I can learn.. on to the next phase now. THANK THANKS THANKS.

Hope somebody else reads this and gets inspired .. the community is great

Trevor · Jul 15th 2018

Glad you got it working! I totally understand your frustration

You can change:
new ImageInformation(this, "/rw/plugin/images/filename.png");
to
new ImageInformation(plugin.getPath() + "/assets/filename.png");

So far I've only needed to use images which won't change (confirmation buttons, etc.) so I store them in the jar.

Remember that if you want to have some external process updating the images outside the jar, you'll need to re-execute not just the ImageInfo statement, but also the bits that depend on it (setImage and visibile on/off at the least).

angriff · Jul 15th 2018

Quick question now what API should I be looking at to release the mouse to select in the GUI. It just moves around with the n mouse now like a selector.

Oh I think I found it. Another visible thingie.. saw it in old post two years ago by Red player.setMouseCursorVisible(true); Boolean.

Trevor · Jul 16th 2018

I can't help there. I haven't done anything with the mouse yet At a quick glance at the API, it'll involve PlayerGuiElementClickEvent. That returns the element (e.g. button) and X/Y floats relative to the element.

Participate now!