Difference between revisions of "Dear ImGui Getting Started"

From GiderosMobile
(Created page with "__NOTOC__ '''Dear ImGui for Gideros Mobile''' == Gideros Dear ImGui embedded Demo == <syntaxhighlight lang="lua"> require "ImGui" local imgui = ImGui.new() stage:addChild(im...")
 
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
__NOTOC__
+
__TOC__
 
'''Dear ImGui for Gideros Mobile'''
 
'''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 ==
 
== Gideros Dear ImGui embedded Demo ==
Line 14: Line 18:
  
 
imgui:showDemoWindow()
 
imgui:showDemoWindow()
 +
 +
imgui:render()
 +
imgui:endFrame()
 +
end
 +
 +
stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)
 +
</syntaxhighlight>
 +
 +
== Dear ImGui Style Editor ==
 +
<syntaxhighlight lang="lua">
 +
require "ImGui"
 +
 +
local imgui = ImGui.new()
 +
stage:addChild(imgui)
 +
imgui:setClassicStyle()
 +
 +
function onEnterFrame(e)
 +
imgui:newFrame(e.deltaTime)
 +
 +
imgui:showStyleEditor()
  
 
imgui:render()
 
imgui:render()
Line 48: Line 72:
 
imgui:textColored("This window can be moved, resized and closed!", 0x00ff7f, 1)
 
imgui:textColored("This window can be moved, resized and closed!", 0x00ff7f, 1)
 
end
 
end
 +
-- end of our first window
 
imgui:endWindow()
 
imgui:endWindow()
 
end
 
end
Line 61: Line 86:
 
imgui:newLine()
 
imgui:newLine()
 
imgui:textColored("This window cannot be moved, resized or closed!", 0xffff7f, 1)
 
imgui:textColored("This window cannot be moved, resized or closed!", 0xffff7f, 1)
−
-- end of our first window
+
-- end of our second window
 
imgui:endWindow()
 
imgui:endWindow()
  
Line 69: Line 94:
 
end
 
end
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
== Your first Widgets ==
 +
<syntaxhighlight lang="lua">
 +
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())
 +
</syntaxhighlight>
 +
 +
== Your first Callback ==
 +
<syntaxhighlight lang="lua">
 +
require "ImGui"
 +
 +
MyClass = Core.class(Sprite)
 +
 +
function MyClass:init()
 +
self.imgui = ImGui.new()
 +
self:addChild(self.imgui)
 +
-- we create a variable to hold our window state
 +
self.window01 = true -- window01 exists at start up
 +
-- listeners
 +
self:addEventListener("enterFrame", self.onEnterFrame, self)
 +
end
 +
 +
local function stepSize(callback_data, step)
 +
local w, h = callback_data:getDesiredSize()
 +
w = (w // step) * step
 +
h = (h // step) * step
 +
return w, h
 +
end
 +
 +
-- LOOP
 +
function MyClass:onEnterFrame(e)
 +
-- 1. we start ImGui
 +
self.imgui:newFrame(e.deltaTime)
 +
-- 2. we build our GUI
 +
-- window size step is 32 (last argument, that is passed to the callback as second argument)
 +
self.imgui:setNextWindowSizeConstraints(200, 200, 400, 400, stepSize, 32)
 +
if self.window01 then -- is window01 existant?
 +
local windowdrawn = false -- is window01 colapsed?
 +
self.window01, windowdrawn = self.imgui:beginWindow(
 +
"Hello ImGui", -- window title
 +
self.window01 -- is window01 existant?
 +
)
 +
if windowdrawn then -- the variable is false when window01 is collapsed
 +
self.imgui:textWrapped("Lorem ipsum dolor sit amet. Id similique delectus"..
 +
"ad aspernatur optio eos ipsam explicabo non galisum quisquam sed delectus"..
 +
"veniam ut autem ipsam?")
 +
end
 +
self.imgui:endWindow()
 +
end
 +
-- 3. we end ImGui
 +
self.imgui:endFrame()
 +
self.imgui:render()
 +
end
 +
 +
-- START THE APP
 +
stage:addChild(MyClass.new())
 +
</syntaxhighlight>
 +
 +
== TabBar ==
 +
<syntaxhighlight lang="lua">
 +
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)
 +
</syntaxhighlight>
 +
 +
== Table ==
 +
<syntaxhighlight lang="lua">
 +
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)
 +
</syntaxhighlight>
 +
 +
== Color Edit ==
 +
<syntaxhighlight lang="lua">
 +
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)
 +
</syntaxhighlight>
 +
 +
== Color Picker ==
 +
<syntaxhighlight lang="lua">
 +
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)
 +
</syntaxhighlight>
 +
 +
== beginDisabled/endDisabled ==
 +
<syntaxhighlight lang="lua">
 +
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)
 +
</syntaxhighlight>
 +
 +
 +
'''More to come God's willing...'''
  
  
 
'''[[Dear ImGui]]'''
 
'''[[Dear ImGui]]'''
 
{{GIDEROS IMPORTANT LINKS}}
 
{{GIDEROS IMPORTANT LINKS}}

Latest revision as of 02:25, 9 October 2024

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)

Dear ImGui Style Editor

require "ImGui"

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

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

	imgui:showStyleEditor()

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

Your first Callback

require "ImGui"

MyClass = Core.class(Sprite)

function MyClass:init()
	self.imgui = ImGui.new()
	self:addChild(self.imgui)
	-- we create a variable to hold our window state
	self.window01 = true -- window01 exists at start up
	-- listeners
	self:addEventListener("enterFrame", self.onEnterFrame, self)
end

local function stepSize(callback_data, step)
	local w, h = callback_data:getDesiredSize()
	w = (w // step) * step
	h = (h // step) * step
	return w, h
end

-- LOOP
function MyClass:onEnterFrame(e)
	-- 1. we start ImGui
	self.imgui:newFrame(e.deltaTime)
	-- 2. we build our GUI
	-- window size step is 32 (last argument, that is passed to the callback as second argument)
	self.imgui:setNextWindowSizeConstraints(200, 200, 400, 400, stepSize, 32)
	if self.window01 then -- is window01 existant?
		local windowdrawn = false -- is window01 colapsed?
		self.window01, windowdrawn = self.imgui:beginWindow(
			"Hello ImGui", -- window title
			self.window01 -- is window01 existant?
		)
		if windowdrawn then -- the variable is false when window01 is collapsed
			self.imgui:textWrapped("Lorem ipsum dolor sit amet. Id similique delectus"..
				"ad aspernatur optio eos ipsam explicabo non galisum quisquam sed delectus"..
				"veniam ut autem ipsam?")
		end
		self.imgui:endWindow()
	end
	-- 3. we end ImGui
	self.imgui:endFrame()
	self.imgui:render()
end

-- START THE APP
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=23748’