Dear ImGui

From GiderosMobile
Revision as of 04:17, 16 March 2021 by MoKaLux (talk | contribs)

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.

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"

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"

-- the loop
function enterFrame(e)
	local CW = application:getContentWidth()
	
	-- 1 begin
	imgui:newFrame(e)
	
	-- 2 our GUI
	if (imgui:beginFullScreenWindow("Hello ImGui", nil)) then
		-- some spacing
		imgui:dummy(CW, 32 * 2) -- imgui:dummy(w, h)
		-- a centered text
		local textW = imgui:calcTextSize(xtext)
		local textMid = (CW - 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(CW, 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"

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

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

	local CW = application:getContentWidth()
	-- 2 our GUI
	if (imgui:beginFullScreenWindow("Hello ImGui", nil)) then
		-- some spacing
		imgui:dummy(CW, 32 * 2)
		-- a centered text?
		local textW = imgui:calcTextSize(xtext)
		local textMid = (CW - textW) / 2
		imgui:dummy(textMid, 0) 
		imgui:sameLine(0, 0) 
		imgui:text(xtext)
		-- some spacing
		imgui:dummy(CW, 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(CW, 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)

File open/save dialog project example

GitHub

Methods

ImGui.new initializes ImGui
ImGui:showDemoWindow displays an ImGui demo

WORK IN PROGRESS...

Events

Constants