Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
GUI library (WIP) - Page 3 — Gideros Forum

GUI library (WIP)

13»

Comments

  • hgy29hgy29 Maintainer
    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.
  • rrraptorrrraptor Member
    edited December 2019
    Ok, I did it diferently :D 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)
    rrect_clip.png
    142 x 133 - 7K
    +1 -1 (+2 / -0 )Share on Facebook
  • rrraptorrrraptor Member
    edited 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 :smiley:

    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 :wink:
    GODOT_CONTROLS_HIERARCHY.png
    432 x 908 - 76K
    wtf.png
    592 x 400 - 80K
    +1 -1 (+5 / -0 )Share on Facebook
  • impressive work (at)rrraptor <3
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • rrraptorrrraptor Member
    edited 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? :D

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

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • hgy29hgy29 Maintainer
    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.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • 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.

    Likes: SinisterSoft

    +1 -1 (+1 / -0 )Share on Facebook
  • btw shouldn't Bitmap also have a getDimensions() function?
  • hgy29hgy29 Maintainer
    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.

    Likes: SinisterSoft, MoKaLux

    Dislikes: oleg, antix

    +1 -1 (+2 / -2 )Share on Facebook
  • 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).
  • SinisterSoftSinisterSoft Maintainer
    @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).
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • hgy29hgy29 Maintainer
    keszegh said:

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

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

    @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

    Likes: SinisterSoft

    +1 -1 (+1 / -0 )Share on Facebook
  • 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
  • hgy29hgy29 Maintainer
    Yes, I guess it was first designed for Pixel but later but made available on all Sprites
  • 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)?
  • hgy29hgy29 Maintainer
    yeah, I didn't try but it just return {0,0}
  • MoKaLuxMoKaLux Member
    edited 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

    Likes: keszegh

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited 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
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • MoKaLuxMoKaLux Member
    edited 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
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • Up
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • 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 :/
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • hgy29hgy29 Maintainer
    Yes, the lua binder for Sprite:getDimension() isn't implemented, go ahead and remove it from Sprite and Bitmap doc

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.