Difference between revisions of "Dear ImGui"

From GiderosMobile
(imgui events?)
Line 21: Line 21:
 
'''And of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio.
 
'''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'''
 
<source lang="lua">
 
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)
 
</source>
 
  
 
== DEAR IMGUI CENTERED TEXT & COLORED TEXT ==
 
== DEAR IMGUI CENTERED TEXT & COLORED TEXT ==

Revision as of 05:36, 16 March 2021

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

ImGui.KeyChar
ImGui.KeyDown
ImGui.KeyUp
ImGui.MouseDown
ImGui.MouseHover
ImGui.MouseMove
ImGui.MouseUp
ImGui.MouseWheel
ImGui.TouchBegin
ImGui.TouchEnd
ImGui.TouchCancel
ImGui.TouchMove

Constants