Difference between revisions of "Dear ImGui Getting Started"

From GiderosMobile
Line 68: Line 68:
 
imgui:render()
 
imgui:render()
 
end
 
end
 +
</syntaxhighlight>
 +
 +
== Your first Widgets ==
 +
<syntaxhighlight lang="lua">
 +
require "ImGui"
 +
 +
application:setBackgroundColor(0x323232)
 +
 +
MyClass = Core.class(Sprite)
 +
 +
function MyClass:init()
 +
self.imgui = ImGui.new()
 +
self.flags = ImGui.SliderFlags_AlwaysClamp | ImGui.SliderFlags_NoInput
 +
-- some app variables
 +
self.ischecked01 = true
 +
self.ischecked02 = false
 +
self.fruits = {"apple", "banana", "orange", "apricot"}
 +
self.currentfruit = 2 -- "orange" ImGui is 0 based
 +
self.dragvalue01 = 20
 +
self.slidevalue01 = 0.5
 +
self.valueangle01 = math.pi/2
 +
-- order
 +
self:addChild(self.imgui)
 +
-- 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
 +
self.imgui:sameLine()
 +
self.imgui:bullet()
 +
if self.imgui:button("button##b03", 64, 16) then print("button 03 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", self.flags)
 +
if ischanged then print(self.dragvalue01) end
 +
self.slidevalue01, ischanged = self.imgui:sliderFloat("slider float", self.slidevalue01, 0, 1, "%.2f", self.flags)
 +
if ischanged then print(self.slidevalue01) end
 +
self.valueangle01, ischanged = self.imgui:filledSliderAngle("slider angle", false, self.valueangle01, 0, 360, "%.1f", self.flags)
 +
if ischanged then print(^>self.valueangle01) end -- ^> convert 'rad' into degrees
 +
self.imgui:dummy(1*32, 0.5*32)
 +
-- 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>
 
</syntaxhighlight>
  

Revision as of 22:25, 5 October 2024

Dear ImGui for Gideros Mobile

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
		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 first 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.flags = ImGui.SliderFlags_AlwaysClamp | ImGui.SliderFlags_NoInput
	-- some app variables
	self.ischecked01 = true
	self.ischecked02 = false
	self.fruits = {"apple", "banana", "orange", "apricot"}
	self.currentfruit = 2 -- "orange" ImGui is 0 based
	self.dragvalue01 = 20
	self.slidevalue01 = 0.5
	self.valueangle01 = math.pi/2
	-- order
	self:addChild(self.imgui)
	-- 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
	self.imgui:sameLine()
	self.imgui:bullet()
	if self.imgui:button("button##b03", 64, 16) then print("button 03 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", self.flags)
	if ischanged then print(self.dragvalue01) end
	self.slidevalue01, ischanged = self.imgui:sliderFloat("slider float", self.slidevalue01, 0, 1, "%.2f", self.flags)
	if ischanged then print(self.slidevalue01) end
	self.valueangle01, ischanged = self.imgui:filledSliderAngle("slider angle", false, self.valueangle01, 0, 360, "%.1f", self.flags)
	if ischanged then print(^>self.valueangle01) end -- ^> convert 'rad' into degrees
	self.imgui:dummy(1*32, 0.5*32)
	-- 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())

Start a Window at a given position

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

local posx, posy = 32*8, 32*4 -- starting window position
local offsetx, offsety = 0, 0 -- new window position
local dragflag = false

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

	-- 2. we add some windows
	if window01 then -- if window exists (not closed)
		imgui:setNextWindowPos(posx, posy)
		window01, windowdrawn = imgui:beginWindow("window01", window01)
		-- update window new position
		local mouseClicked = imgui:isMouseClicked(KeyCode.MOUSE_LEFT)
		if not dragflag and mouseClicked and imgui:isWindowHovered() then
			dragflag = true
		end
		if imgui:isWindowFocused() and dragflag then
			local mx,my = imgui:getMousePos()
			local wx, wy = imgui:getWindowPos()
			if mouseClicked or imgui:isMouseReleased(KeyCode.MOUSE_LEFT) then
				offsetx, offsety = mx - wx, my - wy
			end
			if imgui:isMouseDragging(KeyCode.MOUSE_LEFT, 0) then
				posx = (mx - offsetx)
				posy = (my - offsety)
			else
				dragflag = false
			end
		end
		-- window widgets
		if windowdrawn then -- the variable is false when main window is collapsed
			imgui:text("Hello Dear ImGui!")
			imgui:newLine()
			imgui:textColored("This window can be moved, resized and closed!", 0x00ff7f, 1)
			imgui:text("its position is: "..posx..", "..posy)
		end
		imgui:endWindow()
	end

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

stage:addEventListener(Event.ENTER_FRAME, onEnterFrame)


Dear ImGui