GUI tutorial please ?

[cromcrom]

Hello,
I have a very hard time figuring how to create a GUI. What I would like is a rectangle with some text in it, and "yes" and "no" buttons.
I really don't see how to do that. I tried

Code: Select all

skin1 = {
  main_panel = {"panel1", 10, 10, 100, 50},
  button_1 = {"but1", 5, 5, 100, 30, bgColor = {255,0,0,100}, text = "Click Me!"},
}

function doGui()
  local skin = skin1;
  gui.panel(skin.main_panel)
  if gui.button(skin.button_1) then ... end
end

from john, but can't get it to work. Any help please ?

[cromcrom]

Bump, what is the correct answer ?

Its to hard ?
No time ?
It's to easy ?
Do it yourself ?
My little secret ?

[Doridion]

My "little poney" ?

More seriously, I think that AH not even thinked about creating GUI stuff now ( most occupied to fill in big holes of the scripting reference, and trying to sort good and bad informations in the asset pack ). They implemented lots of hooks/gui stuff in the .15 .16 betas, but yep, i agree with you, not released yet.

So .... yep, on the GUI drawing/coding, we're actually alone and in learn phase

[cromcrom]

Thanks a lot Doridion, I thought this was "done" from the bits af scripts I saw here and there. So lets wait, there are other things to do...

[JohnWordsworth]

Hi CromCrom! Unfortunately, what you stumbled upon above was a discussion I was having with Petri about a GUI abstraction I am designing (about to sit down and do some now actually!), so that code was "theoretical" not real code.

On the plus side, there is already a basic GUI system available in the Scripting Reference. When you override onDrawGui in the Party component, you get passed a 'Graphics Context' object, which allows you to do immediate rendering of GUI elements in your method. So, you can do something like this...

Code: Select all

onDrawGui = function(self, context)
  context.color(100, 100, 100, 200);
  context.drawRect(10, 10, 210, 50);

  context.color(0, 0, 0, 128);
  context.drawRect(20, 20, 90, 30);
  context.drawRect(120, 20, 90, 30);

  context.color(255,255,255,255);
  context.drawText("Button A", 30, 40);
  context.drawText("Button B", 130, 40);

  if ( context.button("button_a", 20, 20, 90, 90) ) then
    print("Clicked A"); 
  end

  if ( context.button("button_b", 20, 20, 90, 90) ) then
    print("Clicked A"); 
  end
end

The above code will produce...

SpoilerShow

It's pretty powerful in terms of what you can do overall, but a little bit fiddly (notice all of the hard-coded numbers). I'm working on a GUI abstraction that will either let you...

1. Build a GUI state and control it separately

Code: Select all

-- THEORETICAL CODE - DOES NOT WORK YET!
defineGui{ name="name", ...} 
local g = createGui("name");
g:show();
g:destroy();

2. Build an immediate GUI but with a system that will remember your current "panel" transform and handle the drawing of buttons with rectangles and text for you.

Code: Select all

-- THEORETICAL CODE - DOES NOT WORK YET
gui.startPanel({x=20, y=20, width=100, height=100, bgColor={200, 200, 200, 200});

if gui.button({x=10, y=10, width=100, height=40, text="Hello", textColor={255,255,255,255}, bgColor={0,0,0,255})
  .. do something ..
end

gui.endPanel();

[cromcrom]

This is EXACTLY what I was looking for, thanks a lot John

@Doridion aw well ...

[Doridion]

@Doridion aw well ...

Hey, didn't seen this discussion before ! I've read antti's shout about insistant asking for asset's pack, and i agree with it ( asking some times for is ok, but non stop while AH dev team are hard working is very boring for them ).

This is John that have private dev discussion niark niark niark

@JohnWordsthrow : John, could you give me a link to this discussion ( if you got on the forum ) than i make a stick in the superthread please ? ( It's just a little bit useful for GUI modders )

[JohnWordsworth]

Hey Doridion,

The actual instructions for using the Gui system are just in the Scripting Reference. As for the discussion between Petri and I, it is on the forums, but it's literally only discussion about how a user-made GUI system might look (one that I am developing) and doesn't really have much to do with the underlying LOG1 system. If/when I write my own GUI system though, I will surely post about it

[Doridion]

Hey Doridion,

The actual instructions for using the Gui system are just in the Scripting Reference. As for the discussion between Petri and I, it is on the forums, but it's literally only discussion about how a user-made GUI system might look (one that I am developing) and doesn't really have much to do with the underlying LOG1 system. If/when I write my own GUI system though, I will surely post about it

Thanks about this John ^^ I'm searching to stick the right "tutorial" for GUI develloppement system, in the superthread. I'm sure that some graphic modders would code it and it could be more simple to find good informations about it ( more else, with the right "instructions/informations", it could avoid issues risk with custom GUI systems )

In waiting for a thread who's speaking about that, i stick your explanations in the superthread

[strangely]

I'm playing around with this now and I'm wondering how @JohnWordsworth figured out that context had color, drawRect and button functions.
Does anyone have a list of the available functions?