GUI library (WIP)

hgy29 · December 2019

Not with just stencil, stencil test will only give a Boolean result. Using a 2x or 3x rendertarget and an averaging downscaler shader could work, but that’ll be expensive.

rrraptor · December 2019

Ok, I did it diferently

2 separated shapes ))
- Create shape
- apply stencil operation
- craete border
- ...
- profit!

function rrect(t)
	local r = t.r or 40
	local w = t.w
	local h = t.h
 
	local shape = Path2D.new()
	local ms="MALALALAZ"
	local mp = {0,r, 
		r,r,0,0,1,r,0, w-r,0, 
		r,r,0,0,1,w,r, w,h-r, 
		r,r,0,0,1,w-r,h, r,h, 
		r,r,0,0,1,0,h-r
	}
	shape:setPath(ms,mp)
	return shape
end
 
local rr = rrect{w=100,h=100}
rr:setFillColor(0, 1)
 
local rr1 = rrect{w=100,h=100}
rr1:setFillColor(0, 0)
rr1:setLineColor(0x0000ff, 1)
rr1:setLineThickness(4, 1)
 
rr:setPosition(50,50)
rr1:setPosition(50,50)
 
stage:addChild(rr)
stage:addChild(rr1)
 
rr:setStencilOperation{
	stencilClear = true, 
	stenciMask = 1, 
	stencilWriteMask = 1, 
	stencilRef = 1,
	stencilFunc = Sprite.STENCIL_ALWAYS, 
	depthPass = Sprite.STENCIL_REPLACE,
}
 
local px = Pixel.new(0xff0000,1, 20, 20)
 
px:setStencilOperation{
	stencilClear = false, 
	stencilMask = 1, 
	stencilRef = 1,
	stencilFunc = Sprite.STENCIL_LEQUAL,
}
 
 
rr:addChild(px)
 
stage:addEventListener(Event.MOUSE_MOVE, function(e)
	local x,y = e.x,e.y
	px:setPosition(x-50,y-50)
end)

rrraptor · July 2020

It has been a long time since my last post on this topic. During this time, I tried many different ways to implement the GUI system. And at some point, I realized that Godot had a good system. So I decided to take his hierarchy and tried to implement it on my own.
Thats how it looks like:

I am not going to implement each of these.

My first implementation turned out to be pretty bad, so I thought, "Its open source! Why not try to rewrite it on my own?" And then...

This is the base class.

In general, I put my version of the base into about 1000 lines))) And then I just copy paste the code for some Godot Controls, changing only the names of variables and methods. And here is the result.

Right now the system has one serious bug (which I know about, but there may be more) that I do not know how to fix. But I hope I can fix it soon

This is the code from video:

require "GUI"
local random = math.random
 
local ui = GUI.new()
ui:setFitToWindow(true)
ui:addInput()
ui:build{
	{"Container", ID = "root", childs = {
		{"RowBox", childs = {
			{"RowSplit", childs = {
				{"RowBox", childs = {
					{"Label", ID = "mem", set = {heightFlag = 0, minHeight = 40, text = "LUA memory usage: 0 mb."}},
					{"ColSplit", childs = {
						{"RowBox", childs = {
							{"ColSplit", childs = {
								{"RowSplit", childs = {
									{"Panel", childs = {
										{"ColBox", childs = {
											{"RowBox", childs = {
												{"Label", ID = "sl1"},
												{"HSeparator"},
												{"HSlider", set = {min = 0, max = 10, callback = 
													function(obj)
														ui:getById("sl1"):setText(obj.value)
													end
												}}
											}},
											{"VSeparator"},
											{"VSlider"},
											{"VSeparator"},
										}}
									}},
									{"Panel", childs = {
										{"RowBox", childs = {
											{"Label", ID = "sl2"},
											{"HSeparator"},
											{"HSlider", set = {min = -10, max = 10, round = true, callback = 
												function(obj)
													ui:getById("sl2"):setText(obj.value)
												end
											}},
										}}
									}}
								}},
								{"Panel", childs = {
									{"ColBox", set = {margin = {8, 25, 8, 4}}, childs = {
										{"Button", set = {toggleMode = true, group = "sw1", text = "Switcher 1"}},
										{"Button", set = {toggleMode = true, group = "sw1", text = "Switcher 2"}},
										{"Button", set = {toggleMode = true, group = "sw1", text = "Switcher 3"}},
										{"Button", set = {enabled = false, toggleMode = true, group = "sw1", text = "Disabled\nswitcher 4"}},
									}}
								}}
							}}
						}},
						{"ColSplit", childs = {
							{"RowBox", set = {margin = {10, 10, 10, 10}}, childs = {
								{"Button", set = {text = "Button 1"}},
								{"Button", set = {text = "Button 2"}},
								{"Button", set = {enabled = false, text = "Button 3"}},
								{"Button", set = {text = "Button 4"}},
								{"ColBox", set = {margin = {10, 10, 10, 10}}, childs = {
									{"Button", set = {colorTransform = {random(), random(), random(), 1}, text = "Button 1"}},
									{"Button", set = {colorTransform = {random(), random(), random(), 1}, text = "Button 2"}},
									{"Button", set = {colorTransform = {random(), random(), random(), 1}, text = "Button 3"}},
								}}
							}},
							{"ColSplit", childs = {
								{"Panel", set = { color = random(0xffffff) }},
								{"ColSplit", childs = {
									{"RowSplit", childs = {
										{"Panel", set = { color = random(0xffffff) }},
										{"Panel", set = { color = random(0xffffff) }},
									}},
									{"Panel", set = { color = random(0xffffff) }},
								}}
							}}
 
						}}
					}}
				}},
				{"ColSplit", childs = {
					{"Panel", childs = {
						{"RowBox", childs = {
							{"CheckButton", set = {group = "checkBoxes1", text = "Group button 1"}},
							{"CheckButton", set = {enabled = false, group = "checkBoxes1", text = "Disabled group button 2"}},
							{"CheckButton", set = {group = "checkBoxes1", text = "Group button 3"}},
							{"HSeparator"},
							{"CheckButton", set = {text = "Button 1"}},
							{"CheckButton", set = {text = "Button 2"}},
							{"CheckButton", set = {text = "Button 3"}},
							{"HSeparator"},
							{"CheckBox", set = {group = "checkBoxes2", text = "Box 1"}},
							{"CheckBox", set = {group = "checkBoxes2", text = "Box 2"}},
							{"CheckBox", set = {enabled = false, group = "checkBoxes2", text = "Disabled box 3"}},
						}},
					}},
					{"RowBox", childs = {
						{"Button", set = {text = "Dialog", callback = function() 
							GUI:dialogPopup(300, 200,"Hey", "Simple dialog with buttons", {
								{text = "OK", callback = function() print("HIT OK") end},
								{text = "Cancel", callback = function() print("HIT CANCEL") end},
								{text = "My button1", callback = function() print("HIT My button1") end},
								{text = "My button2", callback = function() print("HIT My button2") end},
							}, function(dialog) print("CLOSED") end)
						end 
						}},
						{"Button", set = {text = "Alert", callback = function() 
							GUI:alertPopup(200, 150,"Attention!", "You are gonna be destroyed soon!!!", 
								function() 
									print("Alert closed") 
								end
							)
						end 
						}},
						{"Button", set = {text = "Popup text", callback = function() 
							GUI:dialogPopup(300, 150,"Caption", "Popup text 1... 2... 3... 4...", nil,
								function() 
									print("Closed") 
								end
							)
						end 
						}},
					}}
				}}
			}}
		}}
	}}
}
stage:addChild(ui)
local memText = ui:getById("mem")
local timer = 0
stage:addEventListener("enterFrame", function(e)
	timer += e.deltaTime
	if (timer > 1) then 
		timer = 0
		collectgarbage()
		local count = collectgarbage("count")
		memText:setText(("LUA memory usage: %f mb."):format(count / 1024))
	end
end)

P.S. I can share this version if someone needed

MoKaLux · July 2020

impressive work (at)rrraptor

rrraptor · July 2020

Still working on it from time to time :P

Today I made a scroll container, but there was wired bug(?):

I have a slider with knob on the right, if its Y position goes to -inf then its real size is set to 0, 0. But Pixel object thinks that everything is ok. Same thing happens to label object. So, my question is: why object size is affected by its position?

I already fixed the problem (had a division by 0 xD), but it took me 2 hours to figure it out

hgy29 · July 2020

getSize() (as opposed to getDimension) computes the size of the sprite including its children, and applying cliping and the local transform matrix. Internally it assumes coordinates will never exceed 1e30 (or -1e30), probably to avoid using -inf and +inf which can have impredictable effects. But in your case one value of your transform matrix is infinite, so the end result of the computations will have that infinte value propagated. I guess computations end up giving a negative size, which gideros corrects clamp to 0.

keszegh · July 2020

guys, it would be timely to put a big red warning on http://docs.giderosmobile.com/reference/gideros that is visible in all subpages that it is not maintained and a link to the uptodate wiki.

keszegh · July 2020

btw shouldn't Bitmap also have a getDimensions() function?

hgy29 · July 2020

If there was a consensus on that, I would just redirect those old pages to the new wiki. It seems to me that wiki is quite good now, and much easier to maintain than the old site was.

keszegh · July 2020

some people still prefer the old one, even if outdated, so i'd just link it for now - if i were you. but you can exercise your Maintainer status and do as you like (i myself have reluctantly but moved to the new wiki so i don't mind).

SinisterSoft · July 2020

@hgy29 I think yes, but leave the labs until all the docs have been moved across (I think some of the labs stuff is still not in the wiki - I'll try double-check this week sometime).

hgy29 · July 2020

keszegh said:
btw shouldn't Bitmap also have a getDimensions() function?

getDimensions() is a function of Sprite, so Bitmap has it too

hgy29 · July 2020

SinisterSoft said:
@hgy29 I think yes, but leave the labs until all the docs have been moved across (I think some of the labs stuff is still not in the wiki - I'll try double-check this week sometime).

Done, all links to the old reference are redirected to the wiki except for http://docs.giderosmobile.com/reference/labs

keszegh · July 2020

hgy29 said:

keszegh said:
btw shouldn't Bitmap also have a getDimensions() function?
getDimensions() is a function of Sprite, so Bitmap has it too

The wiki tells me different

hgy29 · July 2020

Yes, I guess it was first designed for Pixel but later but made available on all Sprites

keszegh · July 2020

hgy29 said:
Yes, I guess it was first designed for Pixel but later but made available on all Sprites

great, should be updated though.
although i'm not sure for a pure sprite what does it return, always (0,0)?

hgy29 · July 2020

yeah, I didn't try but it just return {0,0}

MoKaLux · August 2020

keszegh said:

hgy29 said:

keszegh said:
btw shouldn't Bitmap also have a getDimensions() function?
getDimensions() is a function of Sprite, so Bitmap has it too
The wiki tells me different

wiki updated

https://wiki.giderosmobile.com/index.php/Sprite#Methods

~~Shall I remove the functions from the Pixel class? Probably yes but I wait for your feedback.~~DONE

MoKaLux · August 2020

errata: I tested both getDimensions and setDimensions on a Sprite but got the error:

local sprite = Sprite.new()
sprite:getDimensions()
sprite:setDimensions(200, 200)

attempt to call method 'getDimensions' (a nil value)
attempt to call method 'setDimensions' (a nil value)

So I removed those from the wiki

note: gideros v 2020.9

MoKaLux · July 2021

hgy29 said:
Yes, I guess it was first designed for Pixel but later but made available on all Sprites

This doesn't work for me:

	local tex = Texture.new("ball.png")
	local bmp = Bitmap.new(tex)
	print(bmp:getDimensions())

v2021.6 + see https://forum.gideros.rocks/discussion/comment/63912/#Comment_63912

MoKaLux · August 2021

Up

MoKaLux · December 2021

MoKaLux said:
hgy29 said:
Yes, I guess it was first designed for Pixel but later but made available on all Sprites
This doesn't work for me:
	local tex = Texture.new("ball.png")
	local bmp = Bitmap.new(tex)
	print(bmp:getDimensions())
v2021.6 + see https://forum.gideros.rocks/discussion/comment/63912/#Comment_63912

Up, is it really suppose to work? I see in gideros github it's only for pixels, I will remove this function from the Sprite and Bitmap class if it is not implemented

hgy29 · December 2021

Yes, the lua binder for Sprite:getDimension() isn't implemented, go ahead and remove it from Sprite and Bitmap doc

Howdy, Stranger!

Categories

In this Discussion

Top Posters

GUI library (WIP)

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

GUI library (WIP)

Comments