Difference between revisions of "Dear ImGui"

From GiderosMobile
Line 9: Line 9:
  
  
'''This is a brand new plugin in Gideros Studio so it may take some time to document it thoroughly.'''
+
To use Dear ImGui in your project you need to add the ImGui plugin and call require like so:
 
 
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
 
 
 
 
<source lang="lua">
 
<source lang="lua">
 
require 'ImGui'
 
require 'ImGui'
Line 19: Line 15:
  
  
'''And of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio.
+
'''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
  
== DEAR IMGUI CENTERED TEXT & COLORED TEXT ==
 
'''Here we center our text and introduce some more functionalities'''
 
<source lang="lua">
 
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)
 
</source>
 
 
== DEAR IMGUI BUTTONS ==
 
'''Here we make some buttons'''
 
<source lang="lua">
 
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)
 
</source>
 
  
= File open/save dialog project example =
+
'''Of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio.
[https://github.com/MultiPain/Gideros_examples/tree/master/ImGuiFileDialogDemo GitHub]
+
[[ImGui_Examples]]
  
 
{|-
 
{|-

Revision as of 16:01, 16 March 2021

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


To use Dear ImGui in your project you need to add the ImGui plugin and call require like so:

require 'ImGui'


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


Of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio. ImGui_Examples

Methods

ImGui.new initializes ImGui
ImGui:showDemoWindow displays an ImGui demo
ImGui:text displays an ImGui text

WORK IN PROGRESS...

Events

ImGui.KeyChar
ImGui.KeyDown
ImGui.KeyUp
ImGui.MouseDown
ImGui.MouseHover
ImGui.MouseMove
ImGui.MouseUp
ImGui.MouseWheel
ImGui.TouchBegin
ImGui.TouchEnd
ImGui.TouchCancel
ImGui.TouchMove

Constants