Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
imGui bindings - Page 9 — Gideros Forum

imGui bindings

1679111215

Comments

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

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • rrraptorrrraptor Member
    edited 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
    snap.gif
    414 x 335 - 190K
    snap.gif 189.8K
    +1 -1 (+2 / -0 )Share on Facebook
  • 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.
  • keszeghkeszegh Member
    edited 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 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.
  • rrraptorrrraptor Member
    edited 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)
    snap2.gif
    649 x 387 - 197K
    +1 -1 (+2 / -0 )Share on Facebook
  • 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.
  • 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)
  • rrraptorrrraptor Member
    edited 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 :)

    image2.jpg
    462 x 206 - 47K

    Likes: keszegh, MoKaLux

    +1 -1 (+2 / -0 )Share on Facebook
  • keszegh said:

    (no error message naturally)

    Thats because of ImGui assert function, which I cant redefine.
  • keszeghkeszegh Member
    edited 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.
  • 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 )
  • 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
  • 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.
  • keszeghkeszegh Member
    edited 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)
    imgui_fragmenter_demo02.mkv_snapshot_00.00_[2020.08.29_16.00.02].jpg
    1280 x 720 - 34K
    +1 -1 (+3 / -0 )Share on Facebook
  • could you help me how to left align text on button using
    StyleVar_ButtonTextAlign ?ty
  • rrraptorrrraptor Member
    edited 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
    az2.jpg
    329 x 347 - 39K

    Likes: keszegh

    az2.jpg 39.2K
    +1 -1 (+1 / -0 )Share on Facebook
  • rrraptorrrraptor Member
    edited 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])
  • 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.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • rrraptorrrraptor Member
    edited 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.
  • I have started using Rrraptor ImGui :)
    I will start the wiki when I am more experienced with it.

    Likes: keszegh

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
  • 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.
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • rrraptorrrraptor Member
    edited 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 :D)

    Also, you can use all 3 versions in parallel (but beta versions only works for windows) :wink: All you need is to change argument in “require” function .

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited 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.
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • @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.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • rrraptorrrraptor Member
    edited 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.
    sliders_flags.gif
    680 x 92 - 215K
  • keszeghkeszegh Member
    edited 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.
  • rrraptorrrraptor Member
    edited 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()
    sliders_flags2.gif
    688 x 197 - 63K

    Likes: keszegh

    +1 -1 (+1 / -0 )Share on Facebook
  • thanks for the slider code snippets, it turns out how i called them was a mess.

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.