Sorting buttons in UIGridLayout by color

[AmoraFolf (Amora)]

Hello devs!

---

I’ve recently been working on a plugin. Its main premise is for easy and quick part creation/transformation. One of the options in this plugin is a color dropdown with all of the BrickColors. I’m trying to get a simple piece of code that will organize all of the buttons by color; a rainbow, with shades going from lightest to darkest.

Everything that I have tried so far has not worked. It either gives me errors, or it doesn’t sort at all and leaves no errors.

I’ve tried writing different bits of code, looked elsewhere on the forum, and have no results. I’ve tried to change their LayoutOrder since all of them have the LayoutOrder as zero, and nothing. I’ve tried ditching the UIGridLayout and using math to position them all by color, and still nothing.
I returned the UIGridLayout, and I want to keep it.

---

I used a for loop in the command bar originally to create all of the buttons. I used it to go through all of the BrickColors, clone an existing template button, change its BackgroundColor3 to the BrickColors color value, changed their names to the name of the BrickColor, and I gave them UIStrokes and UICorners. That probably isn’t an important detail, though.

Here is a screenshot of what it currently looks like:

---

The only thing that really needs done is to change their LayoutOrder property based on color, but like said earlier, the code I wrote to do that didn’t work.

I’m trying to avoid wasting a colossal amount of time by doing all of this manually, so I just need help creating a piece of code that I can run in the command bar to organize these all by color and the shades of those colors from lightest to darkest, but I can’t nail the algorithm to do so.

If no one can get this figured out after my next STAAR test (May 2nd), I’ll just do it manually. I don’t have time to do it manually now since I have a lot of studying I’m trying to get done for that STAAR.

Any help is greatly appreciated!

Best regards,
Amora

[quakage]

Here is a little article and some algorithms to sort by color you might like:

The incredibly challenging task of sorting colours - Alan Zucconi

[AmoraFolf (Amora)]

Wasn’t much of a help, unfortunately.

[KashTheKing (Kash)]

Since the frames all have the BackgroundColor3 property that you set corresponding to the BrickColor, you can simply loop through every frame and set the name or layout order accordingly by the total color value like this:

local frames = scrollingFrame:GetChildren() --All of the frames in the scrollingframe
for i,frame in pairs(frames) do
	if frame:isA("Frame") then
		local color = frame.BackgroundColor3 --BackgroundColor
		local totalColor = color.R + color.G + color.B --Add all RGB color values together to get total color value
		frame.Name = math.round(totalColor * 1000) --Set the name or layout order to the rounded total color * 1000 so we don't have a ton of decimals and its accurate.
	end	
end

If your UiListLayout sort type is set to “Name” then this script should sort them by lightest to darkest.

[AmoraFolf (Amora)]

Well, it kind of worked? Didn’t sort them all by color… but it did sort them differently. Just about as far as I got beforehand. Still didn’t work, sadly; however, thanks for your efforts anyway!

---

You can see it did make a difference to its sorting, just not by color.

And another thing I should mention: I cannot change the name of the buttons. The code is dependent on the name of the buttons to change the text of the label next to it, where the code for creating the part then uses the text of that label to get the BrickColor.

[OfficialPogCat (POG_Cat)]

@KashTheKing

local frames = scrollingFrame:GetChildren() --All of the frames in the scrollingframe
for i,frame in pairs(frames) do
	if frame:isA("Frame") then
		local color = frame.BackgroundColor3 --BackgroundColor
		local totalColor = color.R + color.G + color.B --Add all RGB color values together to get total color value
		frame.Name = math.round(totalColor * 1000) --Set the name or layout order to the rounded total color * 1000 so we don't have a ton of decimals and its accurate.
	end	
end

Maybe something like this?

local frames = scrollingFrame:GetChildren() 
for i,frame in pairs(frames) do
	if frame:isA("Frame") then
		local color = frame.BackgroundColor3 
local LayoutNumber = 0

		if color.R >= color.G and color.R >= color.B then
LayoutNumber = 1000 + color.R

elseif color.G >= color.R and color.G >= color.B then
LayoutNumber = 10000 + color.G

elseif color.B > color.R and color.B > color.G then
LayoutNumber = 100000 + color.B


        end
frame.LayoutOrder = LayoutNumber
	end	
end

At this point I am just trying things, And I don’t have a clue, but maybe this works? I’m not sure. If you are going to try it, make sure UIGridLayout.SortOrder, is for LayoutOrder

Edit: Made a change in the script

Anyways I hope this helps? if not, I hope you can find someone who can!

[AlternativeOrNot]

You can try checking if color is more red, green or blue.
I have a rough draft below, not in Studio currently. I will rework the method.

local frames = scrollingFrame:GetChildren()
local sorted = {}
for i,frame in pairs(frames) do
	if frame:isA("Frame") then
		local color = frame.BackgroundColor3
		if color.R > color.B then
			if color.R > color.G then
				--red
			else
				--green
			end
		else
			if color.B > color.G then
				--blue
			else
				--green
			end
		end
	end	
end

[overflowed]

You could try sorting the colors by hue, and set the layoutorder of the frame or whatever is being sorted to the hue value * 100

[AmoraFolf (Amora)]

It’s more in order than it was, but still not exactly what I am looking for, unfortunately.

Only the blues got closest… lol.

Thanks anyway!

[AmoraFolf (Amora)]

I didn’t necessarily see how this would work, and like I predicted, it did nothing at all. But thanks for your efforts.

[AmoraFolf (Amora)]

Can you give me an example, please? One of the things I tried prior to making the post was similar to what you said, but maybe I didn’t do it right.

[AlternativeOrNot]

I said that it was a rough draft, I am currently working on that script.

[AmoraFolf (Amora)]

Okay. My apologies. Didn’t read it fully, kind of skimmed across.

All I did was put the code in and added it to set a layout order in the if else statements… lol.

[overflowed]

		local thing = --frame that u want sorted
		local Hue = thing.BackgroundColor3:ToHSV()
		thing.LayoutOrder = Hue * 100

[AmoraFolf (Amora)]

Code I wrote originally was definitely a bit janky. Dunno how I messed something this simple up, but thank you so much! It isn’t 100% perfect, but it is enough lol. Again, thank you so much.

[AlternativeOrNot]

Oh uhm… I guess I will share my code anyways. I just finished it.

local scrollingFrame = script.Parent
local frames = scrollingFrame:GetChildren()
local framesTable = {}
for _, frame:Frame in pairs(frames) do
	if frame:isA("Frame") then
		local color = frame.BackgroundColor3
		--BackgroundColor3 gives us colors in Color3 format ((0.5, 1, 1) for example), so we will translate it to rgb
		color = {["R"] = color.R*255, ["G"] = color.G*255, ["B"] = color.B*255}
		local totalColor = color.R+color.B+color.G
		if color.R > color.B then
			if color.R > color.G then
				--so, if the color is red, it should be the lowest
				local total
				if color.R < 125 then --so that the darker colours will be behind
					total = totalColor
				else
					total = 1000+totalColor
				end
				framesTable[total] = frame
			else
				--if the color is green, it should be somewhere in the middle
				local total
				if color.G < 125 then
					total = 5000+totalColor
				else
					total = 10000+totalColor
				end
				framesTable[total] = frame
			end
		else
			if color.B > color.G then
				--if the color is blue, then it will be on the end
				local total
				if color.B < 125 then
					total = 50000+totalColor
				else
					total = 100000+totalColor
				end
				framesTable[total] = frame
			else
				--green again, BUT there can also be white or black color, so we will have to check that
				print(totalColor)
				local total
				if color.G < 125 then
					if totalColor < 255 then --check if total color is dark
						total = -500+totalColor --it will be behind
					else
						total = 5000+totalColor
					end
				else
					if totalColor > 700 then --check if total color is bright
						total = 500000+totalColor --it will be infront
					else
						total = 10000+totalColor
					end
				end
				framesTable[total] = frame
			end
		end
	end	
end
--now let's sort the table
local function sortTableByKeys(t) --this is code that i stole from some of my posts lol
	local tkeys = {}
	for k in pairs(t) do table.insert(tkeys, k) end
	table.sort(tkeys)
	local result = {}
	for _, k in ipairs(tkeys) do result[k] = t[k] end
	return result
end

print(sortTableByKeys(framesTable)) --tada, thats the result

But, of course, if you want to use UIGridLayout, then go with what @overflowed answered.

[AmoraFolf (Amora)]

Though already solved (and not exactly what I need since I’m wanting to use UIGridLayout), I thank you greatly for your efforts!