[v3!] TopbarPlus v3.0.0 | Construct intuitive topbar icons; customise them with themes, dropdowns, captions, labels and much more

Without forking the code not currently. What would be your use case for this?

4 Likes

I’m a fan of this, it’s so well integrated you can’t tell that it’s been added externally!

Looks like it was built into the game haha.

6 Likes

I’d like to keep the state of a menu externally and allow the menu to control the state. For example, I make a top bar icon that toggles the Store menu, but the Store gui also has an X to close it; so the top bar icon needs to be put in its “deselected” state when a user hits the X, but I don’t want to execute the gui closing code twice.
Honestly, it’s not a huge use case, and it’s easy enough to work around. I was just wondering if it already had that functionality so I could make my code a little prettier :stuck_out_tongue:

3 Likes

I imagine you have a slightly different configuration however if you were to set it up something like the following it should only print ‘deselected!’ and ‘selected!’ once:

local shopMenu = gui.Shop
local shopIcon = Icon.new()
	:setImage(4882429582)
	:setLabel("Shop")
	:notify()
	:setTip("Open Shop (v)")
	:bindToggleKey(Enum.KeyCode.V)
	:setCaption("Shop")
	:setOrder(2)
	:bindEvent("selected", function()
		print("selected!")
		shopMenu.Visible = true
	end)
	:bindEvent("deselected", function()
		print("deselected!")
		shopMenu.Visible = false
	end)
	
shopMenu.CloseButton.MouseButton1Click:Connect(function()
	shopIcon:deselect()
end)

15 Likes

Could you turn this into an easy plugin to use? The stuff in the scripts looks hard lol. Thanks!

1 Like

I likely won’t have time myself to create a plugin although anyone else is welcome to contribute to the development of one.

We’ll aim to release some tutorials to help out beginners. If anyone out there fancies making tutorials in the meantime we can feature these on the thread and site.

5 Likes

Thanks! :blush:
Yeah it’d be wonderful if some people could make a plugin! Or you could even make a tutorial on it! :smile:

1 Like

Love this module a lot although I have a bit of a problem

How would I make it so that if a ReplicatedStorage.StringValue.Value changes it changes the Icon’s Label as well? I have a StringValue for song text that I would like to place on the top of the screen which works but when the song changes the title stays the same.

Code:

local player = game:GetService("Players").LocalPlayer
local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)


local Hi = replicatedStorage:FindFirstChild("MusicTitle").Value

-- Apply BlueGradient Theme
IconController.setGameTheme(Themes.BlueGradient)

local Ye = Icon.new()
:setLabel('Song: ' .. Hi)
:setOrder(3)
:bindEvent("selected", function()
   print("selected!")
end)
:bindEvent("deselected", function()
   print("deselected!")
end)

I’ve tried a bunch of solutions for example a value changed function but nothing worked.

Hi.Changed:Connect(function()

How do I go about making this work? Anything would be appreciated :smiley:

3 Likes

Is ‘Hi’ the StringValue or StringValue.Value?

If it’s the StringValue the following should work:

Hi.Value.Changed:Connect(function()
   Ye:setLabel("Song".. Hi.Value.Value)
end)
6 Likes

‘Hi’ is an StringValue.Value. How should I go about making it work? Also where should I place the function, I’m assuming it’s the end although I might be wrong.

3 Likes

I’ve gone ahead and made it so that its just StringValue and not StringValue.Value, here is my code:

local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)


local Hi = replicatedStorage:FindFirstChild("MusicTitle")

-- Apply BlueGradient Theme
IconController.setGameTheme(Themes.BlueGradient)

local Ye = Icon.new()
:setLabel('Song: ' .. Hi.Value)
:setOrder(3)
:bindEvent("selected", function()
	print("selected!")
end)
:bindEvent("deselected", function()
	print("deselected!")
end)

Hi.Value.Changed:Connect(function()
	Ye:setLabel("Song".. Hi.Value.Value)
end)

I keep getting this error

Players.KasimAkr.PlayerScripts.TopbarPlusClient:16: attempt to index nil with ‘Connect’

3 Likes

Try this instead:

local playerGui = player.PlayerGui
local replicatedStorage = game:GetService("ReplicatedStorage")
local iconModule = replicatedStorage.Icon
local Icon = require(iconModule)
local IconController = require(iconModule.IconController)
local Themes = require(iconModule.Themes)


local Hi = replicatedStorage:FindFirstChild("MusicTitle")

-- Apply BlueGradient Theme
IconController.setGameTheme(Themes.BlueGradient)

local Ye = Icon.new()
:setLabel('Song: ' .. Hi.Value)
:setOrder(3)
:bindEvent("selected", function()
	print("selected!")
end)
:bindEvent("deselected", function()
	print("deselected!")
end)

Hi.Changed:Connect(function()
	Ye:setLabel("Song".. Hi.Value)
end)

The connect method belongs to ‘Hi’ instead of it’s value.

6 Likes

It works! I appreciate you helping me out, have a great rest of your day!

3 Likes

Hello! So I am trying to set up my admin module with Topbar+ v2. Topbar+ v1 was working just fine. I changed the number, and it no longer works.

require(6311707237)

If anyone can help, please let me know. Thanks :slight_smile:

Hi there, instead of auto-updating via a MainModule, v2 auto publishes all the latest releases to our GitHub repo and model:

For v2 all you have to do is move the TopbarPlus (aka Icon) module to ReplicatedStorage then require that from the client.

Do note v2 is not 100% compatible with v1 - it has some slightly different methods and events, and themes have been completed upgraded.

5 Likes

Important update: we’ve just discovered and patched a critical bug with the overflow that was causing icons to be randomly hidden. We highly recommend all users update to the latest v2.3.1 release which can be done by re-adding the TopbarPlus model or downloading the latest release:

6 Likes

Hey!

Why is this happening?

image

When going in freecam mode (Shift+P) and going back it seems to fix it

1 Like

That seems like an older bug! Try updating the module on your game!

1 Like

Hi there, as Lucas mentioned this is likely to do with a bug mentioned in this release:

Can you update to the latest version and let us know if that fixes it? If not, can you share your icon constructor code?

4 Likes

Yep i was just on an older version, thanks!

1 Like