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

GUI library (WIP)

2

Comments

  • @rrraptor Looking sharp there man :)

    I've just added fonts to my editor and am about to get text working on widgets.

    Likes: keszegh

    +1 -1 (+1 / -0 )Share on Facebook
  • rrraptorrrraptor Member
    edited November 2019
    Textured sliders! :smiley:


    Also, shadows now works with images, but I need to modify shader to make it look better :smile:


    P.S. Actualy it looks ok, if the image is not scaled.
    No, its not :disappointed:
    1123.png
    171 x 55 - 2K
  • I am curious how to use it? All in code?
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • rrraptorrrraptor Member
    edited November 2019
    @MoKaLux yes, but its simple I guess )))
    As an example:
    local slider = gui.Slider.new{
    	w = 200, -- width of slider
    	h = 4, -- height of the slider line (used by shape)
    	min = 0, -- minimum slider value (can be negative or floating point value)
    	max = 100, -- maximum slider value
    	value = 50, -- initial value
    	shape = { -- line shape parameters 
    		 -- there only 2 types availeble for now 
    		 --(Image and Shape) Shape is a builtin graphics (Path2D)
    		-- for image you can also set ninePatch flag  
    		type = gui.TShape,
     
    		name = "rect", -- shape form
    		style = "slider", -- color style
    	},
    	knob = { -- knob params
    		type = gui.TImage,
    		image = Texture.new("libs/GUI/gfx/PNG/blue_sliderDown.png", true),
    		imageArgs = {scale = .3}, -- standart keys for "set" function
    		ax = .5, -- x anchor
    		ay = 0.8, -- y anchor
    	},
    	label = { -- text parameters
    		style = "label", -- color style
    		display = "Right: ", -- text to display
    		decimals = 0,  -- how many decimals numbers
    		pad = 4, -- how many leading zeroes you want to use 
    		offsetY = 4, -- offset text position
    		flags = FontBase.TLF_RIGHT
    	},
    	onDrop = function(slider) print("Drop:",slider.value) end, -- callbacks
    	onDrag = function(knob) print("Drag:", knob.value) end,
    }
    slider:setPosition(10, 280)
    stage:addChild(slider)


    Buttons even more simplier:
    btn = gui.Button.new{
    	w = 100, h = 100, 
    	shadow = true,
    	shadowOX = 4,
    	shadowOY = 4,
    	shape = {
    		type = gui.TShape,
    		r = 50,
    		name = "circle",
    		style = "button", 
    	},
    	label = {
    		style = "label",
    		text = "This is a text button!",
    	},
    	callback = function() print("Hello, world") end
    }
    btn:setPosition(50, 50)
    stage:addChild(btn)


    Is it too complicated? :smile:

    Likes: MoKaLux, plicatibu

    +1 -1 (+2 / -0 )Share on Facebook
  • cool, thank you for the sneak peak :)
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • rrraptorrrraptor Member
    edited November 2019
    Hm, I have a qestion before Ill put myself in a situation where I need to refactor everything :wink:
    Is it better to implement callbacks as gideros events OR as function parameter like I have right now (see code above)? In other words:
    Which one is better?

    local btn = gui.Button.new{
    	w = 100, h = 50,
    	shape = {type = gui.TShape, style = "button", r = 10},
    	label = {style = "label", text = "Click me"},
    	callback = function(button, event) print(event.x, event.y) end
    }
    -- SLIDER:
    local slider = gui.Slider.new{
    	w = 200, h = 10, min = 0, max = 255,
    	shape = {type = gui.TShape, style = "slider", name = "rect"},
    	knob = {type = gui.TShape, style = "knob", name = "circle", r = 20},
    	onDrop = function(slider) print("Drop:",slider.value) end, 
    	onDrag = function(knob) print("Drag:", knob.value) end,
    }

    VS

    local btn = gui.Button.new{
    	w = 100, h = 50,
    	shape = {style = "button", r = 10},
    	label = {style = "label", text = "Click me"},
    }
    btn:addEventListener("onTap", function buttonClick(event)
    	print(event.x, event.y)
    end)
    -- SLIDER:
    local slider = gui.Slider.new{
    	w = 200, h = 10, min = 0, max = 255,
    	shape = {type = gui.TShape, style = "slider", name = "rect"},
    	knob = {type = gui.TShape, style = "knob", name = "circle", r = 20},
    }
    slider:addEventListener("onDrop", function(value)
    	print("Drop", value)
    end)
    slider:addEventListener("onDragStart", function(value)
    	print("DragStart", value)
    end)
    slider:addEventListener("onDrag", function(value)
    	print("Drag", value)
    end)
  • hgy29hgy29 Maintainer
    edited November 2019
    I'd say plain lua functions, Gideros event system has a bigger overhead.

    Likes: SinisterSoft

    +1 -1 (+1 / -0 )Share on Facebook
  • @rrraptor, looks good :)

    Plain functions are probably better in the end (as @hgy29 said) but EventListeners really only become a problem when you use too many.

  • I'd also be keen to learn what kinds of display everyone uses. I've been trying to keep my GUI editor window kind of small but am fast running out of screen real-estate. I'm thinking to make the application work with 1920x1080 but could compromise if others have inferior resolutions ;)
  • Apollo14Apollo14 Member
    edited November 2019
    antix said:

    I'd also be keen to learn what kinds of display everyone uses. I've been trying to keep my GUI editor window kind of small but am fast running out of screen real-estate. I'm thinking to make the application work with 1920x1080 but could compromise if others have inferior resolutions ;)

    It seems that phone resolutions are pretty high nowadays
    image

    https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions
    popular_screens_sizes_2019.jpg
    691 x 346 - 36K
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • Apollo14 said:

    I can't imagine anything more awful than CSS.

    antix said:

    I'd also be keen to learn what kinds of display everyone uses. I've been trying to keep my GUI editor window kind of small but am fast running out of screen real-estate. I'm thinking to make the application work with 1920x1080 but could compromise if others have inferior resolutions ;)

    It seems that phone resolutions are pretty high nowadays
    image

    https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions
    Google has set the following standard for the store: 323dpi 10inches

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
  • Ahh sorry guys.. I meant to say "What resolutions do your development machines use"?

    I don't think anyone would EVER want to use a touch interface to edit user interfaces :D
  • Apollo14Apollo14 Member
    edited December 2019
    antix said:

    Ahh sorry guys.. I meant to say "What resolutions do your development machines use"?

    Personally I use FullHD@1920x1080, but I guess it's sort of antique nowadays.

    I guess it's hard to tell what do developers use (they're different from general public)
    :s
    Some developers use 2k/4k monitors, it's convenient, sometimes ultra-wide 2560x1080.
    Sometimes smaller (1600x900 or even 1366x768 on an old laptop).
    And of course there're crApple Macbooks&Monitors with their own standarts.

    Likes: antix

    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
    +1 -1 (+1 / -0 )Share on Facebook
  • main computer 2560x1440 + 1920x1080 + 1080x1920 (vertical)
    laptop can't remember, but around 3600x1400 or something (retina type screen)

    Likes: antix

    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
    +1 -1 (+1 / -0 )Share on Facebook
  • rrraptorrrraptor Member
    edited December 2019
    Added scrollable list.

    Works a little bit buggy, but I'll fix it later :smile:

    Also, added vertical sliders and checkboxes


    Scroll_List.gif
    276 x 413 - 2M
    a.png
    290 x 326 - 5K
    +1 -1 (+3 / -0 )Share on Facebook
  • @rrraptor I use this one for scrolling:
    https://wiki.giderosmobile.com/index.php/UI_Scrollable_List

    The only thing missing is to scroll with the mouse wheel!
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • Honestly, my lib does not support mouse yet :smiley: Since it is based on Soda Gesture class. But Im using only 2 gestures for now (tap and drag), so I'll adapt class for mouse soon or later :)
  • @MoKaLux mouse scrolling is supported in 'Layout' class
    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
  • MoKaLuxMoKaLux Member
    edited December 2019
    I need to have a look again at it!

    @Apollo14 can I have your opinion on the "new" navigation please? Example:
    https://wiki.giderosmobile.com/index.php/Application:canOpenUrl

    I need some more feedback :)
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • @rrraptor I am looking forward to using your system :)
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • MoKaLux said:

    I need to have a look again at it!

    @Apollo14 can I have your opinion on the "new" navigation please? Example:
    https://wiki.giderosmobile.com/index.php/Application:canOpenUrl

    I need some more feedback :)

    oh I like such lists! I believe it's much more convenient now!

    Likes: MoKaLux

    > Newcomers roadmap: from where to start learning Gideros
    "What one programmer can do in one month, two programmers can do in two months." - Fred Brooks
    “The more you do coding stuff, the better you get at it.” - Aristotle (322 BC)
    +1 -1 (+1 / -0 )Share on Facebook
  • @rrraptor looking very cool man! I've just got my editor to a stage where it is actually able to be used to edit interfaces. I'll try to make a wee youtube video soon.

    What application do you use to create your GIF animations?
  • rrraptorrrraptor Member
    edited December 2019
    antix said:

    I've just got my editor to a stage where it is actually able to be used to edit interfaces.

    Congrats :smile:
    antix said:

    What application do you use to create your GIF animations?

    LICEcap
  • antixantix Member
    edited December 2019
    @rrraptor thanks, I'll check that out.

    I've made a video of my interface editor...

    Sorry for the crap quality, I'll do better next time. I really need to learn how to make nicer videos :)

    Its created using electron and NodeJS. Everything you see is pure JavaScript... no JQuery and no Bootstrap, just my own junk :D
    +1 -1 (+4 / -0 )Share on Facebook
  • rrraptorrrraptor Member
    edited December 2019
    I'm still trying to make this thing alive :D
    Fixed a few bugs; a bit of refactoring (and a lot more incoming :) )
    Added dropdown and grid components.

    And I have a question about gc.

    I tried to create a simple animation like this:
    function animTest()
    	local win = GUI.Window.new(...) -- create local instance of window
    	Timer.delayedCall(2000, function() -- run 2 seconds timer 
    		win:setInactive(true) -- disable window 
    		local mc = MovieClip.new{ -- run animation
    			{1, 60, win, {alpha = {1, 0, "linear"}}}
    		}
    		mc:addEventListener(Event.COMPLETE, function() -- when animation is finished
    			win:dispose() -- destroy window
    		end)
    	end)
    end
    BUT! I have a debug window that outputs the lua memory usage:
    function GameScene:update(e)
    	local dt = e.deltaTime
    	counter += dt
     
    	if (counter > 1) then -- once per second
    		local fps = (((1/dt)*100)//1) / 100
    		gui.params:setText("FPS", fps, true)
     
    		collectgarbage() -- "win" instance gets collected here and animation stops
    		gui.params:setText("Memory", collectgarbage("count"), true)
    		counter = 0
    	end
    	gui.params:setText("Update", #gui.updateArr)
    end
    The question is: is it correct behaviour? In theory, it is not correct, because this instace is used by MovieClip.
    Its not realy a problem, because I'll implement stack system, so it wont be collected. Just wondering :)
  • hgy29hgy29 Maintainer
    Accepted Answer
    What happens is that your MovieClip instance is collected because you don’t keep a reference to it, and thus the animation is stopped, listeners are discarded and win is also released.
    There is an optional and undocumented second parameter to MovieClip.new that can be used to tell MovieClip to keep a reference to itself while it is playing. Set it to true and see if that fixes your issue.
  • rrraptorrrraptor Member
    edited December 2019
    hgy29 said:

    What happens is that your MovieClip instance is collected because you don’t keep a reference to it, and thus the animation is stopped, listeners are discarded and win is also released.

    Ah, I forgot about movie clip reference :)
    hgy29 said:

    There is an optional and undocumented second parameter to MovieClip.new that can be used to tell MovieClip to keep a reference to itself while it is playing. Set it to true and see if that fixes your issue.

    It works, but Event.COMPLETE is not triggering.
  • hgy29hgy29 Maintainer
    Maybe the lua side of the movie clip is still garbage collected, with the listeners.
  • rrraptorrrraptor Member
    edited December 2019
    Hm, I was trying to make a shape cliper using stencil, but the edges always sharp...
    @hgy29 is there a way to make them smooth?)



    Test code:
    function rrect(t)
    	local r = t.r or 12
    	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)
    	shape:setFillColor(t.fill, 1)
    	shape:setLineColor(t.stroke, 1)
    	shape:setLineThickness(t.strokeW, t.strokeF)
    	return shape
    end
     
    local rr = rrect{w=100,h=100,strokeW=10,strokeF=0.3,stroke=0x0000ff,fill=0,r=24}
    rr:setPosition(50,50)
    rr:setStencilOperation{
    	stencilClear = true, 
    	stenciMask = 1, 
    	stencilWriteMask = 1, 
    	stencilRef = 1,
    	stencilFunc = Sprite.STENCIL_ALWAYS, 
    	depthPass = Sprite.STENCIL_REPLACE,
    }
    stage:addChild(rr)
     
    local px = Pixel.new(0xff0000,1, 20, 20)
    px:setStencilOperation{
    	stencilClear = false, 
    	stencilMask = 1, 
    	stencilRef = 1,
    	stencilFunc = Sprite.STENCIL_EQUAL,
    }
    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
    111 x 114 - 2K
Sign In or Register to comment.