GUI library (WIP)

antix

@rrraptor Looking sharp there man

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

rrraptor

Sliders!

rrraptor

Textured sliders!


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


P.S. Actualy it looks ok, if the image is not scaled.
No, its not

MoKaLux

I am curious how to use it? All in code?

rrraptor

@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?

MoKaLux

cool, thank you for the sneak peak

rrraptor

Hm, I have a qestion before Ill put myself in a situation where I need to refactor everything
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)

hgy29

I'd say plain lua functions, Gideros event system has a bigger overhead.

antix

@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.

antix

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

Apollo14

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


https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions

oleg

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


https://deviceatlas.com/blog/most-used-smartphone-screen-resolutions

Google has set the following standard for the store: 323dpi 10inches

antix

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

Apollo14

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)

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.

SinisterSoft

main computer 2560x1440 + 1920x1080 + 1080x1920 (vertical)
laptop can't remember, but around 3600x1400 or something (retina type screen)

rrraptor

Added scrollable list.

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

Also, added vertical sliders and checkboxes

MoKaLux

@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!

rrraptor

Honestly, my lib does not support mouse yet 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

Apollo14

@MoKaLux mouse scrolling is supported in 'Layout' class

MoKaLux

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

MoKaLux

@rrraptor I am looking forward to using your system

Apollo14

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!

antix

@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?

rrraptor

antix said:

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

Congrats

antix said:

What application do you use to create your GIF animations?

LICEcap

antix

@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

rrraptor

I'm still trying to make this thing alive
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

hgy29

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.

rrraptor

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.

hgy29

Maybe the lua side of the movie clip is still garbage collected, with the listeners.

rrraptor

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)