Dear ImGui Getting Started

From GiderosMobile
Revision as of 01:58, 9 October 2024 by MoKaLux (talk | contribs)

Dear ImGui for Gideros Mobile

The below are fully functional working demo you can copy/paste.

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

Gideros Dear ImGui embedded Demo

require "ImGui"

local imgui = ImGui.new()
stage:addChild(imgui)
imgui:setClassicStyle()

function onEnterFrame(e)
	imgui:newFrame(e.deltaTime)

	imgui:showDemoWindow()

	imgui:render()
	imgui:endFrame()
end

stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)

Your first Windows

require "ImGui"

application:setBackgroundColor(0x323232)

local imgui = ImGui.new()
stage:addChild(imgui)

local window01 = true -- this window can be closed
local windowdrawn = false -- boolean to hold our windows status

function onEnterFrame(e)
	-- 1. we start an ImGui frame
	imgui:newFrame(e.deltaTime)

	-- 2. we add some windows
	-- a window you can close
	if window01 then -- if window exists (not closed)
		window01, windowdrawn = imgui:beginWindow("window01", window01) -- title, isexpanded
		if windowdrawn then -- the variable is false when the window is collapsed
			-- its widgets
			imgui:text("Hello Dear ImGui!")
			imgui:newLine()
			imgui:textColored("This window can be moved, resized and closed!", 0x00ff7f, 1)
		end
		-- end of our first window
		imgui:endWindow()
	end

	-- a window to re-open closed windows
	imgui:setNextWindowPos(32*8, 32*8) -- x, y
	imgui:beginWindow("CONTROL", nil, ImGui.WindowFlags_NoResize) -- title, no close, windows flags
	-- and its widgets
	imgui:text("click the button to re-open a closed window")
	if imgui:button("OPEN", 64, 16) then
		window01 = true
	end
	imgui:newLine()
	imgui:textColored("This window cannot be moved, resized or closed!", 0xffff7f, 1)
	-- end of our second window
	imgui:endWindow()

	-- 3. we end the ImGui frame and render to screen
	imgui:endFrame()
	imgui:render()
end

Your first Widgets

require "ImGui"

application:setBackgroundColor(0x323232)

MyClass = Core.class(Sprite)

function MyClass:init()
	self.imgui = ImGui.new()
	self:addChild(self.imgui)
	-- some variables
	self.ischecked01 = true
	self.ischecked02 = false
	self.fruits = {"apple", "banana", "orange", "apricot"}
	self.currentfruit = 2 -- "orange" ImGui is 0 based
	self.dragvalue01 = 20
	-- listeners
	self:addEventListener(Event.ENTER_FRAME, self.onEnterFrame, self)
end

-- LOOP
function MyClass:onEnterFrame(e)
	-- 1 we start ImGui
	self.imgui:newFrame(e.deltaTime)

	-- 2 we build our GUI
	local ischanged = false -- has any value changed
	self.imgui:beginWindow("Hello ImGui!") -- this window cannot be closed
	-- some widgets
	self.imgui:text("Here are some Dear ImGui widgets.")
	-- buttons
	self.imgui:dummy(1*32, 0.5*32)
	self.imgui:bullet()
	if self.imgui:button("button##b01", 64, 16) then print("button 01 clicked") end
	self.imgui:sameLine()
	self.imgui:bullet()
	if self.imgui:button("button##b02", 64, 16) then print("button 02 clicked") end
	-- checkboxes
	self.imgui:dummy(1*32, 0.5*32)
	self.ischecked01, ischanged = self.imgui:checkbox("cb1", self.ischecked01)
	if ischanged then print("checkbox01 is "..tostring(self.ischecked01)) end
	self.ischecked02, ischanged = self.imgui:checkbox("vb2", self.ischecked02)
	if ischanged then print("checkbox02 is "..tostring(self.ischecked02)) end
	-- combo
	self.imgui:dummy(1*32, 0.5*32)
	self.currentfruit, ischanged = self.imgui:combo("fruits", self.currentfruit, self.fruits)
	if ischanged then print(self.currentfruit+1, self.fruits[self.currentfruit+1]) end -- Lua is 1 based
	-- sliders
	self.imgui:dummy(1*32, 0.5*32)
	self.dragvalue01, ischanged = self.imgui:dragInt("drag int", self.dragvalue01, 0.2, 0, 100, "%d",
		ImGui.SliderFlags_AlwaysClamp | ImGui.SliderFlags_NoInput)
	if ischanged then print(self.dragvalue01) end
	-- we end our window
	self.imgui:endWindow()

	-- 3 we end ImGui
	self.imgui:endFrame()
	self.imgui:render()
end

-- add MyClass Sprite to stage
stage:addChild(MyClass.new())

TabBar

require "ImGui"

local imgui = ImGui.new()
stage:addChild(imgui)

function onEnterFrame(e)
	imgui:newFrame(e.deltaTime)
	if imgui:beginTabBar("TABBAR") then
		if imgui:beginTabItem("Files") then
			imgui:textColored("File is ready", 0x00ff00, 1)
			imgui:text("Amp min:") imgui:sameLine()
			imgui:text("Amp max:") imgui:sameLine()
			imgui:endTabItem()
		end
		if imgui:beginTabItem("Microphone") then
			imgui:text("xxx min:") imgui:sameLine()
			imgui:text("xxx max:") imgui:sameLine()
			imgui:endTabItem()
		end
		imgui:endTabBar()
	end
	imgui:render()
	imgui:endFrame()
end

stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)

Table

require "ImGui"

local imgui = ImGui.new()
stage:addChild(imgui)

function onEnterFrame(e)
	imgui:newFrame(e.deltaTime)
	if imgui:beginTable("list", 3) then -- a 3 columns table
		imgui:tableSetupColumn("One") -- column 1 title
		imgui:tableSetupColumn("Two") -- column 2 title
		imgui:tableSetupColumn("Three") -- column 3 title
		imgui:tableHeadersRow() -- add titles to the Table
		for row = 0, 8 do
			imgui:tableNextRow()
			for column = 0, 3-1 do -- index starts at 0
				imgui:tableSetColumnIndex(column)
				imgui:text(("R%d C%d"):format(row, column))
			end
		end
		imgui:endTable()
	end
	imgui:render()
	imgui:endFrame()
end

stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)

Color Edit

require "ImGui"

local imgui = ImGui.new()
stage:addChild(imgui)

local window01 = true
local hexcolor = 0x00ff00

function onEnterFrame(e)
	-- 1. we start ImGui
	imgui:newFrame(e.deltaTime)
	-- 2. we add some child windows and build our GUI
	window01 = imgui:beginWindow("Window 01") -- no close button (X)
	if window01 then -- the variable is false when window is collapsed
		imgui:text("Hello Dear ImGui!")
		local isChanged = false
		hexcolor, isChanged = imgui:colorEdit3("color", hexcolor, 0)
		if isChanged then print(hexcolor) end
	end
	imgui:endWindow()	
	-- 3. we end the frame and render to screen
	imgui:endFrame()
	imgui:render()
end

stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)

Color Picker

require "ImGui"

local imgui = ImGui.new()
stage:addChild(imgui)

local window01 = true
local hexcolor = 0x00ff00

function onEnterFrame(e)
	-- 1. we start ImGui
	imgui:newFrame(e.deltaTime)
	-- 2. we add some child windows and build our GUI
	if window01 then -- the variable is false when window is collapsed
		imgui:text("Hello Dear ImGui!")
		local isChanged = false
		hexcolor, isChanged = imgui:colorPicker3("label", hexcolor, 0)
		if isChanged then print(hexcolor) end
	end
	-- 3. we end the frame and render to screen
	imgui:endFrame()
	imgui:render()
end

stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)

beginDisabled/endDisabled

require "ImGui"

local imgui = ImGui.new()
stage:addChild(imgui)

local window01 = true -- the starting state of window01, true = window is visible at start up

function onEnterFrame(e)
	-- 1. we start ImGui
	imgui:newFrame(e.deltaTime)

	-- 2. we add a child window and build our GUI
	if window01 then -- is window visible (not closed)?
		local windowdrawn = false -- is window expanded or colapsed?
		window01, windowdrawn = imgui:beginWindow( -- with close button
			"Hello ImGui v"..ImGui._VERSION, -- window title
			window01 -- returns window visibility
		)
		if windowdrawn then -- the variable is false when main window is collapsed
			imgui:text("This is an ImGui text.") -- we add a text element to our GUI
			imgui:textColored("This is a colored text.", 0xff00ff, 1)

			imgui:beginDisabled(true)
			imgui:text("This text is disabled!") -- the text is greyed out
			imgui:endDisabled()

			imgui:text("This text is not disabled.")
		end
		imgui:endWindow()
	end

	-- 3. we end the frame and render to screen
	imgui:endFrame()
	imgui:render()
end

stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)


More to come God's willing...


Dear ImGui

Retrieved from ‘https://wiki.gideros.rocks/index.php?title=Dear_ImGui_Getting_Started&oldid=23746’