Difference between revisions of "ImGui Examples"

From GiderosMobile
(Created page with "__TOC__ Here you will find various resources to help you create GUI with ImGui in Gideros Studio. '''note''': you may have to provide your own assets (fonts, gfx, …). ===...")
 
Line 1: Line 1:
 
__TOC__
 
__TOC__
  
Here you will find various resources to help you create GUI with ImGui in Gideros Studio.
+
Here you will find various resources to help you create GUI with '''[[Dear ImGui]]''' in Gideros Studio.
  
 
'''note''': you may have to provide your own assets (fonts, gfx, …).
 
'''note''': you may have to provide your own assets (fonts, gfx, …).

Revision as of 16:03, 16 March 2021

Here you will find various resources to help you create GUI with Dear ImGui in Gideros Studio.

note: you may have to provide your own assets (fonts, gfx, …).

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)

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

Template:Welcome!