ImGui new thread

keszegh · July 2021

the thing is that with a different imgui project it works fine, so there is some issue somewhere inside the specific code. at some point i've noticed that instead of on each enterframe i call my imgui refresh code at every 1000/60 ms with a timer, so practically on each enterframe but differently. i hoped this is the issue but changing to enterframe did not help.

rrraptor · July 2021

keszegh said:
the thing is that with a different imgui project it works fine, so there is some issue somewhere inside the specific code. at some point i've noticed that instead of on each enterframe i call my imgui refresh code at every 1000/60 ms with a timer, so practically on each enterframe but differently. i hoped this is the issue but changing to enterframe did not help.

Oo
Can you send ur project then?

keszegh · July 2021

one fishy thing is that if i set
if imgui:isMouseClicked(KeyCode.MOUSE_RIGHT) then print("clicked") end
for some item then even if i press right mouse on the item once and keep it down it will be triggered again and again (while as i understand it should be printed only once even if i keep the button pressed for a long time).
this seems to be the same issue somehow as the backspace one.

keszegh · July 2021

@rrraptor , i've sent the project in pm.
so also with this isMouseClicked thing it seems that between two frame events somehow imgui 'forgets' that the button (key or mouse) is already pressed and thinks that it was pressed again even though it is already in a down position since last time.

keszegh · July 2021

a sidequestion, what is the right order of these two calls at the end?:
UI:render()
UI:endFrame()

in your demo it is like that but i do the opposite order and so far it worked fine too.

rrraptor · July 2021

inputText problem (and all the input widgets) solved

Your call:

imgui:newFrame()

But must be

imgui:newFrame(event)

Where "event" must be a table:

{deltaTime = 0.016}

keszegh said:
a sidequestion, what is the right order of these two calls at the end?:
UI:render()
UI:endFrame()

in your demo it is like that but i do the opposite order and so far it worked fine too.

Idk

keszegh · July 2021

genius, thanks for spotting that. indeed i've changed it for some reason when adding my imgui code to my main code. i just could not see what use would it be good for passing anything to enterframe (and in turn to newFrame()).
something about this should be added to the documentation of newFrame().

keszegh · July 2021

now having this newFrame issue corrected, the modal popup greys out the background. as it greys out even areas not part of the gui i'm not sure i want this, can i turn off this feature?

rrraptor · July 2021

keszegh said:
now having this newFrame issue corrected, the modal popup greys out the background. as it greys out even areas not part of the gui i'm not sure i want this, can i turn off this feature?

ModalWindowDimBg

rrraptor · July 2021

Fixed a bug with shared font atlas when using multiple ImGui instances.

rrraptor · July 2021

Example

BaseScene = Core.class(Sprite)
 
function BaseScene:init(atlas)	
 
	self.ui = ImGui.new(atlas)
	self.io = self.ui:getIO()
	self.fontAtlas = self.io:getFonts()
	-- create fonts only once
	if (not atlas) then
		self.io:setFontDefault(self.fontAtlas:addFont("arial.ttf", 16, {
			glyphs = {
				ranges = {ImGui.GlyphRanges_Cyrillic}
			},
		}))
		self.fontAtlas:build()
	else
		self.io:setFontDefault(self.fontAtlas:getCurrentFont())
	end
	self:addChild(self.ui)
	self:addEventListener(Event.ENTER_FRAME, self.onGuiDraw, self)
end
--
function BaseScene:onGuiDraw(e)
	local ui = self.ui
 
	ui:newFrame(e.deltaTime)
 
	self:drawGui(ui)
 
	ui:render()
	ui:endFrame()
 
	self:checkTransition()
end
--
function BaseScene:drawGui(ui)
end
-- you cant swap scenes between ImGui:newFrame() and ImGui:endFrame() calls, so I made a workaround <img class="emoji" src="https://forum.giderosmobile.com/resources/emoji/smiley.png" title="=)" alt="=)" height="20" />
function BaseScene:gotoScene(name, duration, transition, easing)
	self.__changeToName = name
	self.__changeToDuration = duration
	self.__changeToTransition = transition
	self.__changeToEasing = easing
end
--
function BaseScene:checkTransition()
	if (self.__changeToName) then 
		self:removeAllListeners()
		self.ui:removeAllListeners()
 
		sceneManager:changeScene(
			self.__changeToName,
			self.__changeToDuration,
			self.__changeToTransition,
			self.__changeToEasing,
			{userData = self.fontAtlas}
		)
 
		self.__changeToName = nil
		self.__changeToDuration = nil
		self.__changeToTransition = nil
		self.__changeToEasing = nil
	end
end

MainScene = Core.class(BaseScene)
 
function MainScene:init()
 
end
--
function MainScene:drawGui(ui)
	if (ui:button("Go to users")) then 	
		self:gotoScene("UsersScene", 1, SceneManager.crossFade)
	end
end

UsersScene = Core.class(BaseScene)
 
function UsersScene:init()
 
end
--
function UsersScene:drawGui(ui)
	if (ui:button("Go to main")) then 	
		self:gotoScene("MainScene", 1, SceneManager.crossFade)
	end
end

SinisterSoft · July 2021

imgui doesn't bring up the keyboard on html5 when no keyboard is available (eg when an input has been selected).

They have a couple of ideas here: https://github.com/emscripten-ports/SDL2/issues/80

SinisterSoft · July 2021

Maybe a solution would be some kind of imgui parameter to do a callback when keyboard input is required and a way to insert keys into the input stream?

That way the app can draw their own keyboard on a sprite above the user interface if needed?

OR

Add a soft keyboard to imgui that can be enabled or disabled programatically?

rrraptor · July 2021

SinisterSoft said:
Maybe a solution would be some kind of imgui parameter to do a callback when keyboard input is required and a way to insert keys into the input stream?

There is a "IO:AddInputCharactersUTF8(text)" function but its not availiable from LUA side. I'll add this function later.

SinisterSoft · July 2021

@rrraptor does imgui have some kind of 'built-in' soft keyboard?

rrraptor · July 2021

SinisterSoft said:
@rrraptor does imgui have some kind of 'built-in' soft keyboard?

No.
You can look towards TextArea

keszegh · July 2021

i have a strange issue, i made a small gadget which when dragged resizes a disk-shaped image. but after a few drags it just starts to act strangely. namely, afterwards one has to pull the mouse a 'lot' just to change the int value by 1:

        self.drawList=imgui:getWindowDrawList()                
        Style:setAlpha(0)
        imgui:setNextItemWidth(19)
        penthickness=imgui:dragInt("###size", penthickness, 1, 1, 100, "%d",ImGui.SliderFlags_AlwaysClamp|ImGui.SliderFlags_NoInput)        
        Style:setAlpha(1)
        self:showHelpText("drag: change value","pen size: "..penthickness,true)        
        local minX, minY = imgui:getItemRectMin()
        local maxX, maxY = imgui:getItemRectMax()                
        self.drawList:addCircleFilled(minX+9.5, minY+9.5, penthickness/200*16, 0xffffff)

keszegh · July 2021

keszegh said:

i have a strange issue, i made a small gadget which when dragged resizes a disk-shaped image. but after a few drags it just starts to act strangely. namely, afterwards one has to pull the mouse a 'lot' just to change the int value by 1:

        self.drawList=imgui:getWindowDrawList()                
        Style:setAlpha(0)
        imgui:setNextItemWidth(19)
        penthickness=imgui:dragInt("###size", penthickness, 1, 1, 100, "%d",ImGui.SliderFlags_AlwaysClamp|ImGui.SliderFlags_NoInput)        
        Style:setAlpha(1)
        self:showHelpText("drag: change value","pen size: "..penthickness,true)        
        local minX, minY = imgui:getItemRectMin()
        local maxX, maxY = imgui:getItemRectMax()                
        self.drawList:addCircleFilled(minX+9.5, minY+9.5, penthickness/200*16, 0xffffff)

i've realized that this way there is no need to set alpha to 0 and back to 1:

penthickness=imgui:dragInt("###size", penthickness, 1, 1, 100, "",ImGui.SliderFlags_AlwaysClamp|ImGui.SliderFlags_NoInput)

EDIT: but the bug still persists, especially if i change to another app and then change back to the gideros player after which the dragint tends to go wrong.

keszegh · July 2021

btw if i don't do any tricks with the dragint (i.e. no alpha change nor format change) then i cannot make it go wrong, whatever i do.
EDIT: now i managed to. so there is some general bug with dragInt.
how one can trigger it:
drag the dragInt, then release, then alt-tab back and forth to some other window (i'm using win10) and then try to drag it again, it will become much slower to change (that is, it needs huge drag distance to change a bit).

EDIT: you don't even need to drag first. just run the app, alt-tab back and forth and then every dragInt (e.g. also the ones inside a colorEdit3 popup) will go wrong.

rrraptor · July 2021

keszegh said:
btw if i don't do any tricks with the dragint (i.e. no alpha change nor format change) then i cannot make it go wrong, whatever i do.
EDIT: now i managed to. so there is some general bug with dragInt.
how one can trigger it
drag the dragInt, then release, then alt-tab back and forth to some other window (i'm using win10) and then try to drag it again, it will become much slower to change (that is, it needs huge drag distance to change a bit).

Aha, so thats the answer.
Every slider widget slows down when you hold ALT key.
This is the code to capture ALT/CTRL/SHIFT/SUPER keys: https://github.com/MultiPain/Gideros_ImGui/blob/e2b102686b22f635fafaf6e92ef3d57dc3f506f7/main.cpp#L1085
From gideros side its just 2 event listeners (key up, key down) where I set flag to true or false. So, to fix this I shuld add a function to reset all keys
And a few functions to set flags:

IO.KeysDown[KeyCode] = flag;
IO.KeyAlt = flag;
IO.KeyCtrl = flag;
IO.KeyShift = flag;
IO.KeySuper = flag;

keszegh · July 2021

yes, you got it right, i think i had a related issue in the past where ALT etc. state is incorrect after switching back and forth to another app with ALT-TAB.
so please correct it in the source if that's doable.

keszegh · July 2021

btw in gideros now there is another way to check ALT state, by checking the modifiers in a mouse/touch event:
https://wiki.gideros.rocks/index.php/Event.TOUCHES_MOVE

i think these get the correct info even after an ALT-TAB switch. it may help you to correct the bug.

all in all the moral is that listening to keyup/down events is not the safe way to get modifier button states due to possible app-switchings.

keszegh · July 2021

a small question: how can i write an utf character (it will be part of an imgui combo), e.g., this: https://www.fileformat.info/info/unicode/char/2022/index.htm

rrraptor · July 2021

Pull request with all changes I made:
https://github.com/gideros/gideros/pull/511

keszegh said:
btw in gideros now there is another way to check ALT state, by checking the modifiers in a mouse/touch event:
https://wiki.gideros.rocks/index.php/Event.TOUCHES_MOVE

i think these get the correct info even after an ALT-TAB switch. it may help you to correct the bug.

all in all the moral is that listening to keyup/down events is not the safe way to get modifier button states due to possible app-switchings.

Ok, Ill try to fix it this way, but there is still a bug with the mouse. Hold ALT -> drag slider -> ALT TAB -> release mouse -> ALT TAB again -> move the mouse.
Can be fixed like this for now (in upcoming version):

self:addEventListener(Event.APPLICATION_SUSPEND, function()
	self.io:resetKeysDown()
	self.io:resetMouseDown()
end)

keszegh said:
a small question: how can i write an utf character (it will be part of an imgui combo), e.g., this: https://www.fileformat.info/info/unicode/char/2022/index.htm

Check this example:
https://github.com/MultiPain/Gideros_ImGui#glyphs-example

fonts:addFont("MaterialIcons-Regular.ttf", 16, {
	glyphs = {
		chars = {
			0xe002, 0xe1e0, 0xe4fa
		},
	},
	mergeMode = true, -- merge into previous font
})
fonts:build()

Font: https://github.com/google/material-design-icons/tree/master/font
Here is named code points: https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints

keszegh · July 2021

thanks a lot for the utf explanation.
also for the correction, i should not forget to add that suspend code when the new version comes.

rrraptor · July 2021

Hm, but there is a problem with icons

When running on a FRESH gideros player its OK, but when you restart they ~~will never come back.~~ disappear sometimes...

keszegh · July 2021

rrraptor said:
Hm, but there is a problem with icons
When running on a FRESH gideros player its OK, but when you restart they ~~will never come back.~~ disappear sometimes...

strange. for now i don't use utf icons, i decided otherwise. but in general this is a very useful feature of imgui.

SinisterSoft · July 2021

I've seen that imgui has 'tooltips'. How would you add a tooltip to a button?

I've tried beginTooltip(), setTooltip("my tip!") before the button and endTooltip() after the button, but it just seems to display the tooltip everywhere.

keszegh · July 2021

tooltips my (imgui) way:

function Gui:showHelpText(desc)            
  if not _showTooltips then return end
  local imgui=self.imgui
  if (imgui:isItemHovered() and not imgui:isItemActive()) 
  then        
    imgui:beginTooltip()
   imgui:text(desc)
    imgui:endTooltip()
  end
end

and then right after the imgui item which needs a tooltip just add:

self:showHelpText("tooltip text")

and with _showTooltips=true/false you can globally turn on/off showing tooltips.

keszegh · July 2021

can you tell me how to set the width of an imageButtonWithText manually? the parameters are only for the image but i want also the whole button to have a certain width. thanks

Howdy, Stranger!

Categories

In this Discussion

Top Posters

ImGui new thread

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

ImGui new thread

Comments