Iris - Immediate Mode UI library, based on Dear ImGui

Hey, I’m having a small issue with the library. When I use a table, this happens:
image
I think it might be something with my script, I’m new to this library

Here is my script:
image

Also, is there any way for the row separator to be moved or the row item scaling to be changed?
I’m having issues with the scaling/position.

Thanks

We are planning on rewriting tables entirely, to make them better suited for more cases and to give you more flexibility.

I think the issue you are having is that the ContentWidth config option is set by default to 65% of the full width, hence why the input boxes do not fill the entire width. You can use something like this, which ensures they fill the entire width:

Iris.PushConfig({ ContentWidth = Udim.new(1, 0) })
...
Iris.PopConfig()

Thanks, also how can I fix this?
image

This is one of the issues with the current table implementations, It’s not really possible to fix this (or in any easy way)

2 Likes

If you play on VR, there’s a weird bug where the items in Dropdowns appear behind the actual Window. They’re still clickable, but if the window has multiple UI elements, it can get quite cumbersome. It’s quite bothersome.

1 Like

How do I make the state of a Widget the same as another Widget in another Window? I tried it before, but it just broke Iris. – I have this Checkbox Widget right, and I also have another Checkbox Widget in my “Settings Window”, when I check or uncheck either, I want it to also set that to the other one, sort of like they are linked in a way. But as Iris removes Widgets when a Window when it’s closed, I think that’s why Iris is breaking, because I’m trying to set the State of a Widget that doesn’t exist yet. Any ideas?

Will there ever be docking support for Window widgets?

I know this will probably be a complicated feature to add but it would be amazing to dock a settings panel to the right while messing with settings. I know this is already possible by well moving the window and resizing it but still I think it could be a great addition.

You are able to just pass through the same state object to multiple widgets:

local state = Iris.State(true)

Iris.Window({ "Window A" })
    Iris.Checkbox({ "Checkbox A" }, { isChecked = state })
Iris.End()

Iris.Window({ "Window B" })
    Iris.Checkbox({ "Checkbox B" }, { isChecked = state })
Iris.End()

Not in the near future. I’ve had less time recently to devote to it, but as we get most of the widgets out and finished, I’m interested in pursuing this line.

Apologies for the late reply, for some reason I didn’t get a notification… Again.

Anyway, I know, but both Checkbox Widgets’ States are bound to their own separate State. I tried adding a new line under sort of like this:

local state = Iris.State(true)
local state2 = Iris.State(true)

Iris.Window({ "Window A" })
    local foo = Iris.Checkbox({ "Checkbox A" }, { isChecked = state })
    foo.state.isChecked:set(state2:get())
Iris.End()

Iris.Window({ "Window B" }) -- Settings Window
    local foo = Iris.Checkbox({ "Checkbox B" }, { isChecked = state2 })
    foo.state.isChecked:set(state:get())
Iris.End()

But obviously, like I mentioned before, Iris just broke.

change state:get() to state.value, worked for me. not in your case, but i mean, getting state’s value in general

1 Like

Thank you, I’m a bit busy at the moment, but I’ll try this when I get around to it and get back to you, cheers mate! :slight_smile:

Absolutely revolutionary plugin, testing out systems with weird edge cases has never been easier!

1 Like

I don’t quite understand your use case here. If you want two checkboxes to have the same state, then you can just use one. If they are going to be linked, then why do they each need their own state?

1 Like

It’s hard to explain, I’ll try and see if I can use one state linked to both, thank you.

i cannot seem to wrap my head around in what order widgets are added.
What i’m trying to do is have as many text widgets in each tree as there are trees.

for example when i press the button once there will be 1 tree with 1 text widget inside.
if i press it a second time there should be 2 trees with each tree having 2 text widgets inside and so on. However when i press it a third time the order seems to mess up and it gets worse the more i press it.

Code
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Iris = require(ReplicatedStorage.Iris).Init()

local trees = 0

Iris:Connect(function()
	
	Iris.Window({"Window"}, { size = Vector2.new(250, 300) })
	do
		if Iris.Button("Add tree").clicked() then
			trees += 1
		end

		for i = 1, trees do
			Iris.Tree("Tree_" .. i)
			do
				for i2 = 1, trees do
					Iris.Indent()
					do
						Iris.Text("Text_" .. i2)
					end
					Iris.End()
				end
			end
			Iris.End()
		end
	end
	Iris.End()
end)

expected behaviour when pressing the button twice:
image

however when i press it a third time it results in this
image

it should be
image

If anyone could tell me what i’m doing wrong i would really appreciate it.

this looks like a cool module
i haven’t tried it yet, but i’ll prob try it out

I wonder how he’d think if he looks back at this two years later. :thinking:

Outputting is quite inconvenient… and a rookie thing. I was a rookie that did not discover that Watch panels exists just to watch the variables real-time and see where things get messed up.

This could just make it easier to watch variables in-game on the Roblox client outside of Studio.

2 Likes

turns out i use Iris quite often, so this time i’ve decided to get into themes. i don’t really like the separation of colors to options, but i had to deal with it ig.

RobloxStudioBeta_8KNYJbX4Md

i’ve simplified the work anyway to generate the theme from 2 simple colors: background and accent. the colors i used are my… i’d say brand ones.

feel free to use the generator function, just credit me!

3 Likes

iris is generating an id depending on stack of the lines from traceback where’s action is made.
i’ve just found it easier to override it with the one i find more unique depending on a context.