imGui bindings

keszegh · August 2020

it would be great if when moving and positioning windows it could be forced to snap to some grid (e.g. with cell size 5x5 pixels). i did not find anything on the net about such functionality though.

rrraptor · August 2020

keszegh said:
it would be great if when moving and positioning windows it could be forced to snap to some grid (e.g. with cell size 5x5 pixels). i did not find anything on the net about such functionality though.

GRID_CELL @ 64
local mainWindowOpen, drawMainWindowOpen = true, false
local snapX,snapY = 0, 0
 
function enterFrame(e)
	imgui:newFrame(e)
 
	imgui:showDemoWindow()
 
	if (mainWindowOpen) then 
		local dragFlag = imgui:isMouseDragging(KeyCode.MOUSE_LEFT)
 
		if (not dragFlag) then 
			imgui:setNextWindowPos(snapX, snapY)
		end
 
		mainWindowOpen, drawMainWindowOpen = imgui:beginWindow("My window", mainWindowOpen)
 
 
		if (dragFlag) then 
			local wx, wy = imgui:getWindowPos()
			snapX = (wx // GRID_CELL) * GRID_CELL
			snapY = (wy // GRID_CELL) * GRID_CELL
		end
		if (drawMainWindowOpen) then 
			-- stuff
		end
		imgui:endWindow()
	end
 
 
	imgui:endFrame()
	imgui:render()
end

keszegh · August 2020

thanks, i thought of such a solution, good to see how to use isMouseDragging etc in practice. ideally it would be even better if even during dragging it would snap the window to closest grid point.

keszegh · August 2020

my automatic snapping window based on your code:

snapX,snapY={},{}
GRID_CELL @ 10
function ImGui:beginSnapWindow(label,flags)
		local dragFlag = imgui:isMouseDragging(KeyCode.MOUSE_LEFT)
 
		if (not dragFlag) and snapX[label] then  imgui:setNextWindowPos(snapX[label], snapY[label])  end
 
		imgui:beginWindow(label, flags )						
 
		if (dragFlag) then 
			local wx, wy = imgui:getWindowPos()
			snapX[label] = ((wx+GRID_CELL/2) // GRID_CELL) * GRID_CELL
			snapY[label] = ((wy+GRID_CELL/2) // GRID_CELL) * GRID_CELL
		end
end

keszegh · August 2020

keszegh said:
i tried to add some drag and drop functionality but imgui:isItemHovered(ImGui.HoveredFlags_AllowWhenBlockedByActiveItem)
does not seem to work. (the purpose would be to know if a button is hovered while dragging another)

this gives me a headache.

rrraptor · August 2020

keszegh said:

keszegh said:
i tried to add some drag and drop functionality but imgui:isItemHovered(ImGui.HoveredFlags_AllowWhenBlockedByActiveItem)
does not seem to work. (the purpose would be to know if a button is hovered while dragging another)
this gives me a headache.

I'll check it right now

Also

Added new function: setNextWindowSizeConstraints(minW, minH, maxW, maxH)
It affects beginWindow().

Example from gif:

-- x,y - current window position
-- cw,ch - current window size
-- dw,dh - desired window size
-- function must return desired size
local function myResizeCallback(x,y,cw,ch,dw,dh) 
	return 
		(dw // GRID_CELL) * GRID_CELL, 
		(dh // GRID_CELL) * GRID_CELL 
end
function enterFrame(e)
	imgui:newFrame(e)
 
	if (mainWindowOpen) then 	
		imgui:setNextWindowSizeConstraints(GRID_CELL, GRID_CELL, GRID_CELL * 8, GRID_CELL * 5)
		...
		mainWindowOpen, drawMainWindowOpen = imgui:beginWindow("My window", mainWindowOpen, nil, myResizeCallback)
		...
		imgui:endWindow()
	end
 
	imgui:endFrame()
	imgui:render()
end

Full demo code:

GRID_CELL @ 64
 
application:setBackgroundColor(0x323232)
local CW = application:getContentWidth()
local CH = application:getContentHeight()
 
for i = 1, CW, GRID_CELL do 
	local line = Pixel.new(0xffffff, 1, 1, CH)
	line:setX(i)
	stage:addChild(line)
end
 
for i = 1, CH, GRID_CELL do 
	local line = Pixel.new(0xffffff, 1, CW, 1)
	line:setY(i)
	stage:addChild(line)
end
 
require "ImGui_beta"
 
local imgui = ImGui.new()
stage:addChild(imgui)
local mainWindowOpen, drawMainWindowOpen = true, false
local snapX,snapY = 0, 0
local offsetX, offsetY = 0, 0
local dragFlag = false
 
local function myResizeCallback(x,y,cw,ch,dw,dh) 
	return 
		(dw // GRID_CELL) * GRID_CELL, 
		(dh // GRID_CELL) * GRID_CELL 
end
 
function enterFrame(e)
	imgui:newFrame(e)
 
	imgui:showDemoWindow()
 
	if (mainWindowOpen) then 		
		imgui:setNextWindowPos(snapX, snapY)
		imgui:setNextWindowSizeConstraints(GRID_CELL, GRID_CELL, GRID_CELL * 8, GRID_CELL * 5)
 
		mainWindowOpen, drawMainWindowOpen = imgui:beginWindow("My window", mainWindowOpen, nil, myResizeCallback)
		local mouseClicked = imgui:isMouseClicked(KeyCode.MOUSE_LEFT)
 
		if (not dragFlag and mouseClicked and imgui:isWindowHovered()) then dragFlag = true end
		if (imgui:isWindowFocused() and dragFlag) then
			local mx,my = imgui:getMousePos()
			local wx, wy = imgui:getWindowPos()
 
			if (mouseClicked or imgui:isMouseReleased(KeyCode.MOUSE_LEFT)) then 	
				offsetX, offsetY = mx - wx, my - wy
			end
 
			if (imgui:isMouseDragging(KeyCode.MOUSE_LEFT, 0)) then 
				snapX = ((mx - offsetX) // GRID_CELL) * GRID_CELL
				snapY = ((my - offsetY) // GRID_CELL) * GRID_CELL
			else
				dragFlag = false
			end
		end
 
		if (drawMainWindowOpen) then 
			-- do stuff
		end
		imgui:endWindow()
	end
 
	imgui:endFrame()
	imgui:render()
end
 
stage:addEventListener("mouseDown", function(e) imgui:onMouseDown(e) end)
stage:addEventListener("mouseUp", function(e) imgui:onMouseUp(e) end)
stage:addEventListener("mouseHover", function(e) imgui:onMouseHover(e) end)
stage:addEventListener("mouseMove", function(e) imgui:onMouseMove(e) end)
stage:addEventListener("mouseWheel", function(e) imgui:onMouseWheel(e) end)
stage:addEventListener("keyDown", function(e) imgui:onKeyDown(e) end)
stage:addEventListener("keyUp", function(e) imgui:onKeyUp(e) end)
stage:addEventListener("keyChar", function(e) imgui:onKeyChar(e) end)
stage:addEventListener("enterFrame", enterFrame)

rrraptor · August 2020

keszegh said:

keszegh said:
i tried to add some drag and drop functionality but imgui:isItemHovered(ImGui.HoveredFlags_AllowWhenBlockedByActiveItem)
does not seem to work. (the purpose would be to know if a button is hovered while dragging another)
this gives me a headache.

My mistake, sorry. Found and fixed. Dll updated.

keszegh · August 2020

thanks. i just changed from imgui.dll to imgui_beta.dll and the same code which worked now crashes. do you have any guess what has changed that can cause this? (no error message naturally)

rrraptor · August 2020

keszegh said:
thanks. i just changed from imgui.dll to imgui_beta.dll and the same code which worked now crashes. do you have any guess what has changed that can cause this? (no error message naturally)

Maybe because of beginWindow() ? Can you post how you use it? If not then you have to find out it by yourself and then let me know.

I dont know how to properly name new image function with background color

rrraptor · August 2020

keszegh said:
(no error message naturally)

Thats because of ImGui assert function, which I cant redefine.

keszegh · August 2020

is this good?
imgui:beginWindow("Project###Project List Classic", ImGui.WindowFlags_NoResize | ImGui.WindowFlags_NoSavedSettings )
or this?
imgui:beginWindow("Project###Project List Classic", nil, ImGui.WindowFlags_NoResize| ImGui.WindowFlags_NoSavedSettings )

latter works, thanks for pointing in the right direction.

rrraptor · August 2020

keszegh said:
is this good?
imgui:beginWindow("Project###Project List Classic", ImGui.WindowFlags_NoResize| ImGui.WindowFlags_NoSavedSettings )

That should work.
imgui:beginWindow("Project###Project List Classic", nil, ImGui.WindowFlags_NoResize| ImGui.WindowFlags_NoSavedSettings )

keszegh · August 2020

thanks, your example code for snapping window position+size works except that when you grab a window first then the window jumps to the mouse position.

also, can you check your code for those two flags mentioned earlier for sliders (logarithmic and clamping), perhaps there is also some issue there. thanks

keszegh · August 2020

well, i have various troubles with this snapping stuff, so for now i stay with the simple solution of snapping only when drag is finished.

keszegh · August 2020

after one week of working on the imgui menu of my app you can check my progress in the attached video.. i'm quite satisfied with imgui so far, it can do 90% of what i want, the rest @rrraptor added to me or i can slightly change my plans when they get too exotic.
also it can be made quite nice (and custom) with the styling options.

videos:
gui demo video 1
gui demo video 2

(some of the image buttons need to be redrawn, they are juts temporary)

keszegh · August 2020

could you help me how to left align text on button using
StyleVar_ButtonTextAlign ?ty

rrraptor · August 2020

keszegh said:
could you help me how to left align text on button using
StyleVar_ButtonTextAlign ?ty

Use

imgui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, x, y)

local c = 0
for x = 0,1,0.5 do 
	for y = 0,1,0.5 do 
		imgui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, x, y)
		imgui:button(("[%.1f, %.1f]"):format(x,y), 200, 100)
		imgui:popStyleVar()
 
		c += 1
		if c < 3 then 
			imgui:sameLine()
		else
			c = 0
		end
	end
end

rrraptor · August 2020

keszegh said:
after one week of working on the imgui menu of my app you can check my progress in the attached video.. i'm quite satisfied with imgui so far, it can do 90% of what i want, the rest @rrraptor added to me or i can slightly change my plans when they get too exotic.
also it can be made quite nice (and custom) with the styling options.
videos:
gui demo video 1
gui demo video 2

(some of the image buttons need to be redrawn, they are juts temporary)

It would be better with docking, right? There is a docking branch, so I can use it instead.

P.S. Added new

ImGui:imageFilled(texture, w, h, [tint_color = 0xffffff, 1, bg_color = 0xffffff, 0, border_color = 0xffffff, 0, uv0x = 0, uv0y = 0, uv1x = 1, uv1y = 1])

keszegh · August 2020

yes, docking could be handy indeed.

keszegh · August 2020

rrraptor said:

keszegh said:
could you help me how to left align text on button using
StyleVar_ButtonTextAlign ?ty

Use

imgui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, x, y)

local c = 0
for x = 0,1,0.5 do 
	for y = 0,1,0.5 do 
		imgui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, x, y)
		imgui:button(("[%.1f, %.1f]"):format(x,y), 200, 100)
		imgui:popStyleVar()
 
		c += 1
		if c < 3 then 
			imgui:sameLine()
		else
			c = 0
		end
	end
end

thanks, very good examples, this topic will be a good quickstart later too for anybody who wants to use imgui (perhaps these snippets could be collected on the wiki).

actually i did the same but used popStyleVar(ImGui.StyleVar_ButtonTextAlign) instead of popStyleVar() as that seemed logical, but it was not correct, as it turns out.

rrraptor · August 2020

@keszegh
Added docking support. See new branch, dll name is different, so you can use both versions if you want.
https://github.com/MultiPain/Gideros_ImGui/tree/docking

require "ImGui_beta_docking" --< note "_docking"
...
-- add config flags
imgui:ioAddConfigFlags(ImGui.ConfigFlags_DockingEnable)

https://github.com/MultiPain/Gideros_ImGui/tree/docking#docking-beta

ImGuiID is unsigned integer.

New constants:

ImGui.WindowFlags_NoDocking
 
ImGui.ConfigFlags_DockingEnable
 
ImGui.DockNodeFlags_None
ImGui.DockNodeFlags_KeepAliveOnly
ImGui.DockNodeFlags_NoDockingInCentralNode
ImGui.DockNodeFlags_PassthruCentralNode
ImGui.DockNodeFlags_NoSplit
ImGui.DockNodeFlags_NoResize
ImGui.DockNodeFlags_AutoHideTabBar
 
ImGui.Col_DockingPreview
ImGui.Col_DockingEmptyBg

Hope I did not forget anything.

MoKaLux · August 2020

I have started using Rrraptor ImGui

I will start the wiki when I am more experienced with it.

MoKaLux · August 2020

first question please:
How do I make a full screen window?
The window should be fixed and cover all the screen.

ps: I am using the gideros plugin (not the beta nor beta_docking)

Thank you.

It is very impressive so far and I have only scratched the surface. Should start the wiki soon

God's willing.

rrraptor · August 2020

MoKaLux said:
first question please:
How do I make a full screen window?
The window should be fixed and cover all the screen.

There is no default function for that, but you can make it by your own.

 ImGui:setNextWindowPos(0, 0)
ImGui:setNextWindowSize(application:getContentWidth(), application:getContentHeight())
ImGui:pushStyleVar(ImGui.StyleVar_WindowRounding, 0)
ImGui:pushStyleVar(ImGui.StyleVar_WindowBorderSize, 0)
local window_flags = ImGui.WindowFlags_NoTitleBar | ImGui.WindowFlags_NoCollapse | ImGui.WindowFlags_NoResize | ImGui.WindowFlags_NoMove l ImGui.WindowFlags_NoBringToFrontOnFocus | ImGui.WindowFlags_NoNavFocus
ImGui:beginWindow(“main”, nil, window_flags)
ImGui:popStyleVar(2)
...
ImGui:endWindow()

MoKaLux said:
ps: I am using the gideros plugin (not the beta nor beta_docking)

But keep in mind that some functions were changed and github page is up to date (I hope

)

Also, you can use all 3 versions in parallel (but beta versions only works for windows)

All you need is to change argument in “require” function .

MoKaLux · August 2020

thank you Rrraptor, very much appreciated

I have tried all three versions of the plugin but I decided to stick with the official so the wiki matches gideros.

Now for ImGui wiki, is it possible to do it like we did for the other classes/plugins? I don't think so, it is too big of a task. What do you think?
https://wiki.giderosmobile.com/index.php/Dear_ImGui

EDIT: So instead I suggest (keszegh) to create the wiki page a bit differently. We will do it by adding all various ImGui elements as examples (like pils) with an image to show the result. This will still look professional imho.

keszegh · August 2020

@MoKaLux , you shouldn't hurry with a wiki page, as ImGui binding is still evolving.
even original imgui is not documented in a wiki style, just inline, see
https://github.com/ocornut/imgui/blob/master/imgui.h
and
https://github.com/pthom/imgui_manual
together with
https://github.com/MultiPain/Gideros_ImGui/blob/master/README.md
these links should be enough to start working on ImGui as the original and the lua syntax is very similar (on purpose).

also some of the code examples from this topic could be added.

rrraptor · August 2020

@keszegh so whats the problem with SliderFlags?

SliderFlags_ClampOnInput: works for int and float.
SliderFlags_Logarithmic: works only with float sliders.
SliderFlags_NoRoundToFormat: idk how to us it

SliderFlags_NoInput: also works for both.

keszegh · August 2020

rrraptor said:
@keszegh so whats the problem with SliderFlags?

SliderFlags_ClampOnInput: works for int and float.
SliderFlags_Logarithmic: works only with float sliders.
SliderFlags_NoRoundToFormat: idk how to us it
SliderFlags_NoInput: also works for both.

well, i wanted to use logarithmic on an int slider. that won't work then, i can live with that - or i can emulate a log int slider with a float slider i guess somehow by manually rounding.

also i wanted to use clamponinput on an int slider and an int filled slider. will these work? for me it seemed they don't.

rrraptor · August 2020

keszegh said:
also i wanted to use clamponinput on an int slider and an int filled slider. will these work? for me it seemed they don't.

Works for me...

imgui:text("SliderFlags_ClampOnInput")
imgui:setNextItemWidth(300)
sliderValue = imgui:sliderInt("sliderInt", sliderValue, 0, 100, nil, ImGui.SliderFlags_ClampOnInput)
imgui:setNextItemWidth(300)
sliderValue = imgui:filledSliderInt("filledSliderInt", false, sliderValue, 0, 100, nil, ImGui.SliderFlags_ClampOnInput)
imgui:setNextItemWidth(300)
sliderValue = imgui:filledSliderInt("filledSliderInt [reversed]", true, sliderValue, 0, 100, nil, ImGui.SliderFlags_ClampOnInput)
imgui:separator()

keszegh · August 2020

thanks for the slider code snippets, it turns out how i called them was a mess.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

imGui bindings

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

imGui bindings

Comments