Difference between revisions of "Dear ImGui"

From GiderosMobile
Line 32: Line 32:
 
stage:addChild(imgui)
 
stage:addChild(imgui)
  
 +
local IO = imgui:getIO()
 
-- we scale the font up
 
-- we scale the font up
imgui:ioSetFontGlobalScale(2)
+
IO:setFontGlobalScale(2)
  
 
-- we choose a style (default = Dark)
 
-- we choose a style (default = Dark)
Line 40: Line 41:
 
imgui:setClassicStyle()
 
imgui:setClassicStyle()
  
-- we create 2 variables to hold our main window status
+
-- we create a variable to hold our main window status
local mainWindowOpen, mainWindowDrawn
+
local mainWindowOpen = true
  
 
-- Dear ImGui runs on the game loop
 
-- Dear ImGui runs on the game loop
Line 49: Line 50:
  
 
-- 2 we build our GUI
 
-- 2 we build our GUI
mainWindowOpen, mainWindowDrawn =
+
if (mainWindowOpen) then -- if window exists
imgui:beginWindow(
+
local mainWindowDrawn = false
"Hello ImGui v"..ImGui._VERSION, -- main window title
+
mainWindowOpen, mainWindowDrawn =
true -- main window is expanded
+
imgui:beginWindow(
)
+
"Hello ImGui v"..ImGui._VERSION, -- main window title
if (mainWindowDrawn) then -- the variable is false when main window is collapsed
+
mainWindowOpen -- main window is expanded
imgui:text("Hello Dear ImGui!") -- we add a text element to our GUI
+
)
 +
if (mainWindowDrawn) then -- the variable is false when main window is collapsed
 +
imgui:text("Hello Dear ImGui!") -- we add a text element to our GUI
 +
end
 +
imgui:endWindow()
 
end
 
end
imgui:endWindow()
 
  
 
-- 3 we render our window
 
-- 3 we render our window
Line 64: Line 68:
 
end
 
end
  
-- this wouldn't work without listeners
 
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)
 
stage:addEventListener("enterFrame", enterFrame)
 
</source>
 
</source>
Line 79: Line 74:
 
'''Here we center our text and introduce some more functionalities'''
 
'''Here we center our text and introduce some more functionalities'''
 
<source lang="lua">
 
<source lang="lua">
require "ImGui"
+
require "ImGui_beta"
  
 
local imgui = ImGui.new()
 
local imgui = ImGui.new()
 
stage:addChild(imgui)
 
stage:addChild(imgui)
 
-- some imgui params
 
-- some imgui params
imgui:ioSetFontGlobalScale(2.5)
+
local IO = imgui:getIO()
 +
IO:setFontGlobalScale(2.5)
 
--imgui:setLightStyle()
 
--imgui:setLightStyle()
 
--imgui:setClassicStyle()
 
--imgui:setClassicStyle()
-- our window + some params
 
local mainWindowOpen, mainWindowDrawn
 
local window_flags = -- a full screen window
 
ImGui.WindowFlags_NoTitleBar |
 
ImGui.WindowFlags_NoCollapse |
 
ImGui.WindowFlags_NoResize |
 
ImGui.WindowFlags_NoMove |
 
ImGui.WindowFlags_NoBringToFrontOnFocus |
 
ImGui.WindowFlags_NoNavFocus
 
 
-- some vars
 
-- some vars
 
local xtext, xtext2 = "Centered Text", "Colored Text"
 
local xtext, xtext2 = "Centered Text", "Colored Text"
Line 106: Line 93:
  
 
-- 2 our GUI
 
-- 2 our GUI
imgui:setNextWindowPos(0, 0)
+
if (imgui:beginFullScreenWindow("Hello ImGui", nil)) then
imgui:setNextWindowSize(myappwidth, myappheight)
+
-- some spacing
mainWindowOpen, mainWindowDrawn = imgui:beginWindow("Hello ImGui", true, window_flags)
+
imgui:dummy(application:getContentWidth(), 32 * 2) -- imgui:dummy(w, h)
-- some spacing
+
-- a centered text
imgui:dummy(application:getContentWidth(), 32 * 2) -- imgui:dummy(w, h)
+
textW, _ = imgui:calcTextSize(xtext)
-- a centered text
+
textMid = (application:getContentWidth() - textW) / 2
textW, _ = imgui:calcTextSize(xtext)
+
imgui:dummy(textMid, 0)
textMid = (application:getContentWidth() - textW) / 2
+
imgui:sameLine(0, 0) -- puts the next element on the same line with no gap, for gaps use imgui:sameLine()
imgui:dummy(textMid, 0)
+
imgui:text(xtext)
imgui:sameLine(0, 0) -- puts the next element on the same line with no gap, for gaps use imgui:sameLine()
+
-- some spacing
imgui:text(xtext)
+
imgui:dummy(application:getContentWidth(), 32 * 4)
-- some spacing
+
-- a colored text
imgui:dummy(application:getContentWidth(), 32 * 4)
+
imgui:textColored(xtext2, 0xff00ff)
-- a colored text
+
imgui:endWindow()
imgui:textColored(xtext2, 0xff00ff)
 
imgui:endWindow()
 
  
-- 3 end
+
-- 3 end
 +
end
 
imgui:endFrame()
 
imgui:endFrame()
 
imgui:render()
 
imgui:render()
Line 129: Line 115:
  
 
-- the listeners
 
-- the listeners
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)
 
stage:addEventListener("enterFrame", enterFrame)
 
</source>
 
</source>
Line 144: Line 122:
 
<source lang="lua">
 
<source lang="lua">
 
require "ImGui"
 
require "ImGui"
 
+
-- Setup ImGui
 
local imgui = ImGui.new()
 
local imgui = ImGui.new()
 
stage:addChild(imgui)
 
stage:addChild(imgui)
 
-- some imgui params
 
-- some imgui params
imgui:ioSetFontGlobalScale(2.5)
+
local IO = imgui:getIO()
 +
IO:setFontGlobalScale(2.5)
 +
 
 
imgui:setClassicStyle()
 
imgui:setClassicStyle()
-- our window + some params
+
 
local mainWindowOpen, mainWindowDrawn
+
stage:addChild(imgui)
local window_flags =
+
 
ImGui.WindowFlags_NoTitleBar |
 
ImGui.WindowFlags_NoCollapse |
 
ImGui.WindowFlags_NoResize |
 
ImGui.WindowFlags_NoMove |
 
ImGui.WindowFlags_NoBringToFrontOnFocus |
 
ImGui.WindowFlags_NoNavFocus
 
 
-- some vars
 
-- some vars
 
local xtext = "Centered Text"
 
local xtext = "Centered Text"
 
local textW, textH, textMid -- for centered texts
 
local textW, textH, textMid -- for centered texts
local column = 0
 
  
-- the loop
+
-- image to draw
 +
local imageTex = Texture.new("gfx/image.jpg")
 +
 
 
function enterFrame(e)
 
function enterFrame(e)
 
-- 1 begin
 
-- 1 begin
Line 170: Line 145:
  
 
-- 2 our GUI
 
-- 2 our GUI
imgui:setNextWindowPos(0, 0)
+
if (imgui:beginFullScreenWindow("Hello ImGui", nil)) then
imgui:setNextWindowSize(myappwidth, myappheight)
 
mainWindowOpen, mainWindowDrawn =
 
imgui:beginWindow(
 
"Hello ImGui", -- window title
 
true, -- window is expanded
 
window_flags -- window flags
 
)
 
 
-- some spacing
 
-- some spacing
 
imgui:dummy(application:getContentWidth(), 32 * 2)
 
imgui:dummy(application:getContentWidth(), 32 * 2)
 
-- a centered text?
 
-- a centered text?
textW, _ = imgui:calcTextSize(xtext)
+
textW = imgui:calcTextSize(xtext)
 
textMid = (application:getContentWidth() - textW) / 2
 
textMid = (application:getContentWidth() - textW) / 2
 
imgui:dummy(textMid, 0) imgui:sameLine(0, 0) imgui:text(xtext)
 
imgui:dummy(textMid, 0) imgui:sameLine(0, 0) imgui:text(xtext)
Line 195: Line 163:
 
-- a grid of buttons
 
-- a grid of buttons
 
imgui:text("A grid of buttons")
 
imgui:text("A grid of buttons")
 +
 +
local i = 0
 
for x = 0,1,0.5 do
 
for x = 0,1,0.5 do
 
for y = 0,1,0.5 do
 
for y = 0,1,0.5 do
Line 202: Line 172:
 
end
 
end
 
imgui:popStyleVar()
 
imgui:popStyleVar()
column += 1
+
-- count elements
if column < 3 then imgui:sameLine()
+
i += 1
else column = 0
+
-- make new line on 3d element
end
+
if (i % 3 ~= 0) then imgui:sameLine() end
 
end
 
end
 
end
 
end
Line 212: Line 182:
 
-- an image button with text
 
-- an image button with text
 
imgui:text("An image button \nwith text")
 
imgui:text("An image button \nwith text")
if(imgui:imageButtonWithText(Texture.new("gfx/image.png"), "button", 16, 16)) then
+
if(imgui:imageButtonWithText(imageTex, "button", 16, 16)) then
 
print("pressed")
 
print("pressed")
 
end
 
end
 +
end
 +
 
imgui:endWindow()
 
imgui:endWindow()
  
Line 221: Line 193:
 
imgui:render()
 
imgui:render()
 
end
 
end
 
+
-- add listener to draw GUI
-- the listeners
 
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)
 
stage:addEventListener("enterFrame", enterFrame)
 
</source>
 
</source>

Revision as of 12:51, 10 November 2020

Supported platforms: Platform android.pngPlatform ios.pngPlatform mac.pngPlatform pc.pngPlatform html5.pngPlatform winrt.pngPlatform win32.png
Available since: Gideros 2020.9

Description

This is an implementation of the Dear ImGui library.

See full original documentation here: https://pthom.github.io/imgui_manual_online/manual/imgui_manual.html


This is a brand new plugin in Gideros Studio so it may take some time to document it thoroughly.

In the meantime, the author's GitHub is the best place to get info regarding Dear ImGui Gideros functions.

https://github.com/MultiPain/Gideros_ImGui
require 'ImGui'


And of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio. Enjoy!

DEAR IMGUI TEXT

Let's start with a text example

require "ImGui"

-- a Dear ImGui instance
local imgui = ImGui.new()
stage:addChild(imgui)

local IO = imgui:getIO()
-- we scale the font up
IO:setFontGlobalScale(2)

-- we choose a style (default = Dark)
--imgui:setLightStyle()
--imgui:setDarkStyle()
imgui:setClassicStyle()

-- we create a variable to hold our main window status
local mainWindowOpen = true

-- Dear ImGui runs on the game loop
function enterFrame(e)
	-- 1 we start ImGui
	imgui:newFrame(e)

	-- 2 we build our GUI
	if (mainWindowOpen) then -- if window exists
		local mainWindowDrawn = false
		mainWindowOpen, mainWindowDrawn =
			imgui:beginWindow(
				"Hello ImGui v"..ImGui._VERSION, -- main window title
				mainWindowOpen -- main window is expanded
			)
		if (mainWindowDrawn) then -- the variable is false when main window is collapsed
			imgui:text("Hello Dear ImGui!") -- we add a text element to our GUI
		end
		imgui:endWindow()	
	end

	-- 3 we render our window
	imgui:endFrame()
	imgui:render()
end

stage:addEventListener("enterFrame", enterFrame)

DEAR IMGUI CENTERED TEXT & COLORED TEXT

Here we center our text and introduce some more functionalities

require "ImGui_beta"

local imgui = ImGui.new()
stage:addChild(imgui)
-- some imgui params
local IO = imgui:getIO()
IO:setFontGlobalScale(2.5)
--imgui:setLightStyle()
--imgui:setClassicStyle()
-- some vars
local xtext, xtext2 = "Centered Text", "Colored Text"
local textW, textH, textMid -- for centered texts

-- the loop
function enterFrame(e)
	-- 1 begin
	imgui:newFrame(e)

	-- 2 our GUI
	if (imgui:beginFullScreenWindow("Hello ImGui", nil)) then
		-- some spacing
		imgui:dummy(application:getContentWidth(), 32 * 2) -- imgui:dummy(w, h)
		-- a centered text
		textW, _ = imgui:calcTextSize(xtext)
		textMid = (application:getContentWidth() - textW) / 2
		imgui:dummy(textMid, 0)
		imgui:sameLine(0, 0) -- puts the next element on the same line with no gap, for gaps use imgui:sameLine()
		imgui:text(xtext)
		-- some spacing
		imgui:dummy(application:getContentWidth(), 32 * 4)
		-- a colored text
		imgui:textColored(xtext2, 0xff00ff)
		imgui:endWindow()

		-- 3 end
	end
	imgui:endFrame()
	imgui:render()
end

-- the listeners
stage:addEventListener("enterFrame", enterFrame)

DEAR IMGUI BUTTONS

Here we make some buttons

require "ImGui"
-- Setup ImGui
local imgui = ImGui.new()
stage:addChild(imgui)
-- some imgui params
local IO = imgui:getIO()
IO:setFontGlobalScale(2.5)

imgui:setClassicStyle()

stage:addChild(imgui)

-- some vars
local xtext = "Centered Text"
local textW, textH, textMid -- for centered texts

-- image to draw
local imageTex = Texture.new("gfx/image.jpg")

function enterFrame(e)
	-- 1 begin
	imgui:newFrame(e)

	-- 2 our GUI
	if (imgui:beginFullScreenWindow("Hello ImGui", nil)) then
		-- some spacing
		imgui:dummy(application:getContentWidth(), 32 * 2)
		-- a centered text?
		textW = imgui:calcTextSize(xtext)
		textMid = (application:getContentWidth() - textW) / 2
		imgui:dummy(textMid, 0) imgui:sameLine(0, 0) imgui:text(xtext)
		-- some spacing
		imgui:dummy(application:getContentWidth(), 32 * 2)
		-- a button
		imgui:text("A button")
		imgui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, 0.5, 0.5)
		imgui:button(("x"), 128, 64) -- text, w, h
		imgui:popStyleVar()
		-- some spacing
		imgui:dummy(application:getContentWidth(), 32 * 1)
		-- a grid of buttons
		imgui:text("A grid of buttons")
		
		local i = 0
		for x = 0,1,0.5 do
			for y = 0,1,0.5 do
				imgui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, x, y)
				if(imgui:button(("[%.1f, %.1f]"):format(x,y), application:getContentWidth() / 3, 100)) then
					print(x, y)
				end
				imgui:popStyleVar()
				-- count elements
				i += 1
				-- make new line on 3d element
				if (i % 3 ~= 0) then imgui:sameLine() end
			end
		end
		-- some spacing
		imgui:dummy(application:getContentWidth(), 32 * 1)
		-- an image button with text
		imgui:text("An image button \nwith text")
		if(imgui:imageButtonWithText(imageTex, "button", 16, 16)) then
			print("pressed")
		end
	end
	
	imgui:endWindow()

	-- 3 end
	imgui:endFrame()
	imgui:render()
end
-- add listener to draw GUI
stage:addEventListener("enterFrame", enterFrame)

YOU WANT MORE?

Soon, God's willing

Methods

Events

Constants