Difference between revisions of "Dear ImGui"

From GiderosMobile
 
(31 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
 
<!-- GIDEROSOBJ:ImGui -->
 
<!-- GIDEROSOBJ:ImGui -->
−
'''<translate>Supported platforms</translate>:''' [[File:Platform android.png]][[File:Platform ios.png]][[File:Platform mac.png]][[File:Platform pc.png]][[File:Platform html5.png]][[File:Platform winrt.png]][[File:Platform win32.png]]<br/>
+
'''Supported platforms:''' [[File:Platform android.png]][[File:Platform ios.png]][[File:Platform mac.png]][[File:Platform pc.png]][[File:Platform html5.png]][[File:Platform winrt.png]][[File:Platform win32.png]]<br/>
−
'''<translate>Available since</translate>:''' Gideros 2020.9<br/>
+
'''Available since:''' Gideros 2020.9<br/>
  
 
=== Description ===
 
=== Description ===
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:
−
 
+
<syntaxhighlight lang="lua">
−
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">
 
−
require 'ImGui'
 
−
</source>
 
−
 
 
−
 
 
−
'''And of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio. Enjoy!'''
 
−
 
 
−
__TOC__
 
−
 
 
−
== DEAR IMGUI TEXT ==
 
−
'''Let's start with a text example'''
 
−
<source lang="lua">
 
−
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)
 
−
</source>
 
−
 
 
−
== 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
 
−
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)
 
−
</source>
 
−
 
 
−
== DEAR IMGUI BUTTONS ==
 
−
'''Here we make some buttons'''
 
−
<source lang="lua">
 
 
require "ImGui"
 
require "ImGui"
 +
</syntaxhighlight>
  
−
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
+
'''This is a new and very big plugin, it may take some time to document it thoroughly.'''
−
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)
 
−
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
+
In the meantime, the person (@'''rrraptor''') who made the Gideros implementation has a GitHub. It is the best place to get started with Gideros Dear ImGui.
−
imgui:endFrame()
+
'''https://github.com/MultiPain/Gideros_ImGui'''
−
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>
 
  
−
= YOU WANT MORE? =
+
Of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio.
−
'''Soon, God's willing'''
+
'''[[ImGui_Examples]]'''
  
−
{|-
+
=== Classes ===
−
| style="width: 50%; vertical-align:top;"|
+
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
−
=== <translate>Methods</translate> ===
+
'''[[ImGui|ImGui.Core (ImGui)]]'''<br/><!--GIDEROSOBJ:ImGui-->
−
| style="width: 50%; vertical-align:top;"|
+
'''[[ImGui.DrawList]]'''<br/><!--GIDEROSOBJ:ImGui.DrawList-->
−
=== <translate>Events</translate> ===
+
'''[[ImGui.Style]]'''<br/><!--GIDEROSOBJ:ImGui.Style-->
−
=== <translate>Constants</translate> ===
+
</div>
−
|}
 
  
 
{{GIDEROS IMPORTANT LINKS}}
 
{{GIDEROS IMPORTANT LINKS}}

Latest revision as of 12:35, 27 August 2024

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 new and very big plugin, it may take some time to document it thoroughly.

In the meantime, the person (@rrraptor) who made the Gideros implementation has a GitHub. It is the best place to get started with Gideros Dear ImGui. 

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

Classes


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