Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
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 8
    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
  • MoKaLuxMoKaLux Member
    impressive work (at)rrraptor <3
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • rrraptorrrraptor Member
    edited July 28
    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.
  • keszeghkeszegh Member
    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
  • keszeghkeszegh Member
    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

    Dislikes: oleg, antix

    +1 -1 (+1 / -2 ) Share on Facebook
  • keszeghkeszegh Member
    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
  • keszeghkeszegh Member
    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
  • keszeghkeszegh Member
    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}
Sign In or Register to comment.