tonegodGUI Documentation (Pre-Alpha Release)

t0neg0d · April 12, 2013, 8:54pm

@eraslt
Yeah… this is the problem. I’ll see about applying the patch today. Sorry for the confusion.

t0neg0d · April 13, 2013, 2:37am

@eraslt
This problem should be resolved as of tonight’s update. Sorry for the inconvenience.

eraslt · April 15, 2013, 5:37am

thanks was away for a weekend, so now it works well
very nice gui lib, took me about 1 h to rewrite entire inventory stuff

harry1315 · June 11, 2013, 6:40pm

Hi everyone,
Does any one know how to add a 2560x2400 image as background image and can zoom in or zoom out using tonegodgui?
Thanks~

t0neg0d · June 11, 2013, 8:33pm

<cite>@harry1315 said:</cite> Hi everyone, Does any one know how to add a 2560x2400 image as background image and can zoom in or zoom out using tonegodgui? Thanks~

Hmmm… You may be able to:

Create an Element with the image
call geGeometry().center() or (getModel().getParent().center())
Place the Element at screen.getWidth()/2 , screen.getHeight()/2
use Element.setLocalScale() to zoom.

If you need this via mouse wheel control, add the MouseWheelListener and use the DeltaX,Y etc… to adjust the scale

harry1315 · June 12, 2013, 5:00am

<cite>@t0neg0d said:</cite> Hmmm... You may be able to:

Create an Element with the image

call geGeometry().center() or (getModel().getParent().center())

Place the Element at screen.getWidth()/2 , screen.getHeight()/2

use Element.setLocalScale() to zoom.

If you need this via mouse wheel control, add the MouseWheelListener and use the DeltaX,Y etc… to adjust the scale

I think I got the idea, thanks so much

KonradZuse · September 17, 2013, 5:41pm

Has the multiple screen issue been fixed?

I’m curious if this would be the best solution to my gui problem.

All I want to do is have a start menu with a few buttons, I need the “OnHover/OnClick” so i came here. I can use images for all of that right?

For the HUD I just need a few buttons with the same onClick and Hover, and to display some text.

Originally I was looking at NIFTY, but they are very basic, and OnHover/Click is something I would have to implement, and not too sure which would be the easier approach. I don’t have much I’m asking, but I don’t want to run into trouble if this (Pre-Alpha) Release cannot do what I need.

Thanks for the help.

t0neg0d · September 17, 2013, 7:28pm

@KonradZuse said: Has the multiple screen issue been fixed?
I’m curious if this would be the best solution to my gui problem.

All I want to do is have a start menu with a few buttons, I need the “OnHover/OnClick” so i came here. I can use images for all of that right?

For the HUD I just need a few buttons with the same onClick and Hover, and to display some text.

Originally I was looking at NIFTY, but they are very basic, and OnHover/Click is something I would have to implement, and not too sure which would be the easier approach. I don’t have much I’m asking, but I don’t want to run into trouble if this (Pre-Alpha) Release cannot do what I need.

Thanks for the help.

I recommend using AppStates, as they allow everything multiple screens would and more. example:

create screen.
attach CoreGuiAppState
attach MenuAppState
player clicks on start button…
detach MenuAppState
attach InGameHUDAppState
etc…

You can use initialize and cleanup in the same way you would use onScreenBegin/end… or whatever Nifty has. From these you can run any BatchEffects/EffectQueues for transitions. As an added bonus to using this approach, you can overlap screen transitions, making it appear a little more seamless.

I have been using this approach for quite some time and I have really not been able to find anything that can’t be done this way.

h1ghst0r3y · October 24, 2013, 7:02pm

Hey t0neg0d,

first of all thank you for providing the community your GUI and for your support.

I’m currently in the process of building up a gui the tonegod way and created a couple drag and drop elements. However i’m getting a StackOverflowError when dragging a DragElement declared as dropElement even if it is not movable.

[java]
Element bottomBarDropLocation = new Element(screen, “bottomBar”, new Vector2f(width / 4, height - itemSize - 10), new Vector2f(width / 2, itemSizePlus), new Vector4f(25, 25, 25, 25), “tonegod/gui/style/def/Window/panel_x.png”);
bottomBarDropLocation.setZOrder(1);

		DragElement dropElement = new DragElement(screen, new Vector2f(i * itemSizePlus - 4, -4), new Vector2f(itemSizePlus, itemSizePlus), new Vector4f(25, 25, 25, 25), "tonegod/gui/style/def/Window/panel_x.png")
		{

			@Override
			public void onDragStart(MouseButtonEvent evt)
			{
				// TODO Auto-generated method stub

			}

			@Override
			public boolean onDragEnd(MouseButtonEvent evt, Element dropElement)
			{
				// TODO Auto-generated method stub
				return dropElement != null;
			}
		};
		dropElement.setIsDragDropDropElement(true);
		dropElement.setIsMovable(false);
		dropElement.setZOrder(2);
		dropElement.setToolTipText("DropLocation");
		bottomBarDropLocation.addChild(dropElement);

[/java]

So if you want to move it in the GUI you get something like this:
[java]
Exception in thread “LWJGL Renderer Thread” java.lang.StackOverflowError
at com.jme3.math.Vector3f.setZ(Vector3f.java:1036)
at tonegod.gui.core.Element.initZOrder(Element.java:534)
at tonegod.gui.core.Element.initZOrder(Element.java:540)
at tonegod.gui.core.Element.initZOrder(Element.java:540)
…
[/java]

Any chances of fixing this?

Keep up the good work and kind regards

machspeeds · December 16, 2013, 2:42am

Hi tonegod. Not sure if this is the place to ask about bugs/fixes, but I have one to report (I think)

If I try and make a Label or a Panel with text fade in (haven’t tested with others), the panel/label’s background fades in properly, but it’s the text those items have that don’t. As soon as showWithEffect() is called, it immediately shows the text, without the fade.

Any solution for this?

h1ghst0r3y · December 18, 2013, 4:49pm

Hey again. I’ve been able to solve the issue i had. Don’t know exactly how but it was some kind of problem with multiple panels over another.

However could you please add this small snippet to your Element-Class? I think it would be a useful addition.

[java]
public void setColor(ColorRGBA color)
{
mat.setColor(“Color”, color);
}

public void setColor(float r, float g, float b, float a)
{
	mat.setColor("Color", new ColorRGBA(r, g, b, a));
}

private boolean isEnabled = true;
private ColorRGBA activeFontColor = getFontColor();

public void setEnabled(boolean enable)
{
	isEnabled = enable;
	if (enable)
	{
		setIgnoreMouse(false);
		setFontColor(activeFontColor);
	}
	else
	{
		activeFontColor = getFontColor();
		setIgnoreMouse(true);
		setFontColor(ColorRGBA.Gray);
	}
}

public boolean isEnabled()
{
	return isEnabled;
}

[/java]

That way everything you can change the color of stuff as well as enable/disable buttons for example

madjack · December 18, 2013, 5:48pm

This works fine for buttons (in this case for ButtonAdapter)… Not sure where the problem is here.

[java]((ButtonAdapter) screen.getElementById(“LoadGameButton”)).setIsEnabled(true);[/java]

As for the color thing, use setBackgroundColor(ColorRGBA color) ? The second proposition is not necessary imo.

The biggest limitation here is that you can’t have both a texture and a color defined for any element in tonegod’s gui, thus transparent stuff can’t be used in conjunction with a background color.

WHOOPSIES!

I just realized that the setBackgroundColor method is one I have in store to submitted to tonegod, but she’s been kinda MIA from her GUI forum so… Bleh.

If you want to integrate that, add this:
[java]
public void setBackgroundColor(ColorRGBA backgroundColor) {
setColorMap(null);
if (backgroundColor != null) {
mat.setColor(“Color”, backgroundColor);
} else {
mat.setColor(“Color”, defaultColor);
}
}
[/java]

h1ghst0r3y · December 18, 2013, 6:55pm

Well, it was just a suggestion to add it to the element. Already got most of the stuff working.

As for the disabled buttons i would prefer my solution over setIsEnabled(). See the example screenshot.
First button is my way of disabling setEnabled(false), second button is setIsEnabled(false) and third is just a normal button.

madjack · December 18, 2013, 7:14pm

Oh. I get what you mean. Shading for the disabled button.

I’ve suggested that (and other things when in that state) a loooooooooooooooooooooong time ago… Here, take a number.

t0neg0d · December 18, 2013, 8:59pm

@h1ghst0r3y said: Well, it was just a suggestion to add it to the element. Already got most of the stuff working.
As for the disabled buttons i would prefer my solution over setIsEnabled(). See the example screenshot.
First button is my way of disabling setEnabled(false), second button is setIsEnabled(false) and third is just a normal button.

Are the button states not changing to depressed when disabled? I’m sure people have told me this many times /sigh. Are you using texture atlasing? Or not? I may have fixed it for that and not realized I missed it for non-atlased GUIs.

t0neg0d · December 18, 2013, 9:02pm

@madjack said: Oh. I get what you mean. Shading for the disabled button.
I’ve suggested that (and other things when in that state) a loooooooooooooooooooooong time ago… Here, take a number.

I’m thinking that I only fixed this for GUIs using atlasing. I’ll add it to the list (which will finally get updated after the 1st.

I had a cataclysmic hardware failure a little bit ago… got that resolved and the holidays hit… which pretty much has me a ghost until after new years =(

h1ghst0r3y · December 18, 2013, 9:18pm

When i’m using the regular setIsEnabled the button appears to be pressed.
My own addition just disables the clicking and turns the text to grey without the button-press-effect.

I’m not sure if i’m using atlasing … if there is a default setting i might just use that
How do i turn on atlasing?

madjack · December 18, 2013, 9:23pm

@h1ghst0r3y said: I'm not sure if i'm using atlasing ... if there is a default setting i might just use that :D How do i turn on atlasing?

If you’re not sure then you’re not using it.

Atlassing needs to be done in a specific way (think of a sheet of icons/images). Unless texture atlas means something different here.

t0neg0d · December 18, 2013, 11:24pm

@h1ghst0r3y said: When i'm using the regular setIsEnabled the button appears to be pressed. My own addition just disables the clicking and turns the text to grey without the button-press-effect.
I’m not sure if i’m using atlasing … if there is a default setting i might just use that
How do i turn on atlasing?

The short answer is:

[java]
screen = new Screen(this, “Interface/Styles/style_map.xml”);
screen.setUseTextureAtlas(true, “Interface/Styles/atlas.png”);
guiNode.addControl(screen);
[/java]

However, adding custom images (or alternate atlas maps past the core, requires you to to… um… let me find an example.

[java]
// Second param is the x,y,width,height of the portion of the atlas image you want to use
Element.setTextureAtlasImage(SomeNewTexture, “x=80|y=160|w=40|h=40”);
[/java]

Keep in mind, you’ll want to cache the Texture and pass in a reference to reuse it or you are defeating the purpose.

If you like, you can use the screen method

[java]
Texture tex = screen.createNewTexture(“Some path string”);
[/java]

It returns a texture setup the same as the default texture used for atlasing. And that’s all there is to it.

t0neg0d · December 18, 2013, 11:25pm

Also note… there are default styles and atlas image included with the library. It’s not the one in the example above.