ImGui new thread

MoKaLux · March 2021

dear giderians, I would like to start a new thread regarding imgui and its implementation in gideros. The old imgui thread is a bit outdated imho. Let's start fresh and I will try to update the wiki as we gather more tips and use case on how to use imgui in gideros.

imgui original thread starts at: http://forum.giderosmobile.com/discussion/comment/63655/#Comment_63655

Thank you

rrraptor · March 2021

I'm very busy right now, so I don't have time to update the plugin.
In general, to work with "ImGui" you only need a few lines:

require "ImGui"
ui = ImGui.new()
stage:addChild(ui)
--  to add fonts use this example: github.com/MultiPain/Gideros_ImGui#minimal-example
 
stage:addEventListener("enterFrame", function(e)
	ui:newFreame(e)
 
	-- paste ur code here --
 
	ui:render()
	ui:endFrame()
end)
-- to resize GUI window you can add a listener like that:
stage:addEventListener("applicationResize", function()
	local minX, minY, maxX, maxY = application:getLogicalBounds()
	local W, H = maxX - minX, maxY - minY
 
	ui:setPosition(minX, minY)
	ui:getIO():setDisplaySize(W, H)
end)

If you do not know how to do something, then first look at the source code "imgui_demo.cpp". To convert code from C++ you need just a little bit of knowledge of C/C++. The function names are completely identical (except that the first letter must be in lowercase). If you don't find something that you need, you can ask me, or contact the discord community.

Also there is a few demos:
https://github.com/MultiPain/Gideros_examples/tree/master/ImGuiTablesDemo
https://github.com/MultiPain/Gideros_examples/tree/master/ImGuiFileDialogDemo
https://github.com/MultiPain/Gideros_examples/tree/master/ImGuiDockingDemo

MoKaLux · March 2021

thank you rrraptor for all the links that is a very good start to get us going.

Rrraptor you already did an enormous amount of work and it is now our turn to contribute

PS: you don't need to update ImGui. Imho when we have a stable plugin we don't need to update it until someone really needs a new feature then we might update the plugin

SinisterSoft · March 2021

@rrraptor I was trying to add an image to a drawlist, but I'm not sure how to do it. I know there is an add image function but an example would be great.

rrraptor · March 2021

SinisterSoft said:
@rrraptor I was trying to add an image to a drawlist, but I'm not sure how to do it. I know there is an add image function but an example would be great.

Seems like I forgot to update API page

Updated now: https://github.com/MultiPain/Gideros_ImGui/blob/master/README.md#draw-lists-commands
(only for images)

I don’t know how the "imageQuad" will work with the texture regions, but the rest should work without problems.

Images anchor points always in the center

Will be fixed...
https://github.com/MultiPain/Gideros_ImGui/blob/0fc7b66a0d7b19ed9204710db6095c60ea4c9336/main.cpp#L8774

rrraptor · March 2021

-- small example:
function ImGui:test(texture,w,h)
	local px, py = self:getCursorScreenPos()
	local drawList = self:getWindowDrawList()
 
	drawList:addImage(texture, px, py, px + w, py + h, 0xffffff, 1)
	--drawList:addImageQuad(texture, px, py, px + w, py, px + w, py + h, px, py + h, 0x0000ff, 1)
	--drawList:addImageRounded(texture, px, py, px + w, py + h, 0x0000ff, 1, 12, ImGui.CornerFlags_All)
 
	self:dummy(w, h)
end

SinisterSoft · March 2021

Sorted.

Now I just need the button widths to be able to be a set width..

MoKaLux · March 2021

quick question please

In the game loop we call ImGui:newFrame(e) but ImGui:newFrame() also works

.
In the wiki do I need to write the e as a parameter or can I leave it. If it is best to add e as a parameter is e the delta time?
Thank you.
https://github.com/gideros/gideros/blob/master/plugins/imgui/source/Common/imgui_bindings.cpp#L1736

wiki: https://wiki.gideros.rocks/index.php/ImGui:newFrame

MoKaLux · March 2021

ImGui:setLightStyle in enterFrame? I read in some early imgui posts that you could do the styling in the init function:

self.imgui = ImGui.new()
self:addChild(self.imgui)
self.imgui:setLightStyle()

But that doesn't work for me, I have to put it in the enterFrame to see the light style!?

rrraptor · March 2021

MoKaLux said:
quick question please In the game loop we call ImGui:newFrame(e) but ImGui:newFrame() also works .
In the wiki do I need to write the e as a parameter or can I leave it. If it is best to add e as a parameter is e the delta time?
Thank you.
https://github.com/gideros/gideros/blob/master/plugins/imgui/source/Common/imgui_bindings.cpp#L1736

wiki: https://wiki.gideros.rocks/index.php/ImGui:newFrame

Well, idk if imgui really needs frame delta time, but I guess its better to use it. Functions that uses it:

ui:getIO():getDeltaTime() -- event.deltaTime
ui:getTime() -- imgui life time (in seconds)

MoKaLux said:
ImGui:setLightStyle in enterFrame? I read in some early imgui posts that you could do the styling in the init function:
self.imgui = ImGui.new()
self:addChild(self.imgui)
self.imgui:setLightStyle()
But that doesn't work for me, I have to put it in the enterFrame to see the light style!?

It works on very first launch, but breaks after restart. I guess that is because Im not cleaning memory correctly...but not sure.
I know how fix it, but memory leak is still possible.

EDIT: https://github.com/gideros/gideros/pull/506

rrraptor · March 2021

As a quick solution you can use style editor:

ui:showLuaStyleEditor("Title")

CTRL+V to gideros, wrap it into a function, call this function...profit!

MoKaLux · March 2021

Sorry but I don't see any difference between:
setAutoUpdateCursor(true) and
setAutoUpdateCursor(false)

rrraptor · March 2021

MoKaLux said:
Sorry but I don't see any difference between:
setAutoUpdateCursor(true) and
setAutoUpdateCursor(false)

The system cursor should change. It uses "application:set("cursor", cursorName)" function. So, I have no idea why it does not work...

https://github.com/gideros/gideros/blob/db839bdfc6bbbb91524a687f23a8289bc24fa500/plugins/imgui/source/Common/imgui_bindings.cpp#L1754
https://github.com/gideros/gideros/blob/db839bdfc6bbbb91524a687f23a8289bc24fa500/plugins/imgui/source/Common/imgui_bindings.cpp#L377

SinisterSoft · March 2021

@rrraptor If you get 5 mins, can you look to see if there is a way of setting the button width (rather than it being automatic) - it would make things much neater.

rrraptor · March 2021

Hmmm, it might be the same problem as with styles.

MoKaLux said:
Sorry but I don't see any difference between:
setAutoUpdateCursor(true) and
setAutoUpdateCursor(false)

Probably fixed.

SinisterSoft said:
@rrraptor If you get 5 mins, can you look to see if there is a way of setting the button width (rather than it being automatic) - it would make things much neater.

It will take more than 5 mins

Fixed this 3 for now.
Image size and button size now separated arguments.

SinisterSoft · March 2021

@rrraptor Centering is one option, how about left or right justify too? (eg menu buttons would usually be left justified)

rrraptor · March 2021

SinisterSoft said:
@rrraptor Centering is one option, how about left or right justify too? (eg menu buttons would usually be left justified)

For this 3 there is an anchor point that you can set. For text buttons there will be a direction argument (Left or Right align image, and anchor point for text

).

MoKaLux · March 2021

colorButton I don't really understand this button

So it displays a color and shows some info about that color. Can we click on it and does it respond to clicks?

	-- enterframe loop
	local bdrawn = false
	local colorb01, bdrawn = imgui:colorButton("my text button", 0xff00ff, 1)
	if bdrawn then print(e.deltaTime) end

~~It's not really a button~~ EDIT: this may be usefull for drag'n drop scenario?

EDIT2: a nice tutorial https://eliasdaler.github.io/using-imgui-with-sfml-pt2/

TIP: ImGui could be very very handy for mobile controls

rrraptor · March 2021

MoKaLux said:
So it displays a color and shows some info about that color. Can we click on it and does it respond to clicks?

It responds, but for some reason I decided to return color and then press flag...
https://github.com/MultiPain/Gideros_ImGui/blob/63dce85996763d5650c961d141fbd6519a0464f2/main.cpp#L3908
I'll fix that

For now, you can use

local _,_,press = ui:colorButton(...)
if (press) then ... end

But it looks ugly, sorry xD

MoKaLux · March 2021

thanks rrraptor, I am not using it right now, this is for the wiki https://wiki.gideros.rocks/index.php/Dear_ImGui
I will wait for the update, no hurry

SinisterSoft · March 2021

@MoKaLux The wiki is looking good, I'm glad you're adding more to imgui - it's a great addition to Gideros.

keszegh · March 2021

MoKaLux said:

EDIT2: a nice tutorial https://eliasdaler.github.io/using-imgui-with-sfml-pt2/

nice resources on this page about programming in general, programming in lua, imgui etc., thanks.

rrraptor · March 2021

A little bit of progress

rrraptor · March 2021

So, its done...?

keszegh · March 2021

on the bottom right 3-tuple of buttons i guess the text should be aligned right and not the image.

rrraptor · March 2021

keszegh said:
on the bottom right 3-tuple of buttons i guess the text should be aligned right and not the image.

My image have alpha channel. Its size is set to [64 x 64] (original image size is [512x512])
Or I don’t understand what you mean.

Hm, it seems that I messed up with frame padding on Y axis, fixing it right now...

SinisterSoft · March 2021

Would you be able to show the source code - so we can figure out to code it so they group?

rrraptor · March 2021

SinisterSoft said:
Would you be able to show the source code - so we can figure out to code it so they group?

Its very simple

local w = ui:getWindowContentRegionWidth()
bw = w / 3
 
for y = 0, 1, 0.5 do 
	for x = 0, 1, 0.5 do 
		ui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, x, y)
		-- 64x64 - image size
		ui:scaledImageButtonWithText(texture, text, 64, 64, bw, 50)
		ui:popStyleVar()
		ui:sameLine(0, 1)
	end
	ui:newLine()
end
 
for y = 0, 1, 0.5 do 
	for x = 0, 1, 0.5 do 
		ui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, x, y)
		-- right aligned image
		ui:scaledImageButtonWithText(texture, text, 64, 64, bw, 50, nil, nil, ImGui.Dir_Right)
		ui:popStyleVar()
		ui:sameLine(0, 1)
	end
	ui:newLine()
end

Or you can create a table with new table API

SinisterSoft · March 2021

If you submit your update to github, hopefully @hgy29 will roll out an update soon, I think he is looking at an issue on the Mac with LiquidFun, etc...

hgy29 · March 2021

Actually I was about to build 2021.3

rrraptor · March 2021

hgy29 said:
Actually I was about to build 2021.3

https://github.com/gideros/gideros/pull/507
I haven't fixed all problems with image buttons, but most of them, I guess

Howdy, Stranger!

Categories

In this Discussion

Top Posters

ImGui new thread

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

ImGui new thread

Comments