GUI library (WIP)

antix · November 2019

@rrraptor Looking sharp there man

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

rrraptor · November 2019

Sliders!

rrraptor · November 2019

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 · November 2019

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

rrraptor · 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?

MoKaLux · November 2019

cool, thank you for the sneak peak

rrraptor · November 2019

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 · November 2019

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

antix · November 2019

@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 · November 2019

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 · 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

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

oleg · November 2019

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 · November 2019

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 · 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)

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 · December 2019

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

rrraptor · December 2019

Added scrollable list.

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

Also, added vertical sliders and checkboxes

MoKaLux · December 2019

@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 · December 2019

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 · December 2019

@MoKaLux mouse scrolling is supported in 'Layout' class

MoKaLux · 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

MoKaLux · December 2019

@rrraptor I am looking forward to using your system

Apollo14 · December 2019

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 · December 2019

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

antix said:
What application do you use to create your GIF animations?

LICEcap

antix · 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

rrraptor · December 2019

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 · December 2019

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

hgy29 · December 2019

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

rrraptor · 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)

Howdy, Stranger!

Categories

In this Discussion

Top Posters

GUI library (WIP)

Comments

VS

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

GUI library (WIP)

Comments

VS