Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
ImGui new thread - Page 21 — Gideros Forum

ImGui new thread



  • piepie Member
    I think I am finally slowly grasping the basics of ImGui but I have some questions (and more will come, I guess) :

    given the code:
    require "ImGui"
    local ui = ImGui.new() 
    local IO = ui:getIO()
    local FontAtlas = IO:getFonts()
    local fonts = FontAtlas:addFonts{ {"fonts/CharisSIL-Regular.ttf", 18}, {"fonts/CharisSIL-Bold.ttf", 28},  {"fonts/CharisSIL-Italic.ttf", 18} }
    function onWindowResize(rt)
    	local minX, minY, maxX, maxY = application:getLogicalBounds()
    	local sx = application:getLogicalScaleX()
    	local sy = application:getLogicalScaleY()
    	ui:setScale(1 / sx, 1 / sy)
    	-- move UI to top left corner
    	ui:setPosition(minX, minY)
    	-- resize display area
    	IO:setDisplaySize((maxX - minX) * sx, (maxY - minY) * sy)
    	if rt then
    		rt = {
    			x  = minX,
    			X  = maxX,
    			y  = minY,
    			Y  = maxY,
    			Sx = sx,
    			Sy = sy,
    			w  = (maxX - minX) * sx,
    			h  = (maxY - minY) * sy
    		return rt
    ss = onWindowResize(true)
    window01 = true
    window02 = true
    window03 = true
    local function drawWindow()
    	ui:setNextWindowSize(ss.w, ss.h)
    	ui:setNextWindowPos(ss.x, ss.y)
    	window02 = ui:beginWindow(
    		"Window02", --title
    		nil,  -- no close button
    		ImGui.WindowFlags_NoCollapse | ImGui.WindowFlags_NoResize |ImGui.WindowFlags_MenuBar | 	ImGui.WindowFlags_NoBringToFrontOnFocus | ImGui.WindowFlags_NoMove
    	local word1 = ui:text("John")
    	local word3 = ui:text("\"McBulldog\"")
    	local word4 = ui:text("Doe")
    	local button1 = ui:button("Button 1", ss.w/3, ss.h/10)
    	local button2 = ui:button("Button 2", ss.w/3, ss.h/10)
    	local button3 = ui:button("Button 3", ss.w/3, ss.h/10)
    	local button4 = ui:button("Button 4", ss.w, ss.h/5)
    	if (button1) then print("button1") 
    	elseif (button2) then print("button2") 
    	elseif (button3) then print("button3") 
    	elseif (button4) then print("button4")
    local function onDrawGui(e)
    stage:addEventListener("enterFrame", onDrawGui)
    stage:addEventListener("applicationResize", onWindowResize)

    I have this gui

    Looking at the picture:

    1) It seems that the whole content is not "centered": the distances marked with the circled numbers 1 and 2 is not equal. I guess it is due to some kind of preset margin/padding? How do I fix this? :smile:

    2) How do I center/reposition elements on screen inside imgui?
    I drew some red circles between the elements placed using ui:sameLine(): can we change that distance between elements, but only on certain elements?

    3) If I want to screen center my first line of text (word1, word3, word4 in code) how can I do it?

    4) What is the grey band (I marked it with 3) between the title and the content of the window? Where does it come from?

    5) How do I style buttons? Change colors, alignment etc? I've found the section Style setters/getters on github but I am not smart enough to figure out how to use it.

    6) I noticed that in some examples you make use of ui:newLine() to add elements on a new line; but this example works without it. Is it better to use it anyway?

    Thank you a lot! I hope my questions are not too much annoying :)
  • about 4) perhaps you've set some windowflag e.g. ImGui.WindowFlags_MenuBar?
  • piepie Member
    keszegh said:

    about 4) perhaps you've set some windowflag e.g. ImGui.WindowFlags_MenuBar?

    Nice spot @keszegh ! I forgot to remove it in my tests.. Thank you :blush:
  • for styling, here is some code of mine from my Gui:init():
     self.imgui = ImGui.new(nil, false, true, false)
      --self.imgui = ImGui.new(nil, true, true, false)  
      local imgui=self.imgui  
      self.IO = imgui:getIO()
      local IO=self.IO
      self.style = imgui:getStyle()
      local Style=self.style
      imgui:pushStyleVar(ImGui.StyleVar_WindowRounding, 0)
      imgui:pushStyleVar(ImGui.StyleVar_ScrollbarRounding, 0)
      --imgui:pushStyleVar(ImGui.StyleVar_FrameRounding, 4)--rounding of buttons etc.
      imgui:pushStyleVar(ImGui.StyleVar_ItemSpacing, 4,4)
      imgui:pushStyleVar(ImGui.StyleVar_WindowPadding, 4,4)
      imgui:pushStyleVar(ImGui.StyleVar_GrabMinSize, 5)
      imgui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, 0, 0.5)
      imgui:setStyleColor(ImGui.Col_WindowBg, 0x202020, 1.00)
      --imgui:setStyleColor(ImGui.Col_WindowBg, 0x808080, 1.00)
      --imgui:setStyleColor(ImGui.Col_FrameBg, 0x404040, 1.00)
      --imgui:setStyleColor(ImGui.Col_FrameBgHovered, 0x404040, 1.00)
      --imgui:setStyleColor(ImGui.Col_FrameBgActive, 0x505050, 1.00)
      imgui:setStyleColor(ImGui.Col_FrameBg, 0x606060, 1.00)
      imgui:setStyleColor(ImGui.Col_FrameBgHovered, 0x707070, 1.00)
      imgui:setStyleColor(ImGui.Col_FrameBgActive, 0x808080, 1.00)
      imgui:setStyleColor(ImGui.Col_CheckMark, 0xE6E6E6, 1.00)
      imgui:setStyleColor(ImGui.Col_TitleBg, 0x606060, 1.00)
      imgui:setStyleColor(ImGui.Col_TitleBgActive,  0x606060, 1.00)
      imgui:setStyleColor(ImGui.Col_TitleBgCollapsed,  0x606060, 1.0)
      imgui:setStyleColor(ImGui.Col_PopupBg, 0x303030, 1.00)
      imgui:setStyleColor(ImGui.Col_SliderGrab, 0x909090, 1.00)
      imgui:setStyleColor(ImGui.Col_SliderGrabActive, 0x909090, 1.00)
      imgui:setStyleColor(ImGui.Col_Button, 0x606060, 1.00)
      imgui:setStyleColor(ImGui.Col_ButtonHovered, 0x707070, 1.00)
      imgui:setStyleColor(ImGui.Col_ButtonActive, 0xa0a0a0, 1.00)
      --imgui:setStyleColor(ImGui.Col_Header, 0x606060, 0.31)
      --imgui:setStyleColor(ImGui.Col_HeaderHovered, 0x707070, 0.80)
      --imgui:setStyleColor(ImGui.Col_HeaderActive, 0x707070, 1.00)
      imgui:setStyleColor(ImGui.Col_Header, 0x606060, 0.2)  
      imgui:setStyleColor(ImGui.Col_HeaderHovered, 0x606060, 0.40)
      imgui:setStyleColor(ImGui.Col_HeaderActive, 0x606060, 0.70)
      imgui:setStyleColor(ImGui.Col_MenuBarBg, 0x606060, 1.00)  
      --imgui:setStyleColor(ImGui.Col_ChildBg, 0x303030, 1)  
      imgui:setStyleColor(ImGui.Col_ChildBg, 0x404040, 1)  
      imgui:setStyleColor(ImGui.Col_Text, 0xE6E6E6, 1.00)
      imgui:setStyleColor(ImGui.Col_TextDisabled, 0x7F7F7F, 1.00)
      --imgui:setStyleColor(ImGui.Col_Border, 0x6D6D7F, 0.50)
      --imgui:setStyleColor(ImGui.Col_Border, 0xaDaD0F, 1)  
      imgui:setStyleColor(ImGui.Col_BorderShadow, 0x000000, 0.00)
      imgui:setStyleColor(ImGui.Col_ScrollbarBg, 0x050505, 0.53)
      imgui:setStyleColor(ImGui.Col_ScrollbarGrab, 0x4F4F4F, 1.00)
      imgui:setStyleColor(ImGui.Col_ScrollbarGrabHovered, 0x686868, 1.00)
      imgui:setStyleColor(ImGui.Col_ScrollbarGrabActive, 0x828282, 1.00)
      imgui:setStyleColor(ImGui.Col_Separator, 0x6D6D7F, 0.50)
      imgui:setStyleColor(ImGui.Col_SeparatorHovered, 0x1966BF, 0.78)
      imgui:setStyleColor(ImGui.Col_SeparatorActive, 0x1966BF, 1.00)
      imgui:setStyleColor(ImGui.Col_ResizeGrip, 0x4296F9, 0.25)
      imgui:setStyleColor(ImGui.Col_ResizeGripHovered, 0x4296F9, 0.67)
      imgui:setStyleColor(ImGui.Col_ResizeGripActive, 0x4296F9, 0.95)
      imgui:setStyleColor(ImGui.Col_Tab, 0x2D5993, 0.86)
      imgui:setStyleColor(ImGui.Col_TabHovered, 0x4296F9, 0.80)
      imgui:setStyleColor(ImGui.Col_TabActive, 0x3268AD, 1.00)
      imgui:setStyleColor(ImGui.Col_TabUnfocused, 0x111A25, 0.97)
      imgui:setStyleColor(ImGui.Col_TabUnfocusedActive, 0x22426C, 1.00)
      imgui:setStyleColor(ImGui.Col_PlotLines, 0x9B9B9B, 1.00)
      imgui:setStyleColor(ImGui.Col_PlotLinesHovered, 0xFF6D59, 1.00)
      imgui:setStyleColor(ImGui.Col_PlotHistogram, 0xE5B200, 1.00)
      imgui:setStyleColor(ImGui.Col_PlotHistogramHovered, 0xFF9900, 1.00)
      imgui:setStyleColor(ImGui.Col_TextSelectedBg, 0x4296F9, 0.35)
      imgui:setStyleColor(ImGui.Col_DragDropTarget, 0xFFFF00, 0.90)
      imgui:setStyleColor(ImGui.Col_NavHighlight, 0x4296F9, 1.00)
      imgui:setStyleColor(ImGui.Col_NavWindowingHighlight, 0xFFFFFF, 0.70)
      imgui:setStyleColor(ImGui.Col_NavWindowingDimBg, 0xCCCCCC, 0.0)
      imgui:setStyleColor(ImGui.Col_ModalWindowDimBg, 0xCCCCCC, 0.0)
      --imgui antialias:
      --local backupAAL = style:getAntiAliasedLines()
      ---- draw image with border
      --IO:setKeyRepeatDelay(100) -- default 0.25
      --IO:setKeyRepeatRate(100) -- default 0.05  
      --assert(io.open("|R|resources/Roboto-Regular.ttf", "rb") ~= nil, "File not found!")
      local FontAtlas = IO:getFonts()
      local Roboto_font = FontAtlas:addFont(_resources.."Roboto-Regular.ttf",26, {  
          oversampleH = 2,
          oversampleV = 2,
          --glyphs = {
          --ranges = {ImGui.GlyphRanges_Cyrillic}

    Likes: pie

    +1 -1 (+1 / -0 )Share on Facebook
  • piepie Member
    Thank you @keszegh that shed a lot of light here :smiley:
    Thanks to your snippet I learned of the existence of
    pushStyleVar() and popStyleVar() and even
    	ui:pushStyleColor(ui.Col_Button, 0x606060, 1.00)
    	ui:pushStyleColor(ui.Col_ButtonHovered, 0x707070, 1.00)
    	ui:pushStyleColor(ui.Col_ButtonActive, 0xa0a0a0, 1.00)
    	local button1 = ui:button("Button 1", ss.w/3, ss.h/10)
    that works almost as pushFont and popFont to style single elements or a bunch of them.

    I wonder if there is a more friendly method to write this but this answers to questions #2 and #5

  • yes, that is the way to do it, push a style and then pop it. you can write functions to push/pop multiple style elements at once.
  • @pie currently I cant answer on each question. For styling you can use:

    Likes: pie

    +1 -1 (+1 / -0 )Share on Facebook
  • piepie Member
    Thank you @rrraptor I managed to understand how to center stuff too, I don't know if it's the best way to do it but I'd say it works. I've put together a super commented hello world project with styling example if someone else is interested.
    If you have time to validate it (ie I didn't do extreme mistakes o:) ) feel free to post it on the wiki, in your github or wherever it might be found without looking inside this blobby thread :wink:

    there is still a question without an answer:
    6) I noticed that in some examples you make use of ui:newLine() to add elements on a new line; but this example works without it. Is it better to use it anyway?

    Thank you
  • piepie Member
    Hi, is it possible to drag to scroll a clipper clipped list, as we do everyday on our phones with internet browsers, social network and stuff?

    I've found this thread but I am not able to make this work due to my lack of knowledge: should this be compiled directly into imgui source?
    I tried translating it to lua but I guess I did something wrong because I don't know anything about C/C++ o:)


    This is my lua translation, and it breaks because it can find getCurrentContext() - it finds something if I call it using a single dot but then it breaks on the next line.
    And it can't find getIO().mouseDelta
    local function ScrollWhenDraggingOnVoid(delta, mouse_button)
        local g = ui:getCurrentContext()
        local window = g.CurrentWindow
        local hovered = false
        local held = false
        local button_flags = ImGui.ButtonFlags_MouseButtonLeft | ImGui.ButtonFlags_MouseButtonRight | ImGui.ButtonFlags_MouseButtonMiddle
        if g.HoveredId == 0 then -- If nothing hovered so far in the frame (not same as IsAnyItemHovered()!)
            ui:buttonBehavior(window:rect(), window:getID("##scrolldraggingoverlay"), hovered, held, button_flags)
    		if (held and delta.x  ~= 0) then
    			ui:setScrollX(window, window.Scroll.x + delta.x)
    		if (held and delta.y ~= 0) then
    			ui:setScrollY(window, window.Scroll.y + delta.y)
    --and just before ui:end() which I don't have, so I put it before ui:endWindow()
    local mouse_delta = ui:getIO().mouseDelta
    ScrollWhenDraggingOnVoid(0 - mouse_delta.y, ImGui.MouseButton_Middle)
    Any idea or workaround is appreciated, thank you :smile:

  • rrraptorrrraptor Member
    edited November 9
    @pie all windows and context stuff is internal and not availiable in lua version. You can use something from here, but there is no binding for "buttonBehavior".

    Also, there is no properties, e.g.
    is wrong, but
    IO = ui:getIO()
    local dx, dy = IO:getMouseDelta()
    is correct

    I can add all default "behavior" stuff in lua verison if needed

    Likes: pie

    +1 -1 (+1 / -0 )Share on Facebook
  • piepie Member
    rrraptor said:

    I can add all default "behavior" stuff in lua verison if needed

    If that could "unlock" every imgui potential and the previous workaround I posted I'd love to use it, but I don't know how much work is involved to do it.. if you have time to do it I guess it is always better to have more than less options o:) :*

    thank you
  • keszegh said:

    rrraptor said:

    As a work around you can do this after "newFrame()" call:

    if (ui:isKeyPressed(KeyCode.TAB) and ui:isKeyDown(KeyCode.CTRL)) then 
    	IO:setModKeysDown(KeyCode.MODIFIER_CTRL, false)
    It does not solves the problem, but atleast removes the popup.
    this seems to work, thanks a lot.
    hi @rrraptor , there seems to be an imgui fix for the ctrl+tab issue:
    let me know when i can and how should i change my code to rely on this instead of your workaround. ty
  • keszegh said:

    hi @rrraptor , there seems to be an imgui fix for the ctrl+tab issue:
    let me know when i can and how should i change my code to rely on this instead of your workaround. ty

    Well, last stable version is still 1.88, so I would wait for 1.89
  • rrraptor said:

    keszegh said:

    hi @rrraptor , there seems to be an imgui fix for the ctrl+tab issue:
    let me know when i can and how should i change my code to rely on this instead of your workaround. ty

    Well, last stable version is still 1.88, so I would wait for 1.89
    that's fine, thanks
Sign In or Register to comment.