New GUI scripting concepts and foundation

[thomson]

Here is one. Selfmade, the model exists.

Awesome! Can I ask couple modifications? Can you:
- remove the needle? It will be easier to read if the needle does not obscure the direction mark. Compass with a needle is usually more practical in a real life, when you typically need more than just 4 directions. But in Grimrock it will be easier to read with just the direction marks. Also, that is how the compass works in EOB1
- can you replace O with E? I suppose not everyone know what Ost means, so it may be confusing for non-german speaking players.
- can you create 4 images, with N, E, S and W pointing upwards? Normally I would just rotate part of the image, but you have a beautiful shadow here and it would be tricky to rotate part of the image and keep the shadow in place.

Thanks a lot. And sorry for distracting you from you wizard eye/beholder/dungeon master work

[germanny]

This was only an example, it will not look good if in smaller size. What do you think is the best pos. on screen? Guess it would be left upper corner, no?
Other side it disturbes the Menu, and at bottom one can´t see grund items..

I will make a variation. Be patient^^

[germanny]

Awesome! Can I ask couple modifications?
Thanks a lot. And sorry for distracting you from you wizard eye/beholder/dungeon master work

No prob, if i have an idea in mind and time (as for now!) such stuff can go quick^^

Ok then, i´ve built a compass frame image sequence:
viewtopic.php?f=14&t=4397&start=170#p49277

Download can be found in my thread, too

[Xanathar]

Leaving for the mountains (week off, likely no computer) tomorrow, sadly nothing meaningful to commit before leaving, I'm sorry
Of course if anyone thinks what I was doing is urgent and wants to take over, I won't be angry but I'd prefer to resume the work on Jan 7th onward!

Just one thought - shall we keep the calls as they are, or when drawing a hierarchy of controls the parent should call the draw methods with a custom parameter wrapping the API ? This would allow us to say, put a container at 300, 300, a button in the container at 10,10 and see the button rendered at 310, 310 automagically.. don't know, still thinking about it.

Happy new year fellow Grimrockers!

(I got tired or recolouring at the third word)

[thomson]

I've implemented createRectangle and createButton functions. Here's example code:

Code: Select all

	local rect1 = gw.createRectangle('rect1', 100, 50, 400, 150, 255, 255, 0)
	local rect2 = gw.createRectangle('rect2', 10, 10, 50, 50, 0, 0, 255)
	local rect3 = gw.createRectangle('rect3', 10, 10, 30, 30, 255, 0, 0)
	local button1 = gw.createButton('button1', 70, 10, "ABCDEFGHIJKLMNOPQRSTUVWXYZ", 0,255,0, nil)
	local button2 = gw.createButton('button2', 70, 40, "abcdefghijklmnopqrstuvwxyz", 0,255,0, nil)
	local button3 = gw.createButton('button3', 70, 70, "1234567890", 0,255,0, nil)
	local button4 = gw.createButton('button4', 70, 100, "!@#$%^&*()-,.'", 0,255,0, nil)
	gw.addChild(rect1, rect2)
	gw.addChild(rect2, rect3) -- rect3 in rect2, which is in rect1
	gw.addChild(rect1, button1)
	gw.addChild(rect1, button2)
	gw.addChild(rect1, button3)
	gw.addChild(rect1, button4)

	gw.addElement(rect1, 'gui')

And that's how it is rendered:


Couple comments:
- it is possible to nest objects, e.g. everything is added as child to rect1. It is possible to stack things recursively, e.g. rect3 is within rect2, which in turn is in rect1.
- I've implemented stringWidth() function. It does not calculate exact text width, but I think my approximation is close enough.
- button is not clickable yet
- there's new button on the wall that enables this gui demo
- do we need id specified explicitly?

[Komag]

I just started today to try to begin to wrap my brain around this GUI stuff, even just conceptually. I'm making a little progress, mainly for larger centered text. "Large" isn't quite big enough to me, but it will do. What we could really use is the ability to set font size numerically, or else have like 8 more preset sizes available

[JKos]

@thomson: Great, really good job. I added couple of features and modified it a bit.

- Replaced r,g,b arguments with color property.

Code: Select all

	local button1 = gw.createButton('button1', 70, 10, "ABCDEFGHIJKLMNOPQRSTUVWXYZ")
	button1.color = {0,255,0}

Why? IMO there was too many numeric arguments so the code was not very readable + now it's easy to copy the color values around.
eg.

Code: Select all

button2.color=button1.color -- copy button1 color to button2

And if the color is not specified then the last color is used.
I hope you don't mind.

- Added addChild function to all elements so you can call it like this:

Code: Select all

	local button1 = gw.createButton('button1', 70, 10, "ABCDEFGHIJKLMNOPQRSTUVWXYZ")
	button1.color = {0,255,0}
	rect1:addChild(button1)

- AddChild can be used to create child elements directly to parent, so the above example can also be written like this.

Code: Select all

	local button1 = rect1:addChild('Button','button1', 70, 10, "ABCDEFGHIJKLMNOPQRSTUVWXYZ")
	button1.color = {0,255,0}

-Added onPress hook support for all elements which have width and height so rectangles can be clickable too.

Code: Select all

	local button1 = gw.createButton('button1', 70, 10, "ABCDEFGHIJKLMNOPQRSTUVWXYZ")
	button1.color = {0,255,0}
	button1.onPress = function(self) print(self.id..' clicked') end

- Updated your example to use these new features.

[JKos]

I was thinking that maybe we should add support for some kind of default colors/styles.

Something like:
gw.setStyle('Button','color',{0,255,0})
gw.setStyle('Rect','color',{255,0,0})

all buttons would be green and all rects red by default, so we don't have to set colors to all individual elements.
Or maybe we should separate style attributes from elements completely, like in html/css.

Code: Select all

--common style to all buttons
gw.setStyle('Button','color',{0,255,0})

--Additional style to button1
gw.setStyles('button1',{
   background='some_image.tga',
   width=100,
   height=100,
   position='top,left',
)

I'm just thinking out loud, not sure if this is a good idea but I think it would make it more flexible/reusable. This should be pretty easy to implement, we could just store styles to some table and use them when rendering the element instead of the element properties. What do you think?

[thomson]

- Replaced r,g,b arguments with color property.

Great. I agree that it was annoying.

And if the color is not specified then the last color is used.
I hope you don't mind.

Great. One problem I haven't found out an easy solution is that the last color is later used for draw images. If the last drawn box was green, then the compass (which is drawn later) is greenish. I kind of worked around this issue by calling ctx.color(255,255,255).

- Added addChild function to all elements so you can call it like this:

I promised my significant other that we'll spend weekend together, so I can't take a look at this. I was trying to implement this, but my Lua skills are still somewhat pathetic

-Added onPress hook support for all elements which have width and height so rectangles can be clickable too.

One thing that is still missing is a gwImage (or whatever we call it) that displays images.

Poor Xanathar, when he gets back there won't be much left for him to do

[Xanathar]

I'm back

Poor Xanathar, when he gets back there won't be much left for him to do

Oh how I wish this happening to the daily job too!

I'll try to understand what you guys have done and find something to do