Difference between revisions of "Dear ImGui"

From GiderosMobile
(added TOC)
(added example)
Line 121: Line 121:
 
-- a colored text
 
-- a colored text
 
imgui:textColored(xtext2, 0xff00ff)
 
imgui:textColored(xtext2, 0xff00ff)
 +
imgui:endWindow()
 +
 +
-- 3 end
 +
imgui:endFrame()
 +
imgui:render()
 +
end
 +
 +
-- the listeners
 +
stage:addEventListener("mouseDown", function(e) imgui:onMouseDown(e) end)
 +
stage:addEventListener("mouseUp", function(e) imgui:onMouseUp(e) end)
 +
stage:addEventListener("mouseHover", function(e) imgui:onMouseHover(e) end)
 +
stage:addEventListener("mouseMove", function(e) imgui:onMouseMove(e) end)
 +
stage:addEventListener("mouseWheel", function(e) imgui:onMouseWheel(e) end)
 +
stage:addEventListener("keyDown", function(e) imgui:onKeyDown(e) end)
 +
stage:addEventListener("keyUp", function(e) imgui:onKeyUp(e) end)
 +
stage:addEventListener("keyChar", function(e) imgui:onKeyChar(e) end)
 +
stage:addEventListener("enterFrame", enterFrame)
 +
</source>
 +
 +
== DEAR IMGUI BUTTONS ==
 +
'''Here we make some buttons'''
 +
<source lang="lua">
 +
require "ImGui"
 +
 +
local imgui = ImGui.new()
 +
stage:addChild(imgui)
 +
-- some imgui params
 +
imgui:ioSetFontGlobalScale(2.5)
 +
imgui:setClassicStyle()
 +
-- our window + some params
 +
local mainWindowOpen, mainWindowDrawn
 +
local window_flags =
 +
ImGui.WindowFlags_NoTitleBar |
 +
ImGui.WindowFlags_NoCollapse |
 +
ImGui.WindowFlags_NoResize |
 +
ImGui.WindowFlags_NoMove |
 +
ImGui.WindowFlags_NoBringToFrontOnFocus |
 +
ImGui.WindowFlags_NoNavFocus
 +
-- some vars
 +
local xtext = "Centered Text"
 +
local textW, textH, textMid -- for centered texts
 +
local column = 0
 +
 +
-- the loop
 +
function enterFrame(e)
 +
-- 1 begin
 +
imgui:newFrame(e)
 +
 +
-- 2 our GUI
 +
imgui:setNextWindowPos(0, 0)
 +
imgui:setNextWindowSize(myappwidth, myappheight)
 +
mainWindowOpen, mainWindowDrawn =
 +
imgui:beginWindow(
 +
"Hello ImGui", -- window title
 +
true, -- window is expanded
 +
window_flags -- window flags
 +
)
 +
-- some spacing
 +
imgui:dummy(application:getContentWidth(), 32 * 2)
 +
-- a centered text?
 +
textW, _ = imgui:calcTextSize(xtext) -- both imgui/ImGui crash
 +
textMid = (application:getContentWidth() - textW) / 2
 +
imgui:dummy(textMid, 0) imgui:sameLine(0, 0) imgui:text(xtext)
 +
-- some spacing
 +
imgui:dummy(application:getContentWidth(), 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(application:getContentWidth(), 32 * 1)
 +
-- a grid of buttons
 +
imgui:text("A grid of buttons")
 +
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()
 +
column += 1
 +
if column < 3 then imgui:sameLine()
 +
else column = 0
 +
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(Texture.new("gfx/image.png"), "button", 16, 16)) then
 +
print("pressed")
 +
end
 
imgui:endWindow()
 
imgui:endWindow()
  

Revision as of 01:52, 31 August 2020

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. Enjoy!

DEAR IMGUI TEXT

Let's start with a text example 

require "ImGui"

-- a Dear ImGui instance
local imgui = ImGui.new()
stage:addChild(imgui)

-- we scale the font up
imgui:ioSetFontGlobalScale(2)

-- we choose a style (default = Dark)
--imgui:setLightStyle()
--imgui:setDarkStyle()
imgui:setClassicStyle()

-- we create 2 variables to hold our main window status
local mainWindowOpen, mainWindowDrawn

-- Dear ImGui runs on the game loop
function enterFrame(e)
	-- 1 we start ImGui
	imgui:newFrame(e)

	-- 2 we build our GUI
	mainWindowOpen, mainWindowDrawn =
		imgui:beginWindow(
			"Hello ImGui v"..ImGui._VERSION, -- main window title
			true -- 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()

	-- 3 we render our window
	imgui:endFrame()
	imgui:render()
end

-- this wouldn't work without listeners
stage:addEventListener("mouseDown", function(e) imgui:onMouseDown(e) end)
stage:addEventListener("mouseUp", function(e) imgui:onMouseUp(e) end)
stage:addEventListener("mouseHover", function(e) imgui:onMouseHover(e) end)
stage:addEventListener("mouseMove", function(e) imgui:onMouseMove(e) end)
stage:addEventListener("mouseWheel", function(e) imgui:onMouseWheel(e) end)
stage:addEventListener("keyDown", function(e) imgui:onKeyDown(e) end)
stage:addEventListener("keyUp", function(e) imgui:onKeyUp(e) end)
stage:addEventListener("keyChar", function(e) imgui:onKeyChar(e) end)
stage:addEventListener("enterFrame", enterFrame)

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
imgui:ioSetFontGlobalScale(2.5)
--imgui:setLightStyle()
--imgui:setClassicStyle()
-- our window + some params
local mainWindowOpen, mainWindowDrawn
local window_flags = -- a full screen window
		ImGui.WindowFlags_NoTitleBar |
		ImGui.WindowFlags_NoCollapse |
		ImGui.WindowFlags_NoResize |
		ImGui.WindowFlags_NoMove |
		ImGui.WindowFlags_NoBringToFrontOnFocus |
		ImGui.WindowFlags_NoNavFocus
-- some vars
local xtext, xtext2 = "Centered Text", "Colored Text"
local textW, textH, textMid -- for centered texts

-- the loop
function enterFrame(e)
	-- 1 begin
	imgui:newFrame(e)

	-- 2 our GUI
	imgui:setNextWindowPos(0, 0)
	imgui:setNextWindowSize(myappwidth, myappheight)
	mainWindowOpen, mainWindowDrawn = imgui:beginWindow("Hello ImGui", true, window_flags)
	-- some spacing
	imgui:dummy(application:getContentWidth(), 32 * 2) -- imgui:dummy(w, h)
	-- a centered text
	textW, _ = imgui:calcTextSize(xtext)
	textMid = (application:getContentWidth() - 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(application:getContentWidth(), 32 * 4)
	-- a colored text
	imgui:textColored(xtext2, 0xff00ff)
	imgui:endWindow()

	-- 3 end
	imgui:endFrame()
	imgui:render()
end

-- the listeners
stage:addEventListener("mouseDown", function(e) imgui:onMouseDown(e) end)
stage:addEventListener("mouseUp", function(e) imgui:onMouseUp(e) end)
stage:addEventListener("mouseHover", function(e) imgui:onMouseHover(e) end)
stage:addEventListener("mouseMove", function(e) imgui:onMouseMove(e) end)
stage:addEventListener("mouseWheel", function(e) imgui:onMouseWheel(e) end)
stage:addEventListener("keyDown", function(e) imgui:onKeyDown(e) end)
stage:addEventListener("keyUp", function(e) imgui:onKeyUp(e) end)
stage:addEventListener("keyChar", function(e) imgui:onKeyChar(e) end)
stage:addEventListener("enterFrame", enterFrame)

DEAR IMGUI BUTTONS

Here we make some buttons 

require "ImGui"

local imgui = ImGui.new()
stage:addChild(imgui)
-- some imgui params
imgui:ioSetFontGlobalScale(2.5)
imgui:setClassicStyle()
-- our window + some params
local mainWindowOpen, mainWindowDrawn
local window_flags =
		ImGui.WindowFlags_NoTitleBar |
		ImGui.WindowFlags_NoCollapse |
		ImGui.WindowFlags_NoResize |
		ImGui.WindowFlags_NoMove |
		ImGui.WindowFlags_NoBringToFrontOnFocus |
		ImGui.WindowFlags_NoNavFocus
-- some vars
local xtext = "Centered Text"
local textW, textH, textMid -- for centered texts
local column = 0

-- the loop
function enterFrame(e)
	-- 1 begin
	imgui:newFrame(e)

	-- 2 our GUI
	imgui:setNextWindowPos(0, 0)
	imgui:setNextWindowSize(myappwidth, myappheight)
	mainWindowOpen, mainWindowDrawn =
		imgui:beginWindow(
			"Hello ImGui", -- window title
			true, -- window is expanded
			window_flags -- window flags
		)
		-- some spacing
		imgui:dummy(application:getContentWidth(), 32 * 2)
		-- a centered text?
		textW, _ = imgui:calcTextSize(xtext) -- both imgui/ImGui crash
		textMid = (application:getContentWidth() - textW) / 2
		imgui:dummy(textMid, 0) imgui:sameLine(0, 0) imgui:text(xtext)
		-- some spacing
		imgui:dummy(application:getContentWidth(), 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(application:getContentWidth(), 32 * 1)
		-- a grid of buttons
		imgui:text("A grid of buttons")
		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()
				column += 1
				if column < 3 then imgui:sameLine()
				else column = 0
				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(Texture.new("gfx/image.png"), "button", 16, 16)) then
			print("pressed")
		end
	imgui:endWindow()

	-- 3 end
	imgui:endFrame()
	imgui:render()
end

-- the listeners
stage:addEventListener("mouseDown", function(e) imgui:onMouseDown(e) end)
stage:addEventListener("mouseUp", function(e) imgui:onMouseUp(e) end)
stage:addEventListener("mouseHover", function(e) imgui:onMouseHover(e) end)
stage:addEventListener("mouseMove", function(e) imgui:onMouseMove(e) end)
stage:addEventListener("mouseWheel", function(e) imgui:onMouseWheel(e) end)
stage:addEventListener("keyDown", function(e) imgui:onKeyDown(e) end)
stage:addEventListener("keyUp", function(e) imgui:onKeyUp(e) end)
stage:addEventListener("keyChar", function(e) imgui:onKeyChar(e) end)
stage:addEventListener("enterFrame", enterFrame)

YOU WANT MORE?

Soon, God's willing

Methods

Events

Constants


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